跳到正文
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)

在搜索中筛选

landmark-one-main

免费有简介AI 评分 100分

检查页面是否仅有一个标识主要内容的main区域,找出缺失或重复的情况并提供修正方法,为屏幕阅读器用户明确跳转到正文的目标。

  • 检查页面模板的main区域
  • 修正组合布局中重复的main区域
  • 用屏幕阅读器验证正文跳转
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Audit CSS class names for inconsistency and ambiguity, then organize them using BEM, a convention that names components, their elements, and variations. Check the rendered interface across screen sizes and interaction states when reviewing changes.

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

  • Auditing inconsistent CSS class names
  • Renaming component classes using BEM
  • Separating utility classes and JavaScript hooks
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

modern-format

免费有简介AI 评分 90分

检查网站图片格式,协助转换为 WebP、AVIF 并设置备用图片,同时核对显示尺寸与加载方式,指出具体修改位置。

  • 查找可转换的 JPEG 与 PNG
  • 设置 WebP、AVIF 与备用图片
  • 检查 CSS 背景图片格式
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Compare button and link text with accessible names, the names assistive technology uses for controls. Identify mismatches and suggest ARIA label changes so people using voice control can refer to the words they see.

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

  • Comparing visible button text with accessible names
  • Reviewing links that are hard to activate by voice
  • Checking label fixes with accessibility tools
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review form fields to ensure each has a properly connected label. Identify placeholder-only names and missing group headings, then guide markup fixes that help screen readers identify inputs and make labels clickable.

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

  • Reviewing labels in an application form
  • Replacing placeholder-only field names
  • Checking checkbox and radio button groups
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

import-on-interaction

免费有简介AI 评分 100分

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

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

Audit a page’s HTTP requests to find unnecessary network activity behind slow loading. Confirm bottlenecks with performance measurements, then suggest changes such as combining files, grouping icons, or embedding resources needed for the initial display.

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

  • Investigating slow initial page loads
  • Finding unnecessary requests for images, CSS, and JavaScript
  • Planning file consolidation and icon sprites
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日 更新

Review HTML to find important fonts, images, and scripts discovered late during loading. Suggest resource hints, instructions that start fetching or connecting earlier, and check the final markup delivered to the browser.

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

  • Reviewing preload hints for important fonts and images
  • Checking early connections to third-party domains
  • Auditing resource hints in rendered HTML
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review CSS layouts for unwanted horizontal scrolling on narrow screens and at high browser zoom. Identify fixed widths, overflowing media, and unbroken text, then apply layout fixes that keep content readable within the viewport.

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

  • Fix horizontal scrolling on mobile pages
  • Check page layouts at 400% browser zoom
  • Review wrapping for long URLs and large images
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

image-cdn

免费

Review website image delivery and configure an image CDN, a service that optimizes and distributes images. Check file formats, dimensions, loading behavior, and initial screen impact, with guidance on verifying changes in DevTools.

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

  • Checking whether website images use a CDN
  • Configuring automatic image resizing and format conversion
  • Reviewing image loading and initial screen impact
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

javascript-minification

免费有简介AI 评分 80分

检查生产环境中发布的JavaScript是否经过压缩,审查构建配置和未使用代码的移除方式,帮助缩小文件体积、减轻加载负担,并说明修改后的浏览器验证方法。

  • 检查生产环境的JavaScript压缩
  • 缩小发布文件的体积
  • 审查未使用代码的移除
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

gtm-present

免费有简介AI 评分 80分

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

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

Find JavaScript code that changes existing objects or arrays, then replace those updates with modified copies. Review shared state and browser behavior to make data changes easier to trace and check fixes in context.

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

  • Finding direct changes to shared objects
  • Replacing push and splice with copy-based updates
  • Reviewing state updates in client components
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

html-size

免费

Audit HTML page size and identify oversized embedded JSON, SVGs, images, or scripts. Use the findings to plan lighter pages and investigate whether document size could explain content missing from Google's search index.

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

  • Investigating content missing from Google's index
  • Reviewing large JSON payloads embedded in HTML
  • Checking HTML size across an e-commerce site
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review interface copy for assumptions about disability, gender, or culture. Suggest neutral wording, clearer instructions, and constructive error messages that guide people through problems without blaming them or relying on culturally specific expressions.

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

  • Reviewing interface copy for exclusionary language
  • Rewriting error messages that blame users
  • Replacing gender assumptions with neutral wording
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

indexability-conflicts

免费有简介AI 评分 100分

梳理希望被搜索收录或排除的页面,检查robots.txt、noindex和canonical之间的冲突,查找意外收录或排除的原因,并协助按预期修正设置。

  • 检查仍被搜索收录的页面
  • 调查页面未被收录的原因
  • 检查robots.txt与noindex冲突
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review public forms for automated abuse protection. Check CAPTCHA, a mechanism for detecting bots, along with hidden trap fields and request limits, then help integrate a CAPTCHA service and validate its tokens on the server.

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

  • Checking contact forms for spam protection
  • Adding bot protection to registration and login forms
  • Reviewing server-side CAPTCHA token validation
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

https

免费有简介AI 评分 70分

检查网站是否使用有效证书通过HTTPS提供所有页面,核对证书期限和主机名覆盖范围、HTTP跳转、内部链接及资源网址,并协助修正配置。

  • 检查全站HTTPS覆盖情况
  • 确认证书期限及主机名覆盖范围
  • 检查HTTP到HTTPS的永久跳转
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Measure how quickly a webpage updates after user interactions using INP, a responsiveness metric. Identify confirmed bottlenecks and improve event handlers, split long tasks, or move heavy computation to web workers.

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

  • Investigating slow responses to clicks and other interactions
  • Reviewing event handlers and long tasks using measurements
  • Considering web workers for heavy computation
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

image-file-size

免费有简介AI 评分 80分

按用途检查网站图片文件大小,列出超标图片与压缩目标,区分容量问题和显示尺寸不匹配,并协助调整压缩、格式及不同设备的图片分发。

  • 列出超标图片及压缩目标
  • 检查 CMS 中管理的图片
  • 减小首屏主图与缩略图文件
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Check form fields for duplicate labels that may confuse screen readers or voice control. Identify affected inputs and suggest consolidating labels or using aria-labelledby, an attribute that connects a field to multiple pieces of naming text.

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

  • Finding duplicate labels on form inputs
  • Combining multiple text sources into a field name
  • Reviewing form labels with screen readers
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review web page headings for skipped levels, unclear labels, and incorrect structure. Organize HTML headings around the content so people using screen readers can understand page sections and navigate between them.

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

  • Audit heading levels on a web page
  • Improve navigation for screen reader users
  • Review headings in design-system patterns
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

Review website images and reduce file sizes while limiting visible quality changes. Check compression, formats, display dimensions, loading behavior, and delivery settings, then recommend suitable tools or build automation and verification in browser DevTools.

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

  • Find oversized images on web pages
  • Choose compression methods for photos and graphics
  • Automate image compression during builds
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

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