This is a sample article to demonstrate our blog’s typography, spacing, and layout. The goal is a calm, focused reading experience with great contrast in both dark and light modes.
Clean, readable typography
We set a comfortable line-length, generous line-height, and balanced spacing between sections. Links are clearly styled and accessible, and code blocks are easy on the eyes.
Good writing is clear thinking made visible.
Bullets and structure
- Clarity: Clear headings and consistent hierarchy.
- Focus: A centered measure to reduce visual fatigue.
- Comfort: Whitespace that lets the eye rest.
Inline code and blocks
Sometimes you just need to show a quick snippet like const ok = true;. For larger blocks:
// example: simple function
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
That’s it — use this post as a reference when adding new articles. For now, we’re adding posts manually, and that’s fine.
Structured sections to reuse
When you write, keep sections short and scannable. Use headings, bullets, and callouts to make the content easy to skim without losing depth.
Callouts that help readers
- Tip: Lead with the problem. Then show the minimal solution.
- Warning: Note tradeoffs and common pitfalls explicitly.
- Takeaway: End sections with a crisp summary.
Example image
Images should be optional but helpful. Keep them semantic and responsive:
.webp){kind=logo}
Snippets with context
Prefer small, focused examples you can paste and run:
// debounce helper
function debounce(fn, wait = 200) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}