Skip to main content

Portfolio of Heini Fagerlund

Full-stack web application developer specializing in web accessibility

Open Source Projects

Dockerizing an Erlang app

Posted on | Updated on

OTP application, Emakefile, EUnit

This project began as a simple 'hello world' exploration of the Erlang language which was later organized into an OTP application directory structure using an Emakefile to compile multiple source files and enable separation of source, test, and .beam files. EUnit was also added for unit testing.

Docker, Docker Compose, Dev containers

Adding Docker changed the build from running in the Erlang shell, to using the Docker container's interactive shell. The Dockerfile (1.) compiled a small Erlang program to produce a BEAM file that could then be executed on the Erlang VM, and (2.) ran the sequential Erlang program as a common script and then exited.

Docker Compose simplified how the program was launched. Development containers (dev containers) — which can be used with or without VSCode — are another (optional) layer to ensure environmental reproducibility.

Rebar3

In the next version (v0.2.0), Rebar3 — a build tool and package manager for Erlang — was used to auto-generate the application structure (in a subdirectory, subsequently moved into the root). Note: Rebar3 does not replace the OTP file structure, instead it enables building OTP-compliant applications. The 'hello.erl' example was also updated.

Component architecture

Posted on

The elections-carousel-component project consists of a collection of components that receive election results data from an external API and display it as a carousel.

Screenshot of elections-carousel-component
Screenshot of elections-carousel-component

The component hierarchy is shown in Figure 1, which illustrates the nesting of the seven component types (eight types, if the ErrorBoundary component is counted).

Figure 1: React component hierarchy
Figure 1: elections-carousel-component: Component hierarchy

All of the components are written in pure React (ie. not using Flux or Redux since this is a simple demo), and pass data to one another as shown below:

Sibling components' communication via parent React component
Figure 2: React components' data loop

Full source code for the project is available on GitHub.

docSkimmer theme for MkDocs

Posted on | Updated on

My new docSkimmer theme for MkDocs is now available on GitHub.

docSkimmer: accessible and responsive HTML5 theme for MkDocs
Figure 3: Screenshot of docSkimmer theme for MkDocs

Ready-to-use theme

A demonstration of the docSkimmer theme is available on its own documentation site, which uses the theme straight out-of-the-box.

Customizable for any project

Another example of a project documentation site using the docSkimmer theme demonstrates how this theme can easily be customized.

Write Once, Log Many Ways

Posted on

git-add-msg is a command-line tool that I developed to save time (and typing) when using Git alone, or with Trac. Instead of typing the following (in your project's root directory):

Figure 1. Shell commands required before installing git-add-msg

          $ git add .
          $ git commit -am "this is my commit message"
          # or for Trac users:
          $ git commit -am "#123: this is my commit message"
          
Figure 2. Only one (shell) command is required after installing git-add-msg

          $ git add-msg
          

There is no follow-up cutting-and-pasting of commit hashes to Trac required either, since a comment with a link to the changeset and repository (as well as the commit message itself) is automatically added to the specified Trac ticket. The $ git log information for each commit is added to a plain text changelog file as well — which could be copied or attached to another issue-tracking or ticketing system, if desired.

Features

Features of git-add-msg (version 0.1.1) include:

Enjoy!

Cookie Policy

No cookies were used in the making of this site.