Представляю вам свой новый мини-проект, который помогает ориентироваться в часовых поясах. Итак, Timezoned.
А теперь я расскажу, что это и зачем.
Зачем и кому это нужно
В наше время глобализация — не пустой звук. Сейчас множество людей работает удаленно, зачастую, на компанию, которая находится в другом часовом поясе. К тому же, некоторые люди время от времени переезжают между часовыми поясами (релокация или просто отпуск).
Все это немного запутывает и усложняет жизнь, потому что вчера у тебя был один часовой пояс, сегодня — другой, а послезавтра — третий, да и разница во времени между условной работой меняется не только из-за этого, но и из-за перевода часов в разное время года.
Бывает и такое, что вам назначают встречу на «3PM UTC», и поди разберись, что это для вас значит (кстати, на этот вопрос может ответить Google!).
В общем, запутаться во всех этих часовых поясах очень просто, и в итоге приходится гуглить и разбираться, что за PST такое и какая разница между этим временем и вашим.
Коснулось это и меня, поэтому я решил сделать простую веб-страницу, которая поможет мне (а, может, и кому-то еще!) во всем этом ориентироваться. В итоге получился мини-проект Timezoned.
Как этим пользоваться
Сразу можно заметить, что страница на английском языке. Текста крайне мало, а английский дает максимальный охват, поэтому выбор был я остановил именно на нем. Вообще, философией проекта был «максимально простой и полезный MVP». So this is it.
Регистрация не требуется, все данные хранятся локально в браузере. Дизайн страницы адаптивный, поэтому одинаково хорошо работает на десктопе и телефоне.
В центре экрана вы видите карточку с текущим временем и вашим часовым поясом, который определяется автоматически.
Вы можете добавлять карточки с другими часовыми поясами (кнопка «Add clock»), но не более одной карточки на одну зону. Эти карточки можно редактировать, в том числе, задавать свой заголовок. По умолчанию заголовок берется из последнего сегмента часового пояса (название города).
У карточек также есть кнопка «Timeline», которая позволяет сравнить линейки часов этого часового пояса с вашим. Также есть такая же кнопка в меню, которая позволяет посмотреть линейки любых часовых поясов без добавления их на экран.
Ну и последняя кнопка «Converter» позволяет конвертировать время из формата типа «12:00PM UTC» в ваше локальное время.
Другие особенности:
Поиск часового пояса производится не только по его названию, но и по странам и отдельным городам, а также аббревиатурам. Например, «PST» (Pacific Standard Time) выдает 4 часовых пояса в GMT-8.
В линейках часов и на карточках красным цветом отображаются вчерашние время и дата, а зеленым — завтрашние.
Как это реализовано
Этот проект для меня был интересен не только полезностью (а делал я его и для самого себя), но и возможностью применить современные фронтенд технологии, такие как:
React, Next.js и TypeScript
Tailwind CSS
Библиотеки компонентов Flowbite React и Headless UI
React Joyride (тур по странице)
Страница представляет собой SPA-приложение с серверным рендерингом. Настройки ваших часовых поясов хранятся в Local Storage браузера. Бэкенд как таковой отсутствует.
Исходники на GitHub, а деплоится сайт автоматически на бесплатной платформе Next.js Vercel.
Надеюсь, кому-то из вас будет полезной эта маленькая веб-страница! Буду рад предложениям и отзывам.
Комментарии (21)
K0styan
00.00.0000 00:00+1В Новый Год, чтобы поздравить вовремя всех разъехавшихся друзей, использовал Яндекс Время.
Но тут есть бонус: таймлайны.
a-tk
00.00.0000 00:00Таймзона Непала GMT+5.75 выглядит несколько непривычно, скажем так.
И на таймлайне так себе выглядит картинка с полуцелыми и четвертьцелыми часами.
a-tk
00.00.0000 00:00-1А что полезного можно сделать с конвертером?
kapxapot Автор
00.00.0000 00:00+2Реальный пример из моей жизни: "готовы ли вы работать в 7pm - 3am UTC?"
Можно использовать таймлайн UTC для этого, а можно и конвертер.Кроме этого, он преобразует AM/PM к 24-часовому формату.
И если 3pm очевидно чему соответствует, то 12am уже не так очевидно.Ну и еще немного надуманный пример с вашим любимым Непалом: преобразуйте к локальному времени "3:27pm kathmandu", время пошло.
CaptainFlint
00.00.0000 00:00+1Выглядит любопытно, но возникли непонятки. Во-первых, с поиском по аббревиатурам как-то не очень. Попробовал BST, CEST, CST — ничего из этого не нашлось. Далее, для тех аббревиатур, что выдают непустые результаты, обычно неочевидно, по какому критерию обнаружился тот или иной город. Хорошо бы как-то это явно обозначать: если таймзона, то вывести её название; если буквосочетание в городе, то подсветить эти буквы.
Ввёл для эксперимента MSK, получил Новосибирск, Омск, Сахалин, Минск, Москву, Симферополь. Только последние три в зоне +3, остальные разбросаны. Ну Омск ещё понятно, буквосочетание попалось. А остальные города непонятно, как в результаты попали. Минск и Симферополь в том же часовом поясе, но в мире дофига других городов в +3, почему высветились только эти?
kapxapot Автор
00.00.0000 00:00Спасибо за развернутый комментарий!
Вы правы, оно работает именно так, и выглядит это не очень понятно. Более того, попробуйте, например, ввести "petersburg" и догадайтесь, почему выводятся New York и Moscow? :)
Часовые пояса берутся из этой библиотеки. Где у каждого часового пояса есть следующие свойства:
Название, например, America/New_York.
Страна, например, Armenia (выдает Asia/Yerevan).
Аббревиатура - может отсутствовать, но где-то есть, та же MSK, вот тут уже начинается муть, можно только догадываться, почему выдаются такие результаты.
Список городов, которые тоже находятся в этом же часовом поясе (вот почему работает запрос "petersburg").
Поиск сейчас ведется по всем этим полям.
Я попробую поиграться, чтобы отображалось больше инфы на этот счет.
Про BST отдельный вопрос - это время относится к определенным часовым поясам, но не весь год. Видимо, поэтому не является постоянной аббревиатурой зон в этой базе. Та же история, например, с Нью-Йорком, зимой он EST, а летом EDT. И привязываться надо именно к часовому поясу, а не к этим значениям (хотя искать Нью-Йорк по ним и можно было бы, да).
В общем, резюмируя:
Попробую сделать результаты поиска более информативными (заодно добавлю поиск по "GMT+X/-X".
Для поддержки более широкого набора аббревиатур нужна другая база данных часовых поясов или дополнить уже используемую данными по этим аббревиатурам.
Нашел, кстати, полезную страницу в вики: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
CaptainFlint
00.00.0000 00:00Более того, попробуйте, например, ввести «petersburg» и догадайтесь, почему выводятся New York и Moscow? :)
Из-за американского Петербурга? :)
По летним-зимним зонам — да, есть проблема. Но частая ситуация: где-то написано, мол, что-то там начнётся во столько-то CEST. И по названию нет никакого способа определить, что это именно сезонное смещение. Так что поиск таких вещей был бы полезен. Можно при поиске такой зоны отображать парную запись типа «CET/CEST».kapxapot Автор
00.00.0000 00:00Можно, для начала надо придумать, откуда эти данные брать. Свою базу создавать не хочется. :)
Из-за американского Петербурга? :)
Ага.
dravor
https://www.worldtimebuddy.com/
kapxapot Автор
Спасибо, не видел этот сайт.
С одной стороны, он более наворочен, а с другой - не mobile-friendly почему-то. :(
Кстати, в качестве практики хочу еще и в виде мобильного приложения выпустить тоже.
Belibak
Mobile-friendly это прекрасно, но зачем делать в 2 строки на не-mobile?
Как мне кажется, тут более человекочитаемо + "ползунок" бегает за мышкой по "часам", если таймзон больше одной, это удобно.
kapxapot Автор
Выглядит прикольно, да. Но если выбрать тот же Катманду, получается уже какая-то каша нечитабельная.
Ну и полезность сравнивать сразу больше двух таймзон сомнительная (но выглядит прикольно, ага).
Переделал окно таймлайна, теперь в одну строку, если экрана хватает + ячейки сделал более компактными (и даже Катманду влезает у меня на мой небольшой экран):
Belibak
Спасибо, Смотрится намного лучше на большом экране, как по мне.
Будем пробовать использовать.
kapxapot Автор
И вам спасибо за предложение. :)