<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Cortney Thomas on Medium]]></title>
        <description><![CDATA[Stories by Cortney Thomas on Medium]]></description>
        <link>https://medium.com/@cortneythomas?source=rss-eef8f46d9776------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/1*F3uWfOlScWqG9PvQjJ6d0Q.jpeg</url>
            <title>Stories by Cortney Thomas on Medium</title>
            <link>https://medium.com/@cortneythomas?source=rss-eef8f46d9776------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Wed, 27 May 2026 22:44:29 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@cortneythomas/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[What is a callback?]]></title>
            <link>https://medium.com/@cortneythomas/what-is-a-callback-8734a08605cb?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/8734a08605cb</guid>
            <category><![CDATA[beginner]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[web-development]]></category>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[code]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Thu, 18 Oct 2018 19:02:37 GMT</pubDate>
            <atom:updated>2018-11-07T17:41:59.189Z</atom:updated>
            <content:encoded><![CDATA[<h3>Layman’s Coding: What is a callback?</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*MQXviyT568E1xj3s" /><figcaption>“minimalist photography of three crank phones” by <a href="https://unsplash.com/@ptrikutam?utm_source=medium&amp;utm_medium=referral">Pavan Trikutam</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Callbacks confused the heck out of me when I first saw them. There were two things I kept getting caught up on: <em>why </em>do I need a callback and <em>how </em>do I write one? That’s what I will cover with this article.</p><h4>tl;dr</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/847/1*AVoCUT8_6HUoi5WwOYVxMA.png" /></figure><h4>What is a callback and why do I need it?</h4><p>Before we get to the juicy details, let me start by giving a very brief explanation of a callback. Simply put, a callback is a function passed as an argument to another function. Sounds crazy, I know. But think of it this way: if you are at all familiar with writing functions, you likely feel very comfortable passing a string or number to a function, then using that string or number within the function body itself.</p><p>Callbacks are no different. Just like a string or number, you can pass a function (known as a callback) as an argument. When you do so, <em>you are passing the entire function</em>, not just what the function outputs. This is because functions are first class data types. That means they can be:</p><ol><li>Passed into a function</li><li>Returned from a function</li><li>Assigned to a variable</li><li>Stored in a data structure</li></ol><p>So, with that out of the way, let’s get to the nitty gritty. First, why use a callback? The best explanation I’ve heard:</p><blockquote>“Callbacks allow us to ensure that a particular bit of code finishes execution.”</blockquote><p>Picture yourself in your car in a parking lot. To leave your parking spot, you need to reverse the car, but you can only do so once you’ve shifted into the reverse gear. In this scenario, you backing out of the parking spot is the function and the process of shifting into reverse is the callback. Without shifting into reverse, you cannot back out of your spot.</p><h4>How do I write a callback?</h4><p>For me, the description of the what and why of callbacks is a bit useless without some example to show where they might be useful. Before I get to a legit example, let me show you a bare-bones breakdown of setting up a callback.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/595/1*uOFk3GiGREcDKfo8lsFUpw.jpeg" /></figure><p>In the code above, the <strong>function on line 1 is the callback.</strong> It’s sole purpose is to take in an argument for the parameter called name and return “Hello name“.</p><p>The <strong>function on line 5 is where the callback is passed</strong> as the argument. The function, named inputName takes two arguments: name and callback. It then calls whatever function gets passed as callback and provides name as the argument for the callback function. Remember, when we pass a function to another function, what is being passed is the function body, not the function output.</p><p>In this case, when we call inputName on line 9, we pass in “Cortney” as the name argument and the function called sayHello as the callback argument. At this point, the inputName function would look like this:</p><pre>function inputName(&quot;Cortney&quot;, sayHello) {<br>   sayHello(&quot;Cortney&quot;);</pre><pre>};</pre><p>Then, since our inputName function calls the sayHello function, the sayHello function would look like this:</p><pre>function sayHello(&quot;Cortney&quot;) {<br>   return &quot;Hello &quot; + &quot;Cortney&quot;;</pre><pre>};</pre><p>This whole process will output “Hello Cortney”.</p><p>“What is the point of all this?” you may ask. “I could do all this with a single function”, you say. And it’s true. The scenario above would probably be better served by a single function. I only used this to show you a simple example of how callbacks work. To understand the real beauty of callbacks, we can use a more real world example. Let’s assume you want to write some code (perhaps a calculator app) that performs calculations on two numbers.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*AwQRui-0yejKf7TKcVxJ8A.png" /></figure><p>Rather than having a single function that contains all the possible types of equations one could run (which would require lots of if/else statements), you can have separate functions for each type of calculation. Then, you can pass that calculation type as a callback to a function that performs the calculation. That’s precisely what is happening above on line 17. The function performCalculation accepts three arguments: two numbers and a callback (referred to here as calculationType) that determines what type of calculation happens to those numbers.</p><p>And that’s that! Hopefully you’ve learned a little about the nature of callbacks, but if my explanations didn’t do it for you, check out <a href="https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced">this article</a>, this <a href="https://www.youtube.com/watch?v=pTbSfCT42_M&amp;index=13&amp;list=LLERsnrtEeNwHgLT4EAji0iQ&amp;t=0s">YouTube video</a>, and <a href="http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/">this website</a>.</p><h4>Like what you read?</h4><p>Give it some ❤ and follow me! You can also lookout for similar articles in the <strong><em>Layman’s Coding </em></strong>series where I describe coding concepts with very little jargon and lots of pictures. Didn’t like it? It’s cool. We can still be friends.</p><h4>Want $500 off your Bloc tuition?</h4><p>If you’re serious about learning to code, consider signing up for a coding bootcamp like <a href="https://www.bloc.io/">Bloc</a>. If you send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address, I can refer you. I’ll receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8734a08605cb" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Layman’s Coding: What is a Closure?]]></title>
            <link>https://medium.com/@cortneythomas/laymans-coding-what-is-a-closure-9111717b5486?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/9111717b5486</guid>
            <category><![CDATA[code]]></category>
            <category><![CDATA[closure]]></category>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[web-development]]></category>
            <category><![CDATA[beginner]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Wed, 26 Sep 2018 20:09:34 GMT</pubDate>
            <atom:updated>2018-09-26T20:10:27.838Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NgHtRQ73bpWdqZLB" /><figcaption>“green metal gate with brown metal padlock” by <a href="https://unsplash.com/@jeisblack?utm_source=medium&amp;utm_medium=referral">Jason Blackeye</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Closures. A term I learned to detest when I encountered it a month ago during my web development apprenticeship at <a href="https://www.bloc.io/">Bloc</a>. Why you may ask? Because there are numerous tutorials out there on closures, but none of them explained things in a way my brain agreed with. It’s taken me a lot of practice, but I’ve finally found a metaphor that works for me. So, if you’re like me and you’ve watched the <a href="https://youtu.be/71AtaJpJHw0">YouTube videos</a>, read other <a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36">Medium articles</a>, and scoured the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">MDN docs</a> but still don’t have a clear understanding of closures, read on. (<em>Note: I have nothing against the tutorials linked. On the contrary, I actually found them quite useful, but only when I had already gained some knowledge about closures. They don’t seem as aimed towards beginners as I’d like</em>).</p><p>I hope my article will make closures easier to understand. If my explanation doesn’t work for you though, check out the resources linked above. I won’t even be mad if you like those articles and videos more than mine so long as you find some explanation that works for you.</p><h4>tl;dr</h4><p>A closure is a function wrapped inside an outer/parent function. It has access to the variables in the outer/parent function.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/645/1*TfZngBS4IBJdk7dlOifefQ.png" /></figure><h4>The Birthday Party Example</h4><p>Using a metaphor, I think I can make closures even clearer for you.</p><p>Try to remember a birthday party you had when you were a kid. Picture all the corny games you played, the gifts you received, and the people that attended. This memory is a snapshot of the environment (i.e. the party guests, the background music, the chocolate cake) that made up that event. Since you aren’t a timelord, you can’t go back to that birthday party. (If you are a timelord, email me ASAP). But you <em>can</em> still access the information about the birthday party because you kept it in your memory. And with access to this memory, you can do new things with the information: you can laugh with your friends about what your Aunt Susan wore or recall the awesome <a href="https://en.wikipedia.org/wiki/Poo-Chi">Poo-Chi</a> you received that became obsolete 6 seconds after you opened it.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/652/1*FTq6tqkH_jhkylCTW_LEFg.png" /></figure><p>In the above scenario, your memory is the outer/parent function. It has all the information about your birthday party. The closure is your joke. It is only accessible when you are accessing your memory of the birthday party. Let’s break this down even further using info provided by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">MDN docs</a>:</p><blockquote>A closure is the combination of a function and the lexical environment within which that function was declared.</blockquote><p>Our closure is the function called joke(). The lexical environment is the info in the outer/parent function called birthdayParty().</p><blockquote>This environment consists of any local variables that were in-scope at the time the closure was created.</blockquote><p>In our case, this variable is the parameter person1 that takes an argument that gets passed into birthdayParty(). So, our environment is made up of one argument.</p><p>The really nifty thing about closures is they can access info from their parent function even after the parent function has already closed for business and gone home. When we declare the variable auntSusan we, pass it the parent/outer function birthdayParty() and create a reference to the closure function joke(). Then, when we console log auntSusan and pass it an argument, the argument applies to the reference of joke(). Let me demonstrate with another example:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/655/1*khgL6g75DsF1Tc2o8eIBmw.png" /></figure><p>Above, the closure is the function iAmTheOuterFunction(). The lexical environment contains everything from the parent function iAmTheOuterFunction(). In this case, the closure will have access to the variable outerVariable.</p><p>When you call the parent function iAmTheOuterFunction() on line 11 and assign it to the variable favoriteFood, you are <em>creating a reference </em>to the closure function iAmTheClosure(). We’re basically saying “give me all the info contained in iAmTheOuterFunction() and store it in a variable called favoriteFood”. At this point, the parent function’s job is done. When favoriteFood is console logged on line 13, it will execute the closure using all the info in the lexical environment. Since the closure has access to the outerVariable and the closureVariable, it can successfully return these variables and output “cheese sandwich.”</p><h4>So, what’s the big deal?</h4><p>Even if you understand how to write a closure, it’s pointless if you don’t know when to use one. One of the biggest and most valuable uses of closures in JavaScript is to protect data privacy. For instance, say you declared the variable outerVariable in the global scope (i.e. outside of the parent/outer function iAmTheOuterFunction()) and got rid of the parent function so you only had the closure iAmTheClosure(). In JavaScript, you could later change the value of the variable outerVariable since it is a global variable and everything has access to it. You might even do this by mistake by forgetting you already have a variable called outerVariable and accidentally creating another one with a different value. If you store this variable in the parent/outer function that encloses a closure function, you make sure <em>only the closure</em> has access to that variable.</p><p>“But, the nature of local scope already does this in a function,” you say. Why can’t you just put outerVariable in iAmTheClosure() to ensure only this function has access to it? If you do this, you wouldn’t be able to do some cool stuff like reuse the function in an incremental fashion. W3Schools provides a really good explanation of this <a href="https://www.w3schools.com/js/js_function_closures.asp">here</a>. The important thing to remember about closures is that they are “function factories.” When variables are stored in the lexical environment of the parent/outer function, they are kept safe for use only by the closure functions contained in the parent/outer function. For instance, let’s look again at our birthday code:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/652/1*FTq6tqkH_jhkylCTW_LEFg.png" /></figure><p>When we set auntSusan to the parent/outer function birthdayParty(), you make it so you can continually reuse auntSusan and pass it different arguments without having to rewrite the whole function. If we did console.log(auntSusan(&quot;skorts&quot;));, we are passing in a new argument for the clothing parameter in the closure function joke() but the value of person1 remains auntSusan. In this scenario, the console would print &quot;Wanna hear a joke? Aunt Susan wore skorts!&quot;</p><p>If we wanted to change person1, we could create a new reference to our closure like this: var uncleFred = birthdayParty(&quot;Uncle Fred&quot;); then we could console.log(uncleFred(&quot;fanny packs&quot;)); We used our “function factory” to replicate the structure of the closure without having to code a whole new function. In this case, we would get &quot;Wanna hear a joke? Uncle Fred wore fanny packs!&quot;</p><h4>Like what you read?</h4><p>Give it some ❤ and follow me! You can also lookout for similar articles in the <strong><em>Layman’s Coding </em></strong>series where I describe coding concepts with very little jargon and lots of pictures. Didn’t like it? It’s cool. We can still be friends.</p><h4>Want $500 off your Bloc tuition?</h4><p>If you’re serious about learning to code, consider signing up for a coding bootcamp like <a href="https://www.bloc.io/">Bloc</a>. If you send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address, I can refer you. I’ll receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=9111717b5486" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Layman’s Coding: What is the minimum HTML you need for a website?]]></title>
            <link>https://medium.com/@cortneythomas/laymans-coding-what-is-the-minimum-html-you-need-for-a-website-eda987b02622?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/eda987b02622</guid>
            <category><![CDATA[web-development]]></category>
            <category><![CDATA[html]]></category>
            <category><![CDATA[beginner]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[coding]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Mon, 17 Sep 2018 17:56:59 GMT</pubDate>
            <atom:updated>2018-09-17T18:01:43.797Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yH2z_vZYebolnf5Q" /><figcaption>“black and silver laptop computer on table” by <a href="https://unsplash.com/@clemhlrdt?utm_source=medium&amp;utm_medium=referral">Clément H</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>When I started learning HTML, I ran into this annoying problem where none of the tutorials I watched agreed on what the essential, basic, bare-bones code is for an HTML document. Some would include this &lt;meta&gt; tag with info I’d never seen before, and others would say you <em>absolutely needed </em>a &lt;main&gt; section or &lt;header&gt; and &lt;footer&gt; tags to separate content. Even when these tutorials did agree, they didn’t always explain <em>why </em>I needed a bit of code<em>.</em></p><p>Now that I’ve spent a few months in HTML land, I’ve discovered what the essential building blocks for an HTML document are. I’m referring to what some people might call a boilerplate or skeleton code, but these terms all mean the same thing. Basically, what is the <em>bare minimum </em>code that needs to be in an HTML file for it to work properly?</p><h3><strong>tl;dr</strong></h3><p>If you really don’t care about the purpose of the tags, feel free to copy this code right here and you’ll be all set.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/498/1*5gJzummAqpBDGATo0fjU6Q.jpeg" /></figure><h4><strong>&lt;!DOCTYPE&gt;</strong></h4><p>This tag tells the browser which version of HTML you are using. If you look at code using older versions of HTML (HTML 4.01, for instance), you would see something like this:</p><p>Unless you are working on outdated code, you are probably using the latest version (HTML5). In this case, you’ll <strong>use this tag</strong>: &lt;!DOCTYPE html&gt;. Place it at the very top of your HTML document above everything else.</p><h4><strong>&lt;html&gt;</strong></h4><p>The &lt;html&gt; tags are basically just the “containers” for your HTML code. They tell your browser: “Hey, all the stuff in here is HTML.” It’s as simple as that. The most important thing to remember: like most tags in an HTML file, you need to <strong>use an opening </strong>&lt;html&gt; <strong>and closing </strong>&lt;/html&gt; <strong>tag. </strong>Place these just below your &lt;!DOCTYPE&gt; tag.</p><h4><strong>&lt;head&gt;</strong></h4><p>This is where you essentially build the setup for your website. Within the &lt;head&gt; tags, you will include links to your stylesheets (i.e. your CSS), links to your JavaScript, a title for your website, and metadata. These are all discussed below. <strong>Use an opening </strong>&lt;head&gt; <strong>and closing </strong>&lt;/head&gt; <strong>tag. </strong>Place these inside of your &lt;html&gt; tags.</p><h4><strong>&lt;meta&gt;</strong></h4><p>This is where all your metadata lives. Metadata is a fancy technical term for “data that describes other data.” Think of it as the settings for your HTML. The most common metadata attribute is <em>charset</em> which describes your file’s character encoding or how a browser reads your files. The vast majority of web browsers know how to read character set utf-8 making it the go-to <em>charset</em>. Long story short, <strong>use this tag: </strong>&lt;meta charset=’UTF-8’&gt;. Put it inside your &lt;head&gt; tags. <em>Note: You DO NOT need to have a closing tag for &lt;meta&gt;. This means it is a self-closing tag.</em></p><h4><strong>&lt;title&gt;</strong></h4><p>This is maybe the easiest tag to remember. What you put within the &lt;title&gt; tags is what gets displayed in your browser tabs. If I give my website a title of “Doggos R Cute”, this is what it will look like:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/463/1*ml7Oh7H6ddndbpXDcoJzBQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/299/1*CSMR_b9GPv6dmorq3ZOg6Q.jpeg" /></figure><p>Or I could do something like:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/486/1*ZvJ6t_aRG7pvztTr-n9Hrw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/288/1*Yy-xPjvGJ4rbzCZ3ptZjyw.jpeg" /></figure><p><strong>Use an opening </strong>&lt;title&gt; <strong>and closing </strong>&lt;/title&gt; <strong>tag. </strong>Put these tags inside the &lt;head&gt; tags.</p><h4><strong>&lt;body&gt;</strong></h4><p>This is where all the action happens. The bulk of your HTML code will live within the &lt;body&gt; tags. You can add things like images, paragraphs, headings, sections, videos, music files, and lots of other cool stuff. <strong>Use an opening </strong>&lt;body&gt; <strong>and closing </strong>&lt;/body&gt; <strong>tag. </strong>Put these inside of your &lt;html&gt; tags, but <em>outside </em>of your &lt;head&gt; tags. The &lt;head&gt; and &lt;body&gt; should be like two separate sections within your &lt;html&gt; tags.</p><h3>Linking to CSS and JavaScript</h3><p>Most people agree that the above code is all that is necessary for a website to function. This is <em>technically </em>correct, but the HTML skeleton code above won’t be pretty or functional without some CSS and JavaScript added to it. Since 99.9% of the websites you visit will have this extra code, we should consider the tags that link to this code as necessary too.</p><h4><strong>&lt;link&gt;</strong></h4><p>The &lt;link&gt; tag is how you attach your CSS to your HTML file. Most projects have several files that are created based on the language or the functionality of the code within them. Although you <em>can </em>put CSS directly in your HTML file, chances are good this is not a viable solution for most projects. Instead, you’ll create a separate CSS file that is linked to your HTML file. There are three essential pieces in a &lt;link&gt; tag:</p><blockquote><strong>rel </strong><em>dictates the </em>rel<em>ationship between your HTML file and the file you are linking to. In the case of CSS, </em><strong><em>use </em></strong><em>rel=’stylesheet’</em></blockquote><blockquote><strong>type</strong><em> is exactly what it sounds like. It tells the browser the </em>type<em> of file you are linking to. For CSS, </em><strong><em>use </em></strong><em>type=’text/css’</em></blockquote><blockquote><strong>href</strong><em> is the location of the file you are linking. Knowing how to link a file requires a bit of knowledge about paths, but a simple way to access a linked file when you are beginning is to make sure all your files are in the same folder. When this is the case, </em><strong><em>use</em></strong><em> href=’NameOfCSSFile.css’. For more in depth info on document paths,</em><a href="http://www.u.arizona.edu/~rgolden/macromedia1.doc"><em> check out this article</em></a><em>.</em></blockquote><p>With all that added in, the full tag will look like this:</p><p>&lt;link <em>rel</em>=’stylesheet’ <em>type</em>=’text/css’ <em>href=</em>’MyCSSFile.css’&gt;</p><p>Place this tag within the &lt;head&gt; tags. <em>Note: &lt;link&gt; is a self-closing tag meaning you DO NOT need to have a closing tag.</em></p><h4>&lt;script&gt;</h4><p>The &lt;script&gt; tags are used to link your HTML file to your JavaScript. Like CSS, you can technically put your script directly within these tags in your HTML file, but it is best — especially for larger projects — to have your JavaScript in a separate file and use the &lt;script&gt; tags to link to it. There are two necessary pieces in a &lt;script&gt; tag:</p><blockquote><strong>type</strong><em> is just like the </em>type<em> attribute used in &lt;link&gt;. For JavaScript, </em><strong><em>use </em></strong><em>type=’text/JavaScript’</em></blockquote><blockquote><strong>src</strong><em> is the &lt;script&gt; equivalent of </em>href<em>. This is where you specify your JavaScript file’s location. </em><strong><em>Use</em></strong><em> src=’SomeJavaScriptFile.js’.</em></blockquote><p>The full tag will look like this:</p><p>&lt;script <em>type</em>=’text/JavaScript’ <em>src</em>=’MyJavaScript.js’&gt;&lt;/script&gt;</p><h4>Want $500 off your Bloc tuition?</h4><p>If you’re serious about learning to code, consider signing up for a coding bootcamp like <a href="https://www.bloc.io/">Bloc</a>. If you send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address, I can refer you. I’ll receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><h4>Like what you read?</h4><p>Give it some ❤ and follow me! You can also lookout for similar articles in the <strong><em>Layman’s Coding </em></strong>series where I describe coding concepts with very little jargon and lots of pictures. Didn’t like it? It’s cool. We can still be friends.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=eda987b02622" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Lessons I learned while learning React]]></title>
            <link>https://medium.com/@cortneythomas/lessons-i-learned-while-learning-react-90378fb93bb?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/90378fb93bb</guid>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[coding]]></category>
            <category><![CDATA[react]]></category>
            <category><![CDATA[framework]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Tue, 21 Aug 2018 22:05:48 GMT</pubDate>
            <atom:updated>2018-08-22T18:51:42.104Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*p3M7nNGc7RdEfUvXQjk24g.jpeg" /><figcaption>This cat has no relation to the content of this article. I simply find it adorable. Photo by <a href="https://unsplash.com/photos/NodtnCsLdTE?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Mikhail Vasilyev</a> on <a href="https://unsplash.com/search/photos/react?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><p>Over the past week, I’ve spent about 35+ hours coding along with beginner React tutorials. With this practice under my belt, I can safely say I love React. As blasphemous as it sounds to some developers, I am a huge fan of JSX syntax. I love how everything is neatly organized into “pure” chunks of code, even if it essentially means blending HTML with JS. Doing so keeps all the bits of your site nicely packaged (in blocks of code called components).</p><p>This is one of the features that makes React great, but it’s not the only one. First off, it’s built on a unidirectional workflow approach. I know, it sounds crazy technical, but it basically means data passes through your code in one direction. Simple, right? React’s components pass data to other components in a single, hierarchical direction. That makes finding errors in your code <em>much</em> easier.</p><p>React also makes use of something called the virtual DOM. With non-React, code the entire DOM renders every time a change happens. This results in <em>a lot</em> of unnecessary DOM updating that can inhibit performance. To avoid this, React takes a lightweight snapshot of the DOM and stores this information in its “virtual DOM”. The virtual DOM works like so:</p><p>1. When your site changes (like if someone clicks a button to load new search results), React re-renders the virtual DOM.</p><p>2. It compares the differences between this newly re-rendered virtual DOM and the previous virtual DOM.</p><p>3. It updates the actual DOM accordingly.</p><p>The great part is that <em>it only updates the DOM nodes that have changed</em>. This is one reason why React is quick, efficient, and preferred by many developers.</p><p>I could speak about the benefits of React all day, but I’m biased. As part of <a href="https://www.bloc.io/web-developer-track">Bloc’s Web Developer Track</a>, every student learns the React library after mastering CSS, HTML, and JS fundamentals. It’s a logical next step for front-end development and provides tons of useful features, but that doesn’t make it the only option out there, and Bloc knows it. One of the first questions the program encourages you to ask yourself is: “why use React instead of Angular or another JS framework?” My wise and experienced mentor, Mark Carpenter, summed it up this way:</p><blockquote>React is all about front-end and creating apps that load in the browser. It has options for building with iOS and Android (see <a href="https://facebook.github.io/react-native/">React Native</a>), but isn’t used for mobile development as often as for front-end web work. Angular, on the other hand, is full-stack: you get front-end <em>and </em>back-end development capabilities. That said, become good at either one of these and you’ll get a good job.</blockquote><p>This is by no means a final or complete analysis between these tools, and there are many more to choose from. But, alas, you probably came here expecting a synopsis on React given the name of this article, so let’s bring it back ‘round to that. Here are three invaluable lessons I’ve learned while learning React:</p><p>1. <strong>Not all teachers are created equal. </strong>This may seem ridiculously obvious, but it wasn’t something I considered when I started my React journey. Just because a title includes the word “beginner” doesn’t mean it is for beginner developers. I found the <a href="https://reactjs.org/tutorial/tutorial.html#prerequisites">tutorial provided by React</a>, for instance, to be both beautifully comprehensive and a little above my abilities as someone who started coding less than a month ago. That may not be the case for everyone, but it’s important to not give up learning React because the tutorial isn’t right for you.</p><p>2. <strong>If you don’t know JS fundamentals, don’t learn React…yet. </strong>React is a JavaScript library meaning it requires the use of JavaScript syntax. Even though you will (very likely) use JSX to write out your code, the logic is still governed by JavaScript that gets “injected” into JSX. If you begin learning React without a basic understanding of functions, loops, and if statements, you’ll want to brush up on these first. Having said that, you won’t need to master JS to be successful in React. I’m finding there are plenty of built-in JS methods I haven’t come across yet, and even some concepts I was a little fuzzy on (the idea of ‘<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>’ for instance). But, I’ve been able to learn these while I go and understand how they’re integrated in the React ecosystem.</p><p>3. <strong>There’s no single best way to write anything in code. </strong>Before I began learning React, and even when I was still in the CSS/HTML stages of my education, I thought there was one true and proper way of writing code. I convinced myself that even if I got something to work, it wouldn’t matter because the code I wrote was probably sloppy or wrong. But, that’s just not the case, and I see it now with React more than I did when learning CSS and HTML. There are a variety of ways to write nearly any code. There’s also an awful lot of opinions on which ways are ‘best’ or most clever, but these viewpoints are 99% subjective. Keep in mind, there are best practices for each language, but I’ve found even these are sometimes disputed. In the end, if it works and passes all the tests, then you’ve written it the way you should have.</p><p>As parting words of wisdom, I’d also like to share with you the React tutorials I’ve found most effective:</p><p>— <a href="https://youtu.be/ZnRFerIP8aA">This video </a>by Chris, from the YouTube channel DevCoffee. He does a great job of succinctly explaining some of the core concepts of building components in React and shows you exactly how to code them.</p><p>— <a href="https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/">This free course</a> by Tyler McGinnis. He’s an exceptional teacher, and does an excellent job breaking down the fundamental concepts of components, state, props, and lifecycle. He also provides coding examples and challenges you to recreate the examples until you understand what is going on.</p><p>— <a href="https://www.codecademy.com/learn/react-101">This other free course</a> by Codecademy.com. This is probably my favorite as it shows you exactly what to do, when to do it, and how it works. They explain everything very simply and provide a space for you to code alongside the lesson. There’s also a <a href="https://www.codecademy.com/learn/react-102">part two</a> for when you’ve finished learning React fundamentals.</p><p><strong>Want $500 off your Bloc tuition?</strong></p><p>Send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address. When I refer you, I receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><p><strong>Like what you read?</strong></p><p>Give it some ❤ and follow me! You can also lookout for similar articles in the series as I continue to expand on what I’m learning in the program. Didn’t like it? It’s cool. We can still be friends.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=90378fb93bb" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[4 easy tips for Getting Unstuck as a new developer]]></title>
            <link>https://medium.com/@cortneythomas/4-easy-tips-for-getting-unstuck-as-a-new-developer-5667e1eeb0c9?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/5667e1eeb0c9</guid>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[learning]]></category>
            <category><![CDATA[coding]]></category>
            <category><![CDATA[web-development]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Fri, 10 Aug 2018 22:25:53 GMT</pubDate>
            <atom:updated>2018-08-10T22:26:51.136Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sWIkN6u3uVQyAJY9CbtUdw.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/photos/6SNbWyFwuhk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">nikko macaspac</a> on <a href="https://unsplash.com/collections/1478350/overwhelm-and-decisions-making?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><p>As a new developer, there’s nothing more common or more frustrating than getting stuck. For me, the problem often lies somewhere between not knowing a concept and not understanding how something works. Half the time it’s because I’m asked to use a method or library that I’m unfamiliar with. The other half, I’m confused by the directions or can’t figure out how a piece of code functions. It is during these times that thoughts of worthlessness and frustration invade.</p><blockquote><em>Will I ever be smart enough to be developer? Why is no one else struggling with this? The answer is probably obvious, but I’m too stupid to see it.</em></blockquote><p>I like to refer to these thoughts as belonging to my pesky inner snake oil salesman. She’s constantly trying to prove why I’m a failure, but I don’t buy what she’s selling. Why? For one, her claims aren’t credible. As with any new skill, grit and dedication are the true measures of success in coding, not innate intelligence. Second, even experienced developers struggle from time to time and seek help.</p><p>Which brings us to the first and most important step in getting unstuck:</p><p>1. <strong>Don’t believe the devil on your shoulder. </strong>If your first thoughts after failing to solve a challenge are demeaning, ignore them. They aren’t useful, they aren’t accurate, and they only serve to lower your morale. Instead, try to view each roadblock as an opportunity to learn and become a better developer. If my time as a student in <a href="https://www.bloc.io/web-developer-career-track">Bloc’s Web Developer Track</a> has taught me anything it’s that problem solving is the developer’s most important tool in the shed. So, instead of getting frustrated by a challenge, remember you are improving your ability to resolve a problem.</p><p>2. <strong>Don’t be afraid to ask for help. </strong>This took some time for me to accept. Until I started learning algorithms, I had done quite well finding solutions on my own. When I ran into my first real challenge, I was at first reluctant to ask for help. I was sure my question would have such an obvious answer that I would feel dumb and embarrassed for asking it.</p><p>Much to the chagrin of my inner monologue, I followed the advice above. I hopped onto Bloc’s Slack channel to ask for help. The result? A mentor reassured me, answered my question, and restored my confidence. If you aren’t currently in a Bloc program, you can also check out popular programming web forums like <a href="https://stackoverflow.com/">Stack Overflow</a> to get help from fellow developers. Short story long: ask for help.</p><p>3. <strong>Remove yourself from the situation. </strong>This has been among the most useful techniques I’ve discovered over the years, and I’ve used it often outside of the coding world. Our brains can only take so much focused effort before they give out and turn to mush. The longer you attempt to solve a challenging problem the more likely you are to actually push yourself further from a resolution.</p><p>The best advice I can give to avoid this scenario is to use a time management system. I’m preferential to the <a href="https://francescocirillo.com/pages/pomodoro-technique">Pomodoro technique</a>, where you take frequent breaks (about 5 minutes every 25 minutes of work) during a project to prevent burnout. I’ve also found my best work comes after breaks where I’m relaxing my brain (petting my cat, going for a walk, taking a short nap).</p><p>4. <strong>If all else fails, Google it. </strong>When I’m absolutely, truly and completely stuck, I search to find how other people solved their problem. If you’ve already spent hours looking for an answer, asking for help, and researching new materials <em>and still </em>haven’t found an answer, look up the solution. My most important and crucial word of advice here: <strong>DO NOT</strong> copy and paste the solution. This will get you nowhere and is akin to cheating.</p><p>If you aren’t able to understand what is happening in the code, the solution you find will be useless when you’re asked to explain it in a technical interview. Instead, write it out for yourself and see if you can figure out a better way to solve the problem after you’ve seen what someone else has done. If you still can’t understand the logic after seeing it, get advice from a mentor, fellow student, or another developer. Either way, make sure you understand what is going on.</p><p><strong>Want $500 off your Bloc tuition?</strong></p><p>Send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address. When I refer you, I receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><p><strong>Like what you read?</strong></p><p>Give it some ❤ and follow me! You can also lookout for similar articles in the series as I continue to expand on what I’m learning in the program. Didn’t like it? It’s cool. We can still be friends.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5667e1eeb0c9" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[My first week at Bloc: 7 best practices for beginner developers]]></title>
            <link>https://medium.com/@cortneythomas/my-first-week-at-bloc-ac2c46c93e24?source=rss-eef8f46d9776------2</link>
            <guid isPermaLink="false">https://medium.com/p/ac2c46c93e24</guid>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[coding]]></category>
            <category><![CDATA[bloc]]></category>
            <category><![CDATA[learning]]></category>
            <dc:creator><![CDATA[Cortney Thomas]]></dc:creator>
            <pubDate>Fri, 10 Aug 2018 16:08:10 GMT</pubDate>
            <atom:updated>2018-08-10T18:20:51.111Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f1HRu4YeZDn3PAS81QjuNg.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/photos/dC6Pb2JdAqs?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Fabian Grohs</a> on <a href="https://unsplash.com/search/photos/programming?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><p>Before I began <a href="https://www.bloc.io/web-developer-career-track">Bloc’s Web Developer Track Bootcamp</a>, I was nervous. Really nervous. I doubted whether I could remember so much information about a field I had almost no experience in. I was also at the mercy of my ambitious and reckless confidence to complete the program in under 4 months. Bloc reckons those committing 30–40 hours a week will finish in as little as 4–5 months. I’m looking at 45+ hours each week, <em>not including </em>time spent networking, practicing, and reading about coding.</p><p>But don’t let my crazy schedule derail your plans. Bloc gives you several options to complete their programs, so you can take it at your own pace. The standard tuition rate gives you 8 months, but you can also pay monthly if you plan to finish sooner. (<strong>Bonus</strong>: If you finish in under 8, you’ll get <a href="https://www.bloc.io/faq">reimbursed for the months you didn’t use</a>! So, obviously this is a big motivator for me to finish early).</p><p>No matter how much time you plan to spend in the program, preparation is key. Below are words of wisdom I’ve gained from personal experience and the thoughtful contributions from my mentor:</p><ol><li><strong>You get what you put in.</strong> It’s as simple as that. If you’re really invested in learning to program, read all the extra resources. Practice outside of the program and take on a side project. It seems daunting at first, but it’s important if you want to understand how programming works.</li><li><strong>Bloc will force you to think like a developer.</strong> The most important thing I’ve learned so far: having technical skills alone will not get you a job. A large part of development problem solving, and Bloc forces you to do this from day one by making you find your own answers. <a href="https://stackoverflow.com/">Stack Overflow</a>, <a href="https://www.w3schools.com/">W3Schools</a>, and Google will become your best friends during the program and even after you finish.</li><li><strong>Take free classes</strong> before you begin your program. There are <em>tons</em> of opportunities out there to learn coding basics for free and there’s no better way to prepare. Check out the following courses. They are all free or incredibly cheap: <a href="https://www.freecodecamp.org/">freeCodeCamp</a>, <a href="https://www.codecademy.com/">Codecademy</a>, <a href="https://www.udacity.com/">Udacity</a>, <a href="https://www.udemy.com/">Udemy</a>, <a href="https://www.womenwhocode.com/">WomenWhoCode</a> (<em>you don’t have to be a lady to sign up!</em>).</li><li><strong>Code everyday</strong> if you want to make progress. Even if it’s only for 15 minutes, so you don’t lose momentum.</li><li><strong>Learn how to learn.</strong> If it’s been a while since you were in school, take this <a href="https://www.coursera.org/learn/learning-how-to-learn/home/welcome">free course from Coursera</a>. It’s recommended by Bloc and is useful even for those still in school. I graduated with my B.S. in Psychology this march, and I’m working on my M.S. in Human Computer Interaction. Even with all this practice I was able to find ways to improve my ability to think and learn creatively.</li><li><strong>You will fail. </strong>It is an inevitable and annoying part of learning, but it happens to <em>everyone</em>. My mentor’s advice? Don’t let failure leave a bad taste in your mouth. Every failure is a chance to learn. Every time you make a mistake, you learn how not to do something. It makes you a better problem solver and a better developer.</li><li><strong>It’s up to you to land your developer job. </strong>While Bloc will put in tons of time helping you polish your elevator pitch and resume, it is ultimately up to you to find your own job. They aren’t going to match you with an employer or do the searching for you. That means networking, practicing soft skills, and job hunting are other priorities during your program. That said, their career services team does a great job of providing tons of resources and is committed to helping you succeed. (<strong>Bonus: </strong>Bloc has implemented a <a href="https://www.bloc.io/faq">tuition reimbursement guarantee</a> should you fail to find a job after your program).</li></ol><p><strong>Want $500 off your Bloc tuition?</strong></p><p>Send me a message on <a href="https://www.linkedin.com/in/cortney-thomas-3575a369/">LinkedIn</a> with your full name and email address. When I refer you, I receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.</p><p><strong>Like what you read?</strong></p><p>Give it some ❤ and follow me! You can also lookout for similar articles in the series as I continue to expand on what I’m learning in the program. Didn’t like it? It’s cool. We can still be friends.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ac2c46c93e24" width="1" height="1" alt="">]]></content:encoded>
        </item>
    </channel>
</rss>