본문으로 건너뛰기
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)

검색에서 좁히기

Check that HTTP requests redirect to HTTPS with a permanent 301 response while preserving the page path and query parameters. Review server or CDN settings, verify response headers, and explain how HSTS helps returning visitors avoid HTTP requests.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking HTTP redirects before a site launch
  • Verifying paths and query parameters survive redirects
  • Reviewing server redirects and HSTS settings
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Check whether production JavaScript files are minified, meaning unnecessary characters are removed to reduce size. Review build settings and unused code removal, suggest configuration changes, and describe how to verify the resulting files in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Check production JavaScript minification
  • Review build settings for smaller files
  • Remove unused code from bundles
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일 업데이트

http2

무료

Investigate slow page loads and check whether resources use HTTP/2 or HTTP/3. Measure the actual bottleneck, then recommend server or CDN changes where appropriate, explaining how shared connections and compressed headers affect loading.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Investigating slow page loads
  • Checking the HTTP protocol used for resources
  • Reviewing web server or CDN settings
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

h1

무료

Audit or write a page’s main H1 heading. Find missing, repeated, empty, or brand-only headings, then suggest topic-specific text that naturally includes relevant keywords and stays consistent with the page title and content.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing page headings
  • Writing H1 headings for landing pages or blog posts
  • Checking CMS template output
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

geo-meta

무료

Audit geographic meta tags on region-specific pages, checking region codes, coordinate formats, and consistency with the intended audience. Use the findings to correct supplementary location signals while keeping language targeting and structured business data as primary approaches.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing geographic tags on regional pages
  • Checking region codes and coordinate consistency
  • Reviewing supplementary location signals for Bing
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Find optional features that slow the first page load and defer their code until a user interacts. Use dynamic imports, which load code on demand, and add immediate loading feedback while preserving the initial page experience.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Loading a map only when its panel opens
  • Deferring an editor until a user activates it
  • Reviewing chat widgets that slow initial loading
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일 업데이트

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일 업데이트

Review JavaScript written directly in HTML and move suitable code into external files. Replace inline event handlers with addEventListener, clarify browser verification steps, and explain how separating code supports maintenance, caching, and security.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Moving JavaScript out of HTML markup
  • Replacing onclick handlers with addEventListener
  • Reviewing script separation for caching and maintenance
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Set up ESLint, a tool that checks JavaScript for errors and coding rule violations. Configure shared rules, connect checks to editors and automated workflows, and review flagged code alongside its behavior in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Setting up ESLint for a JavaScript project
  • Applying consistent coding rules across a team
  • Adding code checks to editors and CI/CD
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일 업데이트

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일 업데이트

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일 업데이트

Audit important pages for settings that interfere with search indexing, including noindex directives, HTTP headers, and robots.txt rules. Identify accidental restrictions, suggest configuration fixes, and guide follow-up checks in Google Search Console.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Investigating important pages missing from Google Search
  • Checking for leftover staging restrictions after launch
  • Reviewing CMS indexing settings for pages and categories
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review image input buttons for missing or empty alternative text. Suggest alt attributes that describe actions such as searching or submitting, and explain how to verify that screen readers communicate each button’s purpose.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking alternative text on image input buttons
  • Improving labels for search and submit buttons
  • Reviewing shared image button components
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Audit page links to find missing, empty, or unusable href values and navigation handled only by JavaScript. Guide fixes using real URLs and appropriate HTML elements so search engines can discover linked pages.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing navigation links in JavaScript-heavy pages
  • Checking href values in dynamically generated links
  • Separating navigation links from action buttons
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일 업데이트

Review form validation so users, including people using screen readers, can understand and correct errors. Check field descriptions, required states, and grouped choices in rendered HTML, while accounting for React forms that handle submission in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Make form errors understandable to screen reader users
  • Check how required fields and grouped choices are marked
  • Review validation in React forms
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review pop-ups, modals, and banners that obscure page content. Identify mobile usability and search visibility concerns, then improve dismissal controls and keyboard focus, the element currently receiving keyboard input.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Review promotional pop-ups on mobile
  • Check keyboard dismissal of modals
  • Verify focus movement when dialogs open and close
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review page language attributes so HTML and XML readers receive consistent language information. Check matching lang and xml:lang values, validate language codes, and recommend keeping both attributes for XHTML or removing the unnecessary XML attribute from standard HTML5.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking language attributes in XHTML documents
  • Removing unnecessary xml:lang attributes from HTML5
  • Investigating incorrect screen reader pronunciation
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

freshness

무료

Audit article update dates across the visible page, HTTP response headers, and structured data that describes the article to search engines. Align these signals with substantive content changes and review how the CMS or build process updates them.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing update dates on articles and blog posts
  • Reviewing CMS rules for updating modification dates
  • Checking timestamps applied during static site deployments
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

https

무료

Audit whether a website serves all pages over HTTPS with valid TLS certificates, which secure connections. Check certificate coverage and expiration, permanent redirects from HTTP, and HTTPS URLs for internal links and resources, then review the necessary configuration changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing HTTPS coverage across a website
  • Checking certificate expiration and hostname coverage
  • Verifying permanent redirects from HTTP to HTTPS
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

본인 계정인가요? GitHub를 연동하면 크리에이터 페이지에 모을 수 있습니다 (일본어)