News and Tools for Frontend Development (8)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Deploying a Fastify and Vue 3 Static Site to Heroku · · deploying, vuejs
- New Viewport Units · · css, units, responsive-design
- The Decline in Design (Thinking) · · design, user-experience
- Awesome List of Free CSS [Generators] · · css, code-generation, tooling, link-lists
- Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images · · css, effects, images
- htmx in 100 Seconds · · videos, introductions, htmx
- Strategic UX Research Is the Next Big Thing · · user-experience, research, strategies
- From Hacks to Elegance: Transforming a Card Component With Modern CSS Wizardry · · components, css, refactoring, maintenance
- Testing the Dark Scenarios of Your Node.js Application · · nodejs, testing
- The New “@ font-face” Syntax · · css, fonts
- Four Lenses of Productivity · · productivity
- A Roadmap to Leadership Inclusion: 15 Keys to Unlocking a Diverse and Empowered Workplace · · leadership, inclusion, accessibility
- An Introduction to Native CSS Nesting · · introductions, css, nesting
- Is Lighthouse a Misleading Performance Tool? · · performance, lighthouse, web-vitals, tooling
- The Case Against Self-Closing Tags in HTML · · html
- There’s No Such Thing as a “Normal” User · · accessibility
- Just Normal Web Things · · web, user-experience
- URL Explained: The Fundamentals · · terminology
- Offset Parent and Stacking Context: Positioning Elements in All Three Dimensions · · css, layout
- Resources for Procurement of Accessible Digital Products and VPAT · · accessibility, conformance, tooling, link-lists
- Creating SVG Animations Using Tailwind CSS · · svg, animations, tailwind
- CSS Only Floating Labels · · css, forms
- When User Testing Sessions Bring Up Trauma · · user-experience, testing
- Understanding JWTs: A Simple Guide for Beginners · · guides, json-web-tokens
- Redundancy Is Great · · information-design
- How to Validate HTML On-Line at W3C · · how-tos, html, conformance, tooling
- Introduction to the Kanban Framework: A Beginner’s Guide to Agile Project Management · · introductions, guides, kanban, agile
- Can We Query the Root Container? · · css, container-queries
- Multithreading With Worker Threads in Node.js · · nodejs, multithreading, worker-threads
- See What’s New in Firefox [115.0] · · release-notes, user-agents, mozilla, firefox
- Are We There Yet? · · css, colors, history
- The Trick to Smoothly Animating Shadows in CSS · · videos, css, animations, shadows
- Design for the Web Without Figma · · design, tooling
- The “article” Element and Screen Readers · · html, user-agents, assistive-tech, screen-readers, accessibility, support
- What Is Page Bloat? And How Is It Hurting Your Business, Your Search Rank, and Your Users? · · performance, user-experience, conversion, economics
- Build a Simple Beginner App With Node, Bootstrap, and MongoDB · · web-apps, nodejs, bootstrap, mongodb
- The Fake Aura of Care in UX · · user-experience
- Understanding SVG Paths · · svg
- Your Browser May Be Having a Secret Relationship With a Screen Reader · · accessibility, user-agents, assistive-tech, screen-readers
- How I Am Blogging the IndieWeb Way · · blogging, indieweb, automation
- AI and the Automation of Work · · ai, automation, processes
- 4 Design Principles I Use Every Day to Avoid Bad UX and Create Products That Work for Everyone · · design, principles, user-experience, inclusion
- And 4 More HTML Concepts You Didn’t Know · · html, concepts, web-components
- How to Use Node.js to SSH into Remote Servers: A Comprehensive Guide · · how-tos, guides, nodejs, command-line, servers, ssh
- Identify Unused npm Packages in Your Project · · npm, dependencies, maintenance
- Setting Expectations for the Node.js Test Runner · · nodejs, testing, tooling
- In Defence of “DOMContentLoaded” · · javascript, dom, performance
- The Big Problem With Variables in Figma · · figma
- How to Measure the Impact of a Design System? · · how-tos, design-systems, metrics
- Observing Node.js Processes With eBPF · · monitoring, nodejs
- How to Tackle Docker and Kubernetes for Frontend · · how-tos, docker, kubernetes
- Angular Is Getting New Template Syntax · · angular
- CommonJS Is Hurting JavaScript · · javascript
- New to the Web Platform in June · · release-notes, web-platform, user-agents, mozilla, firefox, google, chrome, apple, safari
- Introduction to JSX · · introductions, jsx, react
- React Developers Love Preact, Here’s Why · · react, preact, comparisons
- The “details” Element and In-Page Search · · html, searching, user-agents, user-experience
- Accessible Overlays Aren’t Accessible · · accessibility, overlays
- Under-Engineered Comboboxen? · · forms, html, css, accessibility
- What’s the Perfect Design Process? · · design, processes
- An Introduction to the View Transitions API · · introductions, transitions, apis
- WCAG 2.2, Quick and Simplified · · wcag, accessibility, standards
- JavaScript Gom Jabbar · · javascript
- What’s Next for Redux With Mark Erikson · · videos, interviews, react, redux, state-management
- Understanding TypeScript Generators · · typescript
- How to Build Things People Want to Use · · how-tos, user-experience
- Solved: Tricky Floating Image Alignment · · css, layout, responsive-design
- Combat Accessibility Decay: How to Maintain Ongoing Accessibility · · how-tos, accessibility, processes
- Introduction to MySQL Data Types · · databases, mysql, data-types
- The Importance of Verifying Webhook Signatures · · security, webhooks
- Position-Driven Styles · · css, animations
- 4 Ways to Improve Mobile Accessibility · · accessibility, mobile
- Getting Started With Native Design Tokens in Figma · · design-tokens, figma, introductions
- Web and App ADA Lawsuits: 6 Trends So Far in 2023 · · accessibility, legal, trends
- Why You Must Commit to Grounding Every DEI-Related Effort With Data · · interviews, inclusion, processes, metrics
- How to Use CSS “background-size” and “background-position” · · how-tos, css, backgrounds
- Feature Flags Configuration, Instrumentation, and Use · · videos, feature-management, releasing, testing
- JavaScript Console Methods: A Deep Dive · · javascript, console, debugging
- Release Notes for Safari Technology Preview 173 · · release-notes, user-agents, apple, safari
- Form and Search Landmarks · · html, aria, forms, user-agents, assistive-tech, support
- The Massive Bug at the Heart of the npm Ecosystem · · npm, dependencies, security
- Building Sliding Cards With “position: sticky;” · · css
- Demystifying JavaScript Operators: What Does That Symbol Mean? · · javascript, operators
- What’s Next for JavaScript: New Features to Look Forward To · · javascript
- Amplify Design Values Through Building Design System · · design, design-systems
- Feature Management and Feature Experimentation, Why You Should Do Both—How It Helps Both Product and Software Engineering Teams · · feature-management, experiments, testing, metrics
- Popular DevTools Tips · · user-agents, dev-tools, tips-and-tricks
- Mapping Typography · · videos, typography, css
- Faking a “:snapped” Selector With Scroll-Driven Animations · · css, selectors, animations, scrolling
- AI Is Killing the Old Web, and the New Web Struggles to Be Born · · ai, web
- Going Beyond Constants With Custom Properties · · css, custom-properties
- Transition Between Pages Smoothly With a Single Line of Code · · css, transitions
- What Does the Image “decoding” Attribute Actually Do? · · html, images, performance
- Learn How to Use Hue in CSS Colors With HSL · · how-tos, colors, css
- Live Regions in React · · react, aria, live-regions, accessibility
- Tips for Upgrading Your Techstack for Faster Frontend Development · · tips-and-tricks, tech-stacks, productivity, efficiency, modernization
- Top Tips from a Web Accessibility Evaluator at WebAIM · · accessibility, auditing, tips-and-tricks
- Qwik Introduction—a Framework That Goes Fast · · videos, introductions, qwik
- What’s Your Type? Try These Tests to Pick the Perfect Font for You · · design, typography, fonts
- An Introduction to Parser Combinators · · introductions, parsing
- Mixing Colors With CSS · · colors, css
- A Beginner’s Guide to Laravel: Introduction and Key Features · · guides, introductions, laravel
- XML Is the Future · · web, processes
- WebSockets 101 · · introductions, protocols, websocket
- Text Wrap Pretty Is Coming to CSS · · css, typography
- An Introduction to Command Injection Vulnerabilities in Node.js and JavaScript · · introductions, security, nodejs, javascript
- Choosing a Color Palette · · videos, design, colors, color-palettes
- Using BEM for Design System Tokens · · bem, design-tokens, conventions
- Converting [a] JavaScript Codebase to TypeScript · · javascript, typescript, migration, refactoring
- Understanding Authorization Before Authentication: Enhancing Web API Security · · authorization, authentication, apis, security, comparisons
- Debugging INP · · videos, performance, debugging, web-vitals
- All You Need to Know About CORS and CORS Errors · · security, cors, errors
- Announcing Svelte 4 · · release-notes, svelte
- The Cost of JavaScript 2023 · · videos, javascript, performance
- Future CSS: State Container Queries · · css, container-queries
- Component Driven User Interface Testing (CDUIT) · · components, testing
- The Unlikely Story of UTF-8: The Text Encoding of the Web · · unicode, history
- Introducing the MDN Playground: Bring Your Code to Life · · mozilla, documentation, testing
- What Exactly Is [the] “:root” Pseudo-Element in CSS? · · videos, css, selectors
- Design Systems Directory · · websites, design-systems
- Designing for Inclusion · · design, inclusion, accessibility
- WCAG 2.2 Removes 4.1.1 Parsing and How axe-core Is Impacted · · wcag, accessibility, testing, tooling
- How Designers Can Beat AI at Design · · design, ai
- Using Multiple Selectors With JavaScript Selector Methods · · javascript, selectors
- Cascade Layers Are Useless * · · css, cascade
- Too Much JavaScript? Why the Frontend Needs to Build Better · · javascript, web-platform, performance
- CSS in Micro Frontends · · css, micro-frontends
- The 5 Pillars of Every HTTP Request · · http
- State of CSS 2023 · · surveys, css
- W3C Launch Their New Website · · w3c
- Creating a Flexible Design Token Taxonomy for Intuit’s Design System · · design-tokens, design-systems
- Thoughts from “Meet Safari for Spatial Computing” · · apple, safari, accessibility, responsive-design
- Three Key Principles for an Accessible Website · · principles, accessibility
- Authentication vs. Authorization · · authentication, authorization, comparisons
- Making Your Design Tokens Future-Proof · · design-tokens
- Style Your RSS Feed · · css, syndication
- Continuous Accessibility · · websites, accessibility, processes
- Balancing Users’ Data Privacy and the User Experience · · privacy, user-experience
- Balancing Users’ Needs and Business Goals in UX Design · · user-experience, design
- Can Web Developers Be Held Liable? · · accessibility, legal
- Packaging and Selling a Node.js App · · nodejs
- Why UX Testing Is Critical to Your Web Site’s Success · · user-experience, testing
- Gatsby Headaches and How to Cure Them: I18N II · · gatsby, internationalization
- Button Types · · html, buttons
- Import Maps to Natively Import JavaScript Modules Using Bare Names · · javascript
- The New CSS · · css, design, web-platform
- The Problem With Sticky Menus That Appear on Scroll and What to Do Instead · · navigation, scrolling, user-experience
- How to Clean Up Your Local Repository With Git Commands · · how-tos, git, command-line, maintenance
- It’s Time for Dimensional Thinking in Design · · design, ai
- IndexedDB Tutorial for Beginners: A Comprehensive Guide with Coding Examples · · tutorials, guides, databases, indexeddb, examples
- TypeScript 5.2’s New Keyword: “using” · · typescript
- The Five Types of People Who Produce Inaccessible Code · · accessibility, community
- Standardising Design Tokens · · design-tokens, conventions
- Create React UI Lib: Component Library Speedrun · · typescript, react, components, npm
- Scoping · · css, scope
- Creating Scroll-Triggered Animations by Combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions · · css, animations, transitions, scrolling, custom-properties, container-queries
- 6 Quick Tests You Can Do to Test Your Forms for Accessibility · · accessibility, testing, forms
- The Next Phase of Eleventy: Return of the Side Project · · eleventy
- What’s UnAI-Able · · ai
- What Are Deceptive Patterns? · · user-experience, dark-patterns
- An Explosion in Software Engineers Using AI Coding Tools? · · ai, code-completion, productivity
- A Guide to Coding Standards to Improve Code Quality · · guides, conventions, formatting, consistency, quality
- How to Add a CSS Reveal Animation to Your Images · · how-tos, css, animations, images
- Top 10 Things You Should Add While Coding: Valuable Tips for Programmers · · tips-and-tricks, programming
- Using Color Wheel Combinations in Your Designs · · colors, design
- Cyclic Dependency Space Toggles · · css, custom-properties
- How (and Should?) We Stop the Infinite Scroll · · user-experience, scrolling
- npm Won’t Publish Packages Containing the Word “keygen” · · discussions, npm, dependencies
- How to Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit · · how-tos, svelte, sveltekit, web-apps, server-side-rendering
- Puppeteer in Node.js: More Antipatterns to Avoid · · nodejs, scraping, testing, anti-patterns, puppeteer
- Design vs. Accessibility and the CSS “visually-hidden” Class · · design, accessibility, css, comparisons
- Rebuilding a Comment Component With Modern CSS · · functionality, components, css
- The Gotchas of CSS Nesting · · css, nesting
- When and Why to Use a Click Test · · usability, testing
- Nuxt in 100 Seconds · · videos, introductions, nuxt
- Tuesday June 20 2023 Security Releases · · nodejs, release-notes, security
- Positioning Anchored Popovers · · popovers, css
- Chrome for Testing: Reliable Downloads for Browser Automation · · user-agents, google, chrome, testing
- Gatsby Headaches and How to Cure Them: I18N · · gatsby, internationalization
- Blur Vignette Effect in CSS · · css, effects
- Naming Components · · design-systems, components, naming
- “margin-trim” as a Best Practice? · · css
- CSS! CSS! CSS! · · css, community
- The Continuing Tragedy of CSS: Thoughts from CSS Day 2023 · · css, web-platform
- How to Highlight Required and Optional Form Fields · · how-tos, forms, mistakes, usability
- Bottom Sheets: Definition and UX Guidelines · · terminology, guidelines, mobile, user-experience
- You Can Stop Using “user-scalable=no” and “maximum-scale=1” in Viewport Meta Tags Now · · html, metadata, accessibility, responsive-design
- Design Under Constraints: Challenges, Opportunities, and Practical Strategies · · design, strategies
- Modern CSS for Dynamic Component-Based Architecture · · css, architecture, components
- Shining Light on the Shadow DOM · · videos, shadow-dom, dom
- That’s Not How I Wrote CSS Three Years Ago · · videos, css, support
- Best Animation Libraries for React · · libraries, animations, react, link-lists
- Liven Up Your Websites With Scroll-Driven Animations and View Transitions · · videos, css, scrolling, animations, transitions
- CSS Containers, What Do They Know? · · videos, css, container-queries
- Internet Explorer: The 1st Browser to Support CSS · · videos, css, user-agents, microsoft, internet-explorer, support, history
- State of the CSS Community · · videos, css, community
- The CSS “overscroll‑behavior” Property Can Be Used to Disable Default Browser Gestures · · css, scrolling
- Sticky Content: Focus in View · · accessibility, focus, scrolling, css
- No, “AI” Will Not Fix Accessibility · · accessibility, ai
- Style Recalculation Secrets They Don’t Want You to Know · · videos, css, selectors, performance
- The Universal Focus State · · accessibility, focus, css
- Why Doesn’t CSS Have Scope? · · videos, css, scope
- Must Know JavaScript API—IndexedDB API · · databases, indexeddb, javascript, apis
- 48 Laws, Rules, and Principles of Web Development · · programming, principles, terminology
- Are Simple Websites Better for Business? · · design, simplicity
- Chrome DevTools Tips: Styles Pane and Elements Panel · · videos, dev-tools, user-agents, google, chrome
- Designing a Scalable Backend in Node.js · · software-design, scaling, nodejs
- Before Your Next Frontend Pull Request, Use This Checklist · · checklists, performance, compression, dependencies, accessibility, legibility, naming
- Best Practices for Container Queries · · best-practices, container-queries, css
- Testing Sites and Apps With Blind Users: A Cheat Sheet · · accessibility, testing, user-agents, assistive-tech, screen-readers, tooling, cheat-sheets
- Assume the Position—a Labelling Story · · accessibility, forms, html
- What’s New in CSS · · videos, css, apple
- Modern CSS in Real Life · · css
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 · · standards, accessibility, aria
- Be Careful With “ch” Units · · css, units
- Reducing Complexity in Front End Development · · complexity, performance, css, javascript
- Styling Scrollbars · · scrolling, css
- Exploring Universal and Cognitive-Friendly UX Design Through Pivot Tables and Grids · · information-design, user-experience
- RSC from Scratch: Server Components · · videos, react, components
- Angular at Google I/O 2023 · · release-notes, angular, google
- Tokens Are the Most Valuable Artifact a Design System Can Provide · · design-systems, design-tokens
- The Ultimate Guide to Writing Technical Blog Posts · · guides, writing, blogging
- Accessibility and Artificial Intelligence · · accessibility, ai
- Primitive Objects in JavaScript: When to Use Them · · javascript, objects
- Accessibility Testing—Pay Attention to the Details · · accessibility, testing
- An Introduction to Debugging in Node.js · · introductions, debugging, nodejs
- Is React Having An Angular.js Moment? · · react, angular
- One More Thing—Apple’s Push on Web Apps on macOS · · apple, web-apps
- The Problem With Automatically Focusing the First Input and What to Do Instead · · user-experience, accessibility, focus, forms
- New Job? Negotiate as If Your Life Depends on It · · career
- How to Detect Unnecessary Renderings of DOM Elements in Your Web App to Improve Performance · · how-tos, rendering, dom, performance, debugging, angular
- No Single Metric Captures Productivity · · productivity, metrics
- wasmati: You Should Write Your WebAssembly in TypeScript · · webassembly, typescript, libraries
- Every Design Team Needs Writers · · design, writing
- How Chrome Achieved High Scores on Three Browser Benchmarks · · user-agents, google, chrome, performance
- WCAG 2.2 Misses Mark on Defining Visible Focus · · accessibility, focus, wcag, standards
- The Many Ways to Select the n-th Character from a String · · javascript
- How AI Can Make Software More Intuitive · · ai, usability
- Do Not Drop Sass for CSS · · css, sass, preprocessors
- New CSS Color Spaces and Functions in All Major Engines · · css, colors, functions, user-agents, support
- An Introduction to “@ scope” in CSS · · introductions, scope, css
- How We Created an Accessible, Scalable Color Palette · · colors, color-palettes, accessibility, scaling, case-studies
- Announcing TypeScript 5.1 · · release-notes, typescript
- Asynchronous JavaScript for Beginners · · javascript
- The Context Dilemma · · design-systems, design-tokens
- Watch Transitions in Slow Motion in Chrome’s DevTools · · transitions, dev-tools, user-agents, google, chrome
- Accessible Components: The Hamburger Menu · · accessibility, components, navigation
- Why We Should Stop Using JavaScript According to Douglas Crockford · · videos, javascript
- Semantic Code in HTML: What Is It and Does It Still Matter? · · html, semantics
- Performance Is Not a Checklist · · performance, web-vitals, user-experience