Разработчик представил веб-сайт, который имитирует работу утилиты Disk Defragmenter в Windows 98, включая звуки HDD

Проект позволяет выбрать диск для работы утилиты Disk Defragmenter и запустить в режиме симуляции этот увлекательный ретро-процесс, сопровождаемый звуками работы жёсткого диска старого ПК.

Согласно пояснению Морелло, этот сайт представляет собой точную копию дефрагментации диска в Windows 98, созданную автором в экспериментальных целях для изучения новых возможностей и способов в веб-разработке.

Для этого проекта Морелло использовал некоторые из самых мощных инструментов современной веб-разработки, включая:

• React: для создания компонентов пользовательского интерфейса;
• Next.js: для оптимизации производительности и SEO;
• Zustand: для управления состоянием приложения;
• TailwindCSS: для стилизации приложения вместе с 98.css для придания эстетики Windows 98;
• Radix UI Primitivesx: для доступных интерактивных компонентов, таких как слайдеры и модальные окна;
• Vercel: хостинговая платформа для приложения.

Проблемы и решения, возникшие в ходе работы над проектом:

1. Воссоздание алгоритма дефрагментации.

Одной из самых больших проблем была реализация алгоритма дефрагментации, который выглядел бы аутентичным. Морелло создал собственный алгоритм, который:

• случайным образом выбирает кластеры для обработки;
• имитирует перемещение файлов по диску;
• регулирует скорость обработки в зависимости от выбранного виртуального диска.

2. Идеальное воссоздание пользовательского интерфейса с точностью до пикселя.

Чтобы добиться точного внешнего вида Windows 98, требовалось пристальное внимание к деталям. Морелло использовал комбинацию 98.css и TailwindCSS, чтобы:

• точно сочетать цвета;
• воссоздать характерные «коренастые» границы;
• реализовать классическую типографику Windows 98.

3. Имитация звуков жёсткого диска.

Чтобы добавить дополнительный слой ностальгии, Морелло реализовал реалистичные звуки жёсткого диска. Эти действия включали в себя:

• запись и редактирование аутентичных звуков жёсткого диска;
• использование API веб-аудио для точного управления воспроизведением;
• синхронизации звуковых эффектов с процессом визуальной дефрагментации;
• адаптации звуков жесткого диска к выбранной скорости привода.

Что Морелло получил в качестве опыта в процессе работы с этим проектом:

• смог глубоко погрузиться в тонкости написания собственного алгоритма дефрагментации и найти баланс между производительностью и точностью моделирования;
• изучил проблемы точного моделирования устаревшего программного обеспечения;
• расширил свои границы возможного в браузерных приложениях.