본문으로 건너뛰기
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 HTML declares the correct page language and marks sections written in other languages. Find missing, empty, or invalid language tags and suggest corrections that support screen reader pronunciation, browser translation, and spell checking.

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

  • Checking the language declared for a page
  • Marking language changes in multilingual content
  • Reviewing language settings for screen reader pronunciation
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Inspect page HTML for metadata tags placed outside the head section, where page settings belong. Identify misplaced tags and guide fixes to templates or scripts that insert them into the body.

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

  • Checking metadata placement after CMS plugin changes
  • Finding metadata inserted into the body by JavaScript
  • Reviewing robots, description, OG, and canonical placement
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review a page to ensure it has exactly one main landmark, the region identifying its primary content. Find missing or duplicate main regions and get corrections that give assistive technology users a clear navigation target.

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

  • Checking the main region in a page template
  • Fixing duplicate main regions in combined layouts
  • Reviewing navigation to primary content with a screen reader
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

link-text

무료

Review links so their destinations are clear even without surrounding text. Identify vague wording, improve names announced by screen readers, and check keyboard behavior and download details such as file type and size.

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

  • Replace vague link text with clear destination names
  • Review links for screen reader users
  • Check download links for file type and size
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일 업데이트

Audit conflicting search indexing settings across robots.txt, noindex directives, and canonical tags that identify preferred URLs. Identify why pages may be included or excluded unexpectedly, and review changes that align the settings with the intended outcome.

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

  • Investigating pages that remain in Google's index
  • Checking pages unexpectedly excluded from search
  • Reviewing robots.txt and noindex conflicts
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일 업데이트

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

Review and fix HTML form fields so their input types match the data being entered. Check autocomplete settings and the final browser markup to support suitable mobile keyboards, built-in validation, and browser autofill.

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

  • Reviewing input types in an existing form
  • Improving mobile keyboards for email and phone fields
  • Adding autocomplete settings for browser autofill
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

Review rendered HTML and replace generic div elements with elements that describe their purpose, such as main, nav, and article. Clarify page structure to support screen-reader navigation, search-engine understanding, and code maintenance.

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

  • Reviewing page structure built mostly with div elements
  • Checking HTML output from templates and shared components
  • Improving page structure for screen-reader navigation
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 image alt text, the descriptions read by screen readers, for unnecessary phrases and duplication of nearby text. Identify specific images to fix and make their descriptions concise while preserving information about what the images mean.

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

  • Reviewing image descriptions for accessibility
  • Removing alt text that repeats nearby captions
  • Checking screen reader output after fixes
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일 업데이트

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

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

Review JavaScript that changes a parent element’s appearance based on its children. Find opportunities to replace class toggling with CSS :has() rules, and explain how those rules express conditions involving child elements.

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

  • Replacing JavaScript class toggling with CSS
  • Styling form containers based on input state
  • Changing parent styles when child content exists
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일 업데이트

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 iframe and frame titles so screen reader users can identify embedded content before entering it. Find missing or empty title attributes, add meaningful descriptions, and verify the changes with browser accessibility tools or assistive technology.

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

  • Checking titles on embedded advertisements and social media widgets
  • Reviewing missing or empty iframe title attributes
  • Verifying frame identification with a screen reader
thedaviddias/Front-End-Checklist7.5만2026년 10월 6일 업데이트

hreflang

무료

Check and fix hreflang tags, which identify language and regional versions of web pages for search engines. Review rendered HTML and HTTP responses to find missing reciprocal links, incorrect language codes, and fallback settings.

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

  • Auditing language and regional page settings
  • Checking reciprocal links between language versions
  • Reviewing fallback page settings
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일 업데이트

Review Front-End Checklist rule files and improve their instructions, explanations, and code examples. Use the project's quality scorer and structure validator to identify gaps, replace vague prompts, and organize each rule into a usable reference for developers and agents.

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

  • Expanding incomplete Front-End Checklist rules
  • Making AI audit and repair prompts more specific
  • Checking rule structure and quality before a PR
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 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일 업데이트

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