News and Tools for Frontend Developers (18)
(Stay up-to-date on all topics by RSS feed, on Mastodon, and through other channels.)
- The 9 Most Effective Core Web Vitals Opportunities of 2023 (by/via) · · videos, performance, web-vitals
- Slow Design (via) · · websites, design
- Is Data Transfer the Best Proxy for Website Carbon Emissions? (by) · · sustainability, network
- How to Optimize Web Responsiveness With Interaction to Next Paint (by+/via) · · videos, how-tos, performance, web-vitals
- ES2023 Introduces New Array Copying Methods to JavaScript (by/via) · · javascript, ecmascript, standards, arrays
- Developer Tools That Shouldn’t Be Secrets (by/via) · · videos, user-agents, dev-tools
- Crafting a Modern Spotlight Effect With React and CSS (by) · · css, react, effects
- Baseline Features You Can Use Today (by/via) · · user-agents, support, web-platform
- Advancing Interaction to Next Paint (by+/via) · · performance, web-vitals
- Rearrange/Animate CSS Grid Layouts With the View Transition API (by/via) · · css, grids, layout, transitions, apis
- The Ongoing Defence of Frontend as a Full-Time Job (by) · · career
- See What’s New in Firefox [113.0] (via) · · release-notes, user-agents, mozilla, firefox
- Script Evaluation and Long Tasks (by/via) · · performance, javascript, web-vitals
- Optimize Input Delay (by/via) · · performance, web-vitals, optimization
- How to Handle Emojis in Node.js (by) · · how-tos, nodejs, emoji, unicode
- How Large DOM Sizes Affect Interactivity, and What You Can Do About It (by/via) · · performance, dom, html, optimization
- Find Slow Interactions in the Field (by/via) · · performance, web-vitals, auditing
- Diagnose Slow Interactions in the Lab (by/via) · · performance, web-vitals
- Design Systems [Are] a Mindset Not a Library (by/via) · · design-systems
- Client-Side Rendering of HTML and Interactivity (by/via) · · performance, html, client-side-rendering
- An Introduction to Container Queries in CSS (by/via) · · introductions, css, container-queries
- Proportional Design Systems With Proportio.app (by/via) · · design-systems
- A Comprehensive Guide to Using Langchain.js and Google Cloud Functions for AI Applications (by/via) · · guides, langchain, google, gcp, functions, ai
- Speed Trap (by/via) · · google, amp, web-platform
- ShatGPT (by) · · accessibility, ai
- Pay Attention to Web Performance Metrics to Improve the UX (by/via) · · performance, metrics, user-experience, web-vitals, optimization
- Improving Web-Site Conversion Rates Through Better UX Design (via) · · user-conversion, metrics, optimization, user-experience
- Dithering (by) · · images, dithering
- A Complete Guide to Usability Testing (by/via) · · guides, usability, testing
- The Problem With Sticky Menus and What to Do Instead (by) · · navigation, usability, user-experience
- How to Configure Path Aliases in Frontend Projects in the Native Way · · how-tos, aliases, javascript, configuration
- How Far Back in Time Can I Take My Website’s Design · · web, design, history, html, css
- The Image Sorting Experiment (by/via) · · images, information-design, sorting, experiments
- Should the Confirmation Button Come First or Last? (via) · · buttons, interaction-design
- Scaling Node.js Web Apps With Docker (by) · · scaling, nodejs, web-apps, docker
- Cron Job: A Comprehensive Guide for Beginners (via) · · guides, cron
- Complete Guide on Playwright Visual Regression Testing (by/via) · · guides, playwright, design, testing, regressions
- Speed Up or Slow Down a Video (by/via) · · user-agents, dev-tools, multimedia
- Scroll-Driven Animations (by) · · websites, scrolling, animations
- I’m Done With React (by) · · videos, react
- HTTP/1 vs. HTTP/2 vs. HTTP/3 (via) · · http, protocols, comparisons
- htmx Is the Future (by) · · htmx, visions
- How “:not()” Chains Multiple Selectors (by/via) · · css, selectors
- Design Tokens: Beginner’s Guide (by) · · guides, design-tokens, design-systems
- CSS Logical Properties: A Good Use Case (by) · · videos, css, logical-properties
- Using Go for Front End Development (by/via) · · go
- The Frontend Cloud Advantage (via) · · cloud-computing
- React Testing Library and Accessibility (by) · · react, libraries, accessibility, testing, automation
- How Do You Declare Namespace in JavaScript? · · javascript, namespaces
- GitHub Actions: All Actions Will Run on Node 16 Instead of Node 12 (via) · · github, automation, nodejs
- Code Coverage vs. Test Coverage (via) · · code-coverage, testing, quality, comparisons
- An Introduction to the “:has()” Selector in CSS (by/via) · · introductions, css, selectors
- 5 Best Practices to Sustainably Improve Core Web Vitals (by/via) · · performance, web-vitals, best-practices
- How to Make a CSS-Only Hamburger Menu (by) · · how-tos, css, navigation
- 7 Practical CSS Typography Tips and Tricks (by/via) · · videos, css, typography, tips-and-tricks
- Where Would You Take the W3C? (by) · · discussions, w3c
- The Latest Innovations in Drupal (by) · · drupal
- The Intersectionality of Web Performance (by) · · performance, sustainability, dei
- Security Implications of HTTP Response Headers (via) · · security, http
- Release Notes for Safari Technology Preview 169 (by/via) · · release-notes, user-agents, apple, safari
- Make Your Website Load Fast by Optimizing Request Priorities (via) · · performance, optimization, network
- How to Write More Efficient JavaScript Conditions (via) · · how-tos, javascript, efficiency
- Don’t Use Custom CSS Scrollbars (by) · · css, scrolling
- Digital Accessibility Is a Bigger Education Issue Than We Think—Here’s What We Can Do About It (by/via) · · accessibility, training
- Detecting if an Event Was Triggered by a User or by JavaScript (by/via) · · events, javascript
- Angular v16 Is Here (by/via) · · angular, release-notes
- The Simple Trick to Transition From Height “0” to “auto” With CSS (by) · · videos, css, transitions, tips-and-tricks
- CSS Naked Day and the Missing Wikipedia Page (by) · · css, awareness-days, maintainability
- Why “font-size” Must Never Be in Pixels (by) · · css, units, accessibility, responsive-design
- SupportsCSS (by) · · websites, tooling, css, support
- Short Note: Why Isn’t “role=presentation”/“none” Allowed on Focusable Elements? (by) · · accessibility, focus, aria, html
- Do Logical Properties Make CSS Easier to Learn? (by) · · css, logical-properties, learning
- developers.events: Maintaining a GitHub repository—What Have I Learned in 7 Years? (by) · · foss, community, github
- Creating an Animated Gradient Border With CSS (by) · · css, animations, gradients, borders
- An Update on the Lock Icon (by+/via) · · user-agents, google, chrome
- A Radical Proposal: Put UX Research in Charge (by/via) · · user-experience, research, product-management, strategies
- A Complete Guide to Performance Budgets (by/via) · · guides, performance, performance-budgets, metrics
- A/B Testing: A Primer · · introductions, testing, metrics, optimization
- 3 Engineering Mistakes That Kill Startups (by) · · mistakes, architecture
- What’s New in Svelte: May 2023 (by/via) · · release-notes, svelte, sveltekit
- Qwik Reaches v1.0 (via) · · release-notes, qwik
- CDNs: Speed Up Performance by Reducing Latency (by) · · content-delivery, performance
- This Blog Is Hosted on My Android Phone (by) · · websites, hosting
- Testing Feature Support for Modern CSS (by) · · css, feature-detection, support
- Tailwind CSS vs. UnoCSS (by) · · tailwind, unocss, css, frameworks, comparisons
- “:root” Isn’t Global (by) · · css
- Practical Guide to Not Blocking the Event Loop · · guides, javascript, event-loop, events, performance
- CSS Wishlist 2023 (by) · · css, wish-lists
- Configuring ESLint, Prettier, and TypeScript Together (by) · · eslint, prettier, linting, formatting, tooling, typescript, configuration
- Beyond Content Creation: How Open Source Contributions Can Help You Get Noticed (by/via) · · foss, content, career
- 7 Things to Remove From Your Job Postings to Be More Inclusive (by/via) · · hiring, dei
- 30th Anniversary of Licensing the Web for General Use and at No Cost (by/via) · · web, web-platform, standards, foss, history, anniversaries
- Two Underused Arguments for Writing Documentation (by) · · writing, documentation, career
- My Favorite Free Courses to Learn JavaScript in Depth (by) · · courses, javascript, training, link-lists
- The Popover API Is Exciting, Sort Of (by) · · apis, pop-overs
- Dark Mode in 3 Lines of CSS and Other Adventures (by) · · css, dark-mode
- Write Better CSS by Borrowing Ideas From JavaScript Functions (by/via) · · css, javascript, functions, quality
- Rebuilding a Featured News Section With Modern CSS: Vox News (by) · · css, refactoring, maintenance, optimization
- New to the Web Platform in April (by/via) · · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox
- JS Private Class Fields Considered Harmful (by) · · javascript
- Everything You Need to Know About Webpack’s Bundle Analyzer (by) · · webpack, bundling, tooling
- Animating the Impossible (by/via) · · videos, animations, transitions
- A Beginner’s Introduction to the Most Common Data Types in Programming (via) · · introductions, data-types, programming
- What Is the Value of a Design System? (by/via) · · design-systems
- Progress Over Perfection: The Better Way for Communication and Accessibility Advocacy (by) · · accessibility, communication, advocacy, processes
- Writing Unit Tests in Node.js Using Jest (by+/via) · · testing, nodejs, jest
- Typography for Everyone (by/via) · · videos, fonts, typography
- The Most Underrated Section of Design Portfolios (by/via) · · design, career
- Modern CSS Layout Is Awesome! (by/via) · · videos, css, layout
- How to Manage Design Tokens (by) · · how-tos, design-tokens, maintenance
- How to Deep Merge Arrays and Objects With JavaScript (by) · · how-tos, javascript, arrays, objects
- Accessible Target Sizes Cheatsheet (by/via) · · accessibility, user-experience
- The Most Important Thing Productivity Tools Are Missing About AI (by/via) · · tooling, productivity, ai
- The Interactive Guide to Rendering in React (by/via) · · guides, client-side-rendering, react
- Discovering the Power of JavaScript Proxy After All This Time (by) · · javascript
- Adding Motion to the Next Decade of Atomic Design (via) · · design, atomic-design
- Transition To and From “display: none” With Upcoming CSS Capabilities (by) · · videos, css, transitions
- The Best Way to Get nvm Working in CI/CD Systems · · nvm, ci-cd
- Reducing the Cost of String Serialization in Node.js Core (by) · · nodejs, performance
- Crafting the Next.js Website (by+) · · nextjs
- Comparing the Best Node.js Version Managers: nvm, Volta, and asdf (by/via) · · nodejs, npm, nvm
- Organizing a Web Design System for Scalability in Figma (via) · · design-systems, scaling, figma
- Figma, I Love You but You’re Bringing Me Down (by/via) · · figma
- Design Debt: The Hidden Cost of Neglecting UX Investment, and How to Measure and Manage It (by/via) · · design-debt, user-experience, metrics, economics
- What’s New in Node.js 20 (by/via) · · nodejs
- The “const” Deception (by) · · javascript
- The Potentially Dangerous Non-Accessibility of Cookie Notices (by/via) · · accessibility, cookies, legal, privacy, user-experience
- Scoped CSS Is Back (by) · · css, scope
- npm vs. Yarn vs. pnpm (by) · · npm, yarn, pnpm, comparisons
- Goodbye “create-react-app”: A New Approach (by) · · react
- Frontend Web Performance Checklist (by) · · performance, checklists
- CSS Blend Modes (by) · · css, blend-modes
- Avoiding Dark Patterns in Web Design (by/via) · · dark-patterns, design
- The Effects of Technical Debt on Morale (by) · · research, technical-debt, productivity
- How to Write Comments in React: The Good, the Bad, and the Ugly (by) · · how-tos, react, comments
- Meeting WCAG Level AAA (by/via) · · accessibility, wcag, conformance, standards
- Dark Mode Toggle and “prefers-color-scheme” (by) · · dark-mode, toggles, css
- Transitioning to Height Auto (Two Ways) (by) · · css
- “The Secret List of Websites” (by) · · ai, web, content
- Exploring the Potential of Web Workers for Multithreading on the Web (by/via) · · web-workers, multithreading, performance, javascript
- “details”/“summary” Inconsistencies (by) · · html, user-agents, assistive-tech, support
- Considering Content Warnings in HTML (by) · · html, content, dei
- This Website Is Under Construction, a Love Letter to the Personal Website (via) · · videos, web, web-platform
- Upgrading Our CSS Habits: “aspect-ratio” (by) · · css
- Spinning Diagrams With CSS (by) · · css, animations
- Read-Only Web Apps (by) · · javascript, progressive-enhancement
- Designing and Coding for Voice (by) · · accessibility, voice
- CSS Custom Properties Beyond the “:root” (by) · · css, custom-properties, semantics
- 5 Topics You Should Touch on During the Recruitment Process · · interviewing, career, processes
- It’s Time for the Tech Industry to Live Up to Its Ideals (via) · · career, visions
- Visually Accessible Data Visualization (by/via) · · accessibility, information-design
- Introduction to Web Animations With GSAP (by) · · introductions, animations, javascript, gsap
- Introducing npm Package Provenance (by+/via) · · introductions, github, npm, provenance, security, foss
- Why Is Scrum the Most Popular Agile Framework? (by/via) · · scrum, agile, processes
- Using HTML Elements as CSS Masks (by) · · css
- Release Notes for Safari Technology Preview 168 (by/via) · · release-notes, user-agents, apple, safari
- Productivity and Well-Being: A Summary of What Works · · productivity, career
- Intro to Runtime Performance in the Chrome DevTools Performance Panel (by/via) · · videos, introductions, performance, dev-tools, user-agents, google, chrome
- Generating Provenance Statements (by/via) · · npm, provenance, security
- 5 Code Refactoring Techniques to Improve Your Code (by/via) · · refactoring, maintenance, techniques
- Audio Accessibility in Miro: A Hackathon Story in 3 Acts (by/via) · · accessibility, multimedia, experiments
- Why CloudFront Invalidation Is Required After Every New Deployment and How to Implement It? (by) · · how-tos, aws, cloudfront, caching
- 5 Must-Know Shopify Liquid Tips and Tricks for Customizing Your Store · · liquid, shopify, customization, tips-and-tricks
- What’s New in ECMAScript 2023 (by) · · ecmascript, standards
- Signals: Fine-Grained Reactivity for JavaScript Frameworks (by/via) · · javascript, reactivity, signals, frameworks
- Node.js 20 Is Now Available! (via) · · nodejs, release-notes
- Kubernetes Quick Tutorial (by) · · tutorials, kubernetes
- How to Create an SEO Strategy (by/via) · · how-tos, seo, strategies
- DevTools: A Better Way to Visualize Your JavaScript (by) · · dev-tools, visualization, user-agents, performance, lighthouse, google, chrome, microsoft, edge
- Container Query Units and Fluid Typography (by) · · css, container-queries, typography
- 8 Best Tools for Cryptography and Encryption (via) · · link-lists, tooling, comparisons, security, cryptography, privacy
- You Are What You Measure (by) · · videos, metrics
- What Is Design Thinking? (via) · · design
- Using a Muted Color Palette in Web Design (via) · · design, colors, color-palettes
- It’s Very Likely That… (by) · · html, semantics, buttons, modals
- Firefox May Soon Reject Cookie Prompts Automatically (by/via) · · cookies, legal, user-experience, mozilla, firefox
- Deno vs. Node: No One Is Ready for the Move (by/via) · · deno, nodejs, dependencies, comparisons
- Business Impacts of UI Design and UX Design (by/via) · · design, economics
- Answering “What ARIA Can I Use?” (by/via) · · accessibility, aria, user-agents, assistive-tech, screen-readers, support
- All About the Semantic Web (via) · · semantic-web, concepts
- A List of Programming Playgrounds (by) · · programming, link-lists, testing
- How to Name Design Tokens in a Design System (by/via) · · how-tos, design-tokens, design-systems, naming
- The Acronyms of Rendering on the Web (by) · · rendering, server-side-rendering, client-side-rendering, terminology
- Speeding Up the JavaScript Ecosystem—Draft-js Emoji Plugin (by) · · javascript, performance, plugins
- Serving Less Data to Users With the “prefers-reduced-data” Media Query (by) · · css, media-queries, performance, sustainability
- My Favorite Courses to Learn Microservices in Depth (by) · · courses, training, microservices, link-lists
- Exploring “:has()” Again (by/via) · · css, selectors
- Angular 16 Is Huge (by/via) · · angular
- 3 Common IA Mistakes (That Are All Due to Low Information Scent) (via) · · information-architecture, usability, mistakes
- Lessons of Design (by/via) · · lessons, design
- Dissecting npm Malware: Five Packages and Their Evil Install Scripts (by/via) · · npm, security
- 9 Bogus Reasons Why Some Designers Claim UX Research Is a Waste (via) · · design, user-experience, research
- Web Accessibility: A Reference to Creating Inclusive Websites (via) · · accessibility
- The “details” Element Is Amazing (by) · · html
- Ping Animation With Minimal CSS (by) · · css, animations
- Consume Web Streams From OpenAI Using Vanilla JavaScript (by) · · videos, data-fetching, streaming, ai, javascript
- 4 Ways to Create an Enum in JavaScript (by) · · javascript
- Embracing AI as a Material for Design (by/via) · · design, ai, content
- 11ty and Lit, a Match Made in Heaven for Simple Sites · · eleventy, web-components
- What’s New in DevTools: Debugging, Testing, and CSS (Chrome 110–112) (by/via) · · videos, dev-tools, user-agents, google, chrome, debugging, testing, css
- The Pros and Cons of Different UI Automation Test Tools—Puppeteer (by) · · automation, testing, puppeteer
- Costly CSS Properties and How to Optimize Them (by) · · css, performance, optimization
- Breaking Down Accessibility Barriers: Top 4 Challenges With Screen Magnifiers (by/via) · · accessibility, assistive-tech, screen-magnification
- A History of the World Wide Web From 1989 to the Present Day (via) · · history, web
- 10 Best Sorting Algorithms Explained (via) · · sorting, algorithms
- Transparent Video for the Web in 2023 (by) · · multimedia, transparency
- Solving the CSS Layout and Source Order Disconnect (by/via) · · css, layout
- Shifting Left, or: Making Accessibility Easier by Doing It Earlier (by) · · videos, slides, accessibility, processes
- Passkeys: What the Heck and Why? (by/via) · · security, passwords
- How to Work With Dates and Times in Vanilla JavaScript (by) · · how-tos, javascript
- CSS: Tricks for Targeting Elements With CSS (by) · · css, selectors, tips-and-tricks
- Angular Is Back With a Vengeance (by/via) · · videos, angular
- Understanding CSS Preload and Other Resource Hints (by/via) · · css, performance, hints
- Advanced Figma Components Tips and Tricks: Little Gems We Love (by/via) · · figma, components, design, tips-and-tricks
- Expanding Grid Cards With View Transitions (by) · · css, grids, transitions
- Shallow vs. Deep Copying in JavaScript (by/via) · · javascript, comparisons
- HTML Accessibility API Mappings 1.0 (by+/via) · · html, accessibility, apis
- Firefox Rolls Out Total Cookie Protection by Default to More Users Worldwide (via) · · user-agents, mozilla, firefox, cookies, privacy
- Don’t Override Screen Reader Pronunciation (by) · · accessibility, user-agents, assistive-tech, screen-readers, pronunciation
- Accessibility in Design Systems: Building More Inclusive Products for a Better User Experience (via) · · videos, accessibility, design-systems, dei, user-experience
- Formulating Your Product Design North Star (aka Design Principles) (by/via) · · design, principles, processes
- What’s a Basic Use Case for Cascade Layers in CSS? (by) · · css, cascade, maintainability
- Trying Node.js Test Runner (by) · · nodejs, testing
- The Performance Golden Rule Revisited (by) · · performance, metrics
- Temporal Intervals Are Handy in MySQL (by) · · databases, mysql
- React, Visualized (via) · · introductions, react, visualization
- New HTML Element: “search” (by) · · html, semantics
- Document or Die: The Importance of Writing Things Down in Tech · · documentation, maintainability, link-lists
- Building Pagination in React With React Paginate (by/via) · · react, navigation, pagination
- Are [You] Confused Which Bundler You Should Use? Webpack vs. Parcel vs. Rollup (by) · · bundling, tooling, webpack, parcel, rollup, comparisons
- Why Astro Is My Favorite Framework (by) · · astro, frameworks
- CSS Text Balancing With “text-wrap: balance” (by) · · css, typography
- Becoming a Frontend Developer in 100 Days: A Step-by-Step Guide (by) · · guides, career, learning
- Choosing Humanity Over Automation (via) · · ai, design, automation
- What’s New in CSS? (by/via) · · slides, css
- Understanding Apache Web Server Configuration (by) · · servers, apache, configuration
- Mastering Yarn’s Lifecycle With Hooks (by) · · yarn, hooks
- Boost Your JavaScript With JSDoc Typing (by) · · javascript, typescript, documentation, jsdoc
- Stream File Uploads to S3 Object Storage and Save Money (by) · · aws, streaming, storage, economics
- The Pattern to Make Your Frontend Tests 10× Better (by) · · testing
- Programming-Language Popularity by GitHub Pull Requests (by) · · studies, research, programming, comparisons, github, javascript, typescript
- It’s Time to Learn OKLCH Color (by) · · colors, oklch, css
- DevTools: A Clever Overview of All Your CSS Code (by) · · user-agents, dev-tools, auditing, css, google, chrome
- Chasing Rainbows (by/via) · · accessibility, colors, color-blindness, user-experience
- Advancing Your Tech Skills (via) · · career, learning
- Frontend Developer Tries Tailwind for the First Time (by/via) · · videos, tailwind, css
- 10 CSS Animation Tips and Tricks (by) · · videos, css, animations, tips-and-tricks
- Unlocking the Power of Design Tokens to Create Dark Mode UI (by) · · design-tokens, dark-mode
- Establishing Metrics for Accessibility ROI (by) · · accessibility, metrics, economics
- 3 Methods for Scoped Styles in Web Components That Work Everywhere (by) · · web-components, css, scope, dom, shadow-dom, support