New CSS Units: svh, lvh, and dvh

Anton Zaharenko — Thu, 02 Jul 2026 15:11:35 +0000

For a long time, using 100vh seemed like the perfect solution for responsive layouts.
But on mobile devices, things turned out to be more complicated:
dynamic browser address bars would shrink the viewport,
causing layouts to jump unexpectedly.

To fix this, CSS introduced three new units:
svh measures the viewport height immediately after the page loads.
lvh represents the maximum available viewport height, for example, after the address bar collapses.
dvh reflects the real-time dynamic viewport height as the user interacts with the page.

With these updates, responsive layouts are more stable, content no longer shifts unexpectedly on mobile, and the user experience is significantly improved.

If you want your websites to feel polished and professional across all devices, it is time to start using these new units.

CSS #Frontend #WebDevelopment #ResponsiveDesign

I built a Chrome extension

Anton Zaharenko — Tue, 30 Jun 2026 08:25:51 +0000

I built a Chrome extension that extracts code from tutorial
videos using Claude's Vision API. Wrote up what I learned:

Key findings:

Vision models handle code extraction surprisingly well better than OCR for anything syntax-sensitive
Prompt engineering matters more than model choice.
"Extract the code" vs "identify all code blocks, preserve
indentation, differentiate from terminal output" huge
difference in quality
Latency: ~2-3 seconds for a 1080p frame. Acceptable for
this use case, too slow for real-time
Edge case: slides with code + screenshots of code —
model correctly identifies both as "code" even with
different visual styling

Full writeup with prompt examples: [link to dev.to article]

The extension itself is free if anyone wants to try the
output quality: codera.click

DEV Community: Anton Zaharenko

New CSS Units: svh, lvh, and dvh

CSS #Frontend #WebDevelopment #ResponsiveDesign

I built a Chrome extension