@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
Audit and set up favicons, the small site icons used in browser tabs and search results. Check HTML links, image formats and dimensions, HTTPS access, and crawler restrictions, with guidance for ICO, SVG, and iOS icons.
Set up or review production error monitoring to capture unhandled errors, failed requests, and performance signals. Check event context, release labels, and alert routing so teams receive useful information when problems occur.
Review loading priorities for key images, fonts, and CSS, then adjust fetchpriority hints so important resources receive attention earlier. Use it to improve LCP, the time until the largest visible content appears.
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.
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 pages for languages written from right to left, including Arabic and Hebrew. Guide HTML direction settings, mixed-direction user content, and layout checks so browsers and screen readers handle text in the intended order.
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.
Review file upload interfaces for clear labels, accepted formats, size limits, and accessible progress and error messages. Check that keyboard and screen reader users can complete uploads, including alternatives to drag and drop.
Find repeated colors, spacing, and font sizes in CSS, then organize them into custom properties, reusable values referenced with var(). Review their use across components and screen sizes, and explain how overrides support theme changes.
Review JavaScript variable declarations, report every use of var with line numbers, and replace declarations with const or let according to reassignment. Explain variable scope and initialization behavior, and check affected browser execution paths.
Compare the preferred page URL declared in HTML canonical tags with the one sent in HTTP Link headers. Identify conflicting declarations, recommend consistent values, and explain how to verify the final page and response.
Review a website’s Content Security Policy, which controls allowed resources, and identify unsafe HTML insertion. Guide policy changes and sanitization, then verify actual HTTP responses and browser behavior in a production-like environment.
Audit page speed in a real browser to find delays in loading, script execution, and layout. Use measured results to identify bottlenecks, compare device and connection conditions, and guide performance improvements.
Set up Pact tests that record what a frontend expects from an API and verify those expectations against the backend. Review these contract tests to catch incompatible changes and help services be tested and deployed independently.
Find and fix malformed HTML, including unclosed tags, incorrect nesting, and document structure errors. Inspect rendered HTML and HTTP responses to identify specific pages or templates with problems that may affect rendering and search engine parsing.
Find broken or fragile image references in markup, styles, and components. Correct paths, restore missing assets, and add fallback images, then verify how the page behaves when image requests fail.
Audit slow page loads by measuring how static files, such as images and scripts, are delivered. Check CDN usage, a network of distributed servers, and identify caching or delivery settings that need improvement.
Review layouts that need alignment across both rows and columns, and suggest CSS Grid changes. Check rendered behavior at different screen widths and explain sizing, named areas, and grids that adapt to their content.
Audit CSS file sizes and loading behavior to find stylesheets that delay page rendering. Confirm the problem with performance measurements, then reduce unnecessary CSS through minification, unused-style removal, or splitting files by page.
Review conflicting CSS rules and organize styles with cascade layers, explicit groups that control override order. Define layers for resets, base styles, components, and utilities to make large stylesheets easier to reason about and maintain.
Check website behavior across Chrome, Firefox, Safari, and Edge, and fix browser-specific problems. Review desktop and mobile test coverage alongside CI, the automated checks run during development, to identify gaps that let regressions pass.
Audit publication and update dates on articles and blog posts. Add visible dates and structured metadata, information search engines can read, and check that modification dates reflect meaningful content changes rather than routine deployments.
Investigate chains of dependent resource requests that delay a page’s first display. Use performance measurements to identify bottlenecks, then reduce waiting by embedding essential CSS or preloading important assets discovered late in the chain.
Check canonical tags that tell search engines the preferred URL for a page. Review rendered HTML and HTTP responses, identify missing or incorrect settings, and help correct duplicate-page signals caused by URL variations.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)