47+AI
ZH

Thedaviddias Front End Checklist

合集
@thedaviddias7.4万+开源协议: MIT

在审查与避免对表单字段使用 autofocus 相关的渲染 HTML、交互组件或设计系统模式时使用。先检查原生语义,再根据需要检查键盘行为、焦点流程、可访问名称…

GitHub

redundant-entry

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查任何跨越多个界面、步骤或模态阶段的流程时使用。跟随真实的用户操作路径,并跨步骤对比字段,而不是孤立审查各个界面。
 */

referrer-policy

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于审查任何处理身份验证、会话状态或敏感 URL 参数的网站上的 HTTP 响应头以加强隐私时使用。
 */

render-blocking

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计与 Eliminate render-blocking resources 相关的页面加载缓慢、资源过重或渲染延迟问题。在推荐改动前,请先在 DevTo…
 */

reset-css

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审阅与“使用 CSS reset 或 normalize 样式表”相关的样式表、组件样式以及响应式表现。在提出修复方案前,检查渲染后的布局在各断点与交互状态…
 */

resource-hints

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于排查与“使用资源提示(resource hints)以加快加载速度”相关的页面加载缓慢、资源过重或渲染延迟问题。在给出优化建议之前,请先在 DevTools…
 */

responsive-images

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查文章图片、卡片、画廊或任何在断点间以多种尺寸渲染的组件。同时检查标记和 CSS 布局,因为错误的 `sizes` 属性会抵消一个完美设置的 `srcse…
 */

responsive-size

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“以正确显示尺寸提供图片”相关的图片资源、标记以及 CDN 或构建转换。综合检查编码尺寸、渲染尺寸、加载策略以及对首屏的影响。
 */

responsive-units

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查样式表、组件样式以及与“为响应式布局使用相对单位”相关的响应式行为时使用。在提出修复方案之前,需跨断点和交互状态检查渲染后的布局。
 */

retina-display

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与支持高 DPI 视网膜显示屏相关的图片资源、标记以及 CDN 或构建转换。综合检查编码尺寸、渲染尺寸、加载策略以及首屏影响。
 */

review

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于产品页面、本地商家页面、食谱、应用、图书以及任何聚合用户评价的页面。用于审计电商或评价站点的富结果资格。
 */

right-to-erasure

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计账户设置页面、隐私仪表板或 API 路由,以验证是否为用户提供完整的数据删除路径。
 */

robots-meta

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 适用于所有 HTML 页面时使用。在审计已从搜索结果中消失的页面,或检查预发布环境与生产环境元标签一致性时使用。
 */

robots-meta-conflict

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于同时使用 robots.txt 的 disallow 规则和 meta robots noindex 标签的站点。适用于排查已被去索引的页面仍出现在搜索结…
 */

robots-txt

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何公开网站。用于审计技术性 SEO 基础或排查抓取覆盖缺口时使用。
 */

runtime-validation

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查调用 fetch()、从 localStorage 读取、访问 process.env 或处理表单提交时未对传入数据结构进行显式校验的代码。
 */

scheduler-yield

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查针对大型数据集执行同步循环、递归树遍历或批量 DOM 更新的 JavaScript 代码时使用,这些操作在中端设备上可能超过 50 毫秒。
 */

schema-noindex-conflict

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何使用结构化数据来获取富摘要的网站。用于排查有效的 schema 标记为何无法在 Google 搜索中产生富摘要。
 */

screen-reader-testing

@thedaviddias

编程协作开源协议: MIT
/**
 * 在执行网页、组件或完整用户流程的可访问性审计时使用。适用于通过辅助技术访问的所有 Web 内容。对自定义 JavaScript 部件、单页应用程序、动态更新的内…
 */

scrolljacking

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与「避免滚动劫持与自定义滚动行为」相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,再视情况检视键盘行为、焦点流转、可访问名称以及屏幕…
 */

search-input

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅与“使搜索输入可访问”相关的模板、渲染后的 HTML 或共享组件时使用。验证最终面向浏览器的标记,而非仅仅是源码中的框架抽象。
 */

select-name

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与“为 select 元素提供可访问名称”相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,然后根据需要审查键盘行为、焦点流转、可访问…
 */

semantic-lists

@thedaviddias

编程协作开源协议: MIT
/**
 * Use when reviewing rendered HTML, interactive components, or design-system patte
 */

sensory-instructions

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅与“避免仅依赖感官的指令”相关的已渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,然后视情况检查键盘行为、焦点流转、可访问名称以及屏幕阅读…
 */

service-area

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于在多个地区提供服务的服务型企业(水管工、律师、顾问等)。适用于为没有线下门店的企业规划本地 SEO 策略。
 */