pongo-timeline

Очень простой трекер времени. https://pongo.github.io/timeline/

Где хранятся данные

Данные хранятся в браузере (в localstorage). Чтобы очистить данные, запустите в консоли:

localStorage.removeItem('pongo-timeline-schedule')

Технические детали

Верстка

Написан на Vue. Сверстан с помощью css grid: каждая минута — это отдельная колонка (ну да, получилось 1440 колонок 😎). Блоки рисуются, задавая в grid-column-start и grid-column-end начало и продолжительность в минутах. Всё просто.

Functional Core, Imperative Shell

Мне было интересно попробовать этот подход. Попытался таким образом реализовать useSchedule, возвращающий shallowRef. Тесты. В принципе, довольно удобно.

Что было изучено

• Использование type="module" и type="importmap" без инструментов сборки.
• Верстка с помощью css grid, включая имена треков и css переменные.
• Реализация логики с помощью паттерна FCIS.
• Загрузка сайта на github pages.