The year 2018 is coming to end. The new year 2019 is beginning. The time has arrived to write 2018 year end post, a tradition that I started couple of years ago to reflect on my year. Here are links to my 2016 and 2017 year-end posts. Just like in previous years, in this 2018 looking back post, I attempt to make critical self-assessments on what worked, what didn’t work, and set goals for the next year 2019. As a reminder, my major learning goals for year 2018 was to learn JavaScript deeply!
Learn JavaScript and ReactJs deeply! … document all my learning notes and maintain a personal JavaScript & ReactJS learning journal. Looking back Year 2017
Goals Accomplishments
I had four main learning goals for the year 2018 – Gutenberg Watch, Development workflows, Gutenberg Blocks, Learning JavaScript (JS) deeply.
1. Gutenberg Watch
Year 2018 was the year of the WordPress Gutenberg editor. From the day it was announced, Gutenberg became a very controversial, lead mostly by some vocal developers & business agencies. Despite the criticisms WordPress 5.0 with Gutenberg was released in December 2018. Because the Gutenberg editor was constantly evolving, it is not fully documented (especially the user handbook).
A dedicated Gutenberg powered Try Gutenberg test site was setup. The main objective of this test site is to post all the content with Gutenberg editor only and document learning-experience & tips.
2. Development & Workflows
- Visual Basic Code – A new Code editor. I switched from Note++ and Atom editors to a more popular code editor – Visual Basic Code. I am still learning and customizing it but so far I am loving it.
- Theme development & Workflows: Morten Rand-Hendriksen released Building Progressive Themes with WP Rig in Lynda library. It is a starter theme with build process, bundled into a single boilerplate theme development package. I watched the videos but have postponed to fully practice until Gutenberg phase 2 is complete.
- Learning to Create Static Sites with Jekyll – I spent some time familiarizing myself with Jekyll, one of the most popular among the static-site generators in 2017. Prepared two posts: Learning to Create Static Sites with Jekyll & my take on Jekyll-based sites.
3. Learning JavaScript (JS)
Learning JavaScript Deeply was the major goals for 2018. As planned, I devoted most of 2018 learning JS and ReactJs and maintained a daily learning journal.
- Learning Schedule: As I wrote in my first quarter progress overview post, I am a spare-time learner because my work schedule, allows me to spare only couple of hours (average 2-3 hours) a day.
- Learning Road Map: At the beginning of the year, I set up my learning road map and setup two private learning sites Learn Code & JSBlog, where I collate learning resources and document all my learning as learning-note posts.
4. Writing Blog Posts
In 2018, I made more than 130 blog entries in my six personal sites. Though a few of the posts entries are just links to articles or interesting quotes more than 60 are substantive learning-note posts. I will continue this pace and aspire to do even better in year 2019.
Quarter by Quarter Progress Overview
To build upon the previous year progress, I fine-tuned my learning goals and progress overview posts on quarterly basis. This way I was able to monitor my learning progress more closely and make necessary adjustments.
- First Quarter – My Three Months of JavaScript Learning
- Second Quarter – JavaScript Learning | April-June, 2018
- Third Quarter – JavaScript Learning | July-September, 2018
- Fourth Quarter – ReactJs Learning | Oct – Dec 2018
First three quarters of 2018, I spent learning JS fundamentals and the last quarter exploring ReactJs. The following is a quarter by quarter summary overview of my learning progress.
1. First Quarter
- Learning Road Map: At the beginning of the year, spent some time determining my JavaScript learning path and settled on the road map suggested by Zell Liew.
- JS learning resources: In a non-structured (self-learning) environment identifying suitable learning resources is the most daunting task. Because there is no single learning resource and google search does not help in identifying the most suitable ones. I started with W3Scools JavaScript tutorial but discovered that – The Modern JavaScript Tutorial was more appropriate.
- Learn from a few tutorials: Decided to concentrate on a few tutorials to learn basics JS language first – The MDN JS Guide, The Modern JavaScript tutorial, and JS tutorials in DigitalOcean.
2. Second Quarter
- Deep & documented learning: I focused on learning JS topics deeply and documented my progress as learning-note posts. This process was immensely helpful to clarify my thoughts, understand concepts & identify my skill gaps. I wrote more than 20 learning-note posts.
- Learning JS basics: Topics covered this quarter include: JS Objects, JS Variables, JS Arrays & Array Methods, JS Functions, Scopes & Hoisting, JS Classes, JS Maps & Sets, and JS Weakmaps and Weaksets.
- React/JS tutorials preview: Reviewed Learning React Js by Eve Porcello ( Lynda library to get a general idea of which JS syntax are more commonly used in React JS.
3. Third Quarter
- Deep diving into JS fundamentals: Continued learning – JS loops & iterations (conditional statements, while and do .. while loops, for loops), JS functions (arrow functions, arguments vs parameters, immediately invoked function expressions), JS property descriptors, computed property names and other topics.
- Learning-in-progress: Started learning JS closures, execution context and concepts like function stack, scope chain etc., but felt bogged-down & moved to other topics. I plan to continue and demystify JS closure & execution context early next year.
4. Fourth Quarter
- Use of
this
keyword in JS: Use of ‘this
‘ keyword is very confusing to most JS newbies. I took a deep-dive into understanding this Keyword in JavaScript. Thethis
key word is widely used in ReactJs. I also took a brief detour to explore howthis
keyword is used in the ReactJs. - ReactJs exploration: Started exploring basic JS fundamentals required for ReactJs learning. Continued with my ReactJs learning with Installation of Create React App, a simple HTML page with script tags, working with JSX and rendering elements, react components and props, how props are passed to react components and creating list component. Wrote 9 react-learning-note posts.
- Gutenberg & WordPress 5.0: Familiarizing myself with the Gutenberg editor, customizing & creating posts with guten-blocks. Attempted applying columns in my Pandhak theme with two & three columns. Upgrading sites to WordPress 5.0.
Incomplete Goals
I totally missed my JS fundamentals learning goals set for the third/fourth quarters. The JS topics that I started but never got to completed, and am still learning-in-progress include: generators (getter / setter), Nested Functions & Closure, Execution Context & Function Stack, Async Function, Promises, Default Parameter, Destructuring, Rest parameter, and Spread.
What I Learned
- On Learning Resources: I relied heavily on the MDN JS Guide, MDN JS Reference and React Documentation as my primary learning resource and not on the teaser-tutorials on Medium and HackerNoon. This was very helpful.
- Deep Dive Learning: Though time consuming, but it was very helpful and I learned the most. On occasion, 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“ is very helpful.
- Learning from Problem Solving Point of View: 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!
- Learning Every Day: Maintaining a daily learning routine. Very much inspired by John Resig‘s post Write Code Everyday, I started learning JS/ReactJs everyday, except when I was sick and unable work. I found this process incredibly productive.
Some thoughts
- Learning in Public: For the past few years, I have been learning to code in public. I post my learning goals, my thoughts on learning some topics, learning progress and learning-note posts, etc on my personal sites. These sites (this & JS Blog), which I refer to as my three-ring binders, are search engine disabled and don’t show up in my google searches. Documenting everything in public view without public being able to search & find it provides me false sense of holding myself publicly accountable. It is superb and I have been loving it!
- Everyday Learning Habit: At the beginning of the year, I had set a goal of learning code/JS everyday irrespective of my other plans in my schedule. Although there was some pressure of meeting my own deadline, overall I was not competing with anybody else but just wanted it to develop into a daily working habit. Once a habit is developed, it is hard to break.
- Feeling of a Change: Keeping daily working schedule completely changed my working/ learning habit. Everyday I start my day a working couple hours in the morning without even thinking. This working habit I plan to continue as much as, for as long as I can.
Most Inspiring Posts
- 9 Year Old Shares his Journey Learning React | WP-Tavern. HoLy Moly! This nine-year-old Revel Carlberg West’s talk at the React NYC meetup on Learning React is indeed inspiring.
- How I Became a Better Programmer | James Long. Very inspiring post and heeding to James’s call, my Learning React Blog project will be my long-term learning by doing project. In addition, I would plan incorporate some of his other advices as well.
- Write Code Everyday by John Resig. Incredibly inspiring post. started learning JS/ReactJs everyday, except when I was sick and unable work. I found this process incredibly productive.
- Tyler Elliot Bettilyon’s inspirational article A Lifetime of Learning to Code in Medium was uplifting.
- Sara Drasner‘s CSS-Trick post Balancing Time is very inspiring. Like Sarah, I also start a few learning topics at a time and switch from topic to topic.
Developers & Blog sites
While learning every topic, I consulted many tutorials, blog sites and posts. It was always a time-consuming process figuring out the resources that were suitable for beginners. A collated lists of Web Developers, Blogs & Tutorial Sites from my quarterly progress overview is listed in Web Developers, Blogs & Tutorial Sites | 2018 post. The following few deserve special mention here:
- Robin Wieruch| Website | GitHub| Twitter
Software Engineer, writer, teacher. Author, The Road to lean React. - Kirupa Chinnathambi | Website | GitHub | Twitter
Software Engineer at Microsoft, writer, teacher. Author: Learning React. - Morten Rand-Hendriksen [ LinkedIn | GitHub | Twitter | CodePen ]
Senior Staff Instructor, LinkedIn Learning and Lynda library. - Tania Rascia [ GitHub | Twitter | CodePen ]
Web Designer/Developer. Tania’s How to Code in JavaScript tutorials are concise and well written. - Rachel Andrew [ GitHub | Twitter | CodePen ]
Web developer, speaker and author. She is the authority in CSS Grid Layout and has popularized its use in web layout through her blog posts, books & conference workshops.
Year 2019 Goals
I totally missed some learning goals that I had set for the third/fourth quarter. I have tweaked my reactJS and JS learning roadmap for 2019 which is outlined in this post.
JS Fundamentals
- Learning JS Fundamentals: The JS learning goals that I failed to complete this year will be continued in the next year. I plan to approach the JS ES6 feature and other topics as advocated by Robin Wieruch: learning JS is fundamental to ReactJs.
- Strengthen JS fundamentals by reverse engineering: Continue working on ReactJs project, when encountered with ES6 features then go back and deep dive into its fundamentals.
ReactJs
- ReactJs Learning Roadmap for 2019: Leaning ReactJs roadmap with most useful learning resources are outlined. This list is work-in-progress will be updated/tweak as and when needed.
WordPress 5.x and Gutenberg
- Learn Gutenberg Blocks Fundamentals and create Gutenberg blocks using
create-gluten-block
package by Ahmad Awais. - Follow Gutenberg phase 2 development and learn how to upgrade themes, widget and navigation with blocks.
Wrapping UP
Overall, 2018 was a very productive year for me. I learned a lot from various tutorials, posts, developers and their work inspired me to do what I love to do. Learning is a process and not a goal.
I will wrap up with the following quote from Dan Abramov’s post on what he knows? The Elements of UI Engineering from his personal blog site Overreacted.
I learned the most when I struggled to solve a particular … problem. …. It [was] this combination of understanding the problems, experimenting with the solutions, and applying different strategies that led to the most rewarding learning experiences in my life. Dan Abramov | Overreacted
As I wrote in my fourth quarter progress overview’s wrap up section, my goal is to continue learning by building things. Because building things in ReactJs involves prior knowledge of advance ES6 features, when I am stuck from building things in React things, I will go back and learn that topic deeply before I return and continue building my React things again.
I am looking forward to having a very Happy & Productive Coding Year 2019!
Note: This post is cross-posted in JS Blog site.