<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  >
  
  <channel>
    <!-- <atom:link href="https://bytesofdesign.com/rss_en.xml" rel="self" type="application/rss+xml" /> -->
    <dc:rights>Copyright 2026 Heini Fagerlund</dc:rights>
    <title>BYTESofDESIGN.com: Open Source Projects</title>
    <link>https://bytesofdesign.com/</link>
    <description>Portfolio of full-stack web application developer Heini Fagerlund, specializing in web accessibility.</description>
    <dc:language>en</dc:language>
    <dc:creator>info@bytesofdesign.com (Heini Fagerlund)</dc:creator>
    <item>
      <title>Dockerizing an Erlang app</title>
      <link>https://bytesofdesign.com/#article_erlang</link>
      <guid>
https://bytesofdesign.com/#article_erlang
</guid>
      <description>Creating a portable Erlang app development environment on Linux using Docker and adding development containers (dev containers).</description>
      <pubDate>Wed, 15 Jul 2020 09:56:51 GMT</pubDate>
      <content:encoded><![CDATA[<p>This project began as a simple 'hello world' exploration of the Erlang language which was <a href="https://github.com/hfagerlund/erlang-experiments/tree/155c37ea622123dc0c5e6b2fc75379a9c8ff2c8d" title="View initial OTP file structure (v0.1.0)">later organized into an OTP application directory structure</a> using an Emakefile to compile multiple source files and enable separation of source, test, and .beam files. EUnit was also added for unit testing.</p>
    <p><a href="https://github.com/hfagerlund/erlang-experiments/tree/29a853b0e62e1115830e68edb172075022a172cf" title="View initial 'Dockerized' version">Adding Docker</a> 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.</p>
    <p><a href="https://github.com/hfagerlund/erlang-experiments/tree/3633a14ff052228c139ae8b2df4b6902efbf17ef" title="View initial Docker Compose' version">Docker Compose</a> simplified how the program was launched. <a href="https://github.com/hfagerlund/erlang-experiments/tree/71c50843eca7c9f9e8258a8f1c3c4330e819f3dd" title="View initial dev container version">Development containers (dev containers)</a> &mdash; which can be used with or without VSCode &mdash; are another (optional) layer to ensure environmental reproducibility.</p>
        <p>In the <a href="https://github.com/hfagerlund/erlang-experiments/releases/tag/v0.2.0" title="Version 0.2.0">next version (v0.2.0)</a>, Rebar3 &mdash; a build tool and package manager for Erlang &mdash; 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 <a href="https://github.com/hfagerlund/erlang-experiments/blob/master/src/hello.erl" title="Source code of hello.erl v0.2.0">'hello.erl' example</a> was also updated.</p>]]></content:encoded>
    </item>
    <!-- *** -->
    <item>
      <title>Component architecture</title>
      <link>https://bytesofdesign.com/#article_react</link>
      <guid>
https://bytesofdesign.com/#article_react
</guid>
      <description>A component-based carousel presentation of election results data from an external (JSON) API using pure React.</description>
      <pubDate>Wed, 28 Mar 2018 05:47:15 GMT</pubDate>
      <content:encoded><![CDATA[
      <p>The <a href="https://hfagerlund.github.io/elections-carousel-component/">elections-carousel-component</a> project consists of a collection of components that receive election results data from an external API and display it as a carousel.</p>
      <p><img src="https://bytesofdesign.com/img/screenshot_elections.webp" alt="Screenshot of elections-carousel-component" /></p>
      <p>The component hierarchy is shown in <a href="https://bytesofdesign.com/#component-hierarchy" title="Jump to Figure 1 (React component hierarchy)">Figure 1</a>, which illustrates the nesting of the seven component types (eight types, if the ErrorBoundary component is counted).</p>
        <p><img src="https://bytesofdesign.com/img/component-hierarchy.webp" alt="Figure 1: React component hierarchy" /></p>
        <p>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:</p>
        <p><img src="https://bytesofdesign.com/img/sibling-components_communication-via-parent.webp" alt="Figure 2: React components' data loop" /></p>
        <p>Full <a href="https://github.com/hfagerlund/elections-carousel-component/">source code</a> for the project is available on GitHub.</p>
    ]]></content:encoded>
    </item>
    <!-- *** -->
    <item>
      <title>docSkimmer theme for MkDocs</title>
      <link>https://bytesofdesign.com/#article_docskimmer</link>
      <guid>
https://bytesofdesign.com/#article_docskimmer
</guid>
      <description>docSkimmer is an accessible skimmable theme for documentation sites built using MkDocs.</description>
      <pubDate>Sat, 17 Jun 2017 16:20:00 GMT</pubDate>
      <content:encoded><![CDATA[
      
      <p>My new <a href="https://github.com/hfagerlund/mkdocs-docskimmer/">docSkimmer theme</a> for <a href="https://github.com/mkdocs/mkdocs/">MkDocs</a> is now available on <a href="https://github.com/">GitHub</a>. 
          <p><img src="https://bytesofdesign.com/img/mkdocs-docskimmer.webp" alt="Figure 3: Screenshot of docSkimmer theme for MkDocs" /></p>
                    
          <p>A demonstration of the docSkimmer theme is available on <a href="https://hfagerlund.github.io/mkdocs-docskimmer/">its own documentation site</a>, which uses the theme straight out-of-the-box.</p>

        <p>Another example of a <a href="https://hfagerlund.github.io/elections-carousel/">project documentation site using the docSkimmer theme</a> demonstrates how this theme can easily be customized.</p>

        <p>Related projects:</p>
        <ul><li>Check the compatibility of docSkimmer theme and MkDocs versions, without having to install either locally, using <a href="https://github.com/hfagerlund/docker-for-docskimmer">docker-for-docskimmer</a>.</li>
        <li>Add (persistent, preferred and/or alternate) external stylesheets to custom MkDocs themes using <a href="https://github.com/hfagerlund/mkdocs-docstyler-plugin">mkdocs-docstyler-plugin</a>.</li>
          
        <li>docSkimmer theme has also been ported for Jekyll. See a demo on <a href="https://hfagerlund.github.io/">my GitHub Pages site</a>.
        Get the latest version of <a href="https://github.com/hfagerlund/jekyll-docskimmer-theme/releases" title="docSkimmer theme for Jekyll">jekyll-docskimmer-theme</a>.</li></ul>
    ]]></content:encoded>
    </item>
    <!-- *** -->
     <item>
      <title>Write Once, Log Many Ways</title>
      <link>https://bytesofdesign.com/#article_git-add-msg</link>
      <guid>
https://bytesofdesign.com/#article_git-add-msg
</guid>
      <description>git-add-msg is a git extension (command line tool) that automatically logs commits to Trac and/or a changelog.</description>
      <pubDate>Thu, 16 Jul 2015 23:39:11 GMT</pubDate>
      <content:encoded><![CDATA[
      <p>
          <a href="https://github.com/hfagerlund/git-add-msg/">git-add-msg</a> 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):</p>
        <figure>
          <figcaption>Figure 1. Shell commands required before installing <a href="https://github.com/hfagerlund/git-add-msg/">git-add-msg</a></figcaption>
          <pre><code>
          $ git add .
          $ git commit -am "this is my commit message"
          # or for Trac users:
          $ git commit -am "#123: this is my commit message"
          </code></pre>
      </figure>

      <figure>
          <figcaption>Figure 2. Only one (shell) command is required after installing <a href="https://github.com/hfagerlund/git-add-msg/">git-add-msg</a></figcaption>
          <pre><code>
          $ git add-msg
          </code></pre>
      </figure>
      
      
      <p>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 <code> $ git log </code> information for each commit is added to a plain text changelog file as well &mdash; which could be copied or attached to another issue-tracking or ticketing system, if desired.</p>
      
       <p>Features of git-add-msg (version 0.1.1) include:</p>
        <ul>
        <li>Supports multi-line commit messages (note: supported yes, but display is a known issue...);</li>
        <li>Enforces non-blank commit messages;</li>
        <li>Automatically generates link to changeset including repository name in the Trac ticket comment (useful when more than one repo is being used per same Trac environment);</li>
        <li>Enables changing the name of the repository associated with Trac ticket using the <code>-r</code> option;</li>
        <li>Displays an error message if the Trac ticket is not/cannot be updated.</li>
        </ul>
        <p>Enjoy!</p>
      
    ]]></content:encoded>
    </item>
    <!-- *** -->
  </channel>
</rss>