News and Tools for Frontend Development (7)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Using ChatGPT for Smart Truncation in Responsive Web Design · · content, responsive-design, ai, html
- Embedding Accessibility into Code Reviews · · videos, accessibility, code-reviews, processes
- When to Use CSS “text-wrap: balance;” vs. “text-wrap: pretty;” · · css, typography, comparisons
- Using ChatGPT, GitHub Copilot, and Phind to Generate Tailwind Config for Width Classes · · ai, github, tailwind, configuration
- What Should Be the Contrast Level of Inactive Buttons? · · accessibility, buttons, contrast, colors
- Web Accessibility Strategies for Non-Accessible Projects · · videos, accessibility, strategies, processes
- Prodding Firefox to Update “:has()” Selection · · css, selectors, mozilla, firefox, support
- How to Collaborate on Pull Requests for Beginners · · how-tos, code-reviews, collaboration
- The Need for Recognition in Open Source · · open-source, culture, communication, community
- Don’t Do It on Frontend or… Frontend Good Practices for Devs · · best-practices, quality, maintainability, documentation
- I Asked People to Make This Simple Layout and Was Surprised by the Results · · videos, css, layout, comparisons
- Why Unique ID Attributes Matter · · accessibility, html, conformance
- How to Map a Number Between Two Ranges · · how-tos, javascript, math
- Storybook 7.5 · · storybook, release-notes
- Do We Need State Management in Angular? · · angular, state-management
- The Inverse Value of UX and Art · · user-experience, art
- Does the HTML “hr” (Horizontal Rule) Benefit Screen Reader Users? · · html, accessibility, user-agents, assistive-tech, screen-readers
- On the Uniting Power of a Commitment to HTML Conformance · · html, conformance, quality, community, web
- The New “light-dark()” Function to Switch Theme Color in CSS · · css, functions, dark-mode
- How to Animate Along a Path in CSS · · how-tos, css, animations
- Release Notes for Safari Technology Preview 181 · · release-notes, user-agents, apple, safari
- Solid.js Creator Outlines Options to Reduce JavaScript Code · · javascript, performance
- How to Use SEO to Build Long-Term Brand Recognition and Visibility · · how-tos, seo, branding
- Burn Your Toast · · notifications, accessibility, usability
- The Three Cs: Concatenate, Compress, Cache · · performance, compression, caching
- A Couple of New CSS Functions I’d Never Heard Of · · css, functions
- Transition Animations: A Practical Guide · · guides, transitions, animations, interaction-design
- React Design Patterns · · react, software-design-patterns
- The Nuances of Base64 Encoding Strings in JavaScript · · javascript, encoding
- Start Styling Your “console.log()” Messages in DevTools · · videos, console, user-agents, dev-tools
- Node.js 21 Available Now! · · nodejs, release-notes
- Design System Documentation Sucks—How We Can Do Better · · design-systems, documentation
- Synchronizing Figma Variables With Design Tokens · · figma, design-tokens, automation
- Common Vue.js Development Mistakes and How to Avoid Them · · vuejs, mistakes
- 2.4.11: Adversarial Conformance · · accessibility, wcag, compliance
- Ensuring Negative Numbers Are Available for Everyone · · accessibility, testing, math
- “JavaScript Is Weird” as a Compressor · · javascript, compression
- Scroll-Driven State Transfer · · css, scrolling
- Link Colors and the Rule of Tincture · · links, colors
- CSS Findings from Photoshop Web Version · · html, css, case-studies
- Bubble Sort… in Pure CSS? (No JS) · · css, algorithms, sorting
- How to Style Element Descendants With Tailwind CSS · · how-tos, tailwind
- What’s New in CSS? · · css, transcripts
- 44 React Frontend Interview Questions · · interviewing, react
- Organizing Multiple Git Identities · · git
- How We Optimized Package Imports in Next.js · · nextjs, dependencies, optimization, case-studies
- The Negative Impact of Mobile-First Web Design on Desktop · · design, mobile-first, desktop, usability, information-design
- Forget Twitter: WordPress.com Blogs Can Now Connect to Mastodon · · social-media, twitter, wordpress, mastodon
- Button Labels: Is “OK” Ok? · · forms, buttons, writing, usability
- Honor User’s Transparency Setting in CSS · · css, accessibility, user-experience
- Scrollbars Are Becoming a Problem · · scrolling, usability, accessibility
- Digital Accessibility Blogs and Newsletters · · accessibility, link-lists
- Unpopular Opinion: It’s Harder Than Ever to Be a Good Software Engineer · · career, quality
- Why Companies Kill Great Design · · design
- Using CSS Custom Properties Like This Is a Waste · · videos, css, custom-properties
- Quick Tip: Creating Polymorphic Components in TypeScript · · tips-and-tricks, typescript, components
- Astro 3.3: Picture Component · · astro, release-notes
- We Need Web Progress, Not Pessimism · · web-platform, principles
- You Can’t Get Faster Than No Build · · building, processes
- Why Naming Is #1 Skill for Writing Clean Code · · naming, conventions, best-practices
- Let’s Prototype a JavaScript JIT Compiler · · videos, javascript, compiling, prototyping
- Introduction to Web Sustainability · · introductions, sustainability
- CSS Relative Color Syntax · · css, colors, functions
- Preventing and Debugging Memory Leaks in Node.js · · debugging, memory, nodejs
- Styling External Links With Attribute Selectors · · links, css, selectors
- Designing for All: The Basic Principles of Web Accessibility · · accessibility, fundamentals, principles, aria, tooling
- Skip Links on ikea.com · · accessibility, links, case-studies
- Greenwashing and the COP28 Website · · sustainability, case-studies
- Local HTTPS for Next.js 13.5 · · security, testing, http, nextjs
- AI Could Soon Need as Much Electricity as an Entire Country · · ai, sustainability
- 5 Best Practices for Preventing Chaos in Tailwind CSS · · best-practices, tailwind
- The Global “innerWidth” and “innerHeight” Properties Return the Width and Height of the Layout Viewport · · javascript, interoperability, webkit
- The Selected Date Must Be Within the Last 10 Years · · html, forms, validation
- Hashnode’s Overall Architecture · · architecture, case-studies
- The Future of CSS: Easy Light-Dark Mode Color Switching With “light-dark()” · · css, functions, dark-mode
- Obligatory WCAG 2.2 Launch Post · · accessibility, wcag, standards
- Why the Internet Isn’t Fun Anymore · · web, social-media
- CSS-Only Scroll-Driven Animation and Other Impossible Things · · videos, css, animations
- Inclusivity in the Digital Age: The Importance of Accessibility Advocacy · · accessibility, inclusion, communication
- Extending the Properties of an HTML Element in TypeScript · · html, components, typescript
- Adding Search to an Eleventy Site Without Client-Side JavaScript · · eleventy, serverless, functionality, searching
- The Hidden Performance Cost of Node.js and GraphQL · · performance, nodejs, graphql
- Speeding Up the JavaScript Ecosystem—the Barrel File Debacle · · javascript, performance, architecture
- CSS 3D Text Effects · · css, effects
- Naming Variables in CSS · · css, custom-properties, naming
- Welcome WCAG 2.2 and Goodbye Success Criterion 4.1.1 “Parsing” · · accessibility, wcag, conformance
- Don’t Use Fixed CSS “height” or “width” on Buttons, Links, or Any Other Text Containers · · css, accessibility, usability, buttons, links
- Table of Contents: The Ultimate Design Guide · · guides, navigation, design, usability
- Demystifying WCAG 2.2 · · accessibility, wcag, standards
- How Did You Switch from JavaScript to TypeScript? · · discussions, javascript, typescript, migration
- WCAG 2.2 and Validation · · accessibility, wcag, conformance, quality
- Writing Accessible Form Messages · · accessibility, writing, forms
- Which Is the Best Image Format for Your Website? · · images, comparisons, jpeg, png, gif, webp, avif
- Quick Tip: Decorators in TypeScript · · tips-and-tricks, typescript
- The Nonvisual Website · · websites, accessibility
- An Anchored Navbar Solution · · html, css, navigation
- What’s New in WCAG 2.2 · · accessibility, wcag, standards, release-notes
- Intopia Launches WCAG 2.2 Map · · accessibility, wcag, standards
- GitHub Actions: “NODE_OPTIONS” Is Now Restricted from “GITHUB_ENV” · · github, automation, nodejs
- When to Nest CSS · · css, nesting
- WCAG 2.2 Is Now a W3C Recommendation · · accessibility, wcag, standards
- WCAG 2.2 Is Now a Published Web Standard · · accessibility, wcag, standards
- What Happened to Separation of Concerns in Frontend Development · · maintainability, principles, css, frameworks, history
- React Micro-Frontends Using Vite · · micro-frontends, react, vite
- Hey Designers, They’re Gaslighting You · · design, career
- Web Content Accessibility Guidelines (WCAG) 2.2 · · accessibility, guidelines, wcag, standards
- It’s Time to Rethink the Americans With Disabilities Act · · accessibility, legal
- Chrome Now Shows Each Active Tab’s Memory Usage · · memory, user-agents, google, chrome
- Whatever Happened to the Zend Framework · · frameworks, php, history
- Let’s Create a Filter Table Component in Vue · · videos, tables, components, vuejs
- Career Growth After 35: What Awaits Programmers? · · discussions, career
- Accessibility vs. Inclusive Design · · videos, accessibility, inclusion, comparisons
- Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule · · css, selectors, scope
- Still No CSS Reset · · css, resetting
- The Power of Type Safety in TypeScript · · typescript, type-safety
- An Interactive Intro to CRDTs · · introductions, javascript, data-types
- Release Notes for Safari Technology Preview 180 · · release-notes, user-agents, apple, safari
- Deploy and Test AWS Step Functions With Node.js · · nodejs, aws, functions, deploying, testing
- The Problem With WordPress Is Positioning, Not Plugins · · wordpress
- Being Picky About a CSS Reset for Fun and Pleasure · · css, resetting
- Your Website Does Not Need JavaScript · · videos, javascript, support
- How to Be an Accessibility Ally · · how-tos, accessibility, community
- Get Ready for Interop 2024 · · interoperability, web-platform
- Return to Office Is Bullshit and Everyone Knows It · · processes, career
- The Most Minimal Valid HTML Document · · html, minimalism, conformance, templates
- Crawlers · · robotstxt, ai
- Have You Seen These Weird Image Tag Issues? · · videos, css
- Demystifying CSS Container Queries · · videos, css, container-queries
- Nine Things Automated Accessibility Tests Can’t Test · · accessibility, testing, automation
- The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses) · · unicode, encoding, standards
- All the Ways to Turn an Array into an Object in Javascript · · javascript, arrays, objects
- TypeScript Monorepo With npm Workspaces · · monorepos, typescript, npm, architecture
- The Myth of Infinite Data Growth · · sustainability
- Making a Website Is for Everyone · · inclusion, community, career
- In-Page Links for Content Navigation · · navigation, links, usability
- The 3 Secrets to Font Pairing · · typography, fonts, design
- Monitoring a Kubernetes Application With Prometheus, Grafana, and Loki · · videos, monitoring, kubernetes
- Test Assertion Styles in JavaScript · · javascript, testing
- Understanding the CSS Auto-Resizing Textarea Trick · · css, forms
- Managing and Mitigating Design Debt: A Solo UX Designer’s Guide · · guides, design-debt, user-experience
- Re-Creating the Pop-Out Hover Effect With Modern CSS · · css, effects
- Four Reasons to Give WCAG AAA a Second Look · · accessibility, wcag, standards
- Node v20.8.0 · · release-notes, nodejs
- 20+ Tools for Node.js Development in 2023 · · nodejs, tooling, link-lists
- How I Deployed My Website as a Docker Container · · deploying, docker
- Naming Things Needn’t Be Hard · · websites, naming
- Crafting Future-Ready Experiences: The Power of Progressive Web Apps (PWAs) and Offline-First Design · · web-apps, offline
- Characteristics of Code Quality · · research, quality
- Exploring Enhanced Patterns in WordPress 6.3 · · wordpress
- Easy Dark Mode With “color-scheme” · · slides, dark-mode, html, css, accessibility
- A Socket API That Works Across JavaScript Runtimes—Announcing a WinterCG Spec and Node.js Implementation of “connect()” · · javascript, runtimes, apis
- The Ultimate Low-Quality Image Placeholder Technique · · performance, images, web-vitals
- CSS Nesting and the Cascade · · css, nesting, cascade
- A Comprehensive Guide to the Dangers of Regular Expressions in JavaScript · · guides, javascript, security, regex
- 5 Pillars of Responsible Generative AI: A Code of Ethics for the Future · · ai, ethics
- CSS Terminology Demystified · · videos, css, terminology
- An Introduction to Web Components · · introductions, web-components
- Best Practices for Securing Node.js Applications in Production · · best-practices, security, nodejs
- The Cost of Obsessing over Design Perfection · · design, processes, career
- Honey, I Shrunk the npm Package · · dependencies, npm, compression
- The Saga of the Closure Compiler, and Why TypeScript Won · · javascript, compiling, typescript, history
- Stop Using JS for That: Moving Features to CSS and HTML · · videos, javascript, css, html
- Frontend Monitoring: Strategies, Best Practices, Tools, and More · · monitoring, alerting, strategies, best-practices
- SSH Keys Stolen by Stream of Malicious PyPI and npm Packages · · security, ssh, dependencies, npm
- How to Make the Case for Design Systems · · how-tos, design-systems
- Real AI Solutions for Accessibility Challenges · · accessibility, ai
- Form Accessibility and Usability Beyond the Basics · · forms, accessibility, usability
- Top 5 ARIA Implementation Errors · · accessibility, aria, errors
- Overlays: Just Another Disability Dongle · · accessibility, overlays
- No More 404 · · link-rot, user-experience, quality, automation
- npm Provenance General Availability · · github, npm, provenance, security
- 8 More Micro Tips for Remarkably Better Typography · · typography, tips-and-tricks, legibility, readability
- Taming Tailwind · · tailwind, optimization
- Textareas With Auto-Increasing Height Using CSS · · css, forms
- The Future of Web Design: Emerging AI Technologies and Trends · · design, visions, trends, ai
- The Illusion of Developer “Productivity” Opens the Door to Snake Oil · · productivity, metrics
- Why HTTP/3 Is Eating the World · · http, protocols
- How Mastodon Handles Images and Web Previews · · social-media, mastodon, open-graph, metadata, images, html
- Understanding Puppeteer Headless · · puppeteer, automation, testing, headless
- What Are Accessibility Overlays? · · videos, accessibility, overlays
- HTML Popover, Videos and “display:blackhole” · · html, pop-overs, videos
- Accessibility Is Easy… Except for When It Isn’t · · videos, accessibility
- Misconceptions Can Kill Accessibility Momentum · · accessibility, html, processes
- Token Based Authentication With Fastify, JWT, and TypeScript · · authentication, json-web-tokens, typescript
- State of HTML 2023 · · surveys, html
- GitHub Actions Could Be So Much Better · · github, ci-cd, automation
- Upgrading Frontend Dependencies With Confidence · · dependencies, maintenance, testing, regressions, playwright
- Responsive Type Scales With Composable CSS Utilities · · css, responsive-design, typography
- How to Build Trust With Others by Organizing Your Figma Files · · how-tos, figma, conventions, collaboration
- How to Escape CSS Selectors in JavaScript · · how-tos, css, selectors, javascript, escaping
- The Path to Awesome CSS Easing With the “linear()” Function · · css, functions, animations
- Open Source Trends to Look for in 2024 · · open-source, trends, visions, ai, security
- TypeScript Origins: The Documentary · · videos, typescript, history
- Native Mobile Accessibility Testing · · videos, accessibility, testing, mobile
- The WebP 0-Day · · security, webp, google, apple
- The Design System Ecosystem · · design-systems, design-tokens
- What Is Strict Mode in JavaScript? · · javascript
- What Makes an Accessible Date Picker? Is It Even Possible? · · videos, accessibility, html
- Unlocking a World of Accessibility: How Internationalization Is the Key · · videos, accessibility, internationalization, localization
- Save Our World With Progressive Enhancement and Accessibility · · videos, accessibility, progressive-enhancement
- Accessible Web Components? · · videos, web-components, accessibility
- Supercharge Your Repository With Code Owners · · maintenance, code-reviews, processes
- The Character Encoding Cheat Sheet for JS Developers · · encoding, unicode, cheat-sheets, javascript
- Speeding Up the JavaScript Ecosystem—Polyfills Gone Rogue · · javascript, performance, polyfills
- Developers Talking About Code Quality · · studies, research, quality, readability
- CSS Findings From The Threads App II · · css, case-studies
- Introducing Runes · · svelte
- The Psychology of Web Performance · · videos, performance
- We are Chrome for Developers · · user-agents, google, chrome, chromium, community, open-source, history
- Building a Core Accessibility Team: The Keys to the Kingdom · · accessibility, leadership, processes
- What Can You Do With “data” Attributes? · · html, javascript
- How to Use the New “<search>” Element With WordPress · · how-tos, html, wordpress
- How to Make Forms in Angular Reusable · · videos, how-tos, angular, forms, maintainability
- Release Notes for Safari Technology Preview 179 · · release-notes, user-agents, apple, safari
- Experimenting With Measuring Soft Navigations · · performance, web-vitals, navigation, experiments, metrics
- Bun vs. Node.js: Everything You Need to Know · · bun, nodejs, comparisons
- What an Economist Article Says About Website Accessibility and Lawsuits · · accessibility, legal
- Get All That Network Activity Under Control With Priority Hints · · network, hints, performance
- Better User and Developer Experience With htmx · · videos, htmx
- Git: Don’t Create .gitkeep Files, Use .gitignore Instead · · git
- Node v20.7.0 · · release-notes, nodejs
- One Thing Nobody Explained to You About TypeScript · · typescript, configuration
- Arrow Functions vs. Traditional Functions in JavaScript · · videos, javascript, functions, comparisons
- Understanding the JavaScript Modulo Operator · · javascript, math
- Managing Design Debt: Strategies for Sustainable User Experience · · design-debt, user-experience, strategies
- 1-Minute CSS Tip: Accent Colors · · tips-and-tricks, css, forms
- WebKit Features in Safari 17.0 · · release-notes, user-agents, apple, safari, webkit
- A (More) Modern CSS Reset · · css, resetting
- First Steps to an Accessible Website—Skip Links · · accessibility, links
- Accessibility and Inclusivity: Study Guide · · guides, accessibility, inclusion, link-lists
- Sustainability and Tech and Us · · sustainability, performance, minimalism, principles
- Why Not React? · · react
- Expanding Your Touch Targets · · accessibility, usability, user-experience
- The JS Community on Twitter Is Dead · · social-media, community, javascript
- Expert CSS: The CPU Hack · · css, custom-properties
- How to Make a Strong Case for Accessibility · · how-tos, accessibility, communication
- Bun Hype: How We Learned Nothing from Yarn · · bun, yarn, dependencies, history
- Solved by CSS Scroll-Driven Animations: Detect If an Element Can Scroll or Not · · css, scrolling, animations
- Writing Clean Code: Best Practices and Principles · · javascript, best-practices, principles, conventions, formatting, maintainability
- Revealing Images With CSS Mask Animations · · css, animations, techniques
- What Makes Some Interruptions More Disruptive Than Others? · · productivity, efficiency, career
- Whataboutism · · accessibility
- Securing Your Node.js Apps by Analyzing Real-World Command Injection Examples · · nodejs, security, history, examples
- Incremental Static Regeneration for Angular · · angular, incremental-static-regeneration
- JavaScript Is Getting Array Grouping Methods · · javascript, arrays
- The 10 Tools I Install on Every New Mac I Get · · tooling, apple, link-lists
- The 5 Principles of Unit Testing · · principles, testing, quality
- v0.dev · · websites, components, tooling, ai, react, tailwind
- View Transition Debugging · · videos, transitions, apis, debugging
- The 10ish Tools I Install on Every New Mac I Get · · tooling, apple, link-lists