Javascript
161 bites tagged Javascript — interview questions with model answers, and 60-second explainers.
ES Modules in Node.js: The Modern `import` System
ES Modules bring the browser's `import`/`export` syntax to Node.js, replacing the classic `require()`. Use ESM for modern projects to get features like top-level await. The main footgun is that you can't use `require()`, `__dirname`, or `__filename`.
npm Scripts: Your Project's Command-Line Shortcuts
Think of npm scripts as aliases for your project's common command-line tasks, stored in `package.json`. Use them to run build tools, start servers, or execute tests. The main footgun is forgetting `npm run` for custom scripts like `lint` or `build`.
CommonJS: Node.js's Original Module System
CommonJS treats each file as a private box of code. You share tools using `exports` and import them with `require`. It's the original module system for Node.js, used to organize code into reusable pieces.
V8: The Engine Powering Chrome and Node.js
V8 is the engine that runs your JavaScript, translating it into machine code. It powers both the Chrome browser and the Node.js server-side runtime. The common footgun is confusing the engine (V8) with the runtime environment that provides it with APIs.
Unit Testing UI Components: Beyond the DOM Mock
Unit tests for UI components verify individual pieces in a mocked browser environment (jsdom). This is standard for checking component logic with Jest or Vitest, but it can't test visual rendering, element sizes, or layout, creating critical blind spots.
ESM vs. CJS: Navigating JavaScript's Module Divide
JavaScript has two module systems: modern, static ESM (`import`) and legacy, dynamic CJS (`require`). When publishing a library, you must support both. The footgun is shipping only ESM, as it breaks downstream projects that still use `require()`.
Scraping Dynamic Sites: Find the API, Not Just Render
To scrape a dynamic site, find the hidden API call its JavaScript makes to fetch data instead of rendering the whole page. This is faster and more reliable. This applies when your scraper gets empty HTML but you see data in your browser.
CSS Houdini: Extending the CSS Engine
CSS Houdini gives developers low-level access to the browser's rendering engine, letting you write your own CSS features. Use it to polyfill new CSS or define type-safe custom properties with @property, preventing invalid values from being silently ignored.
Web Workers: Offload Heavy Tasks from the UI Thread
Web Workers run JavaScript on a background thread, preventing heavy tasks from freezing your UI. Use them for complex calculations or data processing that shouldn't block rendering.
Focus Trapping: Guiding Keyboard Users, Not Caging Them
Focus trapping intentionally confines keyboard navigation to a component, like a modal. It's a feature, not a bug, when used to prevent users from interacting with the page behind an overlay.
ARIA Live Regions: Announcing Dynamic Content
ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use `aria-live="polite"` for most updates and `assertive` only for critical alerts.
ElementInternals: Making Custom Elements Form-Friendly
ElementInternals lets your custom elements act like native form inputs, integrating with validation, submission, and labels. Use it for custom inputs in a design system. The footgun: forgetting to call `setFormValue()` means its state won't be submitted.
Storybook: A Workshop for UI Components
Storybook is a workshop for UI components, letting you build and test them in isolation without running your entire app. It's used to develop component libraries, document design systems, and test hard-to-reach states.
CustomEvent: Sending Custom Data with Events
CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the `detail` property. Don't forget `detail`!
The HTML <template> Element: Inert, Reusable Markup
Think of `<template>` as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Custom Elements: Create Your Own HTML Tags
Think of Custom Elements as creating your own Lego bricks for the web, defining new HTML tags with custom logic. Use them to build reusable components like a `<product-card>`. Be wary of extending built-in elements, as Safari does not support this.
CSS Modules: Local Scope for Your Styles
CSS Modules treat your styles like local variables. Instead of a global stylesheet, each CSS file is scoped to the component that imports it, preventing name collisions in component-based apps.
Get Javascript bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.