47+AI
ZH

Thedaviddias Front End Checklist

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

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

GitHub

service-worker

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计重复访问性能、添加离线支持,或评估 Web 应用的 PWA 就绪情况时使用。
 */

session-cookie-flags

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查服务器端会话管理、配置认证中间件,或审计 HTTP 响应头中的 Cookie 配置时使用。
 */

session-timeout-recovery

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查已认证用户流程或长表单时使用。需同时检查客户端与服务端行为:警告时机、对话框可访问性、自动保存频率、超时延长机制以及重新登录后的状态恢复。
 */

share-buttons

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于博客文章、新闻报道、教程以及其他长篇内容。与产品页、服务页或首页的相关性较低。在优化内容分发时使用。
 */

sitemap

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与“创建并提交 XML sitemap”相关的元数据、可抓取性、结构化数据或可索引性时使用。验证渲染后的 HTML 和 HTTP 响应,而非仅依赖源文件。
 */

sitemap-4xx

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何具有动态生成或人工维护的 XML 站点地图的网站。适用于排查抓取错误,或在移除页面的站点迁移之后使用。
 */

sitemap-coverage

@thedaviddias

流程自动化开源协议: MIT
/**
 * 适用于内容站点、电商网站以及任何需要及时索引新页面的网站。当排查新页面长时间才出现在搜索结果中的原因时使用。
 */

sitemap-domain

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于近期从 HTTP 迁移到 HTTPS、更换过域名,或存在 www/非 www 重定向配置的站点。在站点地图提交的覆盖报告较低时使用。
 */

sitemap-valid

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何拥有手动或程序化生成 XML 站点地图的网站。适用于调试 Google Search Console 中的站点地图提交错误。
 */

skip-link

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与实现“跳转到主要内容”链接相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,然后根据需要检查键盘行为、焦点流转、可访问名称以及屏幕阅…
 */

skip-navigation

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅渲染后的 HTML、交互组件或与「包含跳转导航链接」相关的设计系统模式时使用。优先检查原生语义,然后按需审视键盘行为、焦点流转、可访问名称以及屏幕阅读器输…
 */

slug-keywords

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于博客文章、产品页面以及任何带有可编辑 URL slug 的内容页面。适用于为新站点构建 URL 策略,或审计现有 URL 是否包含关键词。
 */

social-profiles

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于商业网站、个人品牌网站和发布商网站。用于在竞争激烈或 YMYL 类别的网站上设置 Organization 结构化数据或审计 E-E-A-T 信号时使用。
 */

source-maps

@thedaviddias

编程协作开源协议: MIT
/**
 * 在排查页面加载缓慢、资源体积过大或渲染延迟时使用。为生产环境调试提供 source map。在给出修改建议之前,请先在 DevTools、Lighthouse …
 */

special-chars

@thedaviddias

编程协作开源协议: MIT
/**
 * 适用于任何具有用户生成 slug、CMS 生成 URL 或包含非英语语言内容的站点。在审计 URL 的抓取错误或规范化问题时使用。
 */

specificity-management

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查样式表、组件样式以及与「保持 CSS 优先级低且扁平化」相关的响应式行为时使用。在提出修复方案之前,应先检查不同断点和交互状态下渲染后的布局。
 */

speculation-rules

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于优化多页面导航性能、降低页面切换时的 INP,或为快速页面加载实现渐进增强时使用。
 */

sprite-generation

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查图像资源、标记以及与「在适用场景下使用图像精灵图」相关的 CDN 或构建转换。综合检查编码大小、渲染尺寸、加载策略以及对首屏渲染的影响。
 */

srcset

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与 Use srcset for responsive images 相关的图片资源、标记以及 CDN 或构建转换时使用。需要一并检查编码后大小、渲染后大…
 */

stop-words

@thedaviddias

编程协作开源协议: MIT
/**
 * 主要在创建新内容页面时使用。对已索引的现有页面优先级较低,因为重定向风险大于收益。在构建 slug 命名规范时使用。
 */

streaming-html

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查服务端渲染配置、Next.js App Router 页面或 Node.js HTTP 处理器时使用,以验证 HTML 是否以增量方式流式传输,而不是缓冲…
 */

structured-data

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与添加结构化数据标记相关的元数据、可抓取性、结构化数据或可索引性时使用。验证渲染后的 HTML 与 HTTP 响应,而非仅依赖源文件。
 */

styles-lint

@thedaviddias

流程自动化开源协议: MIT
/**
 * 在检查与 lint CSS 和 SCSS 文件相关的样式表、组件样式及响应式行为时使用。在提出修复方案前,检查不同断点和交互状态下渲染后的布局。
 */

subgrid

@thedaviddias

编程协作开源协议: MIT
/**
 * 当需要审查内容区域错位的卡片网格布局,或任何需要让子项与同级卡片对应部分对齐且不希望使用 JavaScript 的嵌套网格时使用。
 */