Easy everything in Frontend Dev, page 11
SvelteKit: From Zero to Dev Server
Spin up a new SvelteKit app with npx sv create. This command scaffolds a project, prompting you to add tools like TypeScript. Then, npm run dev starts your dev server. The key footgun: forgetting to install dependencies before starting the server.
ng new: Your Angular Project Starter Kit
The ng new command is your starter kit for any Angular project. It scaffolds a complete, runnable application with a standard folder structure and dependencies, letting you skip manual setup.
Scaffolding a Vite Project with `create-vite`
Use create-vite to instantly generate a new web project with your chosen framework. It's the fastest way to start a Vue, React, or Svelte app without manual setup. The footgun is forgetting you can pass a --template flag to skip interactive prompts.
Why Angular Relies on TypeScript
Angular uses TypeScript to build large, scalable apps with confidence by enforcing structure through static types. This is key for its dependency injection and component architecture, ensuring pieces fit together.
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.
Angular: The 'Batteries-Included' Framework
Angular is a 'batteries-included' framework, providing a complete, official toolkit for routing, forms, and more. This is ideal for large teams needing consistency, but its opinionated nature means fighting the framework if you prefer different tools.
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.
Triple-Slash Directives: Compiler Hints in Comments
Triple-slash directives are compiler instructions inside comments, telling TypeScript about file dependencies. They're mostly seen in older projects or for global types, as modern import statements are preferred.
TypeScript: Type-Only Imports and Exports
Use import type to tell the compiler an import is only for type-checking and should be erased from the final JavaScript. This prevents tools like Babel from generating unwanted runtime code when compiling files in isolation.
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.
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.
Canvas 2D Context: The API for Drawing on the Web
The Canvas 2D Context is your digital paintbrush and ruler for drawing on a web page. You get this object from a <canvas> element to draw shapes, text, and images for data visualizations or simple games. The key footgun: it's a state machine.
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.
Service Worker Registration: Claiming Your Control Scope
Registering a service worker is like assigning a security guard (your script) to a specific area (the scope) of your site for offline support. The footgun: by default, a worker can only control its own directory, not the whole site.
Web Workers: Keep Your UI Responsive During Heavy Tasks
A Web Worker is like a background helper, running heavy JavaScript tasks in a separate thread so your UI never freezes. Use it for complex calculations or data fetching. The main footgun: workers cannot directly manipulate the DOM.
The `popstate` Event: Handling Browser History Navigation
The popstate event lets your app react to browser back/forward clicks. It's key for SPAs to update views without a full reload. The main footgun: the event fires before the document is fully updated, so your handler might read a stale DOM.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles