My Hackintosh 6 months in: specs, thoughts and useful links

In the summer of last year, I was in the process of leaving my job to go full-time as an indie. I arranged to keep the mid-2012 MacBook Pro that had served me so faithfully at my old job as a backup machine, but it was starting to show it’s age when running Photoshop or Illustrator. I set about looking for my next workhorse.

Read on, there’s more »

Tracking commits to a GitHub repo with RSS

Watching a repo on GitHub will keep you up to date with it’s issues and pull requests. From time to time there are repos that need a closer eye kept on them though.

I inspected the page of one such repo this afternoon and to my slight surprise found what I was after: an RSS feed. Props to GitHub for going one step further by providing per-branch commit feeds, structured like this:

https://github.com/user/repo/commits/branch.atom

A working example:

https://github.com/elliotekj/specify/commits/master.atom

New about page

I finally took some time this weekend to sit down and write an about page for this site. As part of my continued push for this site to tell a complete story—to document both the personal and professional ups and downs, I forced myself to break out of the boilerplate 3 line about page I’ve some to expect on personal websites:

Hello, my name’s NAME. I work at COMPANY in CITY as a JOB TITLE. Formerly at OLDCOMAPNY and OLDCOMPANY2. Feel free to get in touch.

Read on, there’s more »

Dynamic input values, .value and .getAttribute(‘value’)

There are two ways to go about getting the value of an input with Javascript: .value and .getAttribute('value'). It’s important to know that they weren’t born equal however. It’s easy to be caught out by the fact that whilst .value updates dynamically to match the user’s changes, .getAttribute('value') does not.

Read on, there’s more »

Improving webfont performance with FontFaceObserver and sessionStorage

I spent some time trying to optimise webfont loading on this site yesterday. The current best-practice for most websites leverages FontFaceObserver and sessionStorage.

FontFaceObserver is a fairly small Javascript library made by Bram Stein that will load one or multiple @font-faces, then notify you once they have finished loading via a Promise. sessionStorage is like localStorage except that, as it’s name suggests, it expires at the end of the session. We’ll be using it to keep track of whether or not the fonts have been loaded.

Let’s start by adding the necessary @font-face syntax to our CSS. This site uses Domine, which I self-host. FontFaceObserver is compatible with any webfont service though.

Read on, there’s more »

On importing my old writing

I’ve been going back and forth with myself on this for what feels like an age. When I came back to having everything associated with this domain, including my writing, I started afresh.

The question I’ve been going back and forth on is whether or not I should import my old writing. Having started afresh, I feel like the site no longer tells the full story. Whether we like it or not we are a culmination of the events of our past, and whilst there are posts I’ve written in the past that I regret publishing and/or no longer agree with, redacting or deleting them isn’t going to change the fact that once upon a time I put them out into the world with my name next to them. Doing that feels like I’m being deceitful—first and foremostly to myself.

All that to say that I have now imported all the old posts from casualnotebook.com and all the posts I could find from the first version of elliotekj.com as they were originally published.

Screencast #1: How I manage my dotfiles with GitHub

There are plenty of different ways to manage dotfiles. This screencast shows you how I sync mine across machines via GitHub.

I like this solution because it doesn’t rely on any tools other than Git which is more or less platform-ubiquitous. There’s no need to install other scripts or software and if you’re not a fan of GitHub then you can just as easily use Bitbucket or any other host.

Hacker News commenter StreakyCobra is the brains behind this setup and, as I mentioned in the video, it’s a setup that has served me flawlessly so far.

Configuration for a cleaner command history in ZSH

Being able to scroll back through all of the commands entered into the terminal with the up arrow key is very handy. A level of annoyance is added when having to scroll back through all the occurrences of a command that was repeated multiple times in succession however.

Fortunately, there’s an option you can set in your .zshrc to reduce a block of repeated commands down to just one line in the command history.

setopt hist_ignore_dups # Don't save multiple instances of a command when run in succession

You can go further with the setopt hist_ignore_all_dups option. With that set, all previously saved commands that match the command you just entered will be removed from the history. I personally don’t like this though, as when I’m going back through my history I like having the complete context around any previously entered command.

Lastly, in the name of a cleaner command history, you can set setopt hist_reduce_blanks which will just remove any superfluous whitespace from the command before saving it to the history.

Conditionals and regular expressions in Javascript

Regular expressions (regexes) are, at first, baffling to look at. What they lack in initial digestibility however, they make up for in power.

Before going any further with this post, let’s take a quick look at the structure of a regular expression in case you haven’t used one before.

Read on, there’s more »

Section comments with centred text in Vim

Everyone has their own taste when it comes to comment styles. I personally like section comments with centred text as shown below. They’re time consuming to get right though so I tend to opt for a simpler format.

/* -------------------------------------------------------------------------- *
 *                                 COMPONENTS                                 *
 * -------------------------------------------------------------------------- */

Some light procrastination led me to investigating how much of the above layout could be automated in Vim. As it turns out, all of it. Here’s what the final workflow looks like in action.

The mapping isn’t particularly pleasant to read, but it works.

nnoremap <leader>sh VU:center 79<cr>0c2l<space>*<space><esc>A<space><esc>40A<space><esc>d79<bar>ch<space>*<esc>YPS<esc>i/*<space><esc>74A-<esc>A<space>*<esc>jo<esc>S<esc>i<space>*<space><esc>74A-<esc>A<space>*/<esc>o<esc>o<bs>

As a reminder, you can change the mapped commands based on the filetype of the file being edited. That way, <leader>sh can always be “section header” but the comment syntax can be changed for languages that don’t use /* */.

autocmd BufRead,BufNewFile *.{es6,js,scss,css} nnoremap <leader>sh VU:center 79<cr>…

jQuery to pure JS: Target each direct child of an element

If you’re coming from jQuery to pure Javascript and are trying to target each direct child of an element, your first attempt to select the direct children will probably be element.querySelector('> *'). That will throw an error though, because .querySelector() doesn’t support tag-name wildcards.

Your next attempt might involve element.childNodes, and you’d be closer. The issue with that is that .childNodes will return all of the element’s children, not just the direct children.

Read on, there’s more »

Jekyll: Create a list of all posts in the same category

Let’s take a look at how to create a list of all of the posts in the same category as the one currently being viewed, bearing in mind three requirements:

  1. If the post has more than one category, we want to create a list for each category.
  2. We don’t want to show the list if there is only one post in the category (the one being viewed).
  3. We don’t want to include the post who’s page is currently being viewed within the list.

Read on, there’s more »

Jekyll: Display the full post unless a custom excerpt is specified

The homepage of this site lists the full content of each post by default. An excerpt is shown only if a post contains <!--more-->, which is the default excerpt separator in Jekyll.

Describing this functionality in prose looks something like this. For each post that is looped through, check it’s content for the excerpt separator. If found, then show all the content up until the separator, then a read more link. If not, show the full content of the post.

Translating the above to liquid results in the following snippet within the posts loop.

{% if post.content contains site.excerpt_separator %}
  {{ post.excerpt }}
  <a href="{{ post.url }}">Read more</a>
{% else %}
  {{ post.content }}
{% endif %}

If <!--more--> isn’t to your liking, excerpt_separator can be configured globally in _config.yml.

Mummy’s Boy

Winko

On Monday afternoon—in his favourite spot in the world; by the fire in the sitting room—we said goodbye to our friend, companion, source of laughter and shoulder to cry on of the past 12 years: Winko.

Read on, there’s more »

Guard clauses in Javascript

I first came across the idea of guard clauses in Ruby. The concept is a fairly straightforward one: instead of wrapping a block in an if statement, you exit on a single line, keeping the proceeding code at the same indentation level.

In a language like Javascript, there’s no end-benefit to this style of exiting. There is, in my opinion, a benefit for anyone touching your codebase however: it improves readability and just feels nicer; cleaner.

An example then. Traditionally, you might stop certain code running like this.

const assertString = (str) => {
  if (typeof str === 'string') {
    return true
  } else {
    return false
  }
}

Using a guard clause, you would write the above like so.

const assertString = (str) => {
  if (typeof str !== 'string') { return false }
  return true
}

I’ve adopted this style of exiting everywhere applicable and really like it. I’d encourage you to give it a whirl.

Now serving over HTTPS and HTTP2

Every so often I check to see if GitHub have added a way to serve websites hosted on GitHub Pages with a custom domain over HTTPS rather than HTTP. Whilst clicking around to that end last night, I found that the answer is still no. I did stumble upon a service called Netlify however.

As this site uses Jekyll plugins I can’t push directly to my username.github.io repo, it needs to be built first. To avoid having to do that manually, I setup a whole song and dance on Wercker that turned out to be more hassle than it was worth.

Netlify is, in short, a one-stop-shop for static sites. The features that attracted me to it were the Git integration—all I need to do is push a post to the repo and it’ll handle the rest (including building the site despite it using plugins, taking Wercker out of the mix), the free SSL certificates via Let’s Encrypt and the HTTP2 support. A global CDN, and fast DNS aren’t features to shake a stick at either, but GitHub pages has those covered too.

The setup was quick and easy: I pointed Netlify at the site’s repo, it detected that the generation engine was Jekyll, automatically setup a box, built it and served a preview. From there, I just removed the two A records that pointed at GitHub and added one that points to Netlify, added my custom domain in the admin and waited for the lot to propagate. Once it had, SSL was a click away and only one more click was needed to force TLS connections.

If your site’s repo is public on GitHub then Netlify gives you all this functionality on the house. From the few hours I’ve spent with it, I’d highly recommend it as an alternative to GitHub Pages.

Setup CtrlP to use ripgrep in Vim

A few weeks ago I wrote about switching from CtrlP and The Silver Searcher to fzf and ripgrep. I have since returned to CtrlP and thought I’d share how to set that up with ripgrep too.

From my time with fzf, I can attest to the fact that it is indeed faster than CtrlP when the time comes to search for something. Having said that, I later discovered via a quick process of elimination that it also drags down Vim’s general performance.

Read on, there’s more »

Sorting lines in Vim

Amongst Vim’s many commands, there’s the humble yet powerful :sort. As you’d expect, it takes a selection or a range and sorts it. By default, that sort is numerical (0 through 9), then alphabetical (A through Z followed by a through z).

All that to say that running a generic :sort on the characters to the left in the following example would result in them being reordered to how you see them on the right.

Read on, there’s more »