Can you please make a video on how to architecture of redux Toolkit like a senior dev with multiple slices and thunks ( mainly how is one supposed to know what should be a slice. Eg Homepage has profile, asset allocation, derivatives, upcoming transactions all these data are from different APIs. So one should create a single slice or multiple slices. Not using tanstack query rather redux Toolkit thunk)
It is really very helpful for engineers like me. Kudos to you for all your efforts. Please do more these kind of videos. It really helps a lot engineers.
Hi Yomesh, Loved the way you showcase and explain the things in simple terms. Please keep it up. 👍 Here are few suggestions/requests 1. Please throw more light on how to do analytics driven performance improvement in web application with examples. As mentioned, improve the non performant app with few techniques. 2. Add timestamps whenever possible. 3. Please bring more such topics with real world examples and show how to overcome performance bottlenecks within the same video with simple examples. Make sure video length is not more than 20-30 minutes. Thanks for everything. I hope I didn't sound like commanding over you. Have a great rest of the day!!
Hey, yes. Onboarding can be a good example where we know expected user flows. We can heavily optimise it using prefetching. Thanks for the good example!
Hi Yomesh, Great explaination I am just curious to know how are you prefetching the next page resources like the js and css without actually going to next page because the js and css were also written in within that page component itself how can these css and js of that next page component can be downloaded even before rendering it? can you explain what are you exactly passing in the href?
If you use any framework as shown in the video, they prefetch all the resources based on the url of the next page. When we build our website then all the chunks are created and there is a mapping of which resources belong which urls. Frameworks fetch all the resources based on that. Href would be the normal url of the final page.
If you are using the Link tag from next then it will automatically prefetch. You can use router provided by next to prefetch url contents programmatically. nextjs.org/docs/pages/api-reference/functions/use-router#routerprefetch
hello sir, Can you please make a video on the most famous these days Masonary Layout or dynamically Adjustable Bento Grids like Notes from Google keep... That would help a lot of understand how different designs and their responsivesness get implemented in the industry
can we provide a delay / is there a delay after which the resources are prefetched once hovered? one use-case of this I can think of is that what if I have hovered on the card and I start to scroll, it will try and prefetch the resources of all the cards?
All cards would have the same resources as they are the same component. If your every card is a different component then it will fetch different resources. You have a delay if you fetch programmatically on your own. Something like dynamic import on hover but this is not provided out of box by any framework afaik. You have to manage it.
![[LIVE] : ONE ลุมพินี 89 | คู่เอก "ยอดไอคิว vs คิริลล์"](http://i.ytimg.com/vi/Z3vYkHJ_5Ig/mqdefault.jpg)
Yes, would love to know more about these practices in detail with a real world example.
Yes we would love to know more about these practices, how to deal with real world peojects
Okay. Thanks for letting me know!
Thanks for the amazing explanation 🙏🏼
Great explanation 👏👏
Thank you! 🙌🏼
Can you please make a video on how to architecture of redux Toolkit like a senior dev with multiple slices and thunks ( mainly how is one supposed to know what should be a slice. Eg Homepage has profile, asset allocation, derivatives, upcoming transactions all these data are from different APIs. So one should create a single slice or multiple slices. Not using tanstack query rather redux Toolkit thunk)
Thanks for the support!
I will definitely look into this topic and create a detailed video soon. 🙏🏻
Sure.Highly appreciated
Nice one Yomesh!
Thank you! 🙌🏼
Cristal Clear Explanation!
It is really very helpful for engineers like me. Kudos to you for all your efforts.
Please do more these kind of videos. It really helps a lot engineers.
Glad to hear! Already planning the next videos. 🚀
Hi Yomesh,
Loved the way you showcase and explain the things in simple terms. Please keep it up. 👍
Here are few suggestions/requests
1. Please throw more light on how to do analytics driven performance improvement in web application with examples. As mentioned, improve the non performant app with few techniques.
2. Add timestamps whenever possible.
3. Please bring more such topics with real world examples and show how to overcome performance bottlenecks within the same video with simple examples. Make sure video length is not more than 20-30 minutes.
Thanks for everything. I hope I didn't sound like commanding over you.
Have a great rest of the day!!
Hi, thanks for the suggestions!
I will definitely try to build on your suggestions and incorporate in future videos! 🙌🏼
Hey Yomesh,
Can I say onboarding experience in a product can also be an example?
Hey, yes. Onboarding can be a good example where we know expected user flows. We can heavily optimise it using prefetching. Thanks for the good example!
Hi Yomesh, Great explaination I am just curious to know how are you prefetching the next page resources like the js and css without actually going to next page because the js and css were also written in within that page component itself how can these css and js of that next page component can be downloaded even before rendering it? can you explain what are you exactly passing in the href?
If you use any framework as shown in the video, they prefetch all the resources based on the url of the next page. When we build our website then all the chunks are created and there is a mapping of which resources belong which urls. Frameworks fetch all the resources based on that. Href would be the normal url of the final page.
Sir, please make a tutorial about Remix JS because I want to learn from you who have done some development in Remix
Sure. Will look into it!
I have query, hover prefetching will work for touch devices like mobile?
I would say for mobile device should change the behaviour to fetch resources as soon as they enter viewport. Hover works but not fullproof solution.
@DevtoolsTech thanks man
How can i prefetch js chunks in next js? all the initial js chunks in next js are set to low priority
If you are using the Link tag from next then it will automatically prefetch. You can use router provided by next to prefetch url contents programmatically.
nextjs.org/docs/pages/api-reference/functions/use-router#routerprefetch
hello sir, Can you please make a video on the most famous these days Masonary Layout or dynamically Adjustable Bento Grids like Notes from Google keep... That would help a lot of understand how different designs and their responsivesness get implemented in the industry
I will look into it. Thank you for the suggestion!
can we provide a delay / is there a delay after which the resources are prefetched once hovered? one use-case of this I can think of is that what if I have hovered on the card and I start to scroll, it will try and prefetch the resources of all the cards?
All cards would have the same resources as they are the same component. If your every card is a different component then it will fetch different resources.
You have a delay if you fetch programmatically on your own. Something like dynamic import on hover but this is not provided out of box by any framework afaik. You have to manage it.
@ got it, thanks
15 min
timestamp?
Timestamp of what?