Vanilla JS Basics article; Update Basic HTTP Router Article with links

core.css

@@ -33,6 +33,10 @@ h6 {
   padding: 20px 0 20px 0
 }
 
+.entry-content h1 {
+  display: none;
+}
+
 blockquote {
   border-left: 5px solid #ddd;
   margin: 0;

posts/basic-http-routing-in-golang.html

@@ -1,8 +1,9 @@
+<h1 id="basic-http-routing-in-golang">Basic HTTP Routing in Golang</h1>
 <p>Golang is incredibly powerful. Its standard library has so much to offer, but I think other languages have encouraged the
     use of external libraries for even the most basic tasks. For example, with JavaScript, most inexperienced developers
     seem to use jQuery to do simple tasks like selecting an element and replacing its contents. When you and I both know
     jQuery is way overkill for such a task.
-    <a href="/posts/coming-soon">See my article on Vanilla JS basics</a>.</p>
+    <a href="https://leviolson.com/posts/vanilla-js-basics">See my article on Vanilla JS basics</a>.</p>
 <p>I believe that in order to be considered an expert in a language, you must at least be able to demonstrate using the core
     language to achieve your goal. In our current case, HTTP routing. Now to be clear, I don't think you need to write everything
     from scratch all the time, but you should have a firm grasp on what is available by the core language, and when you are
@@ -55,7 +56,7 @@
     <code>http.ResponseWriter</code> and a message to display. Our browser will now look like this when we visit the
     <code>/url</code> endpoint.</p>
 <p>
-    <img src="/images/step2-browser-output.png" alt="Browser Output for Step 2 - Hello HTTP">
+    <img src="https://leviolson.com/images/step2-browser-output.png" alt="Browser Output for Step 2 - Hello HTTP">
 </p>
 <p>Here is what
     <code>main.go</code> looks like at this point:</p>

posts/basic-http-routing-in-golang.md

@@ -1,18 +1,20 @@
-Golang is incredibly powerful.  Its standard library has so much to offer, but I think other languages have encouraged the use of external libraries for even the most basic tasks.  For example, with JavaScript, most inexperienced developers seem to use jQuery to do simple tasks like selecting an element and replacing its contents. When you and I both know jQuery is way overkill for such a task.  [See my article on Vanilla JS basics](/posts/coming-soon).
+# Basic HTTP Routing in Golang #
+
+Golang is incredibly powerful.  Its standard library has so much to offer, but I think other languages have encouraged the use of external libraries for even the most basic tasks.  For example, with JavaScript, most inexperienced developers seem to use jQuery to do simple tasks like selecting an element and replacing its contents. When you and I both know jQuery is way overkill for such a task.  [See my article on Vanilla JS basics](https://leviolson.com/posts/vanilla-js-basics).
 
 I believe that in order to be considered an expert in a language, you must at least be able to demonstrate using the core language to achieve your goal.  In our current case, HTTP routing.  Now to be clear, I don't think you need to write everything from scratch all the time, but you should have a firm grasp on what is available by the core language, and when you are better suited to use an external library.  If you are looking for more advanced HTTP routing, then I would suggest using something like [gin](https://github.com/gin-gonic/gin).
 
 Enough ranting, let's get to it.
 
-## Assumptions
+## Assumptions ##
 
 I assume you have basic knowledge of the Go language at this point, so if not, it might be worth searching for some entry level basics first.  See [A Tour of Go](https://tour.golang.org).
 
-## Let's begin
+## Let's begin ##
 
 The accompanying repo for the code produced in this article is located [on github](https://github.com/leothelocust/basic-http-routing-in-golang).
 
-### Step 1
+### Step 1 ###
 
 Here is our basic folder structure for this basic http routing example:
 
@@ -32,7 +34,7 @@ As a starting point our `main.go` file looks like this:
             fmt.Println("Hello HTTP")
         }
 
-### Step 2
+### Step 2 ###
 
 Now starting at a very basic level, we can leverage the [`http.HandleFunc`](https://golang.org/pkg/net/http/#HandleFunc) method.
 
@@ -48,7 +50,7 @@ Which basically means, `http.HandleFunc("/url", routingFunction)` where `routing
 
 With `fmt.Fprint()` we can pass an `http.ResponseWriter` and a message to display.  Our browser will now look like this when we visit the `/url` endpoint.
 
-![Browser Output for Step 2 - Hello HTTP](images/step2-browser-output.png)
+![Browser Output for Step 2 - Hello HTTP](https://leviolson.com/images/step2-browser-output.png)
 
 Here is what `main.go` looks like at this point:
 
@@ -71,7 +73,7 @@ Here is what `main.go` looks like at this point:
 
 Now we could stop there, as this is a "basic" http routing example, but I think it isn't quite useful as an example yet, until we start to see something slightly more practical.
 
-### Step 3
+### Step 3 ###
 
 So let's add a `NotFound` page when we don't match a pattern in `HandleFunc`.  It's as simple as:
 
@@ -107,7 +109,7 @@ This will match `/hello` and use the `HelloHTTP` method to print "Hello HTTP" to
 
 So that works, but I think we can go further.
 
-### Step 4
+### Step 4 ###
 
 We need to give ourselves something more specific than the simple contrived `/hello` endpoint above.  So let's assume we are needing to get a user profile.  We will use the url `/user/:id` where `:id` is an identifier used to get the user profile from our persistance layer (i.e. our database).
 
@@ -131,7 +133,7 @@ Let's add this new route in our `main` function:
 
 _Note: that this pattern `/user/` matches the trailing `/` so that a call to `/user` in the browser would return a `404 Not Found`._
 
-### Step 5
+### Step 5 ####
 
 Ok, so we have introduced some pretty severe holes in the security of our new HTTP router.  As mentioned in a note above, treating the `req.URL.Path` as a byte slice and just taking the last half is a terrible idea.  So let's fix this:
 
@@ -156,6 +158,6 @@ Now we can use this method in our code:
             fmt.Fprintf(w, "User Profile: %q", userID)
         }
 
-## Conclusion
+## Conclusion ##
 
 For now, I'm calling this "Basic HTTP Routing in Golang" article finished.  But I do plan to add more to it as time allows.  Additionally, I'd like to create a more advanced article that discusses the ability to respond to not only GET requests, but also POST, PUT, and DELETE HTTP methods.  Look for an "Advanced HTTP routing in Golang" article in the future.  Thanks for reading this far.  I wish you well in your Go endeavors.

posts/vanilla-js-basics.html

@@ -0,0 +1,79 @@
+<h1 id="vanilla-js-basics">Vanilla JS Basics</h1>
+<p>
+    <em>Warning: This article turned out to be a bit of rant. So if you are the type to get offended when I say negative things
+        about JavaScript, you are welcome to leave.</em>
+</p>
+<p>JavaScript is what I consider to be an &quot;easy&quot; language. Now what do I mean by that? Well, its usually the first
+    <em>scripting</em> language that new developers learn, and you can get started with very little &quot;training&quot;. It
+    has a relatively simple syntax. It can be very powerful. So from my point of view, its an easy language to pick up. And
+    therein lies the problem.</p>
+<p>So many of the JavaScript programmers out there today hear the term &quot;JavaScript&quot; and think in there mind &quot;jQuery&quot;.
+    Now that's great to have that kind of brand recognition if you are jQuery, but if you are looking to be an efficient
+    programmer that doesn't put holes in everything you make, you may want to consider that JavaScript is NOT jQuery.</p>
+<p>Additionally, we need to start thinking about the consequences of using third-party libraries for everything. Longer load
+    times, additional security risks, more memory consumption, and the list goes on.</p>
+<p>I want to give you at least a few little snippets of vanilla JavaScript that will get you on your way to not importing jQuery
+    on every project as a
+    <em>step 1</em>. It should be near the end of your steps and only as needed.</p>
+<p>
+    <em>Disclaimer: Vanilla JavaScript will be longer (i.e. more verbose), but this isn't always a bad thing. Keep in mind that
+        we are eliminating the import of another package, and all the bloat that comes with it.</em>
+</p>
+<h2 id="assumptions">Assumptions</h2>
+<p>For starters, I'm assuming that you getting this far means that you at least have heard of JavaScript. If you have not heard
+    of jQuery,
+    <strong>leave now</strong>, I don't want &quot;introducing someone to jQuery&quot; to be what you get out of this.</p>
+<p>Let's begin...</p>
+<h3 id="selecting-element-in-the-dom">Selecting Element in the DOM</h3>
+<p>jQuery</p>
+<pre><code>    $('#myID')
+</code></pre>
+<p>Vanilla JavaScript</p>
+<pre><code>    document.getElementById('myID')
+</code></pre>
+<p>Again, note that vanilla JavaScript is longer, but its actually more descriptive of what is going on here. Unless you are
+    familiar with jQuery (yes, I know you are) the jQuery syntax doesn't tell you what its doing.</p>
+<h3 id="replace-text-html-in-the-dom">Replace Text/HTML in the DOM</h3>
+<p>jQuery</p>
+<pre><code>    $('#myID').html('here is the replacement')
+</code></pre>
+<p>Vanilla JavaScript</p>
+<pre><code>    document.getElementById('myID').innerHTML('here is the replacement')
+</code></pre>
+<p>Very similar eh. However, there is actually some performance gain by using vanilla JavaScript. See
+    <a href="https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml#answer-3563136">here</a>.</p>
+<h3 id="click-handling-in-the-dom">Click Handling in the DOM</h3>
+<p>jQuery</p>
+<pre><code>    $('#myID').click(function() {
+        alert('Clicked it!')
+    })
+</code></pre>
+<p>Vanilla JavaScript</p>
+<pre><code>    document.getElementById('myID').addEventListener('click', function(e) {
+        alert('Clicked it!')
+    })
+</code></pre>
+<p>So easy.</p>
+<h3 id="advanced-queries-and-iteration">Advanced Queries and Iteration</h3>
+<p>jQuery</p>
+<pre><code>    $('.item').hide()
+</code></pre>
+<p>Vanilla JavaScript</p>
+<pre><code>    var items = document.getElementsByClassName('.items')
+    for (var i = 0; i &lt; items.length; i++) {
+        item[i].style.display = 'none'
+    }
+</code></pre>
+<p>We're starting to see the verbosity I mentioned above, but again, remember that we aren't loading in a massive third-party
+    library!</p>
+<h3 id="even-more-advanced">Even More Advanced</h3>
+<p>See Patrick Kunka's article
+    <a href="https://blog.wearecolony.com/a-year-without-jquery/">A Year Without jQuery</a>
+</p>
+<p>Patrick and I agree on many of the same points and his article articulates some helper functions that can be used to perform
+    more advanced loops, child selection and child indexing. I highly recommend you read through his article.</p>
+<h2 id="conclusion">Conclusion</h2>
+<p>If you find that your requirements heavily rely on JavaScript for DOM manipulation, or that you need animations such as the
+    ones provided by jQuery, then don't let me stop you. But if you only need some of what was covered above, or you want
+    to put a priority on performance, then you should really consider going with plain vanilla JavaScript and leave the dependencies
+    behind. You won't regret it.</p>

posts/vanilla-js-basics.json

@@ -0,0 +1,9 @@
+{
+    "title": "Vanilla JS Basics - Levi Olson",
+    "permalink": "/posts/vanilla-js-basics",
+    "created_at": "2018-05-09T11:52:50-06:00",
+    "created_at_short": "2018-05-09",
+    "post_title": "vanilla js basics",
+    "active": "posts",
+    "content_file": "vanilla-js-basics.html"
+}

posts/vanilla-js-basics.md

@@ -0,0 +1,84 @@
+# Vanilla JS Basics #
+
+_Warning: This article turned out to be a bit of rant.  So if you are the type to get offended when I say negative things about JavaScript, you are welcome to leave._
+
+JavaScript is what I consider to be an "easy" language.  Now what do I mean by that?  Well, its usually the first _scripting_ language that new developers learn, and you can get started with very little "training".  It has a relatively simple syntax.  It can be very powerful.  So from my point of view, its an easy language to pick up.  And therein lies the problem.
+
+So many of the JavaScript programmers out there today hear the term "JavaScript" and think in there mind "jQuery".  Now that's great to have that kind of brand recognition if you are jQuery, but if you are looking to be an efficient programmer that doesn't put holes in everything you make, you may want to consider that JavaScript is NOT jQuery.
+
+Additionally, we need to start thinking about the consequences of using third-party libraries for everything.  Longer load times, additional security risks, more memory consumption, and the list goes on.
+
+I want to give you at least a few little snippets of vanilla JavaScript that will get you on your way to not importing jQuery on every project as a _step 1_.  It should be near the end of your steps and only as needed.
+
+_Disclaimer: Vanilla JavaScript will be longer (i.e. more verbose), but this isn't always a bad thing.  Keep in mind that we are eliminating the import of another package, and all the bloat that comes with it._
+
+## Assumptions ##
+
+For starters, I'm assuming that you getting this far means that you at least have heard of JavaScript.  If you have not heard of jQuery, **leave now**, I don't want "introducing someone to jQuery" to be what you get out of this.
+
+Let's begin...
+
+### Selecting Element in the DOM ###
+
+jQuery
+
+        $('#myID')
+
+Vanilla JavaScript
+
+        document.getElementById('myID')
+
+Again, note that vanilla JavaScript is longer, but its actually more descriptive of what is going on here.  Unless you are familiar with jQuery (yes, I know you are) the jQuery syntax doesn't tell you what its doing.
+
+### Replace Text/HTML in the DOM ###
+
+jQuery
+
+        $('#myID').html('here is the replacement')
+
+Vanilla JavaScript
+
+        document.getElementById('myID').innerHTML('here is the replacement')
+
+Very similar eh.  However, there is actually some performance gain by using vanilla JavaScript.  See [here](https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml#answer-3563136).
+
+### Click Handling in the DOM ###
+
+jQuery
+
+        $('#myID').click(function() {
+            alert('Clicked it!')
+        })
+
+Vanilla JavaScript
+
+        document.getElementById('myID').addEventListener('click', function(e) {
+            alert('Clicked it!')
+        })
+
+So easy.
+
+### Advanced Queries and Iteration ###
+
+jQuery
+
+        $('.item').hide()
+
+Vanilla JavaScript
+
+        var items = document.getElementsByClassName('.items')
+        for (var i = 0; i < items.length; i++) {
+            item[i].style.display = 'none'
+        }
+
+We're starting to see the verbosity I mentioned above, but again, remember that we aren't loading in a massive third-party library!
+
+### Even More Advanced ###
+
+See Patrick Kunka's article [A Year Without jQuery](https://blog.wearecolony.com/a-year-without-jquery/)
+
+Patrick and I agree on many of the same points and his article articulates some helper functions that can be used to perform more advanced loops, child selection and child indexing.  I highly recommend you read through his article.
+
+## Conclusion ##
+
+If you find that your requirements heavily rely on JavaScript for DOM manipulation, or that you need animations such as the ones provided by jQuery, then don't let me stop you.  But if you only need some of what was covered above, or you want to put a priority on performance, then you should really consider going with plain vanilla JavaScript and leave the dependencies behind.  You won't regret it.