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.)
- Shades of Grey With “color-mix()” · · css, functions, colors
- How Slack Automates Deploys · · deploying, automation, case-studies
- Frontend Development on Frontend Dogma, April 2024 AI Summary · · announcements, retrospectives
- 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 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
- 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
- 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
- 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
- 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
- Celebrate JavaScript Naked Day Every Year on April 24 · · javascript, maintainability, graceful-degradation
- 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
- 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
- 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
- April 24 Is JS Naked Day · · javascript, maintainability, graceful-degradation
- Considerations for AI Opt-Out · · ai
- Detect JavaScript Support · · css, javascript, media-queries, support
- Optimising React Apps · · react, optimization
- A Conversation With Una Kravets: The Rapid Evolution of CSS and Hobbies Outside of Work · · videos, interviews, css
- Long Alt · · accessibility, alt-text, support, user-agents, screen-readers, assistive-tech
- Make Sure That Your Design System Is Accessible · · design-systems, accessibility
- Detect JavaScript Support in CSS · · css, javascript, media-queries, support
- A Short Guide to Mastering Keyboard Shortcuts on GitHub · · guides, github, keyboard-navigation
- Help Us Invent CSS Grid Level 3, aka “Masonry” Layout · · css, layout
- How to Work With GraphQL in WordPress in 2024 · · how-tos, wordpress, graphql
- This Web of Ours, Revisited · · web
- How to Create CSS Utility Classes · · css, html
- Git Common Developer Pitfalls and Solutions · · git
- The End of an Era: Women Who Code Closing · · community
- The “Intl.Segmenter” Object Is Now Part of Baseline · · user-agents, support, interoperability, web-platform, javascript
- Sustainable Web Development: Website Redesign With a Low Carbon Footprint · · redesign, sustainability
- Building an npm Package Compatible With ESM and CJS in 2024 · · npm, dependencies, modules
- 12 Tips from a Mid-Level Developer · · career, tips-and-tricks
- Converting Plain Text to Encoded HTML With Vanilla JavaScript · · conversion, html, javascript
- Displaying HTML Web Components · · web-components, css
- How to Write World-Beating Web Content · · how-tos, writing, content
- Property Hooks Are Coming in PHP 8.4 · · php, hooks
- Upgrading jQuery: Working Towards a Healthy Web · · jquery, maintenance, migration
- When Security and Accessibility Clash: Why Are Banking Applications So Inaccessible? · · accessibility, security
- Who Should Block AI Bots? · · scraping, ai, seo
- Webhooks and WebSockets · · webhooks, websocket
- [pnpm] v9.0.0 · · release-notes, pnpm
- The Invisible Seafaring Industry That Keeps the Internet Afloat · · web
- Things That Can Break “aspect-ratio” in CSS · · css
- We Need to Rewild the Internet · · web, standards, collaboration, creativity, visions
- The Biggest Lie in HTML · · videos, html
- The Making of a TypeScript Feature: Inferring Type Predicates · · typescript
- An Intro to Flexbox · · introductions, css, layout
- ARIA in HTML · · standards, accessibility, aria, html
- Document Collaboration (With Comments!) · · documentation, collaboration, comparisons, link-lists
- Five Ways Cookie Consent Managers Hurt Web Performance (and How to Fix Them) · · cookies, consent-management, performance
- How a Successful Website Migration Led to a 20% Increase in Keyword Rankings · · migration, processes, seo, sem
- Open Source Security (OpenSSF) and OpenJS Foundations Issue Alert for Social Engineering Takeovers of Open Source Projects · · open-source, security
- Ethics in Times of Growth Design · · design, ethics
- Don’t Use the “maxlength” Attribute to Stop Users from Exceeding the Limit · · html, forms, usability
- 10 Top Accessibility Errors and How to Avoid and Fix Them · · accessibility
- CSS in React Server Components · · css, react, components, css-in-js
- Interview With Senior JS Developer 2024 · · videos, interviews, javascript, frameworks, libraries, tech-stacks, tooling, web-platform
- Beware—Automatic Tools Over-Report Accessibility Issues and Steal Your Time · · accessibility, auditing, tooling
- 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
- What If You Had Real Control over Light Mode / Dark Mode on a Per-Site Basis? · · apis, dark-mode
- 9 Signs Your Frontend Code Has Quality Issues That Affect Your Users · · quality, craft, accessibility, usability, user-experience, conformance, performance
- 10 Things Software Developers Should Learn About Learning · · research, learning
- Blockin’ Bots · · scraping, ai, apache, configuration
- Introducing JS Naked Day · · javascript, maintainability, graceful-degradation
- Monitoring BFCache Blocking Reasons · · caching, monitoring, debugging, performance
- Sliding 3D Image Frames in CSS · · css, images, techniques
- How Do Open Source Licenses Work? The Ultimate Guide · · guides, open-source, licensing
- How to Build a Reusable Grid System With CSS Grid · · how-tos, css, layout
- CSS Tricks to Master the “clip-path” Property · · css, tips-and-tricks
- Gap Is the New Margin · · css, layout
- Quick Tip: How to Animate Text Gradients and Patterns in CSS · · tips-and-tricks, how-tos, animations, gradients, css
- Web Accessibility Statement: How to Write One · · how-tos, accessibility, writing
- Zombie Estimation · · scrum, processes
- A Comparison of Automated Testing Tools for Digital Accessibility · · accessibility, testing, tooling, automation, comparisons
- An Intro to CSS Grid · · introductions, css, layout
- Unleashing Designers With Tailwind CSS · · videos, transcripts, design, tailwind
- Accessible Interactions in JavaScript Apps · · videos, transcripts, accessibility, javascript, aria
- Complete a VPAT: Show How Accessible Your Product Is · · accessibility, vpat-acr, conformance, documentation
- Epic App Performance Starts With the Database · · videos, transcripts, performance, databases, optimization
- Socks, Lies, and Accessibility · · accessibility, link-lists
- Let Me Be · · videos, transcripts, javascript
- Control Your Vertigo—the Unspoken Rule for Defending Design Decisions · · design, user-experience
- Frontend Development Beyond React: Svelte · · svelte
- JS Naked Day · · websites, javascript, maintainability, graceful-degradation
- Notes on Git’s Error Messages · · git, errors
- Optimizing WebKit and Safari for Speedometer 3.0 · · webkit, user-agents, apple, safari, performance, optimization
- Release Notes for Safari Technology Preview 192 · · release-notes, user-agents, apple, safari
- The Guide to Git I Never Had · · guides, git, terminology, cheat-sheets
- Wednesday, April 10, 2024 Security Releases · · release-notes, nodejs, security
- A Love Letter to Gen Z from Gen Y: Understanding React’s Evolution · · react, history
- Ableism and Related Terms You Need to Know · · terminology, communication, inclusion
- Figma Prototypes vs. HTML Prototypes · · design, processes, prototyping, figma, html, comparisons
- Happy CSS Naked Day 2024 · · announcements, css, maintainability
- Layered Toggles: Optional CSS Mixins · · css, techniques
- Recapping ng-conf 2024 · · angular
- Sending Email Using Node.js · · nodejs, email
- The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps · · accessibility, legal, web, mobile
- Understanding Interaction to Next Paint (INP) · · performance, web-vitals
- An Introduction to the Node.js Performance API · · introductions, nodejs, performance, apis
- React Server Components in a Nutshell · · react, components
- Is the Party over for Scrum Masters and Agile Coaches? · · agile, scrum, career
- Building a CLI from Scratch With TypeScript and oclif · · command-line, typescript
- Inclusive Digital Experiences: Redesign Strategies for Addressing Diverse Abilities and Accessibility Challenges · · redesign, strategies, inclusion, accessibility
- Justice Department to Publish Final Rule to Strengthen Web and Mobile App Access for People With Disabilities · · accessibility, legal, web, mobile
- Misinformation and Disinformation Online: What Design Can Do to Remedy This Problem · · design, communication
- Node.js Debugging in Chrome DevTools · · nodejs, debugging, tooling, user-agents, google, chrome, dev-tools
- Node.js Secure Coding: Mitigate and Weaponize Code Injection Vulnerabilities · · books, nodejs, security
- Things That I Like Better in Vue Than in React · · vuejs, react, frameworks, comparisons
- User Experience in the Era of AI: Enhancing Human-Machine Interactions · · user-experience, ai
- What Is Whitespace? · · videos, design, concepts, terminology
- Creating a Navbar in React · · navigation, react, css
- DORA’s Software Delivery Metrics: The Four Keys · · processes, metrics
- How I Write Commits Like a Pro · · version-control, git, conventions
- The Death of Creativity · · creativity, ai
- 10 Must Know System Design Concepts for Interviews · · interviewing, architecture, concepts, scaling
- Blind Internet Users Struggle With Error-Prone AI Aids · · accessibility, ai
- Demystifying the Shadow DOM · · dom, shadow-dom
- Testing HTML With Modern CSS · · html, css, testing, quality
- 21 HTML Tips You Must Know About · · html, tips-and-tricks
- WCAG Bypass Blocks (“Skip to Content”)—Improve User Interaction Speed and Even Prevent Pain · · accessibility, user-experience, keyboard-navigation, links, wcag
- Why I’m Yet Another Woman Leaving the Tech Industry · · career, community
- [zx] 8.0.0 · · release-notes, zx
- How to Think About HTML Responsive Images · · html, images, responsive-design
- “AI” Won’t Solve Accessibility · · accessibility, ai
- Breakpoints in Responsive Design · · design, responsive-design, usability
- Creativity in Software Engineering · · research, creativity, programming
- DevTools Tips and Tricks · · user-agents, dev-tools, tips-and-tricks
- Drive-By Accessibility Tweaks · · accessibility
- How to Make Your Website Work Offline · · how-tos, web-workers, offline
- Managing User Focus With “:focus-visible” · · css, selectors, focus
- Should Designers Code? · · design, career
- A Complete Guide to CSS Logical Properties, With Cheat Sheet · · guides, css, logical-properties, cheat-sheets
- AI and the Future of Web Accessibility Guidelines · · discussions, accessibility, wcag, standards, ai, w3c
- Building Components With Radix UI · · radix, components
- Modern CSS Patterns in Campfire · · css, case-studies
- Rounded Tabs With Inner Curves · · css, effects
- The V8 Sandbox · · v8, security
- When to Use “tabindex="0"” · · accessibility, keyboard-navigation, focus, html
- Heat Death of the Internet · · web
- AI and the Web: Understanding and Managing the Impact of Machine Learning Models on the Web · · ai, web
- An Advanced Way to Use CSS Variables · · css, custom-properties
- “aspect-ratio” Gotcha · · css, images
- BFCache Explained · · caching, performance
- Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks? · · dns, security
- Finally Understand Responsive Design · · videos, responsive-design, css
- Fluid Typography With Discrete Steps · · css, typography
- Hanging Punctuation in CSS · · css, typography
- How to Build a Simple Web Server With Node.js · · how-tos, servers, nodejs
- In-Page Links: 3 Usability Tips · · videos, links, usability, tips-and-tricks
- Svelte Parses HTML All Wrong · · svelte, html, parsing
- The View Transitions API · · transitions, apis, astro
- Theming Design Systems · · design-systems, theming
- Using JSON Web Tokens With Node.js · · json-web-tokens, nodejs, security, authentication
- Wednesday, April 3, 2024 Security Releases · · release-notes, nodejs, security
- An Interactive Guide to CSS Container Queries · · guides, css, container-queries
- Authentication in Next.js · · authentication, nextjs
- Drawing a Line to Connect Elements With CSS Anchor Positioning · · css
- How to Get Somebody Fired Using Git · · version-control, git, career
- How We’re Approaching Theming With Modern CSS · · css, theming
- Infinite-Scrolling Logos in Flat HTML and Pure CSS · · branding, scrolling, animations, techniques, css
- Learn JavaScript · · courses, javascript
- WebAssembly at Google · · videos, webassembly, google
- WordPress 6.5 “Regina” · · release-notes, wordpress
- 14 Top UX Tools for Designers in 2024 · · user-experience, tooling, link-lists
- 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
- The Detail, the Quality · · design, quality
- What Even Is a JSON Number? · · json, terminology
- 10 JavaScript Sites Every Web Developer Should Know · · javascript, learning, link-lists
- Kobold Letters · · html, email, support
- Latest WebAIM’s Million—Some Thoughts · · accessibility
- Object Structure in JavaScript Engines · · javascript, objects, engines
- The DevOps Basics · · dev-ops, fundamentals
- Why I Care Deeply About Web Accessibility and You Should Too · · accessibility, web
- Why I Use Node, Deno, Bun, [QuickJS], [txiki.js] at the Same Time · · tooling, nodejs, deno, bun
- Design Is a Process of Getting Stuck · · design, processes
- Figma Plugins · · figma
- Front-End Development’s Identity Crisis · · career
- On “disabled” and “aria-disabled” Attributes · · accessibility, html, aria
- “@ scope” Is Coming to CSS and It’s Amazing · · videos, css, scope
- The Curious Case of the CSS Monochrome Media Query · · css, media-queries
- The Easy Way to Access the Last JavaScript Array Element · · javascript, arrays
- The Power of “:has()” in CSS · · css, selectors
- 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
- A Guide to Building CLI Tools in JavaScript · · guides, tooling, command-line, javascript, nodejs
- CSS Color-Scheme-Dependent Colors With “light-dark()” · · css, functions, colors, dark-mode
- History of JS Interop in Dart · · javascript, dart, interoperability, history
- Improving the Developer Experience of Enterprise Design Systems · · design-systems, developer-experience, optimization
- New to the Web Platform in March · · release-notes, web-platform, user-agents, mozilla, firefox, apple, safari, google, chrome
- Release Notes for Safari Technology Preview 191 · · release-notes, user-agents, apple, safari
- The Complete Guide to Captioned Videos · · guides, accessibility, captions, multimedia
- What’s New in DevTools, Chrome 124 · · release-notes, dev-tools, user-agents, google, chrome
- Finally Understanding How “Array.sort(comparator)” Works · · javascript, arrays
- Flickering Glowing Text Effect With CSS · · css, effects
- How I Fixed My Brutal TTFB · · performance, metrics, optimization
- In-App Browsers Are Still a Privacy, Security, and Choice Problem · · user-agents, mobile, privacy, security
- Iterator Helpers · · ecmascript, engines, v8
- Meet Angular’s New “output()” API · · angular, apis
- What Even Are Dragging Movements? · · accessibility, interaction-design, terminology
- Animating Clip Paths on Scroll With “@ property” in CSS · · css, animations, scrolling
- Be Flexible About What People Need (and Don’t Assume) · · accessibility
- Convention over Creativity? The Ups and Downs of UX Design · · user-experience, design
- CSS Anchor Positioning · · css
- Exploring the Power of ARIA Live Attribute in Web Accessibility · · accessibility, aria
- History of Web Accessibility · · videos, accessibility, history
- How to Take Control of Flexbox · · videos, css, layout
- How to Use jQuery’s “ajax()” Function for Asynchronous HTTP Requests · · how-tos, jquery, functions
- Node v20.12.0 (LTS) · · release-notes, nodejs
- 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
- Setting and Persisting Color Scheme Preferences With CSS and a “Touch” of JavaScript · · colors, dark-mode, css, javascript
- 7 Simple Rules for Better Data Visualization · · information-design
- Error Messages 101 · · videos, usability, errors, microcontent