News and Tools for Frontend Development (24)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Have Single-Page Apps Ruined the Web? · · videos, spas, web
- Why Does Everything Look the Same? · · design
- Accessibility: A Gentle Introduction · · accessibility, introductions
- Internationalization: How to Boost Traffic With a Multilingual Site · · how-tos, internationalization
- How We Improved Our Design System Delivery · · design-systems, processes, optimization, case-studies
- Buttons vs. Links · · html, semantics, buttons, links, comparisons
- A Guide to CSS Debugging · · guides, css, debugging
- My Challenge to the Web Performance Community · · performance
- The Options for Password-Revealing Inputs · · html, css, security, passwords, usability
- RenderingNG: An Architecture That Makes and Keeps Chrome Fast for the Long Term · · user-agents, google, chrome, engines, chromium, rendering
- Safe DOM Manipulation With the Sanitizer API · · dom, apis
- What Is Micro-Content? · · microcontent, concepts, content
- How to Implement and Style the “Dialog” Element · · how-tos, modals, html, css
- Automating a Design System · · design-systems, automation, testing
- What Creating a Simple Font Taught Me About Font Design · · fonts, typography
- UX Accessibility: How to Start Designing for All · · how-tos, accessibility, user-experience
- Why Do Webdevs Keep Trying to Kill REST? · · apis, protocols, databases
- Browsing With a Mobile Screen Reader · · accessibility, user-agents, assistive-tech, screen-readers, mobile, browsing
- Animation Techniques for Adding and Removing Items from a Stack · · css, animations, javascript
- Redundantly Redundant a11y Accessibility · · accessibility, html
- Writing Clean JavaScript Tests With the BASIC Principles · · javascript, testing, principles
- How to Build an Expandable Accessible Gallery · · how-tos, accessibility, html, css
- Conditional Border Radius in CSS · · css, borders
- The CSS “prefers-color-scheme” User Query and Order of Preference · · css
- Introducing Svelte, and Comparing Svelte With React and Vue · · svelte, react, vuejs, comparisons, introductions
- Using JavaScript to Detect High Contrast and Dark Modes · · javascript, accessibility, colors, contrast, dark-mode
- Sorting JavaScript Arrays by Nested Properties · · javascript, sorting, arrays
- Understanding and Working With Submodules in Git · · git, modules
- Links, Missing “href” Attributes, and Over-Engineered Code · · html, links, accessibility
- Declaring Page Language—and Declaring Changes in Language · · accessibility, html, user-agents
- How I Built a Modern Website in 2021 · · html, css, javascript
- Practical Frontend Philosophy · · web-platform, complexity
- 9 Tag Management Solutions You Should Consider · · tag-management, comparisons, tooling, link-lists
- Web Streams Everywhere (and Fetch for Node.js) · · javascript, nodejs, streaming, data-fetching
- Figma Cheat Sheet · · websites, figma, cheat-sheets
- Comparing Page Language Declaration Setups in Screen Readers · · accessibility, html, http, user-agents, assistive-tech, screen-readers, comparisons
- Guidelines for Choosing a Node.js Framework · · guidelines, nodejs, frameworks
- Faster React Apps With Memoization · · react, performance, memoization
- Design Tokens Automation Pipeline: From Design Tools to Component Libraries · · automation, design-tokens, design-systems
- Let’s Dive into Cypress for End-to-End Testing · · testing, cypress
- Accessibility Isn’t New—and Neither Is Ableism · · accessibility
- A JavaScript Developer’s Guide to Browser Cookies · · guides, javascript, cookies
- How I Make CSS Art · · css, art
- Beware False Negatives · · accessibility
- Not Releasing Late on Fridays, a Matter of Courtesy · · releasing, processes
- One Last Time: Custom Styling Radio Buttons and Checkboxes · · css, forms, accessibility
- 7 UI Design Fundamentals for Developers · · design, fundamentals
- A Content Model Is Not a Design System · · content, design-systems
- “initial” Doesn’t Do What You Think It Does · · videos, css
- Simplifying Form Styles With “accent-color” · · css, forms
- Just Redux: The Complete Guide · · guides, redux
- When Everything Is Urgent, Nothing Is: What Is Alarm Fatigue and How to Deal With It · · alerting, productivity
- Specification for Spoken Presentation in HTML · · html, pronunciation
- Container Units Should Be Pretty Handy · · css, container-queries, units
- ct.css—Let’s Take a Look Inside Your “<head>” · · css, performance, debugging
- 7 Useful HTML Attributes You May Not Know · · html
- 7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS · · css, selectors
- Cascade Layers? · · css, cascade
- Node.js Garbage Collection Explained · · nodejs
- Yarn vs. npm: Everything You Need to Know · · yarn, npm, comparisons
- CSS Container Queries: Container-Relative Lengths · · css, container-queries
- Optimising a JavaScript Library With WebAssembly, a Failed Attempt · · javascript, libraries, webassembly
- Using Monorepos Is Not That Bad · · monorepos, case-studies
- Contemporary Design Has Lost Its Soul · · design
- Understanding “min-content”, “max-content”, and “fit-content” in CSS · · css
- Simpler Block Spacing in WordPress With “:is()” and “:where()” · · wordpress, css, selectors
- How I Learnt to Stop Worrying and Love Animating the Box Model · · css, animations
- Provide Pronunciation for Ambiguous Words · · accessibility, content, pronunciation
- Practical Frontend Architecture · · architecture
- 20 Killer JavaScript One-Liners · · javascript
- CSS Container Query Units · · css, container-queries, units
- Why Inequalities Can Appear in Digital Accessibility and Inclusive Design · · accessibility, inclusion, design
- The New Requirements for WCAG 2.2 · · accessibility, wcag
- Design Direction as a Step Before Design System · · design, design-systems
- Minding the “gap” · · css
- New Principle: Do Not Design Around Third-Party Tools Unless It Actually Breaks the Web · · software-design, css, principles
- Web Quality Assurance: From User Requirements to Web Risk Management · · quality, usability
- What’s the Right Font Size in Web Design? · · typography, design
- Web Vitals Patterns · · web-vitals
- Small Bundles, Fast Pages: What to Do With Too Much JavaScript · · javascript, performance, bundling
- Accessible Palette: Stop Using HSL for Color Systems · · accessibility, css, colors, color-palettes
- How to Expand Your Engineering Skill Set Without Quitting Your Day Job · · how-tos, career, learning
- Optimizing Images on the Web · · images, performance
- Reducing the Need for Pseudo-Elements · · css, selectors
- 1995: MySQL Arrives, Completing the LAMP Stack · · history, databases, mysql, tech-stacks
- The Future of CSS: Cascade Layers (CSS “@ layer”) · · css, cascade
- Master Frontend Development by Cloning These Websites · · learning
- Modernising CSS Infrastructure in DevTools · · dev-tools, css, modernization, user-agents, google, chrome
- Designing Beautiful Shadows in CSS · · css, shadows
- Notes on Synthetic Speech · · accessibility, user-agents
- 29 Projects to Help You Practice HTML CSS Javascript 2021 · · html, css, javascript
- Scripting With Google zx · · zx
- Myths About Web Accessibility · · accessibility
- The Ultimate Guide to Web Console · · guides, console, javascript, debugging
- Less Absolute Positioning With Modern CSS · · css
- Vanilla JS Is a Web Performance Decision · · javascript, performance
- Flexible API Design: Create Hooks for Your PHP API Pipeline · · php, apis, hooks
- Line Length Revisited: Following the Research · · design, readability, typography, research
- Okhsv and Okhsl · · colors, design, usability
- Subsets and Supersets of WCAG · · accessibility, wcag
- The Case for “Developer Experience” · · developer-experience
- What Is Redundant Entry, and How Does It Affect Accessibility? · · accessibility, usability
- Developer Decisions for Building Flexible Components · · components
- Bundling Non-JavaScript Resources · · bundling
- Enterprise UX: Essential Resources to Design Complex Data Tables · · user-experience, responsive-design, complexity, tables
- Blowing Up HTML Size With Responsive Images · · html, images, performance, responsive-design
- Becoming a Design Tokens Ambassador · · design-tokens
- Defining Basic JavaScript Terms: “map”, “filter”, and “reduce” · · javascript
- Using CSS 3 Overflow Properties to Make Containers Meet WCAG 2.1 · · css, accessibility, wcag
- What’s New in PHP 8.1: Features, Changes, Improvements, and More · · php
- Firefox’s “bolder” Default Is a Problem for Variable Fonts · · css, fonts, user-agents, mozilla, firefox
- Fractional SVG Stars With CSS · · css, svg
- What’s New With DevTools: Cross-Browser Edition · · dev-tools, user-agents, google, chrome, microsoft, edge, mozilla, firefox, apple, safari
- 13 Advanced (but Useful) Git Techniques and Shortcuts · · videos, git
- 5 Steps for Writing Alt Text for Accessibility · · accessibility, writing, alt-text
- A Practical Guide to Creating Reusable React Components · · guides, react, components
- Color and Universal Design · · design, colors, accessibility
- HTTP/3: Practical Deployment Options · · http, protocols, deploying
- Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design · · user-experience, performance, complexity
- Avoiding FOUT With Async CSS · · css
- Stop! Put Down That Ternary, Lines Are Free · · maintainability
- Make Accessibility Part of Your Startup’s Products and Culture from Day One · · accessibility, culture
- Reducing Carbon Emissions on the Web · · sustainability
- The Pros and Cons of Professional Language · · career
- Multiple Accounts and Git · · git
- Element Diversity · · html
- Threats of Using Regular Expressions in JavaScript · · javascript, regex
- Getting Started With Web Accessibility Testing · · accessibility, testing, introductions
- The Effect of CSS on Screen Readers · · css, accessibility, user-agents, assistive-tech, screen-readers
- Interactive Learning Tools for Front-End Developers · · learning
- Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) · · nextjs, data-fetching, client-side-rendering, server-side-rendering, incremental-static-regeneration
- It Takes a PhD to Develop That · · career, quality, complexity
- Web Scraping With JavaScript and Node.js · · javascript, nodejs, scraping
- Building a Split-Button Component · · components, html, css, javascript
- Twitter’s Div Soup and Uglyfied CSS, Explained · · html, css, twitter
- Best Practices for Logging in Node.js · · nodejs, logging, best-practices
- Building a Stepper Component · · components, html, css
- Rethinking User Personas · · usability, user-experience, personas
- Shifting Accessibility Testing to the Left · · accessibility, design, usability
- State Management in Next.js · · state-management, nextjs
- 9.5 Ways Google Rewrites Your Title Tags · · seo, google
- Writing High-Performance JavaScript · · javascript, performance
- Understanding Target Size Under WCAG 2.2 and How It Affects People With Disabilities · · accessibility, wcag
- Using SVG With Media Queries · · svg, css, media-queries
- Why You Should Manage Your Energy, Not Your Time · · career, productivity
- Building Reactive Systems With Node.js · · nodejs, reactivity
- Color and Contrast, What Does It Mean? · · accessibility, colors, contrast
- 1995: Apache and Microsoft IIS Shake Up the Web Server Market · · history, servers, apache
- 7 Practices to Create Good JavaScript Variables · · javascript
- Times New Roman Doesn’t Have to Be Boring—Here’s Why · · typography, fonts
- What Are the Web Performance Metrics That Actually Matter? · · performance, metrics
- The Seniority Rollercoaster · · career
- Common npm Mistakes Every Developer Should Avoid · · npm, mistakes
- Exploring the CSS Paint API: Blob Animation · · css, apis, animations
- 7 Useful CSS Cheat Sheets to Improve Your Skills · · css, cheat-sheets
- Creating a Positive Culture Around Accessibility · · accessibility, culture
- 10 Fun Things You Can Do With GitHub.dev · · github
- Essential Concepts in JS · · javascript, concepts
- Compound Components in React · · react, components
- 5 Tools to Automate Your Development · · tooling, automation, productivity
- Named and Framed · · accessibility, html
- Small Wins for Accessibility and Resilience · · accessibility, html
- Getting Started With CSS Animations · · css, animations, introductions
- How to Use “Promise.any()” · · how-tos, javascript, promises
- Why Are Hyperlinks Blue? · · design, links
- Embracing Asymmetrical Design and Overcoming the Harmful Effects of “text-overflow: ellipsis” in CSS · · design, css
- jsc: My New Best Friend · · javascript, tooling
- Flexbox or CSS Grid? How to Make Layout Decisions That Make Sense · · how-tos, css, layout, comparisons
- Scrollbar Reflowing · · scrolling, reflow, user-experience
- 8 Fundamental Principles of Effective Web Design · · principles
- Key Data Structures and Their Roles in RenderingNG · · user-agents, engines, chromium, google, rendering
- React JS—the Confusing Parts · · react, jsx
- HTTP/3: Performance Improvements · · http, protocols, performance
- 5 Ways to Undo Mistakes With Git · · git, command-line, mistakes
- 4 Important Differences Between Regular and Arrow Functions · · javascript, functions, comparisons
- How I Experience Web Today · · websites, web
- Using the Platform · · web-platform
- 6 CSS Shorthand Properties to Improve Your Web Application · · css, optimization
- Bootstrapping a Node.js TypeScript API: Routing, Middleware, and Custom Types and Errors Modules · · nodejs, typescript, apis, routing, errors, modules
- Accessibility from the Ground Up · · accessibility
- UI Cheat Sheet: Spacing Friendships · · design, spacing, cheat-sheets
- What’s on the Menu? · · vuejs, accessibility
- I Give You Feedback on Your Blog Post Draft but You Don’t Send It to Me · · writing, blogging
- How to Calculate REMs from Pixels · · how-tos, css
- I Tried Angular as a React Developer: Here Are 6 Things I Like About It · · angular, react, comparisons
- Truthy and Falsy: When All Is Not Equal in JavaScript · · javascript
- Web Accessibility Checklist · · websites, accessibility, checklists
- Top 9 Lessons Learned in 12 Years as a Software Developer · · lessons, career
- One Favicon to Rule Them All · · html, images, favicons
- Building the Same App 5 Times · · comparisons, jquery, angular, react, vuejs, svelte
- ARIA Spec for the Uninitiated · · html, accessibility, aria
- Level Up Your CSS Linting Using Stylelint · · css, consistency, linting
- State Management in Svelte Applications · · state-management, svelte
- Using CSS Module Scripts to Import Stylesheets · · css, javascript, modules
- What’s New in Bootstrap 5 · · frameworks, bootstrap
- CSS Grid Tooling in DevTools · · dev-tools, css, layout, user-agents, google, chrome
- Does Shadow DOM Improve Style Performance? · · dom, shadow-dom, performance, rendering
- You Don’t Know “useEffect” · · react
- Practical Uses of CSS Math Functions: “calc”, “clamp”, “min”, “max” · · css, math, functions
- Reviewing a Design for Accessibility · · accessibility, code-reviews, user-experience
- Decoding AVIF: Deep Dive With Cats and imgproxy · · images, avif
- A Guide to Designing Accessible, WCAG-Compliant Focus Indicators · · guides, accessibility, focus, wcag, compliance
- Big O, Code Efficiency Analysis · · algorithms, performance
- Breaking the Web Forward · · web, user-agents
- Accessible Design Systems: Look Good While Doing Good · · design-systems, accessibility
- How to Test for Accessibility With Users at Every Design Stage · · how-tos, accessibility, testing
- Static vs. Dynamic vs. Jamstack: Where’s the Line? · · comparisons, tooling, tech-stacks, jamstack
- CSS “accent-color” · · css, forms
- Accessible Contrast Ratios and A-Levels Explained · · accessibility, colors, contrast
- “<Lazy>” Rendering in Vue to Improve Performance · · vuejs, client-side-rendering, performance, optimization
- Principles by Design · · design, principles
- The Complete Guide to HTML Forms and Constraint Validation · · guides, html, forms, validation
- “return await promise” vs. “return promise” in JavaScript · · javascript, promises, comparisons
- Adding 100 Underline/Overlay Animations: The Impressive CSS Collection · · css, animations
- The State of Mobile First and Desktop First · · responsive-design, mobile-first, desktop
- Google vs. the Web · · google, web
- How Writing Can Advance Your Career as a Developer · · career, writing
- HTTP/3 from A to Z: Core Concepts · · http, protocols, concepts
- JavaScript Development: Making a Web Worker Optional · · javascript, web-workers
- The World of CSS Transforms · · css
- A Performance-Focused Workflow Based on Google Tools · · performance, web-vitals, tooling, google
- Exploring the CSS Paint API: Image Fragmentation Effect · · css, apis, images, effects
- Next-Level List Bullets With CSS “::marker” · · css, selectors
- Uploading Multiple Files With Fetch · · javascript, file-handling, data-fetching
- Pixelart and the “image-rendering” Paradox · · css, images, art
- Browsers and Representation · · user-agents
- On the “<dl>” · · html
- A Guide to Accessible Digital UX Design · · guides, accessibility, user-experience, design
- Inclusive Usability Testing: The Benefits of Inclusive Design · · usability, testing, inclusion
- Sustainable Web Design, an Excerpt · · sustainability
- Visualizing a Codebase · · tooling, developer-experience
- Why Are We Talking So Much About Design Leadership? · · design, leadership
- React Children and Iteration Methods · · react
- Using CSS Shapes for Interesting User Controls and Navigation · · css, navigation
- What Are Accessibility Overlays Good For? · · accessibility, overlays
- Refresher on JavaScript Callbacks and Promises · · javascript, promises
- CSS Nesting, Specificity, and You · · css, cascade, nesting
- Accessibility Testing With Storybook · · accessibility, testing, storybook
- Writing Great Alt Text: Emotion Matters · · accessibility, writing, alt-text, user-experience
- Building the Perfect GitHub CI Workflow for Your Frontend Team · · github, ci-cd
- Web Accessibility Myths: Debunking 7 Common Misconceptions · · accessibility
- Using localStorage With React Hooks · · storage, react, hooks
- What Devs Need · · websites, tooling, link-lists
- npm Security Best Practices · · npm, security, best-practices
- How to Build Resilient JavaScript UIs · · how-tos, javascript, user-experience
- How to Use “Promise.allSettled()” · · how-tos, javascript, promises
- Introduction to TCP: Transmission Control Protocol · · introductions, protocols, tcp
- A Deep Dive on Skipping to Content · · accessibility, links
- Mitigating User Errors · · user-experience, errors
- Refactoring CSS: Strategy, Regression Testing, and Maintenance · · css, maintenance, refactoring, testing, regressions, strategies