@thedaviddias
Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs
467 skills6 repositories 75.2K
Measure the size and nesting of a page's DOM, the tree of HTML elements. Identify unnecessary wrappers and oversized lists, then simplify the structure or render only visible list items to reduce confirmed rendering costs.
Review CSS focus indicators, the visible outlines that show which element receives keyboard input. Identify missing, clipped, or misplaced indicators, check contrast and responsive states, and guide changes that make keyboard navigation easier to follow.
Review JavaScript module usage and convert CommonJS code to ES modules using import/export. Inspect source code and browser execution, explain how unused code can be removed during builds, and describe how to verify changes.
Review HTML lists of terms and descriptions, finding dt and dd elements used without a containing dl. Help correct the structure so assistive technologies can associate each term with its description, and explain how to verify the fix.
Review websites for content accidentally hidden by ad blockers. Identify problematic HTML class names and IDs, test affected pages with uBlock Origin, and suggest specific names that preserve the visibility and function of notices, banners, and consent controls.
Review GIFs, videos, and CSS animations for rapid flashing that may trigger seizures in photosensitive users. Check flash frequency and screen area, then suggest removing or slowing effects or replacing them with fades or static content.
Review how a website behaves when images fail to load and add fallback images or meaningful placeholder content. Check loading behavior, consider loading placeholders, and use error logging and browser developer tools to investigate and verify fixes.
Find empty links, unlabeled icon links, and broken destinations. Add descriptive text or labels that screen readers can announce, and fix or remove broken links so users can understand where each link leads.
Check and implement site icons for browser tabs, bookmarks, and mobile home screens. Review icon formats, sizes, HTML declarations, and PWA manifest settings to help the site display appropriate icons across browsers and devices.
Inspect web font loading to identify invisible text, rendering delays, and layout shifts. Use measured evidence to guide fallback text display, preloading of important fonts, and the use of compressed formats such as WOFF2.
Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.
Review drag-and-drop interfaces for keyboard and screen reader access. Inspect the rendered HTML, identify missing alternative controls and status announcements, and guide changes so users can perform equivalent actions through different input methods.
Review frequent JavaScript events and apply debounce, which waits until activity stops, or throttle, which limits execution frequency. Identify handlers causing sluggish interfaces or excessive API calls, and define browser checks for the fixes.
Add FAQ sections to landing pages or blog posts and generate FAQPage structured data, a format search engines can read. Check required question and answer fields, valid syntax, and consistency with content visitors can see.
Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.
Review links, buttons, and form fields for duplicate HTML IDs. Identify affected controls, suggest unique IDs, and explain how to verify keyboard navigation, focus movement, and screen reader behavior after the fix.
Review images and their visible captions, then connect them with figure and figcaption markup. Check caption placement and alternative text so screen readers can present the relationship between an image and its description.
Find npm packages that help implement or check a frontend rule, verify download counts and publishing dates, and add up to three qualifying package names to the rule file's metadata.
Review JavaScript error handling in source code and browser behavior. Find unhandled asynchronous failures, improve logs with useful context, and add React Error Boundaries, components that handle rendering errors, so failures are handled explicitly and are easier to investigate.
Review forms, API requests, and browser storage to find personal data that no active feature needs. Identify unnecessary collection, suggest removal or anonymisation, and check analytics and logs for exposed personal identifiers and missing retention periods.
Review CSS text sizes for mobile readability and accessibility. Identify undersized text and fixed pixel settings, suggest relative units that follow browser font preferences, and check that content and controls remain usable at 200% zoom.
Audit how quickly a page shows its first text or image. Use performance measurements to identify blocking resources, slow server responses, and rendering delays, then recommend changes tied to the confirmed bottlenecks.
Review custom elements and Web Components for missing screen reader information, keyboard controls, focus handling, and HTML form integration. Get concrete fixes and identify cases where a native HTML control could serve the same purpose.
Check third-party packages for known security vulnerabilities, review dependency versions and lock files, and plan updates or replacements. The skill also guides automated scanning in CI, the pipeline that runs project checks.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)