News and Tools for Frontend Development (5)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- What the Heck Is a Homomorphic Mapped Type? · · typescript
- Inspecting WCAG 2.2: Accessible Authentication · · videos, accessibility, wcag, standards, authentication
- Everything You Need to Know About Responsive Logo Design · · design, branding, images, responsive-design
- HTML Validation—Pros and Cons · · html, conformance
- Every Container Queries Demo Is a Card · · css, container-queries
- Future of Storybook in 2024 · · visions, storybook
- Frontend Predictions for 2024 · · retrospectives, visions
- I Made JSX for Lua (Because I Hate Static Sites) · · jsx
- The New Old: Jamstack and MACH’s Journey Towards Traditional CMS Concepts · · tech-stacks, jamstack, content-management
- Coding Challenges 2024: What’s Your New Year’s Resolution? · · discussions, community
- CSS Wishlist · · css, wish-lists
- JS Design Patterns: A Comprehensive Guide · · guides, javascript, software-design-patterns
- I Built the Same App 7 Times: Which JS Framework Is Best? · · javascript, frameworks, comparisons
- Container Style Queries · · css, container-queries
- Never Underestimate HTML · · html, user-experience, developer-experience
- Measuring, Monitoring, and Optimizing TTFB With Server Timing · · performance, monitoring, optimization, apis
- Responsive SVGs · · svg, responsive-design
- The Devil Is in the Details: A Look into a Disclosure Widget Markup · · html, css, javascript
- Why AI Is a Disaster for the Climate · · ai, sustainability
- CSS-Based State Management · · css, state-management
- Session-Based vs. Token-Based Authentication: Which Is Better? · · authentication, json-web-tokens, comparisons, security
- The View Transitions API And Delightful UI Animations · · css, animations, transitions, apis
- FileReader API · · apis, javascript
- ARIA Live Regions · · aria, live-regions, accessibility
- WCAG 2.1 Developer Tips: Character Key Shortcuts and Label in Name · · accessibility, tips-and-tricks, wcag, keyboard-navigation
- GitHub Copilot: Tips and Tricks for Flutter Devs · · github, ai, flutter, dart, tips-and-tricks
- The Implied Web · · html, accessibility, semantics
- Cool Wiggly Hover Animation With CSS · · css, animations, effects
- 2023 Digital Accessibility Year in Review · · accessibility, retrospectives
- Scroll-Driven Animations · · animations, scrolling, css
- JavaScript Frameworks—Heading into 2024 · · javascript, frameworks, visions
- The Top Accessibility Errors Found in 2023 · · accessibility, conformance, quality, errors, retrospectives
- “HTML First” Is Not HTML First · · html, principles, quality, craft
- Container Queries and Units · · css, container-queries, units
- Turn Your Vue App into an Offline-Ready Progressive Web App · · vuejs, refactoring, offline
- Screen Reader Users and the Tab Key · · accessibility, user-agents, assistive-tech, screen-readers, keyboard-navigation, testing
- The State of Benchmarking in Node.js · · nodejs, performance, metrics
- The Complete Playwright Cheatsheet · · cheat-sheets, playwright, testing
- Recapturing Early-Internet Whimsy With HTML · · html, trends, design, art, decoration
- Debugging Fetch Priority · · videos, debugging, performance, web-vitals, apis
- New CSS Viewport Units Do Not Solve the Classic Scrollbar Problem · · css, units, scrolling
- Clean Architecture: Theming With Tailwind and CSS Variables · · theming, tailwind, custom-properties, css
- 10 Best Practices for Secure Code Review of Node.js Code · · best-practices, security, code-reviews, nodejs
- CSS Nesting · · css, nesting
- Locking Scroll With “:has()” · · css, selectors, scrolling
- The Golden Rule of Web Performance and Different Performance Engineering Specializations · · principles, performance
- Classes vs. Prototypes in JavaScript · · javascript, comparisons
- Release Notes for Safari Technology Preview 185 · · release-notes, user-agents, apple, safari
- Are We Too Pedantic With Semantic · · design, design-tokens, semantics
- See What’s New in Firefox [121.0] · · release-notes, user-agents, mozilla, firefox
- New to the Web Platform in December · · release-notes, web-platform, user-agents, mozilla, firefox, google, chrome, apple, safari
- “align-content” in Block Layout · · css, layout, support, user-agents
- View Transitions · · css, javascript, transitions
- Eigensolutions: Composability as the Antidote to Overfit · · product-management, processes
- Practical “img” Element Defaults · · videos, css, images
- Reflow Red Flags · · accessibility, reflow, testing
- We Can :has It All · · css, selectors, user-agents, support
- Border Images in CSS: A Key Focus Area for Interop 2023 · · images, borders, css, user-agents, web-platform, interoperability
- AI for Web Devs: AI Image Generation · · ai, tooling, images, automation
- Making Data Visualizations Accessible · · accessibility, information-design
- RLI (Recently Logged-In) Browser Cache Bypassing · · performance, caching, optimization
- The Road to HTMHell Is Paved With Semantics · · html, semantics, quality
- New JS Array Methods · · javascript, arrays
- The Goldilocks Principle for Prototyping · · videos, principles, prototyping, usability
- Good Design Is Subjective, Contextual, and Intentional · · design, processes
- Building Components for Consumption, Not Complexity II · · design-systems, components, figma
- Think About Your Future Self · · accessibility
- Thank You to Those Who Helped Me to Be the CSS Developer I Am Today · · career, community
- How to Center an Element in CSS Without Adding a Wrapper in HTML · · how-tos, css, layout, techniques
- React Props Explained With Examples · · react, props, examples
- A Checklist for CLS Scenarios · · checklists, performance, web-vitals
- Revisiting Fundamentals—Semantic Lists for Improved Accessibility · · fundamentals, semantics, html, accessibility
- CSS “animation-composition” · · css, animations
- Baseline Does Not Really Cover Baseline Support · · user-agents, support, interoperability, web-platform, accessibility
- HTML Can Do This? · · html
- Sharing a State Between Windows Without a Server · · web-workers, apis, state-management, effects
- Swallowing Camels · · accessibility
- Naming Design Tokens: The Art of Clarity and Consistency · · design-tokens, naming, consistency
- Web Components · · web-components, html, shadow-dom, dom
- Stop Normalizing Unprofessional Behaviour in the Name of Agility · · agile, processes, communication, community
- The Ghosts of Markup Past · · html, web, history
- Crafting Effective Documentation · · documentation
- Who Stole My Largest Contentful Paint? · · performance, web-vitals, optimization
- Introducing JavaScript Support in MySQL · · databases, mysql, javascript, support
- CSS “@ scope” · · css, scope
- How We Reduced CSS Size and Improved Performance Across GOV.UK · · case-studies, css, performance, optimization
- Christmas Tree Animations Made With CSS and JS · · css, javascript, animations, effects, link-lists
- The WordPress Showcase and Accessibility · · accessibility, wordpress
- Managing Node.js Processes · · nodejs, tooling
- Announcing SvelteKit 2 · · release-notes, sveltekit
- V8 Is Faster and Safer Than Ever · · engines, v8, javascript, webassembly
- Getting Started With Web Performance · · introductions, performance, web-vitals, testing
- The Unspoken Struggle of Aging in a Tech-Driven World · · accessibility, user-experience, web
- Anchor Positioning · · css
- Addressing Unconscious Bias in Developer Relations: Strategies for Creating Fair and Inclusive Experiences · · developer-relations, inclusion, community, strategies
- Design Systems Teams: Understand Your Users So They Can Serve Theirs · · design-systems, leadership, accessibility, user-experience
- The Financial Argument for Using an Outside Firm for Accessibility Remediation · · accessibility, economics
- Ten Optimisation Tips for an Initial Web Performance Audit · · tips-and-tricks, optimization, performance, auditing
- HTML: The Bad Parts · · html
- 6 Techniques for Conditional Rendering in React, With Examples · · techniques, react
- What Really Is Technical Debt? · · technical-debt, terminology, quality
- How to Get Good at Competitive Programming · · how-tos, programming
- CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study · · css, scrolling, layout, case-studies
- My Accessibility Journey · · accessibility, career
- Popover API · · pop-overs, apis, css
- What Vue’s Creator Learned the Hard Way With Vue 3 · · vuejs, lessons
- Baseline 2023 · · user-agents, support, interoperability, web-platform
- Test-Driven HTML and Accessibility · · html, accessibility, testing, javascript
- Engineering Progression for Humans · · career, leadership
- Extending Responsive Video With HTML Web Components · · multimedia, responsive-design, web-components, javascript
- Three Modern CSS Properties Your Website Must Have · · css
- Can UX Design Actually Be Ethical? · · user-experience, design, ethics
- Using Nodemon and Watch in Node.js for Live Restarts · · nodejs, tooling
- Using Date-Based CSS to Make Old Web Pages Look Old · · css, history
- Accessibility Overlays · · accessibility, overlays, metrics
- The “hidden” Attribute in HTML · · html
- Why Designers Quit (2023 Report) · · design, career
- Chrome Enables Desktop Mode by Default on Premium Tablets · · user-agents, google, chrome, desktop
- Developer Relations Is an All-Company Effort · · developer-relations, open-source, community
- Behavior Belongs in the HTML · · html, javascript, principles
- Building Components for Consumption, Not Complexity · · design-systems, components, figma
- Improve App Performance With Angular 17 “defer” · · videos, angular, performance, optimization
- Video Subtitles, Captions, Audio Descriptions, and Transcripts · · accessibility, multimedia, captions
- The “await” Event Horizon in JavaScript · · javascript, events
- Node.js, TypeScript, and ESM: It Doesn’t Have to Be Painful · · nodejs, typescript, modules
- Quantity Queries Are Very Easy With CSS “:has()” · · css, selectors
- WebKit Features in Safari 17.2 · · release-notes, user-agents, apple, safari, webkit
- ARIA, the Good Parts · · videos, accessibility, aria
- Screen Reader User Survey #10 · · surveys, accessibility, user-agents, assistive-tech, screen-readers
- Decoding Compound Tokens · · design-tokens, terminology
- How to Enable Experimental CSS and JS Features in Chrome, Firefox, and Safari · · videos, how-tos, experiments, user-agents, google, chrome, mozilla, firefox, apple, safari
- Template for Accessibility Guidelines · · templates, accessibility, guidelines
- A List of JavaScript Engines, Runtimes, Interpreters · · javascript, engines, runtimes, link-lists
- Task Automation and Debugging With AI-Powered Tools · · automation, debugging, tooling, ai
- How I Brought LCP Down to Under 350 ms for Google-Referred Users on My Website · · performance, web-vitals, optimization, case-studies
- Signals of Interface Quality · · design, quality
- Potential Problems With Accessibility Audits and What to Do About Them · · accessibility, auditing, testing
- Media Queries in HTML Video · · html, multimedia, css, media-queries, accessibility
- What the Slot? · · web-components, dom, shadow-dom, html
- Audit Your Site for Third-Party Cookies · · videos, auditing, cookies, privacy
- All Technical Debt Is a Risk to the Product and to Your Business · · technical-debt, quality, product-management, processes
- Oh No! My JSON! · · css
- Scroll Fading 101 · · scrolling, interaction-design, usability
- Preparing for Interaction to Next Paint, a New Web Core Vital · · performance, web-vitals, optimization
- CSS Wrapped: 2023! · · css, user-agents, support, interoperability, retrospectives
- Security Headers Using “<meta>” · · security, csp, html
- CSS Snapshot 2023 · · css
- A Beginner’s Guide to Accessible Text · · guides, accessibility, content, writing, best-practices
- Is PHP Still a Viable Choice in 2023? · · discussions, php
- Insights: Mobile Accessibility · · accessibility, research, metrics, mobile
- Accessibility-Specific Tech Requirements? It Depends! · · accessibility, processes
- The Most Accessible Font · · accessibility, typography, legibility, fonts
- The Shrinkwrap Problem: Possible Future Solutions · · css
- React Performance Optimization · · react, performance, optimization
- Release Notes for Safari Technology Preview 184 · · release-notes, user-agents, apple, safari
- The Last 5 Years of V8’s Garbage Collector · · engines, v8, concurrency, history
- Stop Nesting Ternaries in JavaScript · · javascript, operators
- HTML5 Boilerplate v9.0.0 Released · · release-notes, html, templates
- Understanding the New WCAG 2.2 Criteria · · accessibility, wcag
- TypeScript’s Hidden Feature: Subtypes · · typescript
- Custom Events in Web Components · · web-components, events, javascript
- Fine, I’ll Use a Super Basic CSS Processing Setup · · css, preprocessors, tooling
- The Complete Puppeteer Cheatsheet · · puppeteer, cheat-sheets, chromium
- Overview of Drupal · · overviews, drupal
- Dark Design Patterns Catalog · · design, user-experience, dark-patterns
- “sizes="auto"” Pretty Much Requires “width” and “height” Attributes · · html, images, maintainability
- Astro 4.0 · · release-notes, astro
- Maglev—V8’s Fastest Optimizing JIT · · v8, optimization, user-agents, google, chrome
- A Definition Update for Baseline · · user-agents, support, interoperability, web-platform
- Baseline’s Evolution on MDN · · user-agents, support, interoperability, web-platform, case-studies
- The Hellish History of HTML: An Incomplete and Personal Account · · html, history
- Web Chat Accessibility Considerations · · accessibility, functionality, wcag, aria
- Scale Your React App With Storybook and Chromatic · · react, scaling, storybook
- My 3 Rules for Documenting Code · · documentation, naming, processes
- Blind CSS Exfiltration: Exfiltrate Unknown Web Pages · · css, security
- Better Vue.js Inputs With Generics: The Select · · vuejs, components
- 4 Dead Simple Ways of Customizing Bootstrap · · bootstrap, customization, css
- Testing the Performance of Social Media Embeds · · performance, testing, embed-code, social-media
- 12 Important User-Interface Design Guidelines · · guidelines, design, usability
- 100 Bucket List Ideas for Programmers · · career, learning
- An Informed Pre-Caching Strategy for Large Sites · · strategies, performance, caching
- Of Time and the Web · · videos, web, processes, history
- The State of UX in 2024: Enter Late-Stage UX · · user-experience
- Pen, Paper, IDE: A DevTool Founder’s Early-Stage Product Design Guide · · guides, design, product-management, processes
- The Importance of User Feedback and Data in UX Design · · user-experience, metrics
- How Marketing Changed OOP in JavaScript · · javascript, programming, software-design-patterns
- Why Carousels Don’t Work · · carousels, design, user-experience
- CSS Media Query for Scripting Support · · css, media-queries, user-agents, support
- Color Psychology in Visual Design: A Practical Guide to Impacting User Behavior · · guides, design, colors, tips-and-tricks
- Back to Basics: 5 HTML Attributes for Improved Accessibility and User Experience · · fundamentals, html, accessibility, user-experience
- The Pros and Cons of Using React Today · · react, frameworks
- Is the Flat Design Trend Finally Over? · · design, trends
- The “form” Attribute—Enhancing Form Layout Flexibility · · forms, html
- Let’s Learn How Modern JavaScript Frameworks Work by Building One · · javascript, frameworks, reactivity, rendering, dom
- You Don’t Need JavaScript for That · · javascript
- A More Holistic Design Workflow: Gluing Jira, Figma, and Zeplin Together · · design, processes, figma
- Fastest Way of Passing State to JavaScript, Re-Visited · · javascript, state-management, performance
- Recovering Deleted Files from Your Git Working Tree · · git, command-line
- Deceptive Patterns in UX: How to Recognize and Avoid Them · · user-experience, dark-patterns
- The UX of HTML · · html, semantics, user-experience
- Web Development Advent Calendars for 2023 · · link-lists, learning
- Create Dynamic Web Experiences With Interactive SVG Animations · · svg, animations, tooling
- Does Web Design Matter? · · design, web
- I Replaced npm, Yarn, and nvm With pnpm · · dependencies, npm, yarn, pnpm, nvm
- CSS Relative Colors · · css, colors
- Search vs. Browse · · user-experience, browsing, searching, comparisons
- How to Use a Color Font · · how-tos, fonts, css
- Debugging BFCache, Make Your Page Load Instantly · · videos, performance, caching, user-agents, google, chrome, dev-tools, debugging
- How to Use Chrome’s Accessibility Tree · · how-tos, accessibility, user-agents, google, chrome
- Node v21.3.0 · · release-notes, nodejs
- Firefox on the Brink? · · user-agents, mozilla, firefox
- Preparing for a Live Demo · · career
- Creating a Marquee Effect With CSS Animations · · css, animations, effects
- Not All Screen Reader Users Are Blind · · accessibility, user-experience, user-agents, assistive-tech, screen-readers
- New to the Web Platform in November · · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox
- Is 2024 the Year of CSS Nesting? · · css, nesting
- Hide and Debug Empty Elements With CSS · · css
- Fetch API, Do You Really Know How to Handle Errors? · · data-fetching, apis, errors
- Measure LCP Sub-Parts to Improve Largest Contentful Paint · · performance, web-vitals, metrics
- Testing in Production With Canary Deployments: A How-To Guide · · guides, testing, deploying
- Design That Scales · · books, design, design-systems, scaling, processes
- Oh No, Overflow! · · css, layout
- Care Beyond Code: 7 Best Design Practices for Frontend Developers · · design, best-practices
- The Difference Between Nesting an “@ layer” in “@ media” and “@ container” Query · · videos, css, media-queries, container-queries, comparisons
- How to Use the File System in Node.js · · how-tos, file-handling, nodejs, apis
- Checking the Type of a String in PHP · · php
- Accessibility: A Practical Perspective · · accessibility
- Kicking the Excessive JavaScript Habit · · javascript, performance, developer-experience, user-experience
- Resource Loading at the Cutting Edge · · videos, performance
- The “hanging-punctuation” Property in CSS · · css, typography
- Web Components Eliminate JavaScript Framework Lock-In · · web-components, javascript, frameworks, maintainability
- 10 JavaScript Changes You Missed in 2023 · · videos, javascript, retrospectives
- Keyboard Accessibility Myths and WCAG · · accessibility, keyboard-navigation, wcag
- “An Accessible Website Won’t Be Beautiful”… Really?! · · design, accessibility
- Burnout in the Digital Accessibility Field · · accessibility, career
- A Complete Guide to pnpm · · guides, pnpm, dependencies
- Are Design Ethics Useless? · · design, ethics
- “oklch()” Retains Perceived Lightness for Different Hue Angles · · css, functions, colors, oklch
- OOP Design Patterns in JavaScript · · javascript, software-design-patterns
- Progressive Enhancement vs. Graceful Degradation: Approaches to Web Development · · progressive-enhancement, graceful-degradation, comparisons
- Preventing Scroll “Bounce” With CSS · · css, scrolling
- A Few Ways CSS Is Easier to Write in 2023 · · css, techniques, comparisons
- Accessibility Is Leadership · · accessibility, leadership
- Design Systems Metrics—What I Have Learned Leading the [Design System] of the Biggest Edtech in Latin America · · design-systems, metrics, lessons
- Weird HTML Hacks · · html, css, techniques, history
- State of JavaScript 2023 · · surveys, javascript
- How to Test 3.3.7 Redundant Entry · · how-tos, accessibility, testing, wcag
- Browsers Only Update “:target” on Page Load and During Fragment Navigation · · css, selectors
- Choosing a Green Web Host · · hosting, sustainability
- Test Often to Keep Your Designs Simple · · design, prototyping, testing, simplicity