News and Tools for Frontend Development (19)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Working With File System Paths on Node.js · · nodejs, file-handling
- Minimal Social Markup · · html, social-media, minimalism
- Perceived Affordances and the Functionality Mismatch · · usability, accessibility, semantics
- What Is the Best Way to Mark Up an Exclusive Button Group? · · html, semantics, accessibility, aria
- Web Accessibility Laws and Policies · · accessibility, legal, policies, link-lists
- The Hidden History of Screen Readers · · accessibility, user-agents, assistive-tech, screen-readers, history
- My War on Animation · · accessibility, animations
- Optimizing Node.js Dependencies in AWS Lambda · · nodejs, dependencies, aws, optimization
- The “Array.prototype.at()” Method in Vanilla JavaScript · · javascript
- Bag Some AAA Wins Where You Can · · accessibility, wcag
- Custom ESM Loaders: Who, What, When, Where, Why, How · · nodejs, modules
- Applying SOLID Principles in React · · quality, maintainability, principles, react
- The Methods UX Professionals Use · · user-experience, processes
- What You Need to Know About ARIA and How to Fix Common Mistakes · · accessibility, html, aria, mistakes
- The Cost of Consistency in UI Frameworks · · frameworks, consistency
- 37 Easy Ways to Spice Up Your UI Designs · · design, effects
- Fundamentals Matter · · fundamentals
- Guide to Trending Front-End Frameworks in 2022 · · guides, frameworks, react, jquery, express, angular, vuejs
- Integer Math in JavaScript · · javascript, math
- Statements vs. Expressions · · javascript, comparisons
- Technical Writing for Developers · · writing, version-control
- The Many Faces of Themeable Design Systems · · design-systems, theming
- A Look at Remix and the Differences With Next.js · · comparisons, frameworks, remix, nextjs
- Generating Accessibility Test Results for a Whole Website With Pa11y CI · · accessibility, testing, tooling
- Forms in Modals: UX Case · · forms, modals, user-experience
- Building (or Rebuilding) a Website With Accessibility in Mind · · accessibility
- Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes · · performance, web-vitals, comparisons, html, css
- 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 · · design, complexity, processes
- Figma Auto Layout = “display: flex” · · figma, css
- Working on a New Feature as a Senior Frontend Developer · · processes
- CSS Complexity: It’s Complicated · · css, cascade
- The Future of CSS: Variable Units, Powered by Custom Properties · · css, units, custom-properties
- Set JAWS Free! · · accessibility, user-agents, assistive-tech, screen-readers, jaws
- Data Structure and Algorithms 102 · · algorithms, complexity
- An Accessibility-First Approach to Chart Visual Design · · accessibility, information-design
- It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility Via Display Properties · · accessibility, user-agents, apple, safari, css
- The CSS Cascade, a Deep Dive · · videos, css, cascade
- Make It Accessible · · websites, accessibility
- Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · how-tos, css, blend-modes, effects
- Why the HTML Outlining Algorithm Was Removed from the Spec—the Truth Will Shock You! · · html, semantics, accessibility
- Captions: Humans vs. Artificial Intelligence: Who Wins? · · accessibility, captions, writing, automation, comparisons
- What Are Color Gamuts · · colors
- The Joy of Variable Fonts: Getting Started on the Frontend · · fonts, css, introductions
- The Hard Parts of Developer Advocacy (for Me) · · developer-relations, community, career
- Truly Portable Design Patterns · · design-patterns, components
- Consistency in UX Design: To What Extent Is “Best Practice” the Right Choice? · · user-experience, design, consistency, best-practices
- Executing Shell Commands from Node.js · · nodejs, command-line
- Inverted Media Queries and Breakpoints · · css, media-queries
- The Off by Default Web · · web, permissions
- Masonry? In CSS?! · · css, layout
- The Case for Null in Design Systems · · design-systems
- The Ballad of Text Overflow · · css, accessibility
- Style With Stateful, Semantic Selectors · · css, aria
- Body Margin 8px · · css, history
- The Unlocked Possibilities of the “:has()” Selector · · css, selectors
- Two Levels of Customising “<selectmenu>” · · accessibility, html
- How to Make Text Improve User Experience: Insights into UX Writing · · how-tos, user-experience, writing
- Super-Helpful Tips When Working With Figma Component Properties · · figma, tips-and-tricks, components
- css-browser-support · · packages, npm, css, user-agents, support
- Frontend Web Performance: The Essentials · · performance, javascript
- Faster WordPress Rendering With 3 Lines of Configuration · · wordpress, performance, css, http, configuration
- Imagemin Guard · · packages, npm, images, compression, performance, jpeg, png, gif, webp, avif
- Best Practices for Images · · images, html, best-practices
- Web Development Is Like Assembling IKEA Furniture · · comparisons
- Breaking Out of a Central Wrapper · · css
- Reimagining Front-End Web Development With htmx and Hyperscript · · visions, htmx
- Write Git Commit Messages That Your Colleagues Will Love · · git
- CSS Variable Secrets · · videos, css
- “That’s Not Accessible!” and Other Statements About Accessibility · · accessibility
- The New Wave of React State Management · · react, state-management, comparisons
- 404 vs. 410—the Technical SEO Experiment · · seo, http, comparisons, experiments
- Thoughts on an Accessibility “Get Well” Plan · · accessibility, processes, leadership
- Farewell to HTML5Rocks · · community, html, history
- Building Tabs in Web Components · · web-components
- What Every Newbie Developer Should Know · · career
- What the Hell Is “<!DOCTYPE html>”? · · html
- Googlebot and the 15 MB Thing · · google, seo
- Are You Sure That’s a Number Input? · · html
- Working With the File System on Node.js · · nodejs, file-handling, apis
- Demystifying the New Gatsby Framework · · frameworks, gatsby
- SPAs: Theory Versus Practice · · spas, comparisons
- What Do the Developers Do in the Last Week of the Sprint? · · agile, scrum, processes
- A CLS Punishment for Progressive Enhancement? · · performance, web-vitals, progressive-enhancement
- Style Queries · · css, container-queries
- A Previous Sibling Selector · · css, selectors
- Using JavaScript to Fill localStorage to Its Maximum Capacity · · javascript, storage
- UX Writing: Study Guide · · guides, user-experience, writing, training, link-lists
- GA4 Is Being Blocked by Content Security Policy · · security, csp, metrics, google
- Why Use Sass? · · preprocessors, sass
- Accessible Design Systems · · accessibility, design-systems
- Introduction to Defensive CSS · · introductions, css
- WCAG 2.1 AA Web Accessibility Checklist · · checklists, accessibility, wcag
- Single Element Loaders: The Bars · · css
- Missing Introduction to React · · introductions, react
- 4+ Years of Cracking Technical Interviews · · interviewing, career
- 5 Useful CSS Properties That Get No Love · · videos, css
- 7 UX Laws You’re Probably Getting Wrong · · user-experience, usability, design
- Apple Is Not Defending Browser Engine Choice · · user-agents, engines, web, apple
- Can We Enterprise CSS Grid? · · css, layout, frameworks
- Mastering “z-index” in CSS · · css
- Managing Specificity With CSS Cascade Layers · · videos, css, cascade
- Stop the Screen Going to Sleep With JavaScript · · javascript
- Getting Started With Vue Composables · · vuejs, introductions
- Everything You Need to Know About Web Performance (in 5 Minutes) · · performance, web-vitals, compression
- How We Designed an Accessible Color Palette from Scratch · · accessibility, colors, color-palettes, case-studies
- Different Ways to Write CSS in React · · css, react
- User Vulnerabilities in the Data Cycle · · user-experience, privacy, legal
- Introducing Keyboard Navigation · · videos, accessibility, introductions
- “text-overflow: ellipsis” Considered Harmful · · accessibility, css
- Please Remove That .git Folder · · security, git
- In Defense of Blocks for Local Scopes II · · javascript, scope
- In Defense of Blocks for Local Scopes · · javascript, scope
- Style Scoping Versus Shadow DOM: Which Is Fastest? · · selectors, scope, dom, shadow-dom, performance, comparisons, metrics
- 10 Incident Management Best Practices for Streamlined Operations · · incident-response, best-practices, processes
- Looking Ahead—Insights from Jeffrey Zeldman and Eric Meyer · · interviews, web, css
- What Would a Chromium-Only Web Look Like? · · user-agents, engines, chromium, google, web
- How and When to Use the CSS “:has” Selector · · css, selectors
- Svelte Origins: A JavaScript Documentary · · videos, javascript, svelte
- What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? · · videos, accessibility, writing, information-design
- The Right Space Around Headings in Web Typography · · typography, spacing, headings
- Cascade Layers—There’s a Polyfill for That! · · css, cascade, polyfills
- Be the Browser’s Mentor, Not Its Micromanager · · videos, css
- A Beginner’s Guide to Inclusive UX Design · · guides, inclusion, user-experience, design
- Best Practices for Overlays II · · accessibility, best-practices, overlays
- Future Features of JS · · videos, javascript
- How I Built a Dark Mode Toggle · · dark-mode
- One Line of CSS to Add Basic Dark/Light Mode · · dark-mode, css
- Icon-Only Links Fail WCAG · · accessibility, links, wcag, images, conformance
- The Dos and Don’ts of Pairing Typefaces · · design, typography, readability, legibility, usability
- Alternatives to Installing npm Packages Globally · · npm, dependencies
- The Case for Using Sass in 2022 · · preprocessors, sass
- Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement · · user-experience, cookies, pop-ups, legal
- Why Do We Call It Breadcrumbs? Diving into the History of UI Components · · design, naming, history
- The Cost of Convenience · · web-platform, developer-experience
- Using Web Streams on Node.js · · nodejs, streaming
- Is It Expensive to Build an Eco-Friendly Website? · · sustainability, economics
- 3 Useful CSS Hacks · · videos, css
- In and Out of Style · · videos, css
- Naming Conventions for Design Systems · · design-systems, naming, conventions
- Notes on Maintaining an Internal React Component Library · · react, maintenance, components, libraries
- How to Use ESLint and Prettier for Code Analysis and Formatting · · how-tos, quality, consistency, eslint, prettier, linting, formatting
- 5 Very Simple Steps You Can Take for Accessibility Improvement · · accessibility, optimization
- Communication Accessibility: It’s Time to Change How We Communicate · · accessibility, communication
- Complex vs. Compound Selectors · · css, selectors, comparisons
- Conditionally Styling Selected Elements in a Grid Container · · css, selectors
- Do Dyslexia Fonts Improve Accessibility? · · accessibility, fonts
- Fun CSS-Only Scrolling Effects for Matterday · · css, effects
- You Don’t Need a JavaScript Library for Your Components · · javascript, libraries, components
- How to Prevent Merge Conflicts (or at Least Have Less of Them) · · how-tos, version-control, git
- How to Remove 99% of JavaScript from Main Thread · · how-tos, videos, javascript, performance
- The Guide to Windows High Contrast Mode · · guides, colors, contrast
- Change Management for Accessibility · · accessibility, processes
- CSS Card Shadow Effects · · css, effects
- Design Principles for the Web · · videos, software-design, principles, web
- Simple CSS Solutions · · videos, css
- Understanding the JavaScript Window Object · · javascript, objects
- Why You Shouldn’t Modify Scrum · · agile, scrum, processes
- Should I Have Separate GitHub Accounts for Personal and Professional Projects? · · discussions, github, career, security
- Software Engineering: The Soft Parts · · principles
- Dialogs and Shadow DOM: Can We Make It Accessible? · · modals, accessibility, dom, shadow-dom
- Design System Maturity · · videos, design-systems
- The Folly of Design System “Foundations” · · design-systems
- What We’ve Learned from One Year of Real User Monitoring Data on GOV.UK · · performance, monitoring, metrics
- Designing the Perfect Button · · design, buttons
- The Smallest CSS · · css, minimalism
- Modern JavaScript, 10 Things You Should Be Using, Starting Today · · javascript
- AbortController Is Your Friend · · javascript
- Better Scrolling Through Modern CSS · · css, scrolling
- 10 Do’s and Don’ts of Web Design in 2022 · · design, principles
- Measuring the Performance of Typefaces for Users II · · typography, fonts, performance
- State of the Vuenion 2022 · · videos, vuejs
- The Many Definitions of Server-Side Rendering · · server-side-rendering
- Write HTML Right · · html, optimization
- Make DevTools Pick Colors Outside of Chrome · · dev-tools, colors, user-agents, google, chrome
- Single Element Loaders: The Spinner · · css, effects
- How We Think About Browsers · · user-agents, case-studies
- Design Systems; the Great Connector · · design-systems
- The Future of Frontend Build Tools · · tooling, building
- Inclusive User Research: Analysing Findings · · inclusion, usability, research
- Mobile-First CSS: Is It Time for a Rethink? · · mobile-first, css
- Simplify Your Color Palette With CSS “color-mix()” · · css, colors, color-palettes
- WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow · · accessibility, reflow, wcag
- Patterns for Building JavaScript Websites in 2022 · · javascript, frameworks, comparisons
- How to Animate SVG Shapes on Scroll · · how-tos, css, animations, svg
- How to Use Headings for Website Accessibility · · how-tos, accessibility, headings, semantics
- JavaScript Hydration Is a Workaround, Not a Solution · · javascript, hydration
- Mathematical Notation for JavaScript Developers Explained · · javascript, math
- Building Interoperable Web Components That Even Work With React · · web-components, interoperability, react
- Optimize the Use of “if–else” · · javascript
- How to Create Dark Mode for Your Designs in Figma · · how-tos, dark-mode, figma
- Meet Web Push · · user-agents, apis, support, standards
- Aspects of Accessibility—Semantics, Contrast, and… Anxiety? · · accessibility, semantics, colors, contrast, user-experience
- Best Practices for Overlays · · accessibility, best-practices, overlays
- Web Typography: Establishing a Strong Typographic System · · typography
- Shallow Copy and Deep Copy · · javascript
- Are You Ignoring Digital Accessibility at Your Job? · · accessibility, career
- Can I DevTools? · · websites, user-agents, dev-tools, support
- How to Use Variables in CSS · · how-tos, css, custom-properties
- Measuring the Performance of Typefaces for Users · · typography, fonts, performance
- Hamburger Footer: Reaching the Bottom of Infinite Scroll · · scrolling, usability
- WCAG 3 Compliant? Check Again · · accessibility, wcag, standards
- Why Most Design Systems Implode · · interviews, design-systems
- A Brief History of Responsive Web Design · · history, responsive-design
- Web Development Resources · · websites, link-lists
- Don’t Sink Your Website With Third Parties · · embed-code, dependencies, performance
- Declarative Design Systems · · design-systems
- Do We Have a Lack of Developers or a False Assumption What the Job Is? · · career
- Monorepos in JavaScript and TypeScript · · javascript, typescript, monorepos
- Useful Built-In Node.js APIs · · nodejs, apis
- Dealing With Hover on Mobile · · videos, css, media-queries, mobile
- How to Pick the Least Wrong Colors · · how-tos, colors, design, accessibility
- Obscure CSS: Implicit List-Item Counter · · css
- The Cicada Principle and Why It Matters to Web Designers · · design, principles
- Writing Useful Alt Text · · accessibility, writing, alt-text
- Checklist for Moderating a Usability Test · · usability, testing, checklists
- How Does Social Interaction Change in an Age of New Media? · · web, interaction-design
- Interview With Léonie Watson · · interviews, accessibility
- Two Lines of CSS That Boosts 7× Rendering Performance · · css, performance, rendering
- Understanding CSRF Attacks · · security
- JavaScript of Halftone Printing · · javascript, print
- APCA: The New Algorithm for Accessible Colour Contrast · · accessibility, colors, contrast, apca
- 7 Tips to Improve Your TypeScript · · typescript, tips-and-tricks, optimization
- You May Not Need a Bundler for Your npm Library · · bundling, npm
- Just How Long Should Alt Text Be? · · accessibility, writing, alt-text
- Processing Arrays Non-Destructively: “for-of” vs. “.reduce()” vs. “.flatMap()” · · javascript, arrays, comparisons
- The Story of the Custom Scrollbar Using CSS · · css, scrolling
- What npm Can Learn from Go · · npm
- Manage Accessible Design System Themes With CSS “color-contrast()” · · design-systems, theming, css
- The “Form” Element Created the Modern Web—Was It a Big Mistake? · · html, forms, history, mistakes
- npm Security Update: Attack Campaign Using Stolen OAuth Tokens · · security, version-control, npm, github
- What’s the Alternative (Text)? · · accessibility, writing
- How to Fix: “Buttons Do Not Have Accessible Names” · · how-tos, buttons, wcag
- 8 Shocking HTML Tips You Probably Don’t Know About · · html, tips-and-tricks
- CSS: Absolutely Positioning Things Relatively · · css, layout
- Making Headers Sticky Using CSS for a Better Reading Experience · · css, readability, user-experience
- Understanding Weak Reference in JavaScript · · javascript
- Why Are Iframe Titles Important for Accessibility? · · accessibility, html, writing
- A Perfect Table of Contents With HTML and CSS · · html, css
- JavaScript Closures, Explained · · javascript
- Single Page Applications · · spas
- Customizing Color Fonts on the Web · · fonts, colors, customization
- Advocating for Your Design System · · design-systems
- Four Tradeoffs When Designing Navigation Menus · · design, navigation
- Inclusive Design 101 · · inclusion, design
- Snyk Finds 200+ Malicious npm Packages, Including Cobalt Strike Dependency Confusion Attacks · · javascript, npm, dependencies, security
- How to Position Your Design System Team for Success · · how-tos, design-systems, collaboration, productivity
- 15 Sprint Review Anti-Patterns—Scrum Anti-Patterns Guide 2022 · · agile, scrum, processes, anti-patterns
- 5 Things I’d Want to See Improved in WordPress Core · · wordpress