One of the best mock videos in your channel, the way Raj Sagar handled the entire code and all your explanations were so informative. Can you please make a video on the Design Patterns in JS as well, what type of questions are normally asked in Interviews?
I'm aware of debounce & throttle concepts but I'm unaware of Intersection Observer & Abort Controller. Those are very useful & you explained those very clearly. Thanks 😊
Man I was so confident that I know everything about this problem and can solve it but at the end, network call cancellation stuff, I was taken by surprise. I had no idea about this problem and its solution.
I have gained so much knowledge about machine coding round, How to approach the problem and what sequence you should create the file ,Handling edges case and finally optimizing the solution. Learned 2 new things about Web i.e Intersection Observe and abort controller. Thank you Chirag bhaiya .💯💯
I was seriously neglecting this video as it’s going to be simple autosuggestion but Man you rocked it with lot of advanced optimisation concepts to learn in between and things to consider while building. Thanks for the awesome video. You going to be great TH-cam and tutor no doubt. Cheers 🥂
Chirag sir, kudos to you, explaining so many concepts and great interview experience. Especially Abort controller and infinite scroll are the two less known things, that will help strengthen the frontend knowledge. Thank you so much for making this awesome content!
I always start your videos and leave it in between only, today i have completed the whole and it's really very much informative. Thanks for uploading good content. Please make video on react also regarding performance and all.
Again great content! Very nice mockup interview especially using native Javascript instead of framework. In terms of aborting in-flight request, what I have done is match keyword before inserting the response back to the DOM element. If the input has the same keyword for which I got the response then append to DOM else ignore the result as AJAX cannot be cancelled. I just learned about AbortController today which I'm looking further into. One non technical feedback: Your audio was low when you were describing debounce in between compared to overall Audio. May be that need to be normalized by your video processing software. Edit: Looked into Abort Controller and what it seems like is it is very similar to useRef where you get a reference to the AbortController, and then you are passing the same reference to all the relevant API calls that you are making in this case keyword search API and as soon as one response comes back, I am going to call .abort for all the other in-flight requests. --> Which to me seems to be a problematic. Here's the scenario: Consider your example and lets reverse the order of response, i.e. you got response back for "A" but not "Apple" yet, based on controller code, we are going to cancel Apple's in-flight request and show result for "A" which will show to the user "Apple" and "Apricot". Unless I'm not getting this correctly.
You need to abort the request on every key press (after Debounce call). So, in this case you won't face the above challenges. As you will be cancelling any previous active call.
great mock interview 😊 what is the best approach to define function contracts in large application. 1. First one like here the handleInputChange calls handleSeach function which in turn calls renderDropIterms. 2nd approach ,these functions only do their work and return result.eg.handleSeach return search result
Hi chirag loved the way this video was explained how in interview to approach the problem n suggest best practices wrt performance etc can u pls make videos on tic tac toe, google calendar, product listing pages , twitter example , Google sheets too.
From my experience, When I used to develop the autosuggestions field, I found - If there are multiple API calls in the pending state, they will execute one after another, not like the 2nd one will complete before the first one as you said the scenario in Abort controller. So In my scenario, is the server priorities the first API call and giving data one by one, or it's because of JS?
In development mode, we mostly have single api service to process the request, hence you may get response one at a time. But in production, we have multiple micro-services to handle the request. Also server to client api response time will depend on response size & internet speed. So it's difficult to reproduce for small data in local.
@engineerchirag can you please cover other machine coding questions which you mentioned in the top 11 machine coding question video. This is a very good video and I learned lot of new concepts
Great Work Chirag, keep bringing more such content on your channel. Few Suggestions: 1) We could have discussed about how to make the Typeahead as a reusable component. 2) 1:06 Topic should be called Handling RACE condition in API calling. 3) Throttle code can be made a lot more easier and shorter.
Thanks for the suggestions Kapil. Yes in the upcoming video I will be focusing a bit more on reusability. The purpose of the video wasn't to provide the best possible solution, it was to share the thought process, covering multiple areas, working along with interviewer, etc.
while following the same code and adding import statments in index.js , i was getting "Uncaught SyntaxError: Cannot use import statement outside a module" error in console. so , i has to add "type = module" in the script tag and use live server to make it work. How is it not throwing any error for you ?
I'm working on increasing frequency, I need support from everyone to reach 5k+ subscription, so that I can start investing more time on recording. Pls share it in your network 🙂
![[#2024MAMA] BIGBANG (빅뱅) - 뱅뱅뱅 (BANG BANG BANG) + FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/EQsYfiPR9uM/mqdefault.jpg)
One of the best mock videos in your channel, the way Raj Sagar handled the entire code and all your explanations were so informative. Can you please make a video on the Design Patterns in JS as well, what type of questions are normally asked in Interviews?
I'm aware of debounce & throttle concepts but I'm unaware of Intersection Observer & Abort Controller. Those are very useful & you explained those very clearly. Thanks 😊
Glad it was helpful!
Man I was so confident that I know everything about this problem and can solve it but at the end, network call cancellation stuff, I was taken by surprise. I had no idea about this problem and its solution.
😜
I was always confused what and how things are asked in a machine coding round of interview. Thanks for this video Chirag, you're awesome!
Glad it was helpful!
I have gained so much knowledge about machine coding round, How to approach the problem and what sequence you should create the file ,Handling edges case and finally optimizing the solution. Learned 2 new things about Web i.e Intersection Observe and abort controller. Thank you Chirag bhaiya .💯💯
Thanks a lot for sharing your feedback ❤️
One of the best system design content on TH-cam, Thank you Chirag and Raj!
Thanks a ton 🙏😊
I was seriously neglecting this video as it’s going to be simple autosuggestion but Man you rocked it with lot of advanced optimisation concepts to learn in between and things to consider while building. Thanks for the awesome video. You going to be great TH-cam and tutor no doubt. Cheers 🥂
Glad you find it useful ☺️. Keep watching and spreading #chakdeSystemDesign
Chirag sir, kudos to you, explaining so many concepts and great interview experience. Especially Abort controller and infinite scroll are the two less known things, that will help strengthen the frontend knowledge. Thank you so much for making this awesome content!
Glad you liked it. #chakdeSystemDesign 👍
Really helpful
thanks for making awesome content
the way you are adding video bites explaining concept is the cherry on the top
thanks
So nice of you. Keep watching and sharing #chakdeSystemDesign series 🚀
I always start your videos and leave it in between only, today i have completed the whole and it's really very much informative.
Thanks for uploading good content. Please make video on react also regarding performance and all.
Thanks for the feedback. Keep watching 👍
Lovely video man, many thanks, this is quality content and very helpful, thanks again :)))
Glad you enjoyed it! Keep learning, keep sharing 🚀
Again great content! Very nice mockup interview especially using native Javascript instead of framework.
In terms of aborting in-flight request, what I have done is match keyword before inserting the response back to the DOM element. If the input has the same keyword for which I got the response then append to DOM else ignore the result as AJAX cannot be cancelled. I just learned about AbortController today which I'm looking further into.
One non technical feedback: Your audio was low when you were describing debounce in between compared to overall Audio. May be that need to be normalized by your video processing software.
Edit: Looked into Abort Controller and what it seems like is it is very similar to useRef where you get a reference to the AbortController, and then you are passing the same reference to all the relevant API calls that you are making in this case keyword search API and as soon as one response comes back, I am going to call .abort for all the other in-flight requests.
--> Which to me seems to be a problematic. Here's the scenario: Consider your example and lets reverse the order of response, i.e. you got response back for "A" but not "Apple" yet, based on controller code, we are going to cancel Apple's in-flight request and show result for "A" which will show to the user "Apple" and "Apricot". Unless I'm not getting this correctly.
You need to abort the request on every key press (after Debounce call). So, in this case you won't face the above challenges. As you will be cancelling any previous active call.
Thanks for the audio feedback. I realized it late. But will keep it in mind for upcoming videos. Thanks again for highlighting it.
Awesome content :) . Please keep making such more videos. Please keep making videos on Frontend System design.
Thanks, will do! Keep watching and spreading ChakdeSystemDesign series.
Really great to have in-depth unique content
Thanks, Sumit, I'm glad you liked it.
great mock interview 😊
what is the best approach to define function contracts in large application. 1. First one like here the handleInputChange calls handleSeach function which in turn calls renderDropIterms. 2nd approach ,these functions only do their work and return result.eg.handleSeach return search result
really enjoyed watching this. would love to see more like this videos nd explainations.
More to come! Keep watching #ChakdeSystemDesign
Amazing Chirag ! Keep up the good work!
Thanks a ton! Keep watching #chakdeSystemDesign
Hi chirag loved the way this video was explained how in interview to approach the problem n suggest best practices wrt performance etc can u pls make videos on tic tac toe, google calendar, product listing pages , twitter example , Google sheets too.
Yes, definitely. It's on my plan. Keep watching and sharing 😊
Debounce with leading and trailing options :
function debounce(func, wait, option = {leading: false, trailing: true}) {
let timeout = null;
return function() {
let isCalled = false;
if(timeout === null && option.leading) {
func.apply(this, arguments);
isCalled = true;
}
clearTimeout(timeout);
timeout = setTimeout(() => {
if(option.trailing && !isCalled) {
func.apply(this, arguments)
}
timeout = null;
}, wait);
};
}
Good going, keep it up and thanks for sharing 🙂🙏
Interview was great..
Thank you 🙏 Keep watching 🚀
Sir, would be grreat if code-sandbox link is provided for the feature developed/discissed in the video
Going forward I will provide the codesand box link as well. Thanks for suggestion!
what platform are you using to code colab ?
From my experience, When I used to develop the autosuggestions field, I found - If there are multiple API calls in the pending state, they will execute one after another, not like the 2nd one will complete before the first one as you said the scenario in Abort controller.
So In my scenario, is the server priorities the first API call and giving data one by one, or it's because of JS?
In development mode, we mostly have single api service to process the request, hence you may get response one at a time. But in production, we have multiple micro-services to handle the request. Also server to client api response time will depend on response size & internet speed. So it's difficult to reproduce for small data in local.
Great Job Raj Sagar
Yeah!
@engineerchirag can you please cover other machine coding questions which you mentioned in the top 11 machine coding question video.
This is a very good video and I learned lot of new concepts
Stay tuned 🙂
Good explanation! 👍
Glad it was helpful!
Love this , thanks for sharing
Thanks for watching!
Great Work Chirag, keep bringing more such content on your channel.
Few Suggestions:
1) We could have discussed about how to make the Typeahead as a reusable component.
2) 1:06 Topic should be called Handling RACE condition in API calling.
3) Throttle code can be made a lot more easier and shorter.
Thanks for the suggestions Kapil. Yes in the upcoming video I will be focusing a bit more on reusability. The purpose of the video wasn't to provide the best possible solution, it was to share the thought process, covering multiple areas, working along with interviewer, etc.
please make more videos like this
On it @pavan. Need supoort to make it reach to more folks in community.
Hey Chirag Amazing work and very helpfull please share the codesanbox link or the problem statement as well. :)
Let me check if can find the CodeSandbox link. Keep watching chakdeSystemDesign
Great content 😊
Glad you think so!
while following the same code and adding import statments in index.js , i was getting "Uncaught SyntaxError: Cannot use import statement outside a module" error in console.
so , i has to add "type = module" in the script tag and use live server to make it work.
How is it not throwing any error for you ?
Codesandbox helps here.
Throttle function
function throttle(func, delay) {
let lastExecution = 0;
return function (...args) {
const now = Date.now();
if (now - lastExecution >= delay) {
func.apply(this, args);
lastExecution = now;
}
};
}
Good one!
hi Chirag lets do video. I am working at Amazon as FE2
Hey Himanshu,
Pls ping me on linkedin. Let's talk.
@@engineerchirag I am unable to send message over ur linkedin
Send me a connection request on linkedin or ping me on telegram on @engineerchirag
Watched full series. Great information you are sharing.
Please increase frequency of videos. It is much needed. Thanks
I'm working on increasing frequency, I need support from everyone to reach 5k+ subscription, so that I can start investing more time on recording. Pls share it in your network 🙂
Maja aa gya
❤️
Sir is System Design different than Ui design ? I have no idea , please help
Check: th-cam.com/video/sV_4pOGosnU/w-d-xo.html&ab_channel=ChiragGoel If you still have doubts, will discuss it.
Pro tip: Watch at 1.5x
const debounce = (func, delay) => {
let timerId = null;
let leading = true;
return function () {
const self = this;
const args = arguments;
clearTimeout(timerId);
if (leading) {
func(...args);
leading = false;;
} else {
timerId = setTimeout(() => {func.apply(self, args); leading = true}, delay);
}
};
};
// pls review
// leading and trailing debounce
function debounce(func, delay, options = {}) {
let timerId = null;
let leading = Boolean(options.leading)
let trailing = Boolean(options.trailing)
return function() {
let context = this;
let args = arguments;
let isLeadingCalled = false;
if(timerId === null && leading) {
isLeadingCalled = true
func.apply(context, args)
}
clearTimeout(timerId)
let later = () => {
timerId = null
if(trailing && !isLeadingCalled) {
func.apply(context, args)
}
}
timerId = setTimeout(later, delay)
}
}
Thanks for sharing. Will have a look 👍
const debounceLeading = (fn, delay) => {
let wait = false;
let timer;
return function () {
if (!wait) {
fn.apply(this, arguments);
wait = true;
}
clearTimeout(timer);
timer = setTimeout(() => (wait = false), delay);
};
};
const debounceLeadingTrailing = (fn, delay) => {
let wait = false;
let timer;
return function () {
if (!wait) {
fn.apply(this, arguments);
wait = true;
}
clearTimeout(timer);
timer = setTimeout(() => {
wait = false;
fn.apply(this, arguments);
}, delay);
};
};