Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s occupation, destruction, and ethnic cleansing of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“examples” News Archive

Definition, related topics, and tag feed

“examples” RSS feed (per email)

Entry (Sources) and Other Related TopicsDate#
Brand New Layouts With CSS Subgrid (jos)262
layout, css, grids
Use Cases for Field Sizing (sha)261
forms, css
Blogging Gets Serious in 2001 With Warblogs and Movable Type (ric)260
history, blogging
How to Write an Accessibility Statement in 2025, With Examples (chr)259
how-tos, accessibility, documentation, compliance, legal
Reading and Writing Files in Node.js—the Complete Modern Guide (loi)258
guides, nodejs, file-handling
The New “progress()” Function in CSS (ami)257
css, functions
A Pragmatic Guide to Modern CSS Colours (kev/pic)256
guides, css, colors
A Few Fun Nesting Tips and Tricks (kev)255
css, nesting, tips-and-tricks
Accessible Form Validation With Examples and Code (pop)254
accessibility, validation, forms
How Much Do You Really Know About Media Queries? (dxn/fro)253
css, media-queries
Mastering npx: A Cheatsheet for npm and Node.js Power Users252
npx, cheat-sheets, nodejs, npm
What Can We Actually Do With “corner-shape”? (dxn/css)251
css, borders, shapes
How to Make Complex Data Accessible for Users With Disabilities (pop)250
how-tos, accessibility, information-design, visualization, tables
The Fundamentals of CSS Alignment (css)249
fundamentals, css, alignment
You No Longer Need JavaScript (reb)248
javascript, css, html
Rolling the Dice With CSS “random()” (jon+/web)247
css, functions, randomness
Another Article About Centering in CSS (bel/pic)246
css, centering
5 Useful CSS Functions Using the New “@ function” Rule (una)245
css, functions
Liquid Glass on the Web (chr/fro)244
design, effects, liquid-glass, apple, css
Eight Skunkworks Projects That Advance Accessibility Without Approval243
accessibility, advocacy
A Label and a Name Walk Into a Bar (ste)242
accessibility, labels, html, concepts
The History of React Through Code (cru/pla)241
react, history
Tips for Making Regular Expressions Easier to Use in JavaScript (rau)240
regex, javascript, tips-and-tricks
Top Storybook Documentation Examples and the Lessons You Can Learn239
storybook, documentation, lessons, link-lists
“aria-selected”: Practical Examples and Use Cases (flo/a11)238
accessibility, aria, html
Translating Accessibility (tpg)237
accessibility, localization, attributes
3 AI Websites That Will Blow Your Mind236
design
A JavaScript Developer’s Guide to Go (psu)235
guides, go, javascript
MCP—the Golden Key for AI Automation234
mcp, ai, automation
Best Examples of EAA Compliant Websites in 2025233
accessibility, eaa, compliance
Multithreading in JavaScript With Web Workers (hon)232
javascript, multithreading, web-workers
Cold vs. Hot Observables in Angular With RxJS231
angular, asynchronicity, reactivity, terminology
Guitar Chords in CSS (sto)230
css, functions
Are “CSS Carousels” Accessible? (sar)229
css, carousels, accessibility
Passkeys for Normal People (tro)228
security, authentication, passkeys, concepts
Node.js Streams With TypeScript227
nodejs, streaming, typescript
11 Practical Ways I Use AI Agents Without Losing My Authenticity (bla/ope)226
ai, creativity, processes
CSS Bursts With Conic Gradients (chr/fro)225
css, gradients, effects
Four Rules for How Design Influences Technology (uxd)224
design, product-management
React 19’s New Hooks: With Practical Examples (let)223
react, hooks, javascript
JavaScript Basics for a Senior Dev222
fundamentals, concepts, javascript
On JavaScript Closures (With Examples of Interview Questions) (mar)221
guest-posts, javascript, closures, variables, interviewing
Prompt Engineering for Web Development220
ai, prompting
Accessible Solutions Benefit Everyone: Here’s How (nng)219
videos, design, accessibility
Using and Styling the “details” Element (geo/css)218
html, css, disclosure-widgets
Learn Zod So You Can Trust Your Data and Your Types (did)217
libraries, types, typescript
Leverage on Redux to Execute Your Tests 100× Times Faster216
react, redux, testing, performance
Examples of Why the Web Needs Anchored Popovers (chr/fro)215
design, pop-overs
Documenting Web Components With Storybook214
documentation, design-systems, web-components, storybook
Extending the Cursor (kyl)213
design, interaction-design, cursors
On Building AI Understanding and Automation Muscle (With 18 Random Problems Solved With AI) (j9t)212
ai, automation
How to Use ARIA Alert Effectively (flo/a11)211
how-tos, aria, accessibility, best-practices
CSS “scroll-state()” (arg/dev)210
css, container-queries, scrolling
TypeScript Generics: A Complete Guide209
guides, typescript, generics
11 YAML Configurations for DevOps Automation208
yaml, configuration, dev-ops, ci-cd, automation
How to Make Your Angular Projects More Accessible207
how-tos, angular, accessibility
React 19 and Web Component Examples (chr/fro)206
react, web-components
Native CSS Nesting Is Here (tre)205
css, nesting
CSS Advent Calendar204
websites, css
CSS Selectors Advent Calendar 2024203
css, selectors
Goodhart’s Law in Action: 3 Webperf Examples (nom/per)202
performance, principles, lighthouse, web-vitals, metrics, google
Beautiful Focus Outlines (med)201
css, focus, accessibility
HTML Cheat Sheet200
html, semantics, cheat-sheets
You Are Not a CSS Dev if You Have Not Made a CSS Reset199
css, resets
How to Build Smaller Container Images: Docker Multi-Stage Builds198
how-tos, containerization, docker
Do’s and Don’ts of Commenting Code197
comments, documentation, best-practices
8 Examples of Versioning in Leading Design Systems196
design-systems, versioning, google, shopify, adobe, atlassian
HTML for People (bw)195
books, websites, html
The Best Examples of Data Visualization in 11 Leading Design Systems194
design-systems, information-design, visualization
A Guide to Destructuring in JavaScript (wil/pic)193
guides, javascript
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)192
images, svg
Better Vue Components With TypeScript (fad)191
vuejs, components, typescript
The Undeniable Utility of CSS “:has” (jos)190
css, selectors
Understanding JavaScript Closures With Examples (tre)189
javascript, closures
Quick Guide to Web Typography for Developers (ole)188
guides, typography, fonts
How I Use “AI”187
ai, productivity
HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier (css)186
html, web-components, principles, solid, progressive-enhancement
Alternative Text in Action185
accessibility, images, alt-text, writing
Understanding JWT Authentication: A Comprehensive Guide With Examples184
guides, json-web-tokens, authentication
Simplest View Transitions Multi Page Demo (No JavaScript) (mor)183
css, view-transitions, apis
HTML Cheat Sheets: From Basics to Advanced Elements182
fundamentals, html, semantics, cheat-sheets
Live Demos of Stand Alone Web Components (chr/fro)181
web-components, link-lists
CSS-Only Custom Range Slider With Motion (bra)180
sliders, css, effects
Let’s Hang! An Intro to CSS Anchor Positioning With Basic Examples (uti)179
introductions, css, anchor-positioning
Flow Charts With CSS Anchor Positioning178
css, apis, anchor-positioning
Introducing the CSS Anchor Positioning API (una/dev)177
introductions, css, apis, anchor-positioning
Simple Implemention to Understand “worker_threads” in Node.js176
nodejs, worker-threads
Radix UI Adoption Guide: Overview, Examples, and Alternatives (log)175
guides, overviews, radix
Printing Music With CSS Grid (ste)174
css, grids
Building a Micro htmx SSR Framework (mco/pla)173
frameworks, htmx
Express.js With TypeScript—Setup, Examples, Testing172
videos, express, typescript, testing
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)171
css, selectors
How npm Install Scripts Can Be Weaponized: A Real-World Example of a Harmful npm Package (eth)170
npm, dependencies, security
Navbar Gallery169
websites, navigation, design-patterns
Definition of Done (DoD) Explanation and Example168
agile, scrum, processes, quality
React Props Explained With Examples167
react, props
Angular Signals: Complete Guide166
guides, angular, signals
CSS Modules (fro)165
css, modules, scope
Streams in Node.js164
nodejs, streaming
Content Negotiation in Practice (sof)163
content-negotiation, http
Svelte by Example (seb)162
websites, svelte
Color Contrast Accessibility Tools With Examples (pop)161
accessibility, tooling, link-lists, colors, contrast
Sharing State With Islands Architecture (max)160
architecture, state-management, astro, react
Securing Your Node.js Apps by Analyzing Real-World Command Injection Examples159
nodejs, security, history
The Spectrum of Openness158
foss, legal
IndexedDB Tutorial for Beginners: A Comprehensive Guide With Coding Examples157
tutorials, guides, databases, indexeddb
A Web Component Intro With Example156
introductions, web-components
Regular Expressions in JavaScript (hon)155
javascript, regex
What Are User Permissions? Concepts, Examples, and Maintenance154
permissions, authorization, concepts
The Real Difference Between “useMemo” and “Memo” in React153
react, hooks, performance
Alternative Text in the Wild: 5 Alternative Text Examples (pop)152
accessibility, writing
Tether Elements to Each Other With CSS Anchor Positioning (jhe/dev)151
css, anchor-positioning, focus, apis
Learn All About Node.js Worker Threads With Examples150
nodejs, worker-threads
Animating CSS Grid (How-To and Examples) (dxn/css)149
css, grids, layout
Useful Accessibility and Usability Examples to Help Improve Your Designs (sma)148
accessibility, usability
Get Off the Main Thread With an Inline Web Worker: An Example (sto/per)147
performance, javascript, web-workers
An Interactive Guide to JavaScript Events (ale)146
guides, javascript, events
CSS Grid vs. Flexbox: How to Decide (With Examples) (ell)145
css, grids, flexbox, layout, comparisons
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)144
css, selectors, cheat-sheets
What Is HCI (Human-Computer Interaction)? Meaning, Importance, Examples, and Goals143
concepts, hci
JavaScript Obfuscation Techniques by Example142
javascript, obfuscation, techniques
HTML Cheatsheet141
html, cheat-sheets
HTML Cheat Sheet: A Quick Reference Guide for HTML Developers140
guides, html, semantics, cheat-sheets
Call to Action Examples139
websites, writing, buttons
HTML Cheat Sheet—HTML Elements List Reference (fre)138
html, semantics, cheat-sheets
Responsive Image Gallery With Animated Captions (5t3)137
images, css, animations, responsive-design
HTML Cheat Sheet136
html, semantics, cheat-sheets
11 Methods to Add CSS/JS Frontend Assets Into TYPO3 (t3p)135
typo3, css, javascript
Introduction to GSAP134
introductions, animations, gsap
HTML Cheatsheet133
html, semantics, cheat-sheets
Modular Code With Nunjucks and Eleventy (jer)132
nunjucks, eleventy
An Unreasonably Long Introduction to ARIA (With Example Implementation)131
introductions, accessibility, aria, live-regions
The Ultimate CSS Flexbox Cheat Sheet With Examples130
css, flexbox, layout, cheat-sheets
The Simplicity of Svelte129
svelte, simplicity
A Complete Guide to Custom Properties (chr/css)128
guides, css, custom-properties
The Principles of Visual Communication (sma)127
design, communication, principles
Node.js Testing Best Practices126
nodejs, testing, best-practices
What Is Parallax Scrolling, Explained With Examples125
parallax, scrolling, effects
The CSS Calculating Function Guide (chr/css)124
guides, css, functions, math
Old CSS, New CSS (eev)123
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 Them122
css, resets, link-lists
Liquid Templating Crash Course121
crash-courses, liquid, template-engines, jekyll
What Is Vuetify? How to Install and Key Components Overview120
vuetify, nuxt, laravel, how-tos
CSS Custom Properties in the Cascade (mia/sma)119
css, custom-properties, cascade
Getting to Know the “useReducer” React Hook (css)118
react, hooks
Micro Frontends (cam/mfo)117
architecture, micro-frontends, backend-for-frontend
How to Section Your HTML (css)116
how-tos, html, semantics
The Thinking Behind Simplifying Event Handlers (not/css)115
javascript, events
An Introduction to Gulp.js (cra)114
introductions, gulp
The Power of Named Transitions in Vue (css)113
vuejs, transitions, css
How “@ supports” Works (chr/css)112
css, support
An Overview of Render Props in React (css)111
overviews, react, props
A Minimal JavaScript Setup (css)110
javascript, conventions, naming, scope, performance, maintainability
What Is SVG Good For? (chr/css)109
svg, images
Introduction to Material Design108
introductions, material-design, google, mobile
Your Interactive Makes Me Sick107
accessibility, scrolling, user-experience
Styling Empty Cells With Generated Content and CSS Grid Layout (rac/sma)106
css, generated-content, grids, layout
Content Security Policy: The Easy Way to Prevent Mixed Content (css)105
csp, wordpress
Custom Elements v1—Reusable Web Components (dev)104
html, maintainability, web-components, shadow-dom, dom
All About React Router 4 (bra/css)103
react, react-router, routing
Stop Using Resets: Visual Examples of the Practical Nonsense of Resets and Normalizers (j9t)102
css, resets
(Now More Than Ever) You Might Not Need jQuery (oll/css)101
jquery, javascript, ajax, performance, comparisons
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)100
css, selectors, sass, mixins
Simple Offline Website (chr/css)99
offline
It’s Time to Start Using CSS Custom Properties (sma)98
css, custom-properties
Let’s Define Exactly What Atomic CSS Is (joh/css)97
atomic-css, presentational-html, concepts, link-lists
CSS Grid: One Layout, Multiple Ways (geo/css)96
css, grids, layout
webcomponents.org95
websites, web-components
Spoooooky CSS Selectors (chr/css)94
css, selectors
Accessible SVGs (css)93
svg, images, accessibility
How to Use ES6 Arguments and Parameters (sma)92
how-tos, ecmascript, javascript
A History of CSS Image Replacement91
css, image-replacement, techniques, history
26 Impressive Web Projects Built With CSS Only90
css, link-lists
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)89
guides, css, selectors
Working With Images in Stylesheets With PostCSS (css)88
css, images, backgrounds, postcss
6 jQuery Infinite Scrolling Demos87
jquery, scrolling
Let’s Learn ES2015 (css)86
ecmascript, javascript, variables, functions, operators
How Good Are Your HTML and CSS Comments? (hey)85
html, css, comments, maintainability, collaboration
Why npm Scripts? (css)84
npm, nodejs, conversion, linting, minification, compression, sprites, images
A Beginner’s Guide to WebGL83
guides, webgl, tooling, link-lists
Using Multi-Step Animations and Transitions (geo/css)82
css, animations, transitions, transforms
Gulp for Beginners (zel/css)81
gulp, automation, installing
The Future Generation of CSS Selectors: Level 4 (lou)80
css, selectors
Designing for Explicit Choice (sma)79
design, forms
Sanitizing, Escaping, and Validating Data in WordPress78
wordpress, sanitization, escaping, validation
Accidental CSS Resets (chr/css)77
css, resets, shorthands
The Good, the Bad, and the Great Examples of Web Typography (sma)76
typography, fonts
A Guide to the HTML5 “time” Element75
guides, html, time
Understanding Transducers74
programming, functions
An Introduction to WAI–ARIA73
introductions, aria, accessibility
jQuery With CoffeeScript (chr/css)72
jquery, coffeescript
CSS Selectors Cheat Sheet71
css, selectors, cheat-sheets
Stripes in CSS (chr/css)70
css, gradients, effects
Using Meta Tags in HTML: Some Basics and Best Practices69
html, metadata, fundamentals, best-practices
Basics of CSS Blend Modes (chr/css)68
fundamentals, css, blend-modes, backgrounds
The Current Generation of CSS3 Selectors (lou)67
css, selectors
Understanding JavaScript “bind()” (sma)66
javascript
Grunt for People Who Think Things Like Grunt Are Weird and Hard (chr/css)65
tooling, grunt, installing
The HTML5 “meter” Element (pan/css)64
html, semantics
A Guide to Web Components (css)63
guides, web-components
Art Directed Articles—Still a Good Idea? (chr/css)62
design, trends, responsive-design, link-lists
Controlling CSS Animations and Transitions With JavaScript (zac/css)61
css, animations, transitions, javascript
CSS3 Transition Property Basics (cra)60
css, transitions, fundamentals
A Simple Guide to Semantic Versioning59
guides, semver, versioning, git
Sass Style Guide (chr/css)58
sass, style-guides
Using SVG (chr/css)57
svg, images, css, support, browsers, data-urls, tooling, link-lists
Form Follows Function56
web-platform, experiments, effects
5 Use Cases for Icon Fonts (css)55
icon-fonts, fonts, css
Getting to Know CSS3 Selectors: Structural Pseudo-Classes54
css, selectors
Exploration of Single-Page Websites (sma)53
design, navigation, landing-pages
20 Inspirational Landing Page Designs52
design, landing-pages, link-lists
David Walsh on Redesigning With Sass (chr/css)51
sass, preprocessors, mistakes
5 Inspiring (and Useful) PHP Snippets50
php
An Overview of the Web Storage API (cji)49
overviews, browser-storage, apis
Basic JavaScript Regular Expression Example48
javascript, regex
Cross-Site Scripting Attacks (XSS)47
security, xss
Demonstrating Responsive Design46
responsive-design
Responsive Web Design45
responsive-design, css, media-queries
Smallest Possible […] File (mat)44
programming, minimalism, link-lists
An Introduction to Object Oriented CSS (OOCSS) (lou/sma)43
introductions, oocss, css
An Extensive Guide to Web Form Usability (sma)42
guides, forms, usability
Top Minimalist Website Designs: Trends and Examples41
design, minimalism, trends
The Guide to CSS Animation: Principles and Examples (sma)40
guides, css, animations, principles
An Introduction to Less: Less vs. Sass (sma)39
introductions, preprocessors, less, sass
What Makes for a Semantic Class Name? (chr/css)38
html, css, attributes, naming, semantics
Examples of Sites Where localStorage Should or Is Being Used (chr/css)37
browser-storage, apis, javascript
Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma)36
css, selectors, generated-content
Useful “:nth-child” Recipes (chr/css)35
css, selectors
Website Navigation: Planning and Implementing (vit/sma)34
navigation
Getting Started With Defensive Web Design (sma)33
introductions, design
How to Use CSS3 Pseudo-Classes (sma)32
how-tos, css, selectors
The Art of the Single Page Web Site31
design, link-lists
CSS Reset30
websites, css, resets, overviews
Video for Everybody (kro)29
html, multimedia
JS1k: The JavaScript Code Golfing Competition (pvd)28
websites, javascript
The Art of the Web Background27
design, backgrounds, link-lists
CSS Gradients (chr/css)26
css, gradients, backgrounds
SVG Wow25
websites, svg, images
50 Cool JavaScript Examples and CSS3 Tricks (vit/sma)24
javascript, css, tips-and-tricks, link-lists
Taming Advanced CSS Selectors (sma)23
css, selectors
Different Ways to Format CSS (chr/css)22
css, formatting
Effective Website Maintenance: Examples and Best Practices (sma)21
maintenance, maintainability, best-practices
How to Customise Your 404 Page20
error-pages, customization, usability, user-experience
CSS Browser Hacks (dal/aja)19
css, hacks
88 Outstanding Favicons and 6 Resources to Help You Create Your Own18
images, favicons, link-lists
Groups of 50+ AJAX Examples (dal/aja)17
ajax, javascript, link-lists
Footers in Web Design: Creative Examples and Ideas (sma)16
navigation, design
Cool and Useful GWT Solutions (dal/aja)15
gwt
User Agent Style Sheets: Basics and Samples (j9t)14
browsers, css, fundamentals
CSS Specificity: Things You Should Know (sma)13
css, selectors, cascade
Prepare for Attack—Making Your Web Applications More Secure12
web-apps, security, sql, xss
Usability Conventions: Basics and Examples (j9t)11
fundamentals, conventions, usability
CSS-Based Forms: Modern Solutions (sma)10
forms, css, link-lists
JavaScript Closures for Dummies9
javascript, closures
Big, Stark, and Chunky (ali)8
accessibility, zooming, screen-magnification
CSS Zen Garden: The Beauty in CSS Design (dav)7
websites, css, design, css-zen-garden
CSS Zen Garden (dav)6
css, design, css-zen-garden
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