Generate and Download Files in the Browser: Blob + download
CSV exports, JSON backups, generated reports - the browser can create files and hand them to the user without the server ever touching the data.
Software Engineer
I build web applications and share what I learn along the way.
Step-by-step programming tutorials on PHP, JavaScript, Laravel, WordPress and more.
CSV exports, JSON backups, generated reports - the browser can create files and hand them to the user without the server ever touching the data.
String length counts UTF-16 code units, not characters - so emoji truncation splits families into corpses. Intl.Segmenter counts graphemes, words and sentences correctly.
Intl.PluralRules knows every language's plural categories and Intl.ListFormat writes "a, b, and c" correctly - two tiny APIs that end string-building guesswork.
onLine only knows if there is a network interface, not whether the internet works. Real offline handling means verified checks and a retry queue for failed writes.
Lighthouse tells you about your machine. PerformanceObserver tells you about your users - long tasks, slow interactions and layout shifts, from the field, in a few lines.
Window resize listeners cannot see a sidebar collapsing or a panel being dragged wider. ResizeObserver watches the element itself - the JS half of container-based design.
That floating "tweet this quote" button on Medium-style sites is the Selection API plus one event. Here is the whole thing, popover positioning included.
Math.random-based IDs collide more than you think and are predictable by design. The browser ships a real UUID generator and a cryptographic random source - both one-liners.
Log out in one tab, stay logged in at the other five? BroadcastChannel syncs state across tabs in three lines - and the storage event covers the legacy cases.
WebSockets need infrastructure. Polling hammers your server. SSE streams live updates over normal HTTP with a PHP file and the built-in EventSource API - reconnection included.
Intl.NumberFormat handles currencies, compact notation, percentages and units in the user's locale - the kind of formatting everyone installs a package for.
Checking window.innerWidth on every resize event is wasteful and drifts out of sync with your CSS. matchMedia gives JavaScript the same breakpoints CSS uses, with change events.