Skip to main contentGo back to the homepage

I am Fernando van Loenhout
A Full stack developer!

Theme:

Tag tech demo

Articles

Writing your own webpack loader

Dated:
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");
}

Read more...

React bare bones setup

Dated:
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>

Read more...

Creating a breakout game

Dated:
This article has been posted under the following categories: tech-demo, typescript and from-scratch

View result of this coding project

Creating small Javascript games is a great way to learn coding. As part of learning, I developed a breakout game. This game features a level selection screen, which generates levels based on some math.

This game used the module pattern to connect all the components together.

Features

  • Pause screen using the escape key
  • Hidden AI activated using the developer console
  • Hidden powerups activates used the developer console
  • Uses…

Read more...