Where Did This Interaction Come From?—A Brief History of Interaction Design (uxd) | | 328 |
history, interaction-design |
Basics of JavaScript Test Driven Development (TDD) With Jest | | 327 |
fundamentals, javascript, testing, jest |
Feature Checklists Are Not Enough: How to Avoid Making Bad Software | | 326 |
how-tos, usability, design, checklists |
“export default thing” Is Different to “export { thing as default }” (jaf) | | 325 |
javascript |
Short Note on Skip Links With Sticky Headers | | 324 |
accessibility, skip-links, css |
Evaluating Color and Contrast—How Hard Can It Be? (web) | | 323 |
accessibility, colors, contrast |
Accessibility and SEO | | 322 |
accessibility, seo, html |
Towards Richer Colors on the Web | | 321 |
design, colors |
It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them (sma) | | 320 |
testing, quality |
Colorblind Accessibility Manifesto | | 319 |
websites, manifestos, accessibility, colors, color-blindness, guidelines |
9 Tips to Help You Ace a Whiteboard Interview | | 318 |
interviewing, career, tips-and-tricks |
5 Hidden Mistakes That Can Ruin a Developer’s Career | | 317 |
career, mistakes |
How We Built React Components for Any Front End | | 316 |
react, components, case-studies |
The Internet Is Rotting | | 315 |
link-rot, web |
10 Figma Best Practices to 10× Your Workflow (uxd) | | 314 |
design, figma, productivity, best-practices |
Detecting Hover-Capable Devices (mic) | | 313 |
css |
When a Click Is Not Just a Click (css) | | 312 |
javascript |
The State of Web Workers in 2021 (sur/sma) | | 311 |
javascript, web-workers |
Encoding Data for POST Requests (jaf) | | 310 |
javascript, security, encoding |
Use the “i” Element, and Use It Appropriately (j9t) | | 309 |
html, semantics |
Introducing GitHub Copilot: Your AI Pair Programmer (git) | | 308 |
introductions, github-copilot, github, ai, tooling |
Code Reusability Patterns for Next.js | | 307 |
nextjs, maintainability, monorepos |
Screen Readers: Hearing the Unseen | | 306 |
accessibility, screen-readers |
The Most Popular Design Thinking Strategy Is BS | | 305 |
design, strategies |
Tip: Don’t Preprocess What You Can Design Token (tyl/clo) | | 304 |
css, preprocessors, design-tokens |
Resource Inlining in JavaScript Frameworks (mge/dev) | | 303 |
javascript, frameworks, performance, web-vitals |
Good News: Google No Longer Requires Publishers to Use the AMP Format (the) | | 302 |
amp, web-vitals, google |
CSS Frameworks in Vogue, but Don’t Forget Style Fundamentals (ric/the) | | 301 |
css, frameworks, fundamentals, quality |
I Regret Being a Hipster in Tech | | 300 |
career |
My Journey From a Novice to a Front-End Engineer | | 299 |
career |
All You Need Is 5 Fonts (uxd) | | 298 |
design, typography, fonts |
Creating a Multi-Author Blog With Next.js (dom/sma) | | 297 |
nextjs, blogging |
JavaScript Frameworks and the Lost Art of HTML (deq) | | 296 |
javascript, html, frameworks |
Debugging JavaScript and Front-End | | 295 |
videos, javascript, debugging |
Container Queries and the Future of CSS (mia) | | 294 |
videos, css, container-queries |
Building a Responsive Layout With CSS Grid and Container Queries (5t3) | | 293 |
videos, css, grids, layout, responsive-design, container-queries |
Using CSS to Enforce Accessibility (aar) | | 292 |
accessibility, css |
The True Cost of a Redesign (uxd) | | 291 |
redesigning, economics |
Accessibility in React | | 290 |
accessibility, react |
No Code Reviews by Default | | 289 |
code-reviews |
Beyond Basic Alt Text—Charts, Maps, and Diagrams | | 288 |
accessibility, alt-text, images, information-design |
React Architecture: How to Structure and Organize a React Application | | 287 |
how-tos, react, architecture |
Making the Web—Faster (rau) | | 286 |
web, performance, developer-experience, principles |
What Is QUIC Protocol: Everything That You Should Know | | 285 |
protocols, quic |
What’s New in ES2021 | | 284 |
javascript, ecmascript, standards |
A Framework for Building Open Graph Images (git) | | 283 |
open-graph, images |
Sorting Colors in JavaScript | | 282 |
javascript, sorting, colors |
RenderingNG (chr/dev) | | 281 |
browsers, browser-engines, chromium, google, rendering, history |
Demystifying Styled Components (jos) | | 280 |
css, javascript, components |
Custom Scrollbars in CSS (sha) | | 279 |
css |
Craft Good Questions for Usability Tests (uxd) | | 278 |
usability, testing |
Keeping It Consistent: Design Tokens (uxd) | | 277 |
design-systems, design-tokens, consistency |
How to Use Dynamic Imports in JavaScript | | 276 |
how-tos, javascript |
Blogged Answers: The Evolution of Redux Testing Approaches | | 275 |
redux, state-management, testing, history |
Organize Your CSS Declarations Alphabetically (eri) | | 274 |
css, sorting, maintainability |
Ultimate Guide to Color in UX/UI Design | | 273 |
guides, design, colors, figma |
Updating a 25-Year-Old Website (sto) | | 272 |
maintenance |
Client-Side Routing in Next.js (sma) | | 271 |
nextjs, routing |
How Apple Changed the Way We Navigate—Forever (uxd) | | 270 |
design, navigation, apple |
Web Audio API (pad/w3c) | | 269 |
standards, multimedia, apis |
OMG, SVG Favicons FTW! | | 268 |
html, images, favicons, svg |
Your Image Is Probably Not Decorative (eri/sma) | | 267 |
images, decoration, accessibility, alt-text |
Optical Size, the Hidden Superpower of Variable Fonts (pix) | | 266 |
css, fonts, variable-fonts, typography |
A Complete Guide to Accessibility Tooling (nic/sma) | | 265 |
guides, accessibility, tooling |
A Complete Guide to Accessibility Tooling (nic/sma) | | 264 |
guides, accessibility, testing, automation |
Shut Up, Old Man… (cod) | | 263 |
career |
NPM Global Audit | | 262 |
packages, npm, security, quality, auditing |
Dart Basics | | 261 |
fundamentals, dart, flutter |
Understanding and Preventing Common Security Vulnerabilities | | 260 |
security, vulnerabilities |
Everyday Accessibility | | 259 |
accessibility |
Regular Expressions (RegEx) in Google Search Console | | 258 |
regex, seo, google |
Provided “As Is,” Without Warranty of Any Kind (sir) | | 257 |
foss, community, licensing |
When CSS Isn’t Enough: JavaScript Requirements for Accessible Components (5t3/sma) | | 256 |
css, javascript, accessibility |
Adding Shadows to SVG Icons With CSS and SVG Filters (css) | | 255 |
css, svg, images, icons, shadows, filters, effects |
How to Center Anything in CSS Using Flexbox and Grid (fre) | | 254 |
how-tos, css, flexbox, grids, centering |
React Cheat Sheet (Updated June 2021) | | 253 |
react, cheat-sheets |
The Art of Frontend Engineering | | 252 |
career |
Serving Sharp Images to High Density Screens (jaf) | | 251 |
performance, images |
Half the Size of Images by Optimising for High Density Displays (jaf) | | 250 |
html, images, performance |
Let’s Learn About Aspect Ratio in CSS (sha) | | 249 |
css, aspect-ratio |
The Ultimate CSS Flexbox Cheat Sheet With Examples | | 248 |
css, flexbox, layout, cheat-sheets, examples |
Tips for Real-World Alpine.js (cod) | | 247 |
alpinejs, tips-and-tricks |
Why Validate? (j9t) | | 246 |
html, css, quality, conformance, craft |
What Is Prisma and Why Do We Need Another ORM? (nea) | | 245 |
databases, tooling, prisma |
The Simplicity of Svelte | | 244 |
svelte, simplicity, examples |
Ready-Made Counter Styles (ri/w3c) | | 243 |
css, localization |
Micro-Expressions in User Testing: When Users Reveal Their True Emotional States (uxd) | | 242 |
design, usability |
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma) | | 241 |
css, selectors |
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma) | | 240 |
css |
Building a Color Scheme (arg/dev) | | 239 |
css, design, colors, color-palettes |
An Interactive Guide to CSS Transitions (jos) | | 238 |
guides, css, transitions |
10 Postman Features Everyone Should Know (get) | | 237 |
postman |
Towards a Common Vision for Browser Extensions | | 236 |
browsers, browser-extensions |
Improving the UX of Your Design System | | 235 |
design-systems, user-experience, optimization |
Reasons Why Bugs Might Feel “Impossible” | | 234 |
debugging, quality |
Component-Specific Design Tokens (clo) | | 233 |
components, design-tokens |
A Comprehensive Guide to Vue Slots | | 232 |
guides, vuejs |
The Dark Side of Notepad++ : v8 | | 231 |
release-notes, notepad++ |
Accessible Overflow | | 230 |
accessibility, html, css, overflow |
Using AVIF to Compress Images on Your Site (dev) | | 229 |
performance, images, avif, compression |
What Can the HTTP Archive Tell Us About Largest Contentful Paint? | | 228 |
performance |
Extracts From a Private Q&A Retrospective About the WHATWG | | 227 |
interviews, whatwg |
An Accessibility Strategy | | 226 |
accessibility, strategies |
Vue.js vs. React—Not Your Usual Comparison | | 225 |
frameworks, vuejs, react, comparisons |
10 Utility Functions for Working With Objects in JavaScript | | 224 |
javascript, functions, objects |
A Little Book of Accessibility | | 223 |
accessibility |
JavaScript: Debouncing and Throttling | | 222 |
javascript, debouncing, throttling |
Best Practices for Fonts (tun/dev) | | 221 |
fonts, best-practices, performance |
Getting Started With a Kanban Board: 6 Tips for Productive Work | | 220 |
introductions, kanban, agile, tips-and-tricks, productivity |
Open Source Insights | | 219 |
websites, foss, dependencies, security, licensing |
Managing Shared State in Vue 3 (wil/sma) | | 218 |
vuejs, state-management |
How to Redirect HTTP to HTTPS (sem) | | 217 |
how-tos, redirecting, http, tls, wordpress, nginx, iis, microsoft, apache, servers, seo |
CSS System Colors (jim) | | 216 |
css, colors |
CSS for Web Vitals (una/dev) | | 215 |
css, performance, web-vitals |
How to Fix Cumulative Layout Shift (CLS) Issues (tun/sma) | | 214 |
how-tos, performance, web-vitals |
Looking Fine With Firefox 89 (chr) | | 213 |
release-notes, firefox, mozilla, browsers |
The Hidden World of “aria-hidden” (ste) | | 212 |
accessibility, aria, html, hiding |
Thoughts for the Aging Web Developer (j9t) | | 211 |
career |
Embracing Design Constraints (aar) | | 210 |
design |
Why Accessibility Overlays Hurt More Than Help (dbo/uxd) | | 209 |
accessibility, overlays |
Disabling a Link (sco) | | 208 |
links, css, accessibility |
How to Build an Image Comparison Slider | | 207 |
how-tos, sliders, react, images |
What Makes a Great Component Library? | | 206 |
components, libraries |
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma) | | 205 |
accessibility, svg, images, screen-readers |
History of Web Browser Engines From 1990 Until Today | | 204 |
history, browser-engines, browsers, presto, gecko, trident, edgehtml, khtml, webkit, blink, servo |
A Beginner’s Guide to Vue 3 | | 203 |
guides, vuejs |
Writing Better Regular Expressions in PHP | | 202 |
php, regex, readability |
A Thorough Analysis of CSS-in-JS (css) | | 201 |
css, javascript, css-in-js |
Accessible Web Forms | | 200 |
videos, accessibility, forms |
Your Design System Is Actually a Product—Treat It Like One (uxd) | | 199 |
design-systems |
25 Years of CSS (mey) | | 198 |
css, history |
Access Guide | | 197 |
websites, guides, accessibility |
CSS Container Queries: Use Cases and Migration Strategies (cod/sma) | | 196 |
css, container-queries |
Svelte for the Experienced React Dev (ada/css) | | 195 |
react, svelte |
How to Implement Authentication in Next.js With Auth0 (fgi/sma) | | 194 |
how-tos, nextjs, authentication, tooling, auth0 |
Professional Development Is a Choice | | 193 |
career, training, professionalism |
A11y Audit Bookmarklets (llo) | | 192 |
accessibility, auditing, link-lists, bookmarklets |
How to Name Your Design System | | 191 |
how-tos, design-systems, naming |
Don’t Overabstract Your Components | | 190 |
html, javascript, components |
Dark Patterns Tip Line | | 189 |
websites, dark-patterns, user-experience |
Useful and Useless Code Comments (jim) | | 188 |
developer-experience, comments |
The New Responsive: Web Design in a Component-Driven World (una/dev) | | 187 |
responsive-design, css, components |
2021: 98% of the Top 100 U.S. Websites Use Invalid HTML (j9t) | | 186 |
html, css, conformance, metrics, quality, craft |
We Need to Talk About WCAG | | 185 |
accessibility, wcag |
WebGPU (kai/w3c) | | 184 |
webgpu, standards |
Learn CSS (bel/dev) | | 183 |
courses, css |
Theoretical Foundations for Server-Side Rendering and Static-Rendering (eri) | | 182 |
studies, research, fundamentals, server-side-rendering |
The Button Cheat Sheet (mat) | | 181 |
html, cheat-sheets |
Container Queries in Web Components | | 180 |
css, container-queries, web-components |
Create Scripts in JavaScript With zx | | 179 |
zx, javascript, automation |
Tree-Shaking: A Reference Guide (ati/sma) | | 178 |
guides, performance, optimization, javascript, tree-shaking |
Upgrade Your HTML III (j9t/fro) | | 177 |
books, frontend-dogma, html, minimalism, craft, conformance |
JPEG XL | | 176 |
websites, jpeg-xl, images |
Can I “:has()” (bka) | | 175 |
css, selectors, igalia |
A Complete Guide to Grid (css) | | 174 |
guides, css, grids, layout |
Building a React Design System for Adoption and Scale | | 173 |
react, design-systems |
Making Disabled Buttons More Inclusive (san/css) | | 172 |
css, accessibility |
Web Application Development: The Ultimate Guide (2021) | | 171 |
guides, web-apps |
Introduction to Using Dart in Flutter (log) | | 170 |
introductions, dart, flutter |
Everything You Need to Know About A/B Testing | | 169 |
metrics, testing, optimization |
Meet zx: A Better Way to Write Scripts With Node.js | | 168 |
zx, nodejs |
Rethinking Component Libraries | | 167 |
components |
A Primer on CSS Container Queries (5t3/sma) | | 166 |
introductions, css, container-queries |
Introduction to HTTP Cookies | | 165 |
introductions, cookies, javascript |
Custom Attributes Are Fast Good and Cheap | | 164 |
attributes, css, selectors |
How to Satisfy User Intent When Considering Search vs. Browse | | 163 |
how-tos, usability, browsing, searching, comparisons |
Overreliance on Overlays Is Counter to Enculturation of Accessibility | | 162 |
accessibility, overlays |
Reducing HTML Payload With Next.js (Case Study) (sma) | | 161 |
nextjs, html, performance, case-studies |
Is Vendor Prefixing Dead? (css) | | 160 |
css, vendor-extensions |
Auditing Design Systems for Accessibility (deq) | | 159 |
accessibility, design-systems, quality, auditing |
Checking “Under the Hood” of Code (jay) | | 158 |
dev-tools, browsers, debugging, console, javascript, html, css, history |
Using Hotwire to Build a Search Form With Minimal JavaScript (jos) | | 157 |
hotwire, forms, search, functionality |
The Evolution of Jamstack (bii/sma) | | 156 |
tech-stacks, jamstack, nextjs |
4 Soft Skills Every Designer Should Aspire to Learn (uxm) | | 155 |
design, career |
Immersive Content Strategy (ali) | | 154 |
content, content-strategy, user-experience |
Understanding Design Systems—Designing Component APIs | | 153 |
design-systems, components, apis |
Better Onboarding: How to Prevent Codebase Overwhelm | | 152 |
how-tos, onboarding |
Designing Adaptive Components, Beyond Responsive Breakpoints (ste) | | 151 |
videos, components, responsive-design |
Understanding the New Reactivity System in Vue 3 | | 150 |
vuejs, reactivity |
Level Up Your Team Workflows With These Kanban Board Best Practices | | 149 |
agile, kanban, best-practices |
A Complete Guide to Custom Properties (chr/css) | | 148 |
guides, css, custom-properties, examples |
Goodnight Polymer Project | | 147 |
web-components, polymer, lit |
Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit | | 146 |
css, custom-properties, browsers, browser-engines, webkit |
21 Best Practices for a Clean React Project | | 145 |
best-practices, quality, react |
Cache Busting in Eleventy (bni) | | 144 |
eleventy, caching |
A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma) | | 143 |
guides, css, selectors, support |
Do You Need to Localize Your Website? (ali) | | 142 |
content, localization, strategies |
136 Facts Every Web Dev Should Know Before They Burn Out and Turn to Landscape Painting or Nude Modelling | | 141 |
career |
An Introduction to Performance Budgets | | 140 |
introductions, performance, performance-budgets, metrics |
Engineer to Engineer: Don’t Be Afraid to Rock the Boat | | 139 |
interviews, career |
A Complete Guide to Incremental Static Regeneration (ISR) With Next.js (sma) | | 138 |
guides, incremental-static-regeneration, nextjs |
Intrinsic Typography Is the Future of Styling Text on the Web (css) | | 137 |
typography, css |
Making GraphQL Work in WordPress (sma) | | 136 |
wordpress, graphql |
What Is Vite? An Overview of the New Front-End Build Tool (tim) | | 135 |
overviews, building, tooling, vite |
How Artificial Intelligence Is Impacting UX Design (uxm) | | 134 |
user-experience, design, ai |
Five Reasons Your First Design System Will Fail | | 133 |
design-systems |
Content-Aware Image Resizing in JavaScript | | 132 |
javascript, images, resizing |
CSS Hell | | 131 |
websites, css |
What Is DevOps? A Comprehensive Introduction | | 130 |
introductions, dev-ops |
A Beginner’s Guide to Load Balancing (osd) | | 129 |
guides, load-balancing, concepts, edge-computing |
Overflow Issues in CSS (sha/sma) | | 128 |
css, overflow, scrolling, flexbox, grids, layout |
Fifteen Design Trends From an Accessibility Perspective | | 127 |
accessibility, design, trends |
The 5 Most Popular Front-End Frameworks Compared | | 126 |
frameworks, comparisons, react, angular, vuejs, svelte, emberjs |
No, Google! Vivaldi Users Will Not Get FLoC’ed (jon/viv) | | 125 |
browsers, vivaldi, google, monetization |
Top 7 Facts About Web Content Accessibility Guidelines WCAG 2.2 You Must Know | | 124 |
accessibility, wcag |
Variable Scope, Lexical Scope, and Code Blocks in JavaScript | | 123 |
javascript, scope |
Web Developer’s Guide to AVIF Images | | 122 |
guides, images, avif |
Understanding Logical Focus Order | | 121 |
accessibility, focus, html |
9 Principles of Good Web Design | | 120 |
design, principles, simplicity, navigation, content, layout, performance, mobile |
Comparing the New Generation of Build Tools (css) | | 119 |
tooling, building, bundling, comparisons |
Web Authentication: An API for Accessing Public Key Credentials Level 2 (jmh+/w3c) | | 118 |
webauthn, authentication, apis, standards |
Write a Plugin for Tailwind CSS | | 117 |
tailwind, plugins |
How Modernizr Can Help You Implement CSS Fallbacks (kar) | | 116 |
modernizr, css |
Getting Started With Preact | | 115 |
introductions, preact |
Building an Accessibility Library | | 114 |
accessibility, processes |
Defining a Strategy for Accessibility (cra) | | 113 |
accessibility, strategies |
Code in Quarantine (j9t) | | 112 |
quality, maintenance |
Using Design Tokens to Accelerate Design Systems | | 111 |
design-systems, design-tokens, css |
Sentence Case Versus Title Case (tem) | | 110 |
accessibility, writing, headings |
How to Build a Developer Blog With Gatsby and MDX | | 109 |
how-tos, gatsby, markdown, mdx, blogging |
5 Things I’m Thinking About When I Check a Pull Request for Accessibility | | 108 |
code-reviews, accessibility |
Primitive Values, Objects, and References in JavaScript Made Simple | | 107 |
javascript, objects |
Why Should We Care About Developer Experience (DX) | | 106 |
developer-experience |
Human-Readable JavaScript: A Tale of Two Experts (ali) | | 105 |
javascript, maintainability |
Bypassing Cookie Consent Banners in Lighthouse and WebPageTest (and) | | 104 |
consent-management, cookies, lighthouse, google, webpagetest, performance, testing |
Reactivity in Vue (sma) | | 103 |
vuejs, reactivity |
Not Your Typical Horizontal Rules (sar) | | 102 |
html, semantics |
A Deep Dive Into Eleventy Static Site Generator (5t3/sma) | | 101 |
deep-dives, eleventy |
Why Skip-Links Are Important for Accessibility (dev) | | 100 |
accessibility, links |
How to Build a Great Developer Experience | | 99 |
how-tos, developer-experience |
Getting Started With Alpine.js—the Ultimate Guide | | 98 |
introductions, guides, alpinejs |
Taming Blend Modes: “difference” and “exclusion” (ana/css) | | 97 |
css, blend-modes |
A Complete Guide to Accessible Front-End Components (vit/sma) | | 96 |
guides, components, accessibility, focus, buttons, carousels, color-palettes, visualization, testing |
Git Maintenance (bku) | | 95 |
git, maintenance |
React vs. Vue in 2021: Best JavaScript Framework | | 94 |
frameworks, vuejs, react, comparisons |
What Is esbuild? | | 93 |
bundling, esbuild |
Now That’s What I Call Service Worker (mal/ali) | | 92 |
apis, web-workers, javascript |
“prefers-reduced-motion”: Taking a No-Motion-First Approach to Animations | | 91 |
css, animations, accessibility |
What’s New in Flutter 2? (sma) | | 90 |
flutter, dart |
Why Your Website Should Work Without JavaScript | | 89 |
accessibility, javascript, support, graceful-degradation |
The 5-Hour CDN (fly) | | 88 |
performance, content-delivery |
What Is the JavaScript Internationalization API (I18N)? (cra) | | 87 |
javascript, internationalization, apis |
Getting Started With Git—a Simple Beginner’s Guide (kev) | | 86 |
introductions, guides, git, command-line |
What Is Laravel? A Simple Explanation for Beginners | | 85 |
laravel, php, frameworks |
A Year of Transformation: The Web and the World (w3c) | | 84 |
w3c, web, anniversaries |
5 Different Ways to Declare Functions in jQuery (cra) | | 83 |
jquery, javascript, functions |
Minimalism Is Boring | | 82 |
design, minimalism |
How to Use SVG Image Sprites (cra) | | 81 |
how-tos, images, svg, sprites |
Semantic Web and the Knowledge Graph (rob) | | 80 |
semantic-web, metadata, structured-data, search |
Dates in Eleventy (bni) | | 79 |
eleventy |