David Dias

Measure how Google Tag Manager affects page loading and rendering. Identify costly tags, triggers, and requests, then guide cleanup, asynchronous loading, or a move to server-side processing based on observed performance problems.

• Investigate slow pages using GTM
• Review unused tags and triggers
• Check asynchronous script loading

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

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

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

Audit an HTTPS website for HTTP links in pages, resources, and application code. Group findings by link type, update internal URLs, and check whether external destinations support HTTPS before changing them.

• Checking links during an HTTPS migration
• Finding hardcoded HTTP URLs
• Reviewing image and script URLs

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

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.

• Checking keyboard navigation around sticky headers
• Testing pages with cookie banners and chat widgets open
• Reviewing overlap in zoomed and mobile layouts

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.

• Checking HTML IDs in forms
• Investigating unexpected keyboard focus
• Reviewing shared interactive components

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.

• Adding fallback images for broken image links
• Reviewing placeholders shown while images load
• Investigating image loading failures with logs and DevTools

Review keyboard focus, the element currently selected for interaction, to check that Tab navigation follows the page’s visual order. Identify HTML ordering issues and verify focus stays within dialogs and returns to their triggers.

• Auditing a page’s Tab navigation order
• Checking focus when dialogs open and close
• Reviewing HTML order and tabindex values

Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.

• Investigating content jumps while images load
• Finding images missing width or height attributes
• Preserving image proportions in responsive layouts

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.

• Checking a site's existing favicon configuration
• Setting up favicons for a new project
• Investigating missing icons in search results

Find costly DOM operations, the code that reads or changes page elements, and review scrolling handlers or frequent React updates. Reorganize work to reduce repeated layout calculations and verify the changes in the browser.

• Investigating stuttering animations
• Grouping DOM reads before DOM writes
• Reviewing scroll and touch event listeners

Review and fix Flexbox layouts with overflowing text, uneven item widths, or inconsistent spacing. Check rendered results across screen sizes and interaction states, then adjust sizing rules, spacing, and text overflow settings.

• Fixing overflowing text in a horizontal layout
• Making items share available width equally
• Replacing margins between items with gap

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.

• Converting require() calls to import statements
• Migrating module.exports to ES module exports
• Reviewing how browsers load modules

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.

• Review text direction on Arabic or Hebrew pages
• Handle names and posts with mixed writing directions
• Check navigation and icon layout mirroring

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.

• Reviewing personal data collected by forms
• Finding personal identifiers in analytics and logs
• Reviewing browser storage and retention periods

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.

• Setting up error monitoring for a new production app
• Investigating errors that monitoring fails to capture
• Reviewing critical alerts and on-call routing

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.

• Adding npm package references to checklist rules
• Screening packages by downloads and publishing dates
• Finding tools to detect, fix, or test a rule

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.

• Reviewing keyboard alternatives to dragging
• Checking screen reader status announcements
• Inspecting rendered drag-and-drop markup

Review decorative images and icons to prevent unnecessary screen reader announcements. Check empty alt text, aria-hidden, and relevant keyboard behavior, then suggest fixes for concrete accessibility issues without flagging decorative assets solely because they exist.

• Checking decorative images for unnecessary announcements
• Reviewing accessibility of SVGs and icons
• Checking shared decorative component patterns

Audit or draft an editorial policy for a blog, news site, or sensitive-topic publication. Cover author qualifications, research, fact-checking, corrections, and funding disclosures, and check that readers can find the policy from relevant pages.

• Drafting an editorial policy page
• Reviewing author and fact-checking standards
• Documenting corrections and funding disclosures

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.

• Reviewing error handling in asynchronous code
• Adding Error Boundaries to React components
• Improving logs for debugging

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.

• Reviewing HTML for images with captions
• Checking captions and alternative text for duplication
• Improving screen reader access to image descriptions