<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Jack 'eXit' Whitter-Jones</title>
    <description>The latest articles on Forem by Jack 'eXit' Whitter-Jones (@jwhitt3r).</description>
    <link>https://forem.com/jwhitt3r</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F849066%2Ffa934c9d-1a2f-4ca6-9cc9-00d7212fd46e.jpeg</url>
      <title>Forem: Jack 'eXit' Whitter-Jones</title>
      <link>https://forem.com/jwhitt3r</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/jwhitt3r"/>
    <language>en</language>
    <item>
      <title>Week 9 - Trial and Error</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Fri, 01 Jul 2022 13:23:22 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-9-trial-and-error-g0d</link>
      <guid>https://forem.com/jwhitt3r/week-9-trial-and-error-g0d</guid>
      <description>&lt;p&gt;A week late, but none the less, life has a way!&lt;/p&gt;

&lt;p&gt;This will be a short post, just explaining the key findings that I have achieved.&lt;/p&gt;

&lt;h1&gt;
  
  
  Lessons Learnt
&lt;/h1&gt;

&lt;p&gt;One of the key things I found is the interaction with external APIs. The initial few days, were focused on reading over the documentation and the APIs. &lt;/p&gt;

&lt;p&gt;Using the fetchwrapper taken from the JS tutorials, the GET API was the major focus on this. However, extracting a bunch of data all in one go has its limitations and requires proper polling. &lt;/p&gt;

&lt;p&gt;Having saved all the data into separate files the next step is to begin to look at visualising the data.&lt;/p&gt;

&lt;h1&gt;
  
  
  Next Steps
&lt;/h1&gt;

&lt;p&gt;While the interaction with external APIs has been quite fun. I think the visualisation of the data is the next key step to compound my initial JS learning. In addition, I believe a review of data structures and algorithms maybe helpful.&lt;/p&gt;

&lt;h1&gt;
  
  
  Wrap-up
&lt;/h1&gt;

&lt;p&gt;Thank you for checking up on my progress and I hope to provide some more interesting work in the next few weeks.&lt;/p&gt;

&lt;p&gt;Jack/eXit&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Week 6, 7, and 8 - The DOM, the extras, and the wrap up</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Sun, 19 Jun 2022 17:42:29 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-6-7-and-8-the-dom-the-extras-and-the-wrap-up-l42</link>
      <guid>https://forem.com/jwhitt3r/week-6-7-and-8-the-dom-the-extras-and-the-wrap-up-l42</guid>
      <description>&lt;p&gt;The combination of the last three weeks into one blog post comes from a lack of time to write a cohesive blog post that is enjoyable to read! Over the course of these last three weeks, I have maintained my journal and my daily revision structure. This post will combine the notes and key areas of development conducted over the last three weeks worth of learning. &lt;/p&gt;

&lt;p&gt;The main resources used are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource - &lt;a href="https://learnjavascript.online/"&gt;LearnJavaScript.online&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Was Learnt
&lt;/h2&gt;

&lt;p&gt;This post looks at two parts, the DOM and async/await.&lt;/p&gt;

&lt;h3&gt;
  
  
  The DOM
&lt;/h3&gt;

&lt;p&gt;The DOM or Document Object Model is by far one of the most critical components of Web Development. The browser uses the DOM to provide a hierarchy of components that render onto the page. Similar to that of the prototype structure, the hierarchy builds a functional web-page based on the HTML, CSS, and JavaScript that has been applied. &lt;/p&gt;

&lt;p&gt;From the Learn JavaScript resource, one of the major components that a JS developer has to navigate is how to acquire certain components from the webpage. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;h1&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"my-header"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Hello&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To acquire this tag a JS developer would use the following function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myHeader&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#my-header&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Firstly, the JS developer accesses the global document object, that contains almost all the content on the page (the exception is the shadow DOM). The querySelector function then searches the web-page for any id with the name "my-header", alternatively, we can find all ids with a name using the &lt;code&gt;document.querySelectorAll&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Now we can access the properties that the header has, for example, the text that the header is holding:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myHeader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// Hello&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By being able to access multiple different components we can then add varying functionality, such as event-based functionality.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;myHeader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;myHeader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By adding an event to the component we can have dynamic functionality based on the characteristics of events, such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Click&lt;/li&gt;
&lt;li&gt;Submit&lt;/li&gt;
&lt;li&gt;Change&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The DOM is a huge topic and one can dedicate a lot of time to understand how it works, one great resource for delving deeper into the area is &lt;a href="https://www.w3.org/TR/WD-DOM/introduction.html"&gt;W3.org DOM&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Async/Await
&lt;/h3&gt;

&lt;p&gt;With the previous post provided an overview of JS Promises. Async/Await provides syntactic sugar, a phrase that basically means a short-cut for writing JS Promises by abstracting away from the minutiae of the topic. The following is a basic transition from Promises to Async:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Promises&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Promises&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getWebsite&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fakeSite&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()).&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Async/Await&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getWebsite&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fakeSite);
     const data = await response.json();
     console.log(data);
}
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The only difference in this case is that Async/Await provides a succinct more readable method of writing such a function. However, it does come down mostly to preference. Some developers prefer the chaining of conditions together via the Promises, and others prefer the use of async/await with the addition of try-catch statements to manage the errors that maybe produced. &lt;/p&gt;

&lt;p&gt;I will state, the Learn JavaScript makes a great emphasis on the fact that any developer should have a solid grasp of Promises before diving into Async/await due to them being as we said, syntactic sugar of promises.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;Having started Learn JavaScript on the 6th of May 2022, I have finally completed the 78 section course on the 19th of June 2022. Over the course of the 45days, I feel this course has provided me a great advantage over many resources due to its compounding learning approach, while maintaining a good level of ease to digest writing and detailed knowledge around the topic.&lt;/p&gt;

&lt;p&gt;The flashcard functionality provides a great method for pre-sleep revision to ensure that you understand key concepts to hit that spaced-repetition!&lt;/p&gt;

&lt;p&gt;I would encourage anyone to consider using this resource to learn JavaScript as there first entry into the language as it provides a well structured, succinct, and unique approach to developing good practice and understanding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;Going forward, the next step is to spend a week practicing the skills learnt throughout this last 45 days. The project will be carried out using the following rough structure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Day 1: Brainstorm and plan the project&lt;/li&gt;
&lt;li&gt;Day 2: Drawn design of the application&lt;/li&gt;
&lt;li&gt;Day 3: Strawman the application &lt;/li&gt;
&lt;li&gt;Day 4: Visualise the data&lt;/li&gt;
&lt;li&gt;Day 5: Tidy and Review&lt;/li&gt;
&lt;li&gt;Day 6: Break&lt;/li&gt;
&lt;li&gt;Day 7: Write-Up&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Obviously this structure is a rough draft to work with and has fluidity to it, as potential areas may require more time to work with or may be completed earlier.&lt;/p&gt;

&lt;p&gt;This has been a really fun 45 days, I look forward to seeing you all in 7 days! &lt;/p&gt;

&lt;p&gt;Jack/eXit&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Week 5 - Promises, promises, promises</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Sun, 29 May 2022 19:46:18 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-5-promises-promises-promises-o47</link>
      <guid>https://forem.com/jwhitt3r/week-5-promises-promises-promises-o47</guid>
      <description>&lt;p&gt;API communication is the pivotal point in how websites communicate between each other and this is where JavaScript shines. This blog post delves into how JavaScript works through the use of Promises, and Fetch.&lt;/p&gt;

&lt;p&gt;The main resources used are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource - &lt;a href="https://learnjavascript.online/"&gt;LearnJavaScript.online&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Was Learnt
&lt;/h2&gt;

&lt;p&gt;Promises have been the main stay of my weeks revision, along with the fetch function. &lt;/p&gt;

&lt;p&gt;Promises provide the functionality to achieve asynchronous communication between clients and servers. When a client and server talk, the communication stream can take a period of time to respond. With this being the case, synchronous communication begins to fall down as it blocks or in other words freeze the application.&lt;/p&gt;

&lt;p&gt;Asynchronous programming enables applications to be non-blocking, that allows the application to continue processing, but also allows for communicating between a client and server in the background. Promises are the key to making this work. &lt;/p&gt;

&lt;p&gt;Promises object within JavaScript allows communications between client and servers to share data between one another. A client connects to a server through a URL. The server returns a promise, ensuring that the client and server share communication stream but allow for a period of time for data to be sent. The following code example demonstrates how an API function might return a &lt;code&gt;Promise&lt;/code&gt; when it has been contacted by a client:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function getMyAPI(ip){
    return new Promise((resolve, reject) =&amp;gt; {
           if(ip === "127.0.0.1"){
                reject("No local host addresses please...");
           }
           resolve({
                msg: "Yay you got my message...";
           });
    })
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The outcome of this code example can be split into three stages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pending - The state that is used when communication is being conducted&lt;/li&gt;
&lt;li&gt;Fulfilled - When the communication is complete, even if there is a 404&lt;/li&gt;
&lt;li&gt;Rejected - Communication has been failed, perhaps through network issues&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The &lt;code&gt;resolve&lt;/code&gt; function provides a fulfilled state to the promise, this is where data is typically sent back in JSON format.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;reject&lt;/code&gt; function provides an error for the communication stream so that developers can handle the outcome.&lt;/p&gt;

&lt;p&gt;By now, this should remind you of another type of functionality, the try-catch structure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;try {
   // handle success
} catch {
   // handle error
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To handle the promise that an API returns, we can use the follow code example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    fetch("fakeSite").then(response =&amp;gt; response.json()).then(data =&amp;gt; console.log(data)).catch(error =&amp;gt; console.log(error));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, a promise is returned by the fetch function, which is handle by the &lt;code&gt;then&lt;/code&gt; function. This handles the response from the API. The &lt;code&gt;.json()&lt;/code&gt; part of the function itself returns another promise, which we can use the &lt;code&gt;.then&lt;/code&gt; function again to handle the data. Finally, the &lt;code&gt;.catch&lt;/code&gt; handles any errors asynchronously preventing the application from blocking.&lt;/p&gt;

&lt;p&gt;Finally, to handle the data of the second &lt;code&gt;then&lt;/code&gt; we should consider passing the data to a function, in this case we have used &lt;code&gt;console.log&lt;/code&gt; but we can send it to a database for example. The reason we do this, is because the data does not live outside the scope of the &lt;code&gt;then&lt;/code&gt; function.&lt;/p&gt;

&lt;p&gt;One of the key findings of this weeks learning has been the interaction of asynchronous coding style. One key importance of using async code is to ensure that all code is asynchronous throughout the life span of that function. If not, the application will become blocking, and slow down the speed and performance of the application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;LearnJavaScript has been an excellent resource for learning this important concept. LearnJavaScript has been able to explain the concept through step-by-step approach that builds each lesson. One of the most important concept for learning &lt;code&gt;promises&lt;/code&gt; has been the comparison to &lt;code&gt;try catch&lt;/code&gt; structure. A typically hard concept for many, LearnJavaScripts step-by-step breakdown of the concept in suitable components.&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrospective
&lt;/h2&gt;

&lt;p&gt;The promise and fetch execution has been an interesting topic. For learning this functionality, it is worth building fake API functionality, or even to interlinking with third-party APIs to get a wider understanding of the process. Additionally, it is also quite fun to capture the traffic within Wireshark to understand the networking side of HTTP.&lt;/p&gt;

&lt;p&gt;Over the next week I will try to apply third-party interaction to compound the learning that has been done so far.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;It has been a turning point over the course of the week and has highlighted how proficient JavaScript can be.&lt;/p&gt;

&lt;p&gt;Until next week!&lt;/p&gt;

&lt;p&gt;Jack/eXit&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Week 4 - Class is in session</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Sun, 22 May 2022 20:35:31 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-4-class-is-in-session-4m78</link>
      <guid>https://forem.com/jwhitt3r/week-4-class-is-in-session-4m78</guid>
      <description>&lt;p&gt;Within many programming languages, classes are the a common concept due to Object Orientated Programming being the dominant paradigm.&lt;/p&gt;

&lt;p&gt;JavaScript is no different to other programming languages with its support of classes, however, its implementation of classes IS very different, which we will explore.&lt;/p&gt;

&lt;p&gt;Following the previous posts, the main resource and supplementary resources are shown below, and are discussed at the latter end of the post.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource - &lt;a href="https://learnjavascript.online/"&gt;LearnJavaScript.online&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Supplementary Resource #1 - &lt;a href="https://stackoverflow.com/questions/19633762/classical-inheritance-vs-prototypal-inheritance-in-javascript#:~:text=Classical%20inheritance%20is%20limited%20to,also%20objects%20inheriting%20from%20prototypes."&gt;StackOverflow Classical Inheritence vs Prototype Inheritence&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Supplementary Resource #2 - &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"&gt;MDN JavaScript Classes&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  What Was Learnt
&lt;/h1&gt;

&lt;p&gt;JavaScript has a variety of ways of programming, procedural, functional, and object-orientated. &lt;/p&gt;

&lt;p&gt;Within JavaScript, object-orientated programming is developed through the creation of objects, which is achieved through the use of the curly bracer, as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myObject = {
    name: "Jack/eXit",
    language: "JavaScript"
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The remainder of this blog post focuses on the Object Orientated Programming implementation of JavaScript. &lt;/p&gt;

&lt;h2&gt;
  
  
  Classes
&lt;/h2&gt;

&lt;p&gt;However, the example above only provides us with a collection of data, instead we can create a more sophisticated version which has both data and functionality.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Computer{
    constructor(name){
         this.name = name;
    }

    set name(value){
        this._name = value;
    }

    get name(){
        return `This is a ${this._name} computer`;
    }

    turnOn(){
       console.log("Turning on.... beep boop!");
    }

}

const myComputer = new Computer("Apple");
console.log(myComputer.name);
myComputer.turnOn();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This example has &lt;strong&gt;alot&lt;/strong&gt; going on in it, and will be broken down in the following sections. &lt;/p&gt;

&lt;h3&gt;
  
  
  Constructors
&lt;/h3&gt;

&lt;p&gt;Within a class, a constructor is a way of binding user or computer supplied content to a class, for example, a persons name, character id, character level, postal address, bank number, etc.&lt;/p&gt;

&lt;p&gt;Within the example, the constructor takes the data of name, in this case, "Apple" and supplies it to the classes field, referred to as "this.name". We use "this" in a class to refer to the object. This is important when we have multiple versions of the class, also referred to as instantiated objects of class Computer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Getters and Setters
&lt;/h3&gt;

&lt;p&gt;Getters and Setters are a great way of managing content within a class, along with constructors, as they help us manage data that is being set.&lt;/p&gt;

&lt;p&gt;For example, if we have a value being set, e.g., an age. We might allow a user to set the name via a string or via a number. However, the setter can be used to parse the string into a number so that we remove any issues of using a string instead of a number.&lt;/p&gt;

&lt;p&gt;The Getters also provide us a great way of returning data. Sometimes we might want to format the content that is being returned, like what was done in this example. Instead of returning just the string, we can also return some following text. &lt;/p&gt;

&lt;h3&gt;
  
  
  Methods
&lt;/h3&gt;

&lt;p&gt;Methods provide our behaviour to our attributes (data). A method is just a Object Orientated Programming term for function. In this instance, we are using methods (functions) to give the class some behaviour that the user of the class can interact with. For example, because we are creating a class of Computer, we want to give it the behaviour of turning on. The method only prints a sentence out, however, it provides some dynamism to our objects in the future. If we wanted we could add a method for it to become sentient... but we shouldn't do that just yet!!!&lt;/p&gt;

&lt;h2&gt;
  
  
  Inheritance
&lt;/h2&gt;

&lt;p&gt;To provide further functionality so that we dont have to reinvent the wheel, JavaScript allows us to extend the class further, allowing us to define a computer, as well as sub-classes of computer, for example, mobile phones.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Computer{
    constructor(name){
         this.name = name;
    }

    set name(value){
        this._name = value;
    }

    get name(){
        return `This is a ${this._name} computer`;
    }

    turnOn(){
       console.log("Turning on.... beep boop!");
    }

}

class Mobile extends Computer{
    constructor(name, type){
        super(name);
        this.type = type;
    }

    callSomeone(){
        console.log("Calling home to the mothership...");
    }
}

const myComputer = new Computer("Apple");
console.log(myComputer.name);
myComputer.turnOn();

const myMobile = new Mobile("eXits Phone", "Android");
myMobile.callSomeone();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This example extends the class of Computer by using the "extend" keyword. With this, we are able to &lt;strong&gt;Inherit&lt;/strong&gt; the attributes and behaviours of the inherited class or parent class. &lt;/p&gt;

&lt;p&gt;Within the constructor of mobile, we can define new attributes such as the type of phone as shown via:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;this.type = type;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;but we can also use the "super" keyword:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;super(name);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The "super" keyword is important as it allows us to inherit the attributes of the parent class, but also allows a developer to pass data back into the parent class, to reduce the amount of typing your fingers have to do!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HOWEVER&lt;/strong&gt; while we see classes and the inheritance of its parent class via the &lt;code&gt;extend&lt;/code&gt; keyword, the class functionality actually boils back to a function. This is what is called syntactic sugar, a term, which means that it makes life easier for us as developers to write and manage our code!!!&lt;/p&gt;

&lt;p&gt;The next section discusses further the purpose of why &lt;code&gt;class&lt;/code&gt; and &lt;code&gt;extend&lt;/code&gt; are considered "syntactic sugar" and how the &lt;code&gt;extend&lt;/code&gt; keyword truly inherits its parents behaviours and attributes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prototype
&lt;/h2&gt;

&lt;p&gt;As the introduction to this post discusses, JavaScript implements classes slightly differently to other languages. This is down to  the Prototype Chain, which is how classes &lt;strong&gt;inherit&lt;/strong&gt; from one another.&lt;/p&gt;

&lt;p&gt;Within every object, is a Prototype chain, which indicates the previous object that the current object inherits from, all the way back to the start of the chain, which will be the type &lt;strong&gt;null&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The image below, demonstrates the direction JavaScript reads a Prototype Chain (black arrows). From left to right, our classes we have defined in this blog post are illustrated in green, where the built in types are purple, going back to the Prototype type shown in red, and then terminating in the null type shown in grey.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_pbey739--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptit3sn4t33rrdjxqg8c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_pbey739--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptit3sn4t33rrdjxqg8c.png" alt="Direction of Reading for Prototype Chain" width="601" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is importance to understand as we can then verify the process by using the built in function &lt;code&gt;Object.getPrototypeOf();&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Using the above code (including the mobile class), we can output the following Prototype Chain to verify our diagram:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(myMobile); // Mobile
console.log(Object.getPrototypeOf(myMobile)); // Computer
console.log(Object.getPrototypeOf(Object.getPrototypeOf(myMobile))); // Object
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(myMobile)))); // Prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(myMobile))))); // null
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By chaining our Prototypes together, JavaScript can create a very complex inheritance chain, as illustrated below, whereby each object inherits from its parent type and has its functionality as shown via the red lines allowing the object to access any method of behaviour its parents has without having to call the previous object directly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MGWSxkeZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ig03r2ad0jhh526x0rt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MGWSxkeZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ig03r2ad0jhh526x0rt.png" alt="Inheritance Direction of Parent Object" width="601" height="421"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Further Theory
&lt;/h2&gt;

&lt;p&gt;The theory behind of why JavaScript use Prototype-based inheritance is to manage the classical inheritance problem, which can be confusing to understand, however, this &lt;a href="https://stackoverflow.com/questions/19633762/classical-inheritance-vs-prototypal-inheritance-in-javascript#:~:text=Classical%20inheritance%20is%20limited%20to,also%20objects%20inheriting%20from%20prototypes."&gt;StackOverflow&lt;/a&gt; post elaborates further, which I urge you to read.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;The LearnJavaScript.online resource has been a great way of understanding the Object Orientated Programming paradigm from a JavaScript perspective. However, it is definitely worth supplementing the content with a wider reading around the theory of Classical Inheritance vs Prototype Inheritance just to understand what problem JavaScript is trying to solve in this instance. &lt;/p&gt;

&lt;p&gt;From further research, the supplementary &lt;a href="https://stackoverflow.com/questions/19633762/classical-inheritance-vs-prototypal-inheritance-in-javascript#:~:text=Classical%20inheritance%20is%20limited%20to,also%20objects%20inheriting%20from%20prototypes."&gt;StackOverflow&lt;/a&gt; post provides a clear comparison between the two theories and I strongly urge anyone to read it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrospective
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;This weeks learning has been a lot of fun, It has definitely made me really understand the topic of inheritance more not only in JavaScript but also other languages like Java or C#. Therefore, I think graphical representations of different concepts are worth investing in.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;Thank you for reading this weeks post, this has been a really fun week!&lt;/p&gt;

&lt;p&gt;Feel free to leave a comment if there is anything I have miss-typed or could try and simplify as it is a great way for me to compound my learning!&lt;/p&gt;

&lt;p&gt;See you all next week :)&lt;/p&gt;

&lt;p&gt;Jack/eXit&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Week 3 - Array of Objects</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Sun, 15 May 2022 17:40:24 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-3-array-of-objects-1mje</link>
      <guid>https://forem.com/jwhitt3r/week-3-array-of-objects-1mje</guid>
      <description>&lt;p&gt;The modern web functions predominately on the use of Application Programming Interfaces (APIs). Many of the APIs return data by passing an array of objects between one another. &lt;/p&gt;

&lt;p&gt;This weeks worth of study has been reviewing the LearnJavaScript.online has focused on the management of API data that is in the form of an Array of Objects. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource - &lt;a href="https://learnjavascript.online/"&gt;LearnJavaScript.online&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Supplementary Resource - &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"&gt;MDN JavaScript&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Was Learnt
&lt;/h2&gt;

&lt;p&gt;This weeks worth of learning built on the array functions in the previous week, but with the added complexity of managing an array of object coupled with optional chaining.&lt;/p&gt;

&lt;p&gt;Of interest in this week was working with objects simulated against the Twitter API, for example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const tweets = [
    {
        id: 1,
        message: "Week 2 - JavaScript and Beyond...",
        user: {
            handle: "jack_wj"
        },
        stats: {
            likes: 1,
            retweets: 1
        }
    },
    {
        id: 2,
        message: "Week 3 - Array of Objects",
        user: {
            handle: "jack_wj"
        },
        stats: {
            likes: 1,
            retweets: 1
        }
    }
];

const socialScore = tweets.reduce((total, tweet) =&amp;gt; {
    return total + tweet.stats.likes + tweet.stats.retweets;
}, 0);
console.log(socialScore); // 4

const messages = tweets.map(tweet =&amp;gt; tweet.message); // [ 'Week 2 - JavaScript and Beyond...', 'Week 3 - Array of Objects' ]
console.log(messages);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One way to improve the visualisation of the objects that are being managed within the array is to change the "current" variable name that is typical used within the reduce function, but instead to refer to it as its singular variable name, in this instance "tweet".&lt;/p&gt;

&lt;p&gt;So far this week has begun to introduce me to how APIs manage and send data, which will help build into frameworks such as Express and React.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;This week has hasn't had as much progress as previous week, however, the material has begun to gently introduce how APIs manage data in a succinct way that has built off previous weeks.&lt;/p&gt;

&lt;p&gt;It has also begun to introduce more intermediate content, such as try...catch, optional chaining, and nullish coalescing.&lt;/p&gt;

&lt;p&gt;The LearnJavaScript.online resource has definitely increased in complexity but has managed to maintain its stability in ease of use and structured approach to learning.&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrospective
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;I believe with the increase in complexity, it might be worth beginning to look at React or Express to help tie knowledge that is being learnt from LearnJavaScript.online to other content to further compound the lessons that are being learnt. However, this will need to be thought out before committing to it.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;Until next week!&lt;/p&gt;

&lt;p&gt;~ Jack/eXit&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Week 2 - JavaScript and Beyond...</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Mon, 09 May 2022 13:33:25 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/week-2-javascript-and-beyond-pm5</link>
      <guid>https://forem.com/jwhitt3r/week-2-javascript-and-beyond-pm5</guid>
      <description>&lt;p&gt;Understanding how to structure a webpage is one thing, but the most critical aspect of modern day computing and web development is being dynamic and able to manage a wide selection of data.&lt;/p&gt;

&lt;p&gt;This weeks post explains the initial week of JavaScript study.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource - &lt;a href="https://learnjavascript.online/"&gt;LearnJavaScript.online&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Supplementary Resource - &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide"&gt;MDN JavaScript&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Was Learnt
&lt;/h2&gt;

&lt;p&gt;The early sections of LearnJavaScript.online reviews the basic entry syntax of JavaScript. This provided a suitable recap of the material. However, a key aspect of the weeks learning were the map, reduce, and filter functions for managing content in arrays.&lt;/p&gt;

&lt;h3&gt;
  
  
  Map
&lt;/h3&gt;

&lt;p&gt;The Map function provides a great way of manipulating the content within an array through a callback function. For example, multiplying each element of an array by 2.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1,2,3];
const multipliedNumbers = numbers.map(number =&amp;gt; number * 2); // returns 2, 4, 6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Filter
&lt;/h3&gt;

&lt;p&gt;The Filter function allows the developer to provide logic against the content within an array. For example, finding numbers that are greater than 2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1,2,3];
const multipliedNumbers = numbers.map(number =&amp;gt; number * 2); // returns 2, 4, 6
const filteredNumbers = multipliedNumbers.map(number =&amp;gt; number &amp;gt; 2); // returns 4 and 6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Reduce
&lt;/h3&gt;

&lt;p&gt;The Reduce function combines all the arrays contents into a single value based on a set of logic outlined in a callback function. In this case, the reduce function will take the 4 and 6 and multiply them together, resulting in the value 24. &lt;/p&gt;

&lt;p&gt;A key note with the reduce function is the number 1 that comes after the callback function. This is to set the total value to the value of 1 and allows 1 * 4 to be legitimate.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const numbers = [1,2,3];
const multipliedNumbers = numbers.map(number =&amp;gt; number * 2); // returns 2, 4, 6
const filteredNumbers = multipliedNumbers.map(number =&amp;gt; number &amp;gt; 2); // returns 4 and 6
const reducedNumbers = filteredNumbers.reduce((total, current) =&amp;gt; total * current, 1); // returns 24 - 1 * 4 * 6;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So far, I am just starting the JavaScript journey, and the content on LearnJavaScript.online is great extremely well outlined, and it is supported with the flashcards and note taking features, which I have noticed a much higher level of retention on key concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;Reflecting on last weeks study, FreeCodeCamps provided a snippet-based approach that distilled concept in manageable chunks. However, on review, this does not provide me as learner sufficient depth to critically deploy the technique in question.&lt;/p&gt;

&lt;p&gt;Therefore, this week I started using the LearnJavaScript.online course. A structured approach to learning JavaScript through a guided means, that has more in-depth discussion of a particular topic. In addition, supplementary resources are linked to each section providing further reading material.&lt;/p&gt;

&lt;p&gt;With the first seven parts of LearnJavaScript.online being free, it provided a good insight into the approach that was taken. It also provides a sufficient approach for learning basic programming to learning JavaScript. &lt;/p&gt;

&lt;p&gt;In addition, there is an extensive amount of topics (78 to be exact), which is accessible for five years and provides constant updates for a small one off payment and is supported with a built in flashcard system to help support spaced repetition.&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrospective
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Use the flashcard functionality within the LearnJavaScript.online website before signing off for the day to recap key concepts.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;Until the next post!&lt;/p&gt;

&lt;p&gt;~ Jack/eXit&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Week 1 - Structure and Design</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Mon, 02 May 2022 14:38:07 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/structure-and-design-week-1-50ej</link>
      <guid>https://forem.com/jwhitt3r/structure-and-design-week-1-50ej</guid>
      <description>&lt;p&gt;Structure and design is crucial for anything from console applications and websites. To achieve this, HTML5 and CSS3 are the weapons of choice and being the entry point for most new starters into web development.&lt;/p&gt;

&lt;p&gt;This post explains key takeaways that I have learnt over the last week, as well as, a review of the resource of choice, and a retrospective that can be applied going into the next week of learning.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Main Resource: &lt;a href="https://www.freecodecamp.org/learn/responsive-web-design/"&gt;Responsive Web Design Certification&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Supplementary Resource: &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"&gt;Mozilla MDN - HTML Basic&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What Was Learnt
&lt;/h2&gt;

&lt;p&gt;Structure, structure, structure and more structure. HTML is the language of structure, one of the key improvements that I can see from the HTML of the past are more structure tags, such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;main&amp;gt;&amp;lt;/main&amp;gt;
&amp;lt;section&amp;gt;&amp;lt;/section&amp;gt;
&amp;lt;header&amp;gt;&amp;lt;/header&amp;gt;
&amp;lt;footer&amp;gt;&amp;lt;/footer&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With the inclusion of these tags, the construction of a HTML document has much greater levels of granularity. Compared to the classic way of using &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; tags to do the same thing. This simple design choice makes reviewing HTML document structure much easier.&lt;/p&gt;

&lt;p&gt;The major takeaway that took a little bit to get into is the difference between the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt; tags in the Document Object Hierarchy (DOM). The following is an example of a HTML5 document with the new tags:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE HTML&amp;gt;
&amp;lt;html&amp;gt;
    &amp;lt;head&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
        &amp;lt;header&amp;gt;
        &amp;lt;/header&amp;gt;
        &amp;lt;main&amp;gt;
        &amp;lt;/main&amp;gt;
        &amp;lt;footer&amp;gt;
        &amp;lt;/footer&amp;gt;
    &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A simple explanation of the difference is, body is for everything in the DOM, while, main is for unique content to that page.&lt;/p&gt;

&lt;p&gt;CSS3 has some interesting additions that I have never used. The psuedo-class and the increase in attaching design to almost anything within the DOM object through the regex selectors.&lt;/p&gt;

&lt;p&gt;While this has been a brief re-introduction to HTML and CSS, I feel as if these skills will improve over time in conjunction to learning JavaScript. &lt;/p&gt;

&lt;h2&gt;
  
  
  Resource Review
&lt;/h2&gt;

&lt;p&gt;FreeCodeCamp is a great area to begin with any campaign to learn programming. The bite-sized snippets of explanation and hands on experience provides a suitable initial entry for any level of learner and the exercises provide a suitable incline in difficulty. &lt;/p&gt;

&lt;p&gt;However, for me, the snippet structure approach only goes so far. The need for a single flowing document is useful to ensure that my concentration is maximised to grasp the full structure of the topic.&lt;/p&gt;

&lt;p&gt;To support the FreeCodeCamps resource, &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"&gt;the Mozilla MDN resource - HTML Basic&lt;/a&gt; provided a great way of getting concise discussion of HTML5 material to link with the snippet approach outlined by FreeCodeCamps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrospective
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Supplement the main resource with a secondary (lighter) resources&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Sign Off
&lt;/h2&gt;

&lt;p&gt;The next week will be looking at the main topic of the journey, JavaScript. By having a grasp on HTML5 and CSS3, this knowledge will be extremely helpful when using JavaScript to its fullest.&lt;/p&gt;

&lt;p&gt;See you in the following week!&lt;/p&gt;

&lt;p&gt;~ Jack/eXit&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Week 0 - Competent Scripter to Proficient Programmer</title>
      <dc:creator>Jack 'eXit' Whitter-Jones</dc:creator>
      <pubDate>Tue, 19 Apr 2022 17:57:53 +0000</pubDate>
      <link>https://forem.com/jwhitt3r/competent-scripter-to-proficient-programmer-35j9</link>
      <guid>https://forem.com/jwhitt3r/competent-scripter-to-proficient-programmer-35j9</guid>
      <description>&lt;p&gt;To start something new is always exciting but also some what daunting. As a PhD graduate who has some time to think about my own skillset, I have come to understand that I lack in my technical capabilities of Computer Programming. &lt;/p&gt;

&lt;p&gt;While I may be able to do generic scripting and have some capacity at free-thinking while solving minor problems that is typically supported by framework, I have never thought of myself as a proficient programmer, competent maybe, but never proficient.&lt;/p&gt;

&lt;p&gt;For me this idea of being a proficient programmer is not something I would like to improve from just a professional capacity, it also plays into my personal passion for which I journeyed into computing in the first place.&lt;/p&gt;

&lt;p&gt;My background focuses predominately within the field of Information Security, an area in which, benefits from understanding how to script, but does not require you to be a software engineer. With exposure to Web Development from both a personal and professional capacity, much of the experience of Web Development is now either outdated or knowledge has been typically been masked behind a framework.&lt;/p&gt;

&lt;h1&gt;
  
  
  The Approach
&lt;/h1&gt;

&lt;p&gt;My aim is to improve my programming proficiency through the medium of Web Development. A field that is accessible, far reaching, resource heavy, and has a very large community spanning many technologies. To scope my learning, I am primarily focusing on HTML, CSS, and JavaScript, with React and Express as my secondary focus. The idea of placing the frameworks as my secondary focus is that I want to develop my understanding around why a framework would be used in a particular instance as to maximise my understanding of the framework further. &lt;/p&gt;

&lt;p&gt;To tailor the focus of my learning this blog series aims to document my journey to go from competent scripter to proficient programmer, as well as, to try and answer the following set of questions to help anyone who is in a similar scenario:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;What resources should I use?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;What language should I learn?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;What is the best development stack?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How do I escape tutorial hell?&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Target for Success
&lt;/h1&gt;

&lt;p&gt;To be able to determine my journey, the following outputs are what I aim to achieve at the end of the journey:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Contribute to a JavaScript open-source project (at minimum once)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create a portfolio of five unguided projects&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Understand a core front-end and back-end framework&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Document my journey&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Tenants of the Journey
&lt;/h1&gt;

&lt;p&gt;To guide the learning there are a set of soft rules that I want to apply:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Summarise the learning conducted in that session&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Analyse and review material before committing to studying it&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Maintaining focus on a single guided resource at any given time&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When finishing a guided resource, create and develop an unguided project that has a specification attached before starting another guided resource&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Time Frames
&lt;/h1&gt;

&lt;p&gt;Major time commitments should never be taken lightly, instead of doing a daily post as they have never worked for me in the past. A weekly posted instead will be done that is typically posted at the end of the weekend. I hope to maintain the series over a span of 52 week time frame, with a week long break done every so often. However, my progress will be tracked every three months to make sure that I am on track.&lt;/p&gt;

&lt;p&gt;Start - 25/04/2022&lt;br&gt;
End - 24/05/2022&lt;br&gt;
Breaks - 28days&lt;/p&gt;

&lt;h1&gt;
  
  
  Sign Off
&lt;/h1&gt;

&lt;p&gt;Week 1 will be commencing 25/04/2022, this provides me a fresh start to the week and allows some upfront research to tailor my study plan and scouting of resources before beginning.&lt;/p&gt;

&lt;p&gt;I look forward to the journey and I hope it is as interesting for you as it is for me.&lt;/p&gt;

&lt;p&gt;See you in week 1!&lt;/p&gt;

&lt;p&gt;~ Jack/eXit&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>discuss</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
