作者Mike Hall分享了他与一位UI设计师的合作经历，这位设计师认为在遵循Web内容无障碍指南（WCAG）的同时无法设计出美观的产品。然而，作者认为优秀的设计与无障碍性并不冲突，反而认为在严格的约束下往往能激发出更好的解决方案。他强调了设计本质上是“在给定约束下解决问题”，并认为这种约束可以推动创新和更有效的设计。

文章《我比之后建造的任何东西都更自豪的这128KB》由Mike Hall撰写，详细描述了他参与的一个极具挑战性的项目，该项目在极端的限制条件下实现了出色的设计和技术创新。以下是文章的主要内容总结：

1. 项目背景与挑战

• 作者曾与一位UI设计师合作，该设计师认为在遵循《Web内容可访问性指南》（WCAG）的同时，无法设计出美观的产品。作者对此持不同意见，认为好的设计和可访问性并不冲突。
• 项目客户位于非洲，当地的电信基础设施较差，用户设备多为老旧的功能手机（如Nokia 2700），浏览器主要为Opera Mini，网络连接以EDGE为主，甚至40%的用户没有智能手机。

2. 设计约束

• 128KB规则：整个应用（HTML、CSS、JavaScript、图片、字体）必须控制在128KB以内，以确保在EDGE网络下能够快速加载。
• 极致的响应式设计：代码必须兼容从240px宽的功能手机到4K桌面显示器的所有设备。
• 通用兼容性：应用必须在Opera Mini上运行，且JavaScript执行时间限制在2秒内，因此必须采用服务器端渲染。

3. 技术选择与优化

• 放弃Web字体：使用系统字体以避免字体加载时的闪烁问题（FOUT），并节省字节。
• 无框架开发：由于前端框架（如React）会超出128KB限制，团队开发了一个轻量级库Whizz，仅包含必要的DOM操作、事件处理和AJAX请求功能。
• 图片优化：使用TinyPNG和MozJPEG等工具压缩图片，并通过将JPEG导出为双倍尺寸但质量为零的方式进一步减小文件大小。同时，广泛采用SVG格式，并通过优化工具（如SVGO）和手动调整代码来减少SVG文件的大小。
• HTML、CSS、JavaScript的极致压缩：使用Gulp工具进行代码压缩，甚至对HTML进行最小化处理，以节省每一个字节。

4. 品牌要求与妥协

• 客户要求使用特定的字体和厚边框效果，但由于技术限制，最终采用SVG和PNG图片来实现标题效果。通过SVG的<defs>和<use>元素，团队成功减少了重复路径的数据量。

5. 项目成果与启示

• 最终产品在极低带宽和弱设备上表现出色，甚至在文本浏览器Lynx和游戏机浏览器上也能正常运行。
• 作者认为，项目的限制并没有限制创造力，反而推动了团队找到优雅的解决方案，这些方案在更广泛的场景中依然有效。
• 作者强调，约束是创新的基础，而不是束缚。通过重新审视约束的力量，开发者可以创造出更高效、更通用的产品。

6. 图片说明

• ：作者的头像。
• ：展示了JPEG压缩后的效果对比。
• ：客户要求的标题样式。
• ：通过SVG实现的标题效果。

7. 总结

• 作者通过这个项目深刻体会到，约束不仅是挑战，更是推动创新的动力。在极端条件下，团队找到了优雅且高效的解决方案，这些方案在更广泛的设备和网络环境中依然表现出色。作者呼吁开发者重新审视约束的力量，以创造出更好的产品。

评论总结

1. 网页大小与性能的讨论

   • 支持小网页的观点：评论2提到，Jakob Nielsen的可用性书籍建议网页大小应控制在50KB以内，而今天的网页能做到100KB左右已经是一种进步。评论4也指出，1993年的《DOOM》游戏只有3MB，而今天的登录表单却需要几十MB的JavaScript。
     • 引用："web pages should fit in 50kb, including all elements."（网页大小应控制在50KB以内，包括所有元素。）
     • 引用："the original 1993 release of DOOM weighed in at under 3MB, while today we routinely ship tens of megabytes of JavaScript just to render a login form."（1993年的《DOOM》游戏只有3MB，而今天的登录表单却需要几十MB的JavaScript。）
   • 反对小网页的观点：评论10认为，128KB的大小限制不现实，无法应对图片、视频、广告等现代需求，建议以初始加载时间作为性能衡量标准。
     • 引用："application size is a poor measure of performance."（应用程序大小是衡量性能的糟糕标准。）
     • 引用："initial load time is a better measure of performance."（初始加载时间是更好的性能衡量标准。）

2. 资源浪费与效率

   • 评论3指出，现代硬件资源被大量浪费在无实际功能价值的库上，虽然不再怀念过去严格限制的时代，但认为应更节俭地使用资源。
     • 引用："mostly those resources are piddled away in giant libraries that provide little or no actual functional value."（大部分资源被浪费在提供很少或没有实际功能价值的庞大库上。）
     • 引用："I really wonder whether we've lost something by not making more of an effort to use resources more frugally."（我真的很想知道，我们是否因为没有更节俭地使用资源而失去了什么。）

3. 约束与创新

   • 评论5认为，约束是创新的驱动力。
     • 引用："constraints drive innovation."（约束驱动创新。）

4. 对Medium平台的批评

   • 评论1、7、8指出，Medium平台的网页加载速度慢，甚至无法正常显示简化视图。
     • 引用："Ironic that simplified accessibility view doesn't work on this page."（讽刺的是，简化视图在这个页面上无法使用。）
     • 引用："it is presented on such a bloated site as medium.com that takes multiple seconds to load on a 1Gbps link."（它出现在Medium这样一个臃肿的网站上，即使在1Gbps的链接上也需要几秒钟才能加载。）

5. 编程的挑战与乐趣

   • 评论9回忆了早期编写网页广告的挑战，尽管不以此为荣，但认为在严格限制下实现目标是一种乐趣。
     • 引用："Really challenging to get the graphical results we wanted and keep it under budget (15 KB in the early days)."（在早期15KB的预算内实现我们想要的图形效果非常具有挑战性。）
     • 引用："It's really satisfying."（这真的很令人满足。）

总结

评论主要围绕网页大小、资源利用效率、约束与创新、平台选择以及编程挑战展开。支持小网页和资源节俭的观点认为，现代技术浪费了大量资源，而反对者则认为，小网页限制不现实，应以初始加载时间作为性能标准。此外，Medium平台因加载速度慢受到批评，而早期编程的严格限制则被视为一种挑战和乐趣。