
## Starting point
I've published my first homepage way back in 2019. It was more or less a weekend project, as the whole website was done in four days, and I haven't updated it since.

Now in 2021, an update was long overdue. The design was very simplistic, it didn't show much of what I do, and it lacked a blog feature, something I wanted to have for some time already.

So, I wanted to create a new homepage. In the beginning, I wondered for way too long on how I should make the website, both about the design and about the tech stack. As I had gathered some React experience at my job, I chose to make the website in Next.js, a React framework.

But I have committed a mistake: Starting the project without a well-defined objective and starting coding before having any idea or concept about the design. Unsurprisingly, this first prototype didn't go anywhere.

## Back to the project again
Four months later, I started the project from the ground up. This time with a well-defined idea and design. Things went well at the beginning, but as quickly as I began working on the project, I had to stop it and start all over again.

See, I firstly tried it with SvelteKit, a framework for building websites with Svelte, for the sake of trying something new. This framework is actually good, but I've found myself struggling with it too many times. I had issues on how static pages from dynamic routes were generated. In Next.js, you have the property `getStaticPaths()`, where you state which routes exist for a dynamic route (for example `/blog/[slug]`, where `[slug]` is the dynamic part).[^nextjs-static-paths] In SvelteKit there isn't anything like that. It instead crawls your pages, find links referencing to your page.[^svelte-prerender]

Furthermore, if you want to open files from the filesystem, in SvelteKit you can't do it without creating an API-endpoint first.[^svelte-routing-endpoints][^svelte-auto-endpoints] In Next.js, it's easy as adding the property `getStaticProps()`.[^nextjs-static-props]

To be honest, these issues wouldn't actually hinder my project. I could live with them. But still, it was reason enough for me to go back to Next.js, as this concept in Svelte simply didn't click for me. Maybe someday I might come back, but for now, I'll stick with Next.js.

Yes, the rant is finished now. 😅

## Third time's a charm

So, I converted the components I had written in Svelte to React. This process was actually pretty straightforward, I must add.

For about a month I worked heavily on the website, adding many features, tweaking the design and adding some actual content to it. This time I didn't have any difficulties developing, everything went very smoothly.

And here we are now. Finally, I'm pleased to present you my new website. It doesn't have much content at the moment, but this is of no concert. The website is only going to grow in the next weeks, months and years.

If you wish to take a look, the source code can be found at [GitLab](https://gitlab.com/hockdudu/hockdudu-2021). Go on, don't be shy!

Signing up,  
~Eduardo

[^nextjs-static-paths]: https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
[^svelte-prerender]: https://kit.svelte.dev/docs#ssr-and-javascript-prerender
[^svelte-routing-endpoints]: https://kit.svelte.dev/docs#routing-endpoints
[^svelte-auto-endpoints]: https://github.com/sveltejs/kit/issues/758
[^nextjs-static-props]: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation


Website Redesign 2021


## Description
This project is a combination of both a client and a server for MPD (Music Player Daemon)[^mpd]. It leverages MPD's ability to play network streams to use is as a network radio.

I created this project in the course of only a few days. Nonetheless, we used it at our office for about a year, and it received very positive feedback. It's only not in operation anymore because the company moved to a new location with an open plan, where such radio doesn't make much sense anymore.

## Source code
The project's source code can be found under https://gitlab.com/hockdudu/mpd-radio.fm

[^mpd]: https://www.musicpd.org/


mpd-radio.fm


## Description
If you'd ask me, what's the most overkill project I've done for a school module, I'd say it was a project
for the module 104. We had a really simple requirement: Create any program that uses CRUD
(Create, Read, Update and Delete, more about CRUD on
[Wikipedia](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete)).

I thought: Well, I can't simply create an app for a database with two tables, that'd be way too easy&hellip;
Hey, why not recreate something like SoundCloud — make a website on which one can upload songs, create playlists and
albums, and clearly register / login? One more thing: Make it extensible, so separate the server and the
client. And don't forget, the page shouldn't reload when navigating the site, otherwise the song would stop
playing. It'd be so easy and it would be _sooo_ much fun!

It wasn't fun. As we needed only to create a simple app, we didn't receive so much time on the school, so I
did most of the work at home: On weekends and at night, because who needs sleep, right? _Right?!_

I was really stressed to finish it on time, I didn't sleep well on those weeks, but I managed to do it. The
grading was so anticlimactic, though. The teacher did really only verify if the four CRUD operations were
there. Needless to say, I got a full grade, and the teacher asked for the source of my code, as I was the
one who has done the most for this module.

It might've been the most stressful module I had (on this school year), but I'm really proud of myself. I've
learned a lot. I've discovered new technologies, stumbled to problems I've never had before and fought my
way to solve them. I'd like to mention two tasks I stumbled upon:

### Converting songs
The whole logic of converting songs wasn't easy. A whole bunch of checks had to be done and the song and the
album art had to be converted to a universal format.

But you can't only send the client a response after converting them. The connection would stay open during
the whole convert process, and this could result into a timeout. So, I created a task handler with polling.
The client would query the convert process status after the upload every couple seconds.

### Single-page application (SPA)
Making the website a single-page application wasn't an easy task, either. Solely the task of making the
templating work on the client took two days to work. Not because it was difficult, but because
it was an entirely new thing for me.

I had to create a whole MVC logic on the client for it to work as it should. Yes, I could've used a library
like AngularJS, but that would've been too easy. I wanted to get my hands dirty and learn how this really
works. And I did. And I'm very proud of myself for doing it.

The templating is done on the client using [nunjucks](https://mozilla.github.io/nunjucks/).
All the page templates are downloaded from the server and those are then used for building the pages,
depending on the URL the user is currently on.

## Source code
As I always do with other projects, this project is open-source. Even though I don't really think many are
going to find it useful, I think it's better for it to be public for all to see. I don't get anything
from keeping it to myself; by sharing it with the world, I might even help someone learn something.

Anyway, below is the code from both the client and the server:

- [Client code](https://gitlab.com/hockdudu-school/school-104-player-client)
- [Server code](https://gitlab.com/hockdudu-school/school-104-player-server)

## Live preview
A live preview of the project isn't available yet. Because users can freely register and upload songs, it
could be a little dangerous, as someone could spam it, as it doesn't have any protection.

I intend to implement a way of creating a self-refreshing server (e.g. with Docker) in the future, though.


dd-player (gibb module 104)


## Description
On the vocation course 101 &ndash; create and publish a website (Webauftritt erstellen und veröffentlichen) &ndash; we had the objective to create a website. The choice of the theme was free, there were only few requirements for the website.

I chose Arch Linux for a theme because it's my favorite Linux distribution, which I have on all of my computers.

As the company I worked on during my apprenticeship does mainly websites, this module was easy for me. Because I love a challenge, I tried technologies I never used before and even created my own gallery with lazy loading and such. Because I wasn't happy with the gallery not working well on mobile devices, after the course ended, I kept working a little bit on the library and tried to make it somewhat mobile friendly.

## Live preview
A live preview of the website can be found under the following links:

- https://uk-arch.hockdudu.ch/ &ndash; the website as it was submitted
- https://uk-arch-beta.hockdudu.ch/ &ndash; the website with the mobile-friendly gallery

## Source code
The project's source code can be found under https://gitlab.com/hockdudu-school/uK-101-arch


üK-arch (vocational course module 101)


## Description
Picture this: You go to school, and have many lessons you have to attend to. Multiple lessons a day, each in a different classroom. Adding to that, the lessons plan changes twice a year. You just can't memorize it all.

You need a way to look it up efficiently. The school might provide the timetables in an online-service, but this service doesn't work well on mobile phones.

So, what do you do? Yes, you create your own app for this. And so, Timetables was born.

This app allows you to enter each lesson's data in its database, and it shows you the lessons in a nice, sorted list. Adding to that, you can create a shortcut to directly open the next lesson. This way, you'll know which classroom to go to in a single tap. And if you're impatient, the app shows the percentage of the current lesson: In case you can't wait for it to be over.

## History

Originally started as a Java app that downloaded the school's .ics (calendar file format), I soon had the idea of writing an Android app. Writing the app only lasted a few days, and I was able to use it in this form for most of the first school year.

After a while, while reading the Android documentations, I discovered the programming language Kotlin. Let's just say I felt in love with it. Safe, expressive, and developer-friendly &ndash; things I miss in other languages. Anyway, I played around with it for a while and then decided to port the application to Kotlin, as it was a nice opportunity to use Kotlin in a "real application".

Porting it to Kotlin only needed a few days, and I was happy with it. A few months down the line, I added more features and cleaned the code a bit.

But I was still unhappy with the overall app, in particular with the lessons displayed: the info shown wasn't enough, as the .ics fields consisted mostly of abbreviations.

So, I rebuilt the app to use a local database instead of downloading and parsing .ics. For the end user it meant they had to add the records themselves, but it is something that must be done only a few times a year.

And this is more or less where we are today. The app may be simple, but it helped me as a practical way of always knowing where the next lesson was.

## Source code
The project's source code can be found under https://gitlab.com/hockdudu-school/timetables-android-kotlin


Timetables

Here you'll find out what I've been up to lately.


Projects

Website Redesign 2021

mpd-radio.fm

dd-player (gibb module 104)

üK-arch (vocational course module 101)

Timetables