Vanilla JavaScript challenge by @wesbos
So @wesbos created this little vanilla javascript challenge so that you write vanilla js every day... whatevs I picked it up cuz it sounds kinda cool so here will be my progress.
started & completed: 9/12/2016 last updated: 9/12/2016
DEMO ONLINE 01 JavaScript Drum Kit
Very cool challenge. I started out myself, but consulted few steps with the video.
- a little bit of html Media Element API (audio.currentTime)
- kbd tag ;o
- some es6 stuff (backticks - string templates, const/let, arrow functions)
- my buttons are significally uglier
- I ADDED COWBELL!!!!!!!!!!
started & completed: 10/12/2016 last updated: 10/12/2016
DEMO ONLINE 02 JS + CSS Clock
That was pretty straightforward.
- developer tools have cubic-bezier timing function editor - I didn't knew that, VERY cool!
- fixed weird seconds hand transition when starting new cycle
started & completed: 11/12/2016 last updated: 11/12/2016
DEMO ONLINE 03 JS + Playing with CSS Variables and JS
I already noticed that clearly wesbos does not give a fuck about M$ browsers and he pursues fairly modern web development practices. I stopped to wonder for a while if that's good or a bad thing but eventually I decided to stick with it as it is something I haven't experienced in my day job where I was to care about even poor IE11... so yeah let's learn all this shiny new stuff. This particular excercise got me checking caniuse all the time.
- CSS variables have fairly good support in modern browsers; unfortunately not in Edge (14)
- CSS variables are updateable from JS
- CSS filters also have already pretty great support. Same goes for color input. Range input is supported even in IE11, I didn't know that.
- NodeList has the forEach method for awhile now, very cool (in modern browsers... I checked Edge and unfortunately there is no support)
- this.dataset ;o
- CSS variables are scoped like normal css properties
- even though the code doesn't differ, the color input in my browser (ff) was not firing mousemove event, so color change in my case was not smooth. I see Safari handles it differently, but I won't investigate it further for now.
started & completed: 24/12/2016 last updated: 24/12/2016
So it's basically a lesson about iterators like map, reduce, filter etc. Cool to see them in action.
- I finally got reduce
- none
started & completed: 13/01/2017 last updated: 13/01/2017
DEMO ONLINE 05 Flex Panels Image Gallery
I got my shit together after finishing classes and returned to this tutorials. Now I've finally picked up flexbox thanks to this lesson and I am doing pretty well so far. Excited with this cool technique. This time i've watched thorought the whole video without coding, then sat back and coded my solution.
- fundamental flexbox concepts
- some minor differences