News and Tools for Frontend Development (17)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- How to Write Good Alt Text · · how-tos, accessibility, writing, alt-text
- New Patterns for Amazing Apps · · web-apps
- A Little Semantic HTML Trick for React Components · · react, html, semantics, components, tips-and-tricks
- Landing the Second Click: A Guide to Designing Better Landing Pages · · guides, design, landing-pages, user-conversion
- Usability Heuristic Frameworks: Which One Is Right for You? · · usability, research
- Personas: Study Guide · · guides, personas, usability, training, link-lists
- Turn Around Your Git Mistakes in 17 Ways · · git, productivity, mistakes
- 4 Required Tests Before Shipping New Features · · accessibility, testing
- Layout Breakouts With CSS Grid · · css, layout
- Understanding “async” and “await” · · javascript
- 2022 Web Almanac Report Finds WordPress Adoption Is Growing, Adds New Page Builder Data · · studies, research, wordpress, content-management
- Debugging CSS, No Extensions Required · · videos, css, debugging
- Five Months Worth of Takes on the Digital Accessibility Space · · accessibility, testing, tooling
- The Future of Rendering in React · · react, client-side-rendering, server-side-rendering
- The Future of the Web Is on the Edge · · deno, edge-computing
- Unless You’re in the Mafia, Your Company Isn’t Your Family · · career
- Adding Components to Eleventy With WebC · · eleventy, components
- Awesome Tools for Open Source Contributions · · tooling, open-source, documentation
- How to Safely Share Your Email Address on a Website · · how-tos, communication, email
- WordPress.org Plugin Developers Demand Transparency Regarding the Removal of Active Install Growth Data · · wordpress, plugins, metrics
- How to Safely Pass Data to JavaScript in a Django Template · · how-tos, javascript, django
- AI Code Completion Is Like Cruise Control—and That’s Great News for Bigger Teams · · ai, code-completion, productivity, collaboration
- Foundations: HTML Semantics · · html, semantics
- Patching the Open Web · · web
- Use “npm query” and jq to Dig into Your Dependencies · · videos, npm, dependencies, auditing
- Front-End Development Is Like… · · career
- Using Web Components With Next (or Any SSR Framework) · · web-components, nextjs, server-side-rendering
- Easy Fluid Typography With “clamp()” Using Sass Functions · · typography, preprocessors, css, sass, functions
- Quick Tip: How to Use the Spread Operator in JavaScript · · how-tos, javascript, operators, tips-and-tricks
- 3 Things to Consider Before You Implement CAPTCHA for Accessibility · · accessibility, captcha
- Can Consistency Harm Your Product? · · design, consistency
- Component-Level Design Tokens: Are They Worth It? · · design-tokens, components
- Four Ways to Pick the Right UX Method · · user-experience, research
- One Formula to Rule Them All: The ROI of a Design System · · design-systems
- The Missing Math Methods in JavaScript · · javascript, math
- Where Are the Accessibility Statements? Digital Accessibility Shouldn’t Be a Surprise · · accessibility
- CSS Halftone Patterns · · css, effects
- Designing a Secure API · · software-design, apis, security
- When Going Somewhere Does a Thing: On Links and Buttons · · accessibility, html, links, buttons, semantics
- A CSS Class-Naming Convention Might Still Be Your Best Choice · · css, naming, conventions
- A Beginner’s Complete Guide to Form Accessibility: The 5 Things Accessible Forms Need and How to Fix Common Errors · · guides, accessibility, forms
- Busting the Myths About Agile Development and User Research · · agile, user-experience, research
- CSS-Only Type Grinding: Casting Tokens into Useful Values · · css, design-tokens
- I Changed My Mind About Writing New JavaScript Frameworks · · javascript, frameworks
- Minimalism as Narcissism · · minimalism
- The Difference Between “undefined” and “not defined” in JavaScript · · javascript
- Delightful UI Animations With Shared Element Transitions API · · javascript, animations, transitions, apis
- Mobile UX Design in 2022 · · user-experience, mobile, design
- I Turned JS into a Compiled Language (for Fun and Wasm) · · javascript, compiling, webassembly
- Phylum Detects Active Typosquatting Campaign Targeting npm Developers · · npm, dependencies, security
- Ten Years of TypeScript · · typescript
- What Is Website Minimalism? · · minimalism, design
- Building Delight in Your Design System · · design-systems, user-experience
- Templating in HTML · · html, javascript
- Why UX? · · videos, user-experience
- depngn · · packages, npm, nodejs, dependencies
- Optimize Long Tasks · · performance, javascript
- Learn Accessibility · · courses, accessibility
- Getting Started With WordPress Block Development · · wordpress, introductions
- A Web Component Story · · web-components, design-systems
- Choosing the Best Node.js Docker Image · · nodejs, docker
- Intersectionality, Accessibility, and Inclusion · · videos, accessibility, inclusion
- Why You Should Care About Design in Uncertain Times · · design
- Yes, Accessibility Is Also a Backend Concern · · accessibility
- “:has()” Opens Up New Possibilities With CSS · · videos, css, selectors
- State of CSS 2022 · · surveys, css
- How to Center a Div Using CSS Grid · · how-tos, css
- GIFs Without the .gif: The Most Performant Image and Video Options Right Now · · performance, multimedia, images, gif, html
- Performance Budgets: The Easiest Way to a Faster Site · · performance
- This Site’s Type Is Now Variable · · typography, fonts, css
- Websites Need to Be Accessible to Be Inclusive · · accessibility, inclusion
- Let Me Understand How JavaScript Works Under the Hood · · javascript
- How to Make Your Designs Scannable (and Why You Should) · · how-tos, design, usability
- How to Return Multiple Values from a Function in JavaScript · · how-tos, javascript, functions
- Closing a 30 Pixel Gap Between Native and Web · · web-apps, user-agents, web
- Five Data-Loading Patterns to Boost Web Performance · · performance
- Named Element IDs Can Be Referenced as JavaScript Globals · · javascript, html
- A Deep Dive into WCAG 2.2—and Beyond · · podcasts, accessibility, wcag
- 7 Things to Consider When Working On a Personal Project · · career, learning
- Learn HTML · · courses, html
- Don’t Worry, Nobody Is Replacing Node, Not Even Bun and Even Less Deno · · nodejs, bun, deno
- Useful JavaScript Math Functions and How to Use Them · · javascript, math, functions
- Dear Console… · · websites, console, javascript
- 100 Days of More or Less Modern CSS · · css
- 6+5 Ways to Make a Two-Column Layout: From Pretty Reasonable to Completely Wrong · · layout, css
- I Am Not That Excited About New CSS Features · · css
- The New Wave of JavaScript Web Frameworks · · javascript, frameworks
- How to Create Wavy Shapes and Patterns in CSS · · how-tos, css, effects
- How to Get All Sibling Elements of a Link or Button With Vanilla JavaScript · · how-tos, links, buttons, javascript
- Accessibility · · studies, research, accessibility
- CMS · · studies, research, content-management
- CSS · · studies, research, css
- Fonts · · studies, research, fonts
- HTTP · · studies, research, http, protocols
- Interoperability · · studies, research, interoperability
- JavaScript · · studies, research, javascript
- Markup · · studies, research, html
- Media · · studies, research, multimedia, images
- Page Weight · · studies, research, performance
- Security · · studies, research, security
- SEO · · studies, research, seo
- Sustainability · · studies, research, sustainability
- The 2022 Web Almanac · · announcements, studies, research, web
- Continue Using .env Files as Usual · · environments, security
- Streamable HTML Fragments · · html, streaming
- Two Things I Learned by Validating My HTML Again · · html, conformance, lessons
- Audience-Based Website Navigation · · videos, usability, navigation
- Writing Composable SQL Using JavaScript · · javascript, databases, sql
- Attitudes to Digital Accessibility Survey 2022 · · surveys, accessibility, inclusion
- Blind People Need to Be Considered More When Making Data Visualizations · · accessibility, information-design
- Quick Reminder: HTML5 “required” and “pattern” Are Not a Security Feature · · html, forms, security
- The Indisputable Truth About Accessibility · · videos, accessibility
- Things I Wish I Had Known About Angular When I Started · · angular
- Top Task Analysis: Make It Fast and Efficient · · processes
- A Designer’s Guide to Documenting Accessibility · · videos, design, accessibility, documentation
- Randomness in CSS · · css, randomness
- Use Cases for CSS Comparison Functions · · css, functions
- Testing Web Design Color Contrast · · testing, colors, contrast
- Speedy CSS Tip! Animated Loader · · css, tips-and-tricks
- 5 Ways That UX Developers Influence SEO · · user-experience, seo
- Creative Section Breaks Using CSS “clip-path” · · videos, css
- Element Timing: One True Metric to Rule Them All? · · performance, apis, metrics
- Rest vs. Spread Syntax in JavaScript · · javascript, comparisons
- Designing Better Inline Validation UX · · forms, validation, user-experience
- Will Serving Real HTML Content Make a Website Faster? Let’s Experiment! · · studies, research, html, performance
- Accessibility Is Systemic · · accessibility
- Clarifying Color Contrast and Font Size Guidelines · · accessibility, colors, contrast, readability
- React I Love You, but You’re Bringing Me Down · · react
- The Web Is Good Now · · videos, web
- Type-Level TypeScript · · websites, typescript
- Why Designers Quit · · design, career
- Shell Scripting With Node.js · · books, nodejs, command-line
- Making Your Web Pages Printer-Friendly With CSS · · css, print
- It’s Good to Make Mistakes · · accessibility, design, mistakes
- How to Generate Random Numbers in JavaScript With “Math.random()” · · how-tos, javascript, math, randomness
- CSS Rules vs. CSS Rulesets · · css, comparisons
- Prototyping to Learn · · prototyping, learning
- A “details” Element as a Burger Menu Is Not Accessible · · html, semantics, accessibility
- 5 Ways to Use Data Visualization in Your Content to Increase Traffic · · information-design, content, optimization
- Design 4.0: Leading Design in the New Industry · · design
- How Rapid Usability Testing Is Changing UX Research · · usability, user-experience, research, testing
- Rethinking a Design System · · design-systems
- Web Sustainability and the Ethical Dilemma · · sustainability, ethics, web
- CSS Drawings · · css, art
- Building a Retro Draggable Web Component With Lit · · web-components, javascript
- Stop Using .env Files Now · · environments, security
- How to Get the Current Timestamp in JavaScript · · how-tos, javascript
- Accidental Dismissal of Overlays: A Common Mobile Usability Problem · · usability, mobile, overlays
- Debunking Myths About HTTPS · · http, security
- The Git Commands I Use Every Day · · git, command-line
- Accessibility Is for Every One · · accessibility
- Brief Note on Super- and Subscript Text · · html, accessibility, support, assistive-tech
- When Design Systems Lie · · videos, design-systems
- How to (Not) Make a Button · · how-tos, accessibility, buttons, semantics, html
- Accessibility in Times of Headless · · accessibility, content-management, headless
- Design Tokens 101 · · design-tokens
- Let’s Get Logical · · css, logical-properties
- The Rise of the TikTok Pattern · · design, social-media
- Total Blocking Time: A Short and Sweet Guide for Happier Users · · performance, javascript
- Why Are Vanity Metrics Still Problematic? · · metrics
- Why the Number Input Is the Worst Input · · html, forms, validation, accessibility
- Invalid CSS · · css, conformance
- Designing for People With Cognitive Disabilities and Everyone Else · · videos, accessibility, design
- I Never Thought This Would Be Possible With CSS · · videos, css, selectors
- Five Things You Can Do to Be More Inclusive · · inclusion, accessibility
- How to Substantially Slow Down Your Node.js Server · · how-tos, performance, nodejs
- Buttons and the Baader–Meinhof Phenomenon · · buttons, accessibility
- 7 Must Know JavaScript Tips and Tricks · · javascript, tips-and-tricks
- 3 Problems Scrum Doesn’t Solve · · agile, scrum, processes
- A Guide to Rounding Numbers in JavaScript · · guides, javascript
- Container Queries in Browsers! · · css, container-queries, support
- JavaScript APIs You Don’t Know About · · javascript, apis
- The State of Digital Accessibility: Three Key Challenges · · accessibility, legal, web
- W3C TAG Ethical Web Principles · · ethics, principles, w3c
- When Is It OK to Disable Text Selection? · · css, usability, accessibility
- On Better Browsers: Arbitrary Media Queries and Browser UIs · · css, media-queries, accessibility
- Quick Tip: Embedding YouTube Videos in GitHub Pages · · embed-code, social-media, github, tips-and-tricks
- Secure Your Node.js App With JSON Web Tokens · · nodejs, json-web-tokens, security
- Better Accessible Names · · accessibility, naming
- Conditionally Spreading Objects in JavaScript · · javascript, objects
- Disability Is Not a Dirty Word · · accessibility, communication
- First Batch of Color Fonts Arrives on Google Fonts · · fonts, typography, colors
- Wtf Is an Island and Why Is It in My Website? · · frameworks, html, architecture, concepts
- Detecting CSS Selector Support · · css, selectors, support, feature-detection
- Intrinsic CSS With Container Queries and Units · · videos, css, container-queries, units
- PureComponents vs. Functional Components With Hooks · · components, hooks, comparisons
- The Power of CSS Blend Modes · · css, blend-modes
- Node.js Native Binary Compilation Using Vercel pkg · · nodejs, compiling
- Making Sense of WAI-ARIA: A Comprehensive Guide · · guides, accessibility, aria, html
- What Is Data Engineering? · · concepts, data-engineering
- The Basics of Remix · · fundamentals, frameworks, remix
- Best Practices for Creating a Modern npm Package · · best-practices, npm
- Nuclear Footnotes · · html, css
- When Life Gives You Lemons, Write Better Error Messages · · user-experience, writing
- Which Fonts to Use for Your Charts and Tables · · fonts, information-design, tables
- The “details” and “summary” Elements, Again · · html, accessibility
- My Five Biggest Design System Mistakes · · design-systems, mistakes
- Justin Yarbrough Talks About Alt Text · · podcasts, accessibility, writing, alt-text
- The Seventh Way to Call a JavaScript Function Without Parentheses · · javascript, functions
- 2022: 0 of the Global Top 100 Websites Use Valid HTML · · html, css, conformance, quality
- Antipersonas: What, How, Who, and Why? · · usability, personas
- Your Next.js Bundle Will Thank You · · nextjs, bundling, performance
- Mastering DOM Manipulation With Vanilla JavaScript · · javascript, dom
- Mastering These 7 Basics CSS Skills Will Make You a Frontend Wizard · · fundamentals, css
- Converting PNG Images to WebP Using PHP · · conversion, images, png, webp, php
- Make It Short—Make It Better · · javascript, minimalism
- A Guide to Choosing the Right React State Management Solution · · guides, react, state-management
- CSS “line-height” · · css, typography
- How I Made a Pure CSS Puzzle Game · · css
- How to Monitor a Next.js Application · · how-tos, nextjs, monitoring
- Keeping Your CSS Small: Scopes, Containers, and Other New Stuff · · videos, css, scope, complexity
- Button Minimum Width · · css, buttons
- Lightning CSS · · websites, css, tooling
- Text Is the Universal Interface · · apis
- Towards a Factory Model of Designing User Interfaces—Slotted Systems in Figma · · design, design-systems, figma
- What’s New With Forms in 2022? · · forms, javascript, html
- 12 Modern UI Components to Inspire Your Future Designs · · design, components
- Me and React: 5 Years in 15 Minutes · · react
- A Quick Primer on Testing JavaScript · · introductions, javascript, testing
- Dependabot Unlocks Transitive Dependencies for npm Projects · · dependencies, npm, security
- How Your Favourite UI Libraries Manage Their Icons · · libraries, images, maintenance
- Building the Main Navigation for a Website · · navigation, html, css
- Are Modals in Web Design a UX Disaster? · · design, user-experience, accessibility, modals
- WCAG 2.2 Hits Candidate Recommendation—but What Does It Mean? · · wcag, standards
- Detect When Users Switch Tabs Using JavaScript · · javascript
- Rewriting Tests from Cypress to Playwright Using GPT3 · · testing, cypress, playwright, ai, code-completion, refactoring
- An Overview of Node.js: Architecture, APIs, Event Loop, Concurrency · · overviews, nodejs, architecture, apis, events, concurrency
- A Whole Cascade of Layers · · css, cascade
- An Attempt at Outlining the Many Factors Influencing Developer Experience · · developer-experience
- Critical CSS? Not So Fast! · · css, performance
- Hacking CSS Animation State and Playback Time · · css, animations
- So Your Designer Wants Stuff to Overlap · · design, css
- The Realities and Myths of Contrast and Color · · accessibility, contrast, colors
- W3C Accessibility Maturity Model · · accessibility, w3c
- Rewrite Your Git History in 4 Friendly Commands · · git, command-line
- How to Improve Largest Contentful Paint for Faster Load Times · · how-tos, performance, web-vitals, optimization
- Introducing Signals · · preact, state-management, signals
- How to Build Event-Driven Architecture on AWS? · · how-tos, architecture, events, aws
- 5 Reasons to Invest in User Experience · · user-experience
- Dreamy Blur · · css, svg, effects
- Top 5 Technology Trends in UX Design · · user-experience, design, trends
- Understanding Regulatory Compliance and Making It Work on Your Web Site · · compliance, legal
- Getting Started With MathML · · introductions, mathml
- A/B Testing in 7 Steps to Quickly Improve Your Conversions · · testing, user-conversion, optimization
- HTML Markup Tips for Developing Accessible Websites · · html, accessibility, aria
- A Beginner’s Guide to Design Tokens · · guides, design-tokens
- A Content Warning Component · · components, html, css
- Infinite Scrolling: When to Use It, When to Avoid It · · usability, user-experience, scrolling
- Prestige Is the Designer’s Achilles’ Heel · · design
- Dear Oracle, Please Release the JavaScript Trademark · · javascript, legal