Devtools Tech is a RU-vid channel which was started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step towards our belief -- "We rise by lifting others".
Hi bro, i want to have some mock interviews conducted by you. But the price is high in topmate. You asked to reach out if facing any financial issues there but don't know how to reach out to you. please suggest some way bro
if i'm not wrong for the company based filter you've used the filtering based on if the name that you've selected in input is present in the title of the question as a substring or not right?
No, it doesn't check the title of the question. I am tagging individual questions against their respective companies. If you enter a search term then it will check the question title.
Yeah that’s what I’m also asking. The title you’re referring to is the title of the question right which also says “Atlassian front end interview question” so my question is after a companies name in the company select input field are you filtering the data based on that the word atlassian is present in the question’s title or not. If not then how are you filtering and also why not to filter it like I said does it cause any performance issues?
Like I said if earlier filtering was just search term based where system used to filter on the question title. Now, it filters on an array in the question data which contains the companies. I don't want to search on title as a question might be tagged with multiple companies so can't mention all in the title. There are indexes on the title field in the db so it is performant but not scalable.
Hello Bhaiya, recently I gave an interview - the interviewer asked to create a normal counter app but the updates should happen with useEffect. I am not able to figure out the correct way for this. can you please guide? I gave the normal approach for handling clicks on plus and minus btns.
@@DevtoolsTech i can think of the logic ki aaise aaise kar sakte hai and when i try to implement it just gets stuck at some point , syntatical knowledge isint syncing up with logical part. I hope i am making some sense
Totally depends upon the question's complexity level. Usually a machine coding round interview lasts 60 mins max. You should always try to finish a question 10 mins prior to the allocated time so that you can a buffer for questions, enhancements, or any unexpected issues.
@@DevtoolsTech They just need to be uploaded ?Are they recorded ? If they are going to take time, can u share any resource which i can follow to ocmplete it
@mohitarora2190 I am yet to record. Sorry, I don't have resource around it. You can try reading the source code of the official library on GitHub if you want.
@@DevtoolsTech ChatGPT - In React, event delegation is automatically handled to some extent through a mechanism called Synthetic Events. React doesn't attach event listeners directly to child DOM nodes. Instead, it attaches them to the root node (usually at the document level or the component's root). This is part of React's event handling optimization. Gemini - While React doesn't explicitly mention "event delegation" in its documentation, it does implement it under the hood. Here's what you need to know: How React handles event delegation: Root Container: In React 17 and later, event listeners are attached to the root DOM container where your React app is rendered. This means that a single event listener at the root handles events for all your React components. Event Bubbling: React leverages event bubbling, where events triggered on a child element propagate up the DOM tree until they reach the root. This allows React to capture events on any component within your application. Synthetic Events: React uses synthetic events, which are cross-browser wrappers around native DOM events. This ensures consistent event behavior across different browsers.
This doesn't solve the question mentioned in the video. There is no event handler. You are setting the indexes to true in a sequence and then deselecting them. It is a partial solution.
That is a good explanation, though the question link has no utilis file. While showing the utilis file it was partially seen becs' the browser was open on another side.
Question link has a utils file. Go to the question link then check the Files section in the left sidebar. I solve questions on the platform so that I have same setup as everyone else. Please check.
In the handleClick method of the Box component, is it a quirk that the DEFAULT_BG_COLOR can be one of the possible grid bgColors, and by explicitly returning it, we won't handle its match?
Yes, that is correct! Good catch! Two things to handle in that functiom We can add a check if isRevealed is true then explicit return as an early escape. We can update our getRandomColors method to handle blacklisted colors. You can also do some custom logic in the component if we don't want blacklisted colors change.
Question link: devtools.tech/questions/s/how-to-build-color-memory-game-in-react-js-frontend-coding-challenge---qid---1wFNDiwjxcKwrHL65SN5 Practice with us: devtools.tech/questions/s/how-to-build-color-memory-game-in-react-js-frontend-coding-challenge---qid---1wFNDiwjxcKwrHL65SN5 Updates: 1. We can improve the handle click logic by adding `isRevealed` to the condition. 2. We can add a `disabled` property to the button with the value isRevealed. <button ... disabled={isRevealed} />
Yes, using some flag makes it easier to handle. We can make something like this: { id: 1, bg: '#ffff', isRevealed: false } for each box state. By this we can prevent handleClick from clicking the box again as you mentioned in above comment and easily manage other things in handleClick. I just stuck while shuffling part because I don't know any algo by which I can achieve this in O(N). So, on google search I found algo named 'Fisher-Yates shuffle' Thanks for this great question
Hey yomesh, Thanks for sharing the solution, I have two doubts: 1. What if I use call instead of bind, what is the purpose of bind here. 2. What will happen if iteratee is an async function.
It won't work if we use call as it will invoke the function right away. We want to pass the function which should be invoked later with specific arguments. Callbacks are async too. However, promise handling is the second part of the problem. We need to modify the solution to accomodate that.
i was under the impression that multiply had to be added to the prototype of the returned array only and not on the entire Array.prototype function tuple(input) { const outputArr = [] let stack = [] for(const ch of input) { if(ch === '(' || ch === ',' || ch === ' ') continue else if(ch === ')') { outputArr.push(stack) stack = [] } else { stack.push(+ch) } } //ADD multiply to the prototype of the returned array outputArr.multiply = multiply return outputArr }
i was under the impression that `multiply()` had to be added on the prototype of `tuple()`'s result only..... function multiply(position) { let res = this[0][position-1] for(let i=1; i<this.length; i++) { res *= this[i][position-1] } return res } function tuple(input) { const outputArr = [] let stack = [] for(const ch of input) { if(ch === '(' || ch === ',' || ch === ' ') continue else if(ch === ')') { outputArr.push(stack) stack = [] } else { stack.push(+ch) } } // ADD multiply to the returned arr// outputArr.multiply = multiply return outputArr }
This solution seems wrong. Suppose you have a 3rd id with a very long request time. so 1 and 2 goes into postCompletionCallback . 1st timeout is completed and iterateeFn is called with 3 having long request time meanwhile 2nd timeout is completed and iterateeFn is called with 4 which has a short request time so obviosuly that will be completed first and User4 will be pushed which will call iterateeFn with 5 and its timeout will complete faster than 3rd timeout pushing User5 into outputs and at last after 3rd timeout is completed User3 will be pushed therefore making the solution wrong. If you want to confirm this , make random time multiplied by 1000 not by 100.
Currently, as per the question requirements, the wait time of each job is more than the preceding one. Hence, the solution will work. The solution is based on the specific requirements and details the interviewer provided. However, in the real world, the jobs can take unexpected amount of time. It is a follow up question to the current one. It won't be that straightforward to implement. It would require a combination of mix of tracking and promise based solution.
I understood the example, but want a clarification on somethings So, there are three things main Call stack (where synchronous code runs), CallBackQueue(MacrotaskQueue), and microtaskQueue. I want to understand the order that is being followed first all the sync code => done , call stack is now empty, during this time macro and micro queues have got some tasks in them if any. then what is the next order? all microtask then -> one oldest macrotask-> then all microtasks-> and so on. OR one oldest macrotask => then all microtasks => one oldest macrotask => and so on. I have spent so much hours on this, also read the mdn docs
Hi, first async then microtask queue then macrotask queue. It if first is first out in both the queues. So, when microtask queue is processed then it will execute the functions in the order of insertion. I hope it helps!
Hey! I do agree with the other comment and felt like something was missing or rush. Another thing I noticed is that the question is hinting at using async methods (likely Promise.SettleAll) but what you've implemented is very synchronous
Thanks for the feedback. I will keep it in mind. Question can be both sync and async. It depends upon what interviewer wants to see. As part of the solution prep, you can ask the interview what exactly they want. It can solved as a follow up question.
So, when I was learning about Promise.all polyfill, I ended up implementing it two ways one using async/await (which I think is wrong, because async/await came after promises) and other using Promises in javascript in the async/await implementation I ended up coming on a conclusion that the equivalent of resolve in Promises is return in async/await
Okay. You can say that when you return a value then in async await then that value is final. However, not exactly equivalent to resolve in promise as if you have code after resolve that will be executed if you aren't doing return resolve(yourvalue).
For example1 : When you say callback acts as argument fro WrappedPromise. Do we mean that, if from the first `then` you get a value and it will be passed to next `then` which will automatically wrap it inside a promise, and maybe also resolve itself and give it to the console.log? or the first then will return a promise of that value? The only thing I understand is that `then` will work for both promises and simple values
This video felt rushed. Question and the approaches were never discussed thoroughly before jumping into the solution. The solution however obvious it might be to you, from the 3rd person, the complete 11 mins were a waste of time to us.
