First Things First, Build This Blog

AUGUST 3rd, 2017

Years have gone by. I've learned some Ruby. I've learned some Java. I've worked on AI systems running Drools. I've done a little scripting with Ramda. I've written some basic HTML, CSS and JavaScript. I've done a non trivial number of computer related things.

You think I'm pretty cool right? I wrote the acronym for artificial intelligence up there for god sakes.

Well, can I build a web app? No. Could I whip up a responsive website? Nope. Could I write a script to do something for my team without pestering the team lead all day for weeks, essentially getting him to write half of it in tiny bits over a long period of time? Sure can't. Do I fully understand the tools I've employed to get things done at work? Not really.

I have all these bits and pieces of web development that don't fit together, most of which I've forgotten and never fully understood. I've really been winging it.

Here I am a few years into a tech career and I know I need to finally do something more than test the applications whose quality I'm responsible for. I want to automate those tests. I want to contribute more than bug reports but implement systems to prevent and catch those bugs in a less expensive more efficient manner. I want to be able to switch hats when needed to help build out a feature. I want to add more, do more and be more than I am. A colleague has decided to lend me his time, pointing me in the right direction as I start from the start, making my way into building JS web apps.

He suggested that I blog about what I learn. So I've built this website, which wasn't as straightforward as I thought it would be. Here I'll tell you what parts of this process were new to me and what I learned about them.

Content Delivery Networks

One of the first things I did after purchasing my domain is get setup with a free CDN (Content Delivery Network) over at Cloudflare. Do I need one? Probably not at the moment but I may need one as I develop this blog and any projects I create as a result of my learning.

A CDN is essentially a geographically distributed network of servers. CDN providers cache your website's assets across these servers. The purpose is to deliver assets to an end user as fast and efficient as possible.

Botswana and Hawaii are are geographic antipodes of each other. If you're a dude in Botswana and you pull up a website by some dude in Hawaii it's going to take a long freakin' time for Botswana dude to stream Hawaii dude's sweet vids. Though, if Hawaii dude is signed up with Cloudflare or some other CDN all his assets would be cached on a server much closer to Botswana dude and Botswana dude won't have to wait for Hawaii dudes content.

As I continue with this blog and future projects I'll have more and more assets. If someone on the other side of the earth cares about anything I'm doing they won't have to wait long for my site load.

Div Tags All Over The Place

When I initially built out the structure of this blog's main page I had nothing but <div> tags all over the place. After a while the website wasn't exactly the most readable thing in the world. I knew what all those <div> tags were doing but anyone else would probably have had to think about it more. Thankfully HTML5 offers some semantic tags that can be used to make your HTML more readable.

A portion of my tags went from being <div> to <section>, <article>, <header>, <footer> etc...

Besides being readable to other developers who are itching to tell you how much you suck at making websites, it also allows other computers to more easily index the content on your site. Theoretically, this could affect your rankings in a search engine. That way more people will trip over your blog and let you know that it looks terrible.

Depending on if you're a jerk or not, you might want to use a semantic structure in your HTML to make your website more accessible to those who can't experience the web with the same ease that most of us can. Those who are visually impaired, people with dyslexia, people who navigate the web with voice commands often have to use assistive software that is greatly assisted by these kinds of tags.

Keeping Things Uniform and Easily Readable

I didn't think it was a big deal that my main text content was 800px wide. I was wrong. The internet is pretty clear about that. So I dug into the much debated issue of how wide your content should be. You'd be surprised at just how many opinions are out there concerning line width and font size. No one seems to agree with each other with the exception that really wide is bad. After reading too much about all this I settled on approximately 80 characters in width. Why 80 characters? It was the last recommendation I read before I decided I couldn't read another word about it.

Another change I made was to my headers. They were centered while the content under them was left justified. Turns out that humans don't like it much if their eyes have to jump around the page in order to get a sense of what they are looking at. I decided to keep the headers and the content left justified, while centering the column they are contained within.

Meta tags

Have you ever posted an article no one will ever care about on your Facebook wall and found that the post has no image and the headline doesn't match the page? It's possible the author of that article doesn't have the proper meta tags in place.

Meta tags allow you to specify metadata in the header of your HTML document. Metadata can include things like the title of the website, the author, the character set, the language the site is in and many more things.

This data is helpful to search engines and other websites that scrape, display, index or do some other thing with your website and it's content. If you want your blog articles to be displayed on Twitter or Facebook properly, there are specific attributes you can add to the meta tags so social media sites can display the proper elements in the proper places in your post.

Here is a list of the meta tags available to you from Facebook. Also, here is a similar list of meta tags from Twitter.