Loading global scss variables in nextjs with sass preprendData

Recently I started using next.js and slowly diving into lower levels of web design, creating own components, managing complexer styles etc. One of the things I realized was that I want to use a CSS preprocessor, so I went for dart sass but sticking to .scss as file format.

The one thing that annoyed me - and took me some time to solve - was how to use react with modular styles i.e. component.module.scss but having a central _variables.scss containing colors, common element widths. I have seen approaches that require custom loaders or organizing my stylesheets in a certain way. Finally I found out that dart sass can be configured to append data to every stylesheet before parsing it.

Backup your NAS (Synology) to external harddrive

Some months ago I decided it is time to take control of all my pictures. So far everything is hosted either on Google Photos or Adobe servers.

First thing was buying a NAS and trying out different self-hosted photo applications. Of course if you keep the data yourself, you are also responsible for making sure nothing happens to it and run Backups. This post will explain how to setup a non-vendor-specific encrypted backup of your NAS data that can be read by any Linux system. The description in this blog post is based on a Synology NAS but works for any Linux based system, NAS, server or computer.

Programming ESP and other Arduino compatible chips using VS Code on MacOS

When you are developing microcontroller based projects as a hobbyist you often end up with the Arduino ecosystem and might be tempted to use their IDE. This post will explain how you can develop, program & debug Arduino compatible devices using VS Code. Even though this post is written with a MacOS walk-through it should be valid for other operation systems as well.

Publishing private npm packages to GitHub Package registry for free

Even though I am a big fan of Open Source Software and try to make my projects open and consumable by others as well, there are cases where you want to keep your stuff private. But even if you work in a closed source environment you still want to use the same tools that you employ in the open source world. In this blog post I will explain how you can create private npm packages for your Javascript/Typescript projects - and I will show you how you can host your private npm packages for free!

Migrating to vuetify 2.1

I just migrated the code for the devradar editor to the latest major version of vuetify. There is an officiel migration guide that helped me solve 70% of the issues but here is a quick overview of the biggest issues I encountered and what actually changed.

Reference GitHub #issues during git rebase

Being a developer most times means working with git. There are many different ways to use git and every project, every developer has their preferences. For my own projects I work a lot with GitHub and I love using the git rebase -i feature to clean up commits.

<!–more–>

Lately I ran into the problem that rebasing a Commitizen commit message with a linked GitHub issue leads to problems. The problem is that the rebase UI treats the # hash sign as an escape character for comments. In the message below the reference to the GitHub issue #53 would be removed from the commit message as # is the leading character in line 3.

Preview AsciiDoc with PlantUML in VS Code

This post is for everyone that likes to write AsciiDoc in VS Code but also wants to inline PlantUML diagrams within their docs. In a previous post about diagrams with PlantUML I gave an intro into PlantUML and how to preview images in VS Code. With the latest release of the asciidoctor plugin for VS Code it is possible to easily preview embedded PlantUML images within AsciiDocs. No more need to maintain attributes in each file 🎉

Get Hugo to render (nice) Asciidocs

While migrating my blog from Jekyll to Hugo I went down quite a rabbit hole. While setup and migration to Hugo was a breeze, I spent a lot of time making my .adoc formatted post work with the new blog. After working through several GitHub issues I ended up manipulating the DOM with Javascript to get admonitions working. It still doesn’t feel right - but hey it works! 🤷‍♂️ This post will cover the steps I took in case I myself or anyone out there ever needs to do this again.

Converting existing AsciiDoc into an Antora project

After 2 years of working with the arc42 template in markdown, I spent the last few weeks learning about an asciidoc based site generator named Antora. The main reason for the interest in AsciiDoc was the fact that the limited feature set in markdown often impairs you while writing down complex things. But I had one problem; most of our documentation is scattered across multiple repositories as we try to keep the docs as close to the code as possible. That is why this series will cover how to get a multi repository (software) architecture template up and running using Antora.

Get the most out of hackathons

End of October I joined the Stuttgart Hackathon for the second time. It was my overall 4th public Hackathon. In this blog post I want to tell you why I enjoy doing Hackathons and why you should join one too if you have the chance!

TL;DR; Network and play with expensive toys

Markdown native diagrams with PlantUML

This post covers PlantUML basics and how it can be used in GitLab or GitHub projects as well as a seamless local development environment using Visual Studio Code. I have been wanting to write this post for months. Lately I have been using PlantUML extensively at work but also in my private projects. You can see it being used in my plantbuddy and techradar projects on GitHub. Using it in different places and for various purposes I came across a bunch of issues that I want to share in this post.

Building realtime apps with Vue and nodeJS

Wanting to build a simple SPA as a side project I struggled with things that might annoy a lot of newcomers that do not want to go full vanilla. Which web framework, which style library, which server framework - and more importantly how does it all work together?

In this post we will put together a bunch of great tools out there to build a realtime web app with a few single lines of code. A quick introduction into the tools that will be used: