elliotec | Mike Elliott, a software engineer building projects and writing posts.

Introducing my "now page"

2023-11-13T00:42:00-07:00

What’s a now page?

It’s a movement started and popularized by Derek Sivers - learn all about it at this link. In short, it’s a page that tells the world what’s going on with me at this point in my life. I’m using it as double duty for it’s own sake as well as for an “about” page for now, but that will come too eventually.

Why now?

I’ve been wanting to update my site for a while, and meaning to do the now page in particular since I found out about it in like 2016. Now that I have some motivation and help with childcare, the time is right for updating this site, and a now page seemed like a natural place to start because a lot of time has passed since my last post here.

Where is it?

My now page will have a permalink at elliotec.com/now. The first update ever goes out today with this post, and I don’t know if or how I plan to archive updates to it (aside from git I suppose), so I’m going to post the contents of the first update below.

First update:

Updated November 12, 2023, from my home in Salt Lake City.

Work

For my day job, I work as a Director of Engineering at ezCater, the largest online marketplace for catering and corporate food solutions. I’ve been in this role for a bit over a year now, and it’s a blast.
My primary focus is overseeing the Demand Product Engineering organization building the ecommerce marketplace, ML-powered recommendation engines, and account management tools for our highest value customers.
I spend most of my time setting and communicating the vision for technical strategy on company product development goals, their execution plans, portfolio stewardship, and org design.
I work remotely and go to the headquarters in Boston for a few days every couple months.

Home

My wife and I (and a bunch of contractors) completed a major house addition and remodel. We started design in mid 2020 and moved in early 2023. It took longer and was more expensive than expected, but we are very happy with the result.
We have a daughter! She’s 2 now, and the best thing in the world. This is the realest reason why I haven’t made any posts on this site lately. She’s where I spend most of my time, but it’s time well spent. We had an Au Pair from Germany move in a month ago to help out, and it’s been amazing.
We’ve been traveling a ton. Roughly 12 countries in Asia, Europe, and Oceania, and about the same number of US states over the past few years. Covid lockdowns and living in a very small house with 2 dogs, a cat, and a baby during the remodel gave us some serious cabin fever.

Self

I’ve been studying German in earnest for the last 5 years. I’ve had a teacher from Vienna during this time who I’ve been meeting with weekly. I’m relatively fluent now. My wife’s family is from Austria and Switzerland, so they all speak German, and we’re teaching it to our daughter.
I started the Keto diet in mid-2022 for brain health and lost a bunch of excess covid weight too. It remains my primary diet, though I ditch it now and then for vacations and special occasions.
I’ve been working with a personal trainer over the past few months to improve strength and especially mobility, inspired by reading Peter Atilla’s book Outlive.
I’ve taken most of the month of November off of alcohol, until Thanksgiving. I do this once or twice a year. It’s a lot easier with the buddy system, and my friend Shaine has joined me this time.
Oneironautics - I’ve found a renewed interest in dreams and lucid dreaming lately, inspired by the books “Dream Yoga” and “Exploring the World of Lucid Dreaming”. I’ve made a lot of progress and use the app Shape as a helpful tool for dream journaling and state checks.
I got a bunch of cool tattoos :D

Hobbies

Pickleball! A group of friends have been playing roughly weekly for most of this year. It’s super fun and we’re getting better.
My Synology NAS. Inspired by my previously mentioned friend Shaine and the idea of Tech Independence, I’ve been developing and improving it, usually with Shaine’s help and not enough documenting of the process, for a few years. I use it for a number of things, including:
- A file store, network-wide accessible media server, and Dropbox replacement, including auto-uploading pictures from my phone
- A note-taking center, Second Brain style (with Neovim,Vimwiki, and 1Writer)
- Self-hosted privacy front ends for Youtube and Google with Invidious and Whoogle
- Pi-hole for network-level tracker and ad blocking, DNS sinkhole, and DHCP server
- An RSS/Atom feed aggregator and reader with FreshRSS
- A Minecraft server that my friends wanted but haven’t used yet
- Nginx Proxy Manager so all these things can have domain names and SSL within my network
- Surveillance Station with Reolink PoE cameras for my home security system
- My primary email server, and hopefully soon personal calendar as well
- Not yet hosting this site, but that’s the next goal
OneWheel. I got a Pint early-pandemic, and recently upgraded to the GT as a birthday present from my wife this year. I love that thing. I have clocked about 150 miles on it in 2 months, and counting. It’s like snowboarding (my winter hobby), but you can go uphill and all around the city.
Music. I play guitar or drums almost every day that I’m home, and started self-directed piano courses with Flowkey. I travel a lot and have been thinking about portable ways to make music, carting around my harmonica before realizing I’m in a hotel room and nobody in the building wants to hear that. I’ve started playing around with Garageband on the iPad and would like to see where I can get with it.

Reading

Recently finished the audiobook for The Five Dysfunctions of a Team for work
Constantly referring to Team Topologies at work
Started listening to the Children of Time series (again) at my wife’s persistent request
Started reading The Art of Doing Science and Engineering (again) with more diligence
Began flipping through physical copies of Unflattening and The Book
I started using Libro.fm for audiobooks to replace Audible, and my Kindle library is so huge it’s daunting to look for an alternative for e-books but I want one.
I also want to start updating and reviewing on my Goodreads account again, maybe I’ll get around to it.

This website

This website has existed roughly in it’s current form for over a decade. I’ve had a bunch of thoughts around building my own SSG for the sake of it, but honestly the current set up is still working very well and it’s tough to justify a change. Maybe I’ll do some design updates, and definitely will move the server to my NAS from Digital Ocean. Other than that, I’m going to try to update this page and make more posts. See ya soon!

Can't end 2020 without a single blog post!

2020-12-31T23:11:00-07:00

So here it is.

Greenery - A Bash script to get all the green squares on Github

2019-03-20T14:52:00-06:00

Get that green

Heh, 4,303 contributions? Yeah…

I remember when first starting out in development, people would tell me that hiring managers and recruiters really cared about those little green contribution squares on Github. It shows how active you are, they said. The more squares you have the better, they told me.

At first I believed them and genuinely tried to commit code near-daily to make sure my public image at least seemed prolific enough to be noticed. Pretty quickly I realized how easily this could be automated. I didn’t think much about how to do that yet, and it felt a bit dirty, especially when I was looking for my first dev job.

With a bit more experience and a few fewer shits to give, I figured I’d give it a shot for a little scripting practice and fun.

Greenery

The first thing I needed was some content to actually commit. The obvious choice was Unix’s fortune, which generates a psuedorandom quote based on parameters you give it. I used shorter fortunes for commit messages and longer ones for the file contents.

Then I needed to write the script to automatically generate the files based on the fortunes, commit a random number of changes daily (for the different shades of green on the squares), and push them to a Github repo. Nothing a tiny bash script and cron job can’t handle.

There are 6 files involved in this:

README.md - totally unnecessary. I just use it as a disclaimer to make it clear I’m bullshitting.
.gitignore - absolutely essential to ignore the file which contains your Github credentials, in my case push.sh
file.txt - the only file that ever changes, contents are replaced by the fortune command on each commit.
committed.sh - the file that generates the fortunes, replaces the contents of file.txt, and commits up to 23 (but no fewer than 1) changes.

#!/bin/bash
NUMBER=$(($RANDOM % 23))

for ((run=1; run <= NUMBER + 1; run++))
do
  echo `/usr/games/fortune` > ~/greenery/file.txt
  /usr/bin/git -C ~/greenery/ add . -A
  /usr/bin/git -C ~/greenery/ commit -m "`/usr/games/fortune -sn 32`"
done

push.sh - the file that runs the commited script and pushes to Github with your credentials. Do not commit this file.

#!/bin/bash
bash ~/greenery/committed.sh
/usr/bin/git -C ~/greenery push -u https://{MY_GITHUB_USERNAME}:{MY_GITHUB_PASSWORD}@github.com/{MY_GITHUB_USERNAME}/greenery.git master

cron.txt - this is a reference file for the actual cron job run by my server which you can edit in a Unix environment with crontab -e. Look up how to write cron jobs, here you see I have mine running on the 20th minute of the 16th hour of every day 🔥

20 16 * * * bash ~/greenery/push.sh

That’s it. Super tiny, totally works, totally tricked a recruiter or two maybe.

Here’s the repo for reference.

Building a non-boring 404 page with CSS animations

2018-10-12T11:17:00-06:00

Check out the 404 page in action

Every site should have a custom 404 page

Don’t you hate it when you hit a dead end on a website and you get the ugly and menacing default 404 page? Well yeah it’s usually not that big of a deal but it’s always nice to see something a little more creative. I wanted to make a 404 page that wasn’t boring but also not too gimmicky. There are a bunch of clever ideas for these error pages, so I thought I’d throw in my own take.

CSS animations are hard

I’d been a front end developer for a while, but hadn’t spent much time with CSS animations and they always seemed like a good skill to have at least a baseline knowledge of. Most of the applications I’ve developed haven’t needed much animation aside from a little transition here and there or using a JS library so I wanted to learn how they worked in raw CSS. The 404 page was the perfect opportunity. Turns out they’re more complex than I expected!

I didn’t really have any ideas on what I wanted to do, so I just started drawing a face in CSS. Another thing I hadn’t done before was create “art” with just HTML and CSS so this was really interesting to me if still very rudimentary. After drawing the face, I wanted to see how I could animate it making facial expressions. That was not easy. I had big ambitions to make the face smile and frown and laugh and cry, but I ended up keeping it simple and having them open and close their mouth in the form of saying “wow,” while shifting their eyes around.

Then I needed a background. I looked up something like “space CSS animations” and found something to go off of that I could create the illusion of flying through the stars.

Then it all came together and I animated the face bouncing around the screen, flying through space going in and out of view using different transition techniques. It was fun and funny! So here’s how I did it.

The routing

First, I had to make sure that any page that is not found will redirect to this page. It’s pretty straight forward with Nginx.

In /etc/nginx/sites-available/elliotec.com:

server {
  # a bunch of other config in here...

  location / {
    try_files $uri $uri/ =404;
  }

  error_page 404 /floatin-in-space/index.html

  location = /floatin-in-space/index.html {
    root /srv/www/elliotec.com/;
    internal;
  }
}

The project code

In elliotec.com/floatin-in-space/index.html:

<style>
  body{
    background: black;
  }
  .headwrap {
    padding: 1em;
    -webkit-animation: shrink 8s ease-in-out infinite alternate both;
  }
  .head {
    height: 30em;
    width: 25em;
    border: 1px solid black;
    border-radius: 50%;
    background-color: #ffe0bd;
    -webkit-animation: spin 7s linear infinite;
    margin: 0 auto
  }
  .right-eye, .left-eye {
    height: 3em;
    width: 3.5em;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
    background-color: white;
    -webkit-animation: bounce .5s ease-in-out infinite Alternate both;
  }
  .right-eye {
    top: 8em;
    left: 6em;
  }
  .left-eye {
    top: 5em;
    left: 15em;
  }
  .left-pupil, .right-pupil{
    height: .6em;
    width: .6em;
    background: black;
    border-radius: 50%;
    position: relative;
    top: 1em;
    left: 1em;
  }
  .nose {
    position: relative;
    margin: auto;
    top: 7em;
    width: 4em;
    height: 3em;
    transform: rotate(95deg);
    -webkit-transform: rotate(95deg);
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  .mouth{
    height: 1em;
    width: 11em;
    border-radius: 50%;
    border: 1px solid black;
    position: relative;
    top: 11em;
    left: 7em;
    background: black;
  }
  @media (min-width: 700px){
      .mouth{
          -webkit-animation: open 2s ease-in infinite Alternate both;
      }
      section {
          -webkit-animation: rise 5s linear infinite alternate;
      }
  }
  @-webkit-keyframes bounce{
    0% {
      transform: scale(.7);
      -webkit-transform: scale(.7);
    }
    50%{
      transform: scale(1.3);
      -webkit-transform: scale(1.3);
    }
    100%{
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }
  @-webkit-keyframes shrink{
    100%{
      transform: scale(.01);
      -webkit-transform: scale(.01);
    }
  }
  @-webkit-keyframes open{
    0%{
      height: .5em;
    }
    50%{
      height: 5em;
    }
    100%{
      height: 8em;
    }
  }
  @-webkit-keyframes spin{
    100%{
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rise{
    from {
      margin-top: 0;
      margin-left:-80%;
    }
    to {
      margin-top: 50%;
      margin-left: 80%;
    }
  }

  body, section, .stars {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .stars {
    background: radial-gradient(2px 2px, #ddd, rgba(0,0,0,0));
    background-size: 200px 200px;
    animation: zoom 4s infinite;
    opacity: 0;
  }

  .stars:nth-child(1) {
    background-position: 50% 50%;
    animation-delay: 0s;
  }
  .stars:nth-child(2) {
    background-position: 20% 60%;
    animation-delay: 1s;
  }
  .stars:nth-child(3) {
    background-position: -20% -30%;
    animation-delay: 2s;
  }
  .stars:nth-child(4) {
    background-position: 40% -80%;
    animation-delay: 3s;
  }
  .stars:nth-child(5) {
    background-position: -20% 35%;
    animation-delay: 4s;
  }

  @keyframes zoom {
    0% {
      opacity: 0;
      transform: scale(0.5);
      animation-timing-function: ease-in;
    }
    85% {
      opacity: 1;
      transform: scale(2.8);
      animation-timing-function: linear;
    }
    100% {
      opacity: 0;
      transform: scale(3.5);
    }
  }
</style>
<body>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <div class="stars"></div>
  <section>
    <div class="headwrap">
    <div class="head">
      <div class="right-eye">
        <div class="right-pupil"></div>
      </div>
      <div class="left-eye">
        <div class="left-pupil"></div>
      </div>
      <div class="nose"></div>
      <div class="mouth"></div>
    </div>
    </div>
  </section>
</body>

And that’s it. Good times.

How to Find and Replace Project-wide in Vim

2018-04-13T18:03:00-06:00

The problem

Sometimes one finds themselves with a need to search and replace some text throughout many places in a project. This often happens during a refactor, or when you made a mistake with a CLI code generator (like rails scaffold), and you accidentally misspell something.

In most modern IDEs, “find and replace all” is pretty simple - highlight the text, Ctrl-Shift-F, enter the new text, and hit enter. As you know, Vim does things a little differently.

You probably are already aware of how to find and replace all text within a file: : %s/text/newText/g - “within this file, find all instances of text, and replace it with newText.”

But doing so in multiple files at once with just one or two commands has proven difficult until Vim 7.4.8 released the :cdo and :cfdo commands. NeoVim with FZF and Ag makes it even easier.

The solution

Setup

Make sure you’re using Neovim (or Vim 7.4.8+, but really just use Neovim)
Install FZF for the command line and as a vim plugin
Install Ag, so that it’s available automatically to FZF in vim
If using iTerm2 on OSX, set the alt/option key to Esc+

Usage

Search the text you want to change in the current directory and it’s children with :Ag text
- Keep typing to fuzzy filter items
Select items with alt-a
- Deselect items with alt-d
- Tab and Shift-Tab will toggle individual items in the list
Enter will populate the quickfix list
:cfdo %s/text/newText/g | :w will substitute all instances of text with newText that you have selected, and save each file.
Rejoice.
- You can also make a macro to do cool stuff with :cfdo rather than just substitution like :cfdo {doCoolStuff} @a

Thanks to Github user @trevordmiller for tips on this.

A Hacker News Reader For No Reason - In 5K of Vanilla JS, HTML, & CSS

2017-11-18T13:23:00-07:00

The title is only half true.

The other night I was thinking about how my experience being fully entrenched in React and the modern JavaScript ecosystem lately might have influenced how I’d write an app by hand in vanilla HTML, CSS, and JS with no libraries or anything.

Within the same hour I was looking at Hacker News and some of it’s reader clients, noting how they all kind of sucked as far as UX (including HN itself - only recently adding comment collapsing and mobile support), and discovered the Hacker News API.

Clearly this presented an opportunity to build my own HN reader in the lightest way I could - fully client side, no libraries, totally vanilla.

So I did it in 2 files, 99 lines of JavaScript, and 99 lines of HTML/CSS.

The files will automatically go through my build script since they’re hosted on this site (as explained here). The JS is only 4.4 KB in the first place, but minifying it and gzipping it brought it down to 1.5 KB which is pretty significant. The HTML file is 3.5 KB minified and gzipped.

I’ll save you the arithmetic, that’s a grand total of 5 KB on the initial load.

Go to A Hacker News Reader For No Reason!

Features

Gets the top 30 stories in order with their points, just like the front page of HN.
If the story has a URL, the title will take you to a new tab with the URL, otherwise it will toggle the text content of the story (like Ask, Show, Jobs, etc.).
If the story has comments, there’s a link to toggle the comments.
Each comment and their children are collapsible.
There’s a link to the original story on HN, and to the user that submitted the story or comments.
Looks decent on all devices.
Super tiny and pretty fast.

Limitations

Since I’m using modern ECMAScript features, only more modern browsers will support it, but most of my audience is probably fine with that.
It only shows the top stories - no support for New, Ask, Jobs, etc. unless they’re on the front page. This is not a limitation to me personally since I spend 99% of my HN time just on the front page.
No login, upvote/downvote, or posting functionality. Unfortunately the HN API doesn’t support this yet, but if/when it does, maybe I’ll try to get all that in with another 99 lines :D
I’m not a designer. This was styled with my typical aesthetic of a minimal dark theme with green all over. Probably not everyone’s favorite but certainly mine, and it’s mine, so whatever.

The Code

I wrote the styles in a <style> tag in index.html. Since one of the goals I had with this was to keep it super small and light, I characteristically set an arbitrary limit of lines for myself at a number I figured seemed reasonable to finish it within.

I fudged some of my usual code style guidelines and there were a few times I disrespected the 80-character line rule I prefer to abide by in order to hit the 99 line mark in both files, but nothing too crazy and I’m not crossing any hard bad-practice lines.

You can check out the repo here - but since it’s only 99 lines, I’ve posted the contents of JS file below.

Note the use of several ES6+ features and the resemblance to React and JSX with the templating. Of course, there’s no fancy Virtual DOM or anything here and it’s simply manipulating the DOM as needed. I’m using functional and immutable patterns where applicable, in the parlance of our time.


const hnBaseUrl = 'https://hacker-news.firebaseio.com/v0'
const state = {}
function fetchTopStories() {
  const topStoriesUrl = `${hnBaseUrl}/topstories.json`
  return fetch(topStoriesUrl).then(response => response.json())
    .then((data) => fetchStories(data))
}
function fetchStories(data) {
  const topStories = data.slice(0, 29)
  const storyIds = topStories.map((storyId) => {
    const storyUrl = `${hnBaseUrl}/item/${storyId}.json`
    return fetch(storyUrl).then((response) => response.json())
      .then((story) => story)
  })
  return Promise.all(storyIds).then((stories) => {
    state.stories = stories
    renderStories(stories)
  })
}
function renderStories(stories) {
  return stories.map((story) => {
    const userUrl = `https://news.ycombinator.com/user?id=${story.by}`
    const storyItemUrl = `https://news.ycombinator.com/item?id=${story.id}`
    const html = `
      <div class='story' id='${story.id}'>
        <h3 class='title'>
          ${story.url ? `<a href='${story.url}' target='_blank'>${story.title}</a>`
            : `<a href='javascript:void(0)' onclick="toggleStoryText('${story.id}')" >${story.title}</a>`}
        </h3>
        <span class='score'> ${story.score} </span> points by
        <a href='${userUrl}' target='_blank' class='story-by'> ${story.by}</a>
        <div class='toggle-view'>
          ${story.kids ? `
            <span
              onclick="fetchOrToggleComments('${story.kids}','${story.id}')"
              class='comments'
            > [toggle ${story.descendants} comments] </span>`
          : '' }
          <a href='${storyItemUrl}' target='_blank' class='hnLink'>[view on HN]</a>
        </div>
        ${story.text ?
          `<div class='storyText' id='storyText-${story.id}' style='display:none;'>
            ${story.text} </div>` : '' }
        <div id='comments-${story.id}' style='display: block;'></div>
      </div> `
    document.getElementById('hn').insertAdjacentHTML('beforeend', html)
  })
}
function toggleStoryText(storyId) {
  const storyText = document.getElementById(`storyText-${storyId}`)
  storyText.style.display = (storyText.style.display === 'block') ? 'none' : 'block'
}
function fetchComments(kids, storyId) {
  const commentIds = kids.split(',')
  const allComments = commentIds.map((commentId) => {
    const commentUrl = `${hnBaseUrl}/item/${commentId}.json`
    return fetch(commentUrl).then((response) => response.json()).then((comment) => comment)
  })
  return Promise.all(allComments).then((comments) => {
    state[storyId] = comments
    renderComments(comments, storyId)
  })
}
function fetchOrToggleComments(kids, storyId) {
  function toggleAllComments(storyId) {
    const allComments = document.getElementById(`comments-${storyId}`)
    allComments.style.display = (allComments.style.display === 'block') ? 'none' : 'block'
  }
  state[storyId] ? toggleAllComments(storyId) : fetchComments(kids, storyId)
}
function toggleComment(commentId) {
  const comment = document.getElementById(commentId)
  const toggle = document.getElementById(`toggle-${commentId}`)
  comment.style.display = (comment.style.display === 'block') ? 'none' : 'block'
  toggle.innerHTML = (toggle.innerHTML === '[ - ]') ? '[ + ]' : '[ - ]'
}
function renderComments(comments, storyId) {
  return comments.map((comment) => {
    const userUrl = `https://news.ycombinator.com/user?id=${comment.by}`
    const html = comment.deleted || comment.dead ? '' : `
      <div class='comment'>
        <span
          onclick='toggleComment("${comment.id}")'
          href='javascript:void(0)'
          id='toggle-${comment.id}'
          class='toggle-comment'
        >[ - ]</span>
        <a href='${userUrl}' class='comment-by'> ${comment.by}</a>
        <div id=${comment.id} class='comment-text' style='display:block;'>
          ${comment.text}
        </div>
      </div> `
    comment.parent == storyId ?
      document.getElementById(`comments-${storyId}`).insertAdjacentHTML('beforeend', html)
      : document.getElementById(comment.parent).insertAdjacentHTML('beforeend', html)
    if (comment.kids) return fetchComments(comment.kids.toString(), storyId)
  })
}
fetchTopStories()

There you have it. Maybe someone else will also find a reason to use A Hacker News Reader For No Reason.

Update 2018-03-04: This post has been translated into Russian at clipartmag.com

How to Get 100/100 Google Page Speed Score with Middleman and Nginx

2017-10-17T12:01:00-06:00

Everyone hates slow websites. Everyone likes fast websites.

I recently worked on a Google AMP (Accelerated Mobile Pages) project, which was created to mitigate bloated websites from being at the top of Google results on their mobile web index. I personally think AMP is a bad thing for us but that’s beside the point of this article.

The point of this article is that you can get a better user experience by just building websites that are fast, and you don’t need to use AMP. But if you wanted to, the methods in this post could also be a good starting point for getting your pages into AMP with minimal effort.

I use the static site generator Middleman for the front end of the website you’re currently reading, and host it on a Digital Ocean Droplet in an Nginx server, so I’ll give some examples of how I achieved the perfect score in the context of this blog and its stack.

Google PageSpeed Insights

Google PageSpeed Insights is a tool Google provides to score the speed of a website based on specific metrics including:

Avoid landing page redirects
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Enable compression
Leverage browser caching
Minify CSS
Minify HTML
Minify JavaScript
Optimize images
Prioritize visible content
Reduce server response time

I wanted a fast website, and I like to get 100% on things occasionally, so I set out on a quest to get elliotec.com the 100/100 score. So I got it. Now I’m going to tell you how to get it.

Page size

Before getting into any of these rules in particular, lets talk about page size in general. Make your codebase small. If you don’t need all of Bootstrap’s enormous CSS codebase loading on all your pages, use something lighter and customize up. If you don’t need a bunch of JavaScript on your page, like for a blog, then don’t put it on there. Having a few little fancy animations at the expense of hundreds of milliseconds is usually not worth it to a user. That said, if a core part of the brand or requirements put you in a place where heavy JavaScript is necessary, there are still strategies you can use to keep it slim and fast.

Client and Server Control

One thing you’ll need to get the 100/100 score is direct control of the front end assets and build tools around them. I used the static site generator Middleman to build this site with my configurations to increase the performance as much as possible. This website has virtually no JavaScript (other than the Squaresend plugin for email), but if I needed it I’d be handling it like the rest of my assets. Here’s the link to my full Middleman config.rb for your reference.

Additionally, you’ll need full control of the server hosting your files. I use Nginx on Digital Ocean when I want full control of my servers, and since it’s just static files I don’t actually have to setup a database or backend other than the Nginx piece which is where a good chunk of the work here is.

Breaking down the metrics

Let’s get into some details now.

Avoid landing page redirects

This first item is mostly self explanatory. You don’t want to land on a page and redirect a user as much as possible. This is relatively common when a desktop site redirects to mobile, and it is very expensive in terms of performance. If possible, build a site that is designed mobile-first and responsive to prevent necessity of redirects to mobile versions of the site.

Enable Compression

Here we already need control of the server. Since http supports sending compressed files over the network for faster transfers, we should take advantage of gzipping everything we can before it gets sent to the browser. It’s super easy to enable with Nginx and Middleman. In my global nginx.conf, I have:

#nginx.conf

http {
    sendfile on;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/x-font-ttf font/opentype image/svg+xml image/x-icon;
}

And in my Middleman config:

# config.rb
configure :build do
  activate :gzip
end

Leverage browser caching

Caching allows the browser to keep downloaded assets for a set period of time so that it doesn’t have to keep downloading the same files over and over. This is again quite easy to do with Nginx by setting expirations for different filetypes, like how I have in my local nginx.conf for this website:

#expiry map
map $sent_http_content_type $expires {
    default                     off;
    text/html                   epoch;
    text/css                    max;
    application/javascript      max;
    application/x-font-ttf      max;
    application/x-font-otf      max;
    application/font-woff       max;
    application/font-woff2      max;
    ~image/                     max;
}

server {
    listen 80;
    listen [::]:80;
    server_name elliotec.com www.elliotec.com;
    expires $expires;
    return 301 https://$server_name$request_uri;
}

You can also ensure you are caching only files that haven’t changed by setting unique asset hashes on the filenames, which is done in Middleman with a simple addition to the build config like so:

# config.rb
configure :build do
  activate :asset_hash
end

Minify assets

One of the more well known and simple page speed strategies is minifying your assets. Having a build step that minifies your HTML, CSS, and JavaScript is essential in modern web development, but it gets skipped a lot. You can drastically decrease your bundle sizes with minification. In Middleman, all you have to do is put a couple lines in your config.rb to do the work for you, like this:

# config.rb
configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :minify_html
end

The CSS and JS minification comes free with Middleman, but you’ll have to add gem middleman-minify-html for the HTML piece which you definitely want even though it wont be giving you as large of gains as the other assets.

Optimize images

Images are usually the most expensive files for a browser to download as far as size and speed, so this is one of the areas that you can get some of the most performance gains for the effort. To start out, you’ll usually want to have images at their lowest viable size and quality. Tools like Photoshop have the ability to do a lot of powerful work around this, but you can optimize them even more in a build step using a tool like imageoptim. Of course with Middleman this is pretty effortless. First you’ll want to add gem 'middleman-imageoptim', git: 'https://github.com/plasticine/middleman-imageoptim', branch: 'master' to your gemfile, then:

# config.rb
configure :build do
  activate :imageoptim
end

Nice, you just shaved a ton of weight off those heavy images.

Reduce server response time

Google has a pretty strict threshold on the acceptable server response time - keep it under 200ms. For a static site like this, that is basically a non-issue. If I were hosting dozens of server blocks on this same Digital Ocean Droplet, they could be fighting for resources and slowing things down so I wouldn’t recommend that. If you have a backend doing DB queries and such, there are numerous other reasons why your server could be slower than the 200ms threshold and you’ll definitely want to spend time analyzing and improving that.

Prioritize visible content

Prioritizing visible content means that the above-the-fold content should be small enough in size to not require additional round trips to the server in order to render. This can be done by doing things like loading third party scripts later, and generally keeping the above-the-fold content small and fast. A lot of the other items in here will help with this, but sometimes it’s really difficult to get this one perfect, especially if you have images as the initial visible content.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This is probably the trickiest item on the list, and it’s related to the previous one. There are a few strategies I used to get this one to pass. One, if you require third party JavaScripts or add the async attribute to all script tags like this: <script async src="main.js">, so that external JavaScript files aren’t blocking the loading and rendering of the other content and load asynchronously.

Then, inline your CSS and JS instead of making external resource calls to them. Doing this by hand would be terrible and ugly, but we have tools to do this for us. There’s a couple steps to get all your assets inlined on your pages.

You’ll first need to add sprockets (gem 'middleman-sprockets') to your app because we are hijacking Middleman’s asset pipeline.
Then in your config.rb add the inline: true hash to each minify build step like this:

# config.rb
configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
end

Last, in your layout template where you pull in your CSS (wherever your <head> tag is probably):

<style><%= sprockets.find_asset('site').to_s %></style>

and likewise for any scripts you want to inline, in <script> tags of course.

Finally, I was having a lot of trouble getting the Google Analytics script on my site to not be render-blocking. It was the last thing on the list that I hadn’t achieved, and I was pretty annoyed that I wasn’t seeing that 100/100 score. Since my real goal was the number, and it was clear that my site was pretty fast already, I found a silly hack online to trick the Page Speed Insights tool to ignore the Google Analytics script. If they can contradict themselves I figure I can do this, and You Can Too!

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
// Your Google Analytics Code Here
}

All done!

There ya go. If you followed the instructions in this post for your own self-hosted static site, you’ll get 100/100 score on Google Page Speed. The speed is what matters and that’s good for everyone using your website, and it’s also gotta be good for some SEO, right?

Join the discussion on Hacker News.

Update 2018-01-26: This post has been translated into Russian at HowToRecover.me

Update 2019-3-23: This post has also been translated into Uzbek by Transparent Cliparts

University of Utah Coding for Rookies course syllabus & notes

2017-06-24T12:58:00-06:00

This is a collection of notes on the 6 week course I designed for the University of Utah’s continuing education program in the summer of 2017.

Go to CodingForRookies.com

Visuify - the force-directed relationship graph with D3.js and Spotify

2017-01-30T22:13:00-07:00

I’ve always loved data visualization done well and admired interactive graphs and maps seen on The New York Times and elsewhere.

D3.js is a powerful data visualization library in JavaScript written by the former editor of the New York Times graphics department. It uses a jQuery-like syntax to create and manipulate interactive charts on the web.

I finally made an excuse for myself to take a couple days and learn what D3 is all about in the form of a web app that maps a force-directed graph of related artists to the artist the user inputs.

Play with Visuify!

Click the link above to play around with it. Open the artist page in Spotify by clicking the artist name above the chart and hovering, clicking, and dragging the nodes and links do stuff too.

The flow of the program is:

User inputs and submits the name of an artist
A query for the artist is made to the Spotify Web API
The artist is stored, and another request is made for that artist’s related artists
Each related artist to the original query is stored along with their relationships, and another request is made for the second degree of related artists to the original - that is, the related artists of each related artist to the original query
Nodes and Links are drawn by D3 with specified interactions and styles based on the objects built in the previous step

The most difficult part was structuring the data properly synchronously before executing D3 to draw the graph from it. I enlisted help from a few friends and my buddy Michal Scienski helped me get the promise chain to work properly, so kudos to him.

After the data structure was sorted out, it was pretty fast and fun to get D3 to do what I wanted with it. Between the excellent documentation and the creator’s examples, I was able to build most of the features and functionality I wanted in a couple spare evenings. It was quickly apparent how powerful D3 can be and how many useful applications it has.

Ideas for its future include routing by artist query and rewriting it in ES-Latest without jQuery or Lodash.

See the code on Github

Modules and Monoliths

2016-02-20T20:06:00-07:00

“Jack of all trades, master of none – though oftentimes better than master of one.” - Someone

The Full Stack Developer

Those words are met with controversy in the industry.

A lot of developers are quite annoyed with the term. They argue that it isn’t possible to be truly full stack, whatever their definition of “truly” might be.

They believe that mastery of a specific skill set within a software stack is more valuable than being decent at all of it. This can be true, especially in large corporations and enterprise systems with hundreds of developers that are assigned specific tasks and siloed by their specialization.

Mastering one specific language or piece of the stack certainly has many benefits. Masters of JavaScript have tons of knowledge about the quirks of the language and clever ways to get complex UIs to do their and the user’s bidding. Likewise with DBAs and data architects on the other side; structuring huge amounts of data and connecting the data by its relationships is quite an impressive feat.

But if the JavaScript master had to analyze and structure and join and relate tables, she feels out of her element and may seize up citing ignorance in all things non-JavaScript. The DBA might say, “this isn’t SQL.” And leave.

Some people take the love and science of the craft very seriously and aspire to reach sensei-level software mastery, and think this usually requires a specialization to get anywhere.

But looking at examples like David Hienemer Hansson and hundreds of other startup founders and programming legends, we can see that gaining that level of knowledge of the full stack is attainable and accessible and rewarding.

People can be modules or monoliths. Many choose specialization and corner themselves as “JavaScript Developers” or “Rails Developers.” My advice is to stay away from this and keep your options open with something like “software developer,” highlighting your experience in your preferred fields without removing yourself from opportunities to grow and gain new technical skills.

Some of the best career advice I’ve read came from Scott Adams which says that in order to become extraordinary, you have two paths:

Become the best at one specific thing.
Become very good at two or more things.

The first is almost impossible, so I’ll be sticking to the second.

People often tout the “T-shaped” metaphor for one’s skill levels, meaning that they have expertise in a vertical and the horizontal is the broad but lesser knowledge of other disciplines. I agree with this, and don’t see why it can’t be more common for someone to have an engineering vertical with for example, a strong business/operations/etc. horizontal. It’s definitely a thing, tons of successful founders of companies do exactly that. So why are the developers in the front end community isolating themselves into their own little specializations and modules that they spend lots of time learning and configuring?

The Full Stack Framework

This is why I still love Ruby on Rails, which turned 10 this year.

Rails created a layer of abstraction that eliminated much of the monotony, repetition, and difficult integrations that web development requires. Building, integrating, and distributing packages of functionality (gems) became a breeze. It made developing rich applications on the web much more accessible to people with or without programming skills, and drastically increased the speed of doing so.

I hear a lot of people that don’t like Rails give their primary reason for disliking it as “It’s just too much magic.” What the hell is that supposed to mean!? Who doesn’t love magic? Why would you want to waste time configuring things and wiring up stuff under the hood when you can scaffold and ship a product much sooner? Rails was built to remove the repetition of common architecture patterns, and did it very well. It baffles me that people want to redo this because they’re afraid of “magic.”

You still have to know a bit of HTML, CSS, and JavaScript to get your way around Rails, but you can take shortcuts with those too, like templating with ERB, using CSS frameworks like Bootstrap or Thoughtbot’s Refills, and of course jQuery, which has become startlingly rejected recently by a lot of the JavaScript community.

Some proponents of the full stack JavaScript world are attracted to the “one language to rule them all” idea, but most implementations of JS frameworks lack any structure or standardization or convention and take so much time to configure that shipping a product is arduous. (If you like the idea of developing entirely in one language, I recommend looking into Clojure and Luminus which is fast and expressive and uses some awesome truly full-stack patterns).

Ember is an outlier here, and deserves credit for taking a lot of the good ideas Rails popularized and put it in a JS framework with an amazing CLI tool. But unfortunately they don’t have marketing expert giants like Facebook (for React) or Google (for Angular) pushing the Ember framework, so naturally it gets pushed aside.

Stuff like Ember and Yeoman ease the pain a little bit sometimes, but the fragmentation and the dramatic fiasco that has become of the JavaScript framework/library/etc world is becoming a defining characteristic of the community. These frameworks inaccessibility often require that one be an expert just in JavaScript in order to properly implement. Why?

Full stack development is really just combining the concepts of “standing on the shoulders of giants” and “strategic laziness.” We take what we’ve learned from the past, and use it to strategically avoid decisions that have already been made and proven by people smarter than us.

Effort For its Own Sake

Many JavaScript frameworks are implementing patterns like MV-star or MVVM . They take the solid tried and true MVC pattern that most developers are familiar with and start scrambling up the acronyms and implementing them poorly and without conventions (I know MVVM was created before the JS frameworks, but the creator of the pattern has himself criticized it as a bad idea for these UI implementations).

Why are we spending time re-inventing the wheel under the guise of innovation and re-solving solved problems for its own sake?

SQL is another example. The problem of organizing data rationally and querying it was solved decades ago, and any worthy modern framework can interact with this data and create rich APIs if need be.

Yet the hot shit these days is NoSQL, which shuns decades of work for a markedly worse solution. This trend is very limiting, and any SQL DB can produce JSON anyway, so what is the point?

Servers are our friends

Single Page Apps are almost never necessary. Your users don’t care about two-way data binding or one-way data flow. I promise. Neither does your pointy-haired boss. They care that the data they are getting or posting is getting got or posted.

“Isomorphic” (which is quite a pretentious word for running on the client and server) JavaScript is an idea that removes the logical separation of client and server so that all the code is tightly coupled and stored together in a repo. This is an interesting solution to the problem that we are now having with SPAs bloating up and slowing down the browser by running the code through the server first and templating. This is, on the surface, a trend toward the monolithic architecture I’m touting in this article.

But, really it’s roundabout, difficult to implement, and adding complexity when we should be removing it. Like, how about just not using too much JS on the client and minimizing requests? People say it helps with SEO, but Google now crawls pages that are generated with JS, at least supposedly. If you want better SEO, don’t render all your content with JavaScript.

Data and content should be submitted and displayed by the client, and manipulated and stored on the server. This has worked well, and will continue to work well for the foreseeable future. Just sprinkle in the JS that is needed to make you’re app interactive and pretty and things will move along nicely.

Over-modularization

The Unix philosophy of “Do one thing and do it well” has been repeated to the point of overuse in the community, especially surrounding the React ecosystem. So React does the view layer well. Redux does the data flow well. Webpack does package management well, and Gulp or NPM scripts do build process well. And so on and so forth.

Well, Rails has many components that do their respective pieces well. Active Record does ORM and data handling very well. ActionMailer does email well. The asset pipeline does asset management well. And so on and so forth.

But guess what? Ruby on Rails does one thing, and one thing well, and that’s full-stack web development.

It’s also important to remember that Unix is a family of operating systems. Operating systems do many things, and do them well. One off the top of my head might be system operation. But each of the components do their own thing well to make the monolith of Unix the magical beast that it is.

Microservices, containers, and “anti-monolithic” approaches to architecture make sense occasionally, like when you work for Netflix or Spotify and have teams churning out features at enormous scale that needs multi-threaded asynchronous load balancing and all the jazz.

But unless you’re a specialist in whichever micro piece of the stack and are sticking to it(or if you’re an architect and setting this stuff up is your specialty), this type of architecture is daunting and will unquestionably turn into an unmaintainable spaghetti mess.

The fact is we are over-modularizing things. Every time I start a new JS project, I feel like I just moved into a new house with nothing but a screwdriver and a few thousand dollars worth of Ikea furniture -I’m excited so I tear open the boxes and get started but building the couch seems more fun than the bookcase and I just stripped all the screws of the wardrobe which was too heavy to lift by myself anyway and I really should start on my desk so I can build a computer to put on it and now I lost that screwdriver. Before I know it, I have a room full of shredded cardboard under a pile of partly-assembled furniture and the rest of the house is still empty.

What if I had the option of walking into my house totally furnished to my exact specifications and expectations at no extra cost?

That’s what I think of as what some folks like to call “monoliths.” I’m fine with that word. If convention means monolith than I prefer monoliths over modules, and I think it’s odd that so many developers want to be so contrarian about it. I get the whole rebel spirit of the industry and engineering culture, but historically it hasn’t been such a hodgepodge - it has continually moved towards conventions and layers of abstraction, so we can be more effective and efficient and get on with innovating (or in most of our cases, selling something).

I don’t want to have containers containing NoSQL interacting with modularized libraries inside their own containers. It’s gonna be slow to develop, and slow to load. I want a monolith that I can spend more time on making it do a better job at what it is and ship the damn thing.

Doing a project in React has such a huge learning curve and the sheer amount of modules and libraries one must connect and configure makes my head spin. There are seemingly infinite combinations of libraries and newest things you must know to actually ship something.

Some people love this constant stream of new stuff and learning, but even they are feeling the exhaustion.

My buddy shaine put it well -

Is there a way to just skip over react/webpack/es6 to the next big thing? I love those things, but theoretically I love the next thing more.
— Shaine Hatch (@ShaineHatch) September 14, 2015

It’s okay to love new things and be hungry for more learning, but I do believe that the lack of structure, conventions, and opinionated-ness is crippling the potential of what we can do, especially in the JS community. Not to mention the insane additions of features in ES6/ES2018/ES-whatever-we’re-calling-it-now.

Lets go back to convention over configuration.

The chaos of the ultra-modularized JavaScript (and relatives) community could be solved by coming together to develop some order and re-use, so we can use conventions that are shared by most instead of connecting and configuring one library after another to re-solve solved problems. Developers are not happy with this churn fatigue, and users are getting shittier experiences from it.

Maybe the full-stack naysayers are saying nay because they have spent so much time specializing on their thing that they find it impossible to be as good at doing all the things. If we standardized some conventions, more of us would be able to specialize on the entire stack, but only because we are really specializing on the layer of abstraction that does all the full-stack stuff.

We in the current state of the JS world are lacking the glue that holds the modules that make a magnificent, magical monolith. I’m talking about the ridiculous steps of getting all the moving pieces to work together. Let’s come up with ways to fix it.

Undoubtedly a large percentage of you reading this will say, “If you don’t like it fork it, fix it, or make a better one.” But not only do I have no desire whatsoever to do that, I also believe this mentality is possibly the biggest contributor to the clusterfuckification of the community.

I’m ranting, but I’m also here to offer solutions. People need to stop making JS frameworks, and people also need to stop writing self contained libraries that don’t conform to any standard but their own. Follow the examples of Rails and Django, and SpringMVC and even jQuery. Let’s just come together to pick a framework with a high level of abstraction, so we can make the magic happen by piggybacking on the magic the frameworks provide. It’s the future.

Teach Your Skills for Fun and Profit

2015-11-10T13:49:00-07:00

An age old concept

What do Alton Brown, Tim Ferris, Bob Vila, and Ryan Bates all have in common? You guessed it, they all made a small (or large) fortune off teaching the skills of their trade. They weren’t teachers initially, they were just pretty good at what they did, and thought teaching others what they knew could be beneficial to all parties. And it was.

Teaching your skills at any level can sharpen them dramatically and make you a decent side income. Longer term you may find it makes you more than a decent side income, and teaching becomes a skill in itself.

It has never been a secret that teaching is a great way to learn. The ancient Roman philosopher Seneca stated that, “While we teach, we learn”, two millennia ago. European schools started to have some version of teaching assistants or student teachers around the end of the 18th century.

There have been more recent pedagogic techniques focused specifically on having students teach to learn based on research that teaching is, in fact, the best way to learn.

Gaining expertise

In his book “The 4-Hour Workweek,” Tim Ferris famously (and controversially) outlines how to be come an expert in anything in four weeks and six steps. Read the book if you want to know each step, but let me give you a hint: at least half of them involve teaching.

Think about the times you’ve had to give presentations. It’s likely that you started out methodically when you found out you were going to do it, only to find yourself scrambling the night before and doing it in a few hours college-thesis-style. But you still learned a ton! Certainly more than the people that you were presenting for.

Turns out, studies show that even being told you will have to teach a concept later improves learning and recall significantly. Maybe those of us with high willpower can trick ourselves into this, but I recommend actually putting yourself in a teaching situation to get the full effect.

Tricking ourselves

We trick ourselves all the time into thinking we are learning. It’s quite a conundrum - how can we have a full grasp of an idea when we don’t know what we don’t know?

As Richard Rusczyk says, “Teaching removes this possibility of self-deceit.” This happens both by us preemptively gathering more information and knowledge in anticipation of our student’s lack of understanding or questions, and also by being put on the spot by those which were not anticipated at the time of teaching.

Teaching also happens to be an excellent cure for an endemic of the tech world: Impostor Syndrome.

Start teaching when you start learning

In an earlier post, I laid out the steps I took in getting a job in my current field of web/software development. It is notable that quite early in the process, I was getting paid to teach people what I had been learning, almost in tandem. I recall my instructor at the course I was enrolled in mention something in passing about learning by teaching and I really took it to heart.

I started a gig as a personal tutor for a Computer Science grad student at UW in Ruby on Rails before finishing the course, and then was an assistant instructor for the courses following mine. I believe these two jobs were an early immunization for the impostor syndrome I may have had if I didn’t do them. It might have been a little too far on the ego boost, but thats another problem.

Point is, I started teaching for purely selfish reasons - make money, and get learnt. (sorry)

That’s not to say I haven’t had lots of rewarding experiences teaching what I do. I was surprised at the amount of attention my post on how I got my job was getting, and how many folks emailed me that it was an inspiration boost, or they got into a course they’ve been excited about, or they got their dream job, etc. Knowing you’ve helped someone achieve something is a sweet feeling.

And I guarantee I learned more than my audience just by writing that.

“I know that I know nothing”

Since then, I’ve started working as a mentor for Thinkful on the weekends. This, plus being the development lead of a team at my full time spot gives me plentiful teaching, and therefore learning, opportunities.

I am consistently stumped by questions my students and teammates ask me. Sometimes it feels good when they have an easy question that I’m well prepared for, but that is rarely the case. More often, I’ll have to look up pieces of answers and help them and myself connect the dots.

Surprise! Thats what I do in my real life job anyway!

So, if you’re a blossoming developer or recent grad that is stuck in the awful, seemingly infinite loop of, “I need experience to get a job to get experience so I can get a job,” like me and so many have been in the past, try your hand at teaching. Some good places to start would be TA-ing for some classes, private tutoring, or even just blogging.

Or, if you’ve got tons of experience and are feeling a bit stale on your skills or just plain bored, try teaching! Some good places to start could be assisting at a university, private teaching facility like bootcamps, blogging, or best of all, be a true mentor for someone.

A true mentorship experience is hard to find without contriving it, but I have had some unbelievable mentors in my life that have been far more influential than they know, and have shaped me and my character immensely. I strive to be that person for someone else someday, but I may not even know it if it happens.

Being a teacher implies mastery of the subject even though to be a decent teacher you must acknowledge that the more you know, the more you realize you know very little.

It’s usually humbling. It’s often lucrative. And it’s always going to be a better learning experience for you than your student.

Other references and sources

The LdL Approach

Teach what you know

The Protoge Effect

Birth Order and Intelligence

Lesson Study Technique

Music, Art, & Web Apps in Clojure

2015-05-27T00:17:00-06:00

How I Got a Job in Web Development

2015-01-27T06:12:00-07:00

Why I’m writing this

This post is an attempt to explain how I got a position as a professional web developer with just over a year of experience programming and a degree in psychology. I’m writing in hopes that it will help anyone else along a similar path, or those who don’t know where to start. This is by no means a surefire plan to get anyone a job in a year or ever. But maybe someone aspiring to become a web developer can take a few resources or find something useful here.

If you want to skip to a summarized list of things I did, click here to cut to the chase. But you might want to come back and see the rest of the story to fill in the details.

My first exposure

As far as I knew growing up, the Internet was made out of magic. I had taken apart my family computers out of curiosity a few times but had never heard of HTML, or pondered the concept of what software development really was. Most of the technical experience in my life was my enjoyment of building and breaking things, playing with Knex and Erector sets, and growing up with the Internet. Just after high school I was lucky enough to land a job as a contractor for my neighbor soldering circuit boards and electronics for various products he made.

That was a pretty cool job, but it certainly didn’t make me want to study electrical engineering. I went into psychology thinking it would supplement my intent of going to medical school and becoming a psychiatrist. That dream died fast for numerous reasons, and I ended up rushing to finish my degree ASAP. I then started work at Starbucks in addition to helping out the neighbor with soldering and testing his products after leaving my student job upon graduation.

That same month I learned about Linux and decided to install Ubuntu on an old Dell I inherited from my parents. In order to get things installed and working properly I had to open the command line and actually use Unix commands, some of them often enough to start understanding what they did and remembering them. I was just getting into Minecraft at the time and wanted my girlfriend to play with me, and I figured with a little googling it would be easy enough to setup a local server on that Ubuntu machine. It was, and I consider that my first real and aware exposure to programming.

Finding the time

Over the next few months I dabbled in various tutorials on HTML and CSS recommended by Reddit but struggled finding time and motivation to just sit down and get through them. I attempted to complete the Codecademy courses multiple times but found them boring and purposeless. The idea sort of went to the back burner as I worked full-time, moved into a new place, and wanted to relax and enjoy my time off. I was doing just that at the climbing gym on June 1st when I clumsily stumbled off the mat at the base of the wall and dramatically broke the cartilage in my ankle. Somehow I didn’t need surgery but the doctor said it had to be non-weight bearing for 12 weeks.

So I called my boss and broke the news, she reminded me of one of the benefits of working at Starbucks: Short-term disability insurance. It got signed off no problem. The first couple weeks were mostly spent sleeping away the pain and playing through various video games, pretty much just lazing around. But one day when the Lortab wore off I was feeling very unproductive and lazy, so I decided to set a goal of getting through those HTML and CSS Codecademy courses the next week. At the same time we moved into my girlfriend’s parents’ house while they were abroad so that eliminated rent and some other expenses for the few months I was out. My girlfriend also deserves a lot of credit for working and helping me out during this time. I became acutely aware of how fortunate I was to be in a position where I was essentially getting paid to chill at home and have 3 months of free time to spend however I wanted.

This awareness led me to feel like I owed it to karma or whatever powers that were to spend a good chunk of my time out on productive endeavors and keep setting goals like the Codecademy one. I blew through those courses, still feeling annoyed with their seeming lack of purpose and context, but appreciated the introduction to something I knew I wanted to spend more time on.

Learning front end fundamentals

I soon asked the almighty Google for some more of the top HTML & CSS resources. It wasn’t long before I saw the book, aptly titled HTML & CSS, by Jon Duckett. I chose this book almost exclusively based on the way it looks. The design wowed me, and the content was just what I was looking for. Rather than the piecemeal abstractions and micro lessons on Codecademy, I found Duckett’s book to be a refreshing whole-picture approach with real world examples. I went through it in a week and built a custom, useful website from scratch for the first time the following week. I credit this book with teaching me a lot of the foundational knowledge I needed to learn further concepts and build upon. (Duckett has since published another book that I highly recommend, and wish I had at this time: JavaScript & jQuery.)

My next step was to search through my network for advice. I thought of everyone I knew, went through my Facebook friends, and found someone I could contact that was involved in the industry. So I messaged him and told him about my interest and quickly got a response. He happened to be in a senior position at a very well known company but took the time to give me a little project to work on with a loose deadline. Still being in the first third of my confinement to the couch, I was able to spend two weeks working exclusively on this. I learned a lot about modern best practices and got some great career advice.

Rails and a development environment

At this point I felt comfortable enough to tell my friends and family about my pursuit, and let them know that I was looking for work and projects. A good friend gave me the login to a tutorial series called One Month Rails he bought but never found time for. I certainly had time for it, so I did it.

This tutorial introduced me to a vast world that I’d never seen before. It guided me through setting up a development environment that consisted primarily of Sublime Text and the command line, and helped me get a bunch of other tools set up. I learned about version control and git (and by extension, Github) through repetition in the course, and got a grasp on most aspects of the tech stack in Rails. I finished it in about 2 weeks and had a fully functioning app replicating Pintrest, hosted on Heroku.

I used jQuery a little bit during the tutorial, which was a nice intro to JavaScript. I realized how useful and necessary it is and wanted to use some other plugins in my future projects.

Starting a freelancing business

I was super excited about programming and my new prospects for income. I decided I wanted to start a freelance business doing this, and my first step was getting some more projects and clients. The first few were not as hard to get as I had been led to believe. My family and friends already knew I was doing this, so I asked some of them if they needed a website.

Then, the neighbor who I worked for offered to pay me to make the website for company. I jumped at the idea and finished it in a few weeks, referring back to the books and tutorials, coming out having learned quite a bit.

After that, I did one for free, one as a trade, and then started charging (not very much). My first three clients were close friends or family, and after that I indiscriminately offered my services to anyone and everyone. One of my first non-family/friend clients was an HVAC contractor that was fixing the furnace in the house I was renting at the time. He saw me working on a different project, asked what I was doing, and told me he needed a website. I gave him a cheap quote, and promptly had another check in my pocket.

It was time to legitimize my business; I had started making enough money to open up a bank account and register a sole proprietorship. I finally got around to making myself a (pretty rudimentary) personal website and got my girlfriend’s help in designing a logo in Illustrator. We designed business cards at the same time and got a cheap bulk order from FedEx. I still use them and they look like this:

Little did I know that these cards would be instrumental in getting me my current job.

Expediting my learning

I continued to get a client here and there after my ankle had fully healed and I started work again part time at Starbucks, and a little for my neighbor. It wasn’t enough to pay the bills though, and at this point I was dedicated to becoming a professional web developer. I looked around for some dev roles in my area and came up short. Most required a level of proficiency that I wasn’t totally confident I had.

I mentioned to the same friend who introduced me to the Rails tutorial that I wanted to somehow expedite my learning to get to a professional skill level. He told me about these code schools that had been popping up around the country taking after the tech company incubator model and their apparent success. He had been working at a venture impact fund, and was tasked to get information about these schools for possible investments. He emailed me a spreadsheet with some basic info about each code school he looked into (which was immensely helpful) and I did my own research on which would be the best for me.

That October, after much deliberation I decided to apply to Code Fellows in Seattle. I chose this particular code school mainly because they guaranteed a job in software development within 9 months or I paid nothing. Another reason was its relatively low price compared to some of the others like Hack Reactor, which at the time I was applying was more expensive than grad school plus the cost and hassle of moving to San Fransisco. Also, I had never been to Seattle and was in great need of an adventure to a place I had heard only good things about.

The application and interview process was pretty intense. After an initial application assessing my skills and aptitude I was moved on to another stage that required a submission of a one-minute video of me explaining “something technical.” I chose jQuery and probably did it 10 times before feeling I had done an adequate job. I soon got another email requesting a time for an interview, and I got on Skype with the CEO at the alloted time.

The interview was absolutely terrible. There were connectivity issues which amplified the fact that I had absolutely no clue what I was talking about. He was asking me questions about data structures and algorithms and how I’d model real life objects and items in code. I found myself literally speechless multiple times during the call. I had a few acceptable answers but mostly it was pretty embarrassing and I was sure I wouldn’t move further. But he must’ve had some faith in me, and said he’d send me a code challenge to complete as soon as possible.

It was a Friday, and I started working on it immediately and through the weekend. It was very challenging. There were three individual challenges - they went something like this:

Make a simple page to manage a todo list where users can input todos and check them off upon completion.
Model a public library with object oriented Ruby including Library, Shelf, and Book objects that has “enshelf” and “unshelf” methods and essentially keeps track of inventory.(The actual description was way more technical for this one.)
Generate and deploy a publicly available Rails app on Heroku that can create, edit, update, and destroy users. First name is required, and email must be valid. Add more features if it was easy.

The first challenge was not too difficult for me, because I’d been doing front end the most up to that point. I recall getting slightly hung up on a piece of the problem, but I think I solved it in the first night after the interview.

I then skipped to the third challenge knowing number 2 would take me much longer. There were a few tricky parts, but I made it work with time to spare for a quick Bootstrap UI and some funny pictures. You can find the code for that app here on my Github.

And finally, the public library. This was by far the most difficult part of the challenge and up to that point the most complicated programming I’d been tasked to do, and it’d be a long time before I did anything that difficult again. This is the point where I realized that I’d been learning Rails without hardly learning any Ruby at all - hence the namesake “on Rails.” I was determined to submit the challenges by Monday, and was sincerely worried that wasn’t going to happen when I read the description of the challenge. So I immediately started looking around for tutorials that would help me with plain Ruby. I did CodeSchool’s Try Ruby which was introductory and ultimately not very helpful when it came to what I was trying to accomplish.

I came across Ruby in 100 Minutes which is quite different now than when I used it as a resource. At the time, it modeled a personal chef that made things for you, and the resulting program looked like this. It still is probably worth reading through, but it doesn’t seem quite as helpful for writing a real Ruby program as it used to be.

After going through that tutorial, I perused Github looking for real world examples I could use to model my program after. I found about 5 or 6 that I looked at several times and sort of made the brain connections I needed to translate into the public library. It took me from Saturday night until Sunday night to do this whole thing, and with minimal to zero sleep (I don’t think this was necessary, I probably would have been fine if I took another day, but I was determined). This is how it turned out.

Code Fellows

A bit to my surprise, I got in, and bought a one way ticket to Seattle arriving the day before the start of my cohort on January 6th. Finding a place to stay wasn’t terribly difficult (but it was pretty expensive compared to what I was used to in Utah) and I signed a 3 month lease in a tiny 10 x 10 apartment about a 20 minute walk from their facility.

The first day started out with a little bit of housekeeping/logistics, but then we were immediately thrown into the fire. So many things to configure and download, all in a whirlwind couple hours. Before the end of the day, we started our first assignment on behavior driven development in Rails. It was immediately and continuously super intense.

I learned a lot during my time at Code Fellows. I was spending no less than 100 hours a week totally immersed in code and the community. I would barely have enough time to take off my shoes at the end of each day before immediately passing out from expending all the energy I had.

The curriculum itself was very rigorous (most of my projects and assignments can be found on my Github if you’re interested), but I feel some of the material we were taught was not as impactful to me as what I learned from interacting with my peers and instructors and going to meetups almost every night, brushing elbows with some of the biggest names in the tech community and absorbing everything I could from everyone I could. I also had a great mentor from a local startup that really helped me tie a few loose ends in the directions I was heading.

Another really useful aspect was the increasing of our web presence. I never had a Linkedin account up until then, which I had come to find out is an absolutely essential tool in job searching. There was staff there tasked with helping us maximize the efficacy of our web presence and resumes, and doing mock interviews both technical and general.

During the course I was contacted with a few contract opportunities that I took, even though I really didn’t have the time. One was as a personal tutor for someone with a MS in computer science learning Rails in a certificate program at UW. I had minimal credentials, and I got paid the most money I’d ever charged up to that point to help a comp sci grad student. This put things in an interesting perspective - that the practical knowledge I’d been working on gaining might just be more useful than the expensive and dense theory taught in academia.

Toward the end of the course, I was asked by an instructor if I’d be interested in being a teaching assistant for a new month long class they were doing on the fundamentals of computer science and web development. They were going to pay me and I still had a month left on my lease, so I jumped at the opportunity. It was taught in JavaScript. I learned so much by being put in a position where students looked up to me and I was tasked with being their first resource for help and knowledge.

I had a few interviews in Seattle, but even though I had made tons of friends the transient nature of my situation was a major barrier in landing a spot right away. A few students got jobs almost immediately after graduation, and others slowly trickled along roughly biweekly. We lost 3 classmates half way through the course, but most of us have jobs now or are making a decent living consulting.

Startup Weekend

Something I really wanted to do before I left Seattle was participate in a Startup Weekend event. There was only one more before my return to Salt Lake in April and it was unfortunately sold out. I got in contact with an instructor at Code Fellows who I knew was partnering with the event and he pulled a couple strings and got me a ticket as a designer. So I went and pitched my first startup idea which I made up on the spot and failed magnificently at.

I was baffled by how few developers were there when it was time to choose teams. Even though I had a designer ticket, it was clear my coding skills were needed (not to mention my design skills were nowhere near most of the others there). Due to the lack of developers, there were several teams that were asking me to join them, offering one incentive or another, and at least one major altercation between two team leaders over me. It was awkward.

So I chose a team (who has since gone on to be a real company), and had an absolutely great time. I met some really smart, interesting people. I wrote the back end of the app in Rails that connected to an iOS app. I learned so much from the team and working closely with the iOS developer. We stay in contact and I credit him with leading me to much of the interest and knowledge I have now.

Startup Weekend really put my skills to the limit, pushed me in ways I’d never been pushed before, and introduced me to lasting relationships that remain beneficial. I also had a really interesting and legitimate project for my portfolio that would attract future employers.

Returning home

I got back to Salt Lake the first week of April and immediately started sending applications to companies in SLC and Seattle. The first couple weeks were slow with responses, and I was busy updating my own portfolio site anyway. Things went much quicker once my site was ready and some projects were up. Between both cities, I sent out about 100 resumes and applications. The majority of those did not get any response. I had much better luck when I started to beef up my Linkedin again, posted on the job hunting subreddits, and used social media to expose myself and my interest in finding a job.

I went through roughly 20 phone interviews. The majority of the phone interviews led to the next step, usually either a code challenge of some sort, or an in-person interview.

At first, the code challeneges were pretty tough for me. Usually the at-home ones had something to do with their company. Literally every single at home challenge for a company required consuming data from an API. I was uncomfortable at first with it. It sounds pretty weird to say now, but I really hadn’t been exposed to consuming data from an API until code challenges for jobs. It’s strange that I didn’t learn it before, since it is such an essential skill.

Most of the in person interviews had a white board challenge involved, which is honestly in my opinion not a good or accurate measure of a person’s coding skill. I actually was prepared for this by Code Fellows, and did quite well on most of them.

I got a false alarm offer from a local startup I interviewed with for a Rails job in early May. It was a big disappointment when they went dark on me but I recovered and threw myself out there again by putting my site on Reddit job subs and reaching out to people at attractive companies on Linkedin.

The first job

The first week of June brought me 2 official offers within days of each other. One was for a software development contractor company that contracts people to other companies for long periods of time. I was offered a senior position in ruby, Rails, and front end development. The other offer was for a front end role on a .Net stack. The Rails one was for more money. I chose the other one because I met both teams and liked them more. I don’t regret that decision at all, and I’ve kept a good relationship with the other company.

Interestingly, both companies that gave me an offer reached out to me rather than the other way around. One was a recruiter who found me on Linkedin and the other was the dev manager who saw my post on Reddit. Both asked me lots of technical questions, and even code questions, but neither gave me a white board nor take home code challenge.

I enjoyed my first job as a developer. I was introduced to a lot of technologies I wouldn’t have been otherwise. They worked in a Windows environment, so I had to learn Visual Studio, C#, .Net, Razor, etc. and how to plug Coffeescript and Sass into the stack. It was a great learning experience and I made good friends there, but soon I had a lot of recruiters contacting me and I wasn’t a huge fan of the industry the company was in. It made me curious about opportunities that might have better suited me. I read this article on the benefits of early career job-hopping which eased the feeling of guilt I had while considering new opportunities.

So 4 months after my first job in web development, I accepted another offer at a well known company in the area. Now, 4 months since starting the new job, I am quite content with where I’m at.

Cut to the chase!

Okay, maybe that was too long, so here’s a summarized tl;dr list of the steps I took to get a job as a web developer a year from deciding to do so.

Exposed myself to seemingly complicated tech tasks for the purpose of exploration. This included hacking my Wii, setting up a Minecraft server, and getting familiar with various flavors of Linux. Generally being curious about technology and the internet and how it all works.
Gained a real interest in the idea of web development and programming in general. Money was of course a motivator, but certainly not enough to create the passion I eventually found in the actual craft.
Got introduced to front end fundamentals by trying things like Codecademy. Personally I didn’t like the little teasers and if I could start over would skip straight to reading HTML & CSS and JavaScript & jQuery by John Duckett. These are from what I’ve seen the most accessible and practical books written on front end web development.
- Update January 2018: I’ve recently discovered another really robust resource for interview questions and tutorials called CareerGuru99. You might find something there valuable to your journey!
Made some websites. My first was one for a real company which ended up not needing or using it. I did it for free to learn. This is unquestionably (hopefully obviously) the most important step I took. I then started reaching out to my network for people who needed websites and made some for friends and family.
Learned about server side scripting and full stack frameworks. I went through One Month Rails mostly due to a generous friend giving me his login. It was excellent and totally worth whatever they are charging. I then built another full stack web app.
Started a freelancing business. This really helped me legitimize myself, if only for myself, and made me feel official and that I was all-in on my decision to make this my career. I made business cards, a portfolio site, a bank account, and registered my business name. Then I actually found clients and got paid to do what I had decided I wanted to get paid to do.
Created a web presence. Made sure I had accounts on Twitter, Linkedin, Github, Hacker News, Designer News, and a portfolio site, and tried to sharpen them all up. This was vastly beneficial, one of the most important things I did next to actually making websites and roughly equal to networking.
Attended a code school. I chose Code Fellows in Seattle because of it’s job guarantee and location. Learned a ton, made lots of friends, would do it over again in a heartbeat. Absolutely worth the investment. I took advantage of a lot of great career opportunities offered to me because of this, including assisting in teaching a class and being a personal tutor to a CS grad student.
Networked. I asked everyone I knew what they knew about the industry and craft, and went to every meetup that I could. The conversations I had (and still have) at these events are invaluable. You learn shockingly more from talking with people in the community than you would sitting in any combination of classes. It also helped me with social skills, which even as a programmer is surprisingly important.
Applied, interviewed, practiced, repeat. I sent out tons of applications and put myself out there in every way I could think of. Ultimately Linkedin, Reddit, and meetups were the channels that actually got me job offers. I practiced whiteboarding algorithms and solving problems, had a lot of interviews (each better than the previous, for the most part) and continuously kept up to date on current trends and technologies.

A year is a relatively short time to have gotten where I did, and I am certain I wouldn’t have gotten there without the series of fortunate events (yes, I consider the destruction of my ankle as a fortunate event in hindsight) that allowed me to focus obsessively and full time on this pursuit. But passion is a lot stronger then luck and if one has the drive, they shouldn’t need any fortune to make things happen on their own timeline.

Join the discussion here on Hacker News.

This post was translated into German by Essay Hilfe

This post was also translated into Russian by Colorings Blog

Using Sass in Visual Studio

2014-11-12T10:10:00-07:00

Some may find themselves developing the front end of web applications in .NET and Visual Studio. If that’s you, I’m sorry (at least until the new cross platform open source versions come out).

If you use Sass, as hopefully you do if you’re reading this, you will find yourself frustrated by the fact that Web Essentials for VS advertised as being capable of Sass compilation, but actually isn’t. The following outline is the only way I’ve been able to get Sass working in Visual Studio. This has been tested in VS 2012 and 2013.

Download Mindscape Web Workbench and make sure to enable it in VS at Tools > Extenstions and Updates. You might have to restart VS.
Hopefully you have a “main.scss” type file in your stylesheets directory that contains all your imports and will eventually compile into a singular minified file called in your markup (this can be added by right-clicking the stylesheets folder, and going to Add > New Item > SCSS Stylesheet (Sass), then name appropriately):
Go to Tools > Options and select Web Workbench from the list. Adjust the settings so that:

Compilation > Trigger compile on build = True

Compilation > Disable Sass compilation = False

Sass > Produce .css file = True
In the toolbar, got to Mindscape > Web Workbench Settings and make sure the only checkbox selected under Compile is your “main.scss” file mentioned earlier. Uncheck all the rest unless you want a million extra css files and an hour-long build:
Now your main.scss file will compile on build (and save, depending on your settings) and generate a main.css file in the same directory that is minifiable and browser-readable.

And thats it. Now you can write your Sass and keep your modular style structure nice and happy in Visual Studio and .NET projects. Hopefully this post will be deprecated at the release of the new versions.

Writing in the Deseret Alphabet with Web Fonts

2014-06-29T09:08:00-06:00

If you’re here for the code and want to skip most of the history and linguistics, click here.

The State of Deseret

This past weekend I went camping in the San Rafael Swell and became interested in my native state of Utah’s history and unique culture.

Evidence of humans is found in Utah for as far back as 12,000 years ago. Various Native American tribes and cultures (Freemont, Puebloan, etc.) occupied the land until the first of the Mormon pioneers arrived with their leader Brigham Young in 1847.

They settled in by vastly changing the desert environment into a habitable landscape with amazing feats of industry including irrigation and agriculture, timber and mining, and constructing communities from the resources around them. They created a society from scratch.

The settlers were very isolated and in a political and territorial limbo that went from technically belonging to Mexico, to a near immediate statehood proposal (The State of Deseret), and then remaining a U.S. territory - all the while settling most of the western United States including cities like Las Vegas, San Bernardino, most of Idaho and Nevada, a good chunk of Arizona and many other western states.

Brigham Young and the Mormons were the de facto government throughout this time (some say they still are) and as such were providing public necessities like schooling, and founded the precursor to the University of Utah, the University of Deseret.

The Deseret Alphabet

This was a time when there were several efforts to reform the traditional Latin English alphabet into something phonetic, more easily taught to immigrants and children, and optimized for handwriting. Brigham Young and the board of regents of the University of Deseret saw their position as an opportunity to get in on this action.

In addition to the aforementioned reasons for alphabet reform, the Mormon leadership believed a new writing system would benefit them in other ways such as more unification, solidifying their unique identity, and some speculate that there was a bit of a secret-keeping draw to it as well, though that claim has been refuted by several scholars.

The Deseret Alphabet was developed over the course of several years and iterations beginning before the pioneers made their way across the plains, and finally had its first printing in 1859 by the Deseret News. Periodic sample prints of the alphabet came in the newspaper until the first books were published in the late 1860’s which sold very poorly. The alphabet died with Brigham Young in 1877.

It is amazing how much research there is on the Deseret Alphabet, with how few people seem to know about it. There has even been an effort to print many classic literary masterpieces in the alphabet. It was introduced in Unicode in 2001, allowing for hobbyists, linguists, and historians to use the alphabet more easily.

Learning the alphabet

Here’s a pronunciation table:

Glyph	IPA	Sound	Glyph	IPA	Sound
𐐀	/iː/	“e” in me	𐐊	/ʌ/	“u” in luck
𐐁	/eɪ/	“ay” in day	𐐋	/ʊ/	“u” in pull
𐐂	/ɑː/	“a” in cart	𐐌	/aɪ/	“y” in my
𐐃	/ɔː/	“au” in caught	𐐍	/aʊ/	“ow” in cow
𐐄	/oʊ/	“o” in go	𐐎	/w/	“w” in wow
𐐅	/uː/	“oo” in do	𐐏	/j/	“y” in yes
𐐆	/ɪ/	“i” in sit	𐐐	/h/	“h” in hi
𐐇	/ɛ/	“e” in bet	𐐑	/p/	“p” in pet
𐐈	/æ/	“a” in cat	𐐒	/b/	“b” in boy
𐐉	/ɒ/	“o” in lot	𐐓	/t/	“t” in tank

Glyph	IPA	Sound	Glyph	IPA	Sound
𐐔	/d/	“d” in dog	𐐞	/z/	“z” in zoo
𐐕	/tʃ/	“ch” in church	𐐟	/ʃ/	“sh” in ship
𐐖	/dʒ/	“j” in jump	𐐠	/ʒ/	“s” in measure
𐐗	/k/	“k” in kite	𐐡	/r/	“r” in red
𐐘	/ɡ/	“g” in girl	𐐢	/l/	“l” in love
𐐙	/f/	“f” in food	𐐣	/m/	“m” in mom
𐐚	/v/	“v” in voice	𐐤	/n/	“n” in night
𐐛	/θ/	“th” in think	𐐥	/ŋ/	“ng” in sing
𐐜	/ð/	“th” in that	𐐦	/ɔɪ/	“oy” in boy
𐐝	/s/	“s” in sun	𐐧	/juː/	“yew” in yew

So, ostensibly thats kind of a lot. 40 new unique characters and sounds to replace a very well known system seems a bit daunting, which may be part of the reason it had a hard time getting adopted by the intended users and audience.

In my opinion, other than the glyphs looking nothing at all like their Latin counterparts, the alphabet is rather easy to learn since you are just reassigning a symbol to a sound in English. There is no grammar or syntax change, it’s really just like mind-mapping 40 pictures to 40 words for which a few hours of flash card study would be quite sufficient. (Though, this isn’t the first time I’ve learned a dead script for no reason. I once became fluent in the ancient Baybayin Tagalog script in a strange bout of manic overachievement.)

Limitations of the alphabet

The alphabet in its official form was created to emulate the pronunciation of the settlers, who came primarily from New England. This means when you read out loud a publication in the Deseret Alphabet, it’s going to sound like you’re talking with the accent of a North Easterner in the 1860’s.

A good example of change is “𐐃”, which in present-day Utah essentially doesn’t exist. Think of a Long Island native saying something like “I thought you caught it when you fought it,” or something along those lines. You know what I mean about the vowels in those words being non-existent and replaced simply with “ah” in the western United States.

Another limitation is the lack of a schwa (/ə/) vowel. It sounds like the “e” in “the.” Historically the schwa has been written as 𐐊, which I find odd since the symbol 𐐋 is much closer in my opinion. My blog, my rules, so I’ll use 𐐋 as the schwa from now on. Also, Deseret is cased, but the capital letters are just bigger versions of the lower case ones. So I’m going to skip using the lower case for readability and ease of use.

Now for the fun part

I went about scouring the web for better Deseret fonts. I had a lot of trouble finding a good sans-serif font. The primary resource for these and the serif fonts I found were by Joshua Erickson, but alas, the entire sans-serif collection has been disabled. Bummer. At least I could use some of his serif fonts that were less harsh on the eyes than the default, and there were a few sans-serif fonts his site led me to. Here are a few font samples:

1. 𐐈𐐔𐐈𐐣𐐆𐐗𐐒𐐀： 𐐀𐐁𐐂𐐃𐐄𐐅𐐆𐐇𐐈𐐉𐐊𐐋𐐌𐐍𐐎𐐏𐐐𐐑𐐒𐐓𐐔𐐕𐐖𐐗𐐘𐐙𐐚𐐛𐐜𐐝𐐞𐐠𐐡𐐢𐐣𐐤𐐥𐐦𐐧𐐟

2. H_NIBI：ABCDEFGHIJKLMNOPQRSTUVWXYZŽÀÁÂÃÊÎÐÑÔÕÛÞ

3. DEZÒRET: ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆÈÊÌÍÒØÛŒˉ

Unfortunately 2 and 3 (the two sans-serif) are mapped to two separate and seemingly arbitrary encodings rather than the proper Deseret Unicode characters like the serif font at the top of that list. So even though 2 (HuneyBee) is my favorite of the three, its nowhere near as easy to implement as 1 (AdamicBee).

Here is the HTML source of those example fonts:

<p class="adamic">1. 𐐈𐐔𐐈𐐣𐐆𐐗𐐒𐐀： 𐐀𐐁𐐂𐐃𐐄𐐅𐐆𐐇𐐈𐐉𐐊𐐋𐐌𐐍𐐎𐐏𐐐𐐑𐐒𐐓𐐔𐐕𐐖𐐗𐐘𐐙𐐚𐐛𐐜𐐝𐐞𐐠𐐡𐐢𐐣𐐤𐐥𐐦𐐧𐐟</p>

<p class="huney">2. H_NIBI：ABCDEFGHIJKLMNOPQRSTUVWXYZŽÀÁÂÃÊÎÐÑÔÕÛÞ</p>

<p class="deseret-sans">3. DEZÒRET: ABCDEFGHIJKLMNOPQRSTUVWXYZÅÆÈÊÌÍÒØÛŒˉ</p>

As you can see, 1 is in the proper Deseret Unicode, and 2 and 3… aren’t. Maybe they are relics of the pre-Unicode days of Deseret, but either way I’ll be leaving them out when trying to write in it.

Almost all of the fonts I tried were one .ttf file and I needed to convert them to web fonts. This was ridiculously easy with FontPrep. All I had to do was drag the .ttf file onto the app, and it generated a whole package of web font formats with the corresponding CSS. I highly recommend that app if you ever need to generate custom web fonts.

While I’m at it, I may as well explain how I got these custom fonts to work in the asset pipeline using Sass.

First, I created a /fonts directory where the rest of my asset directories are:

(Middleman)
-source
  -fonts
  -images
  -javascripts
  -stylesheets
  ...etc

(Rails)
-app
  -assets
    -fonts
    -images
    -javascripts
    -stylesheets

Next, FontPrep generates four files when it receives a .ttf- .eot, .svg, .woff, and another .ttf. I put these files in the /fonts directory for all three fonts I’m using:

-source
  -fonts
    -AdamicBee.eot
    -AdamicBee.svg
    -AdamicBee.woff
    -AdamicBee.ttf
    -Huneybee.eot
    -Huneybee.svg
    -Huneybee.woff
    -Huneybee.ttf
    -deseret.eot
    -deseret.svg
    -deseret.woff
    -deseret.ttf

Since I’m using Bourbon, I can use the magnificent font-face mixin (I’m also using Bitters, so I placed these 3 lines at the bottom of the _typography.scss partial):

// /bitters/_typography.scss
@include font-face('Huneybee', '/fonts/Huneybee');
@include font-face('AdamicBee', '/fonts/AdamicBee');
@include font-face('deseret', '/fonts/deseret');

This compiles the following CSS:

@font-face {
  font-family: 'HuneyBee';
  src: url('/fonts/Huneybee.eot'); /* IE9 Compat Modes */
  src: url('/fonts/Huneybee.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Huneybee.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Huneybee.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Huneybee.svg#aa041304602ddc161943388b95e8c94f') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'AdamicBee';
  src: url('/fonts/AdamicBee.eot'); /* IE9 Compat Modes */
  src: url('/fonts/AdamicBee.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AdamicBee.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AdamicBee.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AdamicBee.svg#159e7fbb74bf1cefffafc0996ebf38fb') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Deseret-sans';
  src: url('/fonts/deseret.eot'); /* IE9 Compat Modes */
  src: url('/fonts/deseret.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/deseret.woff') format('woff'), /* Modern Browsers */
       url('/fonts/deseret.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/deseret.svg#c44a3474510e076f453a95eeee3a1178') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

Thats about as bullet-proof cross-browser compatible as you can get. A good example for why I think Sass is indispensable in modern web development. 3 simple scss lines compile to 34 lines of css with the best of the best practices.

Finally, I just gave each separate font its own class in the scss that I could apply to any HTML element:

// /posts.scss
  .huney {
    font-family: "HuneyBee";
  }
  .deseret-sans {
    font-family: "deseret";
  }
  .adamic {
    font-family: "AdamicBee";
  }

It should also be noted that I’m using Markdown for these posts, which means in this special case I just used the HTML you saw above in the Markdown file to apply those classes to the unique font examples.

And finally, a real writing sample

𐐁 𐐐𐐧𐐣𐐊𐐤 𐐒𐐀𐐏𐐀𐐥 𐐟𐐋𐐔 𐐒𐐀 𐐁𐐒𐐋𐐢 𐐓𐐅 𐐕𐐁𐐤𐐖 𐐊 𐐔𐐌𐐑𐐋𐐡, 𐐑𐐢𐐈𐐤 𐐊𐐤 𐐆𐐤𐐚𐐁𐐠𐐊𐐤, 𐐒𐐋𐐕𐐋𐐡 𐐊 𐐐𐐉𐐘, 𐐗𐐂𐐤 𐐊 𐐟𐐆𐐑, 𐐔𐐆𐐞𐐌𐐤 𐐊 𐐒𐐆𐐢𐐔𐐀𐐥, 𐐡𐐌𐐓 𐐊 𐐝𐐂𐐤𐐆𐐓, 𐐒𐐈𐐢𐐈𐐤𐐝 𐐊𐐗𐐍𐐤𐐓𐐝, 𐐒𐐆𐐢𐐔 𐐊 𐐎𐐉𐐢, 𐐝𐐇𐐓 𐐊 𐐒𐐄𐐤, 𐐗𐐊𐐣𐐙𐐋𐐡𐐓 𐐜𐐋 𐐔𐐌𐐀𐐥, 𐐓𐐁𐐗 𐐃𐐡𐐔𐐋𐐡𐐝, 𐐘𐐆𐐚 𐐃𐐡𐐔𐐋𐐡𐐝, 𐐗𐐄𐐂𐐑𐐋𐐡𐐁𐐓, 𐐈𐐗𐐓 𐐊𐐢𐐄𐐤, 𐐝𐐂𐐢𐐚 𐐀𐐗𐐎𐐁𐐠𐐊𐐤𐐝, 𐐈𐐤𐐊𐐢𐐌𐐞 𐐊 𐐤𐐅 𐐑𐐡𐐂𐐒𐐢𐐆𐐣, 𐐑𐐆𐐕 𐐣𐐊𐐤𐐧𐐡, 𐐑𐐡𐐄𐐘𐐡𐐈𐐣 𐐊 𐐗𐐊𐐣𐐑𐐧𐐓𐐋𐐡, 𐐗𐐋𐐗 𐐊 𐐓𐐁𐐝𐐓𐐀 𐐣𐐀𐐢, 𐐙𐐌𐐓 𐐀𐐙𐐆𐐟𐐆𐐤𐐓𐐢𐐀, 𐐔𐐌 𐐘𐐈𐐢𐐈𐐤𐐓𐐢𐐀. 𐐝𐐑𐐇𐐟𐐋𐐢𐐌𐐞𐐁𐐟𐐊𐐤 𐐆𐐞 𐐙𐐄𐐡 𐐆𐐤𐐝𐐇𐐗𐐓𐐝.

－ 𐐡𐐉𐐒𐐋𐐡𐐓 𐐐𐐌𐐤𐐢𐐌𐐤

That says:

A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.

- Robert Heinlein

You might not notice, but the Deseret version of this quote uses 48 fewer characters than our alphabet. There’s a real argument for efficiency there. You’re never doubling characters or organizing odd vowels into diphthongs, saving lots of space.

𐐎𐐀 𐐂𐐡 𐐖𐐋𐐝𐐓 𐐊𐐤 𐐈𐐔𐐚𐐈𐐤𐐝𐐓 𐐒𐐡𐐀𐐔 𐐊𐐚 𐐣𐐊𐐥𐐗𐐀𐐞 𐐂𐐤 𐐊 𐐣𐐌𐐤𐐋𐐡 𐐑𐐢𐐈𐐤𐐆𐐓 𐐊𐐚 𐐊 𐐚𐐇𐐡𐐀 𐐈𐐚𐐋𐐡𐐆𐐖 𐐝𐐓𐐂𐐡. 𐐒𐐊𐐓 𐐎𐐀 𐐗𐐈𐐤 𐐊𐐤𐐔𐐊𐐡𐐝𐐓𐐈𐐤𐐔 𐐜 𐐏𐐅𐐤𐐊𐐚𐐊𐐡𐐝. 𐐜𐐈𐐓 𐐣𐐁𐐗𐐝 𐐊𐐝 𐐝𐐊𐐣𐐛𐐀𐐥 𐐚𐐇𐐡𐐀 𐐝𐐑𐐇𐐟𐐋𐐢.
－𐐝𐐓𐐀𐐚𐐆𐐤 𐐐𐐃𐐗𐐀𐐥

We are just an advanced breed of monkeys on a minor planet of a very average star. But we can understand the Universe. That makes us something very special.

- Steven Hawking

This is very tedious to type, however. I mapped my keys to each of the Deseret characters using Better Touch Tool, a handy tool for lots of things, but it totally wasn’t worth it as I ended up being faster by just copy/pasting the characters from the chart in order.

I thought about writing little sticky note characters and putting them on their corresponding keys, but I figured I already spent this much time learning a dead alphabet and my use of it will most likely die with the end of this post.

Alright, one more thing. This is the logo of one of my favorite bars in Salt Lake City, the Bourbon House. I’m using it without permission so if they ask me to take it down I will.

It’s a characature of Brigham Young holding a glass of bourbon,something he ironically was known to do (he even built the first whiskey distillery in Utah, go figure). It might be hard to see, but the Deseret there says:

𐐒𐐁𐐁𐐡 𐐀𐐝 𐐑𐐡𐐄𐐄𐐙 𐐓𐐐𐐂𐐓 𐐘𐐄𐐔 𐐢𐐄𐐚𐐁𐐝 𐐋𐐝

To a native Deseret reader, that would be utter nonsense. It sounds something like:

Be-eer eess proh-ohff t-haut gohd lohveeess oooss

It’s safe to assume that it’s trying to say “Beer is proof that God loves us.”

So a more proper translation would be along the lines of:

𐐒𐐁𐐡 𐐆𐐞 𐐑𐐡𐐅𐐙 𐐜𐐈𐐓 𐐘𐐉𐐔 𐐢𐐊𐐚𐐞 𐐊𐐝

I don’t blame them for not getting a dead script kinda wrong, especially because it’s funny and I like them a lot.

If you want to learn more about the Deseret Alphabet, here are some resources I used:

Update: A new, far superior Deseret Translator has been created by Nathan Hadfield. He referenced this article as a resource that helped him build it. Please check it out!

The quasi-official Deseret Alphabet site This site had almost all the resources I used neatly in one place, and seems to be maintained quite frequently.
Deseret Alphabet Blog The owner of this blog has translated over 50% of the XKCD comics into Deseret, an impressive feat no matter how pointless.
The Deseret Alphabet Translator

Anyway, thats enough of that. I probably should’ve spent this time learning a new programming language or something, but I learned a ton about my homeland’s history, web fonts, typography, linguistics, and encoding so there was no lack of intellectual stimulation.

Hope you learned something too.

-Mike

Using Variables in YAML Front Matter

2014-05-30T09:08:00-06:00

What is Front Matter?

I didn’t know this until just now, but the name comes from book design, where the front matter is just all the stuff before the actual body of the book. This includes the table of contents, title pages, copyright info, etc. It’s essentially all the metadata of the book.

Likewise, the YAML front matter common in static-site generators like Middleman is the metadata of the current page. In my case that usually ends up being post pages where some of the dynamic data is defined:

---
layout: post
title: Using Variables in YAML Front Matter
date: 2014-05-30 09:08
tags: yaml, middleman
---

This makes it super easy to have various HTML layouts that you can assign to any page on your site. It also gives us the date and title options which are useful for the index, file structure, and other obvious benefits.

Setting Custom Variables

I have 4 social media icon SVGs on my portfolio/main index page, and I’m currently using each of them twice - one for the contact drop-down menu, and another for the contact section at the bottom.

As you can imagine, that clunked up the HTML pretty bad and it was immediately a giant pain to try and find or move anything. I wanted to DRY it up, and I knew that I could do that with Middleman.

It only took 3 steps.

1) The first thing I did was list each of the icons by name in the front matter:

---
github:

linkedin:

twitter:

email:
---

2) Then I added the cumbersome svg codes to set the variables for each:

---
github: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                width="22" height="20" viewBox="0 0 99.441 99.44" enable-background="new 0 0 99.441 99.44" xml:space="preserve"><path id="github" fill="#fff" d="M64.507,95.749c-2.439,0.474-3.303-1.026-3.303-2.307c0-1.584,0.053-6.763,0.053-13.197
                c0-4.486-1.535-7.412-3.259-8.905c10.707-1.189,21.958-5.257,21.958-23.727c0-5.25-1.867-9.541-4.949-12.908
                c0.499-1.211,2.145-6.101-0.473-12.726c0,0-4.034-1.292-13.211,4.931c-3.844-1.065-7.96-1.601-12.047-1.619
                c-4.088,0.018-8.201,0.554-12.036,1.619c-9.189-6.222-13.228-4.931-13.228-4.931c-2.611,6.625-0.966,11.515-0.465,12.726
                c-3.079,3.368-4.957,7.658-4.957,12.908c0,18.428,11.228,22.55,21.91,23.767c-1.374,1.199-2.62,3.32-3.054,6.428
                c-2.745,1.23-9.705,3.356-13.993-3.996c0,0-2.543-4.615-7.373-4.956c0,0-4.69-0.061-0.329,2.923c0,0,3.152,1.479,5.339,7.036
                c0,0,2.824,8.585,16.202,5.675c0.02,4.019,0.065,7.808,0.065,8.953c0,1.27-0.881,2.758-3.286,2.312
                C14.968,89.396,1.188,71.37,1.188,50.125c0-26.56,21.533-48.089,48.089-48.089c26.558,0,48.088,21.529,48.088,48.089
              C97.364,71.366,83.604,89.382,64.507,95.749z"/></svg>
linkedin: <svg> ...
---

3) After that it was simply a matter of calling “current_page.data” and passing the custom variable in its place in Erb:

<a href="https://github.com/elliotec"><%= current_page.data.github %>Github</a>

Now the code base is much more DRY and modular, and the generated HTML is producing the expected behavior.

You can do this in Jekyll too, but there are a few differences (basically just step 3) so check out their docs if thats what you’re into.

For more info on the Middleman front matter, see the relevant section in the Middleman docs.

– Mike

Building This Site in Middleman

2014-05-17T05:26:11-06:00

Blogging platforms vs. static site generators

I had been looking around for a good way to get a portfolio site and blogging platform all in one that suited my tastes.

For a short time I looked into platforms such as Ghost, Medium, and Svbtle.

I really liked the design, simplicity, and content-focus of those, but as a developer, I wanted something I could customize and design myself with minimal third-party interference.

Then I found Jekyll. I quickly realized that what I wanted was a “blog-aware” static site generator rather than a blogging platform alone. This would give me the ability to fully customize every aspect of my site while allowing me a place to write posts.

I had Jekyll installed and running on a development server in a minute or two. I was able to acquaint myself with the directory structure fairly quickly after going through the docs a bit and looking at some example sites - my favorite of which is quaran.to, the personal blog of Nick Quaranto.

It uses the Liquid Templating Engine, which is a “Ruby library for rendering safe templates which cannot affect the security of the server they are rendered on.” It looks remarkably like erb in Handlebars. It didn’t take much getting used to, but I was slightly annoyed that a Ruby-driven framework wasn’t just using erb.

In addition to that slight inconvenience, I had to use the pre-release version of Jekyll in order to have Sass and CoffeeScript support - not a huge deal until I found the hard way that if hosting on Github pages (one of Jekyll’s major selling points), you are limited to the version they use.

So my options were:

Write a Rake task that compiles Sass and CoffeeScript
Use and configure plugins
Wait for Jekyll 2.0 to be released and then Github Pages to adopt it
Use a different generator

Finding Middleman

I had all but given up on Jekyll when 2.0 was released. I was excited, but a bit disillusioned. I found out from This Hacker News Post, and the top comment was the elusive solution to all my static site-generating problems: Middleman.

Middleman’s file structure was immediately familiar and it’s Rails-like atmosphere sold me instantly. erb instead of Liquid-Ruby-Handlebars? Check. Sass and CoffeeScript support out of the box? Check. Ability to host on Github Pages, Heroku, or any other production environment imaginable with little configuration? Check, check, and check.

Now I could finally get to the fun part and design my site. I came accross these two posts that were immensely helpful:

What you see here is the result of this process. In a future post, I’ll describe some of the methodology I used in the site’s creation and give some code samples and tips I found useful in it’s development. In the meantime, check out the code on my Github if you wish.