News and Tools for Frontend Development
Articles and books, tips and tricks, craft and beauty from the world of frontend development.
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- The User Location Is a Lie (by) · · geolocation, javascript, apis
- Improved Error Messaging for “require(esm)” in Node.js (by) · · eleventy
- CSS Scroll Snap Module Level 2 (by+/via) · · css, scrolling
- CSS “font-size-adjust” Is Now in Baseline (by/via) · · css, typography, user-agents, support, web-platform
- How to Choose the Best Rendering Strategy for Your App (by/via) · · how-tos, rendering, strategies, server-side-rendering, client-side-rendering, incremental-static-regeneration, comparisons
- Learn Web Components (by) · · websites, courses, web-components, html, css, dom, javascript
- 20 Super Useful CSS Animation Libraries (by) · · css, animations, libraries, link-lists
- “Practical SVG” Is Now Free to Read Online (by) · · books, images, svg
- Flutter Unit Testing: Understanding “setUp()” and “setUpAll()” (by/via) · · flutter, testing
- CSS Grid Areas (by) · · css, layout
- State of React 2023 (via) · · surveys, react
- State of Developer Experience 2024 (by) · · research, developer-experience
- Getting to the Bottom of Minimum WCAG-Conformant Interactive Element Size (by/via) · · accessibility, design, wcag, css
- Macro vs. Micro Conversions (by/via) · · user-conversion, concepts, comparisons
- Why Is Spawning a New Process in Node So Slow? (by/via) · · nodejs, performance, comparisons
- Introducing Svelte 5 (by/via) · · svelte, release-notes
- The Pitfalls of In-App Browsers (via) · · user-agents, mobile, privacy, security, user-experience
- The Cloud Run Security Gap You Didn’t Know You Had (and How to Fix It) (by) · · security, google
- Override HTTP Response Headers (by/via) · · http, dev-tools, user-agents, google, chrome, microsoft, edge
- Testing Best Practices for Web Apps (by/via) · · videos, testing, best-practices, web-apps
- Summary of the June 2024 TC39 Plenary in Helsinki (via) · · ecmascript, javascript
- Expert Handling of Multiple Dimensions of Data (by) · · information-design
- Node v22.5.0 (Current) (via) · · release-notes, nodejs
- Named Alternates for WordPress (by) · · html, wordpress
- Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (by) · · web-components, css, selectors
- Flat vs. Deep Hierarchies in Information Architecture (IA) (by/via) · · videos, information-architecture, comparisons
- Private Browsing 2.0 (by+/via) · · user-agents, apple, safari, webkit, privacy
- Cloudflare Reports Almost 7% of Internet Traffic Is Malicious (by/via) · · web
- It’s Official, Meteor 3.0 Official Release Is Out! (via) · · release-notes, meteor
- Everybody’s Free (to Write Websites) (by) · · web, indieweb, blogging, writing
- Character Modeling in CSS (by/via) · · videos, css, design, creativity, effects
- An Update on Invokers: Invoker Commands in HTML (by) · · html, modals, pop-overs
- Thoughts on CSS in 2024 (by) · · css, selectors, resetting, logical-properties, custom-properties
- To Hell With the Business Case, Again (by) · · accessibility, economics
- What ARIA Still Does Not Do (by) · · html, aria, accessibility, standards
- Embracing Functional CSS: Have We Moved On? (via) · · css, presentational-css
- “@ property”: Next-Gen CSS Variables Now With Universal Browser Support (by/via) · · css, at-rules, user-agents, support, web-platform
- Content Strategy vs. UX Writing (by/via) · · content, writing, strategies, user-experience, comparisons, concepts
- Going With the PDF Reflow (by/via) · · accessibility, wcag, pdf
- Feature Detect CSS “@ starting-style” Support (by/via) · · css, at-rules, feature-detection, support, user-agents
- 3 Design Tips From a Gorgeous New Landing Page (by/via) · · videos, design, tips-and-tricks, landing-pages
- From Web to Native With React (by/via) · · react, migration
- Hiring, Lip Service, and Inclusion (by/via) · · hiring, interviewing, dei, communication
- A Guide to Reading and Writing Node.js Streams (by/via) · · guides, nodejs, streaming
- The Future of Serverless Is WebAssembly (by/via) · · videos, serverless, webassembly, visions
- Single-Directionally Allowed Overflow (by/via) · · css
- Rian Rietveld on Understanding the European Accessibility Act and Its Impact on Websites (by+/via) · · podcasts, transcripts, interviews, accessibility, legal, wordpress
- Learn About What’s New in Angular 18 From Rakia Ben Sassi (by+/via) · · videos, angular
- Publishing a TypeScript Module to npm vs. JSR (via) · · videos, typescript, modules, dependencies, npm, jsr, comparisons
- Transitive Optimization Considered—Interesting (by) · · optimization
- Introducing @ let in Angular (via) · · angular
- Homepage Design: 4 Common Mistakes (via) · · videos, usability, mistakes
- Why “page.goto()” Is Slowing Down Your Playwright Tests (by/via) · · playwright
- Bad Design Is Like a Virus: Design Defects and Latent Failures (via) · · design
- How I Develop Successful Link Building Strategies for My Clients (by/via) · · seo, strategies, links
- Don’t Use web.dev for Accessibility Info (by) · · accessibility, learning
- 15 Page Speed Optimizations That Sites Ignore (at Their Own Risk) (by/via) · · performance, optimization
- Exploring the Challenges in Creating an Accessible Sortable List (Drag-and-Drop) (by/via) · · accessibility, keyboard-navigation
- “If” CSS Gets Inline Conditionals (by/via) · · css, container-queries
- Zoom, Zoom, and Zoom (by/via) · · zooming, css
- The Magic of Clip Path (by) · · css, effects
- The Software Engineering Industry in 2024: What Changed in 2 Years, Why, and What Is Next (by) · · videos, career, visions
- Playwright vs. Puppeteer: Which Is Better in 2024? (by/via) · · playwright, puppeteer, automation, testing, tooling, comparisons
- Leaner npm Packument (Metadata) Contents (via) · · npm
- 5 Questions for Miriam Suzanne (by+/via) · · interviews, css, dei, learning
- Supply Chain Security in npm—We Can Be Optimistic About the Future (by/via) · · npm, dependencies, security, provenance
- Designing Multimodal Interfaces: Voice + Screen (via) · · design, multimedia, prototyping
- A Quick-Ish Accessibility Review: shadcn/ui Charts (by) · · accessibility, information-design, tooling, auditing, link-lists
- State of Text Rendering 2024 (by) · · fonts, rendering
- 50 Basic Linux Commands (by) · · unix-like, command-line
- Interop 2024 Mid-Year Update (by/via) · · interoperability, web-platform, user-agents, support
- How to Transform Your Approach to Digital Accessibility From a Reactive Break-Fix Cycle to a Proactive Shift Left Approach (by/via) · · how-tos, accessibility, processes, best-practices
- Utility First CSS Isn’t Inline Styles (by/via) · · videos, css, presentational-css, atomic-css, caching
- How Keyboard Navigation Works in a CSS Game (by/via) · · keyboard-navigation, css, sass
- Sneaky React Memory Leaks: How the React Compiler Won’t Save You (by) · · react, memory, compiling
- Advanced Markdown Using Extensions in Laravel (by) · · markdown, laravel
- Eleventy Buckets and Cascade Layers (by) · · eleventy, cascade, css
- Progressive Web Apps (PWA): A Comprehensive Guide · · guides, web-apps, concepts
- System Design Basics—Caching (by) · · fundamentals, caching, architecture
- How Fast Is JavaScript? Simulating 20,000,000 Particles (by) · · javascript, performance
- Creativity Is the Byproduct of Work (by) · · processes, creativity, design
- A Practical Guide to Designing for Colorblind People (by) · · accessibility, guides, design, colors, color-blindness
- Speeding Up the JavaScript Ecosystem—Isolated Declarations (by) · · performance, javascript, typescript
- What’s New With ECMAScript 2024: An In-Depth Guide on the Latest Features (by/via) · · guest-posts, guides, overviews, ecmascript
- Optimizing for AI Overviews (by/via) · · ai, seo
- How to Try Experimental CSS Features (by) · · how-tos, css, user-agents, apple, safari, google, chrome, mozilla, firefox
- What’s Coming Next for ESLint (by/via) · · eslint
- Generative AI Is a Climate Disaster (by) · · ai, sustainability
- Button Width Styles (by) · · buttons, css
- Script Integrity (by/via) · · embed-code, javascript, security
- How to Parse HTML in JavaScript (via) · · parsing, html, javascript
- Ten Years of Vue (With Evan You) (by+/via) · · podcasts, vuejs, apis, history
- Investigating Reddit’s robots.txt Cloaking Strategy (by/via) · · robotstxt, scraping, web
- Feature Detect CSS “@ property” Support (by/via) · · css, at-rules, support
- Reasons to Use Your Shell’s Job Control (by) · · shell, command-line
- Why Is This Thing in Dark Mode? (by/via) · · dark-mode, email
- Forget “Show, Don’t Tell”—Engage, Don’t Show! (by) · · communication, advocacy, developer-relations, apis
- Thoughts on Node.js, Deno, and Bun (by) · · nodejs, deno, bun, comparisons
- Top 7 WordPress Plugins for 2024: Enhance Your Site’s Performance (via) · · wordpress, plugins, performance, link-lists
- European Accessibility Act (EAA): Top 20 Key Questions Answered (via) · · legal, accessibility
- Dialog Dilemmas and Modal Mischief (by/via) · · videos, modals, pop-overs, accessibility
- Mythbusting DOM: Was DOM Invented Alongside HTML? (by) · · myths, dom, html, history
- CSS One-Liners to Improve (Almost) Every Project (by) · · css, optimization
- The Silent Crisis in Open Source: When Maintainers Walk Away (by/via) · · foss, community
- It’s About Time I Tried to Explain What Progressive Enhancement Actually Is (by/via) · · progressive-enhancement
- Tuesday, July 2, 2024 Security Releases (via) · · release-notes, nodejs, security
- Introducing the MDN HTTP Observatory (by/via) · · mozilla, http, security
- CSS Surprise Manga Lines (by) · · css, effects
- Opting in to CSS Container Queries for an Existing Design System (by) · · css, container-queries, design-systems
- WebAssembly vs. JavaScript: A Comparison (via) · · webassembly, javascript, comparisons
- TypeScript 5.5: A Blockbuster Release (by) · · typescript
- Moving From Express to Fastify (by/via) · · migration, express, fastify
- Overlays Misunderstand Accessibility (by) · · accessibility, overlays
- Accessible Form Validation From Scratch—Preparing for Validation (by/via) · · accessibility, forms, validation
- Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT) (by/via) · · guides, accessibility, wcag
- WebAuthn: Enhancing Security With Minimal Effort (by/via) · · authentication, security
- Agile Is Not… Agile Is… (by/via) · · agile, concepts
- How to Use Container Queries Now (by/via) · · how-tos, css, container-queries
- RegreSSHion: Remote Unauthenticated Code Execution Vulnerability in OpenSSH Server (by/via) · · security, ssh, vulnerabilities
- YouTube Embeds Are Bananas Heavy and It’s Fixable (by/via) · · google, embed-code, performance, tooling
- Announcing the Ladybird Browser Initiative (via) · · user-agents
- European Accessibility Act (EAA)—What You Need to Know (by/via) · · legal, accessibility
- Are Web Components Worth It? (by+) · · podcasts, web-components, html, dom, shadow-dom
- Layout and Reading Order (by/via) · · videos, css, layout
- The 3 Types of CSS Utility Classes (by) · · css, presentational-css
- Deploy AWS Lambda Functions With Serverless Framework and Node.js (by) · · deploying, aws, functions, serverless, nodejs
- Be Careful Using “Grid” (by) · · terminology
- You Don’t Know Undo/Redo (by) · · programming
- Feedback on a Pagination Pattern (by) · · pagination, accessibility
- Do Grayscale Images Take Less Space? · · images, colors, performance
- Accessible PDF Forms Online—There’s a Catch (by/via) · · accessibility, pdf, forms
- How to Annul Promises in JavaScript (by) · · javascript, promises
- Why Toggle Switches Suck (and What to Do Instead) (by) · · design, usability, anti-patterns
- 7 Ways to Champion Accessibility in Your Company (by) · · accessibility, advocacy
- Create npm Package With CommonJS and ESM Support in TypeScript (by) · · npm, dependencies, modules, typescript, javascript
- Figma AI (by) · · figma, ai, design
- Integrate Go Library Into a JavaScript Webpage With WebAssembly (by) · · go, javascript, webassembly
- 5 Questions for Bramus Van Damme (by+/via) · · interviews, css, web-platform
- A Proposal for MDN to Use the APG (by) · · accessibility, documentation
- Checkboxes: Design Guidelines (by/via) · · forms, design, guidelines, conventions
- How to Improve Your Microcopy: UX Writing Tips for Non-UX Writers (by/via) · · how-tos, writing, microcontent, user-experience, tips-and-tricks
- Product and UX: Study Guide (via) · · guides, product-management, user-experience, training, link-lists
- The True Story—as Best I Can Remember—of the Origin of Mosaic and Netscape (by) · · videos, history, user-agents, mosaic, netscape
- This Month in Servo: Text Fields, Better Emoji, Devtools, and More (via) · · release-notes, servo
- Comprehensive React.js Cheatsheet for Developers (by) · · react, cheat-sheets
- Browser Support Tests in JavaScript for Modern Web Features (by/via) · · user-agents, support, feature-detection, javascript
- “Good Commit” vs. “Your Commit”: How to Write a Perfect Git Commit Message (by) · · how-tos, documentation, version-control, git
- How We Tamed Node.js Event Loop Lag: A Deepdive (by/via) · · nodejs, event-loop, events
- Strangling the Monolith (by/via) · · videos, monoliths, micro-frontends, migration
- Don’t Be Fooled by Figma’s New AI Features (by/via) · · figma, ai
- Microsoft 1998 = Apple 2024 · · microsoft, apple, user-agents
- Why and How You Should Rate-Limit Your API · · apis
- Understanding React Hooks (by) · · react, hooks
- The Time for Designers to Learn to Code Is Now (by/via) · · design, career, tooling, training, link-lists
- A Text-Reveal Effect Using “conic-gradient()” in CSS (by/via) · · css, functions, gradients, effects
- How to Make a Strong Case for Accessibility (by/via) · · accessibility, communication, advocacy
- I Got Hacked and Blew Up Prod · · career, databases, docker, debugging
- New to the Web Platform in June (by/via) · · release-notes, web-platform, user-agents, mozilla, firefox, google, chrome, apple, safari
- Ecma International Approves ECMAScript 2024: What’s New? (by) · · ecmascript, standards
- Enhancing The New York Times Web Performance With React 18 (via) · · performance, react, case-studies
- Polyfill Supply Chain Attack Embeds Malware in JavaScript CDN Assets (by/via) · · security, vulnerabilities
- AI Anxiety and How to Design for It: Resources and Best Practices (by/via) · · ai, link-lists
- Consent, LLM Scrapers, and Poisoning the Well (by) · · ai, scraping, legal
- The Little Things: Confusing Error Messages (by) · · errors, images, developer-experience
- Advanced JavaScript Performance Optimization: Techniques and Patterns (by) · · javascript, performance, optimization, techniques, software-design-patterns
- Catching Compromised Cookies (by/via) · · cookies, security, testing
- Beyond Monospace: The Search for the Perfect Coding Font (by+/via) · · fonts, developer-experience
- Two New Artificial Intelligence Laws and Their Effects on Accessibility (via) · · accessibility, ai, legal
- The Design Purity Trap and How to Escape It (by) · · design, creativity
- How to Set Up Serverless Framework to Deploy AWS Lambda, Queues, and DynamoDB With Node.js (by) · · how-tos, serverless, deploying, aws, nodejs
- New JavaScript Set Methods (by/via) · · javascript
- Use Node Version Manager With Oh My Zsh (by) · · nvm, command-line, tooling
- Web Design Engineering With the New CSS (by/via) · · videos, css
- AI Ethicists Are Speaking Out, but Are We Listening? (by/via) · · ai, ethics
- Why Do Designers Become Managers? (via) · · design, leadership, career
- Backdoor Slipped Into Multiple WordPress Plugins in Ongoing Supply-Chain Attack (by/via) · · wordpress, plugins, security
- Concept (via) · · design, concepts
- Why Is It So Difficult to Give Best in Class Accessibility Examples of Websites? (by) · · accessibility
- In Detail: 1.4.11 Non-Text Contrast (User Interface Components) (by) · · accessibility, wcag, colors, contrast, borders
- Microfeatures I Love in Blogs and Personal Websites (by) · · blogging, functionality
- 7 Use Cases for JavaScript Proxies · · javascript
- Exploring Randomness in JavaScript (by) · · javascript, randomness
- Is It Good Design, or Does It Just Look Good? (via) · · design
- MDX or: How I Learned to Stop Worrying and Love Multimedia Writing (by/via) · · markdown, components
- Measuring Developer Experience at Google (by) · · research, developer-experience, metrics, google
- Understanding JWT Authentication: A Comprehensive Guide With Examples · · guides, examples, json-web-tokens, authentication
- Design Extremes of Custom Accessibility Actions (via) · · accessibility, design, customization
- A Rant About Front-End Development (by) · · content, html, css, javascript, preprocessors, frameworks, complexity
- Announcing TypeScript 5.5 (by/via) · · typescript, release-notes
- Bun Is Much Faster Than Node.js 22 at Decoding Base64 Inputs (by) · · bun, nodejs, performance, comparisons
- Inline Conditionals in CSS, Now? (by) · · css
- Node v20.15.0 (LTS) (by/via) · · release-notes, nodejs
- Seamless Screenshot Testing for Compose With Screenshotbot (by) · · screenshots, regressions, testing, tooling
- Simplest View Transitions Multi Page Demo (No JavaScript) (by) · · css, transitions, apis, examples
- State of JavaScript 2023 (by+/via) · · surveys, javascript
- Tracking the Impact of Our Content Design Work (by/via) · · content, design, metrics
- Uniting Web and Native Apps With 4 Unknown JavaScript APIs (by/via) · · web-apps, javascript, apis
- The Hacking of Culture and the Creation of Socio-Technical Debt (by) · · culture, security
- Know the “search” Element (by) · · html, semantics
- Footnotes Progressively Enhanced to Popovers (by/via) · · pop-overs, progressive-enhancement, javascript, css
- How to Perform Data Validation in Node.js (by/via) · · how-tos, nodejs, validation
- npm and Node.js Should Do More to Make ES Modules Easy to Use (by) · · npm, nodejs, javascript, ecmascript, modules
- Positioning Popover Elements (Pseudo-Anchoring) (by) · · pop-overs, javascript
- Understanding React Compiler (by) · · react, compiling
- Mina Tamang on SEO Techniques That Prioritise the User Experience (by/via) · · podcasts, transcripts, interviews, seo, user-experience, techniques
- Building a Responsive Menu With CSS (and No JavaScript) (by) · · responsive-design, css, navigation
- Writing a WordPress Theme in Less Than 4 KB · · wordpress, theming, minimalism, performance
- Firefox DevTools Newsletter—127 (via) · · release-notes, user-agents, mozilla, firefox, dev-tools
- A Brief Introduction to Keyboard Accessibility (by/via) · · introductions, accessibility, keyboard-navigation, focus
- How Top HR Agencies Build Trust Through Logo Designs (by/via) · · design, images, branding
- Inline Conditionals in CSS? (by) · · css
- Modern CSS Layout Is Awesome: Talking and Thinking About CSS Layout (by/via) · · css, layout
- Some UX Design Principles Startups Should Know (by/via) · · user-experience, design, principles
- How Content Creation Helped Me Land My First Tech Job (by) · · content, career
- Mike McQuaid on 15 Years of Homebrew (by+) · · interviews, foss
- Humanizing Technology in the Age of Conscious AI (via) · · ai, hci
- Say No to “console.log”! · · javascript, console
- How React 19 (Almost) Made the Internet Slower (via) · · react, performance
- htmx 2.0.0 Has Been Released! (via) · · release-notes, htmx
- The Way We Design AI Looks Like Nostalgia Already (by/via) · · design, ai
- How to Increase the Visibility of Error Messages (by/via) · · videos, errors, usability
- Building a User-Centered Product-Management Culture (by/via) · · product-management, culture, user-experience
- What Happens When a Major npm Library Goes Commercial? (by) · · npm, dependencies, foss
- Design Without Process, or the Form Factor Trap (by/via) · · design, processes
- BEM Modifiers in Pure CSS Nesting (by) · · bem, css, nesting
- Dealing With Unicode Strings, Done Right and Better (by) · · unicode, javascript
- Mastering JavaScript Generators (by) · · javascript, functions
- UUIDv7 in 22 Languages (by) · · programming, javascript, python, sql, java, php, go, dart
- What Does “aria-hidden=true” Actually Do to Interactive Elements? (by) · · accessibility, aria, user-agents, assistive-tech, screen-readers
- Dual Publishing ESM and CJS Modules With tsup and “Are the Types Wrong?” (by) · · dependencies, modules, tooling, typescript, type-safety
- I Made My Own JSON Parser (by) · · json, parsing
- Minimal SVG Favicon (by) · · svg, images, favicons, minimalism
- Researchers Uncover npm Registry Vulnerability to Cache Poisoning and DoS Attacks (by/via) · · npm, dependencies, vulnerabilities, caching, security
- Safari 18—What Web Features Are Usable Across Browsers? (by) · · user-agents, apple, safari, support, interoperability, css, javascript
- What Is Mixed Content? (by) · · security, http
- The Basics of DNS: Understanding the Internet’s Directory Service (by) · · fundamentals, dns
- OAuth Authentication (by/via) · · authentication, security
- Using AI to Encourage Best Practices in the Code Review Process (by) · · best-practices, code-reviews, ai, research
- What Are CSS Container Style Queries Good For? (by/via) · · css, container-queries
- Difference Between Docker, Kubernetes, and Podman for System Design Interview? (by) · · docker, kubernetes, interviewing, concepts
- How JavaScript Is Finally Improving the Module Experience (by/via) · · javascript, modules, developer-experience, webassembly
- Use of “ch” Unit Considered Inappropriate (in Certain Circumstances) (by) · · css, units, typography
- Writing Your First Visual Regression Check in Playwright (by/via) · · design, testing, regressions, playwright
- Setting Up Typography Variables in Figma (via) · · figma, typography
- 2-Page Login Pattern, and How to Fix It (by/via) · · forms, usability, user-experience, authentication
- Blazing Fast Websites With Speculation Rules (by/via) · · performance
- Don’t Refactor the Code (by) · · refactoring, technical-debt, maintenance, terminology
- Every Website and Web App Should Have a Service Worker (by) · · javascript, web-workers
- Learn Grid Now, Container Queries Can Wait (by/via) · · css, layout, container-queries
- Can You Be Creative Just by Creating? (by) · · design, creativity