{"id":2400,"date":"2018-10-01T12:23:35","date_gmt":"2018-10-01T12:23:35","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2400"},"modified":"2018-10-01T12:23:35","modified_gmt":"2018-10-01T12:23:35","slug":"javascript-learning-july-september-2018","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/javascript-learning-july-september-2018\/","title":{"rendered":"JavaScript Learning | July-September, 2018"},"content":{"rendered":"<p class=\"note icon-note\"><strong>Note<\/strong>: This post is part of my JavaScript learning progress series.\u00a0 Link to my learning progress for the first and second quarter are available here: <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener\">First Quarter (2018)<\/a>, <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-april-june-2018\/\" target=\"_blank\" rel=\"noopener\">Second Quarter (2018)<\/a>.<\/p>\n<p>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 <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener\">First quarter (Jan-March)<\/a> and <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-april-june-2018\/\" target=\"_blank\" rel=\"noopener\">Second quarter (April-June)<\/a>. This post is overview of my learning\/coding progress for the third quarter (July-September) of 2018.<\/p>\n<h5>Third Quarter Goals<\/h5>\n<p>I had set the following learning goals for the third quarter (July-September) of 2018:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions#Arrow_functions#Arrow_functions\" target=\"_blank\" rel=\"noopener\">Arrow functions<\/a> : are represented with fat arrow <code>=&gt;<\/code> and make functions code shorter. They are frequently encountered everywhere in ES6.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Loops_and_iteration\" target=\"_blank\" rel=\"noopener\">Loops and iteration<\/a> : Loops offer a quick and easy way to do something repeatedly through different <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Iteration_protocols\" target=\"_blank\" rel=\"noopener\">iteration<\/a> statements.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Iterators_and_Generators\" target=\"_blank\" rel=\"noopener\">Iterators and generators<\/a> : Iterators and Generators bring the concept of iteration directly into the core language and provide a mechanism for customizing the behavior of <a title=\"The for...of statement creates a loop iterating over iterable objects (including the built-in String, Array, e.g. the Array-like arguments or\u00a0NodeList objects, TypedArray, Map and Set, and user-defined iterables), invoking a custom iteration hook with statements to be executed for the value of each distinct property of the object.\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/for...of\"><code>for...of<\/code><\/a> loops.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Working_with_Objects#Defining_getters_and_setters\" target=\"_blank\" rel=\"noopener\">Object \u2013 getters and setters methods<\/a> : A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/get\">getter<\/a> is a method that gets the value of a specific property. A <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/set\">setter<\/a> is a method that sets the value of a specific property.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Grammar_and_types#Data_structures_and_types\" target=\"_blank\" rel=\"noopener\">Data types &amp; Structures<\/a> (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Grammar_and_types#Literals\" target=\"_blank\" rel=\"noopener\">literals<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Numbers_and_dates\" target=\"_blank\" rel=\"noopener\">numbers &amp; dates<\/a>, and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Text_formatting\" target=\"_blank\" rel=\"noopener\">text formatting<\/a>).<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h4>JS Topics Covered<\/h4>\n<p>This quarter my focus was deep learning JS arrow functions, iterations &amp; loops, getter \/ setter methods and progress is outlined below:<\/p>\n<ul>\n<li><em>Loops Iterations, and Iterators &amp; generators<\/em>: To understanding this topic more thoroughly, I broke down this learning note posts: (i) <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-javascript-conditional-statements\/\" target=\"_blank\" rel=\"noopener\">Understanding JS conditional statements<\/a>, (ii) <a href=\"https:\/\/tinjurewp.com\/jsblog\/learning-javascript-while-and-do-while-loops\/\" target=\"_blank\" rel=\"noopener\">JS While and Do..While loops<\/a>, and (iii) <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-javascript-for-loops\/\" target=\"_blank\" rel=\"noopener\">JS For loops<\/a>.<\/li>\n<li><em>Property Descriptors<\/em>: In this post I deep dive into <a href=\"https:\/\/tinjurewp.com\/jsblog\/deep-dive-into-javascript-property-descriptors\/\" target=\"_blank\" rel=\"noopener\">object property descriptors<\/a> and how their modification affects property enumeration with <code>for..in<\/code> loop.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions#Arrow_functions#Arrow_functions\" target=\"_blank\" rel=\"noopener\"><em>Arrow functions<\/em><\/a> : It took some time for me to understand write my learning-note post on <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-javascript-arrow-functions\/\" target=\"_blank\" rel=\"noopener\">Arrow functions<\/a> &#8211; its, syntax, some use cases and including <a href=\"https:\/\/tinjurewp.com\/jsblog\/some-pitfalls-of-arrow-funtions\/\" target=\"_blank\" rel=\"noopener\">arrow function pitfalls<\/a>.<\/li>\n<li><em>Computed Property Names<\/em>: This ES6 feature allows c<a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-computed-property-names\/\" target=\"_blank\" rel=\"noopener\">omputed property names<\/a> to define object property names.<\/li>\n<li><em>Parameters vs Arguments<\/em>: As a beginner, I often confused with function parameters and arguments. In this post, I tried to <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-functions-parameters-vs-arguments\/\" target=\"_blank\" rel=\"noopener\">untangle difference between parameters &amp; arguments<\/a>.<\/li>\n<li><em>Immediately Invoked Function Expression (IIFE)<\/em>: The syntax of IIFE is can be confusing but once understood, they are very useful. In <a href=\"https:\/\/tinjurewp.com\/jsblog\/deep-dive-into-immediately-invoked-function-expressions-iifes\/\" target=\"_blank\" rel=\"noopener\">this post<\/a> its syntax, some use cases are discussed.<\/li>\n<li><em>Getter \/ Setter Methods<\/em>: This ES6 features is little confusing without understanding <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-computed-property-names\/\" target=\"_blank\" rel=\"noopener\">computed property names<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener\">destructing assignment<\/a> and other features. In this <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Working_with_Objects#Defining_getters_and_setters\" target=\"_blank\" rel=\"noopener\">getter &amp; setter function<\/a> basics and some use case examples are discussed.<\/li>\n<li><em>Function Scope<\/em>: This topic slightly overlaps what was covered in another post &#8211; <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-js-variables-scopes-hoisting\/\" target=\"_blank\" rel=\"noopener\">Scopes &amp; Hoisting<\/a>.\u00a0 In this learning post, I attempted to overview function scope with main focus on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions#Nested_functions_and_closures\" target=\"_blank\" rel=\"noopener\">Nested function<\/a> &amp; <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Closures#Lexical_scoping\" target=\"_blank\" rel=\"noopener\">lexical scope<\/a>. More detailed discussion will be presented in <em>Nested functions and closures<\/em>, and <em>Execution context and Function stack<\/em>.<\/li>\n<\/ul>\n<p><strong>Learning in Progress<\/strong><\/p>\n<p>It seems like that I have been bugged down in figuring out in clearest term about &#8211; JS <em>closures<\/em>, <em>execution context<\/em> and concepts like <em>function stack<\/em>, <em>scope chain<\/em> etc. I have been reading blog posts, tutorials and getting even more confused. I plan to demystify JS closure &amp; execution context in separate posts.<\/p>\n<h5>Non-JS Topics Covered<\/h5>\n<p>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:<\/p>\n<ul>\n<li><a href=\"https:\/\/tinjure.com\/my-notes\/\" target=\"_blank\" rel=\"noopener\"><strong>My Notes<\/strong><\/a>. 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\u2019s <a href=\"https:\/\/simplenote.com\/\" target=\"_blank\" rel=\"noopener\">Simplenote<\/a> site. The site is powered by <em>Pandhak Them<\/em><em>e<\/em><strong>,<\/strong> adopted from my <a href=\"http:\/\/tinjurewp.com\/themes\/khesara\/\" target=\"_blank\" rel=\"noopener\">Khesara<\/a> theme with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">CSS Grid layou<\/a>t with some modification.<\/li>\n<li><a href=\"https:\/\/tinjure.com\/demo\/\" target=\"_blank\" rel=\"noopener\"><strong>Try Gutenberg<\/strong><\/a>. 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 &amp; tips. Inspired by the official <a href=\"https:\/\/make.wordpress.org\/core\/2018\/08\/02\/try-gutenberg-callout-in-wordpress-4-9-8\/\">Try Gutenberg call out<\/a>, it seems that the Gutenberg editor is ready for test and dedicated Gutenberg test sites: <a href=\"http:\/\/tinjure.com\/my-notes\/\" target=\"_blank\" rel=\"noreferrer noopener\">My Notes<\/a> and <a href=\"https:\/\/tinjure.com\/demo\/\" target=\"_blank\" rel=\"noopener\">Try Gutenberg<\/a>.<\/li>\n<li><strong>Magazine style featured page header design<\/strong>: My goal here was to design a magazine-style featured page template, inspired by the <a href=\"https:\/\/www.nytimes.com\/2018\/09\/14\/magazine\/maya-rudolph-snl-amazon-forever.html?rref=collection%2Fsectioncollection%2Fmagazine\" target=\"_blank\" rel=\"noopener\">New York Time featured page<\/a>, or <a href=\"https:\/\/www.washingtonpost.com\/sf\/national\/2016\/07\/23\/numb\/?hpid=hp_hp-top-table-main_numb-930pm%3Ahomepage%2Fstory&amp;utm_term=.1faead1e125e\" target=\"_blank\" rel=\"noopener\">The Washington Post featured pages<\/a>.<\/li>\n<li><strong>Index (front) page for Pandhak theme<\/strong>: This was inspired by the <a href=\"https:\/\/chesterhow.github.io\/tale\/\" target=\"_blank\" rel=\"noopener\">Jekyll Tale theme<\/a> index page. This <a href=\"https:\/\/tinjure.com\/my-notes\/\" target=\"_blank\" rel=\"noopener\">index page<\/a> template retains most styles from my other themes with <em>animated hover link styles<\/em>.<\/li>\n<li><strong><a href=\"https:\/\/tinjure.com\/demo\/category\/demo-post\/\" target=\"_blank\" rel=\"noopener\">Gutenberg editor practice<\/a><\/strong>: Because the new <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg editor<\/a> is fundamentally different than the current <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener\"><em>Classic<\/em><\/a> (<a href=\"https:\/\/www.tiny.cloud\/\" target=\"_blank\" rel=\"noopener\">TinyMCE<\/a>) text editor, there are many new features that requires learning &amp; practicing. This is an attempt to start documented practice learning.<\/li>\n<\/ul>\n<h6>Some Thoughts<\/h6>\n<ul>\n<li><strong>Deep Dive Learning<\/strong>: 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 <a href=\"http:\/\/javascriptissexy.com\/author\/richardb\/\" target=\"_blank\" rel=\"noopener\">Richard Bovell<\/a> : &#8220;<em>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<\/em>&#8220;.<\/li>\n<li><strong>Morten&#8217;s advise on learning JavaScript:<\/strong> On his <a href=\"https:\/\/mor10.com\/mor10isanold\/\" target=\"_blank\" rel=\"noopener\">40th birthday questions answers series<\/a>, while answering to one of his questioners, <a href=\"http:\/\/mor10.com\/\" target=\"_blank\" rel=\"noopener\">Morten<\/a> suggested that to learn JS through simple concepts first (eg. DOM) and then slowly build up knowledge from solving problem point of view &#8211; then learning everything!<\/li>\n<li><strong>On my Learning<\/strong> : I must make some tweaking and not bug-down into a pigeon hole. Plan to learn thorough but productive.<\/li>\n<\/ul>\n<h5>Goals for the Next 3-months<\/h5>\n<p>My goal for the next 3-months (and beyond) will be to continue deep learning JS with an emphasis on ES6 features &amp; DOM (document object model) including the following topics:<\/p>\n<ul>\n<li>Completing learning-in-progress topics: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/get\" target=\"_blank\" rel=\"noopener\">Getter<\/a> \/ <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/set\" target=\"_blank\" rel=\"noopener\">setter<\/a> methods, and demystifying JS <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Closures\" target=\"_blank\" rel=\"noopener\">closures<\/a> including<em> Nested Functions, <\/em><em>Execution Context &amp; Function Stack<\/em>.<\/li>\n<li>\u00a0Understanding deeply use of <code>&lt;a href=&quot;https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;this&lt;\/a&gt;<\/code> in JavaScript.<\/li>\n<li>ES6 features (definition from <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\" target=\"_blank\" rel=\"noopener\">MDN Reference<\/a>) including <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/AsyncFunction\" target=\"_blank\" rel=\"noopener\">AsyncFunction<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" target=\"_blank\" rel=\"noopener\">Promises<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Default_parameters\" target=\"_blank\" rel=\"noopener\">Default Parameter<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\">Destructuring<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/rest_parameters\" target=\"_blank\" rel=\"noopener\">Rest parameter<\/a>,\u00a0 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener\">Spread<\/a> and <a href=\"https:\/\/gist.github.com\/vasco3\/22b09ef0ca5e0f8c5996#modules\" target=\"_blank\" rel=\"noopener\">ES6 \u2013 Cheatsheet<\/a> | GitHub.<\/li>\n<li>DOM (document object model) simultaneously with other topics, as breather topics.<\/li>\n<li>Plan to do the following Learning ES6 features from Lynda library:\n<ul>\n<li>L<a href=\"http:\/\/Learning ECMAScript 6\" target=\"_blank\" rel=\"noopener\">earning ECMAScript 6<\/a> \u2013 by Eve Porcello<\/li>\n<li><a href=\"https:\/\/www.lynda.com\/JavaScript-tutorials\/ES6-Right-Parts\/604265-2.html\" target=\"_blank\" rel=\"noopener\">ES6 : The Right Parts<\/a> \u2013 by Kyle Sympson<\/li>\n<li><a href=\"https:\/\/www.lynda.com\/React-js-tutorials\/React-ES6-ES2016-Flow\/592512-2.html\" target=\"_blank\" rel=\"noopener\">React: ES6, 2016, and Beyond<\/a> \u2013 by Carl Peaslee<\/li>\n<\/ul>\n<\/li>\n<li>Start familiarizing with React JS terminology and introduction starting with <a href=\"https:\/\/www.taniarascia.com\/getting-started-with-react\/\" target=\"_blank\" rel=\"noopener\">Getting Started with React<\/a> by <a href=\"https:\/\/www.taniarascia.com\/\" target=\"_blank\" rel=\"noopener\">Tania Rascia<\/a>.<\/li>\n<\/ul>\n<h5>Inspiring Posts<\/h5>\n<ul>\n<li><a href=\"http:\/\/preethikasireddy.me\/2016\/11\/28\/learning-how-to-learn-the-most-important-developer-skill\/\" target=\"_blank\" rel=\"noopener\">Learning How to Learn: The Most Important Developer Skill<\/a> by <em>Preethi Kasireddy<\/em>. 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 &#8211; How I am learning to Code.<\/li>\n<li><a href=\"https:\/\/medium.com\/@sarah_edo\/mourning-as-a-developer-8adf9969f531\" target=\"_blank\" rel=\"noreferrer noopener\">Mourning as a Developer<\/a> &#8211; by <em>Sarah Drasner<\/em> | Medium. I can relate one of her experiences: coding as a distraction. While I am learning WordPress &amp; 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!<\/li>\n<\/ul>\n<h5>Developers and Blog Sites<\/h5>\n<p>I found the following tutorials &amp; blog sites useful for writing \/ organizing my learning-posts.<\/p>\n<p><strong>JavaScript<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/lucybain.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lucy Bain<\/a> | <a href=\"http:\/\/lucybain.com\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">Website<\/a> | <a href=\"https:\/\/github.com\/lbain\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a><br \/>\nUseful blog posts on ReactJS and JavaScript.<\/li>\n<li>Sarah Drasner | <a href=\"https:\/\/twitter.com\/sarah_edo\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter<\/a> | <a href=\"https:\/\/t.co\/pr1NhYseRK\" target=\"_blank\" rel=\"noreferrer noopener\">Website<\/a> | <a href=\"https:\/\/github.com\/sdras\/\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><br \/>\nAward-winning speaker. Sr. Developer <strong>Microsoft<\/strong>. <strong>vue.js<\/strong> Core Team, Writer at\u00a0 <strong>CSS-Tricks<\/strong>,<\/li>\n<li>Nicolas C. Zakas | <a href=\"https:\/\/twitter.com\/slicknet\/\" target=\"_blank\" rel=\"noopener\">Twitter<\/a> | <a href=\"https:\/\/humanwhocodes.com\" target=\"_blank\" rel=\"noopener\">Website<\/a> | <a href=\"https:\/\/github.com\/nzakas\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><br \/>\nWriter, speaker and very good source on JS learning. One of the best JavaScript authors.<\/li>\n<li>Kirupa | <a href=\"https:\/\/www.kirupa.com\/learn\/index.htm\" target=\"_blank\" rel=\"noopener\">Website<\/a> | <a href=\"https:\/\/www.kirupa.com\/images\/twitter_svg.svg\" target=\"_blank\" rel=\"noopener\">Twitter<\/a> | <a href=\"https:\/\/github.com\/kirupa\" target=\"_blank\" rel=\"noopener\">Github<\/a><br \/>\nA writer and developer at Microsoft. Good learning materials on his website.<\/li>\n<\/ul>\n<p><strong>WordPress &amp; Gutenberg<\/strong><\/p>\n<ul>\n<li>Joen Asmussen | <a href=\"http:\/\/moc.co\/\" target=\"_blank\" rel=\"noopener\">Website<\/a> | <a href=\"http:\/\/twitter.com\/noscope\" target=\"_blank\" rel=\"noopener\">Twitter<\/a> | <a href=\"https:\/\/github.com\/jasmussen\" target=\"_blank\" rel=\"noopener\">GitHub<\/a> | <a href=\"https:\/\/codepen.io\/joen\/#\" target=\"_blank\" rel=\"noopener\">CodePen<\/a><br \/>\nAutomattic Engineer &amp; Gutenberg editor core development team member.<\/li>\n<\/ul>\n<p><strong>Interesting Articles<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/infrequently.org\/2018\/09\/the-developer-experience-bait-and-switch\/\" target=\"_blank\" rel=\"noopener\">The \u201cDeveloper Experience\u201d Bait-and-Switch<\/a> &#8211; by <em>Alex Russell<\/em> | <a href=\"https:\/\/infrequently.org\/\" target=\"_blank\" rel=\"noopener\">Infrequently Noted<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/a-minimal-javascript-setup\/\" target=\"_blank\" rel=\"noopener\">A Minimal JavaScript\u00a0Setup<\/a> &#8211; by <em>Georgy Marchuk<\/em> | <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">CSS &#8211; Tricks<\/a><\/li>\n<\/ul>\n<h5>Wrapping Up<\/h5>\n<p>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 <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener\">previous<\/a> learning progress post: &#8220;<em>I am fully aware that learning any programming language without previous programming background is not easy. <a href=\"https:\/\/kleopetrov.me\/\" target=\"_blank\" rel=\"noopener\">Kleo Petrov<\/a> has succinctly <a href=\"https:\/\/hashnode.com\/post\/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7\" target=\"_blank\" rel=\"noopener\">written<\/a> that it is even scarier to professional developers<\/em>.&#8221; The following suggestion from <a href=\"http:\/\/javascriptissexy.com\/author\/richardb\/\" target=\"_blank\" rel=\"noopener\">Richard Bovell<\/a> is timely.<\/p>\n<blockquote><p>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. <cite><a href=\"http:\/\/javascriptissexy.com\/author\/richardb\/\" target=\"_blank\" rel=\"noopener\">Richard Bovell<\/a><br \/>\n<a href=\"http:\/\/javascriptissexy.com\/teaching-yourself-to-code-to-become-an-employable-programmer-what-to-learn-where-to-learn-and-more\/\" target=\"_blank\" rel=\"noopener\">Teaching Yourself to Code<\/a><\/cite><\/p><\/blockquote>\n<p>As also stated in my <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener\">previous progress overview<\/a>, the next three-months to end of the year is crucial, I plan to continue to stay focused. <em>Happy Coding!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part of my JavaScript learning progress series.\u00a0 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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-2400","post","type-post","status-publish","format-standard","hentry","category-javascript-progress"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=2400"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2400\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=2400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=2400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=2400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}