CodingKiwi

twitch

Creating a cozy stream background

The base image My goal was to create a cozy co-working background of a monitor in a room. Since I have zero artistic skill I opted to fiddle around with AI generated images. Using ComfyUI I generated a few images. I used the "dreamshaper xl v21 turbo" checkpoint/

javascript

Email Spam Scavenger Hunt

A few days ago I saw a little '1' next to the name of my spam folder. Protonmail automatically classified it as spam/phishing and did not notify me, which is great! But I got curious.. So the natural thing, of course, it to download it :) Heading into

gamedev

Wave Function Collapse Experiment

So right from the start: apparently it has nothing to do with the quantum concept it was named after ^^ There seem to be two versions: texture and tile mode. I will be using tile mode. For a better explanation check out this awesome article by Boris! Tiles and Edges In

javascript

Passing a form object as a vue prop

Setup Let's say we have a parent component: <template> <div> <p>This is my awesome form</p> <form> <input v-model="form.a"> <input v-model="form.b"> </form> <

npm

developing shared npm packages locally

My second post on this blog was about how complicated it seems to be to develop shared npm packages locally. I decided to take another crack at finding a better workflow. The situation is more or less the same, I have hop, my scss/vue component library which I use

javascript

How I added svg icons to my vue component library

There are different ways how you might add icons to your application or website, the most common thing when I started doing frontend development was using an icon font like fontawesome. Webfonts The way these work is by having an html element with a class, this class gets a special

vite

1 year later - state of vuepress and vite

In my post Why I'm not switching to vite yet almost exactly a year ago I explained why switching to vite was not an option to me yet. Some things have changed so let's check again! vitepress and vuepress As stated on the website, they have

laravel

Laravel Docker Permission Madness

I already wrote about the basic setup of my docker images in my other post but it still had some permission issues. So I decided to write a little follow-up: The Docker Images In the context of my project "flow" there are a few images involved: laravel-base * FROM

Quick and dirty network synced vue state

For some apps it can be useful to have the state server-side and sync it to the clients live using websockets. One option is to just send the full state everytime it has changed, this has some disadvantages though * overhead: we send the full state even if just one property

My PHP VSCode / Docker / Remote SSH Setup

Even though I mainly work on js projects I did a lot of laravel apps in the past and currently I still work on my project management app "flow" from time to time. Everything I explain in this post is based on my experience over the past years

php

SQL Batch inserts are faster

At my current employer a PHP script was used that extracts entries from a large database table, optimizes them and saves them in a second table. This script was written years ago and it ran every day for 12 hours. Although the general rule "never change a running system&

webpack

Vue Component Workbench

In my projects I've been using my vue/scss framework "hop". Whenever I add new components or change something, it is quite helpful to have an instance of webpack running inside the hop project to see my changes in realtime instead of publishing a new version

nodejs

Why I'm not switching to vite yet

Twisted paths While searching for a markdown based Static-Site Generation (SSG) to build a documentation page I came across vuepress, first I started with vuepress 1 but since I wanted to install it in my existing project (which uses vue 3 and vuepress 1 does not support vue 3) I

boardgame

Digitally enhanced boardgame - Part 3: Perspective

Link to Part 2 Digitally enhanced boardgame - Part 2: Fiducial markersLink to Part 1: Digitally enhanced boardgame - Part 1: The dungeon tilesWelcome to this blog post series about a dungeon boardgame enhanced with some digital magic. What kind of game? Something like a dungeon crawler :) The dungeon I

boardgame

Digitally enhanced boardgame - Part 2: Fiducial markers

Link to Part 1: Digitally enhanced boardgame - Part 1: The dungeon tilesWelcome to this blog post series about a dungeon boardgame enhanced with some digital magic. What kind of game? Something like a dungeon crawler :) The dungeon I want the dungeon to be random, which is not too hard

boardgame

Digitally enhanced boardgame - Part 1: The dungeon tiles

Welcome to this blog post series about a dungeon boardgame enhanced with some digital magic. What kind of game? Something like a dungeon crawler :) The dungeon I want the dungeon to be random, which is not too hard to achieve procedurally, but how will the players be able to see

postgres

Building a Code Search

I came across the application sourcegraph which is an awesome code search tool that allows you to search across multiple repositories fast (plus a lot of other awesome features). Under the hood it uses "zoekt", a trigram based search index which was a independent project but is now

raspberry

Waveshare DSI Screen

Let's start by setting up the OS via Raspberry Pi Imager To make thing easier I configure SSH, Wifi, country, language and keyboard settings in the "Advanced Settings" menu before flashing. After attaching the pi to the screen and plugging in the DSI cable I connect

css

SCSS Corner Circle Cutout

First let's take a look at what we are trying to achieve: The simplest approach would be to give the icon in the corner a background-color and border-radius and that is also the solution I would suggest you use. There is one catch though: the background-color of the

javascript

Reverse Engineering Govee Smart Lights

Getting started First we need to enable bluetooth logging on the smartphone, for me it was in Settings > Developer options > Enable Bluetooth HCI snoop log Now we activate bluetooth and use the govee app. I also started a screen recording to make debugging easier later on! Exporting the

electron

Creating an Electron App - Content-Security-Policy for file://

Content-Security-Policy or short CSP is a concept to prevent certain types of attacks, for example Cross-Site Scripting (XSS). In this post I will explain how I added this kind of security in my app while using the file:// protocol To enable CSP you need to configure the web sever to

electron

Creating an Electron App - Secure core structure

Electron is split into a main process and a renderer process. The main process is a Node.js environment with full operating system access, whereas the renderer process does not have access to Node.js by default. nodeIntegration: false This strict division is done on purpose for security reasons. A

javascript

Why is local development of npm packages so hard?

💡Disclaimer: the information in this article is outdated! I will write an update soon Sometimes you want to split up code into several npm packages, in my case I had a css/vue library called “hop” and a project, called “flow” in which I used hop. Later on I build

oauth

A tale of Trello and Laravel Socialite

While recently working on my small-scale project management application “Flow” I had two features in mind: Third-Party Authentication and a tool to import Trello Boards into my database Introducing Laravel Socialite Laravel Socialite is officially listed in the laravel documentation as a simple way to authenticate using OAuth providers Laravel