Тёмный
Devtools Tech
Devtools Tech
Devtools Tech
Подписаться
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".

Interview questions: devtools.tech/resources/all?ref=dtyt-ql
Interview resources: devtools.tech/resources/all?ref=dtyt-rl

Not sure of your interview preparation? Needs a partner? Practice Interview session with us:
topmate.io/yomeshgupta

Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: www.linkedin.com/in/yomeshgupta/
Twitter: twitter.com/yomeshgupta
Use this Tool to ACE at your Job | Devtools Tech
14:48
8 месяцев назад
Комментарии
@code-index
@code-index 17 часов назад
You can solve it by using two stacks, also can solve it by using an array of objects and pointer.
@DevtoolsTech
@DevtoolsTech 17 часов назад
Array in in the video is used as a stack only. Since, JS doesn't support stacks natively or doesn't have STL, I didn't want to create a stack separately and used an array.
@adityasharma_________55556
@adityasharma_________55556 17 часов назад
Hey i think your website is not properly functioning as some styling effects are not rendering properly and the code editor is very glitchy as some of the buttons are not working and are placed incorrectly
@DevtoolsTech
@DevtoolsTech 17 часов назад
Hey, could you please share a screen recording to team.devtools@gmail.com? It would help us a lot in debugging. Thanks!
@amanraina5812
@amanraina5812 18 часов назад
Really amazing. Learnt alot
@amanraina5812
@amanraina5812 18 часов назад
Great !!!!! ❤
@DevtoolsTech
@DevtoolsTech 18 часов назад
Thank you! 🙌🏼
@revanthrev23
@revanthrev23 19 часов назад
This is a very good question! Thank you!
@DevtoolsTech
@DevtoolsTech 18 часов назад
Thank you! More coming soon. 🙌🏼
@DevtoolsTech
@DevtoolsTech 19 часов назад
Question link: devtools.tech/questions/s/how-to-build-circles-game-in-react-js-frontend-coding-challenge---qid---Y8acly7B5CmIVAaT5knP Practice with us: topmate.io/yomeshgupta Best coding practices: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9g1rYWJvvzY.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Atlassian: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--wow5ApdZ0Y.html Uber: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DCoIeGt4g7M.html&start_radio=1 LinkedIn: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6euTBVDCD6o.html Facebook: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7DJCpgc6V94.html Atlassian: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3OxMsnP78zg.html Klarna: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Py_bXjSMyTc.html MakeMyTrip: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yHg0bvNqJEQ.html Microsoft: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Iv1gZN900uc.html AWS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PFo1ZQBv4hA.html Custom Loader: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E01XdDQgzDM.html
@learningjoe1823
@learningjoe1823 2 дня назад
Really Nice. Would like to learn more. Subscribed and bell icon clicked.
@DevtoolsTech
@DevtoolsTech 2 дня назад
Thank you! 🙌🏼
@ADITYAKUMAR-vt6yo
@ADITYAKUMAR-vt6yo 3 дня назад
Two query : const removeFill = ()=>{ if(allSelectedKeys.length){ const currentKeys = allSelectedKeys.shift(); setClickedCells(prev=> { const updatedKey = new Set(prev); updatedKey.delete(currentKeys); return updatedKey; }) setTimeout(removeFill,500) } } setTimeout(removeFill,100) why we are doing const updatedKey = new Set(prev);
@DevtoolsTech
@DevtoolsTech 2 дня назад
We are creating a copy and removing keys from it. We don't want to mutate original value.
@vignesh.k3996
@vignesh.k3996 3 дня назад
Finally, i found a gem for frontend by your videos.Please keep posting.❤
@DevtoolsTech
@DevtoolsTech 3 дня назад
Glad to hear that. More coming soon!
@DemystifyFrontend
@DemystifyFrontend 3 дня назад
Awesome 🎉
@user-tt7po9td3x
@user-tt7po9td3x 3 дня назад
Imagine being asked this question in 45 minutes 😂. I mean people shouldn’t judge a candidate based on a single question . Many would freak out and won’t be able to build it in that period of time.
@DevtoolsTech
@DevtoolsTech 3 дня назад
This is commonly asked in Uber's Frontend roles!
@user-tt7po9td3x
@user-tt7po9td3x 3 дня назад
@@DevtoolsTech 😂 I’m doomed bro. I can build but in interview it’s whole different game
@DevtoolsTech
@DevtoolsTech День назад
You need to practice! That is the only way. I don't want self plug but you can try mock interviews. Try something like topmate.io/yomeshgupts
@AnkitGupta-lr1qq
@AnkitGupta-lr1qq 4 дня назад
Great video. nicely explained and well-structured approach. One minor improvement or a slight miss is in the BarChart component, the useMemo should have data as inside the dependency array. a linter would anyhow point that out. but since the data could be anything and could change as well, the derived values should be dependent on it.
@DevtoolsTech
@DevtoolsTech 3 дня назад
Thank you for the suggestion. I will keep it mind! 🙌🏼
@travelrichardparker1088
@travelrichardparker1088 5 дней назад
This video I watched randomly, but worth for wach learn many things. Thank you
@DevtoolsTech
@DevtoolsTech 5 дней назад
Glad to hear that! Many more coming soon! 🙌🏼
@jj_tech_gate
@jj_tech_gate 6 дней назад
First time i watched, i realized many things i dont know 😅😂 but i enjoyed and i will watch again and again, not only for logic also for improving eng😂
@DevtoolsTech
@DevtoolsTech 6 дней назад
Glad to see you learnt something new! More coming soon. 🙌🏼
@prajwalkulkarni1
@prajwalkulkarni1 6 дней назад
TIL that returning a primitive value from a constructor function returns the implicit this. Thanks for the explanation. Just a follow up, if we'd want to make sure that the constructor function is invoked using the "new" keyword, we could also use `if(!(this instanceof ConstructorFunction)){throw new Error("Call me with new keyword")}` right? I was wondering what's the difference between using `new.target` and `instanceof`?
@DevtoolsTech
@DevtoolsTech 6 дней назад
We do ConstructorFunction.call(foo, "bar"); then instanceof will still return true but new.target would not be true as the new keyword was not used so target check makes more sense if we want to enforce the rule.
@sougatadas_yt
@sougatadas_yt 6 дней назад
Nice! was intimated at first by the question but the way you explained - beautiful. Good content 🔥
@DevtoolsTech
@DevtoolsTech 6 дней назад
Thanks a lot! More coming soon. 🙌🏼
@Code-Hub-Tamil
@Code-Hub-Tamil 6 дней назад
Im waiting for your response bro!
@Code-Hub-Tamil
@Code-Hub-Tamil 6 дней назад
I recreated your Uber interview shapes question in Tamil and would like to post it online. Additionally, I want to solve the Atlassian problem and create a video about it. May I have your permission to do so? Brother!
@DevtoolsTech
@DevtoolsTech 6 дней назад
Hi, it is okay if you want to make it but please mention my video/channel in your video and provide the link to it so that there is due credit. Thanks!
@Code-Hub-Tamil
@Code-Hub-Tamil 6 дней назад
@@DevtoolsTech definitely bro
@Code-Hub-Tamil
@Code-Hub-Tamil 6 дней назад
@@DevtoolsTech actually i created uber video day before yesterday so didn't mention you well but in future for this video i will mention bro
@DevtoolsTech
@DevtoolsTech 6 дней назад
Great. One more suggestion: try solving the question on the platform devtools.tech/questions/programming and record it. You can solve it on your local too. I just want to have some feedback in terms of how the user experience is and if any challenges faced by the people. Your feedback would go a long way improving it for all. Thanks!
@Code-Hub-Tamil
@Code-Hub-Tamil 6 дней назад
@@DevtoolsTech ya definitely bro
@freecourseplatformenglish2829
@freecourseplatformenglish2829 6 дней назад
Thanks Yomesh, I would like to mention that 5th point in functional requirement of this question is a bit confusing "During de-selection, user should be able to select a new box as in disable any box interaction." Can you please fix it.
@DevtoolsTech
@DevtoolsTech 6 дней назад
Hi, thanks for pointing it out. I will fix it! 🙌🏼
@midhlajap
@midhlajap 7 дней назад
Thanks man, one thing that came to my mind is while unloading, instead of using unloading state to control the click event, we can get the parent div element and make its pointer-events to none
@DevtoolsTech
@DevtoolsTech 7 дней назад
Thanks for the suggestion! I did that to be double sure incase some css overrides happen!
@DemystifyFrontend
@DemystifyFrontend 7 дней назад
Awesome tutorial where each bit is full of concepts 🎉
@DevtoolsTech
@DevtoolsTech 7 дней назад
Thank you! More coming soon. 🙌🏼
@harshitpant07
@harshitpant07 7 дней назад
do companies ask you to write plain css or are we allowed to use tailwind? I know most of the time its up to the interviewer but what is the usual case scenario do they allow or now?
@DevtoolsTech
@DevtoolsTech 7 дней назад
Varies from company to company. However, general trend is to have a working knowledge of a framework but good grasp on vanilla CSS. If one doesn't know underlying properties or doesn't have a good understanding of the basics then if there is a complex bug then they won't be able to resolve or have difficulty with it. Only framework developers aren't that desirable.
@syncmaster320
@syncmaster320 7 дней назад
If you can do it in tailwind, what's stopping you from doing it in css? Plus I'm pretty sure they want to know your understanding of the fundamentals
@yashsolanki069
@yashsolanki069 7 дней назад
I don't understand how can someone be good at tailwind and is not good with vanilla CSS. tailiwndcss is just vanilla CSS shorthand.
@DevtoolsTech
@DevtoolsTech 7 дней назад
No, it is possible to apply framework classes but not understanding how box model works or why width is higher than declared because padding is also applied but box-sizing is not.
@sarathnair3295
@sarathnair3295 7 дней назад
Are we supposed to use libraries like Framer Motion during interviews?
@DevtoolsTech
@DevtoolsTech 7 дней назад
You can ask the interviewer. If they allow then sure else use vanilla CSS. Many questions involve strict guidelines and are conveyed at the start of the interview. If not then always confirm before using.
@freecourseplatformenglish2829
@freecourseplatformenglish2829 3 дня назад
Interviewer might allow at the moment but I think they will prefer someone who know basics well.
@DevtoolsTech
@DevtoolsTech День назад
@@freecourseplatformenglish2829 Agreed. Interviewers look for basics. I would confirm with them before using any library or third party tool.
@mukeshgiri4130
@mukeshgiri4130 7 дней назад
Every well explained ❤
@DevtoolsTech
@DevtoolsTech 7 дней назад
Thank you! 🙌🏼
@sunnygante9867
@sunnygante9867 7 дней назад
Roadside coder also solve this type of question few months back
@DevtoolsTech
@DevtoolsTech 7 дней назад
Haven't seen his video yet. More the no. of resources better for us all! 🙌🏼
@DevtoolsTech
@DevtoolsTech 7 дней назад
Question link: devtools.tech/questions/s/how-to-build-an-interactive-jira-velocity-bar-chart-atlassian-browser-coding-round-interview-question---qid---H24LHAOpjxtuol41iGn8 Practice with us: topmate.io/yomeshgupta Best coding practices: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9g1rYWJvvzY.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Uber: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-DCoIeGt4g7M.html&start_radio=1 LinkedIn: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6euTBVDCD6o.html Facebook: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7DJCpgc6V94.html Atlassian: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3OxMsnP78zg.html Klarna: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Py_bXjSMyTc.html MakeMyTrip: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yHg0bvNqJEQ.html Microsoft: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Iv1gZN900uc.html AWS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PFo1ZQBv4hA.html Custom Loader: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E01XdDQgzDM.html
@arunkaiser
@arunkaiser 7 дней назад
First comment
@yoursshahnawaz
@yoursshahnawaz 8 дней назад
Very interesting problem and you explained it really well, thanks ❤
@DevtoolsTech
@DevtoolsTech 8 дней назад
Thank you! Many more to come. 🙌🏼
@ankushladani496
@ankushladani496 10 дней назад
Your explaination to every question is just lit...🔥💯
@DevtoolsTech
@DevtoolsTech 10 дней назад
Thanks! 🙌🏼🙏🏻
@ankushladani496
@ankushladani496 10 дней назад
@@DevtoolsTech Can we have a live sessions like these on discord? It will be more helpful for us 😊😀
@DevtoolsTech
@DevtoolsTech 7 дней назад
Sorry we don't have discord. It is hard to manage a community there. Very big time commitment.
@ankitagarwal4914
@ankitagarwal4914 11 дней назад
Thank you! I am learning the way how you are explaining tradeoffs why to DS to choose , explaining technicalities
@DevtoolsTech
@DevtoolsTech 10 дней назад
Glad to hear that! 🙏🏻
@akshat2808bspr
@akshat2808bspr 11 дней назад
function cal(num) { this.result = num; } cal.prototype.add = function (num) { this.result += num; return this; } cal.prototype.sub = function (num) { this.result -= num; return this; } cal.prototype.val = function () { console.log(this.result) return this; } Here's my solution returning this object after the operation is done in the function. Returning this makes us able to call the function which is defined for the instance of the cal.
@DevtoolsTech
@DevtoolsTech 11 дней назад
Thanks for sharing!
@johncena-qr4yg
@johncena-qr4yg 11 дней назад
16:40. you can use default vscode option to organize import and remove unused import. press F1 and type organize import then press Enter
@DevtoolsTech
@DevtoolsTech 11 дней назад
I will try. Thanks for sharing!
@mumarqayyum9286
@mumarqayyum9286 11 дней назад
Please make more videos like these. Despite being a developer with 3 years of experience, I have literally learned at least 3 to 4 new things in just 26 minutes of absolutely smooth explanation.
@DevtoolsTech
@DevtoolsTech 11 дней назад
Glad to hear that! More videos coming soon! 🚀
@ionutsandu5913
@ionutsandu5913 7 дней назад
Same here although I don't agree with few stuffs such as using recursion or the event bubbling thing (that will complicate things with typescript) but still great content.
@shubhamverma3873
@shubhamverma3873 11 дней назад
I learned something new, today.
@DevtoolsTech
@DevtoolsTech 11 дней назад
Glad to hear that! 🙌🏼
@ankushladani496
@ankushladani496 12 дней назад
Thanks Bhaiya...❤😊
@DevtoolsTech
@DevtoolsTech 12 дней назад
You are welcome! ♥️
@mohnishsawlani
@mohnishsawlani 12 дней назад
experience level for this interview round ?
@DevtoolsTech
@DevtoolsTech 12 дней назад
SDE 1/SDE 2
@ashmeetsingh3238
@ashmeetsingh3238 12 дней назад
I did not think of using event delegation and attributes to record which box is clicked 😅😅😅. Awesome video
@DevtoolsTech
@DevtoolsTech 12 дней назад
Glad to see you learnt something new today! 🙌🏼
@MrTyagi-rr9vg
@MrTyagi-rr9vg 13 дней назад
in my opinion, using setInterval instead of setTimeout may be better option, and clear the interval when all the card deselection completed.
@DevtoolsTech
@DevtoolsTech 13 дней назад
Both works in this case. Thanks for the suggestion!
@bikidas5473
@bikidas5473 14 дней назад
? was it to be solved using a ui framework or plain JS dom mainpulation will work?
@DevtoolsTech
@DevtoolsTech 14 дней назад
Question was asked using React.js but could be solved with Vanilla JS.
@Manoj-qn3qw
@Manoj-qn3qw 14 дней назад
Was really helpful and think I learnt something new, thank you !
@DevtoolsTech
@DevtoolsTech 14 дней назад
Glad to hear that! 🙌🏼
@syncmaster320
@syncmaster320 14 дней назад
Hey man! Thanks for another great video. I had a few questions here: 1) Why flatten the array? The 2D array provided might have the row and column details but when you flatten, you might lose that and is being hard coded to 3 columns and n rows. 2) Using of non-primitive data structures in the dependency array, wouldn't it defeat the purpose of memorizing? Also, I left you a message on reddit yesterday, I just wanted to thank you for the platform and the videos!
@DevtoolsTech
@DevtoolsTech 14 дней назад
I wanted to simplify the problem that is why flatten it. Ideally, it should be configurable and no hard coded CSS. Columns count should change as per the data. If you mean selected then we need an effect whenever it changes. It is a state and unless explicitly changed, we will get the same value across re-renders.
@nonish_9
@nonish_9 14 дней назад
Thanks for this types of videos and questions. also you well explained ✌✌
@DevtoolsTech
@DevtoolsTech 14 дней назад
More coming soon! 🙌🏼
@DevtoolsTech
@DevtoolsTech 14 дней назад
Question link: devtools.tech/questions/s/how-to-create-an-interactive-shape-based-ui-uber-frontend-interview-question-or-javascript-or-react-js---qid---6FVH1ZMWMXd4uZ8WAGEi Best coding practices: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9g1rYWJvvzY.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- LinkedIn: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6euTBVDCD6o.html Facebook: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7DJCpgc6V94.html Atlassian: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3OxMsnP78zg.html Klarna: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Py_bXjSMyTc.html MakeMyTrip: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yHg0bvNqJEQ.html Microsoft: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Iv1gZN900uc.html AWS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PFo1ZQBv4hA.html Custom Loader: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-E01XdDQgzDM.html Practice with us: topmate.io/yomeshgupta
@AdityaSharan811
@AdityaSharan811 21 день назад
we want a series on it. Kudos to content bro !
@DevtoolsTech
@DevtoolsTech 21 день назад
Thanks! Will share more soon! 🙌🏼
@VivekChavan-ov3pl
@VivekChavan-ov3pl 21 день назад
Sir, I recently gave an interview where I solved the reactjs coding question he given, but he pointed out my code quality. After I have gone through many open source projects structures, do you any other suggestions for me ?
@DevtoolsTech
@DevtoolsTech 21 день назад
Hi, not really. These things we learn by experience or by mentorship from others.
@VivekChavan-ov3pl
@VivekChavan-ov3pl 21 день назад
So much value. Do you have any document which consists all these best practices and some more or any resource or blog you refered for these ? Want more such videos. Next video ideas : 1 mock interview on reactjs ,where you will guide fresher through these mistakes 2. designing a small npm package live in 1 hour, with no preparation before hand
@ayaniegain
@ayaniegain 21 день назад
python django + react js how is the job market?
@DevtoolsTech
@DevtoolsTech 21 день назад
Not sure about this combo. There are jobs for React.js as far as I know.
@ayaniegain
@ayaniegain 21 день назад
@@DevtoolsTech react and node js ?
@sagyr
@sagyr 21 день назад
Even though market is tough im still bullish on frontend. Currently upskilling myself thanks for your videos.
@user-so6no8mi2z
@user-so6no8mi2z 22 дня назад
great explanation, keep up the consistency !
@DevtoolsTech
@DevtoolsTech 22 дня назад
Thanks! ♥️
@AnkitGupta-lr1qq
@AnkitGupta-lr1qq 24 дня назад
Great explanation. Wondering if it'd be better to throw OR return something like NaN instead of 0 inside the multiple method when the array length is 0. 0 might be a valid return value as well and doesn't distinguish enough from an edge case (like the empty array)
@DevtoolsTech
@DevtoolsTech 23 дня назад
Valid point. This is also a discussion point with interview about what is the expected behaviour. I agree that 0 is a valid output. However, we need to make a decision that should we break the application by throwing an error or return 0 that shows like a default output as for user if the application breaks then that is a really bad experience.