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