Why this became its own focus area
This site itself is the clearest example β building it surfaced real problems most tutorials skip. A canonical tag left pointing at an old GitHub Pages URL quietly told Google to ignore the real domain. A sitemap referencing pages that didn't exist yet actively hurt indexing rather than helping it.
Clean code and SEO end up being the same discipline in practice: both reward being precise about what actually exists versus what you assume exists.
Specificity, the part that bites quietly
A plain class loses to a pseudo-class selector like :nth-child() every time β even inside a later media query. This exact bug showed up while building this site's own timeline layout. Toggle between the two tabs to see it.
A plain class (0,1,0 specificity) can never beat a pseudo-class selector (0,2,0), regardless of source order or which one is inside a media query.
Same specificity, later in the cascade β this wins cleanly, no !important needed.
Stale canonical tags
Canonical and Open Graph URLs copied from an earlier GitHub Pages deployment, never updated after moving to a custom domain.
Sitemap ahead of content
Submitting a sitemap listing pages that were still in progress, rather than only what was actually deployed.
Relative social preview images
og:image with a relative path silently fails on most platforms β link previews need the full https:// URL.
Clean code habits I actually enforce
Reusable component classes. Cards, buttons, and grids share a small set of base classes across the whole site, so a palette or spacing change propagates from one place instead of forty.
Performance as a default. Lazy-loading below-the-fold images, avoiding layout-shifting fonts, and keeping scroll-driven effects throttled with requestAnimationFrame instead of firing on every scroll event.
Need a site that's actually indexable?
Get In Touch