News and Tools for Frontend Development (18)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Git Cheatsheet · · git, command-line, cheat-sheets
- Disabled JavaScript Turns Off Native Lazy Loading · · javascript, html, performance, lazy-loading
- Is It “:modal”? · · css, selectors, modals
- Focus Appearance Explained · · accessibility, wcag, forms, focus
- The Accessibility and Usability Journey of Drupal’s Primary Navigation · · drupal, accessibility, usability
- Big O Notation Basics Made Dead Simple · · fundamentals, algorithms
- Accessible Lists and Tables · · accessibility, html, tables
- Default Exports in JavaScript Modules Are Terrible · · javascript
- Is Design Thinking Overhyped? · · design
- Useful JavaScript Data Grid Libraries · · javascript, libraries, information-design, comparisons
- Don’t Overwrite Visual Labels With “aria-label” · · accessibility, html, aria
- Comparing JAWS, NVDA, and VoiceOver · · accessibility, user-agents, assistive-tech, screen-readers, comparisons, jaws, nvda, apple, voiceover
- How I Maintain OSS Projects · · open-source, maintenance
- DevTools Tips: How to Inspect and Debug CSS Flexbox · · how-tos, dev-tools, css, tips-and-tricks, user-agents, google, chrome
- Small Steps: Celebrating Four Accessibility Wins · · accessibility, communication
- Neutrality Isn’t an Option When It Comes to Accessibility · · accessibility
- 4 Ways to Minimize Your Dependencies in Node.js · · nodejs, npm, dependencies
- CSS Container Queries Are Finally Here · · css, container-queries
- Cypress Testing: A Guide to Running Web Application Tests · · guides, testing, cypress
- Things Not Available When Someone Blocks All Cookies · · cookies
- Understanding “useMemo” and “useCallback” · · react, hooks
- Interpolating Numeric CSS Variables · · css, custom-properties
- JavaScript Bugs Aplenty in Node.js Ecosystem—Found Automatically · · studies, research, nodejs, javascript, dependencies, security, quality
- An Argument Against CSS Opacity · · css, accessibility, colors, contrast
- Communication Around Digital Accessibility Must Improve: How Users and Businesses Alike Are Failing to Advance Digital Accessibility · · accessibility, communication
- Parents Counting Children in CSS · · css, selectors
- Monitor Events and Function Calls Via Console · · javascript, events, monitoring
- What Makes A Great Toggle Button? II · · forms, usability
- Should I Use a Button or a Link? · · html, buttons, links, semantics
- The Three Laws of Utility Classes · · css, html
- An Ideal REST API—Best Practices · · apis, best-practices
- Be Good-Argument-Driven, Not Data-Driven · · metrics, processes
- On Design System Support · · design-systems
- Using Grid Named Areas to Visualize (and Reference) Your Layout · · css, layout
- What Is Closed Captioning? · · accessibility, multimedia, captions
- Making a Twitter Bot in the Year 2022 With Node.js · · nodejs, twitter
- Modern Alternatives to BEM · · css, sorting, naming, bem, comparisons
- CSS Classes Considered Harmful · · css, html
- Implementing Promisable “setTimeout” · · javascript
- Installing and Running Node.js Bin Scripts · · nodejs, npm
- Short Note on “figure” and “figcaption” · · accessibility, html
- Why Your Website Should Be Under 14 kB in Size · · performance, protocols
- Designing Better Error Messages UX · · user-experience, usability, design, errors
- 20 Principles I Learned from 10 Years of Developing Software · · principles
- Complex Conditional Width Using “flex-basis” With “clamp” · · css
- Measure What You Impact, Not What You Influence · · performance, metrics, optimization
- The Design Principle Paradox · · design, principles
- What Customer-First Web Design Looks Like · · design
- What Is a REST API? · · apis, javascript
- Why Every University Needs an Accessible Standard Website Template · · accessibility, content-management, frameworks
- Creative List Styling · · html, css
- TIL: You Can Access a User’s Camera With Just HTML · · html, permissions
- Accessibility and Supporting Internet Explorer · · accessibility, user-agents, microsoft, internet-explorer, support
- Exploring the Underrated “output” Element · · html
- A Handy Use for Cascade Layers · · css, cascade
- What’s the Value of a Design System? · · podcasts, design-systems
- Scaling SCM Front-End Design With a Design System · · design-systems, scaling
- Does Accessibility Stifle the Creative Process? · · accessibility, processes, creativity
- 8 Tricks for SVG Optimization · · svg, tips-and-tricks, optimization
- How to Use localStorage in JavaScript: An Easy Guide · · how-tos, javascript, storage, guides
- Advanced TypeScript Patterns: API Contracts · · typescript, apis
- Class-Less CSS Frameworks · · css, frameworks, minimalism, resetting
- Conducting an Effective Web-Site UX Audit · · user-experience, auditing
- Design Systems: Prototyping on Steroids · · design-systems, prototyping
- Prepare for WCAG 2.2 and Beyond · · videos, wcag, accessibility, standards
- What Makes a Great Toggle Button? · · forms, usability
- Why User Personas Matter in UX Design · · user-experience, usability, design, personas
- Meet the Top Layer: A Solution to “z-index:10000” · · css
- Bring Focus to the First Form Field With an Error · · accessibility, forms, focus
- CSS Grid and Custom Shapes II · · css, design
- Mac VoiceOver Testing the Simple Way · · accessibility, testing, user-agents, assistive-tech, screen-readers, apple, voiceover
- Learn 5 Optimization Tips for Webpack Step by Step · · webpack, optimization, tips-and-tricks
- A Guide to Using User-Experience Research Methods · · guides, user-experience, research
- You’re Not Using HTTP Status Codes Right · · http, protocols
- A Simple “clamp()” Function in PHP · · php, functions
- React Query vs. SWR · · videos, react, data-fetching, comparisons
- Scaling a System · · design-systems, scaling
- An Introduction to Context Propagation in JavaScript · · introductions, javascript
- Optimize Data Fetching · · data-fetching, performance
- When Do You Use CSS Columns? · · css, layout
- Inclusion Beats Optimization · · accessibility, inclusion, optimization
- Using “:has()” as a CSS Parent Selector and Much More · · css, selectors
- Use the Right Container Query Syntax · · css, container-queries
- Dependency Injection in JS/TS · · javascript, typescript
- How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work · · css, selectors
- Outline Is Your Friend · · css, accessibility
- Can Browsers Optimize the Loading of Third-Party Resources? · · performance, user-agents, embed-code
- Better Conditionals in CSS Media Queries With Range Syntax · · css, media-queries
- React Re-Renders Guide: Preventing Unnecessary Re-Renders · · guides, react, client-side-rendering
- Color and Contrast · · websites, guides, colors, contrast
- Why React Re-Renders · · react, client-side-rendering
- Introduction to Screen Readers (Desktop Edition) · · videos, introductions, accessibility, user-agents, assistive-tech, screen-readers, desktop
- Designing a Better Back Button UX · · user-experience, usability, buttons
- Building Accessible Select Components in React · · components, react, forms, accessibility
- Table Column Alignment With Variable Transforms · · html, css, tables
- Accessible User Experience and A/B Testing · · accessibility, user-experience, testing
- CSS Grid and Custom Shapes · · css, design
- Check Heading Accessibility Using the WAVE Tool · · videos, accessibility, headings, assistive-tech, tooling, testing
- Top 9 Ways to Become a Successful Self-Taught Developer · · career, learning
- Tip: Use “fetchpriority=high” to Load Your LCP Hero Image Sooner · · html, performance, web-vitals
- What Was That Media Query Code Again? · · websites, css, media-queries
- 5 Modern CLI Tools That Help Boost Your Productivity · · tooling, productivity
- Automation and Accessibility—What You Need to Know · · videos, accessibility, automation
- If You’re Not Checking, You’re Guessing · · videos, user-experience
- On Ratings and Meters · · semantics, html, css
- Custom Event Naming Conventions · · javascript, events, naming
- Creative CSS Layout · · videos, css, creativity, layout
- (Re-)Introducing Gatsby, a Reactive Site Generator · · gatsby, react, performance, reactivity, static-site-generators, introductions
- An Introduction to Constraint Based Design Systems · · introductions, design-systems
- The Console API · · javascript, console, apis
- Websites: Past and Present · · web, design, history
- How and Why We Removed jQuery from GOV.UK · · jquery, performance, maintainability
- Modern CSS Selectors · · css, selectors
- TypeScript vs. JavaScript: Which One You Should Use, and Why · · typescript, javascript, comparisons
- Do You Know About “overflow: clip”? · · css
- TypeScript: It’s Not Actually Validating Your Types · · typescript, validation
- Results of Quick Testing of Documentation Tools’ Accessibility · · accessibility, documentation, tooling
- Designing for Long-Form Articles · · design, content
- Here, Here, and Here · · usability
- Accessibility Is Writing · · accessibility, writing
- Core Web Vitals Tools to Boost Your Web Performance Scores · · performance, web-vitals, tooling
- Defining “Integration” Tests · · testing
- Brief Note on Calendar Tables · · accessibility, tables, assistive-tech
- How to Research Components and Patterns: Common Challenges and How to Overcome Them · · how-tos, design-systems, components
- Code Golfing Tips and Tricks: How to Minify Your JavaScript Code · · how-tos, javascript, minification, tips-and-tricks
- SEO Links Obfuscation and Accessibility Problems · · seo, links, obfuscation, accessibility
- The Death of Mozilla Is the Death of the Open Web · · web, mozilla
- Zooming Images in a Grid Layout · · css, effects
- The JavaScript Paradox · · javascript
- Dark Mode With Design Tokens · · design-tokens, dark-mode
- No Demo [Website] Reno · · design, processes
- Capturing Images and Videos from the Camera of Mobile Devices Using HTML · · html, multimedia, mobile
- 5 Good Practices to Scale Your React Projects Easily · · react, scaling, best-practices
- Bringing Perspective to CSS · · css
- The Infinite Marquee · · html, css, animations
- Polyhierarchy in Information Architecture · · videos, information-architecture
- How I Added Scroll Snapping to My Twitter Timeline · · css, scrolling, twitter
- How to Use Multithreading in Node.js · · how-tos, nodejs, multithreading
- Light/Dark Mode · · websites, css, javascript, dark-mode
- One-Dimensional Website Optimization Considered Harmful · · optimization, quality
- AI-Generated Images from AI-Generated Alt Text · · accessibility, writing, alt-text, ai
- What Are Best Practices for Creating Alt Text? · · accessibility, writing, alt-text, best-practices
- 5 Heading Accessibility Issues and How to Fix Them · · accessibility, headings, microcontent
- Not All Zeros Are Equal · · css
- Migration from jQuery to Next.js: A Guide · · guides, migration, jquery, nextjs
- Introducing the New npm Dependency Selector Syntax · · npm, introductions
- “:has()”: The Family Selector · · css, selectors
- One Year of Coding—Recommendations for Beginners from a Beginner · · learning, semantics, accessibility
- Popular Node.js Patterns and Tools to Re-Consider · · nodejs, tooling
- A Delightful Guide to Culture at Mamo (Inspired by Khalil Gibran) · · case-studies, guides, culture
- Finer Grained Control over CSS Transforms With Individual Transform Properties · · css
- Making a Website Under 1 kB · · performance, minimalism, html
- Introduction to SolidJS · · introductions, solidjs
- Fluid Sizing Instead of Multiple Media Queries? · · css, media-queries
- Ruby Styling · · html, css
- Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers · · css, layout
- CSS Border Animations · · css, borders, animations
- IE: RIP or BRB? · · videos, user-agents, microsoft, internet-explorer, history
- Fitts’s Law and Its Applications in UX · · user-experience, interaction-design
- The Importance of Clean Code in Your Startup’s Success · · quality
- Firefox (and Other Browsers), Forgotten? · · user-agents, mozilla, firefox, testing
- How to Add a Subtle Gradient on Top of an Image Using CSS · · how-tos, css, gradients
- Checking If a JavaScript Native Function Is Monkey Patched · · javascript, functions
- The Horizontal Overflow Problem · · css
- Use the Active Voice to Transform Your Design System Documentation · · design-systems, documentation, writing
- Which Generator Builds Markdown the Fastest? · · static-site-generators, markdown, performance, comparisons
- 10+ Things I Always Set Up in Git When I Prepare a New Environment · · git, command-line, environments
- 8 Simple Steps to Complete a Technical SEO Audit · · seo, auditing
- Adding Observability to Your Jest Tests · · javascript, jest, testing
- The Advanced Guide to the CSS “:has()” Selector · · guides, css, selectors
- Underengineer Your Websites · · videos, interviews, accessibility
- Testable Frontend: The Good, the Bad, and the Flaky · · testing
- Detecting CSS Selector Support With JavaScript · · css, selectors, feature-detection, support
- Recreating MDN’s Truncated Text Effect · · css, effects
- 500 ms to 1.7 ms in React: A Journey and a Checklist · · performance, react
- When Will Scrum Die? · · agile, scrum, kanban, processes
- Quick Tip: Negative Animation Delay · · css, animations, tips-and-tricks
- Abbreviations Suck · · accessibility, html
- Design Systems for Humans · · design-systems, user-experience
- You Don’t Need Microservices · · microservices
- 3 Simple Ways to Center an Element Using CSS · · videos, css
- Why I’m Learning Typescript · · typescript
- CSS Minimal Dark Mode Toggle Button · · code-pens, effects, minimalism
- Adventures in Text Rendering: Kerning and Glyph Atlases · · typography, kerning
- A Good Reset · · css, resetting
- #ADA32: The ADA Has Applied to Digital for Decades · · accessibility, legal
- Introducing Even More Security Enhancements to npm · · npm, security
- Maintenance Matters · · maintenance, code-reviews, consistency, testing, logging, documentation
- Neubrutalism Style in UX: A Twist on the Dominant Modern Minimalist · · design, user-experience, minimalism
- Speaking Up and Speaking Out: Tactical Communication in Accessibility · · accessibility, communication
- The 10 Affirmations of Good Digital Accessibility · · accessibility
- UX Principles That Include Cognitive Accessibility · · user-experience, accessibility, principles
- Django Tips and Tricks · · django, tips-and-tricks
- 5 Best UX Careers to Pursue in 2022 · · user-experience, career
- “<article>” vs. “<section>”: How to Choose the Right One · · html, semantics, comparisons
- Everything You Need to Know About JavaScript Import Maps · · javascript
- Typography in Web Design · · typography, design
- Your Code Doesn’t Have to Be a Mess · · quality
- Priority Hints—What Your Browser Doesn’t Know (Yet) · · performance, hints
- Solving the “Dangler” Conundrum With Container Queries and “:has()” · · css, selectors
- Mobile UX: Study Guide · · guides, user-experience, mobile, training, link-lists
- Clean Architecture: Applying With React · · architecture, react
- The History of JavaScript · · history, javascript
- Ancient Web Browsers · · websites, user-agents, history
- Definitive Guide to CAPTCHA Accessibility · · guides, accessibility, captcha
- Type Annotations in JavaScript · · javascript, typescript
- Say No to Tailwind, Embrace Plain CSS · · frameworks, tailwind, css
- Understanding CSS “:has()” · · videos, css, selectors
- Intro to Serverless Functions · · introductions, serverless, functions, netlify
- Escaping the sRGB Prison · · videos, colors
- Front-End Internationalisation Tips · · internationalization, fonts, css, javascript
- Introduction to SvelteKit · · videos, introductions, sveltekit
- RedwoodJS vs. BlitzJS: The Future of Fullstack JavaScript Meta-Frameworks · · frameworks, javascript, comparisons
- Research Insight: Accessibility of Images · · accessibility, usability, images, research
- Where’s the Fun in Accessibility? · · accessibility, user-experience
- Top Layer Support in Chrome DevTools · · css, dev-tools, user-agents, google, chrome
- Vector Animations With Figma and SVG Animate · · animations, figma, svg
- Roundup of Recent Document Outline Chatter · · html, semantics, accessibility
- 20 Git Commands Every Developer Should Know · · git, command-line
- With “:focus-visible”, You Can Have Focus Styles When It Makes Sense · · css, selectors, accessibility, keyboard-navigation, focus
- Rethinking Device Emulation in Browsers · · user-agents, tooling, usability
- Create Complex Transitions With Individual CSS Transform Properties · · videos, css, transitions
- Powerful Image Optimization Tools · · link-lists, images, compression, performance, tooling
- Creating an App Using Drag and Drop With React Without Libraries · · react
- An Introduction to Multithreading in Node.js · · introductions, nodejs, multithreading
- JavaScript SDK “Package Size Is Massive”—So We Reduced It by 29% · · javascript, optimization, tree-shaking
- Logical Properties for Useful Shorthands · · css, logical-properties
- 15 Common Beginner JavaScript Mistakes · · javascript, mistakes
- The 10 Most Common JavaScript Issues Developers Face · · javascript, mistakes
- Subheadings, Subtitles, Alternative Titles, and Taglines in HTML · · html, semantics, headings, accessibility
- Expert Tips for Color Accessibility on the Web · · tips-and-tricks, accessibility, colors
- Hacking Javascript Objects · · javascript, objects
- JSON Creator Douglas Crockford Interview · · interviews, javascript
- What Is Passwordless Authentication and How to Implement It · · authentication, security, passwords
- What Is WAI? The Web Accessibility Initiative · · accessibility
- Why I No Longer Care What People “Like” or “Don’t Like” · · design
- Abbreviations Can Be Problematic · · html, accessibility
- How Did REST Come to Mean the Opposite of REST? · · apis
- How Scrum With Kanban Works · · agile, scrum, kanban, processes
- Useful Tips and Tricks in JavaScript · · javascript, tips-and-tricks
- Using Grids in Interface Designs · · layout, usability
- Use Firefox for Accessibility Testing · · user-agents, mozilla, firefox, accessibility, testing
- CSS Gradient Background from Figma to CodePen · · css, gradients, backgrounds, figma
- An Approach to Continuous Learning · · career, learning
- Can SVG Symbols Affect Web Performance? · · svg, performance
- 7 Tips for Clean React TypeScript Code You Must Know · · react, typescript, tips-and-tricks
- 7 Quick Facts About WCAG 2.2 · · accessibility, wcag, standards
- What Does x% of Issues Mean? · · accessibility, metrics
- Welcome to the Dark Side · · dark-mode, accessibility, usability
- Could Sustainable Websites Increase Energy Consumption? · · sustainability