johannespour.de

Achievements

Tch1b0

What?

This is a Visual Studio Code extension that adds game-like achievements to the code editor. My goal for this project was to sometimes give the user a little "reward" for what they were doing.

Examples

If a file ending with .asm is created, the achievement Bye Friends is unlocked
If a .b file is deleted, the achievement That's not how a brain works is unlocked

Technical Aspects

The Achievements extension was my first interaction with TypeScript, the VSCode API and building an extension in general, so there was pretty much to learn.

What I learned

dsbmobile.js

Tch1b0

dsbmobile

Digitales Schwarzes Brett (DSB) is an online-substitution plan that is widely used in Germany.

Why?

Since there was no package in JavaScript to interact with the dsbmobile API, I figured I had to make one.

Also, I needed the package for myDSB and other private projects.

How does it work?

As a User

Since the API only gave me an html response, I needed to parse the things I needed from that file, which isn't the cleanest thing to do, but it works.

You can easily interact with the package like this:

import DSBmobile from "dsbmobile"

const api = new DSBmobile(, );
const table = await api.getTimetable()

and that's all! Nothing more is needed to get the table, which is otherwise only displayed as an html file.

Behind the Scenes

While the NewsPost and DocumentPost are pretty normal http-requests, the Timetable is a bit more interesting, as the API responds with an HTML file. So when requesting the Time Table, I am receiving all of the information I need, but in a pretty bloated way. Using the cheerio package, I am iterating over certain parts of the HTML file to gather the information that I want.

Some difficulties

Because there is no official documentation of the dsbmobile API, I had to reverse engineer it to find out which routes, methods and data I need.

Technical specifications

JP-nuxt

Tch1b0

What?

This project is the site you are currently reading this article from. Not just the back- or the frontend, but both combined. This site is built with Nuxt.js, which is a Vue framework, that enables server-side rendering and gives much other neat utility.

Why?

The problem

My previous site was also built with Vue, but with client-side rendering and worse styling.

The main problem that bothered me was that the site needed way too long to load, and if you clicked on a post, it would take an entire second to load the actual article. While waiting for the content for loading, you would sit in front of a blank article screen, with nothing indicating that anything is happening.

Another problem was that there was no real data management. By this, I mean that on the front page every single article was already loaded with every single bit of its information. But when you entered a certain article, the entire block of data was fetched again.

Now I could start talking about the styling, the backend or the upload page, but I think I made my point clear. I saw flaws all over the site.

The solution

When I discovered Nuxt.js I thought that this would be exactly what I needed. And that is still my opinion.

Compared to my old site, the new site is loading blazingly fast and the user has to fetch way less data, because now that the backend and the frontend can communicate better with each other, the data is able to be fetched and handled smartly.

When it comes to styling, I started using Tailwind CSS and tried to think more about the design, which seems to have worked out, because I see fewer flaws with the design on this site.

Choice of the name

Previously I have always named my main-site "JP". But when I realised that I rewrite the entire page every now and then, I thought I might name it individually so I don't have to overwrite the repository as I did with JP-old. I named this project "JP-nuxt" because I think that this will be the only version of my site that is built with Nuxt.js. Not because I don't like Nuxt.js, but because with my website, I always test out new technology. So my next project will maybe be made using Next.js, Svelte Kit or I might go back to the roots and generate simple static sites like evilcookie.de.

The problems I encountered

When setting up my project, I decided to use Nuxt 3, which may not have been the wisest decision, because it is so new and unstable that nearly none of the plugins for Nuxt.js works. So I had to make most of the basic stuff on my own.

What annoyed me, was that I wasn't able to use express.js in the backend, and I had to handle requests via the default http module in node.js, which isn't as nice to use as express.js. So to abstract things a bit, I started building a little router, that at least makes me feel like I was using express.js. The router looked basically like this:

class Router {
    // Every request type has its own map of routes pointing to handlers
    handlers = new Map([
        ["GET", new Map()],
        ["POST", new Map()]
    ])

    get(route, handler) {
        // Get the `GET` handler map and set the route to the new handler
        this.handlers.get("GET").set(route, handler)
    }
}

With the router I was able to create new routes like this:

const app = new Router()
app.get("/my-route", (request, response) => {
     // do something...
    response.end("Ok")
});
// GET /my-route => Ok

So with this set-up, building the backend was more fun than I expected it to be. Of course, the real router is more complex than this, so if you want to read the source code you can look at it on GitHub.

Technical specifications

... and many more. To see all the tech I used, go to the GitHub repo.

battlesnake-builder

Tch1b0

Idea

The idea of this library is, to abstract the process of building a BattleSnake to its fundamental parts. Which is declaring functions that get called when a move is requested. But not just that, but also accessible game-data(enemies, coordinates) and a session-wide store(for storing data across different events).

Implementation

As a user, you can just build a new snake like this:

from battlesnake_builder import BattleSnake

my_snake = BattleSnake()

@my_snake.on_move
def move(_data, _store):
    return "up"

my_snake.run()

While behind the scenes, the library just assigns the move function to the on_move callback, which is called when the route /move is accessed. The BattleSnake object also passes two parameters into the callback, which are data and store. The data is just the data that the client sent, parsed into python-objects. The store is just a dictionary, in which you can store whatever you want, across different events in the same session. With the my_snake.run() the lib starts a Flask-server.

Esproso (my BattleSnake)

aoc2021

Tch1b0

AO-what?

The Advent of Code is a yearly advent calendar that provides a new coding challenge every day while getting more difficult over time.

My Attempt

The Preparation

This year, I tried to be prepared and made the aoc-helper(source code), a cli that allows me to easily generate a template for my solution with unit tests in the programming language of my choice.

With this command:

$ aoc -d 4 -l py

I was able to generate a template for aoc-day 4 in the Python language.

And by using this command:

$ aoc gen-doc

Every single solution got their own little README that told a bit about the content.

The cli was made using Crystal, while the solutions to the tasks were written in Python.

How it Turned Out

The aoc-helper saved me a lot of time by automatically generating what I needed. For 10 days straight I was able to solve the daily task. After the 10th day I slowly lost motivation, because the tasks kept getting harder and I needed longer to solve them. Despite this, I am happy with my performance, and planning to improve next year.

myDSB

Tch1b0

What?

myDSB is an app for the DSBmobile service, which is a famous service for substitution plans in Germany.

Idea

The Problem

Since the official DSBmobile app was the only way to access my substitution plan, I was required to use it.

The app itself provides a table containing every substitution of every class of the school, so I always needed to search where exactly the substitutions that were relevant to me were.

And after some time, I thought: "Why can't I just filter the irrelevant data?".

The Solution

The solution was to build a library to interact with the DSBmobile API and a mobile application to display the filtered information in a readable format.

I decided to develop my library & app in TypeScript, as I wanted cross-platform compatibility.

Execution

As I was pretty new to Javascript/TypeScript and Vue at the time, the development initially took a bit to get to a state where the app was usable.

The library I created is dsbmobile.js.

Technical specifications

Esproso

Tch1b0

What is a Battlesnake?

Generally

A Battlesnake is a bot that competes against other Battlesnakes in a snake-like game on play.battlesnake.com.

In-depth

A BattleSnake is an http-Server with the endpoints /start, /move and /end. The BattleSnake Servers send a new request each turn, containing all the necessary information.

Example Response

{
    "move": "up",
    "shout": "WHY ARE WE SHOUTING?"
}

Tactic

Esproso is trying to survive as long as possible, and not really caring about other snakes as long as they stay out of their way. To achieve this, Esproso first looks if there is some obstacle right next to him, and sorts the given moves out. Afterwards, it looks for food nearby and calculates the lowest distance right before heading for it.

What I learned

When I started the project, the Golang programming language was still pretty new for me, so I learned many fundamental things like http-servers or parsing JSON objects to structs.

Parsing JSON to a struct

JSON:

{
    "id": "game-00fe20da-94ad-11ea-bb37",
    "ruleset": {
        "name": "standard",
        "version": "v.1.2.3"
    },
    "timeout": 500
}

Go struct:

type Game struct {
    Id      string  `json:"id"`
    Ruleset Ruleset `json:"ruleset"`
    Timeout int     `json:"timeout"`
}
type Ruleset struct {
    Name    string `json:"name"`
    Version string `json:"version"`
}

And after that, the hardest part is already done.

Technical specifications

Golang
- default http-server
docker

MoGo

Tch1b0

What?

MoGo is a Discord bot that scans through new messages for links to shorten them.

Technical

Tech used

MoGo was built using Golang and discordgo.

How?

But how exactly does MoGo detect whether something is a link or not? The only input it gets is some text like " something something https://example.com something".

The Answer is Regular Expressions!

https?:\/\/(([a-z0-9]){0,}\.)?([a-z0-9]){2,63}\.[a-z]{2,}(\/[\s\S]{0,}?){0,}

The Regular Expression above describes a URL and tells MoGo whether something is an URL or not.

quick-poll

Tch1b0

What is Quick Poll?

Quick Poll is a a website on which you can take quickly polls. You first create your poll and then are able to share a link to that poll. But it doesn't end there, that would be boring.

Quick Poll transmits the data the users enter live. That means whenever a user ticks something, your charts immediately update.

Philosophy

Observing decision-making

"Why would that matter?", you may ask. Sometimes it isn't just enough to know peoples opinion on something, but also how their opinion changes after receiving other information or thinking about their decision.

For example, You could see how question 2 would affect the votes on question 1, because, at least from my experience, people can change their minds all the time based on their surroundings.

Humans ideally do not just have a black and white opinion like normal polls may suggest. We've all been at that point in a poll where we are switching back and forth between two options.

With Quick Poll you can see these indecisive human patterns.

Privacy

"Isn't this a privacy violation?" is a question that also came to my mind. If I would allow the poll admin to observe every single ones poll result individually - yes, then it would be a security violation. However, you can not observe votes individually.

You only see that anonymous cluster of votes, which is also way more interesting than one single person. After all, we are taking polls with as many people as possible, because that means we will get the most accurate result.

Technical View

Generally

The client was built with vanilla html, css and javascript.

The backend is written in plain go.

Communication protocols between client and backend are HTTP and WebSocket.

WebSocket communication

This is, in my opinion, the most interesting part of the project, as it allows data to flow flawlessly between client (poll takers), server and host (poll admin).

Multiple clients and the host are connected via individual websockets to the server:

----------     websocket  
| client |   -------------------
----------                     |
                               |
----------      websocket      |
| client |   ---------------|  |
----------                 ----------   websocket      --------
                           | server | --------------   | host |
----------      websocket  ----------                  --------
| client |   ---------------|  |
----------                     |
                               |
----------       websocket     |
| client |   -------------------
----------

The clients immediately send their newly updated fields to the server, and the server updates its internal state.

The state is then sent to the host, for the charts to be immediately updated.

The host can send actions (e.g. start a poll) to the server, which then broadcasts the action to the clients.

Here is a visual representation of the data flow:

----------      input ->  
| client |   -------------------------
----------      <- action            |
                                     |
----------      input ->             |
| client |   ---------------------|  |
----------      <- action     ----------   state ->       --------
                              | server | --------------   | host |
----------      input ->      ----------   <- action      --------
| client |   ---------------------|  |
----------      <- action            |
                                     |
----------       input ->            |
| client |   -------------------------
----------      <- action

Messages in-depth

In my project, I decided to send JSON objects around.

The default layout of a message:

{
  "type": ,
  "data": 
}

There are also special cases, for example the input of a client is designed to be efficient, as it is sent pretty often (users like to click buttons). When a client changes their input, it only sends a small array containing the answers.

For example:

[2, "Blue", "George Washington", null]

In this case, we can see that the user already filled out the first three questions. The first questions seems to be a selection, number two and three seem to be inputs. Notice the null at the end? That is a question that wasn't filled out yet.

Purpose

Quick Poll was built as a school project, where the task was to simply build a web app.

But different to my other experiences with my software, Quick Poll was actually kind of integrated in my everday use.

Sometimes when decisions had to be made in my school class, or someone wanted to make a quiz/poll (e.g. for a presentation), Quick Poll was used without me pushing that idea, which suggests to me, that this project fulfills it's purpose successfully. That is an experience that (many developers will agree) is not self explanatory and very rewarding.

What I learned / I want to tell you

WebSockets are a great thing, and connecting clients live gives an immediate feeling of magic.

I can only recommend you to look into building one or two projects with WebSockets, because the learning curve isn't as high as expected, but the results are very rewarding.

You can do that in any programming language, as it is only a network protocol, and it's implemented everywhere.

No idea what to build? Let me give you a hand, you could build a simple...

Chat app (no fancy UI needed)
Game (like tictactoe over the network)
(Web-)App for polls (That was also my approach)

And much much more!

Not feeling creative? You can always ask the LLM of your trust.

brainfuck

Tch1b0

What is Brainfuck?

Description

Brainfuck is a so called esoteric programming language, which has no real real world use, but is rather used to demonstrate how abstract a programming language can be.

Functionality

The language itself is pretty simple, it only consists of 8 commands: .,<>+-[].

When running Brainfuck code, you basically just go through and mutate an array of data cells. The program is always pointing at a certain data cell.

0  0  0  0  0  0  0  0
^^
Selected Cell

`<>`

Using the < and > operators, you can switch the selected cell.

Executing the > command:

0  0  0  0  0  0  0  0
   ^^
Selected Cell

`+-`

So now we can switch between the cells, that's cool, but what else?

We can increase or decrease the value of the cell by using the + or - command.

Executing the + command:

0  1  0  0  0  0  0  0
   ^^
Selected Cell

`.,`

Now we want to print our data to the terminal via using the . or read from the user input via using ,.

So, . outputs the current cell in ASCII representation, and , stores the ASCII code of the inputted data in the currently selected cell.

`[]`

We've almost got everything to be turing complete, the only thing missing is the loop.

The [ indicates the beginning of a loop, and ] indicates the end. The program loops, until the currently selected cell equals 0.

Example Program

Code:

>++++++++[<+++++++++>-]<.>++++[<+++++++>-]<+.+++++++..+++.>>++++++[<+++++++>-]<+
+.------------.>++++++[<+++++++++>-]<+.<.+++.------.--------.>>>++++[<++++++++>-
]<+.

Output:

Hello, World!

My implementation

Motivation

As I know some basic concepts of implementing a programming language (even though I never did implement one), I thought that it would be a short and fun project to implement a Brainfuck interpreter, as this is a common exercise, due to the simple syntax and logic.

Technical Details / Project Structure

For my implementation, I used nothing but the raw go programming language.

I tried to logically split the project into seperate layers, like it is done with bigger lanugages.

Layer 1 - Lexer / Tokenizer

In the first layer, the plain text/string is converted to an array of instructions, that do not yet hold any functionality, but are rather just symbols for the interpreter to get along easier with the instructions.

Layer 2 - Block builder

In the second layer, the blocks are built. You may ask yourself now "what are blocks?".

In the definition for this project, a block is a set of instructions, that stands for itself and contains all instructions which are to be executed in it. A block cannot look outside of it's own scope, so it is isolated from it's surroundings, and therefore easily executable.

Layer 3 - Interpreter

In the final layer, the previously built blocks are now being executed. There is a statically declared byte array, in which the entire cell-selection and storage takes place.

johannespour.de

Achievements

What?

Examples

Technical Aspects

What I learned

dsbmobile.js

dsbmobile

Why?

How does it work?

As a User

Behind the Scenes

Some difficulties

Technical specifications

JP-nuxt

What?

Why?

The problem

The solution

Choice of the name

The problems I encountered

Technical specifications

battlesnake-builder

Idea

Implementation

Related

aoc2021

AO-what?

My Attempt

The Preparation

How it Turned Out

myDSB

What?

Idea

The Problem

The Solution

Execution

Technical specifications

Esproso

What is a Battlesnake?

Generally

In-depth

Example Response

Tactic

What I learned

Parsing JSON to a struct

Technical specifications

MoGo

What?

Technical

Tech used

How?

quick-poll

What is Quick Poll?

Philosophy

Observing decision-making

Privacy

Technical View

Generally

WebSocket communication

Messages in-depth

Purpose

What I learned / I want to tell you

brainfuck

What is Brainfuck?

Description

Functionality

<>

+-

.,

[]

Example Program

My implementation

Motivation

Technical Details / Project Structure

Layer 1 - Lexer / Tokenizer

Layer 2 - Block builder

Layer 3 - Interpreter

`<>`

`+-`

`.,`

`[]`