News and Tools for Frontend Development (16)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Incorporating Accessible Design Elements into Your Web Site · · accessibility, design
- Less Design Leadership—More Design Authorship · · design, leadership
- What Is the Open Web? · · web, web-platform
- Harnessing Groupthink: Fine-Tuning CSS Specifications · · css, collaboration
- Taming the Cascade With BEM and Modern CSS Selectors · · css, cascade, selectors, naming, bem
- State of JavaScript 2022 · · surveys, javascript
- 4 Mobile Must-Haves for a Modern UX Design Strategy · · user-experience, design, responsive-design, mobile
- How to Use Huge Type on the Web · · how-tos, design, typography
- A Guide to Keyboard Accessibility: JavaScript · · guides, accessibility, keyboard-navigation, javascript
- Analyzing the Top 100 Retailers for Digital Accessibility · · studies, research, accessibility
- Brief Note on “aria-readonly” Support · · accessibility, html, aria, assistive-tech, support
- Multidimensional Design Systems · · videos, design-systems
- Today I Learned: The Subtle Art of Code Reviews · · code-reviews, best-practices, quality
- An Introduction to the Design Tokens File Format · · videos, introductions, design-tokens
- Git Notes: Git’s Coolest, Most Unloved Feature · · git
- The Easiest Way to Get Started With CSS Grid · · videos, css, layout
- How to Handle Unplanned Work in Scrum · · how-tos, scrum, agile, processes
- The Ultimate Guide to Frontend Monitoring · · guides, monitoring
- Firefox-Only CSS · · css, user-agents, mozilla, firefox
- Style a Parent Element Based on Its Number of Children Using CSS “:has()” · · css, selectors
- Experimenting With Layering, Filtering, and Masking in CSS · · css, experiments, masking
- You Don’t Need HTML · · websites, html, web-platform
- A Guide to Image Optimization on Jamstack Sites · · guides, images, compression, optimization, performance, tech-stacks, jamstack
- Back to Basics: What are Callbacks in JavaScript? · · fundamentals, javascript
- Accessibility Is in Style—Styles and Style Guides · · accessibility, writing, design, consistency, quality
- CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly · · css, best-practices
- Theory-Building and Why Employee Churn Is Lethal to Software Companies · · processes, productivity
- Using Automated Test Results to Improve Accessibility · · automation, testing, accessibility
- “vh”, “svh”, “lvh”, and “dvh” · · css
- Spy On “window.postMessage” Calls · · javascript, cypress, testing
- Build and Deploy a Node.js Microservices Application · · nodejs, microservices, deploying
- Improving React Interaction Times by 4× · · react, performance, optimization
- 5 Insider Tips to Make Accessibility Part of Workflow · · accessibility, tips-and-tricks, processes
- “Not Secure” Warning for IE Mode · · user-agents, microsoft, edge, internet-explorer, security
- Building Conscious Design Systems · · design-systems
- The Best Programming Languages You Can Use for Web Development · · programming, web-platform
- The Heuristics of Neurodesign · · design, heuristics
- Visual Design: Breaking into the Fourth Dimension of Experience Design · · design, user-experience
- Significant Improvements for Screen Readers Now in Nightly Firefox · · user-agents, assistive-tech, screen-readers, mozilla, firefox, accessibility
- Your Accessibility Claims Are Wrong, Unless… · · accessibility, communication
- Web Sustainability Resources · · sustainability, link-lists
- Awesome Productivity Tools for Developers · · productivity, tooling
- A Guide to Keyboard Accessibility: HTML and CSS · · guides, accessibility, keyboard-navigation, html, css
- Content Strategy 101 · · content, strategies
- Git Cheat Sheet With 40+ Commands and Concepts · · git, cheat-sheets, concepts
- The Evolution of Scalable CSS · · css, maintainability, scaling, history
- Don’t Disable the Zoom Functionality · · accessibility
- The IndieWeb for Everyone · · web, indieweb
- CSS “:where()” “:is()” the Difference? · · css, selectors
- CSS Grid and Custom Shapes III · · css, design
- 10 Things I Wish I’d Known When Starting My Coding Journey · · career
- When Our Tools Hold Us Back · · design, css, tooling
- An Open Challenge (to Tech Event Organizers) · · community
- Are You Using an Accessibility Overlay to Help Disabled Users? Don’t! · · accessibility, overlays, legal
- Node.js Security Best Practices · · nodejs, security, best-practices
- State of Design Systems 2022 Survey · · surveys, design-systems
- What’s New in WCAG 2.2 · · videos, accessibility, wcag, standards
- Why Your Backend in Node.js Needs an API Layer and How to Build It · · nodejs, architecture, apis
- The Anatomy of “visually-hidden” · · accessibility, css
- Easily Switch Between Different Node Versions Using nvm · · videos, nodejs, nvm
- A Brief and Probably Only Partially Correct History of CSS Nesting · · css, history, nesting
- Accessfuturism: Digital Accessibility in 2032 · · videos, accessibility, visions
- Browsers, JSON, and FormData · · user-agents, json, apis
- CSS Timeline · · websites, css, history
- Cultivating Design Systems by Bringing Intention · · design-systems
- Designing for People Who Use a Mouse · · videos, accessibility
- Foundations: Native Versus Custom Components · · components, html, comparisons
- Generating Slugs Using One Line of Code in JavaScript · · javascript
- Is “CSS Engineer” Now a Job Position? · · css, career
- TypeScript With Node.js · · typescript, nodejs
- What CSS Do You Absolutely Have to Know in 2022? · · css
- Early Learnings for Early Hints at Shopify · · videos, case-studies, performance, hints
- How to Create the Perfect Hero Image for Your Portfolio Site · · how-tos, design
- How to Improve User Experience and Wow Your Users · · how-tos, user-experience
- Dialogs, Modality, and Popovers Seem Similar—How Are They Different? · · html, semantics, accessibility, modals, pop-overs
- Accessibility Contrast Requirements Explained and How to Fix 5 Common Low-Contrast Issues · · accessibility, colors, contrast
- A Simpler Approach to Document and Web Accessibility · · accessibility
- Managing CSS Styles in a WordPress Block Theme · · css, maintenance, wordpress, theming
- Saved from Callback Hell · · javascript
- The Superpowers of Design Tokens · · videos, design-tokens
- What Designers Can Learn from Apple’s New Accessibility Features · · accessibility, design, apple
- Why You Need to Monitor and Report on Accessibility—All the Time · · accessibility, monitoring, compliance, legal
- Responsive Accessibility Using “visibility: hidden” · · accessibility, responsive-design
- npm Security: Preventing Supply Chain Attacks · · npm, dependencies, security
- Client-Side Routing Without the JavaScript · · javascript, performance, frameworks
- Why Would Anyone Need JavaScript Generator Functions? · · javascript, functions
- Using Data-Driven Analytics to Improve Your Site’s User Experience · · user-experience, analytics, metrics
- Creating a Design System Using Radix · · design-systems, radix
- Inside the Mind of a Frontend Developer: Hero Section · · html, css
- Too Much Efficiency Makes Everything Worse: Overfitting and the Strong Version of Goodhart’s Law · · efficiency, ai
- Visual Design in UX: Study Guide · · guides, design, user-experience, training, link-lists
- Accessibility “Gaps” in MVPs · · accessibility
- Writing Better Documentation · · documentation, writing
- 5 Takeaways from Screen Reader Usability Interviews · · accessibility, user-agents, assistive-tech, screen-readers
- An Animated Guide for Node.js Event Loop · · guides, nodejs, events
- 6 Steps to Improve HTML Images for Users and Developers · · html, images, performance, responsive-design
- Caring About the World Wide Web · · videos, accessibility, inclusion, web
- Minimal Dark Mode · · dark-mode, css, minimalism
- See This Page Fetch Itself, Byte by Byte, over TLS · · websites, typescript, tls
- Ways to Improve Developer Onboarding on an Existing Codebase · · onboarding, productivity
- Frontend Dogma on Mastodon · · announcements
- 7 Tactics That Benefit Both Accessibility and SEO · · accessibility, seo
- A Deep Dive into Accessible Notifications · · videos, accessibility, notifications
- A Testing Strategy for Accessibility in New Apps · · accessibility, testing
- Progress over Perfection: A Better Way to Accessibility · · accessibility, processes
- Why You Need to Involve Deaf and Hard of Hearing People in Research and Testing · · videos, accessibility
- The Best PHP Frameworks for 2022 · · php, frameworks
- Speedy CSS Tip! Animated Gradient Text · · css, gradients
- 16 Rare HTML Tags You Really Should Know · · html, semantics
- Tips for Design System Component Pages · · design-systems, components, documentation, consistency, tips-and-tricks
- Sustainable Web Design Reduces E-Waste · · sustainability
- An Introduction to CSS Cascade Layers · · introductions, css, cascade
- Design Management Toolbox: Non-Linear Professional Development · · design, career
- Next Steps for the W3C Web Accessibility Initiative · · videos, accessibility, w3c
- Should Consistency Be a Goal of Design Systems? · · consistency, design-systems
- Designing the Perfect Mobile Navigation UX · · mobile, navigation, user-experience
- Tips to Become a Great Software Engineer · · career
- How to Start a Content Audit · · how-tos, content, content-management, auditing, quality
- HTML and CSS Features, Tips for a 10× Faster Page Loading Speed · · html, css, performance, tips-and-tricks
- Is Turbopack Really 10× Faster Than Vite? · · tooling, bundling, performance, vite
- An Overview of JavaScript Promises · · overviews, javascript, promises
- The New CSS Media Query Range Syntax · · css, media-queries
- TypeScript 5.0 Iteration Plan · · typescript
- “aria-label” Is a Code Smell · · accessibility, quality, technical-debt
- Intro to HTML-First Frontend Frameworks · · introductions, html, frameworks
- Why One Web Pioneer Thinks It’s Time to Reinvent the Browser · · user-agents, web
- Screenshotting VoiceOver on macOS · · tooling, screenshots, apple, voiceover
- Folder Structure for Node.js and Express.js Project · · architecture, nodejs, express
- My Divtober 2022 Drawings · · css, art
- Complexity and Caution · · accessibility, usability, complexity
- 20+ Laravel Best Practices, Tips, and Tricks to Use in 2023 · · laravel, best-practices, tips-and-tricks
- 5 Visual Treatments that Improve Accessibility · · accessibility, design
- Hostile Patterns in Error Messages · · usability, design, errors, anti-patterns
- Knowing What It’s Not · · design, spacing
- Do We Need an Interop for Assistive Technologies? · · accessibility, user-agents, assistive-tech, screen-readers, interoperability
- 7 Shorthand Optimization Tricks Every JavaScript Developer Should Know · · javascript, optimization
- CSS Ellipsis for Single-Line and Multi-Line Text · · css, typography
- How to Build, Test, and Publish a TypeScript npm Package in 2022 · · how-tos, typescript, npm
- How to Create Advanced Animations With CSS · · how-tos, css, animations
- All Designers Start as Copycats (and That’s OK) · · design, career
- Motion Controls in the Browser · · user-agents, javascript, permissions
- Practical CSS Guide for Busy Developers · · guides, css
- React Concurrency, Explained · · slides, react, concurrency
- Using HSL Colors in CSS · · css, colors
- What Is a Realm in JavaScript? · · javascript
- Why You Should Never Use “px” to Set “font-size” in CSS · · css, accessibility
- How Flaky Tests Impact Developers · · testing, quality
- How to Communicate Effectively as a Developer · · how-tos, communication, writing, career
- Type-Safe TypeScript With Type Narrowing · · typescript, type-safety
- CSS Runtime Performance · · slides, css, performance
- Masked Gradient Dashed Lines · · css, gradients, masking
- Accessibility Beyond the “Obvious” · · accessibility
- Getting WCAG Color Contrast Right · · accessibility, wcag, colors, contrast
- Design Principles for the Web · · videos, design, principles
- Typographic Hierarchies · · typography, design
- Web Accessibility: ARIA 101 · · videos, accessibility, aria
- A Beginner’s Guide to Chrome Tracing · · guides, user-agents, google, chrome, performance
- Code Coverage With Storybook Test Runner · · testing, code-coverage, storybook
- The Math Behind Nesting Rounded Corners · · css, math, nesting
- Guide to the Best JavaScript Books for Beginners · · guides, books, javascript, link-lists
- Conditionally Adaptive CSS—Browser Behavior That Might Improve Your Performance · · css, responsive-design, performance
- CSS Animated Grid Layouts · · css, layout, animations
- Animated Border Gradient · · code-pens, css, animations, gradients, effects
- Building a Tooltip Component · · components, html, css
- OKLCH in CSS: Why We Moved from RGB and HSL · · css, colors, oklch
- Performance · · studies, research, performance, web-vitals
- Structured Data · · studies, research, structured-data, semantics
- Detect System Theme Preference Change Using JavaScript · · dark-mode, javascript
- Do You Really Understand CSS Radial Gradients? · · css, gradients
- Don’t Be Afraid of Reverting Code in Git · · git
- Is There Too Much CSS Now? · · css
- What? How? Why? “@ layer” · · css, cascade
- Disruptive Design Patterns—an Uncharted Territory · · design-patterns
- Evolution of Manuals: UX Inspiration from History · · user-experience, history, documentation
- How We Improved React Loading Times by 70% With Next.js · · react, performance, nextjs, case-studies
- Tailwind CSS v3.2: Revisiting My “Feature Creep” Warning · · css, tailwind
- Twitter Reminds Us About Alt Text, but How Good Are We at It? · · accessibility, writing, alt-text, twitter
- Things Strong Developers Do That Drive Their Team Crazy · · communication, productivity
- Javascript Shallow Copy—What Is a Shallow Copy? · · javascript
- New Git Guidelines: We Have Switched to Conventional Commits · · guidelines, git, conventions
- 53 UX Statistics to Know for 2023 · · user-experience, research
- Let’s Talk About Web Components · · web-components
- How to Set Up the New Google Auth in a React and Express App · · how-tos, google, authentication, react, express
- CSS Is Awesome · · videos, css
- Responsive Animations for Every Screen Size and Device · · animations, css, responsive-design
- Usable, Useful, and Valuable · · agile, scrum, processes, user-experience
- Which Serverless Edge Platform Has the Fastest Git Deployments? · · serverless, edge-computing, git, performance, deploying
- Why I Never Understood CSS-in-JS · · javascript, css, css-in-js
- A Dashing Navbar Solution · · css
- Ethical Design Is a Risk Management Strategy · · design, ethics, strategies
- SEO and Accessibility Are Symbiotic · · accessibility, seo
- Digital Accessibility—Ask Me Anything · · videos, accessibility
- GitHub Copilot Investigation · · websites, github, ai, legal
- Redo Websites Less Often (to Become a Better Developer) · · processes, career
- State of CSS Frameworks · · videos, css, frameworks
- The True Type in PHP 8.2 · · php
- What If the Team Hates My Functional Code? · · programming
- Why We Need CSS Speech · · accessibility, css
- How to Build the Foundation for Digital Accessibility · · how-tos, accessibility, policies, processes
- Highly Customizable Background Gradients · · css, backgrounds, gradients
- I Made a Full-Stack and Type-Safe Personal Site Using the T3 Stack · · nextjs, tailwind, type-safety, tech-stacks
- Applying the 8 Golden Rules of User-Interface Design · · design, usability, consistency
- CSS Specificity for Beginners · · css, cascade
- Edit Someone Else’s Website: “contenteditable” and “designMode” · · html
- Hands-On Guide to Color Fonts and “@ font-palette-values” · · videos, guides, css, fonts
- The Proprietary Syndication Formats · · syndication
- Designing for Users With Disabilities: 10 Factors to Consider · · accessibility, design, usability
- Forging Successful Partnerships With Software Developers · · collaboration, design
- Common ARIA Mistakes and How to Avoid Them · · accessibility, html, aria, mistakes
- Google on Alt Text SEO and Accessibility · · google, seo, accessibility, writing, alt-text
- Secure JavaScript URL Validation · · javascript, validation, urls, security
- Next.js Crash Course · · videos, nextjs
- The Wasted Potential of CSS Attribute Selectors · · css, selectors, bem
- Why We’re Breaking Up With CSS-in-JS · · javascript, css, css-in-js
- Don’t Be Arrogantly Ignorant: Don’t Flame · · career, communication
- Moving from React to htmx · · migration, react, htmx
- How to Rebase Stacked Git Branches · · how-tos, git
- Accessibility Checkers—a Good Start, Not a Solution · · accessibility, testing, tooling
- Design for Them Not for You · · videos, design, usability
- New Brutalism and Web Accessibility: What You Need to Know · · design, accessibility
- Scoop: Meta Ending Support for Instant Articles · · meta, support
- Container Queries: Style Queries · · css, container-queries
- Microfrontends: Microservices for the Frontend · · micro-frontends, microservices
- Intro to Why Accessibility Is Important for Good SEO · · introductions, accessibility, seo
- Two JavaScripts · · javascript
- What I Learned About SVG Accessibility (Among Other Things) from NBC News’ Senate “What If” Project · · accessibility, svg
- Upgrading Colors to HD on the Web · · css, colors
- A Pure CSS Gallery Focus Effect With “:not” · · css, selectors
- Augmenting Node.js With WebAssembly · · videos, nodejs, webassembly
- Some Things I Took Away from an Event Apart 2022 in Denver · · web, accessibility, css
- CDN · · studies, research, performance, content-delivery, tooling
- Representation in “alt” Text · · accessibility, inclusion, writing
- Speeding Up Async Snippets · · performance, javascript
- The Web’s Next Transition · · web
- Create a Passkey for Passwordless Logins · · authentication, security, passwords
- Early Days of Container Style Queries · · css, container-queries
- How to Animate CSS Box Shadows and Optimize Performance · · how-tos, css, animations, shadows, performance
- Design Specifications Template · · design, templates
- The Border Property You Never Knew You Needed · · videos, css
- Tree Views in CSS · · css
- Sustainable Web Development Strategies Within an Organization · · sustainability, performance, optimization
- Bun? Deno? Node.js? Creating Your Own JavaScript Runtime Using V8, Libuv, and More · · videos, javascript, runtimes, v8
- Quick Tip: How to Use the Ternary Operator in JavaScript · · how-tos, javascript, operators, tips-and-tricks
- Challenges of Multi-Brand Design Systems · · design-systems, branding, theming
- HTML 2022: 20 Additional Observations from Analyzing the Web Almanac Data · · html, metrics
- SVG Sprites: Old-School, Modern, Unknown, and Forgotten · · svg, performance
- When New CSS Features Collide: Possibility and Complexity at the Intersections · · slides, css, complexity, interoperability
- Delightful UI Animations With Shared Element Transitions API II · · javascript, animations, transitions, apis
- WCAG 2.2 Success Criteria · · accessibility, wcag
- :where :is CSS? · · css, selectors