Sunday, December 11, 2022

Frontend system design interview notes

First of all, _make sure you understand the whole picture_. This means you need to ask _many_ questions before jumping on actually hatching out a plan.

Also very important note is that 99% of the time any solution will have PRO-s _and_ CON-s. This is very important from a designing perspective as (the more senior the role is) we will need to weigh in both sides.

Here is a pretty good mock interview: https://www.youtube.com/watch?v=VM2_4IXkMZ0

Also from the same author here is a textual version of the above video: https://www.feinfra.com/ 

Questions about the product:

  • liveness of the data
    • REST
    • websockets
  • who is the audience (users)
    • how well educated are they in terms of the app
    • will the product allow users's users (kinda admin)
  • what kind of team do we already have? are they already familiar with e.g. React?
  • how long is the project plan? (6 months? 2 years?)
  • what kind of user audience size do we expect? should we worry about scaling our product at this stage?

Important topics

  • bare minimum html/js vs Next.JS SSR vs SPA
  • CI/CD
  • testing
  • optimization
    • minifying css/js
    • optimize media assets
  • monitoring
    • DataDog / Sentry / Google Analytics / ...
  • security
    • XSS, CSRF, SQL injection, ...
  • A/B testing
  • CDN
    • Content Delivery Network (I keep forgetting this name..)
  • code infrastructure setup
    • monorepo / multiple repos
    • shared UI component library
    • service-oriented architecture: teams focusing on each part of the domain, pro-s / con-s
  • related to the previous point: do we have a design system already?
    • css framework like tailwind?
  • sharing types between FE and BE
  • API contracts
    • OpenAPI, GraphQL, etc..
    • ProtoBuff - code generation like React hooks (wow)
  • state management
    • React Context
    • zustand / jotai / Redux / ...
  • router
    • react router e.g.
  • do we have OKR-s set?
  • SLA-s
    • contenful paint
  • (Google's) Core Web Vitals
    •  (source)
    • The Largest Contentful Paint (LCP) checks the render time of a page’s main content when it starts loading. The main content is generally the largest image or a text block in the viewport – a visible area of a web page on a user’s device.
    • The First Input Delay (FID) measures input latency – how long it takes for a site to respond to a user’s input. This includes key presses, taps, and clicks on buttons, links, and videos or audios on a page.
    • The Cumulative Layout Shift (CLS) measures visual stability and checks whether there is an unexpected layout shift in the page.
  • wireframing?
  • styling guidelines
    • styled components
    • css modules

Monday, December 5, 2022

JS can surprise me still to this day (Array toString() is join())

I didn't know but these expressions yield the same result in JavaScript:

const a = [1,2,3];

console.log(a.join(','));

console.log(`${a}`);

I think it makes sense, but still, the language still today can surprise me.