Проект позволяет выбрать диск для работы утилиты Disk Defragmenter и запустить в режиме симуляции этот увлекательный ретро-процесс, сопровождаемый звуками работы жёсткого диска старого ПК.
Согласно пояснению Морелло, этот сайт представляет собой точную копию дефрагментации диска в Windows 98, созданную автором в экспериментальных целях для изучения новых возможностей и способов в веб-разработке.
Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:
• React: для создания компонентов пользовательского интерфейса;
• Next.js: для оптимизации производительности и SEO;
• Zustand: для управления состоянием приложения;
• TailwindCSS: для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
• Radix UI Primitivesx: для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
• Vercel: хостинговая платформа для приложения.
Проблемы и решения, возникшие в ходе работы над проектом:
Воссоздание алгоритма дефрагментации.
Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Морелло создал собственный алгоритм, который:
• случайным образом выбирает кластеры для обработки;
• имитирует перемещение файлов по диску;
• регулирует скорость обработки в зависимости от выбранного виртуального диска.
Идеальное воссоздание пользовательского интерфейса с точностью до пикселя.
Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS, чтобы:
• точно сочетать цвета;
• воссоздать характерные «коренастые» границы;
• реализовать классическую типографику Windows 98.
Имитация звуков жёсткого диска.
Чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска. Эти действия включали в себя:
• запись и редактирование аутентичных звуков жёсткого диска;
• использование API веб-аудио для точного управления воспроизведением;
• синхронизации звуковых эффектов с процессом визуальной дефрагментации;
• адаптации звуков жесткого диска к выбранной скорости привода.
Что Морелло получил в качестве опыта в процессе работы с этим проектом:
• смог глубоко погрузиться в тонкости написания собственного алгоритма дефрагментации и найти баланс между производительностью и точностью моделирования;
• изучил проблемы точного моделирования устаревшего программного обеспечения;
• расширил свои границы возможного в браузерных приложениях.