Note: This post is part of my JavaScript learning progress series. Link to my learning progress for the first and second quarter are available here: First Quarter (2018), Second Quarter (2018).
At the beginning of year 2018, I had set a goal of learning JavaScript (JS) deeply to improve my JS skills. Here are links to my JS learning progress for the First quarter (Jan-March) and Second quarter (April-June). This post is overview of my learning/coding progress for the third quarter (July-September) of 2018.
Third Quarter Goals
I had set the following learning goals for the third quarter (July-September) of 2018:
- Arrow functions : are represented with fat arrow
=>and make functions code shorter. They are frequently encountered everywhere in ES6. - Loops and iteration : Loops offer a quick and easy way to do something repeatedly through different iteration statements.
- Iterators and generators : Iterators and Generators bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of
for...ofloops. - Object – getters and setters methods : A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property.
- Data types & Structures (literals, numbers & dates, and text formatting).
JS Topics Covered
This quarter my focus was deep learning JS arrow functions, iterations & loops, getter / setter methods and progress is outlined below:
- Loops Iterations, and Iterators & generators: To understanding this topic more thoroughly, I broke down this learning note posts: (i) Understanding JS conditional statements, (ii) JS While and Do..While loops, and (iii) JS For loops.
- Property Descriptors: In this post I deep dive into object property descriptors and how their modification affects property enumeration with
for..inloop. - Arrow functions : It took some time for me to understand write my learning-note post on Arrow functions – its, syntax, some use cases and including arrow function pitfalls.
- Computed Property Names: This ES6 feature allows computed property names to define object property names.
- Parameters vs Arguments: As a beginner, I often confused with function parameters and arguments. In this post, I tried to untangle difference between parameters & arguments.
- Immediately Invoked Function Expression (IIFE): The syntax of IIFE is can be confusing but once understood, they are very useful. In this post its syntax, some use cases are discussed.
- Getter / Setter Methods: This ES6 features is little confusing without understanding computed property names, destructing assignment and other features. In this getter & setter function basics and some use case examples are discussed.
- Function Scope: This topic slightly overlaps what was covered in another post – Scopes & Hoisting. In this learning post, I attempted to overview function scope with main focus on Nested function & lexical scope. More detailed discussion will be presented in Nested functions and closures, and Execution context and Function stack.
Learning in Progress
It seems like that I have been bugged down in figuring out in clearest term about – JS closures, execution context and concepts like function stack, scope chain etc. I have been reading blog posts, tutorials and getting even more confused. I plan to demystify JS closure & execution context in separate posts.
Non-JS Topics Covered
Most of my interest in coding is non JS, though I am focused currently on learning JS deeply. During my learning down time, I skipped to the following:
- My Notes. This site is my personal dedicated note taking site, designed primarily to document my ideas, thoughts, blog drafts, idea board etc. This site was inspired by Automattic’s Simplenote site. The site is powered by Pandhak Theme, adopted from my Khesara theme with CSS Grid layout with some modification.
- Try Gutenberg. This is Gutenberg powered test site. Main objective of this site is to post all the content with Gutenberg editor only and document learning-experience & tips. Inspired by the official Try Gutenberg call out, it seems that the Gutenberg editor is ready for test and dedicated Gutenberg test sites: My Notes and Try Gutenberg.
- Magazine style featured page header design: My goal here was to design a magazine-style featured page template, inspired by the New York Time featured page, or The Washington Post featured pages.
- Index (front) page for Pandhak theme: This was inspired by the Jekyll Tale theme index page. This index page template retains most styles from my other themes with animated hover link styles.
- Gutenberg editor practice: Because the new Gutenberg editor is fundamentally different than the current Classic (TinyMCE) text editor, there are many new features that requires learning & practicing. This is an attempt to start documented practice learning.
Some Thoughts
- Deep Dive Learning: Last quarter I decided to learned more deeply. This process was good overall but less productive perhaps. On some occasions, I felt like I was too bug-down on a single topic looking for perfect answers. Which was not bad but I also felt that I wasted unwanted time on a single topic. Learning advice from Richard Bovell : “learn mostly how the concept applies in the real world. Once you understand the concept adequately, use it in the context of building a real project“.
- Morten’s advise on learning JavaScript: On his 40th birthday questions answers series, while answering to one of his questioners, Morten suggested that to learn JS through simple concepts first (eg. DOM) and then slowly build up knowledge from solving problem point of view – then learning everything!
- On my Learning : I must make some tweaking and not bug-down into a pigeon hole. Plan to learn thorough but productive.
Goals for the Next 3-months
My goal for the next 3-months (and beyond) will be to continue deep learning JS with an emphasis on ES6 features & DOM (document object model) including the following topics:
- Completing learning-in-progress topics: Getter / setter methods, and demystifying JS closures including Nested Functions, Execution Context & Function Stack.
- Understanding deeply use of
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" target="_blank" rel="noopener">this</a>in JavaScript. - ES6 features (definition from MDN Reference) including AsyncFunction, Promises, Default Parameter, Destructuring, Rest parameter, Spread and ES6 – Cheatsheet | GitHub.
- DOM (document object model) simultaneously with other topics, as breather topics.
- Plan to do the following Learning ES6 features from Lynda library:
- Learning ECMAScript 6 – by Eve Porcello
- ES6 : The Right Parts – by Kyle Sympson
- React: ES6, 2016, and Beyond – by Carl Peaslee
- Start familiarizing with React JS terminology and introduction starting with Getting Started with React by Tania Rascia.
Inspiring Posts
- Learning How to Learn: The Most Important Developer Skill by Preethi Kasireddy. This post really resonated me at my core especially (i) Learning is a process and not a goal, and (ii) Turning learning into an engaging process. As a result I am writing a separate posts about – How I am learning to Code.
- Mourning as a Developer – by Sarah Drasner | Medium. I can relate one of her experiences: coding as a distraction. While I am learning WordPress & JavaScript it helps to get distracted from other things that are going on. It has been very helpful as well as productive get away for me!
Developers and Blog Sites
I found the following tutorials & blog sites useful for writing / organizing my learning-posts.
JavaScript
- Lucy Bain | Website | GitHub
Useful blog posts on ReactJS and JavaScript. - Sarah Drasner | Twitter | Website | GitHub
Award-winning speaker. Sr. Developer Microsoft. vue.js Core Team, Writer at CSS-Tricks, - Nicolas C. Zakas | Twitter | Website | GitHub
Writer, speaker and very good source on JS learning. One of the best JavaScript authors. - Kirupa | Website | Twitter | Github
A writer and developer at Microsoft. Good learning materials on his website.
WordPress & Gutenberg
- Joen Asmussen | Website | Twitter | GitHub | CodePen
Automattic Engineer & Gutenberg editor core development team member.
Interesting Articles
- The “Developer Experience” Bait-and-Switch – by Alex Russell | Infrequently Noted
- A Minimal JavaScript Setup – by Georgy Marchuk | CSS – Tricks
Wrapping Up
My learning experience in the 3rd quarter was different than than my previous quarters. Because the topics covered in this quarter were more advance and often I felt like intense and bug-down on a single topic. As also stated in my previous learning progress post: “I am fully aware that learning any programming language without previous programming background is not easy. Kleo Petrov has succinctly written that it is even scarier to professional developers.” The following suggestion from Richard Bovell is timely.
What you really need to know is mostly how the concept applies in the real world. Once you understand the concept adequately, use it in the context of building a real project and its meaning will emerge and hit you about the head, and you will get it right away. Or, at least you will better understand its relevance in a real-world application. Richard Bovell
Teaching Yourself to Code
As also stated in my previous progress overview, the next three-months to end of the year is crucial, I plan to continue to stay focused. Happy Coding!