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.)
- Manifesto for a Humane Web · · web, principles, accessibility, inclusion, security, sustainability, user-experience
- The Modern Guide for Making CSS Shapes · · guides, css, effects, techniques
- 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
- 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
- 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
- Misconceptions About CSS Specificity · · css, cascade
- The 7 Most Useful Web Design and Web Development Glossaries · · concepts, terminology, link-lists
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 3 Tips for Advanced Prototyping in Figma · · tips-and-tricks, prototyping, figma
- Make Product Design Great Again · · design, user-experience, product-management
- 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
- Node.js Task Runner · · nodejs, performance
- 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
- Accessibility Overlays—Friend or Foe? · · videos, accessibility, overlays
- Building a Culture of Accessibility · · accessibility, culture
- 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
- What’s Going On in Dark Theme / Light Theme Land · · css, functions, dark-mode
- A Primer on the Cascade and Specificity · · introductions, css, cascade
- Angular’s New Signal Inputs · · videos, angular, signals
- 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
- The Impact of Color Contrast on Accessibility · · accessibility, colors, contrast
- [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
- Hardest Problem in Computer Science: Centering Things · · css, design
- 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
- Faster Websites With the “picture” Element · · html, images, performance
- 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
- 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
- Fluid Typography With Discrete Steps · · css, typography
- 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