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.)
- Facilitating Diversity and Inclusion in Scrum Teams · · agile, processes, inclusion
- The Gap · · css, layout
- Frontend Dogma on the Web · · announcements, link-lists
- Engineering for Slow Internet · · performance, user-experience
- Data Fetching Patterns in Single-Page Applications · · data-fetching, software-design-patterns, spas
- What to Know About the Open Versus Closed Software Debate · · open-source, ai
- Responsive Video Works Now—These Features Could Make It Work Better · · multimedia, responsive-design, performance, html
- The Different Ways to Build a Resilient Website or Web App · · resilience, comparisons
- Why We Don’t Have a Laravel for JavaScript… Yet · · laravel, javascript
- SSL for Localhost Takes 5 Seconds Now · · ssl, testing, environments
- What’s New in Angular 18 · · release-notes, angular
- The Era of Platform Primitives Is Finally Here · · frameworks, netlify
- How Can OKRs Empower the Scrum Teams? · · processes, agile, scrum
- Here’s What We Learned from the First “State of HTML” Survey · · html, lessons
- Alt Left · · accessibility, html, alt-text, anti-patterns
- A Little DevTools Snippet to Check Broken Links on a Webpage · · user-agents, dev-tools, javascript, link-rot, testing
- Old Dogs, New CSS Tricks · · css
- Multipage Version · · websites, html
- Switching It Up With HTML’s Latest Control · · html, forms
- Best Practices for Naming Design Tokens, Components, Variables, and More · · naming, design-tokens, components, best-practices
- Astro 4.9 · · release-notes, astro
- Kawaii Computing: What VTubers Can Teach Us About Design · · design, user-experience, culture
- Storybook 8.1 · · release-notes, storybook
- Popover Element Entry and Exit Animations in a Few Lines of CSS · · pop-overs, css, animations
- Modern CSS Layouts: You Might Not Need a Framework for That · · css, layout, frameworks
- Angular v18 Is Now Available! · · release-notes, angular
- Danger! Preventing Zoom from Changing Text Size · · accessibility, resizing
- Webmentions in Astro (for Blog Posts) · · astro, webmention
- When Should We Use Components and When Should We Just Use HTML? · · html, components, web-components
- Release Notes for Safari Technology Preview 195 · · release-notes, user-agents, apple, safari
- Test-Driving HTML Templates · · html, templates, testing, server-side-rendering, conformance
- A Primer on JavaScript Proxies · · introductions, javascript
- CSS Specificity for WordPress 6.6 · · discussions, wordpress, css, cascade
- Growth or Scale? · · sustainability, scaling
- Here’s What We’re Working on in Firefox · · user-agents, mozilla, firefox
- We’ve Got Container Queries Now, But Are We Actually Using Them? · · css, container-queries
- Hidden vs. Disabled in UX · · user-experience, comparisons, design-patterns
- Crafting Seamless User Experiences: A UX-Driven Approach to Log Monitoring and Observability · · user-experience, logging, monitoring
- UI Density · · design, information-design, metrics
- “<style>”: Inline Optimizations for the Bold · · html, css, performance, optimization
- Process · · processes
- Web Content Has a Maintenance Problem · · web, content, maintenance, processes, sustainability
- The Future of 11ty · · videos, eleventy, visions
- Cloning Queries in Laravel · · laravel, databases
- Weighing in on CSS Masonry · · css, layout
- On Compliance vs. Readability: Generating Text Colors With CSS · · css, functions, colors, compliance, readability, comparisons
- Visual Design: Glossary · · design, terminology
- WAI-ARIA: “role=deletion” · · accessibility, aria
- WAI-ARIA: “role=strong” · · accessibility, aria
- On Which Side Do We Put the Primary Button? · · design, usability, buttons
- CSS Container Queries in Practice · · videos, css, container-queries
- What’s New in Angular · · videos, angular
- Beyond CSS Media Queries · · css, media-queries, container-queries, layout, techniques
- What’s New in the Web · · videos, web-platform
- The WCAG 3 Working Draft Update Is Ready for Your Review · · accessibility, w3c, wcag
- CSS3? Pfff—Get Ready for CSS6! · · css, versioning
- New Field Insights for Debugging INP · · videos, performance, web-vitals
- Automate Browser Testing With Tools and Best Practices from Chrome · · videos, user-agents, google, chrome, testing, tooling, automation, best-practices
- W3C Unveils 174 New Outcomes for WCAG 3.0 · · accessibility, wcag, standards, w3c
- The Latest in Web UI · · videos, html, css, layout, effects
- What You Need to Know About Third-Party Cookie Deprecation · · videos, cookies, user-agents, google, chrome, support
- Navigating the JavaScript Framework Ecosystem · · videos, javascript, frameworks
- CSS… 5? · · css, versioning
- From Fast Loading to Instant Loading · · videos, performance, apis
- Rethinking Text Resizing on Web · · accessibility, resizing
- Comprehensive Guide to JavaScript Performance Analysis Using Chrome DevTools · · guides, javascript, performance, debugging, user-agents, google, chrome, dev-tools
- Merging Remix and React Router · · remix, react, routing
- Transforming the Relationship Between Designers and Developers · · design, collaboration, processes
- React Compiler · · react, compiling
- JavaScript Security: Simple Practices to Secure Your Frontend · · javascript, security, dependencies, csp
- Prefetching When Server Loading Won’t Do · · performance, client-side-rendering, server-side-rendering, streaming
- It’s Time to Upgrade from “Hard-Working” to “Highly Efficient” · · productivity, efficiency, product-management
- Dynamic GitHub Profile With Bun and TypeScript · · github, readme, bun, typescript
- Baseline Progressive Enhancement · · web-platform, progressive-enhancement, user-agents, support, interoperability
- State of HTML 2023 · · surveys, html
- Why Designers Aren’t Understood · · design, career, communication, terminology
- 10 Updates from Google I/O 2024: Unlocking the Power of AI for Every Web Developer · · google, web-platform, ai
- New in Chrome 125 · · release-notes, user-agents, google, chrome
- The Great Tech and People Hypocrisy · · career, leadership
- Web Platform Status · · websites, web-platform, user-agents, interoperability, support
- The CSS Stepped Value Math Functions Are Now in Baseline 2024 · · css, math, functions, user-agents, support, interoperability, web-platform
- Stop Moving Fast and Breaking Everything · · product-management, leadership, processes
- Anchor Positioning and the Popover API for a JS-Free Site Menu · · css, apis, pop-overs
- Dark Mode and Accessibility Myth · · accessibility, dark-mode
- ECMAScript Proposal: “Promise.withResolvers()” · · ecmascript, promises
- Google’s Broken Link to the Web · · google, web, searching, ai
- The Times You Need a Custom “@ property” Instead of a CSS Variable · · css, custom-properties, animations, transitions
- JavaScript Objects—Complete Guide · · guides, javascript, objects
- WebKit Features in Safari 17.5 · · release-notes, user-agents, apple, safari, webkit
- How I Made My GitHub Profile README Dynamic · · github, readme
- Intopia’s WCAG 2.2 Maps · · accessibility, wcag, cheat-sheets
- RSS Is Good, Isn’t It?! · · syndication, indieweb
- AI Product Design: Identifying Skills Gaps and How to Close Them · · design, ai, processes
- AI Isn’t Ready for UX Design · · videos, design, user-experience, ai
- Designers Are More Than Keywords and Portfolios · · design, user-experience, career
- Understanding the Role of ARIA “role=alert”: Best Practices and Common Issues · · accessibility, aria, best-practices
- Doing the Right Thing Right—Validation and Verification · · validation, terminology, comparisons
- I’m Worried About the Tabbing Behaviour, Rather Than the Syntax and Name of CSS Masonry · · css, layout, accessibility, user-experience
- The Classic Border Radius Advice, Plus an Unusual Trick · · css, borders, tips-and-tricks
- Regarding Keyboard Testing · · accessibility, keyboard-navigation, testing
- Software Engineering Principles Every Frontend Developer Should Know · · principles, craft, quality
- All I Want for GAAD · · accessibility, commemoration-days, wish-lists
- Quick Incremental Accessibility Audits for Small Business Websites · · accessibility, auditing
- Best Intention Barriers (ARIA Edition) · · accessibility, aria, auditing
- Digital Inaccessibility: Blind and Low-Vision People Have Powerful Technology but Still Face Barriers to the Digital World · · accessibility
- Manifesto for a Humane Web · · web, principles, accessibility, inclusion, security, sustainability, user-experience
- The Modern Guide for Making CSS Shapes · · guides, css, effects, techniques
- Make Your Figma Components Work Harder · · figma, design-systems, components
- Design Taste vs. Technical Skills in the Era of AI · · design, programming, ai, comparisons
- Build Your Own React.js in 400 Lines of Code · · react, jsx, principles
- Typography Terms: Glossary · · typography, terminology
- How to Document Your JavaScript Package · · javascript, dependencies, documentation, writing, jsdoc, readme
- 17 Best Developer Productivity Tools to Try · · productivity, tooling, link-lists
- Simple Implemention to Understand “worker_threads” in Node.js · · nodejs, examples, worker-threads
- Release Notes for Safari Technology Preview 194 · · release-notes, user-agents, apple, safari
- Upgrade Your HTML V · · books, html, minimalism, craft, conformance
- Why Use Web Components over Traditional DOM Manipulation? · · web-components, dom
- 37 Tips from a Senior Frontend Developer · · tips-and-tricks, fundamentals, learning, processes, career
- Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers · · javascript, events, web-components
- What Is UX (Not)? · · videos, user-experience, concepts
- Websites Are Not Books · · terminology, concepts
- Let’s Build a Web Scraper in PHP and Python · · scraping, php, python
- “Slop” Is the New Name for Unwanted AI-Generated Content · · ai, terminology
- Level-Setting Heading Levels · · headings, semantics, conformance, accessibility, aria
- Modern WordPress—Yikes! · · wordpress, theming
- Evidence-Based Management Guide, 2024—What’s New? · · release-notes, guides, agile, processes, metrics, leadership
- Why Patching Globals Is Harmful · · javascript, programming
- Introducing the Gulp Developer Survey · · surveys, gulp
- How We’re Building More Inclusive and Accessible Components at GitHub · · components, accessibility, inclusion, case-studies, github
- Javascript “var”, “let”, and “const” Explained · · javascript
- Transparent Borders · · css, borders, accessibility, contrast
- The Carcinization of Web Frameworks · · frameworks, history, signals, server-side-rendering, visions, web-components
- Focus vs. Accessibility Focus · · accessibility, focus, comparisons
- A Brief Note on Highlighted Text · · accessibility, colors, contrast, css, selectors
- Inclusive Digital Experiences: Redesign Strategies for Addressing Diverse Abilities and Accessibility Challenges II · · redesign, strategies, inclusion, accessibility
- What’s New in Node.js v22 · · videos, nodejs
- Using the Popover API for HTML Tooltips · · pop-overs, apis, html
- Mastering User-Centered Design, With 5 Advanced Tips · · usability, user-experience, tips-and-tricks, accessibility, testing
- Using Simple Tools as a Radical Act of Independence · · html, css, simplicity
- Errors Aren’t All Bad · · errors
- An Introduction to the European Accessibility Act (EAA) · · introductions, accessibility, legal
- Misconceptions About CSS Specificity · · css, cascade
- The 7 Most Useful Web Design and Web Development Glossaries · · concepts, terminology, link-lists
- Securing Client-Side JavaScript · · javascript, security, graceful-degradation
- 5 Node Version Managers Compared—Which Is Right for You? · · nodejs, comparisons, nvm, pnpm
- Shades of Grey With “color-mix()” · · css, functions, colors
- A to Z of Assistive Technology for Reading Digital Text · · accessibility, user-agents, assistive-tech, readability, concepts
- At Some Point, JavaScript Got Good · · javascript, history
- WCAG After Quarter of a Century—We Still Need More Awareness · · accessibility, wcag, community
- The Value of Open Source in Furthering Accessibility Goals · · videos, open-source, accessibility
- How Slack Automates Deploys · · deploying, automation, case-studies
- Poor Express Authentication Patterns in Node.js and How to Avoid Them · · express, nodejs, authentication, security
- Content Standards in Design Systems · · content, design-systems, processes
- So I Got Fired · · career
- Quick-and-Dirty Accessibility · · accessibility, techniques
- Web Components from Early 2024 · · web-components, link-lists
- Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling · · css, selectors, html, techniques
- How to Archive Your Design System Effectively · · design-systems, design, processes
- Frontend Development on Frontend Dogma, April 2024 AI Summary · · announcements, retrospectives
- Will the CSS Scope Feature Replace Angular’s View Encapsulation? · · angular, css, scope
- The Vue Ecosystem in 2024 · · vuejs, content-delivery, building, frameworks
- Web Development Trends We Will See in 2024 · · trends
- Introduction to htmx · · introductions, htmx
- 3 Methods to Elevate Your Writing With Visual Content · · writing, content, information-design
- If View Transitions and Scroll-Driven Animations Had a Baby… · · videos, css, transitions, animations
- How to Create Content in WordPress With AI · · content, ai, wordpress
- When to Use Bun Instead of Node.js · · bun, nodejs, comparisons
- Ryan Dahl: From Node.js and Deno to the “Modern” JSR Registry · · interviews, nodejs, deno, jsr
- Cookie Permissions: 6 Design Guidelines · · videos, cookies, consent-management, privacy, user-experience, guidelines
- Why Are My Live Regions Not Working? · · accessibility, aria, live-regions
- Using AI to Predict Design Trends · · ai, design, trends
- Demystifying React’s Types: Ref Types · · react
- Understanding What Drupal Editors and Authors Need · · drupal
- A React Developer’s Guide to Learning Solid.js · · guides, react, solidjs, comparisons
- The Evolution of Figma’s Mobile Engine: Compiling Away Our Custom Programming Language · · figma, programming, typescript, migration, case-studies
- Should We Rely on Browser Detection? · · user-agents, feature-detection
- Web Accessibility in the 2024 [U.S.] Presidential Campaigns · · accessibility, case-studies
- Use Both Ratings Average and Number of Ratings When Sorting by User Ratings · · usability, user-experience, sorting
- Pretty Much Every Website Uses the Wrong Font Size… · · videos, css
- An Alternative Proposal for CSS Masonry · · css, layout, google
- Popover API Is Here · · apis, pop-overs, html
- I Reviewed 1,000s of Opinions on htmx · · htmx
- Handling the Indentation of a Treeview Component · · css
- Composability in Design Systems · · design-systems, design, components
- New to the Web Platform in April · · release-notes, web-platform, user-agents, mozilla, firefox, google, chrome, apple, safari
- What Is Vite (and Why Is It So Popular)? · · vite
- My Approach to HTML Web Components · · html, web-components
- How to Design Accessible Forms in 10 Steps · · how-tos, design, accessibility, forms
- WebAssembly Performance Patterns for Web Apps · · webassembly, performance, web-apps
- Deprecating Support for “-ms-high-contrast” and “-ms-high-contrast-adjust” · · microsoft, edge, css, support
- CSS Inheritance · · css, cascade
- Superior Range Syntax · · css, media-queries
- Accessibility Evolution of Organizations · · accessibility, processes, economics
- No, I Don’t Want to Fill out Your Contact Form · · forms, user-experience
- The Polish Paradox · · design, optimization, user-experience
- Top 50 System Design Interview Questions for 2024 · · interviewing, architecture, link-lists
- Passkeys: A Shattered Dream · · security, authentication, passwords
- The Picture-Superiority Effect: Harness the Power of Visuals · · design, images, information-design
- What Do Developers Want from AI? · · ai, productivity, efficiency
- Ditch Dotenv: Node.js Now Natively Supports .env File Loading · · nodejs, environments, tooling
- Basic Algorithms · · algorithms, searching, sorting
- Optimizing INP: A Deep Dive · · videos, performance, debugging, web-vitals, optimization, user-agents, google, chrome, dev-tools
- Design Deja Vu · · design, html, css, history, comparisons
- Maintaining a Design System in Figma · · design-systems, maintenance, figma
- The HTML, CSS, and SVG for a Classic Search Form · · searching, forms, html, css, svg
- The Rise of Large-Language-Model Optimization · · ai, optimization
- Popover API Lands in Baseline · · pop-overs, apis, user-agents, support, interoperability, web-platform
- Conducting Accessibility Research in an Inaccessible Ecosystem · · accessibility, processes, prototyping, research
- Introduction to Manual Website Accessibility Testing · · videos, introductions, accessibility, testing
- How to Escape JavaScript for a Script Tag · · how-tos, javascript, escaping, html
- HTML Attributes vs. DOM Properties · · html, dom, comparisons
- JSR Is Not Another Package Manager · · jsr, dependencies
- Node.js 22 Available Now · · release-notes, nodejs
- The Problem With “new URL()”, and How “URL.parse()” Fixes That · · javascript, urls
- Write Better CSS With Modern CSS · · css, nesting, custom-properties, media-queries
- The Perfect Site Doesn’t Exist · · quality, maintenance, processes
- Why Don’t We Talk About Minifying CSS Anymore? · · css, minification, performance
- The New “!important” · · css, cascade
- Printing Music With CSS Grid · · css, examples
- Celebrate JavaScript Naked Day Every Year on April 24 · · javascript, commemoration-days, maintainability, graceful-degradation
- Node.js Next 10 Survey—2024 · · surveys, nodejs
- Adding ESLint and Auto-Fixing an Existing TypeScript Project · · eslint, typescript, quality, automation
- Comparing Full Stack and Headless CMS Platforms · · comparisons, content-management, wordpress, drupal
- Creating Fluid Typography With the CSS “clamp()” Function · · css, functions, typography
- F-Shape Pattern and How Users Read · · usability, design
- Hello Bun: How Sveld Now Deploys 2× Faster on GitHub and Render · · bun, deploying, performance, case-studies
- The First Framework That Lets You Visualize Your React/Node.js App · · frameworks, react, nodejs
- The Front End Developer/Engineer Handbook 2024 · · overviews, career, learning, tech-stacks, concepts, terminology
- Update on the Plan for Phase-Out of Third-Party Cookies on Chrome · · cookies, privacy, user-agents, google, chrome
- Reflecting on My Programming Career · · career
- Your Page Can’t Change Media Features · · css, media-queries, user-experience, apis
- How the Meaning of Colour Varies per Culture · · colors, culture
- Notes on Quality · · design, user-experience, quality
- Using Vite to Rebuild Local Dependencies in an npm Workspace · · vite, npm, dependencies
- Latency Numbers Every Frontend Developer Should Know · · performance, metrics, terminology
- Images as the First Thing in a Button or Link · · accessibility, html, images, buttons, links
- Invoking Elements by Using Only HTML: A First Look at Invokers · · html, modals, pop-overs
- 15 Essential UX Design Principles and Practices for Developers · · user-experience, principles, best-practices
- The Crucial Dance: Enhancing Designer–Developer Collaboration for Exceptional Products · · collaboration, processes
- Using Legitimate GitHub URLs for Malware · · security, github
- What You Can Do as a Web Builder on Earth Day · · sustainability, ai
- Write Alt Text Like You’re Talking to a Friend · · accessibility, alt-text
- The Ultimate Collection of CSS-Only Shapes · · websites, css
- 5 Hidden CSS Properties You Didn’t Know Existed · · css
- 3 Essential Design Trends, May 2024 · · design, trends
- What Is CI/CD Pipelines: A Crucial Skill for Every Software Engineer · · ci-cd, concepts
- Creating a UX Playbook for Onboarding Users to Your Product · · user-experience, onboarding, product-management
- State of Design Tokens 2024 · · videos, design-tokens, figma, tooling
- Considerations for AI Opt-Out · · ai
- Detect JavaScript Support · · css, javascript, media-queries, support