yome.day

The document object model is the living skeleton of every web page. Understanding its hierarchy — from root to leaf — allows you to write markup that communicates intent to both machines and humans.

<article class="tutorial-step">
  <header>
    <h3>Step Title</h3>
    <p class="metadata">Author · Date</p>
  </header>
  <p>Body content…</p>
</article>

Semantic elements carry implicit meaning. A <nav> tells browsers and screen readers that this region contains navigation. An <article> signals self-contained, independently distributable content.

Grid is the most powerful layout system available in CSS. It operates on two axes simultaneously, enabling designs that were previously impossible without JavaScript hacks.

.layout {
  display: grid;
  grid-template-columns:
    repeat(12, 1fr);
  gap: 1.5rem 2rem;
}

.main-content {
  grid-column: 1 / 8;
}

.annotation {
  grid-column: 8 / 13;
  grid-row: 2;
}

Modern JavaScript applications are event-driven at their core. Understanding the event loop, delegation, and propagation is essential for writing performant, maintainable code.

const handleClick = (event) => {
  const target = event.target
    .closest('.step-card');
  if (!target) return;

  activateStep(target);
};

document.addEventListener(
  'click', handleClick
);

Event delegation — attaching a single listener to a parent rather than many listeners to children — is both a performance optimization and an architectural pattern. It handles dynamically added elements automatically.