News and Tools for Frontend Development (10)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- 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
- What’s the Perfect Design Process? · · design, processes
- Under-Engineered Comboboxen? · · forms, html, css, accessibility
- Accessible Overlays Aren’t Accessible · · accessibility, overlays
- 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
- 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
- Release Notes for Safari Technology Preview 173 · · release-notes, user-agents, apple, safari
- JavaScript Console Methods: A Deep Dive · · javascript, console, debugging
- Form and Search Landmarks · · html, aria, forms, user-agents, assistive-tech, support
- Getting Started With Native Design Tokens in Figma · · design-tokens, figma, introductions
- 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
- 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
- Screen Magnification: Digital Accessibilitiy · · videos, accessibility, assistive-tech, screen-magnification
- What’s Next for JavaScript: New Features to Look Forward To · · javascript
- Faking a “:snapped” Selector With Scroll-Driven Animations · · css, selectors, animations, scrolling
- Going Beyond Constants With Custom Properties · · css, custom-properties
- Transition Between Pages Smoothly With a Single Line of Code · · css, transitions
- AI Is Killing the Old Web, and the New Web Struggles to Be Born · · ai, web
- 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
- Top Tips from a Web Accessibility Evaluator at WebAIM · · accessibility, auditing, tips-and-tricks
- Tips for Upgrading Your Techstack for Faster Frontend Development · · tips-and-tricks, tech-stacks, productivity, efficiency, modernization
- 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
- Mapping Typography · · videos, typography, css
- 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
- Using BEM for Design System Tokens · · bem, design-tokens, conventions
- Choosing a Color Palette · · videos, design, colors, color-palettes
- 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
- WCAG 2.2 Removes 4.1.1 Parsing and How axe-core Is Impacted · · wcag, accessibility, testing, tooling
- Design Systems Directory · · websites, design-systems
- Designing for Inclusion · · design, inclusion, accessibility
- How Designers Can Beat AI at Design · · design, ai
- Using Multiple Selectors With JavaScript Selector Methods · · javascript, selectors
- Cascade Layers Are Useless * · · css, cascade
- CSS in Micro Frontends · · css, micro-frontends
- The 5 Pillars of Every HTTP Request · · http
- Too Much JavaScript? Why the Frontend Needs to Build Better · · javascript, web-platform, performance
- State of CSS 2023 · · surveys, css
- W3C Launch Their New Website · · w3c
- Three Key Principles for an Accessible Website · · principles, accessibility
- 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
- Making Your Design Tokens Future-Proof · · design-tokens
- Authentication vs. Authorization · · authentication, authorization, comparisons
- Style Your RSS Feed · · css, syndication
- Continuous Accessibility · · websites, accessibility, processes
- Balancing Users’ Data Privacy and the User Experience · · privacy, user-experience
- Can Web Developers Be Held Liable? · · accessibility, legal
- Balancing Users’ Needs and Business Goals in UX Design · · user-experience, design
- 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
- Radix UI Component With Next.js and Tailwind CSS · · videos, components, radix, nextjs, tailwind
- 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
- Git Concepts Everyone Should Know · · git, concepts
- 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
- How to Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit · · how-tos, svelte, sveltekit, web-apps, server-side-rendering
- Design vs. Accessibility and the CSS “visually-hidden” Class · · design, accessibility, css, comparisons
- npm Won’t Publish Packages Containing the Word “keygen” · · discussions, npm, dependencies
- Puppeteer in Node.js: More Antipatterns to Avoid · · nodejs, scraping, testing, anti-patterns, puppeteer
- 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 · · release-notes, nodejs, security
- 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
- Positioning Anchored Popovers · · pop-overs, 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
- That’s Not How I Wrote CSS Three Years Ago · · videos, css, support
- Shining Light on the Shadow DOM · · videos, shadow-dom, dom
- Liven Up Your Websites With Scroll-Driven Animations and View Transitions · · videos, css, scrolling, animations, transitions
- Best Animation Libraries for React · · libraries, animations, react, link-lists
- 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
- An Introduction to DevOps · · introductions, dev-ops
- State of the CSS Community · · videos, css, community
- Sticky Content: Focus in View · · accessibility, focus, scrolling, css
- The CSS “overscroll‑behavior” Property Can Be Used to Disable Default Browser Gestures · · css, scrolling
- 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
- Are Simple Websites Better for Business? · · design, simplicity
- 48 Laws, Rules, and Principles of Web Development · · programming, principles, terminology
- Chrome DevTools Tips: Styles Pane and Elements Panel · · videos, dev-tools, user-agents, google, chrome
- 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
- Designing a Scalable Backend in Node.js · · software-design, scaling, nodejs
- Assume the Position—a Labelling Story · · accessibility, forms, html
- Be Careful With “ch” Units · · css, units
- Modern CSS in Real Life · · css
- Reducing Complexity in Front End Development · · complexity, performance, css, javascript
- Exploring Universal and Cognitive-Friendly UX Design Through Pivot Tables and Grids · · information-design, user-experience
- Styling Scrollbars · · scrolling, css
- RSC from Scratch: Server Components · · videos, react, components
- What’s New in CSS · · videos, css, apple
- Tokens Are the Most Valuable Artifact a Design System Can Provide · · design-systems, design-tokens
- Angular at Google I/O 2023 · · release-notes, angular, google
- The Ultimate Guide to Writing Technical Blog Posts · · guides, writing, blogging
- Accessibility and Artificial Intelligence · · accessibility, ai
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 · · standards, accessibility, aria
- Accessibility Testing—Pay Attention to the Details · · accessibility, testing
- An Introduction to Debugging in Node.js · · introductions, debugging, nodejs
- Primitive Objects in JavaScript: When to Use Them · · javascript, objects
- 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
- An Introduction to “@ scope” in CSS · · introductions, scope, css
- New CSS Color Spaces and Functions in All Major Engines · · css, colors, functions, user-agents, support
- 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
- Watch Transitions in Slow Motion in Chrome’s DevTools · · transitions, dev-tools, user-agents, google, chrome
- The Context Dilemma · · design-systems, design-tokens
- Accessible Components: The Hamburger Menu · · accessibility, components, navigation
- Semantic Code in HTML: What Is It and Does It Still Matter? · · html, semantics
- Why We Should Stop Using JavaScript According to Douglas Crockford · · videos, javascript
- Performance Is Not a Checklist · · performance, web-vitals, user-experience
- A Practical Guide to Deploying a Complex, Production-Level, Three-Tier Architecture on AWS · · guides, deploying, complexity, architecture, aws
- Advanced Form Control Styling With “selectmenu” and Anchoring API · · forms, apis, css
- Quick Tip: Shipping Resilient CSS Components · · css, components, maintainability, tips-and-tricks
- Some Things I Learnt from Working on Big Frontend Codebases · · complexity, lessons
- Presentational Colors · · colors, design-tokens
- Design Systems: A Curated List for Today’s UI/UX Designers · · design-systems, design, tooling, link-lists
- Accessibility Audits for All · · accessibility, auditing, testing
- security.txt Now Mandatory for Dutch Government Websites · · security, legal
- Re-Evaluating “px” vs. “em” in Media Queries · · css, units, media-queries, comparisons
- Token Operations · · design-tokens
- New to the Web Platform in May · · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox, apple, safari
- Is There a Viable Animated GIF Alternative Yet or What? · · images, gif
- Watch Out for Layout Shifts With “ch” Units · · performance, css, units
- Linting Defensive and Logical CSS With Stylelint Plugins · · css, logical-properties, linting, tooling, plugins
- How Blink Invalidates Styles When “:has()” [Is] in Use · · engines, rendering, css, selectors
- Release Notes for Safari Technology Preview 171 · · release-notes, user-agents, apple, safari
- 21 Awesome Web Features You’re Not Using Yet · · videos, html, css, javascript
- Cracking the Theme Switcher and Dark Mode · · css, javascript, dark-mode
- An Introduction to JavaScript Proxies · · introductions, javascript
- Hands on With the Node.js Test Runner · · nodejs, testing
- The Art of Code Review · · code-reviews, processes, collaboration
- I Think I Finally “Get” JS Objects · · javascript, objects
- What Is Personalization? · · personalization, concepts
- Announcing the Second Compute Pressure Origin Trial · · apis, user-agents, google, chrome
- The Double-Edged Sword of Design Systems · · design-systems, design
- Don’t Meddle With User Input · · accessibility, forms
- 10 Incident Management Best Practices · · incident-response, best-practices, processes
- Sass-Like Nesting in Native CSS · · css, preprocessors, sass, nesting
- Mastering CSS Blend Modes · · css, blend-modes
- The Optimization Sinkhole · · productivity, optimization
- How Screen-Reader Users Type on and Control Mobile Devices · · accessibility, usability, user-agents, assistive-tech, screen-readers, mobile
- The Problem With Nested Fieldsets and How to Avoid Them · · accessibility, forms, assistive-tech, support
- Why Does “👩🏾🌾” Have a Length of 7 in JavaScript? · · javascript, unicode
- Plain Old JavaScript and the DOM · · javascript, dom
- WordPress Turns 20 · · wordpress
- When to Use Plain Text or Images Instead of MathML · · mathml, math, accessibility
- Understanding the Importance of Encoding · · encoding
- We Need to Talk About How We Talk About Accessibility · · accessibility, communication, inclusion
- Designing a Better Design Handoff File in Figma · · design, processes, figma
- Supper Club × Bramus Van Damme on CSS · · podcasts, interviews, css
- How to Draw Any Regular Shape With Just One JavaScript Function · · how-tos, javascript, functions
- A Practical Overview on Architecture Decision Records (ADR) · · overviews, documentation, processes
- Brief Note on Popovers With Dialogs · · html, support, accessibility, pop-overs, modals
- “display: contents” Considered Harmful · · accessibility, css
- Levelling Up Accessibility Skills in Your Organisation · · videos, accessibility
- Two Things That Are Not Great About OKLCH · · colors, oklch
- Seven Lessons from 7 Years Designing Systems · · lessons, design-systems
- Deploying AVIF for More Responsive Websites · · images, avif, performance
- The Yellow Fade Technique With Modern CSS Using “@ starting-style” · · css, techniques
- Responsive CSS Layout Grids Without Media Queries · · css, layout, responsive-design