Life is about deciding who you 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#
CSS Masonry Layout Is Finally Coming: Native Grid Support Explained284
css, masonry, layout
Background Patterns With CSS “corner-radius” (pre/fro)283
css, backgrounds, effects
Modern CSS Code Snippets282
websites, css, comparisons
More Invoker Commands, and More Reasons Not to Use JavaScript Please (paw)281
html
Software Design Principles That Matter280
software-design, principles
CSS Optical Illusions (alv)279
css, effects
Solid.js Best Practices (bre)278
solidjs, best-practices
How to “@ scope” CSS Now That It’s Baseline (dxn/fro)277
css, scope
Fixing the URL Params Performance Penalty (tun/per)276
performance, urls, caching, http-headers
Using the Browser Console for Accessibility Testing275
accessibility, testing, console, javascript
Design Accessible Animation and Movement With Code Examples (pop)274
design, accessibility, animations, css, javascript
Masonry: Things You Won’t Need a Library for Anymore (pat/sma)273
css, masonry, layout, web-platform
A Pragmatic Guide to Modern CSS Colours II (kev/pic)272
guides, css, colors
Brand New Layouts With CSS Subgrid (jos)271
layout, css, grids
Use Cases for Field Sizing (sha)270
forms, css
Blogging Gets Serious in 2001 With Warblogs and Movable Type (ric)269
web, history, blogging, movable-type
How to Write an Accessibility Statement in 2025, With Examples (chr)268
how-tos, accessibility, documentation, compliance, legal
Reading and Writing Files in Node.js—the Complete Modern Guide (loi)267
guides, nodejs, file-handling
The New “progress()” Function in CSS (ami)266
css, functions
A Pragmatic Guide to Modern CSS Colours (kev/pic)265
guides, css, colors
A Few Fun Nesting Tips and Tricks (kev)264
css, nesting, tips-and-tricks
Accessible Form Validation With Examples and Code (pop)263
accessibility, validation, forms
How Much Do You Really Know About Media Queries? (dxn/fro)262
css, media-queries
Mastering npx: A Cheatsheet for npm and Node.js Power Users261
npx, cheat-sheets, nodejs, npm
What Can We Actually Do With “corner-shape”? (dxn/css)260
css, borders, shapes
How to Make Complex Data Accessible for Users With Disabilities (pop)259
how-tos, accessibility, information-design, visualization, tables
The Fundamentals of CSS Alignment (css)258
fundamentals, css, alignment
You No Longer Need JavaScript (reb)257
javascript, css, html
Rolling the Dice With CSS “random()” (jon+/web)256
css, functions, randomness
Another Article About Centering in CSS (bel/pic)255
css, centering
Modern CSS Features You Should Know in 2025254
css
5 Useful CSS Functions Using the New “@ function” Rule (una)253
css, functions
Liquid Glass on the Web (chr/fro)252
design, effects, liquid-glass, apple, css
Eight Skunkworks Projects That Advance Accessibility Without Approval251
accessibility, advocacy
A Label and a Name Walk Into a Bar (ste)250
accessibility, labels, html, concepts
The History of React Through Code (cru/pla)249
react, history
Tips for Making Regular Expressions Easier to Use in JavaScript (rau)248
regex, javascript, tips-and-tricks
Top Storybook Documentation Examples and the Lessons You Can Learn247
storybook, documentation, lessons, link-lists
“aria-selected”: Practical Examples and Use Cases (flo/a11)246
accessibility, aria, html
Translating Accessibility (tpg)245
accessibility, localization, attributes
3 AI Websites That Will Blow Your Mind244
design
A JavaScript Developer’s Guide to Go (psu)243
guides, go, javascript
MCP—the Golden Key for AI Automation242
mcp, ai, automation
Best Examples of EAA Compliant Websites in 2025241
accessibility, eaa, compliance
Multithreading in JavaScript With Web Workers (hon)240
javascript, multithreading, web-workers
Cold vs. Hot Observables in Angular With RxJS239
angular, asynchronicity, reactivity, terminology
Guitar Chords in CSS (sto)238
css, functions
Are “CSS Carousels” Accessible? (sar)237
css, carousels, accessibility
Passkeys for Normal People (tro)236
security, authentication, passkeys, concepts
Node.js Streams With TypeScript235
nodejs, streaming, typescript
11 Practical Ways I Use AI Agents Without Losing My Authenticity (bla/ope)234
ai, ai-agents, creativity, processes
CSS Bursts With Conic Gradients (chr/fro)233
css, gradients, effects
Four Rules for How Design Influences Technology (uxd)232
design, product-management
React 19’s New Hooks: With Practical Examples (let)231
react, hooks, javascript
JavaScript Basics for a Senior Dev230
fundamentals, concepts, javascript
On JavaScript Closures (With Examples of Interview Questions) (mar)229
guest-posts, javascript, closures, variables, interviewing
Prompt Engineering for Web Development228
ai, prompting
Accessible Solutions Benefit Everyone: Here’s How (nng)227
videos, design, accessibility
Using and Styling the “details” Element (geo/css)226
html, css, disclosure-widgets
Learn Zod So You Can Trust Your Data and Your Types (did)225
libraries, types, typescript
Leverage on Redux to Execute Your Tests 100× Times Faster224
react, redux, testing, performance
Examples of Why the Web Needs Anchored Popovers (chr/fro)223
design, pop-overs
Documenting Web Components With Storybook222
documentation, design-systems, web-components, storybook
Extending the Cursor (kyl)221
design, interaction-design, cursors
On Building AI Understanding and Automation Muscle (With 18 Random Problems Solved With AI) (j9t)220
ai, automation
How to Use ARIA Alert Effectively (flo/a11)219
how-tos, aria, accessibility, best-practices
CSS “scroll-state()” (arg/dev)218
css, container-queries, scrolling
TypeScript Generics: A Complete Guide217
guides, typescript, generics
11 YAML Configurations for DevOps Automation216
yaml, configuration, dev-ops, ci-cd, automation
How to Make Your Angular Projects More Accessible215
how-tos, angular, accessibility
React 19 and Web Component Examples (chr/fro)214
react, web-components
Native CSS Nesting Is Here (tre)213
css, nesting
CSS Advent Calendar212
websites, css
CSS Selectors Advent Calendar 2024211
css, selectors
Goodhart’s Law in Action: 3 Webperf Examples (nom/per)210
performance, principles, lighthouse, web-vitals, metrics, google
Beautiful Focus Outlines (med)209
css, focus, accessibility
HTML Cheat Sheet208
html, semantics, cheat-sheets
You Are Not a CSS Dev if You Have Not Made a CSS Reset207
css, resets
How to Build Smaller Container Images: Docker Multi-Stage Builds206
how-tos, containerization, docker
Do’s and Don’ts of Commenting Code205
comments, documentation, best-practices
8 Examples of Versioning in Leading Design Systems204
design-systems, versioning, google, shopify, adobe, atlassian
HTML for People (bw)203
books, websites, html
The Best Examples of Data Visualization in 11 Leading Design Systems202
design-systems, information-design, visualization
A Guide to Destructuring in JavaScript (wil/pic)201
guides, javascript
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)200
images, svg
Better Vue Components With TypeScript (fad)199
vuejs, components, typescript
The Undeniable Utility of CSS “:has” (jos)198
css, selectors
Understanding JavaScript Closures With Examples (tre)197
javascript, closures
Quick Guide to Web Typography for Developers (ole)196
guides, typography, fonts
How I Use “AI”195
ai, productivity
HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier (css)194
html, web-components, principles, solid, progressive-enhancement
Alternative Text in Action193
accessibility, images, alt-text, writing
Understanding JWT Authentication: A Comprehensive Guide With Examples192
guides, json-web-tokens, authentication
Simplest View Transitions Multi Page Demo (No JavaScript) (mor)191
css, view-transitions, apis
HTML Cheat Sheets: From Basics to Advanced Elements190
fundamentals, html, semantics, cheat-sheets
Live Demos of Stand Alone Web Components (chr/fro)189
web-components, link-lists
CSS-Only Custom Range Slider With Motion (bra)188
sliders, css, effects
Let’s Hang! An Intro to CSS Anchor Positioning With Basic Examples (uti)187
introductions, css, anchor-positioning
Flow Charts With CSS Anchor Positioning186
css, apis, anchor-positioning
Introducing the CSS Anchor Positioning API (una/dev)185
introductions, css, apis, anchor-positioning
Simple Implemention to Understand “worker_threads” in Node.js184
nodejs, worker-threads
Radix UI Adoption Guide: Overview, Examples, and Alternatives (log)183
guides, overviews, radix
Printing Music With CSS Grid (ste)182
css, grids
Building a Micro htmx SSR Framework (mco/pla)181
frameworks, htmx
Express.js With TypeScript—Setup, Examples, Testing180
videos, express, typescript, testing
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)179
css, selectors
How npm Install Scripts Can Be Weaponized: A Real-World Example of a Harmful npm Package (eth)178
npm, dependencies, security
Navbar Gallery177
websites, navigation, design-patterns
Definition of Done (DoD) Explanation and Example176
agile, scrum, processes, quality
React Props Explained With Examples175
react, props
Angular Signals: Complete Guide174
guides, angular, signals
CSS Modules (fro)173
css, modules, scope
Streams in Node.js172
nodejs, streaming
Content Negotiation in Practice (sof)171
content-negotiation, http
Svelte by Example (seb)170
websites, svelte
Color Contrast Accessibility Tools With Examples (pop)169
accessibility, tooling, link-lists, colors, contrast
Sharing State With Islands Architecture (max)168
architecture, state-management, astro, react
Securing Your Node.js Apps by Analyzing Real-World Command Injection Examples167
nodejs, security, history
The Spectrum of Openness166
foss, legal
IndexedDB Tutorial for Beginners: A Comprehensive Guide With Coding Examples165
tutorials, guides, databases, indexeddb
A Web Component Intro With Example164
introductions, web-components
Regular Expressions in JavaScript (hon)163
javascript, regex
What Are User Permissions? Concepts, Examples, and Maintenance162
permissions, authorization, concepts
The Real Difference Between “useMemo” and “Memo” in React161
react, hooks, performance
Alternative Text in the Wild: 5 Alternative Text Examples (pop)160
accessibility, writing
Tether Elements to Each Other With CSS Anchor Positioning (jhe/dev)159
css, anchor-positioning, focus, apis
Learn All About Node.js Worker Threads With Examples158
nodejs, worker-threads
Animating CSS Grid (How-To and Examples) (dxn/css)157
css, grids, layout
Useful Accessibility and Usability Examples to Help Improve Your Designs (sma)156
accessibility, usability
Get Off the Main Thread With an Inline Web Worker: An Example (sto/per)155
performance, javascript, web-workers
An Interactive Guide to JavaScript Events (ale)154
guides, javascript, events
CSS Grid vs. Flexbox: How to Decide (With Examples) (ell)153
css, grids, flexbox, layout, comparisons
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)152
css, selectors, cheat-sheets
What Is HCI (Human–Computer Interaction)? Meaning, Importance, Examples, and Goals151
concepts, hci
JavaScript Obfuscation Techniques by Example150
javascript, obfuscation, techniques
HTML Cheatsheet149
html, cheat-sheets
HTML Cheat Sheet: A Quick Reference Guide for HTML Developers148
guides, html, semantics, cheat-sheets
Call to Action Examples147
websites, writing, buttons
HTML Cheat Sheet—HTML Elements List Reference (fre)146
html, semantics, cheat-sheets
Responsive Image Gallery With Animated Captions (5t3)145
images, css, animations, responsive-design
HTML Cheat Sheet144
html, semantics, cheat-sheets
11 Methods to Add CSS/JS Frontend Assets Into TYPO3 (t3p)143
typo3, css, javascript
Introduction to GSAP142
introductions, animations, gsap
HTML Cheatsheet141
html, semantics, cheat-sheets
Modular Code With Nunjucks and Eleventy (jer)140
nunjucks, eleventy
An Unreasonably Long Introduction to ARIA (With Example Implementation)139
introductions, accessibility, aria, live-regions
The Ultimate CSS Flexbox Cheat Sheet With Examples138
css, flexbox, layout, cheat-sheets
The Simplicity of Svelte137
svelte, simplicity
A Complete Guide to Custom Properties (chr/css)136
guides, css, custom-properties
The Principles of Visual Communication (sma)135
design, communication, principles
Node.js Testing Best Practices134
nodejs, testing, best-practices
What Is Parallax Scrolling, Explained With Examples133
parallax, scrolling, effects
The CSS Calculating Function Guide (chr/css)132
guides, css, functions, math
Old CSS, New CSS (eev)131
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 Them130
css, resets, link-lists
Liquid Templating Crash Course129
crash-courses, liquid, template-engines, jekyll
What Is Vuetify? How to Install and Key Components Overview128
vuetify, nuxt, laravel, how-tos
CSS Custom Properties in the Cascade (mia/sma)127
css, custom-properties, cascade
Getting to Know the “useReducer” React Hook (css)126
react, hooks
Micro Frontends (cam/mfo)125
architecture, micro-frontends, backend-for-frontend
How to Section Your HTML (css)124
how-tos, html, semantics
The Thinking Behind Simplifying Event Handlers (not/css)123
javascript, events
An Introduction to Gulp.js (cra)122
introductions, gulp
The Power of Named Transitions in Vue (css)121
vuejs, transitions, css
How “@ supports” Works (chr/css)120
css, feature-detection, support
So You Want to Use Redux—Selectors (ser)119
redux
An Overview of Render Props in React (css)118
overviews, react, props
A Minimal JavaScript Setup (css)117
javascript, conventions, naming, scope, performance, maintainability
What Is SVG Good For? (chr/css)116
svg, images
Introduction to Material Design115
introductions, material-design, google, mobile
Your Interactive Makes Me Sick114
accessibility, scrolling, user-experience
Styling Empty Cells With Generated Content and CSS Grid Layout (rac/sma)113
css, generated-content, grids, layout
Content Security Policy: The Easy Way to Prevent Mixed Content (css)112
csp, wordpress
Custom Elements v1—Reusable Web Components (dev)111
html, maintainability, web-components, shadow-dom, dom
All About React Router 4 (bra/css)110
react, react-router, routing
Stop Using Resets: Visual Examples of the Practical Nonsense of Resets and Normalizers (j9t)109
css, resets
(Now More Than Ever) You Might Not Need jQuery (oll/css)108
jquery, javascript, ajax, performance, comparisons
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)107
css, selectors, sass, mixins
Simple Offline Website (chr/css)106
offline
It’s Time to Start Using CSS Custom Properties (sma)105
css, custom-properties
Let’s Define Exactly What Atomic CSS Is (joh/css)104
atomic-css, presentational-html, concepts, link-lists
CSS Grid: One Layout, Multiple Ways (geo/css)103
css, grids, layout
webcomponents.org102
websites, web-components
Spoooooky CSS Selectors (chr/css)101
css, selectors
Accessible SVGs (css)100
svg, images, accessibility
How to Use ES6 Arguments and Parameters (sma)99
how-tos, ecmascript, javascript
A History of CSS Image Replacement98
css, image-replacement, techniques, history
26 Impressive Web Projects Built With CSS Only97
css, link-lists
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)96
guides, css, selectors
Working With Images in Stylesheets With PostCSS (css)95
css, images, backgrounds, postcss
6 jQuery Infinite Scrolling Demos94
jquery, scrolling
Let’s Learn ES2015 (css)93
ecmascript, javascript, variables, functions, operators
How Good Are Your HTML and CSS Comments? (hey)92
html, css, comments, maintainability, collaboration
Why npm Scripts? (css)91
npm, nodejs, conversion, linting, minification, compression, sprites, images
A Beginner’s Guide to WebGL90
guides, webgl, tooling, link-lists
Using Multi-Step Animations and Transitions (geo/css)89
css, animations, transitions, transforms
Gulp for Beginners (zel/css)88
gulp, automation, installing
The Future Generation of CSS Selectors: Level 4 (lou)87
css, selectors
Designing for Explicit Choice (sma)86
design, forms
Sanitizing, Escaping, and Validating Data in WordPress85
wordpress, sanitization, escaping, validation
Accidental CSS Resets (chr/css)84
css, resets, shorthands
The Good, the Bad, and the Great Examples of Web Typography (sma)83
typography, fonts
A Guide to the HTML5 “time” Element82
guides, html, time
Understanding Transducers81
programming, functions
An Introduction to WAI–ARIA80
introductions, aria, accessibility
jQuery With CoffeeScript (chr/css)79
jquery, coffeescript
CSS Selectors Cheat Sheet78
css, selectors, cheat-sheets
Stripes in CSS (chr/css)77
css, gradients, effects
Using Meta Tags in HTML: Some Basics and Best Practices76
html, metadata, fundamentals, best-practices
Basics of CSS Blend Modes (chr/css)75
fundamentals, css, blend-modes, backgrounds
The Current Generation of CSS3 Selectors (lou)74
css, selectors
Understanding JavaScript “bind()” (sma)73
javascript
Grunt for People Who Think Things Like Grunt Are Weird and Hard (chr/css)72
tooling, grunt, installing
The HTML5 “meter” Element (pan/css)71
html, semantics
A Guide to Web Components (css)70
guides, web-components
Art Directed Articles—Still a Good Idea? (chr/css)69
design, trends, responsive-design, link-lists
Better Web Typography With “font-weight”, Autohinting and “font-feature-settings” (zol)68
typography, css
Controlling CSS Animations and Transitions With JavaScript (zac/css)67
css, animations, transitions, javascript
CSS3 Transition Property Basics (cra)66
css, transitions, fundamentals
A Simple Guide to Semantic Versioning65
guides, semver, versioning, git
Sass Style Guide (chr/css)64
sass, style-guides
Using SVG (chr/css)63
svg, images, css, support, browsers, data-urls, tooling, link-lists
Form Follows Function62
web-platform, experiments, effects
5 Use Cases for Icon Fonts (css)61
icon-fonts, fonts, css
Getting to Know CSS3 Selectors: Structural Pseudo-Classes60
css, selectors
Exploration of Single-Page Websites (sma)59
design, navigation, landing-pages
20 Inspirational Landing Page Designs58
design, landing-pages, link-lists
David Walsh on Redesigning With Sass (chr/css)57
sass, preprocessors, mistakes
5 Inspiring (and Useful) PHP Snippets56
php
Cross Browser Styling of HTML5 Forms—Even in Older Browsers (zol)55
forms, html, css
An Overview of the Web Storage API (cji)54
overviews, browser-storage, apis
Basic JavaScript Regular Expression Example53
javascript, regex
Cross-Site Scripting Attacks (XSS)52
security, xss
Demonstrating Responsive Design51
responsive-design
Responsive Web Design50
responsive-design, css, media-queries
Smallest Possible […] File (mat)49
programming, minimalism, link-lists
An Introduction to Object Oriented CSS (OOCSS) (lou/sma)48
introductions, oocss, css
An Extensive Guide to Web Form Usability (sma)47
guides, forms, usability
Top Minimalist Website Designs: Trends and Examples46
design, minimalism, trends
The Guide to CSS Animation: Principles and Examples (sma)45
guides, css, animations, principles
An Introduction to Less: Less vs. Sass (sma)44
introductions, preprocessors, less, sass
What Makes for a Semantic Class Name? (chr/css)43
html, css, attributes, naming, semantics
Examples of Sites Where localStorage Should or Is Being Used (chr/css)42
browser-storage, apis, javascript
Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma)41
css, selectors, generated-content
Useful “:nth-child” Recipes (chr/css)40
css, selectors
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