News and Tools for Frontend Developers (14)
(Stay up-to-date on all topics by RSS feed, on Mastodon, or through other channels.)
- Transition Between Pages Smoothly With a Single Line of Code (by) · · css, transitions
- Top Tips From a Web Accessibility Evaluator at WebAIM (by/via) · · accessibility, auditing, tips-and-tricks
- Tips for Upgrading Your Techstack for Faster Frontend Development (by/via) · · tips-and-tricks, tech-stacks, productivity, efficiency, modernization
- The Novel Engines: Servo (by+/via) · · podcasts, transcripts, browser-engines, servo, user-agents
- Qwik Introduction—a Framework That Goes Fast (by) · · videos, introductions, qwik
- Mapping Typography (by/via) · · videos, typography, css
- Magnification and Zoom Accessibility Guide—Everything You Need to Know (via) · · guides, accessibility, screen-magnification, zooming
- Live Regions in React (by) · · react, aria, live-regions, accessibility
- Learn How to Use Hue in CSS Colors With HSL (by/via) · · how-tos, colors, css
- Going Beyond Constants With Custom Properties (by/via) · · css, custom-properties
- Faking a “:snapped” Selector With Scroll-Driven Animations (by/via) · · css, selectors, animations, scrolling
- AI Is Killing the Old Web, and the New Web Struggles to Be Born (by/via) · · ai, web
- Mixing Colors With CSS (by) · · colors, css
- An Introduction to Parser Combinators (by) · · introductions, parsing
- A Beginner’s Guide to Laravel: Introduction and Key Features · · guides, introductions, laravel
- XML Is the Future (by) · · web, processes
- WebSockets 101 (by/via) · · introductions, protocols, websocket
- Introduction to Cloud Computing · · introductions, cloud-computing
- Using BEM for Design System Tokens (by) · · css, bem, design-tokens, conventions
- Understanding Authorization Before Authentication: Enhancing Web API Security (by/via) · · authorization, authentication, apis, security, comparisons
- Text Wrap Pretty Is Coming to CSS (by) · · css, typography
- Debugging INP (by) · · videos, performance, debugging, web-vitals
- Converting [a] JavaScript Codebase to TypeScript (by/via) · · javascript, typescript, migration, refactoring
- Choosing a Color Palette (via) · · videos, design, colors, color-palettes
- An Introduction to Command Injection Vulnerabilities in Node.js and JavaScript (by) · · introductions, security, vulnerabilities, nodejs, javascript
- All You Need to Know About CORS and CORS Errors (by/via) · · security, cors, errors
- The Unlikely Story of UTF-8: The Text Encoding of the Web (by) · · unicode, history
- The Cost of JavaScript 2023 (by) · · videos, javascript, performance
- Introducing the MDN Playground: Bring Your Code to Life (via) · · mozilla, documentation, testing
- Future CSS: State Container Queries (by) · · css, container-queries
- Component Driven User Interface Testing (CDUIT) · · components, testing
- Announcing Svelte 4 (via) · · release-notes, svelte
- What Exactly Is [the] “:root” Pseudo-Element in CSS? (by/via) · · videos, css, selectors
- WCAG 2.2 Removes 4.1.1 Parsing and How axe-core Is Impacted (by/via) · · wcag, accessibility, testing, tooling
- Using Multiple Selectors With JavaScript Selector Methods (by) · · javascript, selectors
- Too Much JavaScript? Why the Frontend Needs to Build Better (by/via) · · javascript, web-platform, performance
- The 5 Pillars of Every HTTP Request · · http
- How Designers Can Beat AI at Design (by/via) · · design, ai
- Designing for Inclusion (by/via) · · design, dei, accessibility
- Design Systems Directory (by) · · websites, design-systems
- CSS in Micro Frontends (by) · · css, micro-frontends
- Cascade Layers Are Useless * (by) · · css, cascade
- W3C Launch Their New Website (by/via) · · w3c
- Three Key Principles for an Accessible Website (by+/via) · · principles, accessibility
- Thoughts From “Meet Safari for Spatial Computing” (by) · · apple, safari, spatial-web, accessibility, responsive-design
- Style Your RSS Feed (by) · · css, syndication, rss, atom
- State of CSS 2023 (by/via) · · surveys, css
- Making Your Design Tokens Future-Proof (by) · · design-tokens
- Creating a Flexible Design Token Taxonomy for Intuit’s Design System (by) · · design-tokens, design-systems
- Continuous Accessibility (by) · · websites, accessibility, processes
- Authentication vs. Authorization · · authentication, authorization, comparisons
- Why UX Testing Is Critical to Your Web Site’s Success (by/via) · · user-experience, testing
- Radix UI Component With Next.js and Tailwind CSS (by) · · videos, components, radix, nextjs, tailwind
- Packaging and Selling a Node.js App (by/via) · · nodejs
- Gatsby Headaches and How to Cure Them: I18N II (by/via) · · gatsby, internationalization
- Can Web Developers Be Held Liable? (by/via) · · accessibility, legal
- Button Types (by) · · html, buttons
- Balancing Users’ Needs and Business Goals in UX Design (via) · · user-experience, design
- Balancing Users’ Data Privacy and the User Experience (by/via) · · privacy, user-experience
- The Problem With Sticky Menus That Appear on Scroll and What to Do Instead (by) · · navigation, scrolling, user-experience
- The New CSS (by) · · css, design, web-platform
- Import Maps to Natively Import JavaScript Modules Using Bare Names (by) · · javascript
- How to Clean Up Your Local Repository With Git Commands (by/via) · · how-tos, git, command-line, maintenance
- It’s Time for Dimensional Thinking in Design (via) · · design, ai
- IndexedDB Tutorial for Beginners: A Comprehensive Guide With Coding Examples · · tutorials, guides, databases, indexeddb, examples
- Git Concepts Everyone Should Know (by) · · git, concepts
- TypeScript 5.2’s New Keyword: “using” (by) · · typescript
- The Five Types of People Who Produce Inaccessible Code (by) · · accessibility, community
- Standardising Design Tokens (by) · · design-tokens, conventions
- Scoping (by) · · css, scope
- Create React UI Lib: Component Library Speedrun (by) · · typescript, react, components, npm
- What’s UnAI-Able (by/via) · · ai
- What Are Deceptive Patterns? (via) · · user-experience, dark-patterns
- Top 10 Things You Should Add While Coding: Valuable Tips for Programmers (by) · · tips-and-tricks, programming
- The Next Phase of Eleventy: Return of the Side Project (by) · · eleventy
- HTML Imports (by+/via) · · html
- How to Add a CSS Reveal Animation to Your Images (by/via) · · how-tos, css, animations, images
- Django: A Security Improvement Coming to “format_html()” (by) · · django, security, html
- Creating Scroll-Triggered Animations by Combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions (by/via) · · css, animations, transitions, scrolling, custom-properties, container-queries
- An Explosion in Software Engineers Using AI Coding Tools? (by) · · ai, code-completion, productivity
- A Guide to Coding Standards to Improve Code Quality (by/via) · · guides, conventions, formatting, consistency, quality
- 6 Quick Tests You Can Do to Test Your Forms for Accessibility (by) · · accessibility, testing, forms
- Cyclic Dependency Space Toggles (by) · · toggles, css, custom-properties
- Using Color Wheel Combinations in Your Designs (via) · · colors, design
- Simplify Email Development With MJML: A Beginner’s Guide · · email, mjml, guides
- Puppeteer in Node.js: More Antipatterns to Avoid (via) · · nodejs, scraping, testing, anti-patterns, puppeteer
- npm Won’t Publish Packages Containing the Word “keygen” · · discussions, npm, dependencies
- How to Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit (by/via) · · how-tos, svelte, sveltekit, web-apps, server-side-rendering
- How (and Should?) We Stop the Infinite Scroll (via) · · user-experience, scrolling
- Design vs. Accessibility and the CSS “visually-hidden” Class (by/via) · · design, accessibility, css, comparisons
- When and Why to Use a Click Test (via) · · usability, testing
- Tuesday, June 20, 2023 Security Releases (by/via) · · release-notes, nodejs, security
- The Gotchas of CSS Nesting (by) · · css, nesting
- Rebuilding a Comment Component With Modern CSS (by) · · functionality, components, css
- Nuxt in 100 Seconds (by/via) · · videos, introductions, nuxt
- Positioning Anchored Popovers (by) · · pop-overs, css
- Naming Components · · design-systems, components, naming
- “margin-trim” as a Best Practice? (by) · · css
- Gatsby Headaches and How to Cure Them: I18N (by/via) · · gatsby, internationalization
- Chrome for Testing: Reliable Downloads for Browser Automation (by/via) · · user-agents, google, chrome, testing
- Blur Vignette Effect in CSS (by) · · css, effects
- The Continuing Tragedy of CSS: Thoughts From CSS Day 2023 (by) · · css, web-platform
- How to Learn Programming (by) · · how-tos, learning, programming
- How to Highlight Required and Optional Form Fields (by) · · how-tos, forms, mistakes, usability
- CSS! CSS! CSS! (by) · · css, community
- Bottom Sheets: Definition and UX Guidelines (by/via) · · terminology, guidelines, mobile, user-experience
- You Can Stop Using “user-scalable=no” and “maximum-scale=1” in Viewport Meta Tags Now (by) · · html, metadata, accessibility, responsive-design
- That’s Not How I Wrote CSS Three Years Ago (by/via) · · videos, css, support
- Shining Light on the Shadow DOM (by/via) · · videos, shadow-dom, dom
- Modern CSS for Dynamic Component-Based Architecture (by) · · css, architecture, components
- Liven Up Your Websites With Scroll-Driven Animations and View Transitions (by/via) · · videos, css, scrolling, animations, transitions
- Internet Explorer: The 1st Browser to Support CSS (by+/via) · · videos, css, user-agents, microsoft, internet-explorer, support, history
- Design Under Constraints: Challenges, Opportunities, and Practical Strategies (by/via) · · design, strategies
- CSS Containers, What Do They Know? (by/via) · · videos, css, container-queries
- Best Animation Libraries for React (by) · · libraries, animations, react, link-lists
- An Introduction to DevOps · · introductions, dev-ops
- Why Doesn’t CSS Have Scope? (by/via) · · videos, css, scope
- The Universal Focus State (by) · · accessibility, focus, css
- The CSS “overscroll‑behavior” Property Can Be Used to Disable Default Browser Gestures (by/via) · · css, scrolling
- Style Recalculation Secrets They Don’t Want You to Know (by/via) · · videos, css, selectors, performance
- Sticky Content: Focus in View (by/via) · · accessibility, focus, scrolling, css
- State of the CSS Community (by/via) · · videos, css, community
- No, “AI” Will Not Fix Accessibility (by) · · accessibility, ai
- Must Know JavaScript API—IndexedDB API (by/via) · · databases, indexeddb, javascript, apis
- Testing Sites and Apps With Blind Users: A Cheat Sheet (by+/via) · · accessibility, testing, user-agents, assistive-tech, screen-readers, tooling, cheat-sheets
- Designing a Scalable Backend in Node.js (by/via) · · software-design, scaling, nodejs
- Chrome DevTools Tips: Styles Pane and Elements Panel (by/via) · · videos, dev-tools, user-agents, google, chrome
- Best Practices for Container Queries (by) · · best-practices, container-queries, css
- Before Your Next Frontend Pull Request, Use This Checklist (by+/via) · · checklists, performance, compression, dependencies, accessibility, legibility, naming
- Are Simple Websites Better for Business? (via) · · design, simplicity
- 48 Laws, Rules, and Principles of Web Development (by) · · programming, principles, terminology
- What’s New in CSS (by/via) · · videos, css, apple
- Tokens Are the Most Valuable Artifact a Design System Can Provide (by/via) · · design-systems, design-tokens
- The Ultimate Guide to Writing Technical Blog Posts (by) · · guides, writing, blogging
- Styling Scrollbars (by) · · scrolling, css
- RSC From Scratch: Server Components (by) · · videos, react, components
- Reducing Complexity in Front End Development (by/via) · · complexity, performance, css, javascript
- Modern CSS in Real Life (by) · · css
- Exploring Universal and Cognitive-Friendly UX Design Through Pivot Tables and Grids (by/via) · · information-design, user-experience
- Be Careful With “ch” Units (by) · · css, units
- Assume the Position—a Labelling Story (by/via) · · accessibility, forms, html
- Angular at Google I/O 2023 (by/via) · · release-notes, angular, google
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 (via) · · standards, accessibility, aria
- Accessibility and Artificial Intelligence (by) · · accessibility, ai
- Primitive Objects in JavaScript: When to Use Them (via) · · javascript, objects
- One More Thing—Apple’s Push on Web Apps on macOS (by) · · apple, web-apps
- Is React Having An Angular.js Moment? (by/via) · · react, angular
- An Introduction to Debugging in Node.js (by/via) · · introductions, debugging, nodejs
- Accessibility Testing—Pay Attention to the Details (via) · · accessibility, testing
- The Problem With Automatically Focusing the First Input and What to Do Instead (by) · · user-experience, accessibility, focus, forms
- New Job? Negotiate as if Your Life Depends on It (by) · · career
- How to Detect Unnecessary Renderings of DOM Elements in Your Web App to Improve Performance (by) · · how-tos, rendering, dom, performance, debugging, angular
- WCAG 2.2 Misses Mark on Defining Visible Focus (by) · · accessibility, focus, wcag, standards
- wasmati: You Should Write Your WebAssembly in TypeScript (by/via) · · webassembly, typescript, libraries
- The Many Ways to Select the n-th Character From a String (by) · · javascript
- No Single Metric Captures Productivity (by) · · productivity, metrics
- New CSS Color Spaces and Functions in All Major Engines (by/via) · · css, colors, functions, user-agents, support
- How We Created an Accessible, Scalable Color Palette · · colors, color-palettes, accessibility, scaling, case-studies
- How Chrome Achieved High Scores on Three Browser Benchmarks (by/via) · · user-agents, google, chrome, performance
- How AI Can Make Software More Intuitive (by) · · ai, usability
- Every Design Team Needs Writers (by/via) · · design, writing
- Do Not Drop Sass for CSS · · css, sass, preprocessors
- An Introduction to “@ scope” in CSS (by) · · introductions, scope, css, at-rules
- Why We Should Stop Using JavaScript According to Douglas Crockford (by/via) · · videos, javascript
- Watch Transitions in Slow Motion in Chrome’s DevTools (by) · · transitions, dev-tools, user-agents, google, chrome
- The Context Dilemma (by) · · design-systems, design-tokens
- Some Things I Learnt From Working on Big Frontend Codebases (by) · · complexity, lessons
- Semantic Code in HTML: What Is It and Does It Still Matter? (by) · · html, semantics
- Quick Tip: Shipping Resilient CSS Components (by/via) · · css, components, maintainability, resilience, tips-and-tricks
- Presentational Colors (by/via) · · colors, design-tokens
- Performance Is Not a Checklist (by) · · performance, web-vitals, user-experience
- Asynchronous JavaScript for Beginners (by+/via) · · javascript
- Announcing TypeScript 5.1 (by/via) · · release-notes, typescript
- Advanced Form Control Styling With “selectmenu” and Anchoring API (by/via) · · forms, apis, css
- Accessible Components: The Hamburger Menu · · accessibility, components, navigation
- A Practical Guide to Deploying a Complex, Production-Level, Three-Tier Architecture on AWS · · guides, deploying, complexity, architecture, aws
- Watch Out for Layout Shifts With “ch” Units (by/via) · · performance, css, units
- Token Operations (by) · · design-tokens
- security.txt Now Mandatory for Dutch Government Websites · · security, legal
- Release Notes for Safari Technology Preview 171 (by/via) · · release-notes, user-agents, apple, safari
- Re-Evaluating “px” vs. “em” in Media Queries (by) · · css, units, media-queries, comparisons
- New to the Web Platform in May (by/via) · · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox, apple, safari
- Linting Defensive and Logical CSS With Stylelint Plugins (by/via) · · css, logical-properties, linting, tooling, plugins
- Is There a Viable Animated GIF Alternative Yet or What? (by/via) · · images, gif
- How Blink Invalidates Styles When “:has()” [Is] in Use (by/via) · · user-agents, browser-engines, rendering, blink, css, selectors
- Design Systems: A Curated List for Today’s UI/UX Designers (via) · · design-systems, design, tooling, link-lists
- Accessibility Audits for All (by) · · accessibility, auditing, testing
- S.P.A.C.E. Framework—the Ultimate Framework for Measuring Your Tech Team Productivity (by) · · productivity, metrics, engineering-management, culture, communication, collaboration, efficiency
- What Is Personalization? (via) · · personalization, concepts
- The Art of Code Review (by/via) · · code-reviews, processes, collaboration
- I Think I Finally “Get” JS Objects (by) · · javascript, objects
- Hands on With the Node.js Test Runner (by/via) · · nodejs, testing
- Cracking the Theme Switcher and Dark Mode (by/via) · · css, javascript, dark-mode
- Announcing the Second Compute Pressure Origin Trial (by/via) · · apis, user-agents, google, chrome
- An Introduction to JavaScript Proxies (by/via) · · introductions, javascript
- 21 Awesome Web Features You’re Not Using Yet (by/via) · · videos, html, css, javascript
- The Double-Edged Sword of Design Systems (via) · · design-systems, design
- Simple Things Make Things Simple (by) · · simplicity, case-studies
- Don’t Meddle With User Input (by) · · accessibility, forms
- 10 Incident Management Best Practices (via) · · incident-response, best-practices, processes
- Improving the Quality of the Software With Qodana and GitHub Actions (by) · · jetbrains, qodana, quality, optimization, github, ci-cd
- The Problem With Nested Fieldsets and How to Avoid Them (by) · · accessibility, forms, assistive-tech, support
- The Optimization Sinkhole (by) · · productivity, optimization
- Sass-Like Nesting in Native CSS (by) · · css, preprocessors, sass, nesting
- Mastering CSS Blend Modes (by) · · css, blend-modes
- How Screen-Reader Users Type on and Control Mobile Devices (by/via) · · accessibility, usability, user-agents, assistive-tech, screen-readers, mobile
- WordPress Turns 20 (by/via) · · wordpress
- Why Does “👩🏾🌾” Have a Length of 7 in JavaScript? (by) · · javascript, unicode
- When to Use Plain Text or Images Instead of MathML (via) · · mathml, math, accessibility
- Understanding the Importance of Encoding (by) · · encoding
- Plain Old JavaScript and the DOM (by) · · javascript, dom
- We Need to Talk About How We Talk About Accessibility (by+/via) · · accessibility, communication, dei
- Supper Club × Bramus Van Damme on CSS (by+/via) · · podcasts, interviews, css
- How to Draw Any Regular Shape With Just One JavaScript Function (by/via) · · how-tos, javascript, functions
- Designing a Better Design Handoff File in Figma (by/via) · · design, processes, figma
- Brief Note on Popovers With Dialogs (by) · · html, support, accessibility, pop-overs, modals
- A Practical Overview on Architecture Decision Records (ADR) (by) · · overviews, documentation, processes
- Two Things That Are Not Great About OKLCH (by) · · colors, oklch
- Seven Lessons From 7 Years Designing Systems (by) · · lessons, design-systems
- Levelling Up Accessibility Skills in Your Organisation (by+/via) · · videos, accessibility
- “display: contents” Considered Harmful (by) · · accessibility, css
- WebKit and web-platform-tests (by) · · webkit
- The Yellow Fade Technique With Modern CSS Using “@ starting-style” (by/via) · · css, at-rules, techniques
- Single Line Comments in CSS (by) · · css, documentation
- Responsive CSS Layout Grids Without Media Queries (by/via) · · css, layout, responsive-design
- Register Custom Properties in CSS, Get and Update Them With JavaScript (by) · · css, custom-properties
- Reading a Voluntary Product Accessibility Template (VPAT) or Accessibility Conformance Report (ACR) (by/via) · · accessibility, vpat-acr, documentation
- Querying Parsed HTML in BigQuery (by) · · html
- Deploying AVIF for More Responsive Websites (by/via) · · images, avif, performance
- A Complete Guide to Using IndexedDB (via) · · guides, databases, indexeddb
- 11 HTML Best Practices for Login and Sign-Up Forms (by/via) · · html, best-practices, forms
- You Don’t Need a Modal Window (by) · · websites, modals
- Two Simple Layouts That Work Better With Grid (by) · · videos, css, layout
- Introducing the “popover” API (by/via) · · apis, html, pop-overs
- I Created 100+ Unique CSS Patterns (by) · · css, backgrounds, effects
- Graph Slider (by) · · css
- Future of CSS: Popover API (by) · · css, apis, pop-overs
- File Upload Security and Malware Protection (by) · · security, file-handling, edge-computing
- Addressing Timeout Modals: Navigating the Nuances for Inclusive Web Design (by/via) · · accessibility, dei, modals
- Working With URLs With Vanilla JavaScript (by) · · javascript, urls
- Why We’re Bad at CSS (by) · · css
- Visual-Design Principles and UX Design Best Practices (via) · · design, user-experience, principles, best-practices
- Stop Rewriting Your CSS! Use “:not()” Instead (by/via) · · videos, css, selectors, maintenance
- Building a Modern Design System in Layers (by) · · design-systems
- Be Careful Using “Menu” (by) · · html, aria, design, terminology
- 10 Ways to Boost Your Landing Page Conversion Rates (via) · · landing-pages, user-conversion, metrics
- Building Offline-First Web Applications With Service Workers and IndexedDB (by) · · offline, web-apps, web-workers, databases, indexeddb, javascript
- Beyond Design Systems for Interfaces: A Mega System of Design Systems · · design-systems
- A Web Component Intro With Example · · introductions, web-components, examples
- Server-Sent Events With Node.js (via) · · nodejs, events