News and Tools for Frontend Development (11)

(Stay up-to-date on all topics by RSS feed or on Mastodon.)

Querying Parsed HTML in BigQuery · May 24, 2023 · html
Single Line Comments in CSS · May 24, 2023 · css, documentation
Register Custom Properties in CSS, Get and Update Them With JavaScript · May 24, 2023 · css, custom-properties
11 HTML Best Practices for Login and Sign-Up Forms · May 24, 2023 · html, best-practices, forms
A Complete Guide to Using IndexedDB · May 24, 2023 · guides, databases, indexeddb
Reading a Voluntary Product Accessibility Template (VPAT) or Accessibility Conformance Report (ACR) · May 24, 2023 · accessibility, vpat-acr, documentation
Graph Slider · May 23, 2023 · css
Two Simple Layouts That Work Better With Grid · May 23, 2023 · videos, css, layout
You Don’t Need a Modal Window · May 23, 2023 · websites, modals
I Created 100+ Unique CSS Patterns · May 23, 2023 · css, backgrounds, effects
Addressing Timeout Modals: Navigating the Nuances for Inclusive Web Design · May 23, 2023 · accessibility, inclusion, modals
File Upload Security and Malware Protection · May 23, 2023 · security, file-handling, edge-computing
Future of CSS: Popover API · May 23, 2023 · css, apis, pop-overs
Introducing the “popover” API · May 23, 2023 · apis, html, pop-overs
Visual-Design Principles and UX Design Best Practices · May 22, 2023 · design, user-experience, principles, best-practices
Why We’re Bad at CSS · May 22, 2023 · css
Stop Rewriting Your CSS! Use “:not()” Instead · May 22, 2023 · videos, css, selectors, maintenance
Be Careful Using “Menu” · May 22, 2023 · html, aria, design, terminology
Building a Modern Design System in Layers · May 22, 2023 · design-systems
Working With URLs With Vanilla JavaScript · May 22, 2023 · javascript, urls
10 Ways to Boost Your Landing Page Conversion Rates · May 22, 2023 · landing-pages, user-conversion, metrics
Beyond Design Systems for Interfaces: A Mega System of Design Systems · May 21, 2023 · design-systems
Building Offline-First Web Applications With Service Workers and IndexedDB · May 21, 2023 · offline, web-apps, web-workers, databases, indexeddb
A Web Component Intro With Example · May 21, 2023 · introductions, web-components, examples
Server-Sent Events With Node.js · May 20, 2023 · nodejs, events
A Beginners Guide to Digital Accessibility · May 20, 2023 · guides, accessibility
A New Approach to Measuring Developer Productivity · May 19, 2023 · productivity, metrics
Website Issues: On the Relevance of Audience Size and Impact · May 19, 2023 · processes, quality
Using “linear()” for Better Animation · May 19, 2023 · animations, css, javascript
Creating a Shine Effect on a Card With Tailwind CSS · May 19, 2023 · tailwind, effects
How to Build Lean Efficient Websites in 2023 · May 19, 2023 · how-tos, html, progressive-enhancement, minimalism
Accessible Numbers · May 18, 2023 · websites, accessibility
Are We There Yet? WCAG 2.2 Is at the Candidate Recommendation [Stage] v3 · May 18, 2023 · accessibility, wcag, standards
Write Better Code by Following These JavaScript Best Practices · May 18, 2023 · javascript, best-practices
What Devs Can Do on Global Accessibility Awareness Day · May 18, 2023 · accessibility
How to Create a Custom Range Slider Using CSS · May 18, 2023 · how-tos, css, forms
Getting Started With View Transitions on Multi-Page Apps · May 18, 2023 · transitions, mpas, introductions
A History of Metaphors for the Internet · May 17, 2023 · history, web, terminology
Thinking on Ways to Solve Color Palettes · May 17, 2023 · videos, css, colors, color-palettes
ESLint Guide: How to Use It With Confidence · May 17, 2023 · guides, eslint, linting, consistency, maintainability
6 Tips for Improving Language Switchers on Ecommerce Sites · May 17, 2023 · videos, usability, internationalization, localization, tips-and-tricks
Release Notes for Safari Technology Preview 170 · May 17, 2023 · release-notes, user-agents, apple, safari
Conditional CSS With “:has” and “:nth-last-child” · May 16, 2023 · css, selectors
I Just Did a Test to Apply as a Front End Developer—and Things Aren’t Going Well · May 16, 2023 · career, interviewing
GitHub Copilot and ChatGPT Alternatives · May 16, 2023 · github, ai, comparisons
Why Is Web Accessibility Important? · May 16, 2023 · videos, accessibility
State of Node.js Performance 2023 · May 16, 2023 · nodejs
Getting an Item an Array With a Negative Index With Modern JavaScript · May 16, 2023 · javascript, arrays
Vertical Rhythm Using CSS “lh” and “rlh” Units · May 16, 2023 · css, units
Design Patterns Are a Better Way to Collaborate on Your Design System · May 16, 2023 · design-patterns, design-systems, collaboration
Why Your Design Language System Needs a Product Manager · May 16, 2023 · design-systems, product-management
Fieldsets, Legends, and Screen Readers Again · May 16, 2023 · accessibility, html, forms, user-agents, assistive-tech, screen-readers
Semantics and the “popover” Attribute: What to Use When? · May 16, 2023 · html, semantics, accessibility, pop-overs
CSS Art: Drawing a Coffee Stain · May 15, 2023 · css, art
Let’s Share Our Salaries, Title, Location, XP · May 15, 2023 · discussions, career
Get Full Type Support With Plain JavaScript · May 15, 2023 · javascript
Solving Media Object Float Issues With CSS Block Formatting Contexts · May 15, 2023 · css
How to Handle Production Support When Using Scrum · May 15, 2023 · how-tos, agile, scrum, processes
Using HTML Landmark Roles to Improve Accessibility · May 15, 2023 · accessibility, html
HTML Landmark Roles Screen Reader Demo · May 15, 2023 · videos, accessibility, html, user-agents, assistive-tech, screen-readers
10 Books to Improve Coding Skill in 2023 · May 15, 2023 · books, programming, link-lists
ES2023 Features · May 14, 2023 · ecmascript
Screen Readers Don’t Announce When the User Reaches the “maxlength” Character Limit · May 14, 2023 · html, accessibility, user-agents, assistive-tech, screen-readers, support
Error Message Guidelines · May 14, 2023 · guidelines, usability, errors, writing
The Problem With Disabled Buttons and What to Do Instead · May 14, 2023 · buttons, user-experience, accessibility
7 Secret TypeScript Tricks Pros Use · May 14, 2023 · typescript, tips-and-tricks
Building a Frontend Framework—Reactivity and Composability With Zero Dependencies · May 13, 2023 · frameworks, reactivity, dependencies
Building a Greener Web · May 12, 2023 · videos, web, sustainability
What Is “Fake Door” Testing in UX? · May 12, 2023 · testing, user-experience
Keeping Up With an Ever Changing Web · May 12, 2023 · web-platform, learning
Add Opacity to an Existing Color · May 12, 2023 · colors, css
Respect Your Children · May 12, 2023 · accessibility, html, aria
The JavaScript Ecosystem Is Delightfully Weird · May 11, 2023 · javascript
What’s New in CSS and UI: I/O 2023 Edition · May 11, 2023 · css, retrospectives
Regular Expressions in JavaScript · May 11, 2023 · javascript, regex
Introduction to Screen‐Readers: JAWS Edition · May 11, 2023 · introductions, user-agents, assistive-tech, screen-readers, jaws
Introduction to Screen‐Readers: NVDA Edition · May 11, 2023 · introductions, user-agents, assistive-tech, screen-readers, nvda
Introduction to Screen‐Readers: VoiceOver macOS Edition · May 11, 2023 · introductions, user-agents, assistive-tech, screen-readers, apple, voiceover
Best Practices for All Developers · May 11, 2023 · best-practices
An Introduction to the Bun JavaScript Runtime · May 11, 2023 · javascript, runtimes, bun
Crafting a Modern Spotlight Effect With React and CSS · May 10, 2023 · css, react, effects
ES2023 Introduces New Array Copying Methods to JavaScript · May 10, 2023 · javascript, ecmascript, standards, arrays
Developer Tools That Shouldn’t Be Secrets · May 10, 2023 · videos, user-agents, dev-tools
The 9 Most Effective Core Web Vitals Opportunities of 2023 · May 10, 2023 · videos, performance, web-vitals
What’s New in Web · May 10, 2023 · videos, user-agents, support, web-platform
What’s New in Web Animations · May 10, 2023 · videos, animations
Advancing Interaction to Next Paint · May 10, 2023 · performance, web-vitals
Introducing INP to Core Web Vitals · May 10, 2023 · performance, web-vitals, seo
Is Data Transfer the Best Proxy for Website Carbon Emissions? · May 10, 2023 · sustainability, network
The Difference Between Agile and UX Is Not About Quantity vs. Quality · May 10, 2023 · agile, user-experience, processes, comparisons
How to Optimize Web Responsiveness With Interaction to Next Paint · May 10, 2023 · videos, how-tos, performance, web-vitals
Why an Engineering Manager Should Not Review Code · May 10, 2023 · leadership, code-reviews
Introducing Baseline · May 10, 2023 · user-agents, support, interoperability, web-platform
Introducing Baseline: A Unified View of Stable Web Features · May 10, 2023 · user-agents, support, interoperability, web-platform
Baseline Features You Can Use Today · May 10, 2023 · user-agents, support, interoperability, web-platform
Slow Design · May 10, 2023 · websites, design
An Introduction to Container Queries in CSS · May 9, 2023 · introductions, css, container-queries
Client-Side Rendering of HTML and Interactivity · May 9, 2023 · performance, html, client-side-rendering
How Large DOM Sizes Affect Interactivity, and What You Can Do About It · May 9, 2023 · performance, dom, html, optimization
Rearrange/Animate CSS Grid Layouts With the View Transition API · May 9, 2023 · css, layout, transitions, apis
Find Slow Interactions in the Field · May 9, 2023 · performance, web-vitals, auditing
Diagnose Slow Interactions in the Lab · May 9, 2023 · performance, web-vitals
Optimize Input Delay · May 9, 2023 · performance, web-vitals, optimization
The Ongoing Defence of Frontend as a Full-Time Job · May 9, 2023 · career
Script Evaluation and Long Tasks · May 9, 2023 · performance, javascript, web-vitals
Design Systems [Are] a Mindset Not a Library · May 9, 2023 · design-systems
How to Handle Emojis in Node.js · May 9, 2023 · how-tos, nodejs, emoji, unicode
See What’s New in Firefox [113.0] · May 9, 2023 · release-notes, user-agents, mozilla, firefox
A Complete Guide to Usability Testing · May 8, 2023 · guides, usability, testing
Pay Attention to Web Performance Metrics to Improve the UX · May 8, 2023 · performance, metrics, user-experience, web-vitals, optimization
ShatGPT · May 8, 2023 · accessibility, ai
Proportional Design Systems With Proportio.app · May 8, 2023 · design-systems
Speed Trap · May 8, 2023 · google, amp, web-platform
Dithering · May 8, 2023 · images, dithering
A Comprehensive Guide to Using Langchain.js and Google Cloud Functions for AI Applications · May 8, 2023 · guides, langchain, google, functions, ai
Improving Web-Site Conversion Rates Through Better UX Design · May 8, 2023 · user-conversion, metrics, optimization, user-experience
The Problem With Sticky Menus and What to Do Instead · May 7, 2023 · navigation, usability, user-experience
How Far Back in Time Can I Take My Website’s Design · May 7, 2023 · web, design, history, html, css
How to Configure Path Aliases in Frontend Projects in the Native Way · May 7, 2023 · how-tos, javascript, configuration
The Image Sorting Experiment · May 6, 2023 · images, information-design, sorting, experiments
Scaling Node.js Web Apps With Docker · May 6, 2023 · scaling, nodejs, web-apps, docker
Complete Guide on Playwright Visual Regression Testing · May 6, 2023 · guides, playwright, testing, regressions
Should the Confirmation Button Come First or Last? · May 6, 2023 · buttons, interaction-design
Cron Job: A Comprehensive Guide for Beginners · May 6, 2023 · guides, cron
CSS Logical Properties: A Good Use Case · May 5, 2023 · videos, css, logical-properties
I’m Done With React · May 5, 2023 · videos, react
Speed Up or Slow Down a Video · May 5, 2023 · user-agents, dev-tools, multimedia
Scroll-Driven Animations · May 5, 2023 · websites, scrolling, animations
HTTP/1 vs. HTTP/2 vs. HTTP/3 · May 5, 2023 · http, protocols, comparisons
How “:not()” Chains Multiple Selectors · May 5, 2023 · css, selectors
htmx Is the Future · May 5, 2023 · htmx, visions
An Introduction to the “:has()” Selector in CSS · May 4, 2023 · introductions, css, selectors
5 Best Practices to Sustainably Improve Core Web Vitals · May 4, 2023 · performance, web-vitals, best-practices
React Testing Library and Accessibility · May 4, 2023 · react, libraries, accessibility, testing, automation
GitHub Actions: All Actions Will Run on Node 16 Instead of Node 12 · May 4, 2023 · github, automation, nodejs
Code Coverage vs. Test Coverage · May 4, 2023 · code-coverage, testing, quality, comparisons
Angular v16 Is Here · May 3, 2023 · angular, release-notes
Don’t Use Custom CSS Scrollbars · May 3, 2023 · css, scrolling
Digital Accessibility Is a Bigger Education Issue Than We Think—Here’s What We Can Do About It · May 3, 2023 · accessibility, training
Where Would You Take the W3C? · May 3, 2023 · discussions, w3c
The Intersectionality of Web Performance · May 3, 2023 · performance, sustainability, inclusion
Make Your Website Load Fast by Optimizing Request Priorities · May 3, 2023 · performance, optimization, network
Security Implications of HTTP Response Headers · May 3, 2023 · security, http
How to Write More Efficient JavaScript Conditions · May 3, 2023 · how-tos, javascript, efficiency
How to Make a CSS-Only Hamburger Menu · May 3, 2023 · how-tos, css, navigation
Detecting If an Event Was Triggered by a User or by JavaScript · May 3, 2023 · events, javascript
The Latest Innovations in Drupal · May 3, 2023 · drupal
7 Practical CSS Typography Tips and Tricks · May 3, 2023 · videos, css, typography, tips-and-tricks
Release Notes for Safari Technology Preview 169 · May 3, 2023 · release-notes, user-agents, apple, safari
An Update on the Lock Icon · May 2, 2023 · user-agents, google, chrome
A Complete Guide to Performance Budgets · May 2, 2023 · guides, performance, metrics
Do Logical Properties Make CSS Easier to Learn? · May 2, 2023 · css, logical-properties, learning
SupportsCSS · May 2, 2023 · websites, tooling, css, support
3 Engineering Mistakes That Kill Startups · May 2, 2023 · mistakes, architecture
Short Note: Why Isn’t “role=presentation”/“none” Allowed on Focusable Elements? · May 2, 2023 · accessibility, focus, aria, html
CSS Naked Day and the Missing Wikipedia Page · May 2, 2023 · css, maintainability
developers.events: Maintaining a GitHub repository—What Have I Learned in 7 Years? · May 2, 2023 · open-source, community, github
Why “font-size” Must Never Be in Pixels · May 2, 2023 · css, units, accessibility, responsive-design
The Simple Trick to Transition from Height “0” to “auto” With CSS · May 2, 2023 · videos, css, transitions, tips-and-tricks
Creating an Animated Gradient Border With CSS · May 2, 2023 · css, animations, gradients, borders
A Radical Proposal: Put UX Research in Charge · May 2, 2023 · user-experience, research, product-management, strategies
CDNs: Speed Up Performance by Reducing Latency · May 1, 2023 · content-delivery, performance
Testing Feature Support for Modern CSS · May 1, 2023 · css, feature-detection, support
“:root” Isn’t Global · May 1, 2023 · css
CSS Wishlist 2023 · May 1, 2023 · css, wish-lists
Practical Guide to Not Blocking the Event Loop · May 1, 2023 · guides, javascript, events, performance
What’s New in Svelte: May 2023 · May 1, 2023 · release-notes, svelte, sveltekit
Beyond Content Creation: How Open Source Contributions Can Help You Get Noticed · May 1, 2023 · open-source, content, career
Tailwind CSS vs. UnoCSS · May 1, 2023 · tailwind, css, frameworks, comparisons
This Blog Is Hosted on My Android Phone · May 1, 2023 · websites, hosting
Configuring ESLint, Prettier, and TypeScript Together · May 1, 2023 · eslint, prettier, linting, formatting, tooling, typescript, configuration
Two Underused Arguments for Writing Documentation · Apr 30, 2023 · writing, documentation, career
30th Anniversary of Licensing the Web for General Use and at No Cost · Apr 30, 2023 · web, web-platform, standards, open-source, history
My Favorite Free Courses to Learn JavaScript in Depth · Apr 30, 2023 · courses, javascript, training, link-lists
Dark Mode in 3 Lines of CSS and Other Adventures · Apr 29, 2023 · css, dark-mode
The Popover API Is Exciting, Sort Of · Apr 29, 2023 · apis, pop-overs
Animating the Impossible · Apr 28, 2023 · videos, animations, transitions
Rebuilding a Featured News Section With Modern CSS: Vox News · Apr 28, 2023 · css, refactoring, maintenance, optimization
JS Private Class Fields Considered Harmful · Apr 28, 2023 · javascript
New to the Web Platform in April · Apr 28, 2023 · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox
Write Better CSS by Borrowing Ideas from JavaScript Functions · Apr 28, 2023 · css, javascript, functions, quality
A Beginner’s Introduction to the Most Common Data Types in Programming · Apr 28, 2023 · introductions, data-types, programming
Everything You Need to Know About Webpack’s Bundle Analyzer · Apr 28, 2023 · webpack, bundling, tooling
Accessible Target Sizes Cheatsheet · Apr 27, 2023 · accessibility, user-experience
Writing Unit Tests in Node.js Using Jest · Apr 27, 2023 · testing, nodejs, jest
Typography for Everyone · Apr 27, 2023 · videos, fonts, typography
Progress over Perfection: The Better Way for Communication and Accessibility Advocacy · Apr 27, 2023 · accessibility, communication, processes
What Is the Value of a Design System? · Apr 27, 2023 · design-systems
The Most Underrated Section of Design Portfolios · Apr 27, 2023 · design, career
How to Deep Merge Arrays and Objects With JavaScript · Apr 27, 2023 · how-tos, javascript, arrays, objects
How to Manage Design Tokens · Apr 27, 2023 · how-tos, design-tokens, maintenance
Modern CSS Layout Is Awesome! · Apr 27, 2023 · videos, css, layout
The Interactive Guide to Rendering in React · Apr 26, 2023 · guides, client-side-rendering, react
The Most Important Thing Productivity Tools Are Missing About AI · Apr 26, 2023 · tooling, productivity, ai
Discovering the Power of JavaScript Proxy After All This Time · Apr 26, 2023 · javascript
Adding Motion to the Next Decade of Atomic Design · Apr 25, 2023 · design
Crafting the Next.js Website · Apr 25, 2023 · nextjs
Transition to and from “display: none” With Upcoming CSS Capabilities · Apr 25, 2023 · videos, css, transitions
Reducing the Cost of String Serialization in Node.js Core · Apr 25, 2023 · nodejs, performance
Comparing the Best Node.js Version Managers: nvm, Volta, and asdf · Apr 25, 2023 · nodejs, npm, nvm
The Best Way to Get nvm Working in CI/CD Systems · Apr 25, 2023 · nvm, ci-cd
The “const” Deception · Apr 24, 2023 · javascript
The Potentially Dangerous Non-Accessibility of Cookie Notices · Apr 24, 2023 · accessibility, cookies, legal, privacy, user-experience
Goodbye “create-react-app”: A New Approach · Apr 24, 2023 · react
Figma, I Love You but You’re Bringing Me Down · Apr 24, 2023 · figma
Organizing a Web Design System for Scalability in Figma · Apr 24, 2023 · design-systems, scaling, figma
Avoiding Dark Patterns in Web Design · Apr 24, 2023 · dark-patterns, design
CSS Blend Modes · Apr 24, 2023 · css, blend-modes
Frontend Web Performance Checklist · Apr 24, 2023 · performance, checklists
npm vs. Yarn vs. pnpm · Apr 24, 2023 · npm, yarn, pnpm, comparisons
Design Debt: The Hidden Cost of Neglecting UX Investment, and How to Measure and Manage It · Apr 24, 2023 · design-debt, user-experience, metrics, economics
Scoped CSS Is Back · Apr 24, 2023 · css, scope
Exploring the Potential of Web Workers for Multithreading on the Web · Apr 21, 2023 · web-workers, multithreading, performance, javascript
“details”/“summary” Inconsistencies · Apr 21, 2023 · html, user-agents, assistive-tech, support
The Effects of Technical Debt on Morale · Apr 21, 2023 · technical-debt, productivity
Considering Content Warnings in HTML · Apr 21, 2023 · html, content, inclusion
Meeting WCAG Level AAA · Apr 21, 2023 · accessibility, wcag, conformance, standards
Transitioning to Height Auto (Two Ways) · Apr 21, 2023 · css
“The Secret List of Websites” · Apr 21, 2023 · ai, web, content
Dark Mode Toggle and “prefers-color-scheme” · Apr 21, 2023 · dark-mode, css
How to Write Comments in React: The Good, the Bad, and the Ugly · Apr 21, 2023 · how-tos, react, documentation
Upgrading Our CSS Habits: “aspect-ratio” · Apr 20, 2023 · css
Read-Only Web Apps · Apr 20, 2023 · javascript, progressive-enhancement
CSS Custom Properties Beyond the “:root” · Apr 20, 2023 · css, custom-properties, semantics
Designing and Coding for Voice · Apr 20, 2023 · accessibility
5 Topics You Should Touch on During the Recruitment Process · Apr 20, 2023 · interviewing, career, processes
Spinning Diagrams With CSS · Apr 20, 2023 · css, animations
Why Is Scrum the Most Popular Agile Framework? · Apr 19, 2023 · scrum, agile, processes
It’s Time for the Tech Industry to Live Up to Its Ideals · Apr 19, 2023 · career, visions
Intro to Runtime Performance in the Chrome DevTools Performance Panel · Apr 19, 2023 · videos, introductions, performance, dev-tools, user-agents, google, chrome
Visually Accessible Data Visualization · Apr 19, 2023 · accessibility, information-design
Using HTML Elements as CSS Masks · Apr 19, 2023 · css
5 Code Refactoring Techniques to Improve Your Code · Apr 19, 2023 · refactoring, maintenance, techniques
Productivity and Well-Being: A Summary of What Works · Apr 19, 2023 · productivity, career
Introducing npm Package Provenance · Apr 19, 2023 · github, npm, provenance, security, open-source
Generating Provenance Statements · Apr 19, 2023 · npm, provenance, security
Release Notes for Safari Technology Preview 168 · Apr 19, 2023 · release-notes, user-agents, apple, safari
Audio Accessibility in Miro: A Hackathon Story in 3 Acts · Apr 18, 2023 · accessibility, multimedia, experiments
Node.js 20 Is Now Available! · Apr 18, 2023 · nodejs, release-notes
What’s New in ECMAScript 2023 · Apr 18, 2023 · ecmascript, standards
DevTools: A Better Way to Visualize Your JavaScript · Apr 18, 2023 · dev-tools, user-agents, performance, lighthouse, google, chrome, microsoft, edge
Container Query Units and Fluid Typography · Apr 18, 2023 · css, container-queries, typography
Signals: Fine-Grained Reactivity for JavaScript Frameworks · Apr 18, 2023 · javascript, reactivity, signals, frameworks
How to Create an SEO Strategy · Apr 18, 2023 · how-tos, seo, strategies
Kubernetes Quick Tutorial · Apr 18, 2023 · tutorials, kubernetes
8 Best Tools for Cryptography and Encryption · Apr 18, 2023 · link-lists, tooling, comparisons, security, cryptography, privacy
Firefox May Soon Reject Cookie Prompts Automatically · Apr 17, 2023 · cookies, legal, user-experience, mozilla, firefox
Using a Muted Color Palette in Web Design · Apr 17, 2023 · design, colors, color-palettes
A List of Programming Playgrounds · Apr 17, 2023 · programming, link-lists, testing
Deno vs. Node: No One Is Ready for the Move · Apr 17, 2023 · deno, nodejs, dependencies, comparisons