News and Tools for Frontend Development (12)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Business Impacts of UI Design and UX Design · · design, economics
- What Is Design Thinking? · · design
- You Are What You Measure · · videos, metrics
- Answering “What ARIA Can I Use?” · · accessibility, aria, user-agents, assistive-tech, screen-readers, support
- It’s Very Likely That… · · html, semantics, buttons, modals
- Exploring “:has()” Again · · css, selectors
- The Acronyms of Rendering on the Web · · rendering, server-side-rendering, client-side-rendering, terminology
- 3 Common IA Mistakes (That Are All Due to Low Information Scent) · · information-architecture, usability, mistakes
- My Favorite Courses to Learn Microservices in Depth · · courses, training, microservices, link-lists
- How to Name Design Tokens in a Design System · · how-tos, design-tokens, design-systems, naming
- Serving Less Data to Users With the “prefers-reduced-data” Media Query · · css, media-queries, performance, sustainability
- Speeding Up the JavaScript Ecosystem—Draft-js Emoji Plugin · · javascript, performance, plugins
- Angular 16 Is Huge · · angular
- Dissecting npm Malware: Five Packages and Their Evil Install Scripts · · npm, security
- Lessons of Design · · lessons, design
- 9 Bogus Reasons Why Some Designers Claim UX Research Is a Waste · · design, user-experience, research
- Web Accessibility: A Reference to Creating Inclusive Websites · · accessibility
- 4 Ways to Create an Enum in JavaScript · · javascript
- Ping Animation With Minimal CSS · · css, animations
- Consume Web Streams from OpenAI Using Vanilla JavaScript · · videos, data-fetching, streaming, ai, javascript
- The “details” Element Is Amazing · · html
- What’s New In DevTools: Debugging, Testing, and CSS (Chrome 110–112) · · videos, dev-tools, user-agents, google, chrome, debugging, testing, css
- A History of the World Wide Web from 1989 to the Present Day · · history, web
- 10 Best Sorting Algorithms Explained · · sorting, algorithms
- Embracing AI as a Material for Design · · design, ai, content
- Costly CSS Properties and How to Optimize Them · · css, performance, optimization
- The Pros and Cons of Different UI Automation Test Tools—Puppeteer · · automation, testing, puppeteer
- Breaking Down Accessibility Barriers: Top 4 Challenges With Screen Magnifiers · · accessibility, assistive-tech, screen-magnification
- Transparent Video for the Web in 2023 · · multimedia
- Passkeys: What the Heck and Why? · · security, passwords
- Solving the CSS Layout and Source Order Disconnect · · css, layout
- Angular Is Back With a Vengeance · · videos, angular
- Shifting Left, or: Making Accessibility Easier by Doing It Earlier · · videos, slides, accessibility, processes
- How to Work With Dates and Times in Vanilla JavaScript · · how-tos, javascript
- CSS: Tricks for Targeting Elements With CSS · · css, selectors, tips-and-tricks
- Shallow vs. Deep Copying in JavaScript · · javascript, comparisons
- Understanding CSS Preload and Other Resource Hints · · css, performance, hints
- HTML Accessibility API Mappings 1.0 · · html, accessibility, apis
- Expanding Grid Cards With View Transitions · · css, transitions
- Firefox Rolls Out Total Cookie Protection by Default to More Users Worldwide · · user-agents, mozilla, firefox, cookies, privacy
- Accessibility in Design Systems: Building More Inclusive Products for a Better User Experience · · videos, accessibility, design-systems, inclusion, user-experience
- Advanced Figma Components Tips and Tricks: Little Gems We Love · · figma, components, design, tips-and-tricks
- Don’t Override Screen Reader Pronunciation · · accessibility, user-agents, assistive-tech, screen-readers, pronunciation
- What’s a Basic Use Case for Cascade Layers in CSS? · · css, cascade, maintainability
- New HTML Element: “search” · · html, semantics
- Formulating Your Product Design North Star (aka Design Principles) · · design, principles, processes
- The Performance Golden Rule Revisited · · performance, metrics
- Trying Node.js Test Runner · · nodejs, testing
- Temporal Intervals Are Handy in MySQL · · databases, mysql
- Document or Die: The Importance of Writing Things Down in Tech · · documentation, maintainability, link-lists
- Building Pagination in React With React Paginate · · react, navigation, pagination
- React, Visualized · · introductions, react
- Why Astro Is My Favorite Framework · · astro, frameworks
- CSS Text Balancing With “text-wrap: balance” · · css, typography
- Becoming a Frontend Developer in 100 Days: A Step-by-Step Guide · · guides, career, learning
- What’s New in CSS? · · slides, css
- Choosing Humanity over Automation · · ai, design, automation
- Mastering Yarn’s Lifecycle With Hooks · · yarn, hooks
- Understanding Apache Web Server Configuration · · servers, apache, configuration
- Boost Your JavaScript With JSDoc Typing · · javascript, typescript, documentation, jsdoc
- DevTools: A Clever Overview of All Your CSS Code · · user-agents, dev-tools, auditing, css, google, chrome
- Chasing Rainbows · · accessibility, user-experience
- The Pattern to Make Your Frontend Tests 10× Better · · testing
- It’s Time to Learn OKLCH Color · · colors, oklch, css
- Stream File Uploads to S3 Object Storage and Save Money · · aws, streaming, storage, economics
- Programming-Language Popularity by GitHub Pull Requests · · studies, research, programming, comparisons, github, javascript, typescript
- Frontend Developer Tries Tailwind for the First Time · · videos, tailwind, css
- Establishing Metrics for Accessibility ROI · · accessibility, metrics, economics
- Unlocking the Power of Design Tokens to Create Dark Mode UI · · design-tokens, dark-mode
- 3 Methods for Scoped Styles in Web Components That Work Everywhere · · web-components, css, scope, dom, shadow-dom, support
- 10 CSS Animation Tips and Tricks · · videos, css, animations, tips-and-tricks
- Foundations: Accessible Names and Descriptions · · accessibility, naming, writing, aria
- Designing for Reduced Motion · · accessibility, animations
- Can You Create Beautiful Stroked Text in CSS? · · css, effects
- Observing CSS · · css, javascript, monitoring
- What’s New in WCAG 2.2? · · accessibility, wcag, standards
- Choosing a Name for Your Design System · · design-systems, naming
- The Alt Text War—SEO vs. Accessibility · · accessibility, seo, writing, alt-text, comparisons
- 7 Tips for Getting Started With Vue.js · · videos, vuejs, tips-and-tricks
- Release Notes for Safari Technology Preview 167 · · release-notes, user-agents, apple, safari
- 4 GitHub Alternatives for Code Repositories · · git, link-lists
- Code Explanation Using GitHub Copilot · · github, ai, learning
- What Is Semantic HTML? · · html, semantics
- New in Chrome 112 · · release-notes, user-agents, google, chrome
- What Makes a Good Screenshot? · · accessibility, images
- Testing Localhost on Multiple Devices · · testing, servers
- The Revenge of the Pop-Up · · user-experience, anti-patterns, pop-ups
- Accessibility for Designers: Where Do I Start? · · accessibility, design, link-lists
- Exposing Field Errors · · accessibility, forms, aria, assistive-tech, support
- How WebAssembly Is Accelerating New Web Functionality · · webassembly, functionality
- Safari Releases Are Development Hell · · user-agents, apple, safari, support
- Copy to Clipboard In JavaScript and React · · javascript, react
- What Is a Design System and Why Should You Use One? · · design-systems
- So, How Can We Measure UX? · · user-experience, metrics
- Five Pieces of Advice for More Accessible Websites · · accessibility, html
- A Small JavaScript Pattern I Enjoy Using · · javascript
- Quick Tip: Pull Data from an API into a Figma Layer · · tips-and-tricks, apis, figma, design
- A Color Wheel With Gradient · · css, colors, gradients, effects, tips-and-tricks
- Slow Start and Congestion Control (Browser Networking) · · performance, protocols, tcp
- JSON vs. XML With Douglas Crockford · · podcasts, interviews, json, xml, comparisons, history
- Modern HTML Email (Tables No Longer Required) · · html, email, tables
- Sticky Page Header Shadow on Scroll · · css, scrolling, shadows
- When I Get That Low Contrast Feeling, I Need Non-Textual Healing · · accessibility, contrast, colors
- Why Do They Ignore My Awesome Design Documentation? · · design, documentation
- The Future of Senior Developers in an AI-Driven World · · career, ai, code-completion
- 10 Ways to Hide Elements in CSS · · css, accessibility, performance
- 7 Tricks to Take the Performance of Your Website to the Moon · · performance, minification, tree-shaking, tips-and-tricks
- We Need Accessibility Action · · accessibility, web
- The Ultimate Guide to Automatic Accessibility Testing in CI/CD for React Apps · · guides, accessibility, testing, automation, ci-cd, react
- Folder Structure for Modern Web Applications · · architecture, web-apps
- New to the Web Platform in March · · release-notes, web-platform, user-agents, google, chrome, mozilla, firefox, apple, safari
- DevTools: Getting Data from DevTools into Your Code Editor · · dev-tools, user-agents
- Modern Web Development: Centering Divs in New Exciting Wrong Ways With AI · · videos, ai
- The Pros and Cons of Different UI Automation Test Tools—Playwright · · automation, testing, playwright
- Alternative Text in the Wild: 5 Alternative Text Examples · · accessibility, writing, examples
- A CSS Selector to Highlight Clickable Elements · · css, selectors
- Checkered Background Using Two Lines of Code in CSS · · backgrounds, css
- One in Two New npm Packages Is SEO Spam Right Now · · npm, seo
- What Are Source Maps? · · videos, debugging
- CSS Masking · · css, masking
- Why I Quit Being a Tech “Influencer” · · career
- From Burnout to Balance: Why Are So Many UX Designers Fatigued? · · career, productivity, user-experience, design
- Why JavaScript Is a Prototype-Based OOP · · javascript, programming
- XUL Layout Is Gone · · history, xul, user-agents, mozilla, firefox
- Using PHP Arrays: A Guide for Beginners · · guides, php, arrays
- Framework Popularity on Netlify · · frameworks, react, nextjs, gatsby, comparisons
- Usability Heuristics in Game Design · · usability, heuristics, design
- 6 Steps to Reduce the Carbon Footprint of Your Website · · sustainability
- HTML: Help Users to Download Files With the HTML “download” Attribute · · html
- How to Use Google Fonts and “font-display” · · how-tos, google, fonts, css
- Flutter Performance Optimization Techniques and Best Practices · · flutter, performance, optimization, best-practices
- The WebAIM Million · · studies, research, accessibility, metrics
- JavaScript Import Maps Are Now Supported Cross-Browser · · javascript, user-agents, support
- 10 AI Tools for Content Writing · · tooling, link-lists, content, writing, ai
- Guardrails for Better Accessibility Support in Frontend · · accessibility, quality, tooling
- Accessibility vs. Emojis · · accessibility, emoji, unicode, comparisons
- How to Split an Angular App into Micro-Frontend Apps · · how-tos, angular, micro-frontends, web-apps
- How to Review and Refactor Code With GPT-4 (and ChatGPT) · · how-tos, code-reviews, refactoring, ai, optimization
- Improving CSS Shapes With Trigonometric Functions · · css, functions
- In Praise of Vite · · vite
- TypeScript Function Types: A Beginner’s Guide · · guides, typescript, functions
- Connecting Dots of an Accessibility Audit · · accessibility, auditing
- File Uploads for the Web: File Uploads in Node and Nuxt · · file-handling, nodejs, nuxt
- Fighting Inter-Component HTML Bloat · · components, html, semantics, quality
- Defaulting on Single Page Applications (SPA) · · spas, javascript, performance
- Mastering the JavaScript “switch” Statement · · javascript
- CSS Creator Håkon Wium Lie Interview · · interviews, css
- Getting Started With HTML Tables · · html, tables, introductions
- AI-Enhanced Development Makes Me More Ambitious With My Projects · · ai, code-completion, productivity
- Function Overloading in TypeScript · · typescript, functions
- A Quick Guide to Reviewing a VPAT ACR · · accessibility, vpat-acr, conformance, auditing
- UX Principles for AI Products · · user-experience, principles, ai
- Using TypeScript Without Compilation · · typescript
- UX Basics: Study Guide · · guides, fundamentals, user-experience, training, link-lists
- CSS-Only Widgets Are Inaccessible · · accessibility, css
- Harnessing GPT-4 for Writing Assistance and Content Creation · · writing, content, social-media, ai
- Brief Introduction to Edge Computing · · introductions, edge-computing
- The “search” Element · · html, accessibility, semantics
- WYSIWYGPT · · ai, career
- Usability 101 · · videos, usability
- CSS “overflow” Property · · css
- The IL1 Typography Test · · videos, typography, legibility, user-experience, testing
- The State of JS Frameworks · · podcasts, javascript, frameworks, libraries
- The Causes of Unreliable Software · · complexity, maintainability
- The Landscape of npm Packages for CLI Apps · · nodejs, npm, dependencies, command-line
- What Is Strict Mode in React? · · react
- DevTools: Convert Network Requests to Code, or Even to a Terminal Command · · dev-tools, user-agents, network, command-line
- The Ultimate Guide to Image Optimisation · · guides, images, performance, compression, optimization
- What We’ve Learned About Designing for Accessibility from Our Users · · accessibility, design
- Everything You Wanted to Know About Video Storage APIs · · multimedia, storage, apis
- The Machines Won’t Save Your Design System · · design-systems, ai
- A Complete Visual Guide to Understanding the Node.js Event Loop · · guides, nodejs, events
- Circular Text With CSS? · · css
- Accessible but Never Boring: Rebranding the Wise Design System for Everyone II · · accessibility, design, design-systems
- 5 Lesser-Known Spacing Tips for Product Designers · · design, spacing
- Some Cross-Browser DevTools Features You Might Not Know · · dev-tools, user-agents, google, chrome, mozilla, firefox, apple, safari
- Certifications Should Be Hard · · accessibility, training, learning
- Automatic npm Publishing With GitHub Actions and npm Granular Tokens · · npm, github, automation
- What’s New in Eleventy 2: A Great SSG Just Got Better · · eleventy
- With or Without the JS Framework · · javascript, frameworks, career
- Annotating Designs for Accessibility · · videos, accessibility, design
- The Carbon Cost of Social Media · · sustainability, social-media
- That Time When SVG Almost Got Network Support for Raw Sockets · · svg, network, history
- Visually Hidden Content Is a Hack That Needs to Be Resolved, Not Enshrined · · accessibility, user-agents, assistive-tech, screen-readers, css
- How to Start a React Project in 2023 · · how-tos, react
- File Uploads for the Web: Upload Files With JavaScript · · file-handling, javascript
- When Is “:focus-visible” Visible? · · accessibility, css, selectors
- State of Node.js 2023 · · videos, nodejs
- 7 Ways Web Developers and UX Designers Can Collaborate · · collaboration, processes
- Why We Added package.json Support to Deno · · deno, support, nodejs, npm
- What Is Git Merge and How to Use It? · · git
- The End of Front-End Development · · visions, career, html
- The Intersection of Data Visualization and UX Design · · information-design, user-experience, design
- The Age of Average · · design
- Preventing Too-Short Final Lines of Text Blocks · · css, typography
- Regression Testing in the Agile Universe · · agile, processes, testing, regressions
- The Cost of Craft · · craft, quality, complexity, processes
- CSS Is Dead! · · css
- 5 Ways to Modernize Your Web Application · · web-apps, modernization, routing, micro-frontends, microservices, responsive-design, serverless, scaling
- The 5 Best Status Page Tools · · tooling, monitoring, alerting, link-lists
- Rich Harris Talks SvelteKit and What’s Next for Svelte · · interviews, svelte, sveltekit
- Using “forRoot()” and “forChild()” in Angular · · angular
- Laying Out a Print Book With CSS · · print, css
- Deep Dive into How Web Browsers Work (with Illustrations) · · user-agents, rendering
- Speeding Up the JavaScript Ecosystem—npm Scripts · · javascript, performance, bundling, npm
- Introduction to Flutter: Getting Started With Cross-Platform Development · · introductions, flutter
- Design System Guide · · guides, design-systems, link-lists
- Unexpected Moments of JavaScript That Will Challenge Your Understanding of the Language · · javascript
- How to Stop a React Component from Rendering · · how-tos, react, components, client-side-rendering
- DevTools: Tricks for Copying the Styling from Any Website · · dev-tools, css, user-agents, google, chrome
- Foundations: Pointer Gestures · · accessibility, usability
- Retro-Specifying Fetch/Performance · · standards, apis, data-fetching
- Hijacking Screenreaders With CSS · · videos, accessibility, user-agents, assistive-tech, screen-readers, css
- How Screen Readers Read Special Characters: An Update · · accessibility, user-agents, assistive-tech, screen-readers, support, unicode
- Everything You Need to Know About the Updated React Docs · · react, documentation
- How to Use “v-model” With Form Inputs in Vue · · how-tos, vuejs, forms
- The Problem With React · · react
- 5 Tips for New Prototypers · · videos, prototyping, tips-and-tricks
- Cryptographically Protecting Your SPA · · spas, security, cryptography
- It’s About Time CAPTCHAs Become Accessible · · accessibility, captcha
- Accessibility Beyond Code Compliance · · accessibility, compliance
- Accessibility and Design Systems: The Deep-Dive Q&A · · interviews, accessibility, design-systems
- DevTools: Faster Searching in DevTools With CSS Selectors · · dev-tools, css, selectors, user-agents, google, chrome
- Internationalization in Next.js 13 With React Server Components · · internationalization, nextjs, react, components
- Tracking the Fake GitHub Star Black Market With Dagster, dbt, and BigQuery · · github, open-source, community
- Versioning Design Tokens · · design-tokens, versioning, maintainability
- Scraping Single-Page Applications With Playwright · · scraping, spas, playwright
- The Ultimate Guide to Micro-Content · · guides, content, microcontent
- JavaScript Polyfills · · javascript, polyfills
- Future CSS: Anchor Positioning · · css, experiments
- JavaScript for Beginners: Data Structures · · javascript, arrays, objects
- Git Fundamentals, a Complete Guide · · guides, git, fundamentals
- The H1 Conundrum: Understanding the Challenges of Heading Level One · · accessibility, semantics, headings, html
- Cool Frontend Arts of Local-First: Storage, Sync, Conflicts · · offline, storage, web-apps
- 6 CSS Snippets Every Front-End Developer Should Know in 2023 · · css
- Modern Font Stacks · · websites, fonts, typography
- What Leonardo Da Vinci Can Teach Us About Web Design · · design, layout
- JavaScript: Automatically Remove an Event Listener After It Has Executed · · javascript, events
- Fix Color Contrast—Web Accessibility for Text and UI Design · · accessibility, colors, contrast
- Circling Back on Design and Everything Else · · design
- How Design Is Governance · · design
- Progressively Enhancing a Table With a Web Component · · html, javascript, tables, web-components, progressive-enhancement
- Advice from a Software Engineer With 8 Years of Experience · · career
- Accepting Design · · design
- Useful Tips and Tricks for Laravel · · tips-and-tricks, laravel
- TCP Echo Server for Node.js · · servers, nodejs, tcp
- Best Practices for Structuring Accessibility Testing · · accessibility, testing, best-practices
- Why Aren’t Logical Properties Taking Over Everything? · · css, logical-properties, internationalization
- Making Calendars With Accessibility and Internationalization in Mind · · functionality, accessibility, internationalization
- The Ternary Operator in JavaScript · · javascript, operators