Life is about deciding who we are: Join us and decide to be for environmental protection, free education and generous social security, human rights and international law, and, of course, action against oppression and violence (starting with helping the people of occupied Palestine 🇵🇸)! Hide

Frontend Dogma

“examples” News Archive

Definition, related topics, and tag feed

“examples” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
7 View Transitions Recipes to Try (sun/css)298
css, view-transitions
[Pretext] Demos297
libraries, typescript, css, layout
JavaScript for Everyone: Destructuring (wil/css)296
javascript
CSS Masonry Layout Is Finally Coming: Native Grid Support Explained295
css, masonry, layout
Background Patterns With CSS “corner-radius” (pre/fro)294
css, backgrounds, effects
Modern CSS Code Snippets293
websites, css, comparisons
More Invoker Commands, and More Reasons Not to Use JavaScript Please (paw)292
html
Software Design Principles That Matter291
software-design, principles
CSS Optical Illusions (alv)290
css, effects
Solid.js Best Practices (bre)289
solidjs, best-practices
How to “@scope” CSS Now That It’s Baseline (dxn/fro)288
css, scope
Fixing the URL Params Performance Penalty (tun/per)287
performance, urls, caching, http-headers
Using the Browser Console for Accessibility Testing286
accessibility, testing, console, javascript
Design Accessible Animation and Movement With Code Examples (pop)285
design, accessibility, animations, css, javascript
Masonry: Things You Won’t Need a Library for Anymore (pat/sma)284
css, masonry, layout, web-platform
A Pragmatic Guide to Modern CSS Colours II (kev/pic)283
guides, css, colors
Brand New Layouts With CSS Subgrid (jos)282
layout, css, grids
Use Cases for Field Sizing (sha)281
forms, css
Blogging Gets Serious in 2001 With Warblogs and Movable Type (ric)280
web, history, blogging, movable-type
How to Write an Accessibility Statement in 2025, With Examples (chr)279
how-tos, accessibility, documentation, compliance, legal
Reading and Writing Files in Node.js—the Complete Modern Guide (loi)278
guides, nodejs, file-handling
The New “progress()” Function in CSS (ami)277
css, functions
A Pragmatic Guide to Modern CSS Colours (kev/pic)276
guides, css, colors
A Few Fun Nesting Tips and Tricks (kev)275
css, nesting, tips-and-tricks
Accessible Form Validation With Examples and Code (pop)274
accessibility, validation, forms
How Much Do You Really Know About Media Queries? (dxn/fro)273
css, media-queries
Mastering npx: A Cheatsheet for npm and Node.js Power Users272
npx, cheat-sheets, nodejs, npm
What Can We Actually Do With “corner-shape”? (dxn/css)271
css, borders, shapes
How to Make Complex Data Accessible for Users With Disabilities (pop)270
how-tos, accessibility, information-design, visualization, tables
The Fundamentals of CSS Alignment (css)269
fundamentals, css, alignment
You No Longer Need JavaScript (reb)268
javascript, css, html
Rolling the Dice With CSS “random()” (jon+/web)267
css, functions, randomness
Another Article About Centering in CSS (bel/pic)266
css, centering
Modern CSS Features You Should Know in 2025265
css
5 Useful CSS Functions Using the New “@function” Rule (una)264
css, functions
Liquid Glass on the Web (chr/fro)263
design, effects, liquid-glass, apple, css
Eight Skunkworks Projects That Advance Accessibility Without Approval262
accessibility, advocacy
A Label and a Name Walk Into a Bar (ste)261
accessibility, labels, html, concepts
The History of React Through Code (cru/pla)260
react, history
Tips for Making Regular Expressions Easier to Use in JavaScript (rau)259
regex, javascript, tips-and-tricks
Top Storybook Documentation Examples and the Lessons You Can Learn258
storybook, documentation, lessons, link-lists
“aria-selected”: Practical Examples and Use Cases (flo/a11)257
accessibility, aria, html
Translating Accessibility (tpg)256
accessibility, localization, attributes
3 AI Websites That Will Blow Your Mind255
design
A JavaScript Developer’s Guide to Go (psu)254
guides, go, javascript
MCP—the Golden Key for AI Automation253
mcp, ai, automation
Best Examples of EAA Compliant Websites in 2025252
accessibility, eaa, compliance
Multithreading in JavaScript With Web Workers (hon)251
javascript, multithreading, web-workers
Cold vs. Hot Observables in Angular With RxJS250
angular, asynchronicity, reactivity, terminology
Guitar Chords in CSS (sto)249
css, functions
Are “CSS Carousels” Accessible? (sar)248
css, carousels, accessibility
Passkeys for Normal People (tro)247
security, authentication, passkeys, concepts
Node.js Streams With TypeScript246
nodejs, streaming, typescript
11 Practical Ways I Use AI Agents Without Losing My Authenticity (bla/ope)245
ai, ai-agents, creativity, processes
CSS Bursts With Conic Gradients (chr/fro)244
css, gradients, effects
Four Rules for How Design Influences Technology (uxd)243
design, product-management
React 19’s New Hooks: With Practical Examples (let)242
react, hooks, javascript
JavaScript Basics for a Senior Dev241
fundamentals, concepts, javascript
On JavaScript Closures (With Examples of Interview Questions) (mar)240
guest-posts, javascript, closures, variables, interviewing
Prompt Engineering for Web Development239
ai, prompting
Accessible Solutions Benefit Everyone: Here’s How (nng)238
videos, design, accessibility
Using and Styling the “details” Element (geo/css)237
html, css, disclosure-widgets
Learn Zod So You Can Trust Your Data and Your Types (did)236
libraries, types, typescript
Leverage on Redux to Execute Your Tests 100× Times Faster235
react, redux, testing, performance
Examples of Why the Web Needs Anchored Popovers (chr/fro)234
design, pop-overs
Documenting Web Components With Storybook233
documentation, design-systems, web-components, storybook
Extending the Cursor (kyl)232
design, interaction-design, cursors
On Building AI Understanding and Automation Muscle (With 18 Random Problems Solved With AI) (j9t)231
ai, automation
How to Use ARIA Alert Effectively (flo/a11)230
how-tos, aria, accessibility, best-practices
CSS “scroll-state()” (arg)229
css, container-queries, scrolling
TypeScript Generics: A Complete Guide228
guides, typescript, generics
11 YAML Configurations for DevOps Automation227
yaml, configuration, dev-ops, ci-cd, automation
How to Make Your Angular Projects More Accessible226
how-tos, angular, accessibility
React 19 and Web Component Examples (chr/fro)225
react, web-components
Native CSS Nesting Is Here (tre)224
css, nesting
CSS Advent Calendar223
websites, css
CSS Selectors Advent Calendar 2024222
css, selectors
Goodhart’s Law in Action: 3 Webperf Examples (nom/per)221
performance, principles, lighthouse, web-vitals, metrics, google
Beautiful Focus Outlines (med)220
css, focus, accessibility
HTML Cheat Sheet219
html, semantics, cheat-sheets
You Are Not a CSS Dev if You Have Not Made a CSS Reset218
css, resets
How to Build Smaller Container Images: Docker Multi-Stage Builds217
how-tos, containerization, docker
Do’s and Don’ts of Commenting Code216
comments, documentation, best-practices
8 Examples of Versioning in Leading Design Systems215
design-systems, versioning, ibm, google, shopify, adobe, atlassian
HTML for People (bw)214
books, websites, html
The Best Examples of Data Visualization in 11 Leading Design Systems213
design-systems, information-design, visualization
A Guide to Destructuring in JavaScript (wil/pic)212
guides, javascript
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)211
images, svg
Better Vue Components With TypeScript (fad)210
vuejs, components, typescript
The Undeniable Utility of CSS “:has” (jos)209
css, selectors
Understanding JavaScript Closures With Examples (tre)208
javascript, closures
Quick Guide to Web Typography for Developers (ole)207
guides, typography, fonts
How I Use “AI”206
ai, productivity
HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier (css)205
html, web-components, principles, solid, progressive-enhancement
Alternative Text in Action204
accessibility, images, alt-text, writing
Understanding JWT Authentication: A Comprehensive Guide With Examples203
guides, json-web-tokens, authentication
Simplest View Transitions Multi Page Demo (No JavaScript) (mor)202
css, view-transitions, apis
HTML Cheat Sheets: From Basics to Advanced Elements201
fundamentals, html, semantics, cheat-sheets
Live Demos of Stand Alone Web Components (chr/fro)200
web-components, link-lists
CSS-Only Custom Range Slider With Motion (bra)199
sliders, css, effects
Let’s Hang! An Intro to CSS Anchor Positioning With Basic Examples (uti)198
introductions, css, anchor-positioning
Flow Charts With CSS Anchor Positioning197
css, apis, anchor-positioning
Introducing the CSS Anchor Positioning API (una)196
introductions, css, apis, anchor-positioning
Simple Implemention to Understand “worker_threads” in Node.js195
nodejs, worker-threads
Radix UI Adoption Guide: Overview, Examples, and Alternatives (log)194
guides, overviews, radix
Printing Music With CSS Grid (ste)193
css, grids
Building a Micro htmx SSR Framework (mco/pla)192
frameworks, htmx
Express.js With TypeScript—Setup, Examples, Testing191
videos, express, typescript, testing
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)190
css, selectors
How npm Install Scripts Can Be Weaponized: A Real-World Example of a Harmful npm Package (eth)189
npm, dependencies, security
Navbar Gallery188
websites, navigation, design-patterns
Definition of Done (DoD) Explanation and Example187
agile, scrum, processes, quality
React Props Explained With Examples186
react, props
Angular Signals: Complete Guide185
guides, angular, signals
CSS Modules (fro)184
css, modules, scope
Streams in Node.js183
nodejs, streaming
Content Negotiation in Practice (sof)182
content-negotiation, http
Svelte by Example (seb)181
websites, svelte
Color Contrast Accessibility Tools With Examples (pop)180
accessibility, tooling, link-lists, colors, contrast
Sharing State With Islands Architecture (max)179
architecture, state-management, astro, react
Securing Your Node.js Apps by Analyzing Real-World Command Injection Examples178
nodejs, security, history
The Spectrum of Openness177
foss, legal
IndexedDB Tutorial for Beginners: A Comprehensive Guide With Coding Examples176
tutorials, guides, databases, indexeddb
A Web Component Intro With Example175
introductions, web-components
Regular Expressions in JavaScript (hon)174
javascript, regex
What Are User Permissions? Concepts, Examples, and Maintenance173
permissions, authorization, concepts
The Real Difference Between “useMemo” and “Memo” in React172
react, hooks, performance
Alternative Text in the Wild: 5 Alternative Text Examples (pop)171
accessibility, writing
Tether Elements to Each Other With CSS Anchor Positioning (jhe)170
css, anchor-positioning, focus, apis
Learn All About Node.js Worker Threads With Examples169
nodejs, worker-threads
Animating CSS Grid (How-To and Examples) (dxn/css)168
css, grids, layout
Useful Accessibility and Usability Examples to Help Improve Your Designs (sma)167
accessibility, usability
Get Off the Main Thread With an Inline Web Worker: An Example (sto/per)166
performance, javascript, web-workers
An Interactive Guide to JavaScript Events (ale)165
guides, javascript, events
CSS Grid vs. Flexbox: How to Decide (With Examples) (ell)164
css, grids, flexbox, layout, comparisons
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)163
css, selectors, cheat-sheets
What Is HCI (Human–Computer Interaction)? Meaning, Importance, Examples, and Goals162
concepts, hci
JavaScript Obfuscation Techniques by Example161
javascript, obfuscation, techniques
HTML Cheatsheet160
html, cheat-sheets
HTML Cheat Sheet: A Quick Reference Guide for HTML Developers159
guides, html, semantics, cheat-sheets
Call to Action Examples158
websites, writing, buttons
HTML Cheat Sheet—HTML Elements List Reference (fre)157
html, semantics, cheat-sheets
Responsive Image Gallery With Animated Captions (5t3)156
images, css, animations, responsive-design
HTML Cheat Sheet155
html, semantics, cheat-sheets
11 Methods to Add CSS/JS Frontend Assets Into TYPO3 (t3p)154
typo3, css, javascript
Introduction to GSAP153
introductions, animations, gsap
HTML Cheatsheet152
html, semantics, cheat-sheets
Modular Code With Nunjucks and Eleventy (jer)151
nunjucks, eleventy
An Unreasonably Long Introduction to ARIA (With Example Implementation)150
introductions, accessibility, aria, live-regions
The Ultimate CSS Flexbox Cheat Sheet With Examples149
css, flexbox, layout, cheat-sheets
The Simplicity of Svelte148
svelte, simplicity
A Complete Guide to Custom Properties (chr/css)147
guides, css, custom-properties
The Principles of Visual Communication (sma)146
design, communication, principles
Node.js Testing Best Practices145
nodejs, testing, best-practices
What Is Parallax Scrolling, Explained With Examples144
parallax, scrolling, effects
The CSS Calculating Function Guide (chr/css)143
guides, css, functions, math
Old CSS, New CSS (eev)142
css, html, history, browser-wars, doctype-switching, dhtml, web-2.0, hacks, vendor-extensions, flexbox, layout
A Tale of CSS Resets and Everything You Need to Know About Them141
css, resets, link-lists
Liquid Templating Crash Course140
crash-courses, liquid, template-engines, jekyll
What Is Vuetify? How to Install and Key Components Overview139
vuetify, nuxt, laravel, how-tos
CSS Custom Properties in the Cascade (mia/sma)138
css, custom-properties, cascade
Getting to Know the “useReducer” React Hook (css)137
react, hooks
Micro Frontends (cam/mfo)136
architecture, micro-frontends, backend-for-frontend
How to Section Your HTML (css)135
how-tos, html, semantics
The Thinking Behind Simplifying Event Handlers (not/css)134
javascript, events
An Introduction to Gulp.js (cra)133
introductions, gulp
The Power of Named Transitions in Vue (css)132
vuejs, transitions, css
How “@supports” Works (chr/css)131
css, feature-detection, support
So You Want to Use Redux—Selectors (ser)130
redux
An Overview of Render Props in React (css)129
overviews, react, props
A Minimal JavaScript Setup (css)128
javascript, conventions, naming, scope, performance, maintainability
What Is SVG Good For? (chr/css)127
svg, images
Introduction to Material Design126
introductions, material-design, google, mobile
Your Interactive Makes Me Sick125
accessibility, scrolling, user-experience
Styling Empty Cells With Generated Content and CSS Grid Layout (rac/sma)124
css, generated-content, grids, layout
Content Security Policy: The Easy Way to Prevent Mixed Content (css)123
csp, wordpress
Custom Elements v1—Reusable Web Components122
html, maintainability, web-components, shadow-dom, dom
All About React Router 4 (bra/css)121
react, react-router, routing
Stop Using Resets: Visual Examples of the Practical Nonsense of Resets and Normalizers (j9t)120
css, resets
(Now More Than Ever) You Might Not Need jQuery (oll/css)119
jquery, javascript, ajax, performance, comparisons
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)118
css, selectors, sass, mixins
Simple Offline Website (chr/css)117
offline
It’s Time to Start Using CSS Custom Properties (sma)116
css, custom-properties
Let’s Define Exactly What Atomic CSS Is (joh/css)115
atomic-css, presentational-html, concepts, link-lists
CSS Grid: One Layout, Multiple Ways (geo/css)114
css, grids, layout
webcomponents.org113
websites, web-components
Spoooooky CSS Selectors (chr/css)112
css, selectors
How to Write Your Own Custom Sass Functions111
how-tos, sass, functions
Accessible SVGs (css)110
svg, images, accessibility
How to Use ES6 Arguments and Parameters (sma)109
how-tos, ecmascript, javascript
A History of CSS Image Replacement108
css, image-replacement, techniques, history
26 Impressive Web Projects Built With CSS Only107
css, link-lists
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)106
guides, css, selectors
Working With Images in Stylesheets With PostCSS (css)105
css, images, backgrounds, postcss
6 jQuery Infinite Scrolling Demos104
jquery, scrolling
Let’s Learn ES2015 (css)103
ecmascript, javascript, variables, functions, operators
How Good Are Your HTML and CSS Comments? (hey)102
html, css, comments, maintainability, collaboration
Sass: The “@mixin” Directive101
sass, mixins
Why npm Scripts? (css)100
npm, nodejs, conversion, linting, minification, compression, sprites, images
Sass: The “@extend” Directive99
sass
Sass: The “@import” Directive98
sass
Sass: The “@media” Directive97
sass
A Beginner’s Guide to WebGL96
guides, webgl, tooling, link-lists
Using Multi-Step Animations and Transitions (geo/css)95
css, animations, transitions, transforms
How to Use Sass Variables94
how-tos, sass, variables
Gulp for Beginners (zel/css)93
gulp, automation, installing
The Future Generation of CSS Selectors: Level 4 (lou)92
css, selectors
Designing for Explicit Choice (sma)91
design, forms
Sanitizing, Escaping, and Validating Data in WordPress90
wordpress, sanitization, escaping, validation
Accidental CSS Resets (chr/css)89
css, resets, shorthands
The Good, the Bad, and the Great Examples of Web Typography (sma)88
typography, fonts
A Guide to the HTML5 “time” Element87
guides, html, time
Understanding Transducers86
programming, functions
An Introduction to WAI–ARIA85
introductions, aria, accessibility
jQuery With CoffeeScript (chr/css)84
jquery, coffeescript
CSS Selectors Cheat Sheet83
css, selectors, cheat-sheets
Stripes in CSS (chr/css)82
css, gradients, effects
Using Meta Tags in HTML: Some Basics and Best Practices81
html, metadata, fundamentals, best-practices
Basics of CSS Blend Modes (chr/css)80
fundamentals, css, blend-modes, backgrounds
The Current Generation of CSS3 Selectors (lou)79
css, selectors
Understanding JavaScript “bind()” (sma)78
javascript
Grunt for People Who Think Things Like Grunt Are Weird and Hard (chr/css)77
tooling, grunt, installing
The HTML5 “meter” Element (pan/css)76
html, semantics
A Guide to Web Components (css)75
guides, web-components
Art Directed Articles—Still a Good Idea? (chr/css)74
design, art-direction, trends, responsive-design, link-lists
Better Web Typography With “font-weight”, Autohinting and “font-feature-settings” (zol)73
typography, css
Controlling CSS Animations and Transitions With JavaScript (zac/css)72
css, animations, transitions, javascript
CSS Clipping and Masking: Examples and Observations71
css, clipping, masking, shapes
CSS3 Transition Property Basics (cra)70
css, transitions, fundamentals
A Simple Guide to Semantic Versioning69
guides, semver, versioning, git
Sass Style Guide (chr/css)68
sass, style-guides
Using SVG (chr/css)67
svg, images, css, support, browsers, data-urls, tooling, link-lists
Form Follows Function66
web-platform, experiments, effects
5 Use Cases for Icon Fonts (css)65
icon-fonts, fonts, css
Getting to Know CSS3 Selectors: Structural Pseudo-Classes64
css, selectors
Exploration of Single-Page Websites (sma)63
design, navigation, landing-pages
20 Inspirational Landing Page Designs62
design, landing-pages, link-lists
David Walsh on Redesigning With Sass (chr/css)61
sass, preprocessors, mistakes
5 Inspiring (and Useful) PHP Snippets60
php
Cross Browser Styling of HTML5 Forms—Even in Older Browsers (zol)59
forms, html, css
An Overview of the Web Storage API (cji)58
overviews, browser-storage, apis
Basic JavaScript Regular Expression Example57
javascript, regex
Cross-Site Scripting Attacks (XSS)56
security, xss
How Should You Format Your CSS?55
css, formatting, consistency, maintainability
Demonstrating Responsive Design54
responsive-design
The 2 Principles of Object Oriented CSS53
oocss, css, principles
Responsive Web Design52
responsive-design, css, media-queries
Smallest Possible […] File (mat)51
programming, minimalism, link-lists
An Introduction to Object Oriented CSS (OOCSS) (lou/sma)50
introductions, oocss, css
An Extensive Guide to Web Form Usability (sma)49
guides, forms, usability
Top Minimalist Website Designs: Trends and Examples48
design, minimalism, trends
The Guide to CSS Animation: Principles and Examples (sma)47
guides, css, animations, principles
An Introduction to Less: Less vs. Sass (sma)46
introductions, preprocessors, less, sass
What Makes for a Semantic Class Name? (chr/css)45
html, css, attributes, naming, semantics
Examples of Sites Where localStorage Should or Is Being Used (chr/css)44
browser-storage, apis, javascript
6 Methods for Vertical Centering With CSS43
css, centering, techniques
Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma)42
css, selectors, generated-content
Useful “:nth-child” Recipes (chr/css)41
css, selectors
4 Methods for Creating Equal Height Columns in CSS40
css, layout, techniques
Website Navigation: Planning and Implementing (vit/sma)39
navigation
Getting Started With Defensive Web Design (sma)38
introductions, design
How to Use CSS3 Pseudo-Classes (sma)37
how-tos, css, selectors
The Art of the Single Page Web Site36
design, link-lists
CSS Reset35
websites, css, resets, overviews
Video for Everybody (kro)34
html, multimedia
JS1k: The JavaScript Code Golfing Competition (pvd)33
websites, javascript
The Art of the Web Background32
design, backgrounds, link-lists
CSS Gradients (chr/css)31
css, gradients, backgrounds
SVG Wow30
websites, svg, images
50 Cool JavaScript Examples and CSS3 Tricks (vit/sma)29
javascript, css, tips-and-tricks, link-lists
Cross Browser HTML5 Drag and Drop (zol)28
html, attributes, drag-and-drop, javascript
Taming Advanced CSS Selectors (sma)27
css, selectors
Different Ways to Format CSS (chr/css)26
css, formatting
Effective Website Maintenance: Examples and Best Practices (sma)25
maintenance, maintainability, best-practices
How to Customise Your 404 Page24
error-pages, customization, usability, user-experience
CSS Browser Hacks (dal/aja)23
css, hacks
88 Outstanding Favicons and 6 Resources to Help You Create Your Own22
images, favicons, link-lists
Groups of 50+ AJAX Examples (dal/aja)21
ajax, javascript, link-lists
Footers in Web Design: Creative Examples and Ideas (sma)20
navigation, design
Cool and Useful GWT Solutions (dal/aja)19
gwt
User Agent Style Sheets: Basics and Samples (j9t)18
browsers, css, fundamentals
CSS Specificity: Things You Should Know (sma)17
css, selectors, cascade
Seven JavaScript Techniques You Should Be Using Today (dig)16
javascript, techniques
Prepare for Attack—Making Your Web Applications More Secure15
web-apps, security, sql, xss
Usability Conventions: Basics and Examples (j9t)14
fundamentals, conventions, usability
CSS-Based Forms: Modern Solutions (sma)13
forms, css, link-lists
JavaScript Closures for Dummies12
javascript, closures
Big, Stark, and Chunky (ali)11
accessibility, zooming, screen-magnification
Lateral—the Alt Text Failure10
accessibility, alt-text, images
CSS Zen Garden: The Beauty in CSS Design (dav)9
websites, css, design, css-zen-garden
CSS Zen Garden (dav)8
css, design, css-zen-garden
A Touch of Class (tan)7
html, attributes, semantics
Providing Text Equivalents for Images (div)6
alt-text, accessibility, images, link-lists
PHP by Example5
php
DOM Design Tricks III: Using Events in the Document Object Model (jde/ali)4
dom, javascript, events, tips-and-tricks
DOM Design Tricks II (jde/ali)3
dom, javascript, tips-and-tricks
DOM Design Tricks (jde/ali)2
dom, javascript, tips-and-tricks
Using Frames: Some Examples of Good Frames Usage1
html, frames