Представляю вам свой новый мини-проект, который помогает ориентироваться в часовых поясах. Итак, 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.

Надеюсь, кому-то из вас будет полезной эта маленькая веб-страница! Буду рад предложениям и отзывам.