{"id":3624,"date":"2019-03-12T17:26:13","date_gmt":"2019-03-12T17:26:13","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=3624"},"modified":"2019-03-12T17:26:13","modified_gmt":"2019-03-12T17:26:13","slug":"javascript-learning-january-march-2019","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/javascript-learning-january-march-2019\/","title":{"rendered":"JavaScript Learning | January-March 2019"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post is part of my JavaScript\/react learning progress series. Links to my year-2018 learning progress are available here: <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">First Quarter (2018)<\/a>, <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-april-june-2018\/\" target=\"_blank\" rel=\"noopener noreferrer\">Second Quarter (2018)<\/a>, <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-july-september-2018\/\" target=\"_blank\" rel=\"noopener noreferrer\">3rd Quarter (2018)<\/a> &amp; <a href=\"https:\/\/tinjurewp.com\/jsblog\/reactjs-learning-oct-dec-2018\/\" target=\"_blank\" rel=\"noopener noreferrer\">4th Quarter<\/a>.<\/p>\n<p>While preparing my 2018 year-end learning progress post, I had set my broad learning <a href=\"https:\/\/tinjurewp.com\/jsblog\/looking-back-year-2018\/\" target=\"_blank\" rel=\"noopener noreferrer\">goals for the year 2019<\/a>. In additional to outlining some specific learning goals in the post, I had also prepared <a href=\"https:\/\/tinjurewp.com\/jsblog\/reactjs-javascript-learning-roadmap-for-2019\/\" target=\"_blank\" rel=\"noopener noreferrer\">ReactJs &amp; JavaScript Learning Roadmap for 2019<\/a>. This post is overview of my learning\/coding progress for first quarter (January-March) of 2019.<\/p>\n<h5>First Quarter Goals<\/h5>\n<p>My goal for the first 3-months (and beyond) of 2019 is to continue deep learning JavaScript with a goal to master basic JS language with an emphasis on ES6 features including the following topics:<\/p>\n<ul>\n<li><strong>Learn by building things<\/strong>: One of my goals was to learn by doing projects and complete the React router &amp; ES6 syntax posts.<\/li>\n<li><strong>Strengthen JS fundamentals<\/strong>: Learn &amp; write at least one\/two topics in ES6 (Spread &amp; Rest), Promise, Asynchrony<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h4>Goals Accomplished<\/h4>\n<p>This quarter turned out to be shorter-learning than I had planned for. However, I was able to manage to complete the followings:<\/p>\n<h6>JS Topics Covered<\/h6>\n<ul>\n<li><strong>Common ECAMScript 6 (ES6) syntax and feature 3-part series<\/strong>: Completed three posts with (i) <a href=\"https:\/\/tinjurewp.com\/jsblog\/an-overview-of-ecmascript-6-es6-syntax-features\/\" target=\"_blank\" rel=\"noopener noreferrer\">basic syntax<\/a>, (ii) <a href=\"https:\/\/tinjurewp.com\/jsblog\/ecmascript-6-features-es6-functions-objects-classes\/\" target=\"_blank\" rel=\"noopener noreferrer\">functions, object &amp; classes<\/a>, and (ii) <a href=\"https:\/\/tinjurewp.com\/jsblog\/ecmascript-6-features-es6-asynchronous-function\/\" target=\"_blank\" rel=\"noopener noreferrer\">asynchronous features<\/a>.<\/li>\n<li><strong>JS accessors &#8211; Getters &amp; setters<\/strong>. In this <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-javascript-accessors-getters-setters\/\" target=\"_blank\" rel=\"noopener noreferrer\">learning post<\/a>, defining <em>accessor<\/em> properties, <code>getters<\/code>, <code>setters<\/code>, and creating object properties with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Object_initializer\" target=\"_blank\" rel=\"noopener noreferrer\">object initilizers<\/a> and <code>&lt;a href=&quot;https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/defineProperty&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Object.DefineProperty&lt;\/a&gt;<\/code> methods are discussed.<\/li>\n<\/ul>\n<h6>JSON Deep Diving<strong><br \/>\n<\/strong><\/h6>\n<ul>\n<li><strong>Asynchronous features &amp; JSON<\/strong>. Because understanding &amp; use of JS asynchronous features involves understanding of external API and JSON, I jumped first to understand JSON and external API deeply to to obtain JSON data from external servers, and their use in web pages including ReactJs.<\/li>\n<li><strong>Common use cases of JSON data<\/strong>. Learned few examples of JSON data common uses which are <a href=\"https:\/\/tinjurewp.com\/jsblog\/working-with-json-data-and-common-use-case-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">documented in this post<\/a>.<\/li>\n<li><strong>Connecting to an External API with JavaScript<\/strong> (<em>in preparation<\/em>).<\/li>\n<\/ul>\n<h6>Learning Topics in Progress<\/h6>\n<ul>\n<li>Connecting to external API in JavaScript<\/li>\n<li>ES6 Async\/Wait Features<\/li>\n<li>Use of external API data sources through Axios, fetch in React App<\/li>\n<\/ul>\n<h6>Revisiting WordPress Hardening<\/h6>\n<p>In March I was informed that my WordPress sites were compromised. I spend almost entire months to learn more about WordPress hardening and re-organize my WordPress sites. In general, most of my sites followed <a href=\"https:\/\/codex.wordpress.org\/Hardening_WordPress\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress hardening<\/a> rules but it appears that additional site security features should be added through <a href=\"https:\/\/perishablepress.com\/wordpress-htaccess-file\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>.htaccess<\/code> file<\/a>. Additional information how my sites were recovered is documented in Securing Compromised WordPress Sites post (login permission required).<\/p>\n<h6>Development Environment Updates<\/h6>\n<ul>\n<li><strong>React updates<\/strong>: Updated ReactJs to React v16.8 with Hooks and documented it for futures updates.<\/li>\n<li><strong>Yarn Installation<\/strong>: Install <a href=\"https:\/\/yarnpkg.com\/en\/docs\/getting-started\" target=\"_blank\" rel=\"noopener noreferrer\">Yarn<\/a> on my machines to and start learning \/ practicing on my projects.<\/li>\n<\/ul>\n<h5>Developers &amp; Bloggers Sites<\/h5>\n<ul>\n<li><a href=\"https:\/\/andy-bell.design\/writing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Andy Bell Design<\/a> | Andy Bell. A good site with tons of learning resources and tutorials.<\/li>\n<li><a href=\"http:\/\/piccalil.li\/\" target=\"_blank\" rel=\"noopener noreferrer\">Picallilli<\/a> by A <em>Andy Bell<\/em> Project. A pickle jar full of curated CSS links to slick websites, animations, illustrations, and algorithms, brought to you by Andy Bell.<\/li>\n<\/ul>\n<h6><strong>Inspiring Posts<\/strong><\/h6>\n<ul>\n<li><a href=\"https:\/\/www.codebeast.dev\/dare-to-dream\/\" target=\"_blank\" rel=\"noopener noreferrer\">Daring to Dream: My Career Journey<\/a> &#8211; by <em>Christian Nwamba<\/em> | <a href=\"https:\/\/www.codebeast.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Codebeast.dev<\/a>. This is a inspiring story of hard work, perseverance and never giving up.<\/li>\n<li><a href=\"https:\/\/emilyfreeman.io\/blog\/growth-in-fear\" target=\"_blank\" rel=\"noopener noreferrer\">Growth in fear<\/a> &#8211; by <em>Emily Freeman<\/em> | <a href=\"https:\/\/emilyfreeman.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">emilyfreeman.io<\/a>. This inspiring story of Emily provides me much needed boost for learning in my down times.<\/li>\n<\/ul>\n<h4>Goals for the Second Quarter<\/h4>\n<ul>\n<li><strong>Completing learning-notes posts <\/strong><em>(drafts)<\/em>: I have several learning-notes posts drafts in progress; a few of them started more than six-months before. I plan to complete as many of the drafts post as possible without affecting m main learning objective.<\/li>\n<li><strong>Understanding DOM and DOM manipulation<\/strong>: This topic had been left behind but plan to catch up this topic.<\/li>\n<li><strong>Deep diving to <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener noreferrer\">React hooks<\/a>:<\/strong> React hooks were introduced with version 16.8 release. The understanding of hooks and functional components is essential to get a good grasp of React library.<\/li>\n<li><strong>Exploring <a href=\"https:\/\/www.gatsbyjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby<\/a><\/strong>: Learning to create a basic <a href=\"https:\/\/scotch.io\/tutorials\/zero-to-deploy-a-practical-guide-to-static-sites-with-gatsbyjs\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby blog in local server<\/a> and <a href=\"https:\/\/www.iamtimsmith.com\/blog\/using-wordpress-with-react\/\" target=\"_blank\" rel=\"noopener noreferrer\">using WordPress with ReactJs<\/a>.<\/li>\n<li>Book Reading: <a href=\"https:\/\/www.amazon.com\/Wisdom-Work-Making-Modern-Elder\/dp\/0525572902\/ref=sr_1_1?keywords=wisdom+at+work&amp;link_code=qs&amp;qid=1557251726&amp;s=gateway&amp;sourceid=Mozilla-search&amp;sr=8-1\" target=\"_blank\" rel=\"noopener noreferrer\">Wisdom at work &#8211; Making of Modern Elders<\/a> by <em>Chip Conley<\/em>.<\/li>\n<\/ul>\n<h5>Wrapping Up<\/h5>\n<p>This 2019 first quarter fall short of my plans &amp; expectation. I wrote in my 2018 fourth-quarter progress: &#8220;<em>I learned a lot from various tutorials, posts, developers and their work inspired me to do what I love to do. <a href=\"https:\/\/tinjurewp.com\/jsblog\/how-i-am-learning-to-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">Learning is a process and not a goal<\/a>.<\/em>&#8221; I must take a long view while doing my learning. From next quarter I expect to have more learning time and looking forward to more distraction-free learning.<\/p>\n<p>Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part of my JavaScript\/react learning progress series. Links to my year-2018 learning progress are available here: First Quarter (2018), Second Quarter (2018), 3rd Quarter (2018) &amp; 4th Quarter. While preparing my 2018 year-end learning progress post, I had set my broad learning goals for the year 2019. In additional to outlining [&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-3624","post","type-post","status-publish","format-standard","hentry","category-javascript-progress"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/3624","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=3624"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/3624\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=3624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=3624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=3624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}