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.

Collect IoT data from Arduino in InfluxDB

Did you add some fancy sensors to your Arduino board? If you have internet connectivity via ESP8266 or similar chips you can easily collect and visualize your sensor readings using InfluxDB. This blog post will cover how to send data from Arduino to InfluxDB Cloud (v2) but also to your self-hosted InfluxDB instance (v1).

Setting up Grafana on Raspberry Pi with Docker (compose)

In previous blog posts I showed you how to setup a Raspberry Pi with docker-compose support and how to run InfluxDB on your Raspberry Pi. This tutorial will add Grafana to your Pi-stack and give you a complete monitoring setup. The InfluxDB+Grafana stack is heavily used in DevOps scenarios but also extremely useful if you want to visualize any kind of timeseries data at home; power consumption, smart home events, computer uptime, amount of devices in your network, weather in your basement … endless opportunities at your fingertips!

Running influxdb on Raspberry Pi using Docker compose

This blog post will explain how you can setup influxdb (and the telegraf plugin) on your Raspberry Pi using docker-compose. We will use the config-as-code to create a reproducible setup. This is extremely helpful for hobby projects that you come back to every now-and-then because you can lookup exactly what you are running 😉

How to setup Raspberry Pi as home server with Docker support

This blog post will cover how to setup a Raspberry Pi with Docker support. It will also cover some basic steps that will make it easier to work with your RasPi later on. This setup will work completely without monitor/keyboard for your Raspberry but you need a LAN connection to it. I wrote most commands so they are easily pastable and do not require too much interactive work - you should however carefully read what is going on with each of those commands before you fire them off!

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!

Building autoscaling CI infrastructure with Azure Kubernetes

Ever wanted to create a build agent factory where you do not have to care about how many build agents you need at a given point? With this post I want to share my experience setting up a dedicated CI runner infrastructure with the Azure + Pipelines ecosystem. The main features of the solution are automated scaling, ephemeral build agents, docker based environments, minimal operation responsible and strong pay-per-use billing concepts. Basic knowledge of Docker and Kubernetes should exists - you should know what they are.

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.

Migrating to Azure Pipelines

Beginning of the year I switched my blogs build chain from Travis CI to drone CI. Due to some tasks with Azure DevOps at work I wanted to test how good it fits my private projects. In this post I will NOT tell you how to set up your pipelines project because Microsoft has great docs for that. Instead this post will cover how to best put your build workflow into a pipeline specification. In addition I will cover the necessary steps to migrate existing CI/CD workloads from Travis and drone to Azure Pipelines.

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.

Composing navigation files in Antora using the include macro

This third post in the series of Antora posts quickly addresses a feature I only recently discovered. It will show you some techniques you can use to compose the navigation menu in a multi-repository, multi-module setup. This is especially interesting if you have content spread across repositories that you want to present hierarchically in the navigation tree.

<!–more–>

Using multiple navigation files

Let us start with the basics: How to combine navigation files?

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 🎉