News and Tools for Frontend Development (19)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- A Beginner’s Guide to Chrome Tracing (by) · · guides, user-agents, google, chrome, performance
- Code Coverage With Storybook Test Runner (by/via) · · testing, code-coverage, storybook
- The Math Behind Nesting Rounded Corners (by/via) · · css, math, nesting
- Guide to the Best JavaScript Books for Beginners (via) · · guides, books, javascript, link-lists
- Conditionally Adaptive CSS—Browser Behavior That Might Improve Your Performance (by) · · css, responsive-design, performance
- CSS Animated Grid Layouts (by/via) · · css, layout, animations
- Animated Border Gradient (by) · · code-pens, css, animations, gradients, effects
- Building a Tooltip Component (by/via) · · components, html, css
- Performance (by+/via) · · studies, research, performance, web-vitals
- Structured Data (by+/via) · · studies, research, structured-data, semantics
- OKLCH in CSS: Why We Moved From RGB and HSL (by+/via) · · css, colors, oklch
- Detect System Theme Preference Change Using JavaScript (by) · · dark-mode, javascript
- Do You Really Understand CSS Radial Gradients? (by) · · css, gradients
- Don’t Be Afraid of Reverting Code in Git (by) · · git
- Is There Too Much CSS Now? (by/via) · · css
- What? How? Why? “@ layer” (by) · · css, cascade, at-rules
- Disruptive Design Patterns—an Uncharted Territory (by/via) · · design-patterns
- How We Improved React Loading Times by 70% With Next.js (via) · · react, performance, nextjs, case-studies
- Evolution of Manuals: UX Inspiration From History (via) · · user-experience, history, documentation
- Tailwind CSS v3.2: Revisiting My “Feature Creep” Warning (by) · · css, tailwind
- Twitter Reminds Us About Alt Text, but How Good Are We at It? (by/via) · · accessibility, writing, alt-text, twitter
- Things Strong Developers Do That Drive Their Team Crazy (by) · · communication, productivity
- New Git Guidelines: We Have Switched to Conventional Commits (by/via) · · guidelines, git, conventions
- JavaScript Shallow Copy—What Is a Shallow Copy? (by) · · javascript
- 53 UX Statistics to Know for 2023 (via) · · user-experience, research
- Let’s Talk About Web Components (by) · · web-components
- How to Set Up the New Google Auth in a React and Express App (by/via) · · how-tos, google, authentication, react, express
- CSS Is Awesome (by/via) · · videos, css
- Responsive Animations for Every Screen Size and Device (by/via) · · animations, css, responsive-design
- Usable, Useful, and Valuable (by/via) · · agile, scrum, processes, user-experience
- Which Serverless Edge Platform Has the Fastest Git Deployments? (by/via) · · serverless, edge-computing, git, performance, deploying
- Why I Never Understood CSS-in-JS (by) · · javascript, css, css-in-js
- A Dashing Navbar Solution (by) · · css
- Ethical Design Is a Risk Management Strategy (by/via) · · design, ethics, strategies
- SEO and Accessibility Are Symbiotic (via) · · accessibility, seo
- Digital Accessibility—Ask Me Anything (by+/via) · · videos, accessibility
- GitHub Copilot Investigation · · websites, github, ai, legal
- Redo Websites Less Often (to Become a Better Developer) (by) · · processes, career
- State of CSS Frameworks (via) · · videos, css, frameworks
- The True Type in PHP 8.2 (by) · · php
- What If the Team Hates My Functional Code? (by) · · programming
- Why We Need CSS Speech (by) · · accessibility, css
- How to Build the Foundation for Digital Accessibility (by/via) · · how-tos, accessibility, policies, processes
- Highly Customizable Background Gradients (by/via) · · css, backgrounds, gradients
- I Made a Full-Stack and Type-Safe Personal Site Using the T3 Stack (by) · · nextjs, tailwind, type-safety, tech-stacks
- Applying the 8 Golden Rules of User-Interface Design (via) · · design, usability, consistency
- CSS Specificity for Beginners (by) · · css, cascade
- Edit Someone Else’s Website: “contenteditable” and “designMode” (by) · · html
- Designing for Users With Disabilities: 10 Factors to Consider (via) · · accessibility, design, usability
- Forging Successful Partnerships With Software Developers (by/via) · · collaboration, design
- Common ARIA Mistakes and How to Avoid Them (by) · · accessibility, html, aria, mistakes
- Google on Alt Text SEO and Accessibility (by+/via) · · google, seo, accessibility, writing, alt-text
- Secure JavaScript URL Validation (by/via) · · javascript, validation, urls, security
- Data-Oriented Django (by) · · videos, django, algorithms
- The Proprietary Syndication Formats (by) · · syndication, rss
- Hands-On Guide to Color Fonts and “@ font-palette-values” (by/via) · · videos, guides, css, fonts, at-rules
- Next.js Crash Course (by) · · videos, nextjs
- The Wasted Potential of CSS Attribute Selectors (by) · · css, selectors, bem
- Why We’re Breaking Up With CSS-in-JS (by) · · javascript, css, css-in-js
- Don’t Be Arrogantly Ignorant: Don’t Flame (by) · · career, communication
- How to Rebase Stacked Git Branches (by) · · how-tos, git
- Moving From React to htmx (via) · · migration, react, htmx
- Accessibility Checkers—a Good Start, Not a Solution (by/via) · · accessibility, testing, tooling
- Design for Them Not for You (by/via) · · videos, design, usability
- New Brutalism and Web Accessibility: What You Need to Know (by/via) · · design, accessibility
- Scoop: Meta Ending Support for Instant Articles (by/via) · · meta, support
- Container Queries: Style Queries (by/via) · · css, container-queries
- Microfrontends: Microservices for the Frontend (by/via) · · micro-frontends, microservices
- Intro to Why Accessibility Is Important for Good SEO (via) · · introductions, accessibility, seo
- Two JavaScripts (by) · · javascript
- Upgrading Colors to HD on the Web (by/via) · · css, colors
- A Pure CSS Gallery Focus Effect With “:not” (via) · · css, selectors
- Augmenting Node.js With WebAssembly (by/via) · · videos, nodejs, webassembly
- CDN (by/via) · · studies, research, performance, content-delivery, tooling
- Some Things I Took Away From an Event Apart 2022 in Denver (by/via) · · web, accessibility, css
- What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project (by) · · accessibility, svg, images
- The Web’s Next Transition (by) · · web
- Create a Passkey for Passwordless Logins (by/via) · · authentication, security, passwords
- Early Days of Container Style Queries (by/via) · · css, container-queries
- How to Animate CSS Box Shadows and Optimize Performance (by/via) · · how-tos, css, animations, shadows, performance
- Design Specifications Template (by/via) · · design, templates
- Speeding Up Async Snippets (by) · · performance, javascript
- Representation in “alt” Text (by) · · accessibility, dei, writing
- The Border Property You Never Knew You Needed (by) · · videos, css
- Tree Views in CSS (by) · · css
- Sustainable Web Development Strategies Within an Organization (by/via) · · sustainability, performance, optimization
- Bun? Deno? Node.js? Creating Your Own JavaScript Runtime Using V8, Libuv, and More (by) · · videos, javascript, runtimes, v8
- Quick Tip: How to Use the Ternary Operator in JavaScript (via) · · how-tos, javascript, operators, tips-and-tricks
- Challenges of Multi-Brand Design Systems (by/via) · · design-systems, branding, theming
- When New CSS Features Collide: Possibility and Complexity at the Intersections (by) · · slides, css, complexity, interoperability
- Delightful UI Animations With Shared Element Transitions API II (by/via) · · javascript, animations, transitions, apis
- WCAG 2.2 Success Criteria (by) · · accessibility, wcag
- :where :is CSS? (by) · · css, selectors
- New Patterns for Amazing Apps (by/via) · · web-apps
- A Little Semantic HTML Trick for React Components (by) · · react, html, semantics, components, tips-and-tricks
- Landing the Second Click: A Guide to Designing Better Landing Pages (by/via) · · guides, design, landing-pages, user-conversion
- HTML 2022: 20 Additional Observations From Analyzing the Web Almanac Data (by) · · html, metrics
- How to Write Good Alt Text (by) · · how-tos, accessibility, writing, alt-text
- SVG Sprites: Old-School, Modern, Unknown, and Forgotten (by) · · svg, images, performance
- Usability Heuristic Frameworks: Which One Is Right for You? (by/via) · · usability, research
- Personas: Study Guide (by/via) · · guides, personas, usability, training, link-lists
- Turn Around Your Git Mistakes in 17 Ways (by) · · git, productivity, mistakes
- 4 Required Tests Before Shipping New Features (by) · · accessibility, testing
- Layout Breakouts With CSS Grid (by) · · css, layout
- Understanding “async” and “await” (by) · · javascript
- 2022 Web Almanac Report Finds WordPress Adoption Is Growing, Adds New Page Builder Data (by/via) · · studies, research, wordpress, content-management
- Debugging CSS, No Extensions Required (by) · · videos, css, debugging
- Five Months Worth of Takes on the Digital Accessibility Space (by/via) · · accessibility, testing, tooling
- The Future of Rendering in React (by) · · react, client-side-rendering, server-side-rendering
- The Future of the Web Is on the Edge (by/via) · · deno, edge-computing
- Unless You’re in the Mafia, Your Company Isn’t Your Family (by) · · career
- Adding Components to Eleventy With WebC (by) · · eleventy, components
- How to Safely Share Your Email Address on a Website (via) · · how-tos, communication, email
- WordPress.org Plugin Developers Demand Transparency Regarding the Removal of Active Install Growth Data (by/via) · · wordpress, plugins, metrics
- How to Safely Pass Data to JavaScript in a Django Template (by) · · how-tos, javascript, django
- Awesome Tools for Open Source Contributions (by) · · tooling, foss, documentation
- AI Code Completion Is Like Cruise Control—and That’s Great News for Bigger Teams (by) · · ai, code-completion, productivity, collaboration
- Foundations: HTML Semantics (by/via) · · html, semantics
- Front-End Development Is Like… (by) · · career
- Using Web Components With Next (or Any SSR Framework) (by/via) · · web-components, nextjs, server-side-rendering
- Easy Fluid Typography With “clamp()” Using Sass Functions (by/via) · · typography, preprocessors, css, sass, functions
- Quick Tip: How to Use the Spread Operator in JavaScript (via) · · how-tos, javascript, operators, tips-and-tricks
- Patching the Open Web (by) · · web
- Use “npm query” and jq to Dig Into Your Dependencies (by) · · videos, npm, dependencies, auditing
- 3 Things to Consider Before You Implement CAPTCHA for Accessibility (via) · · accessibility, captcha
- Can Consistency Harm Your Product? (by/via) · · design, consistency
- Component-Level Design Tokens: Are They Worth It? (by) · · design-tokens, components
- Four Ways to Pick the Right UX Method (by/via) · · user-experience, research
- One Formula to Rule Them All: The ROI of a Design System (by+/via) · · design-systems
- The Missing Math Methods in JavaScript (via) · · javascript, math
- Where Are the Accessibility Statements? Digital Accessibility Shouldn’t Be a Surprise (via) · · accessibility
- CSS Halftone Patterns (by/via) · · css, effects
- Designing a Secure API (by/via) · · software-design, apis, security
- When Going Somewhere Does a Thing: On Links and Buttons (by) · · accessibility, html, links, buttons, semantics
- A CSS Class-Naming Convention Might Still Be Your Best Choice (by) · · css, naming, conventions
- A Beginner’s Complete Guide to Form Accessibility: The 5 Things Accessible Forms Need and How to Fix Common Errors (via) · · guides, accessibility, forms
- I Changed My Mind About Writing New JavaScript Frameworks (by) · · javascript, frameworks
- Minimalism as Narcissism (by) · · minimalism
- The Difference Between “undefined” and “not defined” in JavaScript (by/via) · · javascript
- Delightful UI Animations With Shared Element Transitions API (by/via) · · javascript, animations, transitions, apis
- Mobile UX Design in 2022 (by/via) · · user-experience, mobile, design
- Busting the Myths About Agile Development and User Research (via) · · agile, user-experience, research, myths
- I Turned JS Into a Compiled Language (for Fun and Wasm) (by) · · javascript, compiling, webassembly
- CSS-Only Type Grinding: Casting Tokens Into Useful Values (by/via) · · css, design-tokens
- Phylum Detects Active Typosquatting Campaign Targeting npm Developers (via) · · npm, dependencies, security
- Ten Years of TypeScript (by/via) · · typescript
- What Is Website Minimalism? (by) · · minimalism, design
- Building Delight in Your Design System (by/via) · · design-systems, user-experience
- Templating in HTML (by) · · html, javascript
- Why UX? (via) · · videos, user-experience
- depngn (via) · · packages, npm, nodejs, dependencies
- Optimize Long Tasks (by/via) · · performance, javascript
- Learn Accessibility (by/via) · · courses, accessibility
- Getting Started With WordPress Block Development (via) · · wordpress, introductions
- A Web Component Story (by) · · web-components, design-systems
- Choosing the Best Node.js Docker Image (by/via) · · nodejs, docker
- Why You Should Care About Design in Uncertain Times (via) · · design
- Yes, Accessibility Is Also a Backend Concern (by) · · accessibility
- “:has()” Opens Up New Possibilities With CSS (by) · · videos, css, selectors
- How to Center a Div Using CSS Grid (by/via) · · how-tos, css, centering
- State of CSS 2022 (by+/via) · · surveys, css
- Intersectionality, Accessibility, and Inclusion (via) · · videos, accessibility, dei
- GIFs Without the .gif: The Most Performant Image and Video Options Right Now (by/via) · · performance, multimedia, images, gif, html
- This Site’s Type Is Now Variable (by) · · typography, fonts, css
- Let Me Understand How JavaScript Works Under the Hood (by) · · javascript
- How to Make Your Designs Scannable (and Why You Should) (by/via) · · how-tos, design, usability
- Performance Budgets: The Easiest Way to a Faster Site (by/via) · · performance, performance-budgets
- How to Return Multiple Values From a Function in JavaScript (by) · · how-tos, javascript, functions
- Websites Need to Be Accessible to Be Inclusive (by+/via) · · accessibility, dei
- Five Data-Loading Patterns to Boost Web Performance (via) · · performance
- Named Element IDs Can Be Referenced as JavaScript Globals (by/via) · · javascript, html
- 7 Things to Consider When Working On a Personal Project · · career, learning
- Learn HTML (by/via) · · courses, html
- Don’t Worry, Nobody Is Replacing Node, Not Even Bun and Even Less Deno (by/via) · · nodejs, bun, deno
- Useful JavaScript Math Functions and How to Use Them (by/via) · · javascript, math, functions
- Dear Console… (by) · · websites, console, javascript
- A Deep Dive Into WCAG 2.2—and Beyond (by+/via) · · podcasts, accessibility, wcag
- Closing a 30 Pixel Gap Between Native and Web (by/via) · · web-apps, user-agents, web
- 100 Days of More or Less Modern CSS (by) · · css
- 6+5 Ways to Make a Two-Column Layout: From Pretty Reasonable to Completely Wrong (by) · · layout, css
- I Am Not That Excited About New CSS Features (by) · · css
- The New Wave of JavaScript Web Frameworks (via) · · javascript, frameworks
- How to Create Wavy Shapes and Patterns in CSS (by/via) · · how-tos, css, effects
- Accessibility (by+/via) · · studies, research, accessibility
- CMS (by/via) · · studies, research, content-management
- CSS (by/via) · · studies, research, css
- Fonts (by/via) · · studies, research, fonts
- HTTP (by/via) · · studies, research, http, protocols
- Interoperability (by/via) · · studies, research, interoperability
- JavaScript (by+/via) · · studies, research, javascript
- Markup (by/via) · · studies, research, html
- Media (by/via) · · studies, research, multimedia, images
- Page Weight (by+/via) · · studies, research, performance
- Security (by+/via) · · studies, research, security
- SEO (by+/via) · · studies, research, seo
- Sustainability (by+/via) · · studies, research, sustainability
- How to Get All Sibling Elements of a Link or Button With Vanilla JavaScript (by) · · how-tos, links, buttons, javascript
- Continue Using .env Files as Usual (by) · · environments, security
- Streamable HTML Fragments (by) · · html, streaming
- Two Things I Learned by Validating My HTML Again (by) · · html, conformance, lessons
- Audience-Based Website Navigation (by/via) · · videos, usability, navigation
- Writing Composable SQL Using JavaScript (by/via) · · javascript, databases, sql
- Blind People Need to Be Considered More When Making Data Visualizations (by/via) · · accessibility, information-design
- Quick Reminder: HTML5 “required” and “pattern” Are Not a Security Feature (by) · · html, forms, security
- The Indisputable Truth About Accessibility (by/via) · · videos, accessibility
- Things I Wish I Had Known About Angular When I Started (by/via) · · angular
- Top Task Analysis: Make It Fast and Efficient (by) · · processes
- A Designer’s Guide to Documenting Accessibility (by/via) · · videos, design, accessibility, documentation
- Randomness in CSS (by) · · css, randomness
- Use Cases for CSS Comparison Functions (by) · · css, functions
- Testing Web Design Color Contrast (by+/via) · · testing, colors, contrast
- Speedy CSS Tip! Animated Loader (by/via) · · css, tips-and-tricks
- Attitudes to Digital Accessibility Survey 2022 (via) · · surveys, accessibility, dei
- 5 Ways That UX Developers Influence SEO (via) · · user-experience, seo
- Creative Section Breaks Using CSS “clip-path” (by/via) · · videos, css
- Element Timing: One True Metric to Rule Them All? (by/via) · · performance, apis, metrics
- Rest vs. Spread Syntax in JavaScript (by) · · javascript, comparisons
- Designing Better Inline Validation UX (by/via) · · forms, validation, user-experience
- Will Serving Real HTML Content Make a Website Faster? Let’s Experiment! (by/via) · · studies, research, html, performance
- Accessibility Is Systemic (by) · · accessibility
- Clarifying Color Contrast and Font Size Guidelines (by) · · accessibility, colors, contrast, readability
- React I Love You, but You’re Bringing Me Down (by/via) · · react
- The Web Is Good Now (by/via) · · videos, web
- Type-Level TypeScript (by) · · websites, typescript
- Why Designers Quit (by/via) · · design, career
- Making Your Web Pages Printer-Friendly With CSS (by/via) · · css, print
- It’s Good to Make Mistakes (by) · · accessibility, design, mistakes
- How to Generate Random Numbers in JavaScript With “Math.random()” (by/via) · · how-tos, javascript, math, randomness
- CSS Rules vs. CSS Rulesets (by) · · css, comparisons
- Prototyping to Learn (by) · · prototyping, learning
- A “details” Element as a Burger Menu Is Not Accessible (by/via) · · html, semantics, accessibility
- Shell Scripting With Node.js (by) · · books, nodejs, shell
- Design 4.0: Leading Design in the New Industry (via) · · design
- How Rapid Usability Testing Is Changing UX Research (by/via) · · usability, user-experience, research, testing
- Rethinking a Design System (by) · · design-systems
- Web Sustainability and the Ethical Dilemma (by/via) · · sustainability, ethics, web
- CSS Drawings (by) · · css, art
- Building a Retro Draggable Web Component With Lit (by/via) · · web-components, javascript
- Stop Using .env Files Now (by) · · environments, security
- How to Get the Current Timestamp in JavaScript (by) · · how-tos, javascript
- 5 Ways to Use Data Visualization in Your Content to Increase Traffic (via) · · information-design, content, optimization
- Accidental Dismissal of Overlays: A Common Mobile Usability Problem (by+/via) · · usability, mobile, overlays
- Debunking Myths About HTTPS · · http, security, myths
- The Git Commands I Use Every Day (by) · · git, command-line
- Accessibility Is for Every One (by) · · accessibility
- Brief Note on Super- and Subscript Text (by) · · html, accessibility, support, assistive-tech
- When Design Systems Lie (by/via) · · videos, design-systems
- How to (Not) Make a Button (by) · · how-tos, accessibility, buttons, semantics, html
- Accessibility in Times of Headless (by/via) · · accessibility, content-management, headless
- Design Tokens 101 (by) · · design-tokens