Devtools Tech
Devtools Tech
  • 88
  • 413 164
Building an Animated Circles Game in React.js | Frontend Coding Challenge
In this video, we will build an animated circles game in React. We will implement a function where a circle would appear on the screen where a user clicks. We will look into features like undo, redo, and resetting the board. It is a fun UI challenge!
Question link: devtools.tech/questions/s/how-to-build-circles-game-in-react-js-frontend-coding-challenge---qid---Y8acly7B5CmIVAaT5knP
Support Us: topmate.io/yomeshgupta/748345
Try now using the links below
devtools.tech/questions/all?type=3
devtools.tech/list/all
You can support our channel via:
rzp.io/l/support-devtools-tech
devtoolstech.gumroad.com/l/support
www.buymeacoffee.com/yomeshgupta
************************************************************
Devtools Tech is a UA-cam channel 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 toward our belief -- "We rise by lifting others".
Interview questions: devtools.tech/questions/all?ref=dt-yt
Interview resources: devtools.tech/resources/all?ref=dt-yt
Hidden Gem: devtools.tech/crazyones
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: www.linkedin.com/in/yomeshgupta/
Twitter: yomeshgupta
#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************
Переглядів: 124

Відео

Solving Atlassian Frontend Interview Question | Interactive JIRA Velocity Chart
Переглядів 4,5 тис.16 годин тому
In this video, we will build a an interactive chart similar to Atlassian's JIRA Velocity Chart. We will divide the problem into smaller parts, build iteratively, learn about CSS, and master web animations! Question link: devtools.tech/questions/s/how-to-build-an-interactive-jira-velocity-bar-chart-atlassian-browser-coding-round qid H24LHAOpjxtuol41iGn8 Support Us: topmate.io/yomeshgupta/748345 ...
Solving Uber Frontend Interview Question | Interactive Shape
Переглядів 17 тис.14 днів тому
In this video, we will solve a front-end interview question from top companies like Uber. We will build an interactive shape based on the given data. The user can interact with the shape. We will take care of multiple edge cases, talk about effects, and lots of other fundamental concepts. Question link: devtools.tech/questions/s/how-to-create-an-interactive-shape-based-ui-uber-frontend-intervie...
Top Coding Practices to Become a 10x Engineer
Переглядів 1,3 тис.21 день тому
In this video, we will take a look at the top coding practices that will help you write better code and become a 10x Engineer! Support Us: topmate.io/yomeshgupta/748345 Try now using the links below devtools.tech/questions/all?type=3 devtools.tech/list/all You can support our channel via: rzp.io/l/support-devtools-tech devtoolstech.gumroad.com/l/support www.buymeacoffee.com/yomeshgupta Devtools...
Solving LinkedIn Frontend Interview Question | Tuple | Arrays of Array | JavaScript
Переглядів 1,5 тис.28 днів тому
In this video, we will solve a front-end interview question from top companies like LinkedIn. We will implement a function called tuple that converts the input string into array of arrays. It should support a method multiple that returns the multiplication result of ith position element provided as input Question link: devtools.tech/questions/s/implement-tuple-function-or-linkedin-frontend-inte...
How to build a Loading Animation using CSS and React.js?
Переглядів 1,6 тис.Місяць тому
In this video, we will build a custom loading animation using vanilla CSS. We will build a custom React.js component that can be used anywhere inside a web-app. Join this channel to get access to perks: ua-cam.com/channels/tf9NkTbitF05Lap2tragZA.htmljoin Try this question here: devtools.tech/questions/s/how-to-create-a-loading-animation-or-frontend-coding-challenge-or-react-js-or-javascript qid...
How to solve Promise Based JavaScript Output Questions? | Ultimate Trick!
Переглядів 2,4 тис.Місяць тому
In this video, we will understand how to solve Promise Based JavaScript Output Questions. We will talk about different queues/tasks in JavaScript and how code statements are scheduled for execution. We will briefly touch Event Loop in JavaScript. To understand more about Event Loop in JS, watch the following video ua-cam.com/video/KIovWu7DJO0/v-deo.html Join this channel to get access to perks:...
Solving Meta Frontend Interview Question | Facebook | Implement Event Emitter | JavaScript
Переглядів 2 тис.Місяць тому
In this video, we will solve a front-end interview question from top companies like Meta/Facebook. We will implement an Event Emitter class that will help us build the publisher subscriber functionality. Many users have reported to us and on the web that this question was asked in the the interview process of companies like Facebook, Google, and many more. Join this channel to get access to per...
Solving Atlassian Frontend Interview Question | Confluence Like Tree Structure | React.js
Переглядів 9 тис.Місяць тому
In this video, we will solve a front-end interview question from top companies like Atlassian. We will build a UI similar to tree like structure used inside the Atlassian's Confluence product. Question link: devtools.tech/questions/s/how-to-build-a-confluence-like-sidebar-with-tree-structure-or-atlassian-frontend-interview-question-or-react-js qid 3r7988VsESMQBt9vP1Zi Support Us: topmate.io/yom...
Solving Klarna Frontend Interview Question | Credit Card Masker | JavaScript
Переглядів 1,5 тис.2 місяці тому
In this video, we will solve a front-end interview question from top companies like Klarna. We will implement a function that returns the masked version of a credit card number. Question link: devtools.tech/questions/s/implement-a-credit-card-masker-or-klarna-frontend-interview-question-or-javascript qid AdZLcjN3FNivgYCuq5pa Support Us: devtools.tech/support Try now using the links below devtoo...
Solving MakeMyTrip Frontend Interview Question | Count Numbers | JavaScript
Переглядів 1,4 тис.2 місяці тому
In this video, we will solve a front-end interview question from top companies like MakeMyTrip. We will implement a function that returns the count of numbers inside an array. Question link: devtools.tech/questions/s/write-a-function-to-return-the-count-of-numbers-in-an-array-or-makemytrip-frontend-interview-question qid cjzjsfJUP0zHb2lgPJVy Book A Mock Interview Session: topmate.io/yomeshgupta...
How to Improve Performance of Your JavaScript Code? | Part 1 | Devtools Tech
Переглядів 8112 місяці тому
Book A Mock Interview Session: topmate.io/yomeshgupta Looking to boost your JavaScript performance? 🚀 In this video, we dive into practical tips and tricks to enhance the speed and efficiency of your JavaScript code. Whether you're a beginner or an experienced developer, optimizing JavaScript performance is crucial for creating fast and responsive web applications. From minimizing DOM manipulat...
Can You Solve This Bug? | Frontend Debugging Tips | JavaScript Closures | React.js
Переглядів 1,7 тис.2 місяці тому
In this video, we are going to take a look at interesting frontend issue. We will try debug it and discuss core frontend concepts. We will try multiple approaches and opt for the most optimized solution. Book A Mock Interview Session: topmate.io/yomeshgupta 00:00 Introduction 02:18 Problem Statement 03:46 Code Walkthrough 09:03 Initial Debugging And Approaches 12:34 Root Cause 16:08 First Solut...
The End of Front-end Development? | My Honest Take | AI Development | Devtools Tech
Переглядів 1,1 тис.2 місяці тому
In this video, we are going to talk about the state of frontend and how it is changing due to recent AI developments. We are going to discuss what we can do to upskill ourselves and use the AI developments as power tools. Book A Mock Interview Session: topmate.io/yomeshgupta 00:00 Introduction 01:20 Repeating Cycle 05:26 What should I do? 12:36 AI as a power tool, not replacement 26:23 What is ...
Stop This Mistake | When to use useCallback and React Memo? | Real World React Hooks Examples!
Переглядів 1,9 тис.4 місяці тому
In this video, we are going to talk about React hooks and specifically discuss one particular hooks called useCallback. We going to look at a use-case where this hook would be useful and help us improve the performance. We are also going to look at React.memo, understand how it works and how it can help us stop extra re-renders. Book A Mock Interview Session: topmate.io/yomeshgupta Support Us: ...
Solve Microsoft Frontend Interview Question | Country Capital Game | JavaScript | React.js
Переглядів 8 тис.4 місяці тому
Solve Microsoft Frontend Interview Question | Country Capital Game | JavaScript | React.js
Frontend Debugging Techniques That Every Engineer Must Know | Understanding Git Bisect | Part 2
Переглядів 21 тис.5 місяців тому
Frontend Debugging Techniques That Every Engineer Must Know | Understanding Git Bisect | Part 2
Top Frontend Projects That Will Get You HIRED! | JavaScript | Hindi
Переглядів 46 тис.6 місяців тому
Top Frontend Projects That Will Get You HIRED! | JavaScript | Hindi
How to build a Moving Dot Animation? JavaScript | React.js | CSS
Переглядів 4,4 тис.7 місяців тому
How to build a Moving Dot Animation? JavaScript | React.js | CSS
Frontend Debugging Tips That Every Engineer Must Follow | Part 1
Переглядів 12 тис.7 місяців тому
Frontend Debugging Tips That Every Engineer Must Follow | Part 1
How to Build Instagram Like Button Demo | Frontend Coding Challenge | Beginner
Переглядів 3197 місяців тому
How to Build Instagram Like Button Demo | Frontend Coding Challenge | Beginner
How to build your own redux? | combineReducers | Part 3 | State Management | Advanced JavaScript
Переглядів 9607 місяців тому
How to build your own redux? | combineReducers | Part 3 | State Management | Advanced JavaScript
Break from work - Travel Stories from Pune, Lonavala & Mumbai!
Переглядів 3108 місяців тому
Break from work - Travel Stories from Pune, Lonavala & Mumbai!
Use this Tool to ACE at your Job | Devtools Tech
Переглядів 1,1 тис.8 місяців тому
Use this Tool to ACE at your Job | Devtools Tech
Build a FAQ Page Demo | Frontend Coding Challenge | JavaScript | React.js
Переглядів 4588 місяців тому
Build a FAQ Page Demo | Frontend Coding Challenge | JavaScript | React.js
Implement promiseMerge | Intermediate JavaScript Interview Question | Frontend Problem Solving
Переглядів 7428 місяців тому
Implement promiseMerge | Intermediate JavaScript Interview Question | Frontend Problem Solving
Build A GIF Search Engine | Frontend Coding Challenge | Devtools Tech
Переглядів 4659 місяців тому
Build A GIF Search Engine | Frontend Coding Challenge | Devtools Tech
Room Reservation System Demo | Frontend Coding Challenge | Devtools Tech
Переглядів 7559 місяців тому
Room Reservation System Demo | Frontend Coding Challenge | Devtools Tech
Frontend Problem Solving Questions | Once & Limit Functionality | Lodash Polyfills
Переглядів 746Рік тому
Frontend Problem Solving Questions | Once & Limit Functionality | Lodash Polyfills
Solving AWS Frontend Interview Question | Implement Deep Filter | JavaScript | Devtools Tech
Переглядів 1 тис.Рік тому
Solving AWS Frontend Interview Question | Implement Deep Filter | JavaScript | Devtools Tech

КОМЕНТАРІ

  • @code-index
    @code-index 29 хвилин тому

    You can solve it by using two stacks, also can solve it by using an array of objects and pointer.

    • @DevtoolsTech
      @DevtoolsTech 9 хвилин тому

      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 31 хвилина тому

    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 11 хвилин тому

      Hey, could you please share a screen recording to team.devtools@gmail.com? It would help us a lot in debugging. Thanks!

  • @amanraina5812
    @amanraina5812 Годину тому

    Really amazing. Learnt alot

  • @amanraina5812
    @amanraina5812 Годину тому

    Great !!!!! ❤

  • @revanthrev23
    @revanthrev23 2 години тому

    This is a very good question! Thank you!

    • @DevtoolsTech
      @DevtoolsTech Годину тому

      Thank you! More coming soon. 🙌🏼

  • @DevtoolsTech
    @DevtoolsTech 2 години тому

    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: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Atlassian: ua-cam.com/video/-wow5ApdZ0Y/v-deo.html Uber: ua-cam.com/video/DCoIeGt4g7M/v-deo.html&start_radio=1 LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html

  • @learningjoe1823
    @learningjoe1823 День тому

    Really Nice. Would like to learn more. Subscribed and bell icon clicked.

  • @ADITYAKUMAR-vt6yo
    @ADITYAKUMAR-vt6yo 2 дні тому

    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 День тому

      We are creating a copy and removing keys from it. We don't want to mutate original value.

  • @vignesh.k3996
    @vignesh.k3996 2 дні тому

    Finally, i found a gem for frontend by your videos.Please keep posting.❤

    • @DevtoolsTech
      @DevtoolsTech 2 дні тому

      Glad to hear that. More coming soon!

  • @DemystifyFrontend
    @DemystifyFrontend 2 дні тому

    Awesome 🎉

  • @user-tt7po9td3x
    @user-tt7po9td3x 2 дні тому

    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 2 дні тому

      This is commonly asked in Uber's Frontend roles!

    • @user-tt7po9td3x
      @user-tt7po9td3x 2 дні тому

      @@DevtoolsTech 😂 I’m doomed bro. I can build but in interview it’s whole different game

    • @DevtoolsTech
      @DevtoolsTech 13 годин тому

      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 3 дні тому

    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 4 дні тому

    This video I watched randomly, but worth for wach learn many things. Thank you

    • @DevtoolsTech
      @DevtoolsTech 4 дні тому

      Glad to hear that! Many more coming soon! 🙌🏼

  • @jj_tech_gate
    @jj_tech_gate 5 днів тому

    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 5 днів тому

      Glad to see you learnt something new! More coming soon. 🙌🏼

  • @prajwalkulkarni1
    @prajwalkulkarni1 5 днів тому

    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 5 днів тому

      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 5 днів тому

    Nice! was intimated at first by the question but the way you explained - beautiful. Good content 🔥

    • @DevtoolsTech
      @DevtoolsTech 5 днів тому

      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 6 днів тому

    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 6 днів тому

      Thanks for the suggestion! I did that to be double sure incase some css overrides happen!

  • @DemystifyFrontend
    @DemystifyFrontend 6 днів тому

    Awesome tutorial where each bit is full of concepts 🎉

    • @DevtoolsTech
      @DevtoolsTech 6 днів тому

      Thank you! More coming soon. 🙌🏼

  • @harshitpant07
    @harshitpant07 6 днів тому

    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 6 днів тому

      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 6 днів тому

      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 6 днів тому

      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 6 днів тому

      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 6 днів тому

    Are we supposed to use libraries like Framer Motion during interviews?

    • @DevtoolsTech
      @DevtoolsTech 6 днів тому

      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 2 дні тому

      Interviewer might allow at the moment but I think they will prefer someone who know basics well.

    • @DevtoolsTech
      @DevtoolsTech 13 годин тому

      @@freecourseplatformenglish2829 Agreed. Interviewers look for basics. I would confirm with them before using any library or third party tool.

  • @mukeshgiri4130
    @mukeshgiri4130 6 днів тому

    Every well explained ❤

  • @sunnygante9867
    @sunnygante9867 7 днів тому

    Roadside coder also solve this type of question few months back

    • @DevtoolsTech
      @DevtoolsTech 6 днів тому

      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: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Uber: ua-cam.com/video/DCoIeGt4g7M/v-deo.html&start_radio=1 LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html

  • @arunkaiser
    @arunkaiser 7 днів тому

    First comment

  • @yoursshahnawaz
    @yoursshahnawaz 7 днів тому

    Very interesting problem and you explained it really well, thanks ❤

    • @DevtoolsTech
      @DevtoolsTech 7 днів тому

      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 6 днів тому

      Sorry we don't have discord. It is hard to manage a community there. Very big time commitment.

  • @ankitagarwal4914
    @ankitagarwal4914 10 днів тому

    Thank you! I am learning the way how you are explaining tradeoffs why to DS to choose , explaining technicalities

  • @akshat2808bspr
    @akshat2808bspr 10 днів тому

    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.

  • @johncena-qr4yg
    @johncena-qr4yg 10 днів тому

    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 10 днів тому

      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 6 днів тому

      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.

  • @ankushladani496
    @ankushladani496 11 днів тому

    Thanks Bhaiya...❤😊

  • @mohnishsawlani
    @mohnishsawlani 11 днів тому

    experience level for this interview round ?

  • @ashmeetsingh3238
    @ashmeetsingh3238 11 днів тому

    I did not think of using event delegation and attributes to record which box is clicked 😅😅😅. Awesome video

    • @DevtoolsTech
      @DevtoolsTech 11 днів тому

      Glad to see you learnt something new today! 🙌🏼

  • @MrTyagi-rr9vg
    @MrTyagi-rr9vg 12 днів тому

    in my opinion, using setInterval instead of setTimeout may be better option, and clear the interval when all the card deselection completed.

    • @DevtoolsTech
      @DevtoolsTech 12 днів тому

      Both works in this case. Thanks for the suggestion!

  • @bikidas5473
    @bikidas5473 13 днів тому

    ? was it to be solved using a ui framework or plain JS dom mainpulation will work?

    • @DevtoolsTech
      @DevtoolsTech 13 днів тому

      Question was asked using React.js but could be solved with Vanilla JS.

  • @Manoj-qn3qw
    @Manoj-qn3qw 13 днів тому

    Was really helpful and think I learnt something new, thank you !

  • @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 13 днів тому

      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 днів тому

    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: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html Practice with us: topmate.io/yomeshgupta

  • @AdityaSharan811
    @AdityaSharan811 20 днів тому

    we want a series on it. Kudos to content bro !

    • @DevtoolsTech
      @DevtoolsTech 20 днів тому

      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 20 днів тому

      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 20 днів тому

      Not sure about this combo. There are jobs for React.js as far as I know.

    • @ayaniegain
      @ayaniegain 20 днів тому

      @@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 21 день тому

    great explanation, keep up the consistency !

  • @AnkitGupta-lr1qq
    @AnkitGupta-lr1qq 23 дні тому

    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.