All posts from March 2022

Articles

Writing your own webpack loader

Dated: March 25, 2022
This article has been posted under the following categories: blog, tech-demo, webpack, loader and from-scratch

Webpack looks like a quite intimidating system, but having played around with them, they are very simple. In this article we will be creating our own loader from scratch and adding them to our webpack configuration.

Basics of a loader

The core concept is a loader is basically a function that maps input to output. Loaders have the requirement is being written in the commonjs format, meaning you work with module.exports and require. An basic example:

module.exports = function stringReplacingLoader(input) {
    return input.replace("World", "Earth");
}

React bare bones setup

Dated: March 23, 2022
This article has been posted under the following categories: blog, tech-demo, react, webpack, bare-bones and from-scratch

When you start with React, it is common that you just start a project with the CRA tool. While this quickly makes a project, it also does lots of magic in the background to make it work. For learning purposes, it can be better to write your own configuration to build a react application.

Very simple setup

It is possible to use the ReactJS framework without using any transpilers. For this, make a new directory for our project and make a index.html file containing the following content:

<!DOCTYPE html>
<html>
    <head>
        <title>My React app</title>
    </head>
    <body>
        <script src="react.development.js"></script>
        <script type="module" src="/main.js"></script>
    </body>
</html>

My new website

Dated: March 15, 2022
This article has been posted under the following categories: blog, portfolio, skills, loader and jsx

If you read this quickly after publication, the chance is high you are on my newly build website. There are multiple techniques used on this website to archive my goals. Doing this mix with a static website vs easy to add content was quite the technical challenge, but looking at this website shows I succeeded in my goals.

Goals

Static HTML pages
Minimal javascript
Automatic compiling of markdown posts
Dark/white theme support based on the browser, with user override
Quick load times
Contribution…