News and Tools for Frontend Developers (24)
(Stay up-to-date on all topics by RSS feed, on Mastodon, and through other channels.)
- “<article>” vs. “<section>”: How to Choose the Right One (by/via) · · html, semantics, comparisons
- 5 Best UX Careers to Pursue in 2022 (via) · · user-experience, career
- Mobile UX: Study Guide (by/via) · · guides, user-experience, mobile, training, link-lists
- Clean Architecture: Applying With React · · architecture, react
- The History of JavaScript (by) · · history, javascript
- Ancient Web Browsers · · websites, user-agents, history
- What Is HCI (Human-Computer Interaction)? Meaning, Importance, Examples, and Goals (via) · · concepts, hci, examples
- Understanding CSS “:has()” (by/via) · · videos, css, selectors
- Type Annotations in JavaScript (by/via) · · javascript, typescript
- Say No to Tailwind, Embrace Plain CSS (by) · · frameworks, tailwind, css
- Intro to Serverless Functions (by/via) · · introductions, serverless, functions, netlify
- Definitive Guide to CAPTCHA Accessibility (via) · · guides, accessibility, captcha
- Research Insight: Accessibility of Images (by/via) · · accessibility, usability, images, research
- Where’s the Fun in Accessibility? (by/via) · · accessibility, user-experience
- Vector Animations With Figma and SVG Animate (by/via) · · animations, figma, svg, images
- With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (by) · · css, selectors, accessibility, keyboard-navigation, focus
- Top Layer Support in Chrome DevTools (by/via) · · css, dev-tools, user-agents, google, chrome
- Roundup of Recent Document Outline Chatter (by/via) · · html, semantics, accessibility
- RedwoodJS vs. BlitzJS: The Future of Fullstack JavaScript Meta-Frameworks (by/via) · · frameworks, javascript, comparisons
- Introduction to SvelteKit (by/via) · · videos, introductions, sveltekit
- Front-End Internationalisation Tips (by/via) · · internationalization, fonts, css, javascript
- Escaping the sRGB Prison (by/via) · · videos, colors
- 20 Git Commands Every Developer Should Know (by) · · git, command-line
- Powerful Image Optimization Tools (by/via) · · link-lists, images, compression, performance, tooling
- Create Complex Transitions With Individual CSS Transform Properties (by/via) · · videos, css, transitions
- Rethinking Device Emulation in Browsers (by) · · user-agents, tooling, usability
- Creating an App Using Drag and Drop With React Without Libraries (by) · · react
- An Introduction to Multithreading in Node.js (by/via) · · introductions, nodejs, multithreading
- Subheadings, Subtitles, Alternative Titles, and Taglines in HTML (by/via) · · html, semantics, headings, microcontent, accessibility
- The 10 Most Common JavaScript Issues Developers Face (via) · · javascript, mistakes
- Logical Properties for Useful Shorthands (by/via) · · css, logical-properties, shorthands
- JavaScript SDK “Package Size Is Massive”—So We Reduced It by 29% (via) · · javascript, optimization, tree-shaking
- Expert Tips for Color Accessibility on the Web (via) · · tips-and-tricks, accessibility, colors
- 15 Common Beginner JavaScript Mistakes (by) · · javascript, mistakes
- Why I No Longer Care What People “Like” or “Don’t Like” (by/via) · · design
- What Is WAI? The Web Accessibility Initiative (via) · · accessibility
- What Is Passwordless Authentication and How to Implement It (by/via) · · authentication, security, passwords
- Useful Tips and Tricks in JavaScript (by) · · javascript, tips-and-tricks
- JSON Creator Douglas Crockford Interview (by/via) · · interviews, javascript
- How Scrum With Kanban Works (by/via) · · agile, scrum, kanban, processes
- How Did REST Come to Mean the Opposite of REST? (via) · · apis
- Hacking JavaScript Objects (by) · · javascript, objects
- Abbreviations Can Be Problematic (by) · · html, accessibility
- CSS Gradient Background From Figma to CodePen (by) · · css, gradients, backgrounds, figma, codepen
- Using Grids in Interface Designs (via) · · layout, usability
- Use Firefox for Accessibility Testing (by/via) · · user-agents, mozilla, firefox, accessibility, testing
- Can SVG Symbols Affect Web Performance? (by) · · svg, images, performance
- An Approach to Continuous Learning (by) · · career, learning
- 7 Tips for Clean React TypeScript Code You Must Know (by) · · react, typescript, tips-and-tricks
- What Does x% of Issues Mean? (by) · · accessibility, metrics
- Welcome to the Dark Side (by) · · dark-mode, accessibility, usability
- 7 Quick Facts About WCAG 2.2 (via) · · accessibility, wcag, standards
- Working With File System Paths on Node.js (by) · · nodejs, file-handling
- Could Sustainable Websites Increase Energy Consumption? (via) · · sustainability
- What Is the Best Way to Mark Up an Exclusive Button Group? (by) · · html, semantics, accessibility, aria
- Web Accessibility Laws and Policies (by) · · accessibility, legal, policies, link-lists
- The Hidden History of Screen Readers (by/via) · · accessibility, user-agents, assistive-tech, screen-readers, history
- Perceived Affordances and the Functionality Mismatch (by) · · usability, accessibility, semantics
- Minimal Social Markup (by) · · html, social-media, minimalism
- Optimizing Node.js Dependencies in AWS Lambda (by/via) · · nodejs, dependencies, aws, serverless, optimization
- The “Array.prototype.at()” Method in Vanilla JavaScript (by) · · javascript
- My War on Animation (by/via) · · accessibility, animations
- Custom ESM Loaders: Who, What, When, Where, Why, How (by) · · nodejs, modules
- Bag Some AAA Wins Where You Can (by) · · accessibility, wcag
- What You Need to Know About ARIA and How to Fix Common Mistakes (via) · · accessibility, html, aria, mistakes
- The Methods UX Professionals Use (by/via) · · user-experience, processes
- The Cost of Consistency in UI Frameworks (by/via) · · frameworks, consistency
- Applying SOLID Principles in React (by) · · quality, maintainability, principles, solid, react
- Statements vs. Expressions (by) · · javascript, comparisons
- The Many Faces of Themeable Design Systems (by) · · design-systems, theming
- Technical Writing for Developers (by/via) · · writing, version-control
- Integer Math in JavaScript (by) · · javascript, math
- Guide to Trending Front-End Frameworks in 2022 (via) · · guides, frameworks, react, jquery, express, angular, vuejs
- Generating Accessibility Test Results for a Whole Website With Pa11y CI (by) · · accessibility, testing, tooling
- Fundamentals Matter (by) · · fundamentals
- Forms in Modals: UX Case (by) · · forms, modals, user-experience
- Building (or Rebuilding) a Website With Accessibility in Mind (by) · · accessibility
- Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes (by) · · performance, web-vitals, comparisons, html, css
- A Look at Remix and the Differences With Next.js (by/via) · · comparisons, frameworks, remix, nextjs
- 37 Easy Ways to Spice Up Your UI Designs (by) · · design, effects
- The Ultimate Guide to Debugging Accessibility Issues · · guides, accessibility, debugging
- JavaScript Obfuscation Techniques by Example · · javascript, obfuscation, techniques, examples
- Choosing the Right Mindset to Design Complex Applications (by/via) · · design, complexity, processes
- Working on a New Feature as a Senior Frontend Developer (by) · · processes
- Figma Auto Layout = “display: flex” (by) · · figma, css
- Data Structure and Algorithms 102 (by) · · algorithms, complexity
- The Future of CSS: Variable Units, Powered by Custom Properties (by/via) · · css, units, custom-properties
- Set JAWS Free! (by) · · accessibility, user-agents, assistive-tech, screen-readers, jaws
- CSS Complexity: It’s Complicated (by/via) · · css, cascade
- Why the HTML Outlining Algorithm Was Removed From the Spec—the Truth Will Shock You! (by) · · html, semantics, accessibility
- The CSS Cascade, a Deep Dive (by/via) · · videos, css, cascade
- Make It Accessible (via) · · websites, accessibility
- It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties (by) · · accessibility, user-agents, apple, safari, css
- Holograms, Light-Leaks, and How to Build CSS-Only Shaders (by) · · how-tos, css, blend-modes, effects
- An Accessibility-First Approach to Chart Visual Design (by+/via) · · accessibility, information-design
- Captions: Humans vs. Artificial Intelligence: Who Wins? (by/via) · · accessibility, captions, writing, automation, comparisons
- What Are Color Gamuts (by) · · colors
- Truly Portable Design Patterns (by/via) · · design-patterns, components
- The Joy of Variable Fonts: Getting Started on the Frontend (by+/via) · · fonts, css, introductions
- The Hard Parts of Developer Advocacy (for Me) (by) · · developer-relations, advocacy, community, career
- The Ballad of Text Overflow (by/via) · · css, accessibility
- Consistency in UX Design: To What Extent Is “Best Practice” the Right Choice? (by/via) · · user-experience, design, consistency, best-practices
- The Off by Default Web (by) · · web, permissions
- The Case for Null in Design Systems (by/via) · · design-systems
- Style With Stateful, Semantic Selectors (by) · · css, aria
- Masonry? In CSS?! (by/via) · · css, layout
- Inverted Media Queries and Breakpoints (by) · · css, media-queries
- Executing Shell Commands From Node.js (by) · · nodejs, shell
- Super-Helpful Tips When Working With Figma Component Properties (by/via) · · figma, tips-and-tricks, components
- Two Levels of Customising “<selectmenu>” (by) · · accessibility, html
- The Unlocked Possibilities of the “:has()” Selector (by) · · css, selectors
- How to Make Text Improve User Experience: Insights Into UX Writing (by/via) · · how-tos, user-experience, writing
- Body Margin 8px (by) · · css, history
- Frontend Web Performance: The Essentials · · performance, javascript
- css-browser-support (by) · · packages, npm, css, user-agents, support
- Faster WordPress Rendering With 3 Lines of Configuration (by) · · wordpress, performance, css, http, configuration
- Write Git Commit Messages That Your Colleagues Will Love (by) · · git, commit-messages
- Web Development Is Like Assembling IKEA Furniture (by) · · comparisons
- Reimagining Front-End Web Development With htmx and Hyperscript (by) · · visions, htmx
- How to Auto-Prefix and Minify CSS? (by) · · how-tos, css, vendor-extensions, minification, tooling
- Breaking Out of a Central Wrapper (by/via) · · css
- Best Practices for Images (by) · · images, html, best-practices
- The New Wave of React State Management · · react, state-management, comparisons
- “That’s Not Accessible!” and Other Statements About Accessibility (by) · · accessibility
- CSS Variable Secrets (by/via) · · videos, css
- 404 vs. 410—the Technical SEO Experiment (by/via) · · seo, http, comparisons, experiments
- What the Hell Is “<!DOCTYPE html>”? · · html, doctype-switching
- What Every Newbie Developer Should Know (by) · · career
- Thoughts on an Accessibility “Get Well” Plan (by) · · accessibility, processes, engineering-management, leadership
- Farewell to HTML5Rocks (by/via) · · community, html, history
- Building Tabs in Web Components (by) · · web-components
- Working With the File System on Node.js (by) · · nodejs, file-handling, apis
- Googlebot and the 15 MB Thing (via) · · google, seo
- Are You Sure That’s a Number Input? (by) · · html
- Imagemin Guard (by) · · packages, npm, images, compression, performance, jpeg, png, gif, webp, avif
- What Do the Developers Do in the Last Week of the Sprint? (by/via) · · agile, scrum, processes
- Style Queries (by) · · css, container-queries
- SPAs: Theory Versus Practice (by) · · spas, comparisons
- Demystifying the New Gatsby Framework (by/via) · · frameworks, gatsby
- A CLS Punishment for Progressive Enhancement? (by/via) · · performance, web-vitals, progressive-enhancement
- UX Writing: Study Guide (by/via) · · guides, user-experience, writing, training, link-lists
- Using JavaScript to Fill localStorage to Its Maximum Capacity (by) · · javascript, storage
- A Previous Sibling Selector (by) · · css, selectors
- Why Use Sass? (by/via) · · sass
- GA4 Is Being Blocked by Content Security Policy (by) · · security, csp, metrics, google
- Accessible Design Systems (by/via) · · accessibility, design-systems
- WCAG 2.1 AA Web Accessibility Checklist (via) · · checklists, accessibility, wcag
- Single Element Loaders: The Bars (by/via) · · css
- Missing Introduction to React (by) · · introductions, react
- Introduction to Defensive CSS (by/via) · · introductions, css
- 4+ Years of Cracking Technical Interviews (by) · · interviewing, career
- Managing Specificity With CSS Cascade Layers (by/via) · · videos, css, selectors, cascade
- 5 Useful CSS Properties That Get No Love (by) · · videos, css
- Stop the Screen Going to Sleep With JavaScript (by) · · javascript
- Mastering “z-index” in CSS (by/via) · · css
- How We Designed an Accessible Color Palette From Scratch (via) · · accessibility, colors, color-palettes, case-studies
- Getting Started With Vue Composables (via) · · vuejs, introductions
- Everything You Need to Know About Web Performance (in 5 Minutes) (by/via) · · performance, web-vitals, compression
- Can We Enterprise CSS Grid? (by) · · css, layout, frameworks
- Apple Is Not Defending Browser Engine Choice (by) · · user-agents, browser-engines, web, apple
- 7 UX Laws You’re Probably Getting Wrong (by/via) · · user-experience, usability, design
- User Vulnerabilities in the Data Cycle (by/via) · · user-experience, vulnerabilities, privacy, legal
- What Would a Chromium-Only Web Look Like? (by) · · user-agents, browser-engines, chromium, google, web
- “text-overflow: ellipsis” Considered Harmful (by) · · accessibility, css
- Style Scoping Versus Shadow DOM: Which Is Fastest? (by) · · selectors, scope, dom, shadow-dom, performance, comparisons, metrics
- Please Remove That .git Folder · · security, git
- Looking Ahead—Insights From Jeffrey Zeldman and Eric Meyer (by+/via) · · interviews, web, css
- Introducing Keyboard Navigation (by+/via) · · videos, accessibility, introductions
- In Defense of Blocks for Local Scopes (by) · · javascript, scope
- In Defense of Blocks for Local Scopes II (by) · · javascript, scope
- Different Ways to Write CSS in React (by/via) · · css, react
- 10 Incident Management Best Practices for Streamlined Operations (via) · · incident-response, best-practices, processes
- What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? (by) · · videos, accessibility, writing, information-design
- The Right Space Around Headings in Web Typography (by) · · typography, spacing, headings
- Svelte Origins: A JavaScript Documentary (via) · · videos, javascript, svelte
- How and When to Use the CSS “:has” Selector (by/via) · · css, selectors
- Cascade Layers—There’s a Polyfill for That! (by/via) · · css, cascade, polyfills
- Be the Browser’s Mentor, Not Its Micromanager (by/via) · · videos, css
- A Beginner’s Guide to Inclusive UX Design (via) · · guides, dei, user-experience, design
- How I Built a Dark Mode Toggle (by) · · dark-mode, toggles
- One Line of CSS to Add Basic Dark/Light Mode (by) · · dark-mode, css
- Icon-Only Links Fail WCAG (by) · · accessibility, links, wcag, images, icons, conformance
- Future Features of JS (by/via) · · videos, javascript
- Best Practices for Overlays II (via) · · accessibility, best-practices, overlays
- The Dos and Don’ts of Pairing Typefaces (by/via) · · design, typography, readability, legibility, usability
- The Case for Using Sass in 2022 (by) · · preprocessors, sass
- Alternatives to Installing npm Packages Globally (by) · · installing, npm, dependencies
- Why Do We Call It Breadcrumbs? Diving Into the History of UI Components (via) · · design, naming, history
- Using Web Streams on Node.js (by) · · nodejs, streaming
- The Cost of Convenience (by) · · web-platform, developer-experience
- Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement (by) · · user-experience, cookies, pop-ups, legal
- Is It Expensive to Build an Eco-Friendly Website? (via) · · sustainability, economics
- 3 Useful CSS Hacks (by) · · videos, css
- Web Design Tool Wish List (by/via) · · design, tooling, wish-lists
- Notes on Maintaining an Internal React Component Library (by) · · react, maintenance, components, libraries
- Naming Conventions for Design Systems (via) · · design-systems, naming, conventions
- In and Out of Style (by/via) · · videos, css
- How to Use ESLint and Prettier for Code Analysis and Formatting (by) · · how-tos, quality, consistency, eslint, prettier, linting, formatting
- Communication Accessibility: It’s Time to Change How We Communicate (by) · · accessibility, communication
- You Don’t Need a JavaScript Library for Your Components · · javascript, libraries, components
- The Guide to Windows High Contrast Mode (by/via) · · guides, colors, contrast, microsoft, windows
- How to Remove 99% of JavaScript From Main Thread (by/via) · · videos, how-tos, javascript, performance
- How to Prevent Merge Conflicts (or at Least Have Less of Them) (by/via) · · how-tos, version-control, git
- Fun CSS-Only Scrolling Effects for Matterday (by/via) · · css, effects
- Do Dyslexia Fonts Improve Accessibility? (via) · · accessibility, fonts
- Conditionally Styling Selected Elements in a Grid Container (by/via) · · css, selectors
- Complex vs. Compound Selectors (by) · · css, selectors, comparisons
- 5 Very Simple Steps You Can Take for Accessibility Improvement (via) · · accessibility, optimization
- Simple CSS Solutions (by) · · videos, css
- Why You Shouldn’t Modify Scrum (by/via) · · agile, scrum, processes
- Understanding the JavaScript Window Object (by/via) · · javascript, objects
- Software Engineering: The Soft Parts (by) · · principles
- Should I Have Separate GitHub Accounts for Personal and Professional Projects? (via) · · discussions, github, career, security
- Dialogs and Shadow DOM: Can We Make It Accessible? (by) · · modals, accessibility, dom, shadow-dom
- Design Principles for the Web (by/via) · · videos, software-design, principles, web
- CSS Card Shadow Effects (by) · · css, effects
- Change Management for Accessibility (by+/via) · · accessibility, processes
- What We’ve Learned From One Year of Real User Monitoring Data on GOV.UK (by/via) · · performance, monitoring, metrics
- The Smallest CSS (by) · · css, minimalism
- The Folly of Design System “Foundations” (by) · · design-systems
- Designing the Perfect Button (by/via) · · design, buttons
- Design System Maturity (by/via) · · videos, design-systems
- Modern JavaScript, 10 Things You Should Be Using, Starting Today (by/via) · · javascript
- AbortController Is Your Friend (by) · · javascript
- Better Scrolling Through Modern CSS (by) · · css, scrolling
- Write HTML Right (by) · · html, optimization
- The Many Definitions of Server-Side Rendering (by) · · server-side-rendering
- State of the Vuenion 2022 (by/via) · · videos, vuejs
- Single Element Loaders: The Spinner (by/via) · · css, effects
- Measuring the Performance of Typefaces for Users II (via) · · typography, fonts, performance
- Make DevTools Pick Colors Outside of Chrome (by) · · dev-tools, colors, user-agents, google, chrome
- How We Think About Browsers (by/via) · · user-agents, case-studies
- 10 Dos and Don’ts of Web Design in 2022 (by/via) · · design, principles
- Design Systems; the Great Connector (by/via) · · design-systems
- The Future of Frontend Build Tools (by/via) · · tooling, building
- Inclusive User Research: Analysing Findings (via) · · dei, usability, research
- Mobile-First CSS: Is It Time for a Rethink? (via) · · mobile-first, mobile, css
- WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow (by) · · accessibility, reflow, resizing, wcag
- Simplify Your Color Palette With CSS “color-mix()” (by/via) · · css, colors, color-palettes
- Patterns for Building JavaScript Websites in 2022 (by/via) · · javascript, frameworks, comparisons
- JavaScript Hydration Is a Workaround, Not a Solution (by/via) · · javascript, hydration
- How to Use Headings for Website Accessibility (via) · · how-tos, accessibility, headings, semantics
- How to Animate SVG Shapes on Scroll (by/via) · · how-tos, css, animations, svg
- How to Create Dark Mode for Your Designs in Figma (by/via) · · how-tos, dark-mode, figma
- Optimize the Use of “if–else” · · javascript
- Meet Web Push (by/via) · · user-agents, apis, support, standards
- Mathematical Notation for JavaScript Developers Explained (by/via) · · javascript, math
- Building Interoperable Web Components That Even Work With React (by/via) · · web-components, interoperability, react
- Aspects of Accessibility—Semantics, Contrast, and… Anxiety? (by) · · accessibility, semantics, colors, contrast, user-experience
- A New Definition of HTTP (by) · · protocols, http