I'll post on my LinkedIn so that you get more views.

Bhai do full k8s ....with 5 microservices deployment

There is a reason why you're not successful yet even after 11 hour lecture, coz you teach shit man!!! 😇😇😇

Waiting for next one ❤

Awesome content !!!!

Amazing content, thanks for this !!, This is much better than paid content, One of best System Design series for Frontend, I was searching so much but could not find any , Finally got it

Amazing content !!!

In Machine coding round, the asked to code in react or vanilla?

@jscafe at 41:41, I think you have missed the part of adding <div id = 'root'></div> inside body in HTML. please check.

Thank you so much brother for uploading such a good content about DSA in Javascript

Which laptop you are using for your tutorial and development purpose? @js_cafe

Hi sir They have system design for sde-1 role also?

I am seeing comments saying debounce can be used instead of abort controller. Debounce can be used but what about the previous requests ? Explained very well in the video by using abortController

I have been watching your videos for a while, I can say you sound so genuine and your content and the way you explain is crisp!!

Such great content. Anyone serious about upskilling should watch this.

RequestIdleCallback is not working on safari

I have been working in the open source but this is something different !!

Nice informative video! When will System Design Yatra 3 be released?

Thanks for this video, great resource to learn ! Keep it up please 👐🙏

GRPC shouldn’t be there IMO. its not supported by browsers and in many cases requires loading the entire grpcjs and protobuf implementation on the client which has a huge overhead. Saying this from experience as my first task when I joined a new company was to strip away something like this from our main product.

00:05 Using virtual Dom for improved rendering performance 02:41 Video for frontend developers of all levels 08:03 Code splitting helps in loading only required code, saving bandwidth 10:32 Implementing code splitting in React using Webpack 17:33 Optimizing network performance by loading only required components. 20:14 Implementing code splitting using lazy and suspense 25:18 Lazy loading routes for performance optimization 28:04 Import on interaction and import on visibility for component level code splitting 34:08 Optimizing emoji loading for performance improvement 37:01 Optimize performance using lazy loading 42:24 Lazy loading components based on visibility for optimization 44:47 Using React Intersection Observer API for performance optimization 50:46 Discussed lazy loading and optimization techniques. 53:06 Compression techniques like gzip and broadly reduce JS file sizes by 15-25% 58:22 Setting up webpack for bundling and compression 1:00:54 Setting up Babel for transpiling advanced JS code 1:06:28 Enabling Gzip compression for optimization in webpack plugins 1:09:33 Setting up a new folder and GitHub repository for gzip code deployment 1:16:15 Troubleshooting and enabling Port 80 for engine X deployment 1:19:31 Enabling Gzip Compression for Performance Optimization 1:24:50 Setting up a project with Webpack and copying configuration files. 1:28:05 Optimizing asset loading for Emoji picker module 1:33:46 Preload fetches critical resources for immediate usage 1:36:23 Implementing webpack preload for performance optimization 1:41:52 Tree shaking is crucial for optimization 1:44:09 Setting up a basic HTML vanilla JavaScript project with Webpack 1:50:35 Tree shaking removes unused code for optimization 1:53:21 Implementing virtual list for performance optimization 1:58:12 Implementing virtualization in React for performance optimization 2:01:53 Understanding Core Web Vitals importance for website performance. 2:06:30 Optimizing Images for Performance 2:09:43 Optimizing Largest Contentful Paint (LCP) 2:15:29 Performance optimization techniques 2:18:56 Optimizing performance with CPU throttling and hardware concurrency 2:24:45 Understanding and managing CLS for better user experience 2:27:10 Optimizing frontend performance through code optimization and ad display toggling

This is truly a gold mine

Product base se call to aa ni rhe, g@@&d maraye ye sb krke….. i have invested my 1.5 yr for dsa but in the end not getting any call

🔥🔥 hidden coder🔥🔥🔥

Bro great videos One question on import on visibility, suppose I have list component which has 10000 of items and only list component is being render on UI unlike your example of Message and emoji component. Now in this lazy load the list component is would make sense or render the list component as it is and use virtualised list concpet inside the list component?

30:49 lazyyy

what is the difference b/w CSR ans SSG(with data)

I have completed the video. Kudos to you !! ❤ You did a great job nice content with working examples. But one things I would like to say is CORE WEB VITALS were covered at very high level and as you know its not that easy and simple to improve core web vitals in a production ready code were we have lots of third party scripts also like gtm, smartlookup adscripts etc. Lcp for mobile and desktop can be different also we can might have dynamic LCP for different users etc. I would love a Season 3 were you deep dive in improving core web vitals including TTFB and TBT, also how to break long tasks allowing the main thread to handle more important tasks and more insights of performance panel. Thanks for the awesome content you make things very easy and simple to understand that's why all these from you. ❤❤❤ @js_cafe

Bhai Please continue this.....❤❤

Ap n only front-end h krwana h

May I know exact syllabus or roadmap for this series.....

this content is lit and ur teaching style is you destroy the paid courses content creators might angry on you

Pls continue this series i will will complete it by today

Hi bro can u make video on micro frontends using react?

kindly make a detailed video on dev tool like elements console source network performance memory

Love you bro

Great Information Brother 🎉

Was waiting for this 🎉🎉🎉🎉

Let's see who finishes this series first?

❤️

fiz muitos ajuste no teu codigo. muita coisa não batia certo mais obrigrado pela sua disponiblização de nos dar esse codigo aprendi muito com ele s2

let myArr = []; function flat(element){ for(const el of element){ if(typeof el ==='object'){ flat(el); } else myArr.push(el); } } flat(arr)

interviewer generally don't allow to use existing functions/objects in JS.

Great Job. Thanks

8:51 - samaj nahi aya ye... Server kyu bhejega JS code. Vo to sirf JSON data hi bhejega na..🤔🤔

00:05 Introduction to frontend system design yatra season 1 02:33 Introduction to Ziku Cloud 07:55 Frontend system design components overview 10:28 Browser rendering process overview 15:44 Understanding the concept of render tree in frontend system design 18:15 Importance of render tree and parsing steps 22:33 Creating wireframes and painting in frontend design 24:48 Compositing in browsers involves layering multiple elements on top of each other. 29:13 HTTP and TCP protocols for web browsing 31:26 Understanding UDP connection and its impact on data exchange 35:59 HTTP response status codes categorized in Five Pillars 38:11 Introduction to REST APIs and its rules 42:24 Setting up an Express server for system design 45:03 Setting up server and defining callbacks 50:06 Creating and handling POST requests in frontend system design 52:53 Using PUT request to update specific resources 58:16 Demonstrating patch API for partial data updates 1:00:53 Introduction to GraphQL in frontend system design 1:05:28 GraphQL vs REST comparison in frontend system design 1:07:35 Leveraging GraphQL for dynamic data fetching and customization. 1:12:31 Setting up Apollo GraphQL server and importing queries 1:15:03 Defining schema for users, problems, and API queries in GraphQL 1:19:59 Implementation of resolvers and creating an Apollo server 1:22:37 Setting up the server and resolving issues 1:28:04 Iterating over user data to filter and replace IDs in problems 1:30:30 Implementing solver functionality with collaborative problem-solving 1:35:40 Introduction to GraphQL and its benefits 1:38:27 trpc leverages TypeScript for client-server communication 1:43:12 Leveraging trpc for syncing vanilla TypeScript and TypeScript Express server 1:45:48 Integrating trpc server with Express in frontend system design 1:51:01 Setting up basic client using vanilla TypeScript template 1:53:46 Setting up trpc server and client for app router communication. 1:59:26 Updating problems using mutation and async function 2:02:06 Understanding trpc basics for client-server communication 2:06:59 Communication in gRPC backend services 2:09:10 Setting up gRPC server and client in Node.js 2:14:33 Defining and implementing a problem list with array representation and placeholder 2:17:12 Setting up Protobuf and gRPC in JavaScript 2:23:03 Boilerplate code for starting the server and defining methods for making calls. 2:25:47 Setting up a basic gRPC server with nodejs 2:32:18 Client communication and error handling 2:35:23 Using gRPC for powerful service communication 2:41:16 Explaining short polling and long polling techniques 2:43:43 Implementing short polling technique for QR code login verification 2:49:46 Short polling use cases and scalability challenges 2:52:05 Long polling is a way of making Network calls only when there is a certain update from the response. 2:57:57 Implementing client-side polling server for new messages 3:00:51 Long polling reduces unnecessary API calls 3:05:51 Using WebSocket for real-time data implementation 3:08:54 Handling websocket connections and communication in a frontend system design. 3:15:06 WebSocket communication in browser at Local Host 8080 3:17:48 Web Hooks are automated HTTP requests triggered by events in source systems. 3:22:42 Web hooks are secure and trigger third party vendor APIs. 3:25:06 Introduction to Web Hooks

totally worst programmer will nvr hire him i made chat application via him totaly he never explained anything did not know how to code one of the worst waste of time for myself but now i have to map all files i have coded and use gen ai to understand myself

Very well explained, thanks for creating such content ✌

JsCafe I just checkout your channel I think you should create this kind of stuff. This will help us as audience to grow and you as a content creator. Other stuff like basic ,MERN and Next is already over crowed and Teacher like #harkirat and #hitesh already taken it to next level in terms of Quality , Content ,etc. but This content also benefits developer like us intermediate to advance and will help to increase our understanding