Skip to content

Commit bc2c14a

Browse files
committed
Update README.md
1 parent bddf8f6 commit bc2c14a

File tree

1 file changed

+45
-9
lines changed

1 file changed

+45
-9
lines changed

README.md

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# JavaScript30
2+
23
> Course created by [Wes Bos](https://github.com/wesbos). Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account)
34
45
<h1 align="center">
@@ -21,64 +22,81 @@ Thanks!
2122
## LOGS
2223

2324
### Day 1: 11 Dec 2016
25+
2426
**Thoughts:** Learned about key event, `transitionend` event & ES6 template strings.
27+
2528
**Tool Found:** Nice tool for finding JavaScript event keycodes at [keycode.info](http://keycode.info/)
29+
2630
**Demo:** You can play/stop a auto drum routine by pressing spacebar [here](https://palashmon.github.io/JavaScript30/Challenges/Day%2001%20-%20JavaScript%20Drum%20Kit/) & [here](https://palashmon.github.io/JavaScript30/Challenges/Day%2001%20-%20JavaScript%20Drum%20Kit/index2.html)
2731

2832
### Day 2: 13 Dec 2016
33+
2934
**Thoughts:** Learned about Css transition & transform, ES6 const keyword and live UI update after few seconds.
3035

3136
### Day 3: 16 Dec 2016
37+
3238
**Thoughts:** Learned about CSS variables & updating them using JavaScript
3339

3440
### Day 4: 22 Dec 2016
41+
3542
**Thoughts:** Learned more about JavaScript array methods like filter, map, sort, reduce & others. Really liked ES6 Arrow functions. Shorter functions are most welcome.
3643

3744
![ES6 Arrow function](https://pbs.twimg.com/media/C0V10qtUcAAct4D.jpg)
3845

3946
### Day 5: 25 Dec 2016
47+
4048
**Thoughts:** Learned few tips about flexbox. Planning to learn more about flexbox at [flexbox.io](http://flexbox.io/) soon.
4149

4250
### Day 6: 27 Dec 2016
51+
4352
**Thoughts:** Learned about Fetch API, getting `.json()` from fetch response, ES6 spread operator.
4453

4554
### Day 7: 30 Dec 2016
55+
4656
**Thoughts:** Learned about new array methods like some, every, find, findIndex.
4757
![Day 7 of 30](https://pbs.twimg.com/media/C07gdtqUAAAtlyM.jpg)
4858

4959
### Day 8: 3 Jan 2017
60+
5061
**Thoughts:** Had so much fun learning today. Did lots of coding & painting today.
5162
![Canvas](https://pbs.twimg.com/media/C1QFNMYUsAA9cxC.jpg)
5263

5364
### Day 9: 5 Jan 2017
65+
5466
**Thoughts:** Learned few useful Dev tools tricks. Debugging JavaScript code is so much fun, easy and colorful now.
5567
![Canvas](https://pbs.twimg.com/media/C1fRlZCWQAAtuMx.jpg)
5668

5769
Found one more useful trick called `console.trace()`. It helps to print a stack trace from the point where the method was called as you can see in this given example below.
5870
![console.trace()](/Challenges/Images/console_trace.png)
5971

6072
### Day 10: 8 Jan 2017
73+
6174
**Thoughts:** Learned a user-friendly feature used by popular email clients.
6275

6376
**Tool Found:** It's so easy now to convert our ES5 code into readable ES6 using [lebab.io](https://lebab.io/try-it)
6477

6578
### Day 11: 9 Jan 2017
79+
6680
**Thoughts:** Learned some nice tips on creating custom interface for HTML5 video player. Really liking the ES6 arrow functions from day 4 onwards.
6781

6882
![ES6 arrow functions](https://pbs.twimg.com/media/C1vYSZ7XUAEqZXS.jpg)
6983

7084
**Tool Found:** [ESLint v3.13.1](http://eslint.org/blog/2017/01/eslint-v3.13.1-released) has been released today.
7185

7286
### Day 12: 10 Jan 2017
87+
7388
**Thoughts:** Learned about key sequence detection & Konami code. Also, found that [BuzzFeed site](https://www.buzzfeed.com/)'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'.
7489

7590
### Day 13: 11 Jan 2017
91+
7692
**Thoughts:** 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.
7793

7894
### Day 14: 12 Jan 2017
95+
7996
**Thoughts:** 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.
8097

8198
### Day 15: 13 Jan 2017
99+
82100
**Thoughts:** Learned some useful stuff on local Storage & event delegation.
83101

84102
Completed all of the project goals for today:-
@@ -88,67 +106,85 @@ Tested all new buttons. Data is also persisting on page reload:-
88106
![Day 15 new taks](https://pbs.twimg.com/media/C2EYda5XUAAdUdh.jpg)
89107

90108
### Day 16: 14 Jan 2017
109+
91110
**Thoughts:** 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:-
92111

93112
![Day 16 new taks](https://pbs.twimg.com/media/C2IFDhkWQAAv-Ck.jpg)
94113

95114
### Day 17: 15 Jan 2017
96-
**Thoughts:** 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:-
115+
116+
**Thoughts:** 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:-
97117

98118
![Day 17 new taks](https://pbs.twimg.com/media/C2N0IDsWIAA9hLT.jpg)
99119

100120
### Day 18: 18 Jan 2017
121+
101122
**Thoughts:** 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:-
102123

103124
![Day 18 new taks](https://pbs.twimg.com/media/C2eCp-xWgAAbhJz.jpg)
104125

105126
**Tools/Sites Found:**
106-
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
107-
- [2016 JavaScript Rising Stars](https://risingstars2016.js.org/)
127+
128+
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
129+
- [2016 JavaScript Rising Stars](https://risingstars2016.js.org/)
108130

109131
### Day 19: 21 Jan 2017
132+
110133
**Thoughts:** It was too much fun today. Learned a lot about canvas and pipelining real-time images.
111134

112135
### Day 20: 22 Jan 2017
136+
113137
**Thoughts:** Learned about native [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/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](https://browsersync.io/) for time-saving synchronised browser testing.
114138

115139
### Day 21: 24 Jan 2017
140+
116141
**Thoughts:** 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. [Tweet Link Here 🐦](https://twitter.com/palashv2/status/823919145557299200)
117142

118143
### Day 22: 29 Jan 2017
119-
**Thoughts:** Learned about `Element.getBoundingClientRect()` method and worked on some css effects [Tweet Link Here 🐦](https://twitter.com/palashv2/status/825757066669076480)
144+
145+
**Thoughts:** Learned about `Element.getBoundingClientRect()` method and worked on some css effects [Tweet Link Here 🐦](https://twitter.com/palashv2/status/825757066669076480)
120146

121147
### Day 23: 5 Feb 2017
122-
**Thoughts:** "The Voiceinator 5000" challenge was great. Also, learned about SpeechSynthesis interface.
148+
149+
**Thoughts:** "The Voiceinator 5000" challenge was great. Also, learned about SpeechSynthesis interface.
123150

124151
### Day 24: 11 Feb 2017
152+
125153
**Thoughts:** Sticky Nav was really an interesting challenge. Learned about the requirement of padding top in nav element and other UI effects using css.
126154

127155
### Day 25: 11 Feb 2017
156+
128157
**Thoughts:** Learned about `Event.stopPropagation()` & `EventTarget.addEventListener()` boolean options like capture, once & passive. More details about it here:
129-
- https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
130-
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
158+
159+
- https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
160+
- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
131161

132162
### Day 26: 13 Feb 2017
163+
133164
**Thoughts:** It was super-fun learning abt this really slick "follow along" nav found on Stripe's pricing page. [Tweet Link Here 🐦](https://twitter.com/palashv2/status/831161506301612036)
134165

135166
### Day 27: 14 Feb 2017
167+
136168
**Thoughts:** Understood the basics behind the "Click and Drag to Scroll" challenge. element.offsetLeft play a great role in this logic.
137169

138170
**Tip:** Simple & time-saving tip
139171

140172
![console image](https://pbs.twimg.com/media/C4oivhGVcAApV3E.jpg)
141173

142174
### Day 28: 15 Feb 2017
175+
143176
**Thoughts:** 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.
144177

145178
### Day 29: 16 Feb 2017
146-
**Thoughts:** Finished the beeeeeeeeutiful 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()`.
179+
180+
**Thoughts:** 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()`.
147181

148182
### Day 30: 20 Feb 2017
183+
149184
**Thoughts:** Finally finished #JavaScript30 Day 30 Whack A Mole 🔨 challenge. It was fun learning experience. Highly recommend the entire course.
150-
**Demo:** You can play the game [here](https://palashmon.github.io/JavaScript30/Challenges/Day%2030%20-%20Whack%20A%20Mole/) and keep the audio on for some fun.
151185

186+
**Demo:** You can play the game [here](https://palashmon.github.io/JavaScript30/Challenges/Day%2030%20-%20Whack%20A%20Mole/) and keep the audio on for some fun.
152187

153188
## Note
189+
154190
If you like this repo and find it useful, please consider ★ starring it (on top right of the page). Thanks!

0 commit comments

Comments
 (0)