跳到正文
cccskills

David Dias

@thedaviddias

Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs

467 个技能6 个仓库 7.5万

技能(467)

在搜索中筛选

modern-array-methods

免费有简介AI 评分 100分

检查JavaScript中的手写循环,将适合的部分改为数组或对象的标准方法,让数据转换、筛选和汇总的意图更清楚,并结合浏览器中的实际行为验证修改。

  • 整理手写循环
  • 明确数据转换、筛选与汇总的意图
  • 检查对象转换与深拷贝
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

landmark-regions

免费有简介AI 评分 100分

检查表示页面主要区域的HTML元素及其标签,帮助改善页面结构,让屏幕阅读器用户更容易跳转到正文或导航,并能区分同类区域。

  • 检查屏幕阅读器的页内导航
  • 将通用容器改为语义化元素
  • 检查多个导航区域的标签
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

leaked-secrets

免费有简介AI 评分 90分

检查页面HTML、JavaScript和Git历史中是否暴露API密钥、密码等凭据,梳理泄露凭据的更换、服务端迁移及防止再次泄露的措施。

  • 检查浏览器端API密钥暴露
  • 调查Git历史中的凭据
  • 将使用机密信息的操作迁至服务端
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

largest-contentful-paint

免费有简介AI 评分 80分

测量页面主要内容出现所需的时间,定位图片、服务器响应和渲染过程中的瓶颈,并根据实测结果提出改进建议,帮助确定优化顺序。

  • 调查主要内容显示延迟
  • 检查主图的加载方式
  • 根据测量结果确定改进优先级
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

hsts

免费

Review HSTS, a browser policy that keeps site connections on HTTPS. Check response headers, policy duration, and subdomain coverage, guide server or CDN configuration, and explain the precautions needed before enabling browser preloading.

中文简介正在准备中。当前显示英语简介。

  • Checking HSTS headers on HTTPS responses
  • Configuring HSTS on a web server or CDN
  • Reviewing policy duration and subdomain coverage
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

heading-hierarchy

免费有简介AI 评分 100分

检查网页标题的层级跳跃、内容不符等问题,并按正文结构整理HTML标题,让屏幕阅读器用户更容易理解页面结构并在各部分之间导航。

  • 检查页面标题层级
  • 改善屏幕阅读器标题导航
  • 检查设计系统中的标题
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

freshness

免费有简介AI 评分 70分

从页面显示、HTTP响应头和结构化数据三个方面检查文章及博客的更新时间,并审查相关设置,使这些时间与正文的实质性修改保持一致。

  • 检查文章和博客的更新时间
  • 审查CMS修改更新日期的规则
  • 检查静态网站发布时的日期处理
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

gtm-present

免费有简介AI 评分 80分

实测Google Tag Manager对页面加载和显示速度的影响,检查多余的标签、触发器及加载方式,并根据测量结果提出改进建议。

  • 排查使用GTM的页面为何缓慢
  • 清理多余的标签和触发器
  • 检查异步加载设置
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

form-https

免费有简介AI 评分 90分

检查HTML表单和JavaScript请求的提交目标,找出未加密的HTTP通信,并调整目标网址、页面HTTPS配置及重定向,防止输入信息泄露。

  • 检查登录表单的提交目标
  • 检查fetch和XHR的连接目标
  • 检查省略action的表单
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

form-labels

免费有简介AI 评分 100分

检查表单输入控件与标签的关联,找出仅靠占位文字命名的字段,以及缺少组标题的选项,帮助修改标记,让屏幕阅读器更易识别并方便点击操作。

  • 检查申请表单的标签
  • 修改仅靠占位文字命名的字段
  • 检查复选框和单选按钮组
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

form-field-multiple-labels

免费有简介AI 评分 100分

检查表单输入框是否关联了多个标签,找出可能导致屏幕阅读器重复朗读或理解混乱的位置,并说明如何合并标签或使用aria-labelledby引用多段命名文本。

  • 查找输入框关联的重复标签
  • 用多段文本为同一输入框命名
  • 检查表单标签的朗读效果
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

form-validation

免费有简介AI 评分 100分

检查表单错误和必填状态能否被辅助技术识别,改善输入框与说明、错误消息的关联及选项分组,并根据表单提交方式审查实现。

  • 让屏幕阅读器能够传达输入错误
  • 检查必填字段和选项分组
  • 审查 React 表单的输入验证
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

html5-semantic-elements

免费有简介AI 评分 100分

检查网页HTML中的元素是否符合内容的实际作用,指出哪些通用div应替换为语义元素,帮助屏幕阅读器用户浏览页面,并支持搜索引擎理解页面结构。

  • 重新检查以div为主的页面结构
  • 检查模板和通用组件输出的HTML
  • 改善屏幕阅读器的页面导航结构
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

invalid-links

免费有简介AI 评分 100分

检查HTML中搜索引擎无法跟踪的链接,找出空href和仅靠JavaScript跳转的元素,并协助改用有效URL或合适的HTML元素。

  • 检查主要依靠JavaScript的页面跳转
  • 核查动态生成的链接
  • 区分页面跳转链接与操作按钮
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

javascript-inline

免费有简介AI 评分 90分

检查直接写在HTML中的JavaScript,协助将代码移至外部文件,并用addEventListener整理事件处理,改善可维护性和缓存利用,说明安全方面的好处。

  • 将JavaScript从HTML中分离
  • 将onclick改为addEventListener
  • 审查缓存利用与可维护性
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

hyphens

免费有简介AI 评分 80分

检查网址中的单词分隔符,协助将下划线或空格统一为连字符,并整理标题生成网址短名、301永久重定向、内部链接和站点地图更新的步骤。

  • 检查网址中的下划线和空格
  • 根据标题生成网址短名
  • 规划包含301重定向的网址迁移
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

javascript-linter

免费有简介AI 评分 70分

协助使用ESLint检测JavaScript语法错误与编码规范违规,配置规则并接入编辑器和CI/CD自动检查,修复错误和警告,并结合浏览器行为审查代码。

  • 为JavaScript项目引入ESLint
  • 统一团队编码规范
  • 在编辑器和CI/CD中自动检查
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

form-captcha

免费有简介AI 评分 80分

检查无需登录即可访问的公开表单,确认验证码、隐藏诱捕字段和提交频率限制,并协助接入验证码服务、添加服务器端令牌验证,防范机器人自动提交。

  • 防范联系表单的垃圾提交
  • 检查注册和登录表单的机器人防护
  • 确认验证码令牌的服务器端验证
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

horizontal-scroll

免费有简介AI 评分 100分

检查窄屏或浏览器放大时出现的横向滚动,从CSS宽度设置、图片尺寸和文本换行中查找原因,协助修改布局,使正文和图片保持在屏幕范围内。

  • 修复手机页面的横向滚动
  • 检查浏览器放大至400%时的布局
  • 排查长网址或图片溢出
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

identical-links-same-purpose

免费有简介AI 评分 100分

检查文字相同却指向不同页面的链接,协助统一目标地址或修改链接文字,让读者及屏幕阅读器用户更容易判断每个链接的去向。

  • 核对相同链接文字的目标地址
  • 改善屏幕阅读器朗读的链接文字
  • 检查共用组件中的链接
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

interstitials

免费有简介AI 评分 100分

检查遮挡正文的弹窗和模态框,核查移动端阅读、关闭操作及键盘焦点管理,帮助改善搜索可见性与无障碍访问体验。

  • 检查移动端广告弹窗
  • 确认模态框能否通过键盘关闭
  • 检查对话框开关时的焦点
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

input-image-alt

免费有简介AI 评分 100分

检查图像输入按钮的HTML,找出缺失或为空的替代文本,协助修改alt属性,让屏幕阅读器能够说明搜索、提交等按钮操作的目的。

  • 检查图像输入按钮的替代文本
  • 完善搜索和提交按钮的说明
  • 审查共用图像按钮组件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

import-on-interaction

免费有简介AI 评分 100分

找出拖慢页面首次加载的地图、编辑器等可选功能,改为在点击或获得焦点等操作后加载所需代码,并补充加载状态提示,检查初始页面和操作后的功能。

  • 打开面板时再加载地图
  • 操作编辑器时再加载代码
  • 检查拖慢首次加载的聊天功能
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

import-on-visibility

免费有简介AI 评分 90分

检查长页面和仪表盘中屏幕外的高开销组件,将其改为接近可视区域时加载,并预留布局空间,平衡首次显示负担与滚动等待时间。

  • 延迟加载仪表盘底部图表
  • 检查长落地页的加载方式
  • 提前加载嵌入内容和相关商品
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

这是你的账号吗?关联 GitHub 后可以汇总到你的创作者页面(日语)