Concepts in Frontend Dev, page 8
Svelte's `{@html}` and `{@debug}`: When to Use Them
Svelte's {@html} and {@debug} offer powerful but risky escapes. {@html} renders raw HTML strings, while {@debug} acts like a debugger statement in your markup. Use them for trusted content and dev-time inspection.
Emotion: Component-Scoped Styles in JavaScript
Emotion lets you write CSS directly in your JavaScript, keeping styles and logic colocated. It's ideal for dynamic, component-scoped styles in React that avoid global conflicts.
The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (user-scalable=no) harms accessibility.
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.
TypeScript Class Access Modifiers
Access modifiers are like privacy settings for class members, controlling what code can see them. Use public (default), private (class-only), and protected (class and subclasses) to enforce encapsulation.
React Theming: Context API and CSS-in-JS
Use React's Context API to inject a theme object (colors, spacing) into your component tree for your CSS-in-JS styles. It's ideal for light/dark modes or brand skins. The footgun: this pattern fails in React Server Components, which lack context.
Fluid Layouts: Adapting Content to Any Screen
A fluid layout makes content flow to fill its container, preventing horizontal scrollbars. It's key for responsive sites that work on any device and for accessibility. The footgun: without constraints, content can become unreadably wide or awkwardly cramped.
Angular Component Lifecycle Hooks
Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use srcset for high-DPI screens and <picture> for art direction. The footgun is relying only on CSS max-width; this forces mobile users to download unnecessarily large…
Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Relative CSS Units: rem vs. em
Relative CSS units like rem and em tie element sizes to font size for scalable UIs. rem is relative to the root font size, providing consistency. em is relative to the parent, causing sizes to compound. The footgun is accidentally nesting em units.
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.
Viewport Units: Sizing Against the Browser Window
Viewport units (vw/vh) size elements relative to the browser window, not their parent container. 1vw is 1% of the viewport's width. Use them for full-screen hero sections or typography that scales with the browser. A common footgun: 100vw causes overflow.
ref() vs. reactive(): Vue's Two Flavors of Reactivity
ref() is a box for any value (primitive or object) that you must access with .value. reactive() is a proxy for objects only, which you access directly. Use ref() for single values, reactive() for grouping data. The footgun: reactive() fails on primitives.
Nested Routes: Composing UI with <Outlet>
Nested routes build layouts with shared UI, like a sidebar. The <Outlet> component is a placeholder for changing content, perfect for dashboards. The footgun is forgetting the <Outlet> in the parent route; child routes will match the URL but won't render.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
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.
Next.js Dynamic Routes: Pages on Demand
Think of dynamic routes as a page template. You create one file like [slug].js to generate unlimited unique pages for things like blog posts or products. The footgun is forgetting to handle non-existent slugs, which can crash your app.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with srcset and tell it how much screen space the image will take with sizes. The browser then picks the most efficient option for the user's device. The footgun is forgetting sizes, which makes the browser assume 100vw.
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