テーマ： javascript
-
Browser storage: cookies, Web Storage and IndexedDB compared
Cookies travel with every request and are small by specification; localStorage and sessionStorage are synchronous string stores with a few MiB per origin; IndexedDB is asynchronous, transactional and shares the origin's large quota. All browser storage is best-effort unless persistence is granted, and it is scoped by origin.
-
Using fetch with timeouts and AbortController
A fetch promise rejects only on network failure, not on HTTP error status, and it has no timeout by itself. Pass an AbortSignal combined from AbortSignal.timeout and a caller's controller, check response.ok, and tell TimeoutError, AbortError, network errors and HTTP errors apart in the catch.
-
ES module builds with declared side effects shrink consumer bundles more than CommonJS builds
Hypothesis: for a library of many independent functions, a consumer that imports a few of them gets a smaller bundle when the library ships ES modules with a sideEffects declaration than when it ships CommonJS, because tree shaking depends on static import/export structure; a fixture-based comparison is proposed.
-
Web components: custom elements, shadow DOM and where the encapsulation ends
Custom elements register a class under a hyphenated tag name with lifecycle callbacks; shadow DOM gives it a scoped subtree whose styles do not leak either way; templates and declarative shadow roots supply markup. Every cross-boundary concern, from styling through parts and custom properties to form participation via ElementInternals and label association, must be opened deliberately.
-
When does client-side routing still pay off now that browsers offer bfcache, prerendering and cross-document view transitions?
Open question: in-page routers were adopted to avoid full page loads, at the cost of shell serving, 404 handling, scroll and focus restoration and a bundle that must arrive first; the back/forward cache, the Speculation Rules API and cross-document view transitions now address the original motivations in multi-page sites. For which sites and interaction patterns does an in-page router still measurably win?
-
Locale-aware interfaces: Intl plural rules, dates and right-to-left layout
Format numbers, dates and relative times with the browser's Intl objects instead of string arithmetic, pick plural forms by Intl.PluralRules categories rather than n == 1, lay out with CSS logical properties so a dir=rtl document mirrors itself, and leave room for text that expands when translated.
-
ES modules versus CommonJS in Node.js
CommonJS uses synchronous require and module.exports; ES modules use static import/export, top-level await and import.meta. Node decides per file by extension and the nearest package.json type field; ES modules need full file extensions and lack __dirname and require, which have documented replacements.
-
Rolling out a service worker safely: scope, versioned caches, the waiting worker and a kill switch
A service worker that caches HTML can pin users to old code after a deploy. Register it with an explicit scope, fetch the script fresh on every update check, version caches per build and delete old ones on activate, choose per-resource strategies, decide how the waiting worker takes over, and ship a tested kill switch before the first release.
-
Keyboard navigation in composite widgets: roving tabindex, arrow keys and Escape
Tab and Shift+Tab move between components; arrow keys move inside a component such as a tab list, toolbar, menu or radio group. Implement this with a roving tabindex (one item at tabindex=0, the rest at -1) or aria-activedescendant, close transient surfaces with Escape, and never trap focus without an advertised way out.
-
Focus management in single-page interactions: dialogs, route changes and removed elements
When a page changes without a full load, keyboard focus must be moved on purpose: into a dialog when it opens and back to its trigger when it closes, to the new view's heading after a client-side route change, and to a sensible neighbour when the focused element is deleted. Otherwise focus falls to the document body and screen-reader users are sent back to the top.
-
Handling errors in Promises and async/await
An async function turns a throw into a rejection and await rethrows it; every rejection needs an owner. Wrap only what you can recover from, never leave a promise floating, use allSettled when partial failure is acceptable, and register a last-resort unhandledrejection handler.
-
The JavaScript event loop: tasks, microtasks and rendering
JavaScript runs one job at a time; the HTML event loop takes a task, then drains the whole microtask queue (promise reactions, queueMicrotask) before the next task or a rendering opportunity. Long synchronous work and endless microtask chains block input and painting.
-
Bit manipulation basics: flags, masks and shifts without surprises
Flags are powers of two combined with OR, tested with AND and cleared with AND NOT; masks and shifts extract fields. The traps are operator precedence, signed right shifts, fixed 32-bit conversion in JavaScript and unbounded integers in Python; name every flag and parenthesise every test.
機械可読： JSON