Skip to main contentGo back to the homepage

I am Fernando van Loenhout
A Full stack developer!

Theme:

Hi, I'm Fernando van Loenhout

I am a Full Stack developer, an electronic specialist and a hobbyist. I like to talk about many technical things, so be prepared to read everything I want to tell you. Blogging is a fun thing to do, and I occasionally post content here. I also do development work in my hobby time, mainly to improve my skill levels. This website was not possible to make if I was not at the skill level that I am today. If you ask any fellow programmer, they will say making the following hexagon layout is one of the hardest things to make.

Articles

Setting up Wireguard

Dated:
This article has been posted under the following categories: blog, devops and wireguard

It is time to learn something new again, his time it is the VPN solution Wireguard

Internals

Wireguard is based around a TUN network interface. This network interface has multiple properties:

#wg show wg0
interface: wg0
  public key: jyhyusgqxdzT732wlJa7nQCMqUvQnpC//SUjCBAsniI=
  private key: (hidden)
  listening port: 47761
  fwmark: 0xca6c

peer: WjzcgNo1uYO0KoThtCz6ecgA2a33HJ5Lu5ZBHpIXIDw=
  preshared key: (hidden)
  endpoint: server.example.com:65
  allowed ips: 0.0.0.0/0, ::/0

The…

Read more...

Exploring the details html element

Dated:
This article has been posted under the following categories: blog, exploring, html and under-used

One of the underused HTML elements is the <details> element. For the uses cases this tag gives you, it is not used enough on websites.

Lets explore its uses together. This tag is used to make an expanding/collapsing detail/summary view. The browser then adds interaction to the element, allowing the user to open/close the element itself. Lets take a look at a basic example:

<details>
    <summary>This is the summary</summary>
    <p>This is the body</p>
    <p>Multiple tags are allowed here</p>
</details>

Read more...

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...

My new website

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

Read more...

How I found a TypeScript public playground XSS exploit

Dated:
This article has been posted under the following categories: blog, security, xss and typescript

In 2021, I was playing around with the online TypeScript sandbox, when I discovered a weird issue. When trying to write XML to the terminal, it instead of showing me the string representation, it was actually executing it.

While it makes sense for a code sandbox to execute the code you input, it is important it stays within the sandbox, as the sandbox has the proper restrictions put on the javascript environment, which includes blocking cookie access and fetch access at a minium.

The exploit

The…

Read more...

Making a backup of your GitHub repositories

Dated:
This article has been posted under the following categories: blog, backup and github

When working with GitHub, you have the advantage that everything is stored in the cloud. While this is fine for most people, it can be useful to make a local backup in the case you expect to have no internet for a certain period of time, like a vacation.

Results of the mirror (image)

Initial backup tool

Lucky for us, git already has the features build in to effectively mirror a remote repository using the mirror flag, so the only thing left for us, is getting a list of repositories to clone.

This…

Read more...

Competa

Dated:
This article has been posted under the following categories: career and portfolio

Competa is a company that specializes in renting programers to other companies.

My role

During my stay at Competa, I have done many projects, many internal. I also have done coaching of other developers and interns there.

Projects

  • An old version of the website (replaced by a more modern website at the moment)
  • Trainee program
  • Training program for other developers

Tech stack

  • HTML5
  • CSS3
  • JavaScript
  • TypeScript
  • PHP
  • Wordpress
  • Webpack
  • Grunt
  • Gulp
  • React
  • VueJS

View article

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...

Id College

Dated:
This article has been posted under the following categories: career and school

This was a study on the course Application Developer 4.

View article