Skip to content

Perfect JavaScript Example

Technical portfolio with no frameworks, no libraries, no build step: just modern JavaScript (ES2023+), semantic HTML and lean CSS. Every section below is a real demo — and shows the source code that implements it.

Zero runtime dependencies Native ES Modules Tests with node:test

Modules loaded: 1

See the demos ↓

A closure is a function that keeps access to the scope where it was created, even after that scope leaves the stack — here a counter lives inside criarContador() with no global variable. I used closures because they encapsulate state without classes; compose/pipe/curry compose pure logic; memoize caches results and the comparison uses performance.now().
async/await makes asynchronous code sequential and readable; Promise.all parallelizes, allSettled tolerates partial failures and race + timeout implement a deadline. I used AbortController because cancelling requests is mandatory in real UIs, and retry with backoff because networks fail — loading/error/empty/success states always show up.
Order in JS is not textual order: synchronous code runs first, then the microtask queue (Promise.then, queueMicrotask) drains completely, and only then come macrotasks (setTimeout) and requestAnimationFrame. I demonstrate this by running the sequence and numbering each step — handy for understanding concurrency bugs.
Observers react to changes without listener pollution: IntersectionObserver does reveal/scroll-spy, ResizeObserver measures layout, MutationObserver watches mutations. I combined them with event delegation, <template> and DocumentFragment to render large lists in a single reflow — instead of N.
A mini store with pub/sub keeps UI and data in sync. I used immutability (spread + structuredClone) for traceable changes, selectors for targeted reads, Proxy for reactivity and localStorage for persistence — with try/catch, because storage can be blocked.
Private fields # give real encapsulation (not a convention, syntax); getters/setters validate; static blocks configure the class at load time; inheritance and mixins cover reuse, and WeakMap/Symbol are the "old-school" alternatives compared side by side with a factory function.
function* produces values on demand — perfect for infinite sequences and pagination; Symbol.iterator makes any object iterable by for…of; async generators + for await...of consume paginated APIs elegantly. I included Map/Set/WeakSet and iterator-helper detection with a fallback.
Heavy code on the main thread freezes scrolling, clicks and animations. A Worker runs the calculation on another thread with postMessage, a progress bar and cancellation via worker.terminate(). The demo compares frames rendered with and without the worker — the difference is visible.
The Constraint Validation API (setCustomValidity, checkValidity, reportValidity) gives native validation with custom messages; hand-made CPF/CEP/phone masks, real-time validation with debounce, messages wired via aria-describedby/aria-live, and FormData + Object.fromEntries for clean collection.
The Kanban uses the HTML5 Drag and Drop API and a complete keyboard alternative (arrow keys move cards between columns) — dragging with the mouse cannot be the only path. The order is persisted in localStorage, and every move is announced in aria-live.
The native Intl API covers currency, dates, relative time, lists, plurals and collation — zero libraries. Switching between pt-BR/en-US/es updates the DOM instantly, without reloading, using JSON dictionaries and textContent.
Real-time counters show the difference between debounce and throttle; requestAnimationFrame syncs with the frame; virtualization renders only the visible window of 10,000 items (~20 DOM nodes, not 10,000); performance.mark/measure measures with millisecond precision.
Clipboard, Web Share, Geolocation, matchMedia, Page Visibility, Notification, URLSearchParams, History API, BroadcastChannel (across tabs!) and <dialog> — all with feature detection ('x' in window) and a friendly fallback. No permission is requested automatically: geolocation and notifications are opt-in.

Tests

The utilities have unit tests with Node's native runner (node:test + node:assert) — no Jest, no Vitest. Run with npm test.

How it was built

Every module has a standard header (ARQUIVO / PROPÓSITO / CONCEITOS / USADO EM) and complete JSDoc on its exports. Start with the pure utilities — they are the testable foundation of everything.