47+AI
ZH

Thedaviddias Front End Checklist

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

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

GitHub

page-weight

@thedaviddias

编程协作开源协议: MIT
/**
 * 在排查页面加载缓慢、资源体积过大,或与保持页面体积在 1500KB 以下相关的渲染延迟时使用。在给出优化建议之前,应先在 DevTools、Lighthouse…
 */

pagination

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查分页内容(博客归档、商品分类页、搜索结果)。适用于任何在多页之间拆分的内容列表或网格站点。
 */

pagination-accessibility

@thedaviddias

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

parallax-effects

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查渲染后的 HTML、交互组件或与“提供视差效果替代方案”相关的设计系统模式时使用。优先检查原生语义,然后视情况检查键盘行为、焦点流转、可访问名称以及屏幕阅…
 */

parameters

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查 URL 结构或配置搜索引擎对带过滤、排序或跟踪参数的 URL 的处理方式时使用。适用于电商网站、带过滤的内容目录,以及任何在 URL 后追加跟踪或会话参…
 */

password-field-security

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与安全密码输入字段相关的头部、表单、Cookie 或第三方集成时使用。在贴近生产的环境中验证浏览器和 HTTP 的实际行为。
 */

paste-inputs

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查与允许粘贴到表单输入框相关的渲染 HTML、交互组件或设计系统模式时使用。首先检查原生语义,然后查看键盘行为、焦点流程、可访问名称以及相关的屏幕阅读器输出…
 */

pdf-size

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 适用于审计发布可下载 PDF(报告、白皮书、法律文档、手册)的站点。任何将 PDF 作为可索引内容资源链接到的站点都适用。
 */

performance-budget

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审查 CI 配置、bundle 分析工作流,或新增依赖与资源的拉取请求时使用。区分 bundle 大小预算与运行时预算(例如 Lighthouse 或 Cor…
 */

permissions-policy

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查任何 Web 应用的 HTTP 响应头,以进行纵深防御的安全加固。
 */

physical-address

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审核本地企业网站、电商网站或任何实体存在会影响信任度与本地搜索可见性的网站时使用。
 */

picture-element

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与“使用 <picture> 配合 <img> 回退”相关的图片资源、标记以及 CDN 或构建转译。同时检查编码体积、渲染体积、加载策略以及对首屏的影响…
 */

plain-language

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审阅与“使用通俗语言”相关的渲染 HTML、交互组件或设计系统模式时使用。优先检查原生语义,再视情况检查键盘行为、焦点流转、可访问名称以及屏幕阅读器输出。
 */

pluralization

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查涉及计数的字符串拼接、翻译键查找或 i18n 库配置,以检查是否为所有目标语言环境正确处理了复数形式。
 */

preconnect

@thedaviddias

编程协作开源协议: MIT
/**
 * 在审计与关键第三方源使用 preconnect 相关的页面加载缓慢、资源过重或渲染延迟时使用。在推荐改动之前,请先在 DevTools、Lighthouse 或…
 */

privacy-policy

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查网站是否在页脚导航中提供可见且可访问的隐私政策链接。
 */

product

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计电商产品页面或为商店实现结构化数据。适用于任何销售或描述特定产品的页面。
 */

progressive-jpeg

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与 Use progressive JPEG encoding 相关的图片资源、标记以及 CDN 或构建转换。同时检查编码后大小、渲染尺寸、加载策略以及…
 */

pwa-installability

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审计 PWA 就绪状态、添加安装提示,或通过 PWA Builder 将 Web 应用提交到 Microsoft Store 或 Google Play 时…
 */

quality

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 用于评估内容页面的 SEO 质量。适用于博客文章、产品描述、着陆页或任何预期可获得自然搜索流量的页面。
 */

reading-level

@thedaviddias

设计多媒体开源协议: MIT
/**
 * 用于审查面向用户体验和 SEO 的内容页面。适用于博客文章、着陆页、操作指南以及面向广泛受众的任何长篇内容。
 */

redirect-chain

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于在 URL 迁移、域名变更或 CMS 升级后审计网站重定向。适用于随着时间推移经历过多次结构性变更的任何网站。
 */

redirect-chains

@thedaviddias

编程协作开源协议: MIT
/**
 * 在 URL 迁移、域名变更或站点重建之后审计内部链接结构时使用。适用于已经部署重定向超过一个月的任何站点。
 */

reduced-motion

@thedaviddias

编程协作开源协议: MIT
/**
 * 用于审查与尊重减弱动画偏好相关的渲染 HTML、交互动组件或设计系统模式时使用。优先检查原生语义,再根据需要审视键盘行为、焦点流转、可访问名称以及屏幕阅读器输出…
 */