Javascript
161 bites tagged Javascript — interview questions with model answers, and 60-second explainers.
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
Vue Computed Properties: Derived Values for Cleaner Templates
A Vue computed property is a reactive 'formula' that derives its value from other data. Use it to move complex logic out of your templates, keeping them clean and readable.
Svelte's Reactive Assignments with `$: `
Think of Svelte's `$: ` as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like `$: sum = a + b`. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Vue Lifecycle Hooks: Running Code at the Right Time
Vue lifecycle hooks are your cues to run code at specific moments in a component's life. Use `onMounted` to fetch data or `onUnmounted` to clean up timers. The main footgun is that hooks must be registered synchronously during setup, not in an async callback.
Vite's Plugin System: Extending Dev and Build
Vite's plugin system extends its dev server and build process, leveraging Rollup's mature ecosystem. Use it to add framework support or handle custom assets. The footgun is forgetting to control execution order with `enforce`, causing compatibility issues.
Vite Config: The Control Panel for Your Build
Think of `vite.config.js` as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
Svelte: A Compiler, Not Just a Framework
Svelte is a compiler that turns your component files into efficient, imperative vanilla JavaScript at build time. This avoids shipping a large runtime, leading to smaller bundles. The footgun is thinking of it as just a runtime; its power is in the build step.
Vue: The Progressive Framework Philosophy
Vue's progressive philosophy means you can use as little or as much of it as you need. Use it for a single interactive widget, or scale it up to a full SPA with official libraries.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for `import`/`require` or `<script>` usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
TypeScript's `declare`: A Promise to the Compiler
`declare` promises the TypeScript compiler a value exists, even if it can't see the source. This lets you use untyped JavaScript libraries or browser APIs without errors.
DefinitelyTyped: Type Definitions for JavaScript Libraries
@types packages from DefinitelyTyped are instruction manuals for JavaScript libraries, letting TypeScript understand their shapes. You install them for JS libs that lack their own types, enabling autocompletion.
Declaration Files: How TypeScript Knows Your Library's Shape
A `.d.ts` file is a type-only blueprint for existing JavaScript code, describing its shape without any implementation. This is how TypeScript provides type-checking for third-party libraries or browser APIs. The footgun is adding logic to them; it's ignored.
Media Source Extensions: The Engine for Web Streaming
MSE lets you build streaming video players in JavaScript by feeding media chunks to a `<video>` element, instead of a single file URL. It's the foundation for adaptive streaming like DASH/HLS.
Web Audio API: A Modular Synth for Your Browser
The Web Audio API treats sound as a modular graph. You connect sources (files, oscillators) to effects (filters) and a destination (speakers) for precise, low-latency control. It's ideal for games and music apps.
MediaRecorder API: Capture Audio and Video in the Browser
The MediaRecorder API is a VCR for your browser, capturing a MediaStream from a camera or screen into a file. Use it for in-browser video recorders or voice memo apps. The footgun: recorded data arrives as Blob objects in an event, not as a direct.
WebGL Uniforms: Global State for Shaders
WebGL uniforms are global constants for your shaders, set once per frame from JavaScript to provide the same value to every vertex and pixel. Use them for scene-wide data like a camera's projection matrix. The footgun: changing a uniform is a CPU-to-GPU call.
WebGL Buffers: Telling the GPU How to Read Your Data
WebGL's vertexAttribPointer is the map you give the GPU to read vertex data from a buffer. It tells your shader how to parse a flat byte array into attributes like position. This is how you link CPU data to the GPU before drawing.
Canvas drawImage: Projecting Pixels onto a Canvas
drawImage is a versatile projector for your canvas, letting you place, scale, and even slice images before drawing them. It's used for rendering game sprites from a sprite sheet, displaying video frames, or compositing images.
Managing Canvas State with save() and restore()
Think of save() and restore() as checkpoints for your canvas. `save()` pushes the current drawing state (styles, transforms) onto a stack, and `restore()` pops it back off. Use this to temporarily apply a transformation to just one element.
Requesting Camera and Mic Access with getUserMedia
getUserMedia asks for camera/mic access in the browser. It's used for video chats or photo booths and returns a Promise with the media stream. Footgun: The promise can hang forever if the user ignores the prompt, so your app must handle that state.
HTMLMediaElement: The Remote Control for Browser Media
HTMLMediaElement is the shared "remote control" API for `<audio>` and `<video>` tags, letting you programmatically play, pause, and seek. Use it for custom players or syncing animations. Footgun: Browsers often block `autoplay`, so never assume it will work.
Transferable Objects: Zero-Copy Data for Web Workers
Transferable Objects move resource ownership between contexts, like threads, instead of copying data. This enables fast, 'zero-copy' transfers for large memory blocks. Use it with `postMessage()` to send an `ArrayBuffer` to a Web Worker.
Get Javascript bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.