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.)
- F-Shape Pattern and How Users Read · · usability, design
- Using Legitimate GitHub URLs for Malware · · security, github
- 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
- April 24 Is JS Naked Day · · javascript, maintainability, graceful-degradation
- Detect JavaScript Support · · css, javascript, media-queries, support
- Long Alt · · accessibility, alt-text, support, user-agents, screen-readers, assistive-tech
- How to Work With GraphQL in WordPress in 2024 · · how-tos, wordpress, graphql
- The End of an Era: Women Who Code Closing · · community
- Git Common Developer Pitfalls and Solutions · · git
- Converting Plain Text to Encoded HTML With Vanilla JavaScript · · conversion, html, javascript
- Upgrading jQuery: Working Towards a Healthy Web · · jquery, maintenance, migration
- Property Hooks Are Coming in PHP 8.4 · · php, hooks
- Displaying HTML Web Components · · web-components, css
- The Invisible Seafaring Industry That Keeps the Internet Afloat · · web
- Things That Can Break “aspect-ratio” in CSS · · css
- [pnpm] v9.0.0 · · release-notes, pnpm
- Open Source Security (OpenSSF) and OpenJS Foundations Issue Alert for Social Engineering Takeovers of Open Source Projects · · open-source, security
- How a Successful Website Migration Led to a 20% Increase in Keyword Rankings · · migration, processes, seo, sem
- ARIA in HTML · · standards, accessibility, aria, html
- Five Ways Cookie Consent Managers Hurt Web Performance (and How to Fix Them) · · cookies, consent-management, performance
- An Intro to Flexbox · · introductions, css, layout
- Document Collaboration (With Comments!) · · documentation, collaboration, comparisons, link-lists
- Interview With Senior JS Developer 2024 · · videos, interviews, javascript, frameworks, libraries, tech-stacks, tooling, web-platform
- What If You Had Real Control over Light Mode / Dark Mode on a Per-Site Basis? · · apis, dark-mode
- My “Skip to Content” Markup Was Breaking the Back Button on iOS · · html, links, accessibility, mobile
- Things You Should Do in Your Dev Journey · · career
- 10 Things Software Developers Should Learn About Learning · · research, learning
- Monitoring BFCache Blocking Reasons · · caching, monitoring, debugging, performance
- Blockin’ Bots · · scraping, ai, apache, configuration
- How Do Open Source Licenses Work? The Ultimate Guide · · guides, open-source, licensing
- Zombie Estimation · · scrum, processes
- Web Accessibility Statement: How to Write One · · how-tos, accessibility, writing
- Gap Is the New Margin · · css, layout
- Release Notes for Safari Technology Preview 192 · · release-notes, user-agents, apple, safari
- Notes on Git’s Error Messages · · git, errors
- Optimizing WebKit and Safari for Speedometer 3.0 · · webkit, user-agents, apple, safari, performance, optimization
- Wednesday, April 10, 2024 Security Releases · · release-notes, nodejs, security
- Control Your Vertigo—the Unspoken Rule for Defending Design Decisions · · design, user-experience
- JS Naked Day · · websites, javascript, maintainability, graceful-degradation
- Happy CSS Naked Day 2024 · · announcements, css, maintainability
- Layered Toggles: Optional CSS Mixins · · css, techniques
- The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps · · accessibility, legal, web, mobile
- Recapping ng-conf 2024 · · angular
- Figma Prototypes vs. HTML Prototypes · · design, processes, prototyping, figma, html, comparisons
- Sending Email Using Node.js · · nodejs, email
- React Server Components in a Nutshell · · react, components
- Ableism and Related Terms You Need to Know · · terminology, communication, inclusion
- Inclusive Digital Experiences: Redesign Strategies for Addressing Diverse Abilities and Accessibility Challenges · · redesign, strategies, inclusion, accessibility
- Node.js Debugging in Chrome DevTools · · nodejs, debugging, tooling, user-agents, google, chrome, dev-tools
- User Experience in the Era of AI: Enhancing Human-Machine Interactions · · user-experience, ai
- Misinformation and Disinformation Online: What Design Can Do to Remedy This Problem · · design, communication
- Justice Department to Publish Final Rule to Strengthen Web and Mobile App Access for People With Disabilities · · accessibility, legal, web, mobile
- Things That I Like Better in Vue Than in React · · vuejs, react, frameworks, comparisons
- What Is Whitespace? · · videos, design, concepts, terminology
- Testing HTML With Modern CSS · · html, css, testing, quality
- Demystifying the Shadow DOM · · dom, shadow-dom
- Blind Internet Users Struggle With Error-Prone AI Aids · · accessibility, ai
- [zx] 8.0.0 · · release-notes, zx
- Why I’m Yet Another Woman Leaving the Tech Industry · · career, community
- Creativity in Software Engineering · · research, creativity, programming
- DevTools Tips and Tricks · · user-agents, dev-tools, tips-and-tricks
- Should Designers Code? · · design, career
- Drive-By Accessibility Tweaks · · accessibility
- Managing User Focus With “:focus-visible” · · css, selectors, focus
- The V8 Sandbox · · v8, security
- AI and the Future of Web Accessibility Guidelines · · discussions, accessibility, wcag, standards, ai, w3c
- A Complete Guide to CSS Logical Properties, With Cheat Sheet · · guides, css, logical-properties, cheat-sheets
- When to Use “tabindex="0"” · · accessibility, keyboard-navigation, focus, html
- Rounded Tabs With Inner Curves · · css, effects
- Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks? · · dns, security
- Using JSON Web Tokens With Node.js · · json-web-tokens, nodejs, security, authentication
- Wednesday, April 3, 2024 Security Releases · · release-notes, nodejs, security
- “aspect-ratio” Gotcha · · css, images
- Svelte Parses HTML All Wrong · · svelte, html, parsing
- In-Page Links: 3 Usability Tips · · videos, links, usability, tips-and-tricks
- An Advanced Way to Use CSS Variables · · css, custom-properties
- Theming Design Systems · · design-systems, theming
- Hanging Punctuation in CSS · · css, typography
- Finally Understand Responsive Design · · videos, responsive-design, css
- BFCache Explained · · caching, performance
- AI and the Web: Understanding and Managing the Impact of Machine Learning Models on the Web · · ai, web
- How to Build a Simple Web Server With Node.js · · how-tos, servers, nodejs
- The View Transitions API · · transitions, apis, astro
- WebAssembly at Google · · videos, webassembly, google
- WordPress 6.5 “Regina” · · release-notes, wordpress
- Learn JavaScript · · courses, javascript
- How to Get Somebody Fired Using Git · · version-control, git, career
- An Interactive Guide to CSS Container Queries · · guides, css, container-queries
- Infinite-Scrolling Logos in Flat HTML and Pure CSS · · branding, scrolling, animations, techniques, css
- Authentication in Next.js · · authentication, nextjs
- Drawing a Line to Connect Elements With CSS Anchor Positioning · · css
- A Complete Guide for Content Creators to Start Making Accessible Content · · guides, accessibility, content
- Bun 1.1 · · release-notes, bun
- Micro Frontends with Native Federation · · micro-frontends, comparisons
- What Even Is a JSON Number? · · json, terminology
- 14 Top UX Tools for Designers in 2024 · · user-experience, tooling, link-lists
- The Detail, the Quality · · design, quality
- Why I Care Deeply About Web Accessibility and You Should Too · · accessibility, web
- Latest WebAIM’s Million—Some Thoughts · · accessibility
- The DevOps Basics · · dev-ops, fundamentals
- Kobold Letters · · html, email, support
- Why I Use Node, Deno, Bun, [QuickJS], [txiki.js] at the Same Time · · tooling, nodejs, deno, bun
- 10 JavaScript Sites Every Web Developer Should Know · · javascript, learning, link-lists
- Object Structure in JavaScript Engines · · javascript, objects, engines
- Design Is a Process of Getting Stuck · · design, processes
- The Easy Way to Access the Last JavaScript Array Element · · javascript, arrays
- The WebAIM Million: The 2024 Report on the Accessibility of the Top 1,000,000 Home Pages · · studies, research, accessibility, metrics
- What Negative Effects Does a Bad Website Design Have on My Business? · · design, economics
- Front-End Development’s Identity Crisis · · career
- Figma Plugins · · figma
- On “disabled” and “aria-disabled” Attributes · · accessibility, html, aria
- The Power of “:has()” in CSS · · css, selectors
- The Curious Case of the CSS Monochrome Media Query · · css, media-queries
- “@ scope” Is Coming to CSS and It’s Amazing · · videos, css, scope
- Release Notes for Safari Technology Preview 191 · · release-notes, user-agents, apple, safari
- Improving the Developer Experience of Enterprise Design Systems · · design-systems, developer-experience, optimization
- History of JS Interop in Dart · · javascript, dart, interoperability, history
- The Complete Guide to Captioned Videos · · guides, accessibility, captions, multimedia
- New to the Web Platform in March · · release-notes, web-platform, user-agents, mozilla, firefox, apple, safari, google, chrome
- CSS Color-Scheme-Dependent Colors With “light-dark()” · · css, functions, colors, dark-mode
- A Guide to Building CLI Tools in JavaScript · · guides, tooling, command-line, javascript, nodejs
- What’s New in DevTools, Chrome 124 · · release-notes, dev-tools, user-agents, google, chrome
- Iterator Helpers · · ecmascript, engines, v8
- Meet Angular’s New “output()” API · · angular, apis
- In-App Browsers Are Still a Privacy, Security, and Choice Problem · · user-agents, mobile, privacy, security
- Flickering Glowing Text Effect With CSS · · css, effects
- How to Take Control of Flexbox · · videos, css, layout
- CSS Anchor Positioning · · css
- How to Use jQuery’s “ajax()” Function for Asynchronous HTTP Requests · · how-tos, jquery, functions
- Quick Tip: How to Align Column Rows With CSS Subgrid · · tips-and-tricks, how-tos, css, layout
- What You Need to Know About Modern CSS (Spring 2024 Edition) · · css, overviews
- Node v20.12.0 (LTS) · · release-notes, nodejs
- Convention over Creativity? The Ups and Downs of UX Design · · user-experience, design
- Exploring the Power of ARIA Live Attribute in Web Accessibility · · accessibility, aria
- Be Flexible About What People Need (and Don’t Assume) · · accessibility
- Animating Clip Paths on Scroll With “@ property” in CSS · · css, animations, scrolling
- History of Web Accessibility · · videos, accessibility, history
- Setting and Persisting Color Scheme Preferences With CSS and a “Touch” of JavaScript · · colors, dark-mode, css, javascript
- Error Messages 101 · · videos, usability, errors, microcontent
- 7 Simple Rules for Better Data Visualization · · information-design
- How to Consolidate Multiple Design Systems · · design-systems, processes
- Spicing Up Text With “text-emphasis” in CSS · · css, typography, effects
- Diving into the Node.js Website Redesign · · redesign, case-studies
- JavaScript Visualized: Promise Execution · · javascript, promises
- Incredible JavaScript Animation Libraries · · javascript, animations, libraries, link-lists
- No One Actually Wants Accessibility · · accessibility
- Radix Themes 3.0 · · release-notes, radix
- ARIA “role="application"” and Mobile Screen Readers · · accessibility, aria, user-agents, assistive-tech, screen-readers, mobile
- Profile Node.js Performance With the Performance Panel · · nodejs, performance, debugging, user-agents, google, chrome, dev-tools
- Learn OAuth 2.0 by Building Your Own OAuth Client · · authorization, functionality
- Accessible Forms With Pseudo Classes · · accessibility, forms, css, selectors
- CSS Values and Units Module Level 3 · · css, units
- The “Current Branch” in Git · · git
- Node.js TSC Confirms: No Intention to Remove npm from Distribution · · nodejs, npm
- CAPTCHA Excludes Disabled Web Users · · accessibility, captcha
- 12 Figma Tips to Work More Efficiently · · figma, tips-and-tricks, efficiency
- Quick Tip: How to Add Gradient Effects and Patterns to Text · · tips-and-tricks, how-tos, css, gradients, effects
- Don’t Get Scammed by Fake Performance Experts and Apps · · performance, tooling
- Going Beyond Pixels and (r)ems in CSS—Absolute Length Units · · css, units
- The Cost of Interrupted Work: More Speed and Stress · · research, productivity, processes
- Optimizing JavaScript for Fun and for Profit · · javascript, optimization
- Node.js: The Documentary · · videos, nodejs, history
- How to Test 3.3.8 Accessible Authentication (Minimum) · · how-tos, accessibility, testing, authentication
- On the Gift of OKR for Company Culture · · processes, culture
- Building a Micro htmx SSR Framework · · frameworks, htmx, examples
- This Pattern Will Wreck Your React App’s TS Performance · · design-patterns, react, typescript, performance
- Welcome to Future of Web Accessibility Based on Predictors · · videos, accessibility, visions
- [Bulma] 1.0.0 · · release-notes, bulma
- “__dirname” Is Back in Node.js With ES Modules · · nodejs, modules, javascript
- On Popover Accessibility: What the Browser Does and Doesn’t Do · · accessibility, pop-overs, html
- Aesthetic Layouts: 2 Column Magazine With “shape-outside” · · code-pens, layout, css
- How to Create a Website and a PDF from the Same Codebase · · how-tos, code-generation, functionality
- How to Plan Your First Successful Website · · how-tos, processes
- Psychology and UX: Decoding the Science Behind User Clicks · · user-experience, design, principles
- Folder Structures in React Projects · · react, architecture
- The Box Model and Box Sizing · · css, concepts
- Progressive Disclosure Defaults · · css, forms, interaction-design
- Build a Full-Stack App With Node.js and htmx · · web-apps, nodejs, htmx
- Chill Scroll Snapping: Article Headers · · css, scrolling
- Using Relative Colors · · css, colors
- Empowering the User Experience Through Microinteractions: 7 Best Practices · · user-experience, interaction-design, best-practices
- Accessibility Foundations · · accessibility, fundamentals, link-lists
- Build a Node App With TypeScript · · nodejs, typescript, pnpm, modules
- Comparing ECMAScript Modules and CommonJS · · comparisons, javascript, modules
- The Power of Textual Content in UX Design · · content, user-experience
- A Designer’s Role Is Not “at the Table” · · design, career
- I’m So Old: Web Edition · · web, history
- “require(esm)” in Node.js · · nodejs, ecmascript, modules
- How to Kill the Cascade · · css, cascade, resetting, scope
- A Comparison of JavaScript CRDTs · · javascript, data-types, comparisons
- How Web-Site Design and Social Media Work Together · · design, content, social-media
- Oh Sh*t, My App Is Successful and I Didn’t Think About Accessibility · · accessibility
- 2024 Cheat Sheet Collection · · cheat-sheets, link-lists
- Time to Ditch Analytics? Tracking Scripts and Web Sustainability · · embed-code, analytics, sustainability, performance, compliance
- Why UI Designers Should Understand Flexbox and CSS Grid · · design, layout, css
- Copy Objects Ways in JavaScript · · javascript, objects
- Migrating Away from Jest and Achieving over 90% Reduction in Running Time · · migration, jest, testing, memory, performance
- How Web Bloat Impacts Users With Slow Devices · · performance, metrics, comparisons, web
- Homepage Design: 5 Fundamental Principles · · design, principles
- Skeuomorphism · · design, terminology
- Quick Tip: Creating a Date Picker in React · · tips-and-tricks, react, functionality
- How (In)Efficient Are Engineering Organizations? · · efficiency, processes, leadership
- Make Your Functions More Reusable With Generics · · typescript, functions, maintainability
- Performance Tooling in 2024 and Beyond · · performance, tooling, user-agents, dev-tools, lighthouse
- There Is No EU Cookie Banner Law · · consent-management, cookies, legal
- What Is Safe Alignment in CSS? · · css, layout, user-experience
- Arguments for Opening Links in a New Tab or Window · · links, usability
- The Golden Age of Accessibility · · accessibility
- When “Semantic Tokens” Are No Longer Semantic · · design-tokens, semantics
- Qwik vs. Next.js: Which Framework Is Right for Your Next Web Project? · · frameworks, comparisons, qwik, nextjs
- 25 Unnoticeable Features of JavaScript · · javascript
- Ruby Is Complicated · · html
- You Want “border-color: transparent”, Not “border: none” · · css, borders
- The Problem With AI · · ai
- WCAG 2.2 Detective Skills · · accessibility, standards, wcag
- Another JS Registry—Seriously?! · · videos, jsr, dependencies, javascript
- What’s Next for a Global Design System · · design-systems
- The Problem With Data-Attributes for Text Effects · · html, css, typography, effects
- A Beginner’s Guide to Node.js Worker Threads · · guides, nodejs, worker-threads
- Refactoring My Ugliest Code With Signal View Queries · · videos, refactoring, angular
- My New Favorite CSS Trick: “will-change” · · css, animations, transcripts, tips-and-tricks
- 5 Exciting New JavaScript Features in 2024 · · javascript
- A Letter to My Younger Self, as an Accessibility Advocate · · accessibility, retrospectives
- Building Websites and Building Websites Well · · quality, craft, community
- Interaction to Next Paint Is Officially a Core Web Vital · · performance, web-vitals
- The “10× Engineer”: 50 Years Ago and Now · · productivity, processes, career, history
- Thoughts on Embedding Alternative Text Metadata into Images · · accessibility, images, metadata
- Marking the Web’s 35th Birthday: An Open Letter · · web, history
- The Essential Guide to Microcopy and Becoming a More Literate Designer · · guides, design, microcontent, content, writing
- Runtime Compatibility · · websites, runtimes, comparisons, bun, deno, netlify, nodejs
- Spread vs. Rest Operators in JavaScript · · javascript, operators, comparisons
- A Gentle Introduction to Generics in Typescript · · introductions, typescript
- Alt Text for CSS Generated Content · · css, alt-text, accessibility
- Announcing Speedometer 3.0: A Shared Browser Benchmark for Web Application Responsiveness · · performance, tooling, metrics
- Distinguishing Between ARIA and Native HTML Attributes · · html, aria, accessibility, comparisons
- JSON Canvas · · websites, standards, json, canvas
- Express.js With TypeScript—Setup, Examples, Testing · · videos, express, typescript, testing, examples
- What Is INP and Why You Should Care · · performance, web-vitals, monitoring
- Have You Optimized for INP? · · performance, web-vitals, optimization
- Comparing JavaScript Frameworks: Templates · · javascript, frameworks, templates, comparisons
- Streaming HTML · · html, php, streaming
- CSS Button Styles You Might Not Know · · html, css, buttons
- Things I Learned While Building My JS Library · · javascript, libraries, lessons
- Access by a Thousand Curb Cuts · · accessibility
- Jakob Has Jumped the Shark · · accessibility, link-lists
- Creating Color Palettes With the CSS “color-mix()” Function · · css, functions, colors, color-palettes
- How “HEAD” Works in Git · · git
- Modern CSS Tooltips and Speech Bubbles II · · css, techniques
- Navigating the Future of Frontend · · frameworks, web-platform, visions