Review HTML forms and JavaScript requests to find data sent over unencrypted HTTP. Check submission URLs, pages with implicit form destinations, and server redirects, then update endpoints to use HTTPS.
中文简介正在准备中。当前显示英语简介。
- Checking login form submission URLs
- Reviewing fetch() and XMLHttpRequest endpoints
- Checking forms without an action attribute
thedaviddias/Front-End-Checklist☆ 7.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-Checklist☆ 7.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-Checklist☆ 7.5万2026年10月6日 更新
Audit website image file sizes against guidelines for photos, graphics, hero images, and thumbnails. Report oversized assets with target sizes, distinguish compression issues from dimension mismatches, and guide format conversion and delivery of smaller variants to mobile devices.
中文简介正在准备中。当前显示英语简介。
- Listing oversized images and target file sizes
- Reviewing uploaded images managed by a CMS
- Reducing hero image and thumbnail file sizes
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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-Checklist☆ 7.5万2026年10月6日 更新
Audit URL word separators and generate hyphenated slugs, the readable parts of page addresses. Plan changes from underscores or spaces, including permanent redirects, internal link updates, and sitemap changes.
中文简介正在准备中。当前显示英语简介。
- Auditing underscores and spaces in URL paths
- Generating hyphenated slugs from page titles
- Planning URL migrations with permanent redirects
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review where keyboard focus, the current target for keyboard input, moves when dialogs open, views change, or content updates. Identify misplaced or lost focus and propose changes that help keyboard and screen reader users continue navigating.
中文简介正在准备中。当前显示英语简介。
- Checking focus when dialogs open and close
- Reviewing focus after SPA navigation
- Keeping keyboard navigation usable during content updates
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review image filenames and replace generic names with concise, descriptive names using lowercase letters and hyphens. Update references across HTML, CSS, and JavaScript to support image search visibility and easier asset management.
中文简介正在准备中。当前显示英语简介。
- Reviewing product image filenames
- Standardizing names across an image library
- Updating references after bulk image renaming
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Review labels and instructions on file upload forms
- Check keyboard alternatives to drag and drop
- Improve upload progress and error announcements
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review repeated event listeners and consolidate them on a shared parent element. This approach, called event delegation, handles dynamically added items and reduces individual listeners while preserving the intended interaction behavior.
中文简介正在准备中。当前显示英语简介。
- Fixing interactions on dynamically added list items
- Consolidating listeners across table rows
- Reviewing click target detection
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Finding empty links across a page
- Adding destination labels to icon links
- Reviewing and fixing broken link destinations
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review styles written directly in HTML or embedded style blocks, and move suitable rules into external stylesheets. Check layouts across screen sizes and interaction states while preserving justified exceptions for critical styles and dynamic values.
中文简介正在准备中。当前显示英语简介。
- Reviewing styles written directly in HTML
- Moving embedded styles into external stylesheets
- Checking exceptions for critical CSS and dynamic values
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Review and add E2E tests, which check complete user journeys such as signing in or checking out. Identify missing coverage, organize reusable tests, and check that automated delivery workflows run them and handle failures.
中文简介正在准备中。当前显示英语简介。
- Checking test coverage for sign-in and checkout flows
- Adding tests for form submissions
- Reviewing automated test runs and failure handling in CI/CD
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Find duplicate JavaScript libraries and multiple versions loaded by a website. Confirm their impact with performance measurements, then consolidate dependencies and review third-party scripts to reduce redundant code and potential version conflicts.
中文简介正在准备中。当前显示英语简介。
- Investigating slow page loads
- Finding duplicate dependencies
- Reviewing libraries bundled with third-party scripts
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
Audit page descriptions used for search results, identify text reused across URLs, and write descriptions specific to each page. Review CMS settings and shared templates so each route outputs its own description in the final HTML.
中文简介正在准备中。当前显示英语简介。
- Auditing duplicate page descriptions across a site
- Writing descriptions for individual articles
- Reviewing shared SEO component settings
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Investigating pages with slow rendering or interactions
- Measuring HTML element counts and nesting depth
- Removing unnecessary wrapper elements
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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.
中文简介正在准备中。当前显示英语简介。
- Check HTML structure in a glossary
- Review lists of metadata labels and values
- Fix dt and dd elements missing a containing dl
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新
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
thedaviddias/Front-End-Checklist☆ 7.5万2026年10月6日 更新