Step 1 · Earth
Build
Vishwa lays semantic stone first: header, main, section, footer. Screen readers, search engines and every developer after you read these walls.
A layered realm where every page is a kingdom. Kingdoms are built, styled and brought to life, and they are always under threat from bugs, bloat and broken experiences.
<header>
Enter the realm<main>
<section>
<footer>
Step 2 · Fire
Style
Kitsu breathes foxfire into the stone: colour, type, spacing, layout. The structure stays the same and the kingdom gets a face.
Step 3 · Lightning
Bring it to life
Raiden wires it with events. Buttons answer, cards react, the nav responds, and the kingdom wakes up.
Then the guardians take over. Sanjaya keeps it readable for everyone, Vayu keeps it light and fast, and Chitragupta keeps a record of every change to its state.
The cast · eight heroes, eight elements
Guardians of Domlok
Each guardian owns one part of the frontend and carries one of the elements. Learn the character and you remember the concept.
The Architect · Mentor
Acharya Kōdo
All five · Pancha MahabhutaYour voice in every episode
“Frameworks rise and fall.
Principles stay.”
A veteran who has guarded Domlok since the Age of jQuery and survived the IE6 wars. Calm, dry-humoured, and he speaks in principles, not hype. Five motes of the elements orbit his staff.
The Apprentice
Kai
Unknown, for nowThe reader’s stand-in
“Why can’t I just use !important?”
Eager, impatient and sometimes reckless. Kai asks the questions you are thinking and makes the classic mistakes on screen so you don’t have to.
HTML · Semantics
Vishwa
Earth · PrithviVishwakarma, the divine architect
“A button is a<button>.
Not a<div>.”
A stoic builder who hates div soup. He stands on cracked stone and builds kingdoms that last, one meaningful element at a time.
CSS · Layout
Kitsu
Fire · AgniKitsune, the shape-shifting fox spirit
“Same markup.
Watch me change its face.”
A playful illusionist and master of appearances. Her foxfire burns blue at the core, and flexbox and grid bend to her will.
JavaScript · Events
Raiden
Lightning · VidyutRaijin, the thunder god
“Click. Fire. Handle.
Faster than you can blink.”
Fast, powerful and a little chaotic. Raiden lives on events, and when he strikes, the page comes alive.
Accessibility
Sanjaya
Ether · AkashaSanjaya, who narrated the war to the blind king
“If it can’t be heard,
it isn’t finished.”
The original screen reader. Eyes closed, he describes the world for those who can’t see it. Sound travels through akasha.
Performance
Vayu
Air · VayuVayu, the wind god
“Every kilobyte is weight
your users carry.”
Light as the wind and obsessed with speed. Vayu judges every request, every image and every dependency you add.
State management
Chitragupta
Water · JalThe divine keeper of everyone’s records
“Nothing changes
without a record.”
A meticulous scribe with one source of truth for every action. A stream of water flows from his ledger, and every change is written down.
The villains · recurring bugs
Try cutting the Hydra
The Callback Hydra grows two heads for every one you cut. Nest another callback and watch the code drift right. Then tame it the way Acharya teaches in Episode 01.
Heads 4
Nesting depth 4
Kai: “Easy. I’ll just nest another callback!”
Kappa of Leaks
The yokai who spills water when it bows. It leaks memory through listeners and timers nobody removed.
Beaten by cleanup: remove listeners, clear timers.
Ouroboros
The serpent eating its own tail. A render that sets state, which triggers a render, which sets state.
Beaten by stable dependencies and derived state.
Shifting Oni
Makes the ground jump under your users’ feet just as they tap. Also known as layout shift.
Beaten by reserving space: width, height, aspect-ratio.
Asura of Bloat
Grows bigger with every dependency added for one small function. Your users download all of it.
Beaten by audits, tree-shaking and code-splitting.
Episodes
Lessons from the realm
Each episode is one bug, one fight and one rule you keep. Short enough for a coffee break.
The Callback Hydra
Cut one head and two grow back. Kai learns to flatten nested callbacks with Promises, async/await and Promise.all.
Read on madebydhawal.com
Works in Postman, fails in the browser
Raiden explains why your API isn’t actually broken: Postman is a courier, the browser is a gatekeeper.
Read on madebydhawal.com
Content Fragments vs Experience Fragments
Learn the difference between AEM Content Fragments and Experience Fragments, and when to use each for your content strategy.
Read on madebydhawal.comAcharya’s Rule
Learn the principle. The framework is a detail.
Acharya Kōdo has guarded Domlok since the Age of jQuery. He has watched frameworks rise and fall, and every episode ends with one rule that outlives them all.