16 Intermediate/Advanced JavaScript Projects to Dominate Your Next Technical Interview Get it now- xplodivity.graphy.com/courses/16-js-projects-65883553e4b08ebe75f39885 - Lifetime access - Full video explanations of building each project from scratch - 10+ hours of premium content - No bullshit, No time waste - This project list Should get you ready for any JavaScript live coding interview round. - Extremely cheap (less than $10) Content list: 1. File Explorer (similar to vs-code) 2. Infinitely Nested comments 3. Advanced Custom Toast notification from scratch 4. Drag & Drop, Swap, Add and delete elements using JavaScript 5. Custom Calendar/Date-picker 6. Multi-Select dropdown with support to add & remove elements 7. Build a Memory game with all rules integrated 8. Build an analog clock with smooth animation 9. Dynamic Progress bar with custom input support 10. Build a Star rating system with dynamic hover effects 11. Build a tic tac toe game with best practices 12. Advanced To-Do List with Local Storage support 13. Accordion with smooth transition effects 14. Countdown timer & days remaining timer 15. Create a custom modal 16. Build an optimised Chessboard
Amazing video, very helpfull. I want to step up as junior react developer and increase the performance of an app is what I needed. Now I'll study one topic by one. Thank you very much.
@@josephmathew333 My file is only 16kb and has plenty of comments so could be smaller, doesn't take a lot of code. is reusable and also auto fetches data for any list component. create a scroll tracker function, with onScroll, that calls an external function, from that external function use a while loop with the run condition of "start" === "start", that runs at 100 millisecond intervals. This will be an infinite loop but won't freeze the browser. with the while loop constantly running you'll need to use the DOM to read and update data for the loop to know the start and end range of the data array slicer. Pass react setState... into the while loop function so the logic in your while loop can update the state data for the array slicer that resides in the rendering component. You'll need to have a top and bottom element that does not scroll with the list as you'll need to track the bottom and top of the list relative to those fixed elements and have the logic for scroll up and down, If bottom or top of list is x amount of pixels from the top or bottom of the viewport, then increment value for start and end range of the array slicer. That's the very basic. Generally, think of how you'd track motion, and distance. Object distance is relative to a fixed object position. If/when you create an array within the wile loop that determines if you're scrolling up or down or not scrolling at all, you can write an if condition that will then stop the loop from running, until you scroll again.
Nice information, but moving mouse around quickly. it distracts and disturb the user to understand the concept, when some useful info is trying to say.
16 Intermediate/Advanced JavaScript Projects to Dominate Your Next Technical Interview
Get it now- xplodivity.graphy.com/courses/16-js-projects-65883553e4b08ebe75f39885
- Lifetime access
- Full video explanations of building each project from scratch
- 10+ hours of premium content
- No bullshit, No time waste
- This project list Should get you ready for any JavaScript live coding interview round.
- Extremely cheap (less than $10)
Content list:
1. File Explorer (similar to vs-code)
2. Infinitely Nested comments
3. Advanced Custom Toast notification from scratch
4. Drag & Drop, Swap, Add and delete elements using JavaScript
5. Custom Calendar/Date-picker
6. Multi-Select dropdown with support to add & remove elements
7. Build a Memory game with all rules integrated
8. Build an analog clock with smooth animation
9. Dynamic Progress bar with custom input support
10. Build a Star rating system with dynamic hover effects
11. Build a tic tac toe game with best practices
12. Advanced To-Do List with Local Storage support
13. Accordion with smooth transition effects
14. Countdown timer & days remaining timer
15. Create a custom modal
16. Build an optimised Chessboard
1. List Virtualization or Windowing
2. Lazy loading
3. images memoization
4. Throttling and Debouncing Events
5. Code-splitting
6. react fragments
7. web workers
8. useTransition hook
wonderful, would love to see more videos that are on an intermediate level.
Amazing video, very helpfull. I want to step up as junior react developer and increase the performance of an app is what I needed. Now I'll study one topic by one. Thank you very much.
man, so so useful in just ten minutes you made a better programmer
Thank you, That really means a lot!
Need detailed video for use transition and memo
Your explanations were very helpful, thanks
Thank you brother, you are giving a quality content in this video..God bless you 🙂
very helpful video to learn optimizaation at once.
Thanks for the video! Please explain the useTransition hook
Thanks for sharing the information!
This is well explained 👍
great one this need more views
Best explanation ever👍👍
Very useful. Thanks very much
Awesome video 👍
very nice video , do you also have react projects ?
Amazing video
❤️ keep it up.
Thank you!!
Thanks for sharing 💪
Absolutely 👍
its veryfull thank you sir
Subscribed
Nice❤❤
Great listing
❤❤❤
You don't need a library to adaptively render lists. You can just make it yourself.
how
@@josephmathew333 My file is only 16kb and has plenty of comments so could be smaller, doesn't take a lot of code. is reusable and also auto fetches data for any list component.
create a scroll tracker function, with onScroll, that calls an external function, from that external function use a while loop with the run condition of "start" === "start", that runs at 100 millisecond intervals. This will be an infinite loop but won't freeze the browser. with the while loop constantly running you'll need to use the DOM to read and update data for the loop to know the start and end range of the data array slicer. Pass react setState... into the while loop function so the logic in your while loop can update the state data for the array slicer that resides in the rendering component. You'll need to have a top and bottom element that does not scroll with the list as you'll need to track the bottom and top of the list relative to those fixed elements and have the logic for scroll up and down, If bottom or top of list is x amount of pixels from the top or bottom of the viewport, then increment value for start and end range of the array slicer.
That's the very basic. Generally, think of how you'd track motion, and distance. Object distance is relative to a fixed object position. If/when you create an array within the wile loop that determines if you're scrolling up or down or not scrolling at all, you can write an if condition that will then stop the loop from running, until you scroll again.
Using intersection observer api @@josephmathew333
Don't reinvent the wheel for no reason
@sayochikun3288 I had plenty of good reason and it works very well.
Nice information, but moving mouse around quickly. it distracts and disturb the user to understand the concept, when some useful info is trying to say.