Forem: Sibtain Jafferi

Level Up Your Frontend Interview Prep: Mastering the Fundamentals

Sibtain Jafferi — Fri, 18 Apr 2025 02:58:05 +0000

Level Up Your Frontend Interview Prep: Mastering the Fundamentals

Preparing for frontend interviews can feel like navigating a vast landscape of technologies, frameworks, and concepts. While staying up-to-date with the latest trends is crucial, a strong foundation in the fundamentals is what truly sets you apart.

Over the past few weeks, I've been diving deep into some core areas that consistently come up in interviews, and I wanted to share some key takeaways:

JavaScript Essentials:

Closures: Understanding how inner functions retain access to their outer function's scope is fundamental. Be prepared to explain them and their use cases (e.g., data privacy, event handlers).
Prototypes and Inheritance: Grasping the prototype chain and different ways to achieve inheritance (prototypal, classical) is essential for writing efficient and maintainable JavaScript.
Asynchronous JavaScript: Promises, async/await, and the event loop are critical for handling non-blocking operations. Be ready to discuss their differences and when to use each.
DOM Manipulation: While frameworks abstract this, a solid understanding of how the DOM works and efficient manipulation techniques is still valuable.

CSS Deep Dive:

The Box Model: Margin, padding, border, content - a seemingly simple concept, but crucial for layout and debugging.
Flexbox and Grid: Master these layout modules! Be prepared to explain their properties and when one might be preferred over the other.
Specificity and Cascade: Understanding how CSS rules are applied and overridden is key to avoiding frustrating styling issues.
Responsive Design: Media queries and mobile-first approaches are no longer optional.

Framework-Specific Concepts (Pick One or Two to Focus On):

React: Component lifecycle (or hooks!), state management (props, useState, Context API, or Redux/Zustand fundamentals), and the virtual DOM.
Angular: Component architecture, services, dependency injection, and change detection.
Vue.js: Component options, data binding, directives, and the reactivity system.

Beyond the Code:

Performance Optimization: Be prepared to discuss techniques for improving website speed (lazy loading, code splitting, etc.).
Accessibility (A11y): Understanding ARIA attributes and semantic HTML is increasingly important.
Testing: Familiarity with different types of testing (unit, integration, end-to-end) and testing libraries is a big plus.

This is just a starting point, of course. The specific areas you focus on will depend on the roles you're targeting.

What are some of the fundamental concepts you've found most challenging or crucial in your interview prep? I'd love to hear your experiences and perhaps we can learn from each other.

If you're looking for a supportive community to discuss these topics further and practice your interview skills with fellow frontend developers, feel free to join us here.

My Design to Development Process

Sibtain Jafferi — Tue, 18 Feb 2020 03:24:54 +0000

Problem

If you're anything like me, you may have trouble coming up with designs for your project web pages.

Translating a set of functional requirements into components can be a daunting process.

There are some ways to make the ideation and design phase easier, which usually leads to a simpler implementation.

I'll briefly go over my current process using my personal projects page as an example.

Ideation

I knew the basic information I wanted to show for each project: name, description, pictures and links. Now, I just needed to come up with a visual format to display this info in.

I had trouble coming up with my own ideas so I looked to the internetz.

I usually bookmark websites that have interesting styles and search through this list for inspiration when confronting a design problem.

The Github repository view stuck out to me.

Another notable mention was Samantha Ming's Code Tidbits page

I decided I wanted to keep a minimalistic theme for my site and hence went with the repository view.

So, when looking for ideas on how to display your web page, list out all of the content that should be displayed.

Then, accumulate a list of webpages that visually display the content in a way that you find appealing and relevant. List out your own ideas for the visual hierarchy as well.

This will give you a good starting point

Next up is modification and design.

Design

Now we need to modify our chosen design to fit the functional requirements.

It helps to draw out a rough sketch of your designs and customize as necessary.

For the project's page, I knew I needed images and links, and hence found the appropriate spot for them in the designs.

Note: my artistic ability is very limited :(

Drawing it out also helps in creating a hierarchical component structure.

For example this implies we'll need something like:

<div class="project-list">
    <div class="project">
      <div class="content">
        ...
      </div>  
      <div class="links">
        ...
      </div>
    </div>
</div>

Development

Once we have an idea of the component structure, development becomes a breeze. We're essentially just plugging data into the structure (and styling it).

This is the implementation using Svelte.

<div class="projects">
  {#each Projects as { title, titleLink, description, images, tags, links }}
    <div class="tile">
      <div class="content">
        <a class="header-link" href={titleLink} target="_blank">{title}</a>
        <p class="description">{description}</p>
        {#if images && images.length > 0}
          <div class="images">
            <Images numCols={3} {images} />
          </div>
        {/if}
        <div class="tags">
          {#each tags as tag}
            <div class="tag">{tag}</div>
          {/each}
        </div>
      </div>
      <div class="links">
        {#each links as { link, text }}
          <a class="link-btn" target="_blank" href={link}>{text}</a>
        {/each}
      </div>
    </div>
  {/each}
</div>

Absolute Paths in Svelte

Sibtain Jafferi — Tue, 11 Feb 2020 03:52:28 +0000

In order to avoid lengthy relative path imports like this:

import Component  from "../../../../components/Component.svelte";

Gross.

@rollup/plugin-alias to the rescue!

Start by installing it into dev dependencies:

yarn add -D @rollup/plugin-alias

Next, add the plugin into your rollup config.

Note: Make sure to add it to both server and client bundles if you're using SSR in Svelte.

// rollup.config.js
import alias from '@rollup/plugin-alias';

const aliases = alias({
  resolve: ['.svelte', '.js'], //optional, by default this will just look for .js files or folders
  entries: [
    { find: 'components', replacement: 'src/components' },
    { find: 'metadata', replacement: 'src/metadata' },
    { find: 'util', replacement: 'src/util' },
  ]
});

...

export default {
  ...
  plugins: [
    aliases
  ]
  ...
}

Now we can do:

import Component from "components/Component.svelte";

yay!

Responsive Svelte Components

Sibtain Jafferi — Fri, 07 Feb 2020 01:38:06 +0000

When creating responsive web applications, my go to strategies are usually css based (flexbox, css grid, media queries).

But what if we want to alter the content of the html based on device? In this case, some javascript must be involved to differentially render the right html.

We can make use of a higher order Svelte component to accomplish this (leveraging named slots).

Component

We'll end up with something like this:

<Responsive>
    <div slot="mobile">...mobile content...</div>
    <div slot="desktop">...desktop content...</div>
</Responsive>

Implementation

// Responsive.svelte

<script>
    import { stores } from "@sapper/app";
    import UAParser from "ua-parser-js";
    // session is passed in server.js
    const { preloading, page, session } = stores();

    const parser = new UAParser();
    parser.setUA($session["user-agent"]);
    const mobile = parser.getResult().device["type"] == "mobile";
</script>

{#if mobile}
    <slot name="mobile" />
{:else}
    <slot name="desktop" />
{/if}

And passing the session in from server.js

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka() // You can also use Express
.use(
    compression({ threshold: 0 }),
    sirv('static', { dev }),
    sapper.middleware({
        session: (req, res) => ({
            'user-agent': req.headers['user-agent']
        })
    })
)
.listen(PORT, err => {
    if (err) console.log('error', err);
});

Now we can differentially load html content with a higher order Svelte component!