Loading global scss variables in nextjs with sass preprendData

2024-11-15 2 min read Anoff

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.

Publishing private npm packages to GitHub Package registry for free

2020-07-26 4 min read Anoff

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

2019-10-06 7 min read Anoff

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

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.

Get Hugo to render (nice) Asciidocs

2019-02-17 5 min read Anoff

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.

RBAC with Google Firestore

2018-08-12 8 min read Anoff

This post will explain how to implement role based access control (RBAC) using the Google Firestore serverless database. Firebase and Firestore in particular with the concept presented in this post offers the most seamless integration of serverless infrastructure with a mobile client at this point. It has become my go to backend for all minor web apps I build.

Building realtime apps with Vue and nodeJS

2018-04-18 7 min read Anoff

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: