Web开发入门课程:有哪些小改动可以推进渐进式增强?

Lobsters Hottest 新闻

摘要

作者正在更新一个入门级网络开发课程,以更侧重于渐进式增强,并寻求建议和资源来改善可访问性和最佳实践。

<p>由于某些原因,我最终(可能暂时)负责了一个相当入门级的«Web开发»课程,涉及一些HTML/CSS/JS/Docker,我计划(并承诺)保持其大体可识别的形态。</p> <p>然而,我确实想添加更多关于渐进式增强是好的提醒;并征求良好要点/参考的建议。</p> <hr> <p>我将继续假设NodeJS后端,因此任何JavaScript语言功能都可以在后端演示。所以,仅仅学习使用JS总体上不能成为浏览器中做傻事的借口。</p> <p>我的计划包括比以前更多地讲述(并可能提供链接):</p> <ul> <li> <a href="https://madcampos.dev/blog/2026/07/accessibility-from-scratch/" rel="ugc">https://madcampos.dev/blog/2026/07/accessibility-from-scratch/</a> — 正确HTML的可用性和可访问性好处</li> <li> <a href="https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/" rel="ugc">https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/</a> — 在更广泛意义上的可访问性,那些仅依赖纯HTML和最小化HTML就能工作的东西</li> <li> <a href="https://learn.microsoft.com/en-us/deployedge/microsoft-edge-policies/defaultjavascriptjitsetting" rel="ugc">https://learn.microsoft.com/en-us/deployedge/microsoft-edge-policies/defaultjavascriptjitsetting</a> — MS Edge具有一个安全模式,其中JS JIT关闭(并且JS很慢)</li> <li> <a href="https://developer.chrome.com/blog/timer-throttling-in-chrome-88/" rel="ugc">https://developer.chrome.com/blog/timer-throttling-in-chrome-88/</a> — 甚至Google也承认JS对电池寿命不利…</li> <li> <a href="https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html" rel="ugc">https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html</a> — 作为提醒,不要过分信任前端完成的工作</li> <li> <a href="https://github.com/lwthiker/curl-impersonate" rel="ugc">https://github.com/lwthiker/curl-impersonate</a> — 用于一般性戏谑(更严肃地说,提醒有多少网站<em>假装</em>需要JS,但却为基于Blink的浏览器提供了完全足够的HTML,然后试图让其他浏览器难以使用,并且常常失败)</li> </ul> <p>我想一般性地强调文档、表单和应用程序是三个不同的事物。</p> <p>我将感激关于其他/相同但制作精良的要点的建议,这些要点有助于渐进式增强,不花额外努力破坏可访问性等。理想情况下,我希望能涵盖以前通常涵盖的内容,但观点转向健康方法。对可访问性的积极改进可能超出了适合的范围,也超出了我能很好解释的范围。</p>
查看原文
查看缓存全文

缓存时间: 2026/09/04 04:11

# Web开发入门课程:渐进增强的小改进方向 来源:https://lobste.rs/s/nr3ucr/webdev_intro_course_what_small_changes 由于各种原因,我最终(可能是暂时)负责了一门相当入门的「Web开发」课程,内容包含HTML/CSS/JS/Docker。我计划(也承诺过)保持课程基本框架不变。 但我确实想加入更多关于渐进增强的提示和说明;因此想请教大家在教学重点和参考资料方面的建议。 --- 我将保持对NodeJS后端的预设,因此所有JavaScript语言特性都可以在后端演示。这意味着在浏览器端使用JS的初级问题不能再以「仅需学习JS语法」为由搪塞。 我的教学计划将比以往更详细地介绍以下内容(可能附带链接): - https://madcampos.dev/blog/2026/07/accessibility-from-scratch/ —— 正确使用HTML带来的可用性与可访问性优势 - https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/ —— 纯粹极简HTML实现的广泛可访问性价值 - https://learn.microsoft.com/en-us/deployedge/microsoft-edge-policies/defaultjavascriptjitsetting —— MS Edge的JIT关闭安全模式(JS运行会变慢) - https://developer.chrome.com/blog/timer-throttling-in-chrome-88/ —— 连Google也承认JS影响电池续航... - https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html —— 提醒不要过度信任前端处理 - https://github.com/lwthiker/curl-impersonate —— 用于反制(更严肃地说,是揭示许多网站假意依赖JS,却为Blink内核浏览器提供完整HTML,再对其他浏览器设置障碍的常见现象) 同时我也会强调文档、表单和应用程序是三种不同的概念体系。 希望大家能提供更多关于渐进增强的建议(或现有方案的优质案例),以及如何避免破坏可访问性的实践要点。理想情况下,我希望在保留原有教学内容的基础上,转向更健康的技术理念进行讲解。主动的可访问性改造可能超出课程范畴,也超出了我的讲解能力范围。

相似文章

渐进式 Web Components

Hacker News Top

Ariel Salminen 介绍了 Elena,一个 2.6kB 的开源库,用于构建渐进式 Web Components,这些组件无需 JavaScript 即可渲染 HTML 和 CSS,并逐步增强。文章解释了该方法背后的设计理念和分类法。

值得记忆的原生网页技巧

Hacker News Top

HTMLcat 是一个提供针对 HTML、CSS 和 JavaScript 的小型原生网页技巧的资源,包括示例以及浏览器支持和无障碍访问的说明。

网站检查清单

Lobsters Hottest

一份全面的现代网站构建检查清单,涵盖HTML基础、SEO、无障碍性等,内容来源于网站规范。

CSS:不可避免的坏部分

Lobsters Hottest

一位非Web开发者的个人博客文章讨论了CSS中不可避免的坏部分,包括布局难题、浏览器默认设置和过度使用包装器,同时强调了可处理简单任务的子集。

告别Tailwind,学习组织CSS

Lobsters Hottest

作者反思了从Tailwind CSS迁移到带语义HTML的原生CSS的过程,分享了利用从Tailwind学到的重置、组件和工具类等系统来组织CSS的心得。