Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Представляю вам свой новый мини-проект, который помогает ориентироваться в часовых поясах. Итак, Timezoned:
https://timezoned.vercel.app
А теперь я расскажу, что это и зачем.
Зачем и кому это нужно
В наше время глобализация — не пустой звук. Сейчас множество людей работает удаленно, зачастую, на компанию, которая находится в другом часовом поясе. К тому же, некоторые люди время от времени переезжают между часовыми поясами (релокация или просто отпуск).
Все это немного запутывает и усложняет жизнь, потому что вчера у тебя был один часовой пояс, сегодня — другой, а послезавтра — третий, да и разница во времени между условной работой меняется не только из-за этого, но и из-за перевода часов в разное время года.
Бывает и такое, что вам назначают встречу на «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: https://github.com/kapxapot/timezoned, а деплоится сайт автоматически на бесплатной платформе Next.js Vercel.
Надеюсь, кому-то из вас будет полезной эта маленькая веб-страница! Буду рад предложениям и отзывам.
