Byron Hambly

Rust NIFs in Elixir

Tue, 03 Mar 2020 00:00:00 +0000

Rustler - Native Implemented Functions (NIFs) in Rust from Elixir

Elixir is a dynamic, strongly typed, functional programming language that runs on the Erlang virtual machine - the BEAM. It inherits that distributed and fault-tolerant architecture, while adding a Ruby-like syntax, modern build tool and package manager Mix, and a built-in testing framework. It really sparks joy every time I get to use it!

Given its trade-offs for scalability and managed memory, when you require better CPU and memory performance it’s necessary to reach for Native Implemented Functions. NIFs allow you to call functions from compiled, shared libraries directly in your Elixir/Erlang code. However, a native function that crashes or misbehaves can crash the whole VM or cause scheduling and memory consumption issues.

Rustler is a library for writing NIFs in Rust, giving us better safety from undefined behavior, out-of-bounds access, use-after-free bugs, null pointer dereferences, and data races. All of which can have disasterous consequences on the Erlang VM.

Discord wrote a great article where they used Rust NIFs to scale their Elixir service. They created a sorted “Member List” data structure that’s very fast to process mutations in the list, and returns the indices where items in the list are mutated. They released that work as an open source library called Discord.SortedSet.

There are some brilliant quality of life improvements landing in Rustler 0.22, so let’s learn how to use Rustler to create a NIF module in Elixir!

Rustler by example

This source code is available at delta1/rustler-demo-app.

Start off by installing Elixir and Rust.
Open a terminal and your favorite text editor or IDE.
Create a new Mix application

mix new my_app && cd my_app

Edit mix.exs to add Rustler as a dependency.

# mix.exs
defp deps do
  [
    {:rustler, github: "rusterlium/rustler", 
      ref: "e343b8ca", sparse: "rustler_mix"}
  ]
end

Here we are importing the dependency directly from GitHub, to get the latest changes coming in the next version of Rustler! The ref key is the git commit hash, and sparse indicates that the Elixir dependency is in a specific folder of the repository.

Install the dependency

mix deps.get

Create a new NIF using Rustler - use MyNif as the module name, and mynif for the Rust crate name

mix rustler.new

This is the name of the Elixir module the NIF module will be registered to.
Module name > MyNif
This is the name used for the generated Rust crate. The default is most likely fine.
Library name (mynif) >
* creating native/mynif/.cargo/config
* creating native/mynif/README.md
* creating native/mynif/Cargo.toml
* creating native/mynif/src/lib.rs
Ready to go! See my_app/native/mynif/README.md for further instructions.

Follow the instructions in the readme to update mix.exs by adding :rustler to the project compilers, and mynif to the rustler crates

# mix.exs
def project do
  [
    # ...
    compilers: [:rustler] ++ Mix.compilers(),
    rustler_crates: [mynif: []]
  ]
end

Now update the Rustler dependency in native/mynif/Cargo.toml, using the rev key to specify the same git revision

# Cargo.toml
[dependencies]
rustler = { git = "https://github.com/rusterlium/rustler", 
            rev = "e343b8ca"}

Now we can compile! This will download our Rust deps, compile the crate, and compile our Elixir code

mix compile

Take a look at native/mynif/src/lib.rs where the auto generated add function is defined and exported to the Elixir.MyNif module

#[rustler::nif]
fn add(a: i64, b: i64) -> i64 {
    a + b
}

rustler::init!("Elixir.MyNif", [add]);

To use our NIF from Elixir, we need to create the MyNif module in lib/my_nif.ex

defmodule MyNif do
  use Rustler, otp_app: :my_app, crate: "mynif"

  # When your NIF is loaded, it will override this function.
  def add(_a, _b), do: :erlang.nif_error(:nif_not_loaded)
end

Now let’s create a test for it!

# test/my_nif_test.exs
defmodule MyNifTest do
  use ExUnit.Case

  test "adds using NIF" do
    assert MyNif.add(300, 120) == 420
  end
end

And run the tests

mix test

...

Finished in 0.03 seconds
1 doctest, 2 tests, 0 failures

Now let’s do something more interesting by trying to crash the Erlang VM. Update lib.rs with a panic function, and add it to the list of exported functions

// lib.rs
// ...

#[rustler::nif]
fn panic() {
    panic!("Boom!")
}

rustler::init!("Elixir.MyNif", [add, panic]);

Add the declaration to the MyNif Elixir module

# lib/my_nif.ex
# ...

def panic(), do: :erlang.nif_error(:nif_not_loaded)

Fire up an IEx console and let’s see what happens

iex -S mix

iex(1)> MyNif.panic()
thread '<unnamed>' panicked at 'Boom!', src/lib.rs:8:5

** (ErlangError) Erlang error: :nif_panicked
    (my_app 0.1.0) MyNif.panic()

iex(1)>

Our IEx console is still running! This is part of the safety provided by using Rust for our NIFs, even if our NIF panics, Rustler wraps it up nicely in an ErlangError which we can use to either catch the exception, or just let it crash and restart the process!

Okay so let’s really crash the VM! Create and export another function in lib.rs

// lib.rs
// ...

#[rustler::nif]
fn crash() {
    // create a null pointer
    let p: *const i32 = std::ptr::null();
    // https://doc.rust-lang.org/book/ch19-01-unsafe-rust.html
    unsafe {
        // dereferencing a raw pointer can only be done in an unsafe block
        // but dereferencing a NULL pointer is undefined behavior!
        // and likely to cause a segmentation fault and program crash
        println!("{:?}", *p);
    }
}

rustler::init!("Elixir.MyNif", [add, panic, crash]);

Don’t forget to add the declaration to the MyNif Elixir module

# lib/my_nif.ex
# ...

def crash(), do: :erlang.nif_error(:nif_not_loaded)

Start IEx again and run the crash function..

iex -S mix

iex(1)> MyNif.crash()

user@host:my_app$

There we go! We completely crashed the Erlang VM and process supervisor, killing the IEx session and dumping us back into the terminal.

Of course this is not what you want your NIF to be doing, which is why it’s useful to write these in Rust instead of C - hopefully catching these kinds of issues before they happen.

Performance

Let’s see the performance difference in action, by generating and sorting random numbers.

To generate random numbers in Elixir, use the Erlang :rand module. Add this function in the MyApp module

# lib/my_app.ex
def generate(num, upper) do
  1..num
  |> Enum.map(fn _ -> :rand.uniform(upper) end)
end

To do the same thing in Rust, we’ll depend on the Rand crate. Add the dependency in Cargo.toml

[dependencies]
# ...
rand = "0.7.3"

Then create and export our new function in lib.rs

#[rustler::nif]
fn generate(num: i64, upper: i64) -> Vec<i64> {
    extern crate rand;
    use rand::Rng;

    let mut rng = rand::thread_rng();

    // rust ranges are "half open"
    // so (0..5) has a length of 5
    // https://doc.rust-lang.org/std/ops/struct.Range.html
    (0..num)
        .map(|_| {
            // gen_range includes the lower bound
            // but excludes the upper bound
            // so we add 1 to upper to match the elixir implementation
            // https://docs.rs/rand/0.7.3/rand/trait.Rng.html
            rng.gen_range(1, upper + 1)
        })
        .collect()
}

rustler::init!("Elixir.MyNif", [add, panic, crash, generate]);

And load it in the MyNif module

# lib/my_nif.ex
# ...

def generate(_num, _upper), do: :erlang.nif_error(:nif_not_loaded)

Now let’s time these functions using the Erlang :timer module, in a new file timing.exs

# timing.exs

{microseconds, _} = :timer.tc(MyApp, :generate, [1_000_000, 1_000_000])
IO.puts("MyApp.generate #{microseconds / 1_000_000} seconds")

{microseconds, _} = :timer.tc(MyApp, :generate, [10_000_000, 1_000_000])
IO.puts("MyApp.generate #{microseconds / 1_000_000} seconds")

{microseconds, _} = :timer.tc(MyApp, :generate, [30_000_000, 1_000_000])
IO.puts("MyApp.generate #{microseconds / 1_000_000} seconds")


{microseconds, _} = :timer.tc(MyNif, :generate, [1_000_000, 1_000_000])
IO.puts("MyNif.generate #{microseconds / 1_000_000} seconds")

{microseconds, _} = :timer.tc(MyNif, :generate, [10_000_000, 1_000_000])
IO.puts("MyNif.generate #{microseconds / 1_000_000} seconds")

{microseconds, _} = :timer.tc(MyNif, :generate, [30_000_000, 1_000_000])
IO.puts("MyNif.generate #{microseconds / 1_000_000} seconds")

Run the script

mix run timing.exs

MyApp.generate 0.375 seconds
MyApp.generate 3.875 seconds
MyApp.generate 11.063 seconds

MyNif.generate 0.047 seconds
MyNif.generate 0.328 seconds
MyNif.generate 1.39 seconds

The results are far from scientific, but we can see that the NIF is roughly 10x faster in this example.

We have generated random integers, let’s see what happens when we sort them!

For Elixir, we’ll use Enum.sort - which uses the Erlang :lists module under the hood.

To implement our Rust sort, create and export the following function in lib.rs where we use the sort method on Vec structs in the standard library

#[rustler::nif]
fn sort(ints: Vec<i64>) -> Vec<i64> {
    let mut copy = ints.clone();
    copy.sort();

    copy
}

rustler::init!("Elixir.MyNif", [add, panic, crash, generate, sort]);

Load the function in MyNif

# my_nif.ex
# ...

def sort(ints), do: :erlang.nif_error(:nif_not_loaded)

Now update our timing script to sort our generated lists

{_, ints1} = :timer.tc(MyNif, :generate, [1_000_000, 1_000_000])
{_, ints2} = :timer.tc(MyNif, :generate, [10_000_000, 1_000_000])
{_, ints3} = :timer.tc(MyNif, :generate, [30_000_000, 1_000_000])

{microseconds, _} = :timer.tc(Enum, :sort, [ints1])
IO.puts("Enum.sort #{microseconds / 1_000_000} seconds")
{microseconds, _} = :timer.tc(Enum, :sort, [ints2])
IO.puts("Enum.sort #{microseconds / 1_000_000} seconds")
{microseconds, _} = :timer.tc(Enum, :sort, [ints3])
IO.puts("Enum.sort #{microseconds / 1_000_000} seconds")

{microseconds, _} = :timer.tc(MyNif, :sort, [ints1])
IO.puts("MyNif.sort  #{microseconds / 1_000_000} seconds")
{microseconds, _} = :timer.tc(MyNif, :sort, [ints2])
IO.puts("MyNif.sort  #{microseconds / 1_000_000} seconds")
{microseconds, _} = :timer.tc(MyNif, :sort, [ints3])
IO.puts("MyNif.sort  #{microseconds / 1_000_000} seconds")

And let’s take a look!

mix run timing.exs

Enum.sort 0.328 seconds
Enum.sort 6.156 seconds
Enum.sort 21.656 seconds

MyNif.sort  0.125 seconds
MyNif.sort  1.438 seconds
MyNif.sort  4.75 seconds

For the given lists, the NIF appears to be roughly 3 to 5 times as fast. Below is a comparison where I also generated and sorted 50 million and 100 million items.

Conclusion

Elixir is an excellent language for building distributed and fault-tolerant applications. Like most dynamic and memory-managed languages, it trades some performance for ease of use and reliability.

When maximum performance is required, it’s possible to call Native Implemented Functions from Elixir. Rustler allows the use of Rust for these native functions, giving us stronger safety guarantees against issues that could affect the reliability of the application.

Is home online?

Mon, 11 Nov 2019 00:00:00 +0000

Tracking electricity and internet uptime with a Raspberry Pi, GNU utils, and Apache on a Linux VPS.

Here in South Africa, we have ongoing issues with load-shedding - planned electricity interruptions to “prevent the collapse of the power system”. This is mostly due to the corruption of the South African government, and the ineptitude of the failing public utility Eskom. On top of that the municipal providers also have major issues keeping their substations working - even outside of load-shedding!

Which is to say, my house is often without power, enough that I have finally made a system to “track” whether the electricity is on at home that I can check remotely. This basically requires that the internet also be working, but given that my ISP is more reliable than the electricity supply it’s not a problem.

📸 Alex Dukhanov @ Unsplash

Project goals

Using the Linux VPS and Raspberry Pi I already have:

Create a password protected webpage that can tell me if the electricity/internet is on at home
If it’s off, show me when last it was on
Make it as simple and reliable as possible
No database or programming language setup
Keep historical data for interest/analytics
If possible, use only built-in GNU/Linux tools!

Check out the code in the Github repository delta1/uptime.

Here’s the result!

⚡ Electricity tracker online!

How it works

A cron job on the Raspberry Pi at home uses curl to request a basic HTML page with a specific query string from the VPS every minute it’s online.
The Ubuntu 18.04 VPS runs Apache HTTP Server to serve a virtual host on a custom subdomain. Apache logs all access requests to a specific file.
The uptime report page is a CGI bash script. It uses GNU/Linux tools to filter the access log and generate the HTML for the page. It also uses jq to generate a JSON file from the logs to use in a Chart.js graph.
This page is secured by basic authentication, and TLS thanks to Certbot.

Learning

I love hacking on things like this and trying to find different or interesting ways to solve problems! It’s always a rabbit hole. Here are the things I learnt about in the process of creating this system.

htpasswd

htpasswd is a command line utility that ships with Apache, used for managing the files that store user credentials for basic authentication.

Using it is fairly simple, firstly your Apache configuration defines the basic auth requirements:

<Directory "/path/to/folder">
        # ...
        AuthType basic
        AuthName "Authorization Required"
        AuthUserFile /path/to/folder/.htpasswd
        Require valid-user
        # ...
</Directory>

Then use the htpasswd utility to create the file:

# create a new password file ".htpasswd" for user "admin"
htpasswd -c /path/to/folder/.htpasswd admin
# you will be prompted to enter the password

By default the password is hashed with the Apache MD5 algorithm - let’s see what the file looks like for the password “test”

$ cat /path/to/folder/.htpasswd
admin:$apr1$JTztWOb0$MC.LHwVsu/ZR0iVxq/Ma..

More information about htpasswd options and examples on the documentation site.

logrotate

By default, Apache log files are “rotated” on Ubuntu by the system utility logrotate. Log rotation is the automated process of archiving, compressing, renaming, and/or deleting log files - in order to restrict their size and keep current logs small enough to be viewed.

Configuration files for logrotate can be found at /etc/logrotate.d/. In this case, I want to keep old logs around for analysis later and used the following configuration:

# /etc/logrotate.d/apache2
/path/to/log/*.log {
        # rotate the log files each month
        monthly
        # keep the last 120 versions (10 years of monthly logs)
        rotate 120
        # compress them - if enabled in logrotate.conf base file
        compress
        # delay compression if the log is not closed immediately
        delaycompress
        # use the following Linux permissions, user, and group
        create 640 www-data www-data
        # apache defaults omitted ...
}

Common Gateway Interface (CGI)

CGI is a protocol that enables web servers to execute command line programs on the server to dynamically generate HTML. It was first introduced in 1993, making it the first method of creating dynamic webpages!

I used it here since it was easy to set up in Apache, and as simple as using a bash script to set some variables I could use on the report page.

# Apache config
<Directory "/path/to/folder">
        # ...
        Options +ExecCGI
        AddHandler cgi-script .cgi
        # ...
</Directory>

The contents of the CGI report script: /path/to/folder/cgi/report.cgi

#!/bin/bash

# we need to write the content type header first
# before any content
# followed by an empty line
echo "Content-type: text/html"
echo ""

# filter out the log lines we want that contain action=track
grep action=track ../log/access.log > action.log

# put the last 24+ hours worth into a json file
# but just keep the date strings
# so we can parse them into date objects for the graph
tail -n 1440 action.log | cut -d "[" -f 2 | cut -d "]" -f 1 | sed 's/:/ /' | sed 's/\//-/g' | jq -R -s -c 'split("\n") | map(select(. != ""))' > 1440.json

# set environment variables
export CURRENT_DATETIME=$(date +"%A %d %b %Y - %T");
export LAST_TRACK=$(tail -n 1 action.log);
export LAST_IP=$(tail -n 1 action.log | cut -d " " -f 1);
export LAST_ONLINE=$(tail -n 1 action.log | cut -d "[" -f 2 | cut -d "]" -f 1 | cut -d " " -f 1  | sed 's/:/ /' | sed 's/\// /g');
export LAST_DATE=$(cut -d " " -f 1-3 <<< $LAST_ONLINE);
export LAST_TIME=$(cut -d " " -f 4 <<< $LAST_ONLINE);

# substitute environment variables into the template file
envsubst < template.html

exit 0

Those linux pipelines are pretty terse, here’s a breakdown of line 15 above:

# create a json file of date strings
# each line in action.log resembles this format:
# 111.22.111.33 - [07/Nov/2019:18:47:02 +0200] "GET /?action=track HTTP/1.1"

# take the last 1440 lines from action.log
tail -n 1440 action.log |
# 'cut' each line at the '[' char and take the 2nd part
cut -d "[" -f 2 |
# 'cut' each line at the ']' char and take the 1st part
cut -d "]" -f 1 |
# replace the first ':' char with a space
sed 's/:/ /' |
# replace every '/' char with a dash
sed 's/\//-/g' |
# at this point all that's left are the dates, eg:
# 27-Nov-2019 18:47:02 +0200
# now use the jq utility to create a json file
# with an array of these dates
jq -R -s -c 'split("\n") | map(select(. != ""))' > 1440.json
# explanation of this 'jq' line follows

The command line utilities tail, cut, and sed are free software designed and developed by GNU. They are generally already installed on Linux distributions, and are very useful tools to know.

The last line above uses jq - a “lightweight and flexible command-line JSON processor” - to create a json file with an array of dates.

The jq options and filter used above are as follows:

-R / --raw-input : Don’t parse the input as JSON - since we are inputting lines of strings.
-s / --slurp : Read the entire input stream into a large array and run the filter just once.
-c / --compact-output : Compact output instead of pretty print.
split("\n") | map(select(. != "")) : split the input by newlines into an array, and only keep the values that are not empty

You can read more in the jq manual and tutorial.

envsubst

Instead of printing HTML strings with echo, I wanted to find an elegant way to replace values in a template. I stumbled upon this serverfault.com question and answer which introduced me to envsubst - another beautiful piece of GNU software that “substitutes the values of environment variables” into the input string!

Using envsubst made the CGI program above as easy as exporting some environment variables, and using the HTML page as an input.

# read the file "template.html" into envsubst,
# which substitutes strings like ${NAME} with the env variable NAME
# and writes the resulting output to stdout
# which the webserver sends as a response to the web request
envsubst < template.html

You can see my HTML template in the Github repo.

This was probably my favourite new piece of software I learnt in this project, it easily accomplished what I was trying to do - with a simple built-in command!

Chart.js

I took this opportunity to learn the basics of Chart.js, a popular and free graphing library. The list of samples is impressive, and you can see how I created the graph in the uptime.js file of the repo.

Thanks to Moment.js it was easy to parse and work with dates. Thankfully I don’t have to support any old browsers so I was able to use “new” Javascript features like fetch, async/await, arrow functions, and template literals - without needing a transpilation step.

Style updates

Fri, 18 Oct 2019 00:00:00 +0000

User experience improvements, including dark mode and a reading progress bar.

📸 Adam Birkett @ Unsplash

Flashing cursor

I thought it would be cool to make the link in the header look like it has a flashing cursor. So I slapped a <blink> tag on it! Just kidding, the blink tag is obsolete, so I found a CSS animation and tweaked it as required. Simply animate the text color to transparent and back each second, infinitely.

// SCSS

.blink {
  color: $grey-color;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: $grey-color;
  }
}

Reading time estimate

I added a reading time estimate next to the published date, with the following Liquid include. It works by counting the number of words in the content, and dividing it by an average reading speed. I had to wrap the snippet below in raw tags so that it isn’t evaluated by Jekyll at build time!

{{
  content
    | number_of_words
    | plus: 200
    | divided_by: 200
    | prepend: "⏱️ "
    | append: " min read"
}}

Reading progress bar

I like the cosmetic effect of an animated progress bar while reading, enough to sacrifice my “Javascript only for analytics” rule. The site still works perfectly with Javascript disabled, which is what really matters - to the tech crowd anyway. Minimizing Javascript is good for mobile sites in general, as it all needs to be downloaded, parsed, and compiled. This increases CPU load and uses more energy from your precious battery.

The progress bar works by adding a <progress> element to the page, and updating its value attribute when scrolling. An event listener is added to the scroll event, but we decouple the animation from the input events by using requestAnimationFrame to cue the animation for the next browser repaint.

// add a <progress> element to the page, style and position it to taste
// <progress id="progress" max="100" value="0"></progress>

window.addEventListener("load", setup);
window.addEventListener("resize", setup);
var listening = false;

function setup() {
  var scrollPosition = 0,
    ticking = false,
    progress = document.getElementById("progress"),
    body = document.body,
    html = document.documentElement,
    width = 0;

  var height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );

  var maxScroll = height - html.clientHeight;

  function update() {
    scrollPosition = window.scrollY || window.pageYOffset;
    if (!ticking) {
      window.requestAnimationFrame(function() {
        progress.value = (100 * scrollPosition) / maxScroll;
        ticking = false;
      });
      ticking = true;
    }
  }
  update();
  if (!listening) {
    // only add the scrolling event listener once!
    window.addEventListener("scroll", update);
    listening = true;
  }
}

Dark mode

I recently found out about the prefers-color-scheme CSS media feature after seeing this post by Tom Brow, and I had to have it. Something about great artists stealing, and all that. 🔪

Initially I was looking for a dark mode option in browser settings, before finding out it’s an operating system wide setting. Here’s what it looks like on Windows 10.

Sorry, your browser doesn't support embedded videos.

ScreenToGif is awesome!

This is nice and easy to do, just add another @media declaration to your css, and then overwrite your styling as required. A really nice tidbit from Tom’s article is to apply a slight grayscale filter to the images in dark mode, so they are subtly less bright.

// SCSS

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #eee;
  }
  pre,
  code {
    background-color: #444;
  }
  img {
    filter: grayscale(20%);
  }
  a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2px $orange-color solid;
    transition: color 1s;

    &:hover {
      color: $orange-color;
    }
  }
  p {
    color: #ddd;
  }
}

Here’s how to enable dark mode on MacOS, iOS, and Android.

With style updates done, for now, I can concentrate on writing something a bit more technical. Until next time!

Hacktoberfest - 2019

Fri, 11 Oct 2019 00:00:00 +0000

A quick rundown of the pull requests I submitted for Hacktoberfest.

Hacktoberfest is an annual event to encourage involvement in open source software. Anyone around the world can earn a limited edition T-shirt, by submitting 4 or more pull requests to Github-hosted repositories during the month of October.

I wanted to take part for the past 2 years but didn’t manage in time. I was determined to earn my shirt this year! I knocked out the 4 PRs in the first week of October, and now it’s just a matter of waiting for the shirt to ship and hoping it doesn’t get “lost” in the SA customs/postal system.

This year I wanted to work on Elixir related documentation and code. I submitted 3 PRs to ElixirSchool, and 1 to Nadia.

Elixir School

Elixir School is “the premier destination for people looking to learn and master the Elixir programming language.”

It’s a really great community of passionate Elixir developers, writing lessons and blog posts about their favorite programming language and ecosystem. They are very welcoming and friendly, and it was great to get involved.

My pull requests:

#2008 - Documentation in the “collections” lesson.
#2009 - Add an RSS feed for the site’s blog posts.
#2011 - Documentation in the “Ecto changesets” lesson.

Nadia

Nadia is a “Telegram Bot API Wrapper written in Elixir”.

I’ve been using this library on a side-project, and wanted to contribute back. There was a relatively simple request to add the “Pin Chat Message” API call in issue #94, so I decided to work on that.

In this PR I learned about ExVCR, an Elixir library inspired by Ruby’s VCR, which allows you to record HTTP responses in your test suite so that future test runs use the recorded responses instead.

Since it was already in use in the Nadia library, it was fairly simple to add tests for the pin/unpin chat message functionality. I already had a Telegram bot I used for testing, so I created a new group, and then posted a message using the bot. That provided the chat ID, message ID, and API responses when calling PinChatMessage and UnpinChatMessage.

The ExVCR.Config module also provides the filter_sensitive_data/2 function to strip sensitive data out of the recorded response!

My pull request:

#96 - Implement pinChatMessage and unpinChatMessage.

Have you earned your shirt yet? Head to the Hacktoberfest website and start hacking!

Hello World

Thu, 26 Sep 2019 00:00:00 +0000

I decided to start a blog.

IO.puts("Hello World!")

I plan to use this as a technical blog, to write about things I learn, and become a better developer.

This first post is a simple one, about the blog itself and the tools used to make it.

tl;dr

domain: name.com

hosting/dns: Netlify

static site generator: Jekyll

theme: customised fork of Amplify with AMP removed

analytics: Google Analytics

I knew I wanted a static site generator, preferring to write in markdown, and the simplicity of deployment and DNS management with Netlify. I decided to go with Jekyll for the static site generation.

When choosing a theme, I wanted something lightweight with good readability. I copied Amplify, but I ripped out all the AMP tags and Javascript. I kept what I liked: the typography and most of the styling, and the performance gained by limiting Javascript and inlining CSS in the document head. I also updated the code highlighting stylesheet to use monokai.css.

The only Javascript included is Google Analytics, and the site will happily work even with Javascript disabled.

CSS is inlined in a style tag in the theme by using scssify, and strip_newlines.

So with all of that, what’s the performance like?

According to the Chrome Lighthouse audit: good enough for me.

There it is! Welcome to my blog, you can follow new posts on RSS.