My blog
What content can be read?
Development related articles and projects, 3D and art, games, keyboards, or whatever I try out next. This is going to be a mix of topics, mainly as a knowledge base for myself. Everything from small things I learned, C++, web tech, projects I am working on, random ideas, tutorials, hobbies — you name it.
What fancy tech do I use?
Initially I only used HTML and CSS. That was it. Not because I did not like static site generators or the next best web framework, but rather because the scope of this website was tiny. Now that the page is growing, with more posts and pages, syntax highlighting for code snippets, embedded videos, and more; I needed a way to easier manage it.
I decided to go with 11ty after searching for a solution that won't lock me into a specific technology stack. It seemed effortless to use, extensible, and comes with all I need out of the box. Specifically for me this is:
- Support for HTML and Markdown,
- Templating,
- Syntax highlighting for code blocks, and
- Atom feed support.
Nevertheless, you still can right-click anywhere to "view page source" and actually read it, look at the style.css and read through that, it's uncompressed and not that long, or dive even deeper and have a look at the code of this website on GitHub.
You will also find a bit of JavaScript for the privacy-friendly analytics. You can read more about it under my privacy notice page or even have a look at the public dashboard of this website. The best thing with this: there are no cookies or pop-up banners.
Website style guide
To have a better overview of all the defined components and styles in one place I created a website style guide page, showcasing all the available components, how they are defined, and how to use them.
OpenSource software used
- 11ty: Static site generator used to "manage" this website.
- highlight.js: For syntax highlighting.
- highlightjs-cobol: For COBOL syntax highlighting based on highlight.js.
- body-lock-scroll.js: Part of the image compare viewer, used to lock scrolling on a page.
-
image-compare-viewer: Comparing images with a slider. I use a refactored version of
this to support
pictureelements.