This is why queues are important to learn - solving a beginner javascript html css challenge

Solving a web dev challenge problem using html, css, and javascript

00:00 intro and solving problem
12:11 Done - just Refactoring More
14:50 dynamic grid size and other refactoring

code is here:

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

[Santon-Motho]

- Applies a common data structure for the solution: ✓
- DOM manipluation and CSS layouts practice: ✓
- Event handling: ✓
- Makes use of a Web API method (setInterval): ✓
- Shows JavaScript debugging techniques (logging to console & using debugger + sources tab in dev tools): ✓
- Shows a decent use-case for nested loops: ✓
- Starts by getting a working solution then gradually refactors for a more general solution: ✓

I think any beginner who is willing to dig deep into this video/challenge can extract quite a lot of value from it. I also like that Cody puts out little disclaimers when he feels that the way he is implementing a part of the solution might not be the best way to go about it and I think taking note of such comments is important. Great video.

[mykalimba]

5:12 Stack and queues are distinctly different data structures that do two distinctly different things, so it really DOES matter which one you choose here. Given that the problem you're trying to solve is to capture the order of some events, then play them back in the same order, there is an obvious "better" choice.

[NedumEze]

Oh! Boy! Best teaching style I've seen in a long time ⌛️. Thanks Buddy. That was really cool.

[WebDevCody]

I said stack a bit too much in the video… this problem is, was, and should be solved using a queue, hence the video title. Extra credit: Try using a stack instead and see how it changes the playback, aka use pop instead of shift

[Snowboardbound]

I really enjoyed this. I love the raw and real demonstration, really helps me conceptualize what’s happening when it’s not super polished like some videos

[tips-and-tricks-for-m-files]

I learned about the 'debugger' keyword in this episode.

[tadakuniyasuda]

I really enjoyed coding and learning javascript with you. Happy coding and thank you again

[Eldrac]

Great video, this is the sort of question I like asking when giving front end interviews, a lot more practical than leetcode style brainteasers

[AlexanderHristov]

best channel, hope I will be able to write code as clean as yours one day !

[hellothere]

This is great content! The tutorial is well explained.

It would be awesome to see similar videos in the future where you implement data structures with JavaScript, and have a visual explanations such as this queue example!

Thanks and cheers!

[mp]

Great video, love this kind of small project code walkthroughs

[sulivan]

Oh that's great content! I would only prefer using css grid over flexbox to remove the needing of wrappers and manipulate the grid-columns property

[AbiVK]

That's awesome bro, keep it coming!!

[locmai]

I really love your contents and your shorts.

[hassanmehmood]

I hope you will keep these cool stuff coming
Really love your channel ❤️
You are helping me alot learn Js and React

[genephillip]

simple yet kinda exciting to see how it intrigues me

[sonoftroy]

This just let me know how much I don’t know about programming… I wouldn’t even know where to start and you created that in 10 mins

[medelyesbenkhoud]

Great content and wonderful explanation while coding 👌 keep going mate

[mrArk_]

Great video 😊 i really like it. Hope you do more videos like this. Somehow this gives me idea on how to solve/do things even if im only watching.

[MuhammadAdnan.]

Do more, great stuff 👍 js challenges