Skip to main content

Index

  • Requirements clarifications/alignment(Functional and Non-functional)

  • Scoping (MVP, features that one must have)

  • Microinteractions in UI

  • Multi-device support and web responsive design : Responsive Design Testing Tools; Mobile first design

  • Choosing front end frameworks (React, angular and vue)

  • HTTP vs HTTP2 vs HTTPS

    • multiplexing

  • Cross-Browser Compatibility

  • WebRTC (Real-Time Communication, real-time audio, video, and data communication, like video conferencing)

  • Authentication and Authorization (JWT and o.Auth)

  • Localization and internatinonalization : i18n

  • Micro front ends

  • Web sockets, ajax polling, long polling, SSE

  • CSR SSR SSG ISG

    • SSR (its at run time), CSR, SSG(its at build time, static site generation), ISG (incremental site generation) and SEO
    • SSR is achieved in react using next.js (using getserversideprops function in next.js)
    • SSG is achieved in react using getStaticProps function in next.js (with data and without data), generated on build time; e.g blog posts
    • With data SSG, on build, react makes the api request get data and then populate and create html; We can also create SSG html on build and let client make api call and populate e.g https://tinyurl.com/4nt5sypb

  • Data :

    • Data API (like getPosts, createPosts)
    • REST vs GraphQL
    • Data Model Design
    • Data store
      • redux, mobx , vuex
      • normalized for faster access

  • User Experience UX

    • ux tools: figma , adobe
    • Design tokens

  • Architecture and Folders:

    • Atomic Design: Atomic design is a methodology that breaks down user interfaces into smaller, reusable components. These components are categorized as atoms (basic UI elements e.g buttons, icons, inputs), molecules (combinations of atoms e.g card item), organisms (larger UI components e.g card list), templates (arrangements of organisms e.g layout with header, footer and card list), and pages (final layouts).
    • Architecture : Component hierarchy (deciding on parent and child components)
    • modular archecture (using features folders in react or Pages folder)
    • publishing shared components as npm library
    • keeping components as small as possible; diff between presentational(just for view) and container components(to keep business logic)
    • Scalability (MFE, publish npm library, modularise)
    • webpack bundling and minifying
    • Use facade design pattern to create a wrapper on third party libs so that they can be easily replaced with a new library if its required in future without much hussle in the core code. (e.g ets say using axios to make api calls but want to replace with sth else in future)

  • Testing :

    1. Unit and integration testing (for angular- integration or e2e testing can be done by protractor; for react react-testing-library and cypress)
    2. Automotated Testing (Unit tests)
    3. Test high value features first

  • Assets optimization

    1. Images

      • Compression
      • progressive enhancement (avif > webp > jpeg/png)
      • DPR (device pixel ratio - window.devicePixelRatio and tehn make informed decision what image to load)
      • blur effect (create a small part of the image beforehand, and use that as a zoomed fallback of the img until its loaded completely)
      • adaptive images (based on the nextwork speed of user, take a decision)
      • solid primary color (same as blur effect, use a solid primary color based on the original image until its loaded)
      • lazy loading
      • client http hint
      • responsive images
      • css sprites (clubbing small imaghes in one and using css show the image)

    2. Videos

      • progressive enhancement (webm > mp4)
      • replace gifs with videos (gifs dont support audio, has higher file size for long video, has lower image quality; so use html5 video like webm and mp4 for video preview)
      • videos with no audio (for a video supporting multiple language audios, separate the video and audio and download separately)
      • responsive poster image for video
      • streaming
      • preload
      • platform based video dimensions (baes on the videport width and device, load the size of video)

    3. Fonts

      • font display decorator
      • flout with class
      • data uri
      • preload
      • progressive enhancement
      • async load css
      • font face observer

    4. Css

      • lazy loading
      • critical css rendering

    5. Javascript

      • defer vs async
      • web worker
      • lazy loading

  • Performance optimization :

    1. network -
      • gzip compression,
      • brottle, (not supported by legacy browsers)
      • minfication,
      • caching,
      • code splitting,
      • tree shaking
    2. rendering -
      • load js async, load css async
      • preloading, prefetching, preconnect(fallback is dns-prefetch), prerender e.g https://tinyurl.com/ms6numxy
      • critical css,
      • lazy loading (<img loading="lazy">; <img loading="eager">; <img fetchPriority="low">),
      • lazy loading using intersection observer and sentinel
      • lazy loading using content-visibility: auto; // it will render the part of the page down the viewport lazily
      • segregate critical.css separately which can include header, asiede bar, footer etc. and load on priority
      • optimizaing images, (for different devices; webp and fallback as png)
      • critical renddering path,
      • FCP, LCP, TTFB
    3. javascript -
      • web workers
      • DOMContentLoaded
      • async (third party libs, page anaytics script, parallel loading, )
      • defer (large js files, script order matters, script with defer when run has an available DOM to manipulate unliek async)
    4. perf monitoring tools like
      • Google PageSpeed Insights, Lighthouse, or WebPageTest
    5. Image optimization service :
      • sending imgUrl and viewport size from client and this service gives the proper sized image

  • PWA mode

    1. service worker an caching assets
    2. background sync
    3. push notification

  • Accessibility :

    1. color,
    2. hot keys,
    3. form and tabindex
    4. image alt
    5. skip navigation links,
    6. ARIA roles
    7. semantic html
    8. web accessibility tooling
    9. focus management

  • Security

    1. input validation,
    2. data sanitization
    3. protection against cross-site scripting (XSS) attacks
    4. CSRF
    5. Web Security Headers (CSP, HSTS, X-Frame-Options)
    6. Clickjacking

  • Front-End Analytics and Tracking

    1. google analytics
    2. insights into user behavior

  • css methodologies

    • BEM
    • long selectors means more rendering time