News and Tools for Frontend Development (8)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Why Is Creativity So Blurry, and Am I Creative? · · creativity, design, career
- How Custom Property Values Are Computed · · css, custom-properties
- Submit Your Proposals for Interop 2024 · · interoperability, web-platform, support
- Why I Quit Open Source · · open-source, community, career
- Use Cases for IIFEs · · javascript
- Documentation Is a Living Thing: How We Talk Informs What We Make · · documentation, communication, collaboration
- Getting Started With CSS in JS · · introductions, css-in-js
- Multi-Page Web Apps · · web-apps, mpas, user-experience
- Why Drupal 10 · · videos, drupal
- I Think I Kind of Hate Lazy Loading · · performance, lazy-loading
- Nuclear Anchored Sidenotes · · css, experiments
- Stop Lazy Loading Product and Hero Images · · performance, lazy-loading, images
- The Cult of Productivity · · productivity, efficiency, career
- Limitations of Scoped CSS · · css, scope
- From Silos to Design Systems · · design-systems, processes, case-studies
- Changes and Additions in Pointer Events Level 3 · · videos, transcripts, standards, events
- State of Web Accessibility, ARIA in HTML, and Missing UI Patterns · · podcasts, accessibility, aria, html
- The Real Value of Tokens · · design, design-tokens
- What Is Functional Testing? Definition, Key Concepts, and Types · · testing, terminology, concepts
- Gradients, Blend Modes, and a Really Cool Hover Effect · · css, effects, gradients
- JPEG and EXIF Data Manipulation in JavaScript · · jpeg, metadata, javascript
- Cool Tools · · tooling, link-lists
- Discover Bun—a Faster, Modern JavaScript Runtime · · bun, javascript, runtimes
- Medium vs. DEV vs. Hashnode vs. Hackernoon · · writing, community, productivity, comparisons
- Rewriting Digital Content for Brevity · · writing, content, refactoring, tips-and-tricks
- Creating Dynamic README.md File · · readme, github
- Why Your Design System Needs a Component Process · · design-systems, components, processes
- Running a Playwright Script on AWS Lambda · · playwright, automation, aws
- How I Approach and Structure Enterprise Frontend Applications After 4 Years of Using Next.js · · architecture, conventions, nextjs
- Bun, Javascript, and TCO · · bun, javascript, optimization
- Bun 1.0 · · bun, release-notes
- The Dangers of Deceptive Design Patterns (and How to Avoid Them) · · user-experience, dark-patterns
- JavaScript WTF: Why Does “every()” Return “true” for Empty Arrays? · · javascript
- A New Method to Validate URLs in JavaScript · · javascript, validation, urls
- CSS “display” Is a Multi-Keyword Property? · · videos, css
- CSS Lobotomized Owl Selector: A Modern Guide · · css, selectors, guides, history
- From Data-Driven to Decision-Driven · · strategies, product-management, metrics
- The “Array.prototype.every()” Method Always Returns “true” for an Empty Array · · javascript, arrays
- The New Google Fonts: Find What You’re Looking For · · google, fonts
- Web Components Accessibility FAQ · · accessibility, web-components
- Why Are We Not Still Using Tables-for-Layout? · · css, techniques, tables
- WOFF Has Left the Building · · fonts, typography, css, support
- Delay, Sleep, Pause, and Wait in JavaScript · · javascript
- Building a Real-Time Chat With Websockets, Novel, and Clerk · · communication, vite, react, nodejs, express, websocket
- Gulp vs. Webpack—What Is Better: Using Webpack or Gulp.js? · · gulp, webpack, comparisons
- GoDaddy Retires Media Temple Brand · · domains, hosting
- Is AI the Silver Bullet of Accessibility? · · accessibility, ai
- Long Live the Test Pyramid · · testing, quality, maintainability
- Making Sense of React Server Components · · react, components
- Using Labeled Loops in JavaScript · · javascript
- Four Common Types of Code Coverage · · testing, code-coverage
- Turbo 8 Is Dropping TypeScript · · hotwire, release-notes, typescript
- Release Notes for Safari Technology Preview 178 · · release-notes, user-agents, apple, safari
- Equivalent Experience Can Cut Both Ways · · accessibility, user-experience
- Essential Metrics for Click Testing · · user-experience, metrics, testing
- Node.js Includes Built-In Support for .env Files · · nodejs, support, environments
- Node.js vs. Deno vs. Bun: JavaScript Runtime Comparison · · nodejs, deno, bun, javascript, runtimes, comparisons
- Progressively Enhanced Form Validation: Custom Validation Messages · · forms, validation, progressive-enhancement, errors
- The Perpetual Circle of Accessibility · · accessibility, learning
- 8 Micro Tips for Remarkably Better Typography · · typography, tips-and-tricks, readability
- Browser Video Players Review · · html, multimedia, accessibility, user-agents, assistive-tech, screen-readers, support
- First, Do No Harm: Mistakes to Avoid in Creating Accessible User Experiences · · accessibility, user-experience, mistakes
- Web Components Don’t Need You · · web-components
- Node v20.6.0 · · release-notes, nodejs
- Understanding SSR, CSR, ISR, and SSG: A Comprehensive Guide · · guides, client-side-rendering, server-side-rendering, incremental-static-regeneration
- NODE_ENV Considered Harmful · · nodejs, environments
- Information Architecture vs. Sitemaps: What’s the Difference? · · information-architecture, sitemaps, comparisons
- A Wide View of Automated Testing in React Apps · · react, testing, automation
- On Productivity Metrics and Management Consultants · · productivity, metrics, leadership
- Style Is Consistent Constraint · · design, consistency
- Top Website Redesign Tips for 2023 · · redesign, tips-and-tricks
- Three Dimensions of Developer Productivity · · developer-experience, productivity, quality
- Clocks and Countdowns: Timing in CSS and JavaScript · · css, javascript
- Selecting the Scoping Root · · css, scope
- Small Details to Improve Your Website’s Experience · · user-experience, html, css, metadata
- Type Safe CSS Design Systems With “@ property” · · design-systems, css, type-safety
- Dialog Dilemmas and Modal Mischief: A Deep Dive into Popovers and How to Build Them · · slides, html, pop-overs, modals
- Build a GraphQL Gateway: Combine, Stitch, or Merge Any Datasource · · data-fetching, graphql
- How to Make Charts and Graphs More Accessible · · how-tos, information-design, images, accessibility
- Is Atomic Design Dead? · · videos, design
- Things That Jakob’s Law Is Not · · user-experience, usability, web
- Decoding WCAG: “Alternative for Time-Based Media” and “Media Alternative for Text” · · wcag, accessibility, multimedia
- Understanding Feature Flags: Improving Feature Management · · videos, feature-management, optimization
- An Introduction to the Laravel PHP Framework · · introductions, frameworks, laravel, php
- Case Study: Rebuilding TechCrunch Layout With Modern CSS · · case-studies, refactoring, css
- CSS Loaders · · websites, css, animations, effects
- Accessibility Theater · · accessibility
- Astro 3.0 · · astro, release-notes
- Memorization and Learning to Code · · learning, productivity, career, programming
- Using “rem” Doesn’t Make Your Website Responsive—Here’s Why · · responsive-design, units, css
- What Is Inclusion Anyways? Lessons from the Disabled Community · · slides, lessons, inclusion, accessibility
- What Is the View Transitions API and How to Use It With Meta Frameworks · · transitions, apis, frameworks, support
- Getting Started With htmx: A Comprehensive Guide for Beginners · · guides, introductions, htmx
- Web Sustainability Guidelines (WSG) 1.0 · · guidelines, sustainability
- Why Do I Have Layout Shift? · · videos, performance, web-vitals
- Let’s Make a Rubber Button With HTML, CSS and SVG · · buttons, html, css, svg
- Connected Grid Layout Animation · · css, layout, animations
- Tracking Errors in a Node.js Application · · monitoring, errors, nodejs
- Git Uncommit · · git, command-line
- Five Optimization and Performance Tools That Enhance Website User Experience · · user-experience, performance, optimization, tooling, link-lists
- Hover Triangles · · history, navigation
- Benchmarks [for 24 CSV Parsing Approaches] · · csv, parsing, performance, comparisons
- Building Accessibility into Your Company, Team, and Culture · · videos, accessibility, culture
- How to Implement SSL/TLS Pinning in Node.js · · how-tos, security, ssl, tls, nodejs
- Measuring Developer Productivity? A Response to McKinsey · · productivity, metrics
- Web Apps Are Better Than No Apps · · web-apps
- Announcing Cypress 13 With Test Replay · · cypress, release-notes
- Why Are Websites Embarrassing? · · quality, craft
- Falling for OKLCH: A Love Story of Color Spaces, Gamuts, and CSS · · colors, oklch, css
- How I Write Alt Text for Code Snippets on Social Media · · accessibility, alt-text, writing, social-media
- 8 Habits That Hold Back Your Developer Potential · · career, productivity
- From User Needs to User Dreams: Find the Future of Your Product · · user-experience, design, visions
- Six Reasons Not to Use React · · videos, react
- Realistic CSS Animations and the “linear()” Timing Function · · css, animations, functions
- Navigating Web Accessibility Litigation: Advice from a General Counsel · · accessibility, legal
- Single-Page Applications: Ember vs. Angular · · spas, emberjs, angular, comparisons
- Code Splitting in React: Optimize Performance by Splitting Your Code · · code-splitting, react, performance, optimization
- An Overview of Feature Flags · · overviews, feature-management, releasing, testing, product-management
- Web UX: Study Guide · · guides, training, user-experience, link-lists
- Dark Mode: How Users Think About It and Issues to Avoid · · dark-mode, user-experience, accessibility, best-practices
- State of CSS 2023 · · surveys, css
- Co-Authoring Git Commits · · git, collaboration
- Biases in Design: Hiding in Plain Sight in a World Full of Visuals · · design
- Accessible Navigation · · accessibility, navigation
- Package-Based Architecture—Let’s Deliver the Packages · · architecture, modules, flutter
- Visualizing Recursion With the Sierpinski Triangle · · algorithms, javascript
- Browser Automation With Puppeteer · · puppeteer, automation, testing
- Catching Errors Thrown from “connectedCallback” · · javascript, web-components, errors
- Introducing the 100-Year Plan: Secure Your Online Legacy for a Century · · wordpress, domains, visions
- Where to Put Focus When Deleting a Thing · · accessibility, focus
- Scope vs. Shadow DOM · · shadow-dom, dom, scope, css, javascript, comparisons
- WTF Is a Vector Database: A Beginner’s Guide · · guides, databases
- Announcing TypeScript 5.2 · · release-notes, typescript
- A More Intelligent and Secure Web · · videos, w3c, standards, web, web-platform, security
- European Accessibility Act: Article 32, and Why It Sucks · · accessibility, legal
- Main-ly Speaking · · accessibility, html
- TypeScript 5.3 First Look · · typescript
- What Is Alt Text and How to Write It · · accessibility, alt-text, writing
- Stakeholder Management for Design Systems · · design-systems, leadership, processes
- A Few Interesting Ways to Use CSS Shadows for More Than Depth · · css, shadows, effects
- The Art of UX Writing · · user-experience, writing, craft
- Use Web Components for What They’re Good At · · web-components
- Google August 2023 Broad Core Update Is Live—What We Are Seeing Now · · google, seo
- How Organisations Respond to Accessibility Monitoring · · accessibility, monitoring
- Pros and Cons of Using Shadow DOM and Style Encapsulation · · web-components, dom, shadow-dom
- To Test or Not to Test, a Technical Perspective · · testing, automation, best-practices
- How to Get 12% More LinkedIn Followers, Impressions, and Clicks—Practical Accessibility Tips and Tricks · · how-tos, accessibility, tips-and-tricks, social-media, best-practices
- Block the Bots That Feed “AI” Models by Scraping Your Website · · robotstxt, scraping, ai
- WebGlossary.info · · websites, learning, training, concepts, terminology
- Debugging Speculation Rules · · performance, debugging
- A Quick Introduction to CSS “@ scope” · · introductions, css, scope, cascade
- View Transitions Break Incremental Rendering · · transitions, apis, rendering
- No One Actually Wants Simplicity · · complexity, simplicity
- A Guide to Migrating from Webpack to Vite · · guides, migration, webpack, vite
- Release Notes for Safari Technology Preview 177 · · release-notes, user-agents, apple, safari
- Changes over the Last 25 Years of UX Research · · user-experience, research, history
- Two Important New Roles for UX Designers in the Era of AI · · user-experience, design, career, ai
- Can We Truly “Create” Value? · · user-experience, economics
- Bézier Curves · · animations
- Migrating from Color Styles to Local Variables in Figma · · figma, colors, migration
- Please Size Your Inline SVGs · · svg
- Patterns for Reactivity With Modern Vanilla JavaScript · · reactivity, javascript
- Progressively Enhanced Form Validation: Validating a Checkbox Group · · forms, validation, progressive-enhancement
- Writing Component Specs · · components, documentation, writing
- The Ideal Viewport Doesn’t Exist · · responsive-design, user-experience
- “We’re All Just Temporarily Abled” · · accessibility
- How to Make an Impact as a Developer Advocate · · how-tos, developer-relations, career
- 7 Reasons to Replace Advanced Search With Filters So Users Can Easily Find What They Need · · design, usability, user-experience, searching
- The Definitive Guide to Web Personalization: Strategies, Tools, and More to Know · · guides, personalization, strategies
- Combining “:placeholder-shown” and “:has” · · css, selectors, forms
- Let’s Build a Website Using XML · · xml, css
- Getting Started With SCSS—the CSS Preprocessor With Superpowers · · introductions, preprocessors, sass
- Why htmx Does Not Have a Build Step · · htmx, building
- Styling Links and Buttons · · links, buttons, css, usability
- Identifying, Fixing, and Preventing Cannibalization · · transcripts, seo
- Being “Polite” Does Not Ensure Access · · accessibility, legal
- How to Use Headless Chrome in Serverless Functions With a 50 MB Limit · · how-tos, headless, serverless, functions, user-agents, google, chrome
- Demystifying CORS: Understanding How Cross-Origin Resource Sharing Works · · security, cors, javascript
- React JSX · · react, jsx
- Adding a “Share to Mastodon” Link to Any Web Site · · social-media, links, mastodon, community, javascript
- Scroll Shadows With “animation-timeline” · · scrolling, shadows, css
- React Props: A Visual Guide · · guides, react, props
- A Beginner’s Guide to Using Pico CSS · · guides, pico
- “aria-haspopup” and Screen Readers · · aria, support, user-agents, assistive-tech, screen-readers
- Why Do Users Prefer Certain Design? Insights from the Landscape Theory · · design
- The New CSS Math: “round()” · · css, math
- Tabs Are Objectively Better Than Spaces · · formatting, developer-experience, accessibility
- How to Use the CSS “gap” Property · · how-tos, css, layout
- A Deep Dive into CSS “color-mix()” · · videos, css, colors
- XUL and HTML · · xul, html, comparisons
- A Better “setTimeout()” in JavaScript · · javascript
- Four New CSS Features for Smooth Entry and Exit Animations · · css, animations, user-agents, google, chrome, support
- Accessibility Is Not Inclusive Design or Disability Rights—It’s a Part of It · · accessibility, inclusion, legal
- Getting Started in a New Codebase · · onboarding, career, processes
- Towards HTTPS by Default · · user-agents, google, chrome, http, tls, security
- Thinking on Ways to Solve Adaptive Typography · · videos, typography, css, fonts
- CSS-Only Syntax Highlighting… With a Single Element and Gradients · · css, gradients
- BEM Methodology Is Not About CSS · · css, bem, conventions
- A Beginner’s Guide to SvelteKit · · guides, sveltekit
- A Guide to Optimizing JavaScript Files · · guides, javascript, performance, optimization, minification, compression
- Beginner’s Guide to Lists and How to Make Them Accessible · · guides, html, accessibility
- CSS Selectors: A Visual Guide · · guides, css, selectors
- How Layout Position Impacts Three Big Web Performance Levers · · performance, web-vitals
- An Intro to the “dialog” Element · · introductions, modals, html, semantics
- New in Chrome 116: Document Picture-in-Picture API, “notRestoredReasons” Property, and More · · release-notes, user-agents, google, chrome
- WebAssembly: Byte-Code of the Future · · webassembly
- Useable · · accessibility, community
- How to Test Mobile Apps on a Real Device Cloud · · how-tos, testing, mobile
- Progressively Enhanced Form Validation: Layering in JavaScript · · forms, validation, progressive-enhancement, javascript
- An “alt” Decision Tree Using Only “:has()” · · accessibility, css, alt-text
- Why Inclusive Language Matters in Coding · · inclusion, terminology, processes, documentation
- Testing Your Animation Refresh Rate With CSS Crimes? · · discussions, css, animations
- Unveiling the Power of Code-Splitting With Webpack for React and Redux Applications · · code-splitting, webpack, react, redux
- Debugging Rules: Understand the System · · debugging
- Write About What You Learn—It Pushes You to Understand Topics Better · · learning, writing, processes, career
- Sophisticated, Highly-Targeted Attacks Continue to Plague npm · · npm, security
- Balance in UX Design: Symmetry, Asymmetry, and Radial Balance · · videos, design, user-experience
- Designing Accessible Text over Images: Best Practices, Techniques, and Resources II · · accessibility, content, images, best-practices, techniques
- Nostalgia in UX Design · · user-experience, design, history
- WCAG 3.0: Further on up the Road · · accessibility, wcag, standards
- Browsers Barely Care What HTTP Status Code Your Web Pages Are Served With · · user-agents, http, support
- Create Direction-Aware Effects Using Modern CSS · · videos, css, internationalization
- Deprecating the “unload” Event · · user-agents, google, chrome, events, support
- OKLCH in CSS: Consistent, Accessible Color Palettes · · css, oklch, color-palettes, accessibility, consistency
- Google Tag Manager Performance: 9 Tips for Faster Site Speed · · google, tag-management, performance, tips-and-tricks
- A Beginner’s Guide to CSS Grid Layout · · guides, css, layout
- Progressively Enhanced HTML Accordion · · html, semantics, accessibility, progressive-enhancement
- An Introduction to the esbuild Bundler · · introductions, bundling, tooling
- It’s Time to End Damaging Website Design Practices That May Harm Your Users · · user-experience, usability, design, privacy, best-practices
- Node.js’s Config Hell Problem · · nodejs, configuration, maintainability, productivity, developer-experience
- Defining Test Cases and Priorities · · testing
- What Happens When You Select “count(*)” in MySQL · · databases, mysql
- An Update on Chrome Security Updates—Shipping Security Fixes to You Faster · · user-agents, google, chrome, security
- OpenAI Launches Web Crawling GPTBot, Sparking Blocking Effort by Website Owners and Creators · · ai, scraping, robotstxt
- 200 Web-Based, Must-Try Web Design and Development Tools · · link-lists, tooling
- UX Is Not Dead, It’s Just Misunderstood · · user-experience
- 8 Common Heading Questions · · accessibility, html, headings
- Definition of Done vs. Acceptance Criteria: What’s the Difference? · · videos, agile, processes, comparisons
- An Intro to State-Based UI With JavaScript · · introductions, javascript, state-management
- Micro Benevolences · · community, inclusion, communication, open-source
- An Introduction to htmx, the HTML-Focused Dynamic UI Library · · introductions, htmx
- User-Adaptive Interfaces With “AccentColor” · · forms, css
- My Experience Modernizing Packages to ESM · · dependencies, modernization, modules
- What Does It Mean for Web Browsers to Have a Baseline · · user-agents, web-platform, support, interoperability
- OpenAI’s ChatGPT New Web Crawler—GPTBot · · ai, seo
- Migrating My Blog from Gatsby to Astro · · migration, gatsby, astro
- Top 7 Things That Kill Developer Productivity · · productivity, technical-debt, code-reviews, documentation, processes, developer-experience
- Alt Text Hall of Fame · · websites, accessibility, writing, alt-text
- Some Tactics for Writing in Public · · writing, communication, community
- You Don’t Need a Mentor: Embracing the Power of Community · · career, community, learning