JavaScript30
Course created by Wes Bos. Join the challenge (for free!) here - JavaScript30
Hi everyone!
This repository is created to keep track of my progress in the awesome JavaScript 30 Day Challenge and commiting & logging what I have learned on daily basis.
If you have any JavaScript/JavaScript30 course related queries, please create a new issue here. I will try to respond as soon as possible. I am always happy to help and learn new stuff.
Thanks!
Roadmap
Day 1: 18 Jun 2018
Learned about key event, transitionend event & ES6 template strings.
Tool Found: Nice tool for finding JavaScript event keycodes at keycode.info
Day 2: 19 Jun 2018
Learned about Css transition & transform, ES6 const keyword and live UI update after few seconds.
Day 3: 20 Jun 2018
Learned about CSS variables & updating them using JavaScript
Day 4: 21 Jun 2018
Learned more about JavaScript array methods like filter, map, sort, reduce & others.
Day 5: 22 Jun 2018
Learned few tips about flexbox. Planning to learn more about flexbox at flexbox.io soon.
Day 6: 23 Jun 2018
Learned about Fetch API, getting .json() from fetch response, ES6 spread operator.
Day 7: 24 Jun 2018
Learned about new array methods like some, every, find, findIndex.
Day 8: 25 Jun 2018
Had so much fun learning today. Canvas and draw.
Day 9: 26 Jun 2018
Learned few useful Dev tools tricks. Debugging JavaScript code is so much fun, easy and colorful now.
Day 10: 27 Jun 2018
Learned a user-friendly feature used by popular email clients.
Tool Found: It's so easy now to convert our ES5 code into readable ES6 using lebab.io
Day 11: 28 Jun 2018
Learned some nice tips on creating custom interface for HTML5 video player. Really liking the ES6 arrow functions from day 4 onwards.
Tool Found: ESLint v3.13.1
Day 12: 29 Jun 2018
Learned about key sequence detection & Konami code. Also, found that BuzzFeed site's hidden easter egg is still working. To see it in action just press ':arrow_up: :arrow_up: :arrow_down: :arrow_down: :arrow_left: :arrow_right: :arrow_left: :arrow_right: B A'.
Day 13: 30 Jun 2018
Learned a bit more about window events & a very useful javascript debounce function. Today's project helped me to fix an issue related to resize events which was slowing down our site. The goal behind debounce implementation is to reduce overhead by preventing a function from being called several times in succession.
Day 14: 1 Jul 2018
Learned more about array & object reference vs actual copy. Found that primitive types are manipulated by value & reference types are manipulated by reference. Numbers and booleans are primitive types in JavaScript -- primitive because they consist of nothing more than a small, fixed number of bytes that are easily manipulated at the low (primitive) levels of the JavaScript interpreter. Objects, on the other hand, are reference types. Arrays and functions, which are specialized types of objects, are therefore also reference types. These data types can contain arbitrary numbers of properties or elements, so they cannot be manipulated as easily as fixed-size primitive values can. Since object and array values can become quite large, it doesn't make sense to manipulate these types by value, as this could involve the inefficient copying and comparing of large amounts of memory.
Day 15: 2 Jul 2018
Learned some useful stuff on local Storage & event delegation.
Completed all of the project goals for today:-
Tested all new buttons. Data is also persisting on page reload:-
Day 16: 3 Jul 2018
Today learned about assigning to new variable names using ES6 Object destructuring and how we can update CSS rules like textShadow or anything using javascript. Just like canvas this was a fun challenge today. I tried some css effects like this:-
Day 17: 4 Jul 2018
Updated code to show modified band names on which sort actually happens and on right side the actual band names. After code modifications it looks like this:-
Day 18: 5 Jul 2018
Learned more about Array.prototype.reduce() and its usability test case scenario. reduce() is quite simple & effective in specific scenarios like in the example below:-
Tools/Sites Found:
- New, interactive Chrome Dev Tools tutorial: How to analyze page load performance ⚡️🚀🔎
Day 19: 6 Jul 2018
It was too much fun today. Learned a lot about canvas and pipelining real-time images.
Day 20: 7 Jul 2018
Learned about native SpeechRecognition interface of the Web Speech API and how we can make use of it. Something like we do in google voice search. I think we can use it in various ways. Only limit is our imagination. Also liked the use npm browser-sync for time-saving synchronised browser testing.
Day 21: 8 Jul 2018
Worked on Device Orientation using Chrome sensors devtools. Also learned about Geolocation & Orientation Api. Unlike desktops, mobile devices commonly use GPS hardware to detect location.
Day 22: 9 Jul 2018
Learned about Element.getBoundingClientRect() method and worked on some css effects.
Day 23: 10 Jul 2018
"The Voiceinator 5000" challenge was great. Also, learned about SpeechSynthesis interface.
Day 24: 11 Jul 2018
Sticky Nav was really an interesting challenge. Learned about the requirement of padding top in nav element and other UI effects using css.
Day 25: 12 Jul 2018
Learned about Event.stopPropagation() & EventTarget.addEventListener() boolean options like capture, once & passive. More details about it here:
- https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Day 26: 13 Jul 2018
It was super-fun learning abt this really slick "follow along" nav found on Stripe's pricing page.
Day 27: 14 Jul 2018
Understood the basics behind the "Click and Drag to Scroll" challenge. element.offsetLeft play a great role in this logic.
Day 28: 15 Jul 2018
Finished the fantastic video speed controller UI challenge today. These offset properties are pretty important for proper aligments. For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent. The offsetParent element is the nearest ancestor that has a position other than static.
Day 29: 16 Jul 2018
Finished the beautiful countdown break clock challenge today. Learned about timestamps, set & clear intervals and Date.now(). The Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC. Because now() is a static method of Date, we can always use it as Date.now() instead of new Date().now().
Day 30: 17 Jul 2018
Finally finished #JavaScript30 Day 30 Whack A Mole 🔨 challenge. It was fun learning experience. Highly recommend the entire course.
Note
If you like this repo and find it useful, please consider ★ starring it (on top right of the page). Thanks!