重现历史：利用现代 Web 技术构建 Windows 98 磁盘碎片整理模拟器

各位开发者们，大家好！我是 Dennis Morello，一位资深前端工程师，对尖端 Web 技术和复古计算技术都充满热情。我很高兴能与大家分享我的最新项目，它融合了这些兴趣：一个忠实还原 Windows 98 磁盘碎片整理程序的程序，完全为 Web 平台打造。

查看：defrag98.com

2024 年 7 月 19 日更新：我们已加入 Product Hunt！🚀

大家好！Windows 98 磁盘碎片整理程序模拟器现已在 Product Hunt 上线。这对于项目来说是一个激动人心的里程碑，我很高兴能与更广泛的科技爱好者和怀旧爱好者分享它。

2024 年 7 月 14 日更新：刊登于 The Verge 和 Hacker News！

该项目已在Hacker News和The Verge上亮相！感谢每一位尝试过并分享对这款经典产品的热爱的朋友们。

技术栈

对于这个项目，我利用了现代 Web 开发中一些最强大的工具：

• React：用于构建 UI 组件
• Next.js：优化性能和 SEO
• 状态：管理应用程序的状态
• TailwindCSS：用于设计应用程序样式，以及98.css，以引入 Windows 98 的美感
• Radix UI Primitives：用于可访问的交互式组件，例如滑块和模态框
• Vercel：应用程序的托管平台

挑战与解决方案

1. 重建碎片整理算法

最大的挑战之一是实现一个感觉真实的碎片整理算法。我创建了一个自定义算法，它：

• 随机选择要处理的簇
• 模拟磁盘上的文件移动
• 根据所选虚拟驱动器调整处理速度

2. 像素级完美UI重现

要实现与 Windows 98 完全相同的外观和风格，需要对细节一丝不苟。我结合使用了 98.css 和 TailwindCSS 来实现以下效果：

• 精确匹配颜色
• 重现特征性的“厚实”边框
• 实现经典的 Windows 98 字体

3.模拟硬盘声音

为了增添一层怀旧感，我添加了逼真的硬盘声音。具体包括：

• 录制和编辑真实的 HDD 声音
• 利用 Web Audio API 实现精确的播放控制
• 将声音效果与视觉碎片整理过程同步
• 根据所选驱动器速度调整 HDD 声音

我学到了什么

该项目是一个绝佳的机会：

• 深入研究编写自定义碎片整理算法的复杂性，并在性能和模拟精度之间找到平衡
• 探索准确模拟遗留软件的挑战
• 突破基于浏览器的应用程序的极限

下一步是什么？

这个项目我一开始纯粹是为了好玩，但我很期待看到它的进展。我期待着继续改进这款应用，并根据用户反馈添加更多功能。

我很想听听你对这个项目的想法、建议或疑问。你做过类似的复古科技模拟吗？遇到了哪些挑战？