Repo for my solutions to Wes Bos' 30 Day Vanilla JS Challenge https://JavaScript30.com
Drum Machine My solution is not as succinct, but keeps the separation of concerns clearer and lets the function names reflect the functionality.
CSS + JS Clock This was fun! Challenging to represent the final degrees subsisting of the component time units in a readible way.
CSS Variables
Continuing to learn programmatic JS controlled style, which despite IMO being more prone than css to becoming unmanageable, is undeniably handy. Fan of the <HTMLElement>.dataset proprty mechanism! 👏
Array Cardio 1
Fun times concreting recent attempts to take initial steps towards writing "functionally", reduce is still quite foregin and really seems to require the spread operator to be even remotely useful and not become as verbose as a for loop. Realised I have a lot to learn about XRH and CORS when attempting to fetch data from wikipedia.
Flex Panel Gallery
This is my jam! The JS was very basic class togglers (with the newly learnt transitionend event). But it's high impact thanks to Flexbox, thoughtful and queued transitions, and my new favourite API... source.unsplash.com. This isn't very useful but it's beautiful.
AJAX Type Ahead Pretty neat demo project. This answered some of my questions about the fetch API that I attempted to add to (Day 4 - Array Cardio 1)[https://tristanmarsh.github.io/JavaScript-30-challenge/4-array-cardio-1/; need to interpret the blob objects stream according to it's file type. I attempted to structure the functionality with a clearer seperation of concerns and to optimise for readability/maintenance/extensibility. I wrote functions instead of using copy pasted regex, and added localStorage caching of the cities data API.
Array Cardio 2
Super quick demo to express helpful predicates with array methods some, and every. Also was not aware of the handy lambda based findIndex method.
HTML5 Canvas Cool demo to learn a little about the canvas object. 👨🎨 I can't imagine myself investing the time required to get into the docs and become proficient anytime too soon as the pragmatic applications seem limited. Would certainly learn a library if future projects required such functionality.
Dev Tool Domination
Learnt of the assert, dir, dirxml, group, count, clear console methods and their variations. Not likely to start using much of them anytime too soon as I'm in the habit of stipping out console output before comitting or deploying to production.
Hold Shift Check Boxes Watched the first 2 minutes of the video to get the idea and went and implemented. Not perfect but will finish video later tonight. Realised you can of course use querySelector on any DOM node, not just the document.
Custom Video Player Similar event handling and internal state management to the Day 8 - HTML5 Canvas demo. Interesting learning the method and properties of a video object. 👍
Key Sequence Detection So pretty
Slide In On Scroll Nothing new here for me. I'm familiar with implementing this with ScrollMagic and know how error prone this kind of effect can be. Definitely use a library.
JavaScript Reference vs Copy
Learnt about the less recommended technique of cloning an array with the Array.slice() method. First time ever using the Array.from() (presumably iterable) method. Learnt that the object spread method I've being using in JSX is now standardised in JavaScript.
Reminders List Local Storage GOOD TIMES! 🌮 Nothing new, got to use the .dataset attribute, added a strikethrough and as always, an unsplash randomised landscape background. Entire form clearable too.
Mouse Move Shadow Good opportunity to learn about the quirks of tracking mouse location over the client vs relative to the triggered element. Added some transform 3D effects which were fun, but there's nothing pretty about the math involved.
Sorting Band Names Without Articles Once again I opted for a non regex, slightly longer solution using map, reduce and sort. Fairly straight forward solution and nothing new in regards to this 30 day challenge, but still a good exercise of bringing a few concepts together.
Adding Up Times With Reduce Reduce is nice. Time is okay. This was acceptable.
Unreal Webcam Fun That was intense. Must be highly inefficient way to process massive amounts of data - as in raw pixels. I suppose is why GPU's need to run in parallel. Super handy learning how to request access to the webcam, being able to generate photos in the browser and have a user download them.
Speech Detection VERY COOL! 👏 Could be fun for some experiments, or browser games, but speech recognition is always flaky, so I can't see this in any serious projects anytime soon. Also privacy concerns are a thing.
Geolocation Nice, handy to know it's so simple to request location data and have updates triggered on the device. Added a lat/long and Google maps link for testing.
Follow Along Link Highlighter
Neat little demo of how to create a morphing menu or object, shows how simple it can be at it's most basic implementation. Learnt about the getBoundingClientRect function.
Speech Synthesis Handy to know, the only way I've seen this used is for April Fools pranks, but of course the application for accessibility is a potential. Still not sure about the benefits or overall user experience in adding speech to a website or app...
Sticky Nav Common effect, so often broken - especially on mobile devices with dynamic window heights. Vanilla implementation is much nicer than something like ScrollMagic for basic use cases that don't require serious animation tweening.
Event Capture Propagation, Bubbling and Once
Nice to learn of the config object with capture and once props underneath the jQuery equivalents. .stopPropagation() is handy to know too, I suppose - although I would feel pretty hacky actually having to use it.
Stripe Follow Along Nav
Nice effect and revisiting of the transitionend event to queue up class and transitions toggles. Would want to make it much more robust and prevent content from overflowing the container. But this was specifically designed to work with uncontrolled html perhaps being generated by a CMS.
Countdown Timer
Good point about the unreliability of the setInterval or setTimeout methods, storing timestamps and doing comparisons when allowed to is a nice solution. Also the document.{form name value}.{input name value} is a nice shortcut to using querySelectors.