easwee.net // tiny digital playground

ubuntu 24 guake shortcut remap to cedilla

2026-01-24T00:00:00Z

Another note.

I always use the cedilla / grave key (the one left of 1, under Escape) as a dedicated key shortcut to toggle Guake.

This used to work well in previous Ubuntu versions and I could set it from Guake settings, but since on Ubuntu 24 and supposedly because of Wayland, now if I'm in an editor it types the ¸ mark which is annoying. Setting it as a custom keyboard shortcut also does not override the mark output event. So I came up with this convoluted solution, but it does the job.

Install keyd and enable it:

sudo systemctl enable keyd --now

Create /etc/keyd/default.conf that will map the key to a key combination that is recognized by the system (after trying many keys like scrolllock, F13 and others that were taken or not recognized, i picked meta + F12)

[ids]
*

[main]
grave = M-f12

Restart keyd:

sudo systemctl restart keyd

Disable Guake’s internal shortcut:

gsettings set guake.keybindings.global show-hide "'disabled'"

Add a GNOME custom shortcut in Settings → Keyboard → Custom Shortcuts:

Name: Guake toggle
Command:
guake -t
Shortcut: press the cedilla / grave key (recorded as Super+F12)

The cedilla key no longer types anything and reliably toggles Guake everywhere, on Wayland, on both laptop and external keyboards.

distro hopping

2025-11-23T00:00:00Z

Some light laptop and OS rambling for end of year.

I like distro hopping a lot. Usually I will try at least one new Linux flavor per year. I started with OpenSUSE, moved to Mint, then Ubuntu 12 came, tried some Fedora in different flavors inbetween, obviously Arch because you have to do that experience and then Manjaro, tried some "hacking" with Kali (which is probably the most fun I had with Linux and I swear when I have enough money to retire I'm gonna abuse the shit out of it). This time it was time for Omarchy - a lot of fuss around. I liked the looks and vibe around it - lots of people even trying Linux for the first time with it (brave choice), so I obviously had to try it. And since it's Arch it's a special needs system - not something I currently have time for, so after playing with it for a good week I just went back to Ubuntu.

Since I also switched to a new daily work laptop, I may as well write down some of my thinking around the whole laptop and distro choice.

People have very different workspace arrangements, some use a single home workstation, but I currently tend to switch between a single ultrawide monitor on my office desk, a few random TVs when meeting and collaborating and if I work from home, I don't plug in the monitor at all anymore and just work on the laptop from couch.

Some wisdom I picked up over the years is that Macs have great battery life - I'm always impressed when I have to do the ios builds from the spare Mac I have, that battery bar there does not move. To bad I can't stand MacOS ecosystem. Another thing I learned is also that if you don't want a Mac, you buy a Thinkpad - I hated every single other laptop I had - there is just something about Thinkpads that clicks for me (keyboard).

So battery life and Thinkpad in mind, I did a short research and ended up with T14s gen 6 with Intel chip and a low-power 60hz monitor and 32gb ram. This works perfectly for me since I only code on this laptop, I don't see any benefit in more hz other than battery drain. Internet people say ~20h battery life - I've got ~11h out doing common daily work running two dev servers on hot reload and running some music in background. For me this is solid - tbh anything above 8 is great.

So getting back to the OS - after trying Omarchy for a week I was not really seeing any benefit over the good old Ubuntu. Most of the stuff that I wanted to have out of the box require manual configuration/changing dotfiles and personally I just find that a waste of time - I used to do that for years when I had time and wanted to learn the ways of Linux - now I just want to run it. Ricing is fun, but I can do that on any distro - but tweaking monitor configs and other basic features that should just work when I have tons of other more productive work to do is not an option. I spend most of my time between terminal, IDE and browser anyway, so I often don't even get to see anything else for days.

Anyway, Ubuntu LTS is up and running - this time fingerprint reader works without any driver or tweak which is a first (I always try to set it up and until now it never worked first try). The system is smooth and every single device works out of the box. Obviously over the weekend I riced it to a minimal look through tweaks and Gnome extensions, but Yaru theme is beautiful and I decided to not change it and just picked the Viridian flavor and a nice wallpaper to fit with it - a must.

I always install Guake as my terminal and rebind the trigger key to cedilla (one key to the left of "1"), because it reminds me of old Action Quake console and I just love the dropdown overlay + I can read docs underneath through it's transparency.

I also always reconfigure all the OS navigation shortcuts to my personal liking so workspaces management is more manageable and I don't use a tiling window manager - basic Ubuntu tiling is good enough for me to split window to half-screen and move it left/right/up/down. I prefer to alt-tab (and func-tab which is my shortcut to switch between workspaces). Specially when working on laptop I find tiling to get in the way and prefer to see the entire app/terminal/window. IDE already has multiple sub-sections and I split the terminal many times too - so tiling wm is not so useful to me. They look cool in screenshots and on r/unixporn though, love seeing those.

Also a must to run is:

gsettings set org.gnome.shell.extensions.tiling-assistant enable-tiling-popup "false"

To disable the Ubuntu 24 "select window to fill" feature when using super + left/right - I absolutely hate it - it's a horrible UX. Credit to Medo64 on how to do that.

I also want to comment on snaps - everybody hates on those and I also don't really praise them because I did have issues in past (Firefox upload input not working - then again Firefox is becoming trash so not sure who to blame), but I also don't see them getting in the way - the startup time delay is unnoticeable and I hope that they managed to fix some of the issues that were reported in older versions. I'm not much of an app user, but for Discord that constantly bugs with updates I kinda like to have it running as snap and autoupdate.

I may expand more rambling here if I come up with it - it's not December yet.

Take care of your favorite distro.

ffmpeg - extend last video frame duration

2025-07-29T00:00:00Z

I needed this last week and will probably need it again soon, so here's a public note to myself.

Again ffmpeg proves his strengths.

Count frames:

ffprobe -v error -count_frames -select_streams v:0 -show_entries stream=nb_read_frames -of csv=p=0 test.mp4

Outputs video frames count - for example:

Extract last frame - zero-indexed (or really any frame):

ffmpeg -i test.mp4 -vf "select='eq(n\,124)'" -vsync 0 -vframes 1 frame.png

Make 2 sec (or desired time -t) video from frame:

ffmpeg -loop 1 -i frame.png -c:v libx264 -t 2 -pix_fmt yuv420p -vf "fps=30" frame_video.mp4

Create a files.txt files that contains list of files concat:

touch files.txt
echo "file 'test.mp4'" >> files.txt
echo "file 'frame_video.mp4'" >> files.txt

Concat videos from files.txt into a single output video:

ffmpeg -f concat -safe 0 -i files.txt -c copy output.mp4

Last frame of output.mp4 video now lasts for 2 seconds at the end.

There's maybe a better way to do it, but I found this useful enough for myself and adjusting the commands allows for flexibility, if other frames are to be extended in duration.

monsgeek m1 v5

2025-03-07T00:00:00Z

I had a keycap set laying around, so it was time to build another keyboard.

Base: Monsgeek M1 V5 Moonlight White
Switches: Akko Penguin silent tactile
Keycap set: KAT Napoleonic Hungarian & South Slavic (Doppelkaiser)
Weight: 1860g

This time I took the barebone version of MonsGeek M1 V5 as base - in Moonlight White color. Lovely.

For the switches I first decided to go with Akko x MonsGeek Green Fog switches, but this is an office build and it was to loud emitting a funky "thock" that was not appreciated by coworkers, so I switched for Akko Penguin silent tactile switches - they have a very enjoyable tactile typing feel, which compared to the linear Green Fogs, I now prefer. For future builds I will be buying tactile switches again for sure.

The keycap set is KAT Napoleonic - Hungarian & South Slavic version also called Doppelkaiser (after Francis II, Holy Roman Emperor). I love the color scheme that fits so nicely on white base, for sure better than going with a black base.

I'm including a photo of the original Monsgeek M1 V5 user manual in English in case anyone ever needs: Download

hobby guide to ai ep.2 - ai audio intelligence

2025-02-06T00:00:00Z

TLDR #

!NOTE: Omnio is now a deprecated model not available anymore :(

git clone git@github.com:easwee/ai-hobby-lab.git

curl -LsSf https://astral.sh/uv/install.sh | sh

uv sync

source .venv/bin/activate

echo "SONIOX_API_KEY=<your_soniox_api_key>" >> .env

python main.py -w youtube_audio_data_extractor -i '["https://www.youtube.com/watch?v=AyOxay5AtMM"]'

Output file will be created as ./output/<video_title>.html.

I want to know more #

This workflow demonstrates how handy can be the native audio reasoning of Soniox Omnio multimodal LLM.

Our workflow consists of 3 steps:

Input: Download cooking videos from Youtube using yt-dlp and extract audio from a list of input urls.
Processing: Process the audio using Soniox Omnio API and prompt for a cooking recipe format.
Output: Save Soniox Omnio markdown response to a .html file.

Let's go over the fully commented code:

import os
import base64

from typing import Tuple
from concurrent.futures import ThreadPoolExecutor
from yt_dlp import YoutubeDL
from openai import OpenAI
from markdown2 import Markdown

# Sample input - a list of youtube cooking videos:
# [
#     "https://www.youtube.com/watch?v=AyOxay5AtMM",
#     "https://www.youtube.com/watch?v=vlEGY8IPD-Q"
# ]

# USER_PROMPT_TEMPLATE
# - defines instructions for our model.
# - it is currently instructing Soniox Omnio multimodal LLM
#   to extract formatted food recipes data from input audio
USER_PROMPT_TEMPLATE = """
Input audio contains cooking recipe data. Output formatted markdown document containing:
1. Recipe title
2. Short summary paragraph of what is being cooked.
3. List of ingredients where each list item contains "<ingredient> <required amount>"
4. Step by step cooking instructions as explained in the audio.

Use wording as if you were conveying the recipe over radio. Make sure every listed ingredient is also used in the cooking process, otherwise do not list it.
""".strip()

# define our workflow class (we could define a Workflow abstract to extend from, since .run method is always required)
class YoutubeAudioDataExtractor:

    # We will be triggering the run method and pass in a list of youtube video urls
    # from which we want to extract data
    def run(self, input: list[str]):
        print("Workflow started.")

        # We can speed up the processing with multi-threading - increase max_workers amount if you can afford more
        with ThreadPoolExecutor(max_workers=2) as executor:
            # execute the process method on each of our input objects
            results = executor.map(self.process, input)
            # Print out informational tuple list
            print(list(results))

    # Our process method will be in charge of chaining together multiple steps of data extraction
    # We want to run the process in a separate thread for each url, to speed things up in case of multiple urls
    def process(self, url: str) -> Tuple[str, str]:
        print(f"Processing {url}")

        try:
            # combine all the steps of this workflow together
            # 1. download youtube video and obtain an audio file and it's name
            file_name = self.download(url)

            # 2. run Soniox Omnio multimodal llm and extract data from audio
            data = self.extract_data(file_name)

            # 3. write output to pdf
            self.create_pdf(file_name, data)

            # success
            return (file_name, "Done.")
        except:
            # indicate simple failure
            return (file_name, "Failed.")

    # In download step we use yt-dlp to download video/audio from youtube
    def download(self, url: str) -> str:
        print(f"[download] Start {url}.")

        # configuration options for yt-dlp:-
        # - we are interested in audio only, we like flac
        # - after the video is downloaded the yt-dlp postprocessor will convert video to .flac instantly
        options = {
            'format': 'bestaudio/best',
            'outtmpl': "./%(title)s.%(ext)s",
            'postprocessors': [{
                'key': 'FFmpegExtractAudio',
                'preferredcodec': 'flac',
                'preferredquality': '0',
            }],
        }

        # start downloading the file using yt-dlp library, and also extract audio file meta information
        # like downloaded file name, so we can reference the file later
        with YoutubeDL(options) as ydl:
            info = ydl.extract_info(url, download=True)
            # we want to store and return the fle name because we need it later
            # Gfirst get the original filename  that yt-dlp read from web (.m4a or .webm)
            original_file_name = ydl.prepare_filename(info)

            # Manually change the extension to .flac to match file on disk
            downloaded_file_name = os.path.splitext(original_file_name)[0] + '.flac'

            print(f"[download] {downloaded_file_name} done.")
            return downloaded_file_name

    def extract_data(self, file_name: str) -> str:
        print(f"[ExtractData]: {file_name}.")

        # We need to read the downloaded audio file and convert it to base64
        # so we can pass it to Soniox Omnio API
        with open(file_name, "rb") as file:
            audio_data = file.read()
            audio_data_b64 = base64.b64encode(audio_data).decode('utf-8')

        # Soniox Omnio API is fully compatible with the now standard OpenAI SDK,
        # we just need to point the base_url to Soniox api url, instead of the default OpenAI api
        # and also we use our SONIOX_API_KEY that is set in .env file
        client = OpenAI(
            api_key=os.getenv("SONIOX_API_KEY"),
            base_url="https://api.llm.soniox.com/v1",
        )
        print("[ExtractData]: Running audio intelligence...")

        # we use completions method to create a new request
        # important part here is that audio base64 data has to be set as a partial content message
        # as "audio_data_b64" prop, so the API will grab audio properly
        completion = client.chat.completions.create(
            model="omnio-chat-audio-preview",
            messages=[
                {
                    "role": "user",
                    "content": [
                        {"audio_data_b64": audio_data_b64},
                        {"text": USER_PROMPT_TEMPLATE},
                    ],
                }
            ],
        )

        # this is optional part, but if we don't need the downloaded file anymore
        # we can just remove it to not waste space
        if os.path.exists(file_name):
            os.remove(file_name)

        # read llm response - non-streamed all in one
        data = completion.choices[0].message.content

        print("-- [ExtractData] Done.")
        print(data)

        return data

    def create_pdf(self, file_name: str, data: str):
        # since the LLM returns markdown output we need a parser for that
        markdowner = Markdown()
        output_dir = os.getenv("OUTPUT_DIR") or "./output"

        # make sure our output path exists
        if not os.path.exists(output_dir):
            os.makedirs(output_dir)

        # create new writable file
        recipe_file = open(f"./output/{file_name}.html","w")

        # convert markdown to HTML
        recipe_file.write(markdowner.convert(data))

        # we are done
        recipe_file.close()

As you can see, writing custom AI workflows does not really require advanced AI frameworks - the abstraction layers those frameworks bring in mostly make the entire code less flexible and harder to understand and maintain.

While such frameworks do provide a lot of tested util functions, I would much rather just extract those utils out and include them in my workflow separately. Full control to tap-in at each step is what we want.

hobby guide to ai ep.1 - uv project setup

2025-02-04T00:00:00Z

This is a hobby/beginner guide to AI driven workflows. Some basic terminal and Python knowledge is preferred, but not strictly needed. I will try to provide all of the commands in a sequence so even if just copy/pasted, they should yield results. I am running all of this on Ubuntu with bash, curl and latest Python (currently 3.12) installed, but it should be similar on a Mac, and most likely more painful on Windows. If you run into problems you can hit me up on x.com under @easwee and we can chat, maybe. Let's dive in!

So why even write code, when we already have first AI agents that can code applications for us? It's because I hope some young soul will read this post at some point in the future, get excited about coding, get motivated and insanely good at it and then come fix my future elder-care home robot when it gets jammed. I do care about self-preservation. And also coding is a fun mental exercise, like crosswords. And also just to write down some thoughts.

Project setup #

Python has many package managers, but most of them are trash, so let's just use the best we have at the moment - uv. uv is fast and has a ton of other improvements, that you don't really have to care about just now. Just use uv - trust me bro - and later when you get curious, go read more in their docs.

Open your terminal.

Unless the docs changed - run the uv install command:

curl -LsSf https://astral.sh/uv/install.sh | sh

As you can see curl downloads the uv bash install script and runs it. Wait for it to complete.

uv initializes a Python "project" folder and all your files will be contained within it. Let's initialize one, so we have a base from where to start. I'm gonna call it ai-hobby-lab, but you can call it whatever you like.

uv init ai-hobby-lab

Move into your new project:

cd ai-hobby-lab

And list the contents of this folder including hidden stuff:

ls -la

You should see something like this:

drwxrwxr-x 7 easwee easwee 4096 jan 28 19:19 .git
-rw-rw-r-- 1 easwee easwee  109 jan 28 19:19 .gitignore
-rw-rw-r-- 1 easwee easwee  100 jan 28 19:19 hello.py
-rw-rw-r-- 1 easwee easwee  168 jan 28 19:19 pyproject.toml
-rw-rw-r-- 1 easwee easwee    5 jan 28 19:19 .python-version
-rw-rw-r-- 1 easwee easwee    0 jan 28 19:19 README.md

uv creates your project base files - hello.py is the entry file and the file we will execute once our code is written. But i don't like the name - let's rename it to main.py:

mv hello.py main.py

Let's test if it works:

python main.py

You should see something like this:

Hello from ai-hobbylab!

Virtual environment #

We don't want to pollute our computer with random Python libraries, because sooner or later we will start running in conflicting versions across projects. We will install libraries/packages into a Python virtual environment. uv can create one for us:

uv venv

This creates a .venv folder inside of your project - typical python development stuff - encapsulating your project. Now you need to activate the virtual environment in your terminal, so all the stuff we will do later will run within this virtual environment:

source .venv/bin/activate

Note: You need to activate every time you reopen your terminal.

Note 2: Depending on which terminal shell you use, an active venv could be somehow visually indicated. Also there are ways to have a venv activate automatically each time you open the project folder in terminal - look it up if you want.

Installing required dependencies #

My goal for next episodes is to write a few different nicely commented Python workflow scripts, that you can just copy/paste and run on your machine (and also modify if you wish to be an adventurer).

I obviously don't want to write everything from scratch, so let's install 2 popular battle-tested libraries that will simplify my life a bit.

yt-dlp - a feature-rich command-line audio/video downloader with support for thousands of sites (their description couldn't be more accurate). At some point we will download audio and video from Youtube, but yt-dlp also has adapters for many other popular media websites, if you ever wish to download from elsewhere. It's the best lib in this field.

Install it using uv:

uv add yt-dlp

Note: if you do read the docs, they always say pip install <something>, but we use uv package manager instead of old boy pip, so just replace pip install with uv add when you encounter this.

openai python API - the gipity guys offer a Python library that allows you to call their API if you have an OPENAI_API_KEY, but the good part about this library is that many other companies copy their API structure, so with a tiny change config change, it will work with popular AI APIs too. You will see later.

Install it using uv:

uv add openai

From here on - I don't know about you - but I prefer to write code in a nice code editor. I use VS Code, because it's free and everybody uses it (and because it doesn't cause brain damage like Vim). Always use what most people use, unless you found your reason why something else works for you - but don't be that guy who goes "I did everything as in instructions, but I write code on a typewriter...".

Assuming you have VS Code installed and you are in your project folder inside of terminal, type:

code .

and it will open this project in VS code.

Note: VS Code has a simple integrated terminal - if you have your project opened, you can activate your .venv there and run all scripts within it and you don't need to keep switching out.

This is enough for today. We will do AI things in the next one. And maybe learn something new about uv too!

continue to episode 2

text2cypher

2024-02-01T00:00:00Z

Code generation is still a pain point of all LLMs. I built this opensource app for evaluation (and possibly crowdsourcing) of Neo4j cypher queries. Queries and data responses are produced using Neo4j Langchain implementation and GPT4 as model.

the quest for the ultimate snack - a feline adventure

2023-05-06T00:00:00Z

The sun was setting over the rolling hills of the countryside, the golden light casting a warm glow over the vineyards and olive groves that stretched out as far as the eye could see. The landscape was dotted with charming stone houses and rustic farmhouses, and the air was filled with the sweet scent of wildflowers. It was a scene straight out of a storybook, reminiscent of the idyllic countryside of a far-off land.

As two feline adventurers set out on their quest for the ultimate snack, they couldn't help but feel a sense of excitement and wonder. The first cat, a sleek black feline with piercing green eyes, was named Kaela. Her companion, a fluffy orange tabby with bright yellow eyes, went by the name of Rolf. They were both dressed in tiny jackets and pants, complete with belts and buckles, which added to their charming and adventurous spirit.

As they walked through the fields, they came upon a slow-moving turtle, ambling along with a small wooden platform strapped to its back. Kaela and Rolf looked at each other, then back at the turtle. Without a word, they climbed onto the platform and settled in for the ride, eager to begin their adventure.

The turtle moved at a leisurely pace, allowing the feline duo to take in the sights and sounds of their surroundings. They passed by fields of lavender and sunflowers, and through small villages with charming stone buildings and narrow cobblestone streets. As the sun sank lower on the horizon, they finally arrived at a grand, ancient necropolis.

The necropolis was a sprawling complex of tombs and mausoleums, some of them dating back hundreds of years. Kaela and Rolf explored the winding paths and shadowy corners, marveling at the intricate carvings and inscriptions on the stone walls. As they turned a corner, they came face to face with a towering stone church, its bell tower reaching towards the sky.

Without hesitation, Kaela and Rolf made their way inside. The interior of the church was dimly lit, but the warm glow of candlelight flickered on the walls. The feline duo padded down the aisle, past rows of pews, until they reached the altar. There, they found a small alcove, where a statue of a saint stood watch over a glittering treasure trove.

Kaela and Rolf gazed at the treasure in amazement. There were silver coins and precious gems, sparkling in the flickering candlelight. But their eyes were drawn to something else entirely: a small, unassuming box, tucked away in the corner. It was plain and unremarkable, but something about it called to them.

Without a second thought, the feline duo pried open the lid of the box. Inside, they found a single, perfectly formed biscuit.

It was unlike any snack they had ever seen before, golden brown and crispy on the outside, with a soft, chewy center. Kaela and Rolf looked at each other in amazement. This was it - the ultimate snack.
As Kaela and Rolf savored the flavor of the ultimate biscuit, an older cat stepped out from the shadows. He was dressed in a long coat and hat, and his eyes shone with a wise and mysterious glimmer.
"Greetings, young travelers," he said, his voice low and gravelly. "I couldn't help but overhear your conversation, and I must say, you have yet to find the ultimate snack."
Kaela and Rolf looked at each other in surprise. They had thought that the biscuit was the end of their quest.

The older cat continued, "The ultimate snack is not in the form of a sweet biscuit, my friends. No, it is a rare and unique raw fish, caught only by a fishmonger who lives by the sea. His name is Salty Sam, and he never sells his catch. Salty Sam is a proud cat, who believes that his catch is the most exceptional in the land. He would only share it with the world if he were to receive the recognition he feels he deserves - perhaps from a renowned chef who could showcase the unique flavor in a delicious dish, or from a prestigious culinary magazine that could feature his catch in a glowing review. But he would never share his catch with ordinary diners, only those who appreciate the art of fine dining and the true value of exceptional cuisine.

Kaela and Rolf exchanged a determined glance. They knew that they had to find a way to taste that rare and unique raw fish, no matter what it took.

The older cat seemed to read their thoughts. "I can help you, young adventurers," he said. "I know the way to Salty Sam's lair, but be warned - it won't be easy to steal that fish from him. He's a wily old cat, and he never lets his guard down."

With the older cat as their guide, Kaela and Rolf set out towards the sea. Along the way, they stopped at a couple of local bistros to replenish their energy and savor the delicious local fare. At 'The Cheesy Mouse,' they indulged in plates of creamy cheese and warm bread, while at 'The Fisherman's Whisker,' they feasted on platters of crispy calamari and fries, washing it all down with tall glasses of chilled lemonade. As they drew closer to Salty Sam's lair, they could feel their hearts pounding with excitement and anticipation.

Finally, they arrived at the seaside town where Salty Sam lived. The salty air filled their nostrils, and the sound of seagulls echoed in their ears. They prowled through the town, keeping a low profile and searching for any sign of their target.

As they crept through the narrow streets, they finally spotted him - a gruff old cat with a thick beard and a weathered face, sitting outside his shop, cleaning his catch of the day. Kaela and Rolf exchanged a nervous glance. This was it - the moment of truth.

As Kaela and Rolf watched Salty Sam cleaning his catch of the day, they knew they had to act fast. They huddled together, whispering and planning their next move. Rolf suggested that they try to trick Salty Sam into thinking they were researchers studying the unique flavors of different types of fish. They could ask him to prepare a sample for them and then swap it with a fake one when he wasn't looking.

Kaela and Rolf put their plan into motion. Rolf approached Salty Sam and explained that they were conducting a study on the unique flavors of different types of fish, and they had heard that his catch was the most exceptional in the region. Salty Sam was skeptical, but Rolf showed him a paw print ID from the Royal Institute of Culinary Research and began to explain the details of their study in a convincing manner. Salty Sam eventually agreed to prepare a sample of his catch for the "researchers", but in reality he was about to trick them with a common fish. As Salty Sam went to prepare the sample, Kaela and Rolf watched him closely. They noticed that he was preparing a common fish, not the rare and unique raw fish they had been seeking. Kaela distracted Salty Sam by asking him questions about the common fish, while Rolf sneaked behind the counter to search for the ultimate catch. After a few tense moments, Rolf found the jewel of Salty Sam's catch - a rare and delectable raw fish with a shimmering silver skin - and signaled to Kaela. Rolf quickly wrapped the prized fish in a cloth and made his escape, while Kaela kept Salty Sam distracted with silly questions.

Kaela and Rolf soon savored the exquisite flavor of the rare and unique fish, knowing that they had finally found the ultimate delicacy. As they lounged in the warm sun, basking in the glow of their victory, they knew that they had truly become feline adventurers of the highest order.

Salty Sam, unaware of what had happened, continued to savor his catch, believing that he had successfully thwarted the "researchers." Little did he know that Kaela and Rolf had already outsmarted him and tasted the real "ultimate snack."

This story was inspired by a recent road trip to Tuscany and generated by prompting ChatGPT v3.5 for text and Stable Diffusion 2.1 for images. Fine tuning to desired input took around 30 prompts on ChatGPT, and around 50 prompts on Stable Diffusion to get some images that fit the context. Total time spent on this project was around 1:30h. Generated images could be improved by using more refined prompts.

job ad - prompt operator

2023-03-30T00:00:00Z

In our environment of loud, opinionated tinkers, meeting enthusiasts, and general work avoiders, we would like to welcome a

Prompt Operator #

Key skills:

Good hearing
Ability to creatively word our ideas into an LLM AI prompt
Copy & paste

Knowledge of a wide range of programming languages is a plus.

If you see yourself as someone who possesses these key skills, don't hesitate to send us your best prompt now. Let's iterate on recycled ideas from a database of the entire internet together. Who knows, maybe the next t-shirt e-commerce website will be born right from your prompt.

ode to PWAs

2023-02-03T00:00:00Z

Want it in the browser?

PWA works in the browser.

Want it on desktop? You are still packing into Electron?

PWA works as a desktop app on any modern OS.

Want it on Android?

PWA works on Android.

Want it on iOS?

PWA works on iOS.

Want to run it on a smart refrigerator?

PWA works also on a smart refrigerator.

Embrace PWAs. PWAs are the future!

P W A s !

return of eventko

2022-07-04T00:00:00Z

Recently had some time to rethink and rewrite Eventko - scraper for Ljubljana events. It is now officially a live as beta version. So far scraping venues that have events publicly posted on their websites. Will be adding more in the future.

Also rewrote the entire frontend web app - it is now a Progressive Web App (PWA), meaning that it can be saved to mobile phone desktop and be used in a headless browser mode - makes the UX a bit nicer, also adds caching and some other tiny improvements. Will be expanding it's functionalities as I go.

For now the service seems stable.

devlog - git squash

2022-05-23T00:00:00Z

Sometimes you need to squash - do it properly. Short devlog so I stick it in my mind forever and you as a reader get a zero-bullshit guide to git squash.

1.) First forget about Github's and similar services "Rebase and merge" button and what that does - we do Git here.

2.) Start your work on a new feature - either from master or develop - we go from develop because that's how we flow:

git checkout develop
git pull
git checkout -b feature/xyz

3.) Do some hard work and commit as you wish. Sometimes you do stupid commits - that's why you wanna squash - to hide your shame of failure and laziness out of commits messages:

git commit -m "Add cat icon to submit button"
git commit -m "Linter :("
git commit -m "Forgot something"

4.) Ok it was easy task, we are done. Let's fetch and start our interactive rebase against develop:

git fetch

git rebase --interactive origin/develop

Interactive rebase starts an interactive interface in your shell, that looks something like this:

pick a23b543 Add cat icon to submit button
pick fafa34c Linter
pick fdfd8a6 Forgot something

# more commented junk below here

Focus on the lines that start with pick - this are your commits. Pick one that will become the base and change other "pick"s into "squash" - so they get squashed into the picked one:

pick a23b543 Add cat icon to submit button
squash fafa34c Linter
squash fdfd8a6 Forgot something

Save and rebase will continue.

5.) If merge conflict occurs first curse and then check what, who, where:

git status

Fix conflicted file with whatever is your favorite way to solve conflicts. When you solve save and:

git add <file>

(no need to commit - rebase handles it)

6.) Then continue with rebase:

git rebase --continue

Once your commits have been squashed, Git will prompt you to write a commit message for your new squashed commit. Ask your coworkers how they want it to look or use your logic (there are guides on internet how to write good commit messages - if you do it properly certain popular git services will pre-fill their web interface from your message and save you time).

7.) Now we push - here we have 2 scenarios:

a.) First push of this new branch:

Push to origin as always:

git push --set-upstream origin feature/xyz

b.) Already pushed this branch before, but you forgot a lot of important stuff, did more work and now you wanna squash and hide your poor work performance from git history:

We force push (yes - FORCE - don't panic - all good and legal - we are on our own branch).

git push --force origin feature/xyz

8.) Open a pull request targeting develop (or whatever you branched from).

Success.

You are done like a pro - single commit message - rebased - entire feature implemented - no bugs - off we go.

clippy zalgo diacritics

2022-05-16T00:00:00Z

He comes to those who dare to invoke!

Anyway, this probably renders shit across browsers and systems, but some day we will have consistent stacking diacritics.

Meanwhile enjoy his recording taken on Ubuntu Firefox.

florentia

2022-05-03T00:00:00Z

Overlaid memories of Florence.

1st may 2022, florence, italy

gmk yugo

2022-04-06T00:00:00Z

A good year ago I was writing about my custom keyboard adventure and the struggles of getting a custom keycap set for Slovene and Serbo-Croatian Latin keyboard layout, main problem being the fact that it has five additional special characters: Č, Ć, Ž, Š and Đ. Luckily GMK Yugo is here and even though I missed the group buy I managed to snatch extras when they were stocked on mykeyboard.eu (they sold out in a few hours).

A short amateur review is in place considering the long wait.

image from https://geekhack.org/index.php?topic=103263.0

Yugo 45 kit comes in a nice Yugo themed packaging showcasing the car's hood, headlights, plate and chassis at the bottom which made me giggle a bit, but it's a nice detail. Both ISO and ANSI are included and ESC and ENTER keys come in two versions - beige (RAL 090 90 20) or red (RAL 030 30 45), which leaves you some tiny space for variation depending on your taste - I used red versions. I wish that the red spacebar was also included in the base kit, but for that you needed to order the Cabrio kit.

Clean look and a pleasing beige color are what makes this set a joy to look at. Since I have a backlit keyboard the beige also fits nicely with a yellow-ish led backlight and the letters are perfectly visible also in the dark even if the letter layer is not translucent - the monitor emits enough light to make it pleasing. Real retro nostalgia of the iconic car.

So here is the final assembly:

That's pretty much all I have to say - big thumbs up to the YugoMK team for making this set a reality.

losOS

2022-04-01T00:00:00Z

losos / salmon: a marine and freshwater food fish, Salmo salar, of the family Salmonidae, having pink flesh, inhabiting waters off the North Atlantic coasts of Europe and North America near the mouths of large rivers, which it enters to spawn.
los / moose: a ruminant mammal (Alces alces) with humped shoulders, long legs, and broadly palmated antlers that is the largest existing member of the deer family and inhabits forested areas of Canada, the northern U.S., Europe, and Asia
operacijski sistem / operating system (OS): software that controls the operation of a computer and directs the processing of programs (as by assigning storage space in memory and controlling input and output functions)

Fictional fault tolerant system.

Slovenian play of words.

about central bank digital currencies and basic universal income

2022-03-18T00:00:00Z

This post is just a reminder and a dark 10 year bet that I hope will fail.

With US signing the executive order about digital assets and EU's ECB starting to consider digital euro, all while digital yuan is already live with the first test group in China, we can say that central bank digital currencies (CBDCs) are gaining traction with governments. At first glance the tech world would get excited that we are finally getting the deserved payment system for the digital age without the need of third-party transactions, but there seems to be more at stake.

If the promise of early crypto currencies was decentralization, avoidance of central authority and enabling anybody with access to the web to pay and get paid, CBDCs are reversing this to the direction where government has full authority over the entire digital currency - something that could not have been done with classic currencies - and we all know how this can be used. You may argue, that you can choose to not keep your funds in CBDCs and rather use other kinds of private crypto (Bitcoin and pals), but truth is that there is no guarantee that they will not be banned by law - like they already are in certain countries, mostly under the pretense of money laundering and criminal activities, but it is also a statement of power and monopoly of the currency. You may go the rebel way and decide to not play with your country anymore and move to wherever sanity is still a thing and be creative with your funds, but not everybody can and this defeats the main promise of crypto empowering everybody equally and giving everybody souverenity over their right to transact with other people freely.

Which brings us to basic universal income (BUI). BUI is the idea of giving every citizen a base monthly sum of money that would enable him to live with dignity and avoid poverty without the need to work for it. If you want more you should join the market. Different models are being tested around the world and generally it is not a bad idea if the economy of your country can support it somehow. I will not be going into the debate on why we need it in this writeup, since there are better sources about it around, but there is always a but...

Let's try to combine BUI with CBDCs and you can see that the government now has complete control over your assets. The first step is to only allow receiving BUI in the form of CBDC. Disable the ability to convert CBDC in any other currency for the receivers of BUI (which can be easily done, since this is programmable money) and in the end if govt goes fully totalitarian, limit the spending categories for BUI receivers.

You want to go gamble? Well not on BUI. Do you want to treat yourself to a craft beer? We only allow you to buy state owned lager brands. You were saving up part of your monthly BUI to purchase a home or somehow get something of your own? You can only pay rents with BUI - or even worse - let me just set an expiration date on your funds to drive the economy - whatever you don't spend this month is gone.

You know "it's OUR money not yours".

This may sound extreme and paranoid, but totalitarian governments already exist (or can turn into one quite quickly during any crisis - proven many times in last century, heck even last two years) and CBDCs are a lovely tool in such situations.

Let's hope this bet fails miserably and that common citizens don't give up their right to transact freely - I will be revisiting this post in 10 years.

svg drawing with github copilot

2022-02-26T00:00:00Z

This week I noticed that I've got Github Copilot invitation that has been sitting in my mailbox for some time now - not sure how I missed that. Anyway, started playing around with it to see how capable it is and it definetly speeds up typing code - I can see myself getting lazy and hooked on this (and why not, I want to build features and products, not type code).

Soon enough I've got this idea that maybe the boy is smart enough to generate some random vector graphics and maybe get something interesting out of it. Well turns out it is not that interesting at the end of the day, but was a fun experiment:

So how was this SVG generated?

I decided I will pick a few different SVG elements like <circle>, <path>, <rect> etc. and let Github Copilot complete the properties however it feels. I had to change a few colors in the end, because for certain elements it just kept rendering white fill, and also when you use the same element multiple times, it will just keep repeating the same numbers, so I give him a bit more help and setting a "seed" prop from which then it gets a bit more creative and computes different numbers.

I giggled at the <text> tag, where Copilot decided to just put in the text Hello World - I liked that bit. The second time I tried, it put in PHP tags - crazy.

I was disappointed with the <ellipse> tag since it always defines props that result in a circle, so that one is a bit boring.

Github Copilot certainly is not a creative artist, but a great tool.

devlog - github actions

2022-02-02T00:00:00Z

I've been migrating a lot of Gitlab deployment pipelines to Github lately. Github actions are a nice thing, but take some getting used to, before you can mirror your deployment strategy to the one you had on Gitlab. Writing down some public personal notes for future reference:

install a yaml validator plugin for your editor before you even start
when searching for resources do not trust any blogs including this one; they are a good reference but syntax they provide is most likely outdated; always consult official Github Actions docs
always check if there is a newer version of a public action
Act is a nice tool, but it is not 1:1 compared to running actions on Github
use reusable workflows, they take some time to set up, but once all input vars are set correctly it speeds up setting up multiple environments pipelines
reusable workflows can't have a dynamic tag; you either have to specify a branch, version or commit hash (obvious security reasons), same goes for actions
don't forget to cache dependencies and everything you can to speed up your pipelines; pipeline re-run times can be greatly reduced with caching and storing artifacts
don't forget to expire your artifacts in a reasonable time (after some time Github will expire them for you)
you can read Github token with ${{ secrets.GITHUB_TOKEN }}, but in a reusable workflow you have to read it with ${{ github.token }}
reduce log output using --silent, --quiet or whatever flag silences your log output for desired command
you can't run deploy feature branch reviews on Github Pages; this would be a nice feature, but they only allow 1 Github Pages deployment per repository, so you will need external hosting for review deployments
use ${{ github.head_ref }} when you need your branch name
consult docs for hosted runners to see which tools are preinstalled for you in hosted runners before you go complicating your workflows with custom installs; complete lists of what each runner contains are available, like this one for ubuntu runner: https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu2004-Readme.md
you can use workflow_dispatch to trigger workflows manually from Github; UI for this is kinda clunky at the moment, but it works (do note GH actions are in active development); you also have API if you want
you can specify a deployment environment and protect the workflow to only allow pipeline runs triggered from branches allowed to deploy to specified environments. this will instantly exit the job if requirements to deploy to env are not met:

job_name:
  environment:
    name: production
    url: https://www.example.com

you can share values between jobs with outputs; I needed to sanizite a branch name to reuse in deployment urls later. Example of using outputs between jobs:

jobs:
  sanitize_branch:
    name: sanitize branch name job
    runs-on: ubuntu-latest
    outputs:
      output: ${{ steps.sanitize_branch.outputs.sanitized_branch }}
    steps:
      - id: sanitize_branch
        run: |
          REPO="${{ github.head_ref }}"
          REPO_SANITIZED="${REPO////-}"
          echo "::set-output name=sanitized_branch::${REPO_SANITIZED}"
  another_job:
    needs: [sanitize_branch]
    name: just another separate job
    runs-on: ubuntu-latest
    steps:
    	- run: echo ${{needs.sanitize_branch.outputs.output}}

use npm ci to run your npm actions (or equivalent for your package manager)
macOS runners cost 10x more per minute than Linux runners; pick macOS only when you really need it, it is not a thing of preference

Github is not the same in terms of features compared to Gitlab, but with a few workarounds on Github and Github Actions you get to same or similar results.

picture gallery mini site

2022-01-23T00:00:00Z

Picture gallery now lives on: gallery.easwee.net

It is built on the new Remix framework that recently launched as opensource software. It was a pleasant developing experience - great framework 10/10 would recommend.

Some of the shots in the gallery used to be part of my Instagram profile, but I ditched that all together and prefer to keep it here and expand easwee.net a bit more.

css filmstrip

2022-01-10T00:00:00Z

2022 - what a time to be alive!

I can make a container that looks like a filmstrip with a single CSS class.

Either vertical - yay a demo!

.filmstrip-vertical {
  background-image: linear-gradient(
      to right,
      transparent 20px,
      black 20px,
      black calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    repeating-linear-gradient(#000, #000 20px, #fff 20px, #fff 40px);
  background-repeat: repeat-y;
  box-sizing: border-box;
  border-left: 20px solid black;
  border-right: 20px solid black;
  padding: 20px 40px;
}

Or horizontal - another demo!

.filmstrip-horizontal {
  background-image: linear-gradient(
      to bottom,
      transparent 20px,
      black 20px,
      black calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    repeating-linear-gradient(90deg, #000, #000 20px, #fff 20px, #fff 40px);
  box-sizing: border-box;
  border-top: 20px solid black;
  border-bottom: 20px solid black;
  padding: 40px 20px;
}

I needed this today.

You may need it tomorrow.

Enjoy CSS.

CSS is freedom.

CSS is life.

eventko service stopped

2021-11-28T00:00:00Z

Due to Facebook being more and more persistent in blocking scrapers I will no longer maintain Eventko scraping project (https://eventko.easwee.net), since it is way to much effort to keep it running for no profit. This was a handy tool for me and a few of my friends to have a nice and clean daily list of quality events happening in our city.

A short development history #

I first started Eventko as a service calling Facebook /events endpoint through their official API. As you may know Facebook (now Meta) removed the /events endpoint from their Graph API a few years ago. After rewriting the scraper to parse the mobile.facebook.com that serves SSR content (or at least used to at the time), which was easier to parse, they started serving login walls that prevented scraping without authenticating. To avoid this I switched to Puppeteer and did the actual login flow, auth token storing and just simulated the user flow on the latest FB site. While this lasted for a while, eventually the server that hosts Eventko scraper got blacklisted. I took time again and rewrote it to scrape with rotating residential proxies. This works ok, but good residential proxies don't come as a free service and require a monthly fee, which I'm not interested in subscribing to just to run a service used by 10 people. Using free public proxy lists is not an option, since those lists are already blacklisted and often contain offline or very slow entries.

So until I get a new idea on how to serve a quality list of events I'll just keep it offline. At least it was a good project from which I learned a lot about scraping and bypassing anti-scraping measures.

rage driven development

2021-08-27T00:00:00Z

Rage Driven Development (RDD) can be a valuable technique when tackling larger legacy code refactors or making new trending tech work as promised by their documentation.

Let's face it - sooner or later you introduce some legacy in your codebase and there comes a day when you finally get that management allowance that will enable you to start refactoring and tackling this tech debt. Or maybe you will use it to switch to that new praised library that supposedly solves all the problems you've been having in the last 5 years. Both legit actions. There are many methodologies on how to tackle legacy refactors and changes, but I'm here to talk about RDD.

So you did your analysis, sketched it out, know the bad parts of it and you are now down to the last step - start refactoring the codebase.

In order for RDD to really work, git blame is a must to use - you really have to see those people's names written on each line you're gonna be touching, so you can blame it on their family tree. A playlist of random songs that you would normally be playing at 3am under certain weird substances is another tool in your box. If you are not a smoker, you should become one - helps with the boring part while waiting for tests to pass. Let's dive into it.

So it's monday and you have the next 14 days free of meetings - you should focus. To start we first need to move a few util functions to a proper lib - no problem it's just I/O - this should be easy. Ah, there is one that also has dependency on that service method, hmm, not good - who did this? Yeah, fuck that guy, freelancers suck anyway, glad he doesn't work for us anymore. Ok split it out, move to utils lib, refactor calls, refactor imports, fix any missing params, yeah just make it work. Done! 30 files changed, no biggie, commit. Fuck yeah, this is smooth! Uh, forgot tests - let's run affected - nah just run everything to be sure nothing broke. 3027 test suites running in jsdom gonna take some time - let's go for a cig.

Fuuuu, 16 test suites failed, 46 tests failing. Piece of crap of tests, why do we write this crap anyway, it's not that it affects the amount of bugs those juniors generate. Also dafuq is up with Jest mocks. Ok let's fix this tests one by one, it's probably just mocks playing dirty anyway. 6 hours and many more curse words and outdated mock patterns and a lunch with a beer later: rerun failed tests - ok finally works. We moved and decoupled a few util functions. I still have it. Ah let's call it a day. Also fuck Jest again, what a piece of crap, should have just deleted those tests anyway.

Week quickly zooms by and once you get in the rage routine nothing can stop you. You are a senior dev after all. In the morning you now salute people with cynicism and insults because your codebase is getting better and stronger - they should praise and tolerate you for that. You think I've been binge-watching series for the last 15 years like you lazy peasants do after work? I get my coding patterns down, I polish them, I read all the best stuff, I prove people wrong in the comment sections of the most obscure internet blogs that San Francisco graduates just started to get a CV boost for their first job applications. I engange in the community and... ah shit.. dafuq is this... fucking typescript generics. Not that shit again. We are doing frontend React, it's not rocket science, why the fuck did we even install Typescript, it just slows the delivery of features. Javascript was designed without types in mind, just abuse it. Type-safety my ass. Those third world country freelancers and their generic types extending generic shit. No wonder nukes have been invented, they should have thrown more of that crap around - we would have Japan level work efficiency as a standard. Also I like anime, which reminds me I could throw up some random shitty songs like Shittyflute to boost the morale, gotta put that on loudspeakers, it's funny after all. What? You in a call? Fuck you, we have meeting rooms, I'm doing refactor work here, we have no time for meetings - delivery of good code is my life now. Deal with it - it's friday afternoon after all, you should be going home anyway. Oh shit - it's Friday already! 678 files changed, 3 new libs created, stuff decoupled, antipatterns screamed at and removed - gotta explain some of this shit to others. Also someone should really start reviewing my MR. C'mon I need 2 dev sacrifices that are gonna swipe through those 666 files until Monday, so QA can do a quick smoke test and we smack it into RC.

Monday morning - no reviews - I have to be nice - rage driven development is only in my mind, when talking to people you have to be sweet to get stuff done. Can anyone pretty pleaseee check my MR - it solves and brings you all the best warez. Yes! Got 2 approvals, QA did a smoke test, nothing is broken - my refactor skills are still godlike - smack that into RC.

"Your branch is 174 commits behind release-candidate."

Pft.

git checkout release-candidate
git pull
git checkout -
git merge release-candidate
...

54 conflicts can’t be automerged.

Fuck you lazy fucks ,I said on friday check and approve, why... now I hate you. Ok no worries I'm pro.

Solve conflicts.

git add .
git commit
ctrl-x
git push

Need re-approvals pretty please. The fuck everybody is in meetings. Am I the only one working here? Screw this I'm off to lunch and a beer.

"Your branch is 22 commits behind release-candidate."

Who the fuck did this? Who dared to get his MR in before my refactor during lunch - I have 678 touched files - this is no joke. You want this code in FIRST! Anyway - re-approve, I merged again.

"Your branch is 31 commits behind release-candidate."

...raging in apathy now. Solved again. Merged. Pushed. Reapprove please.

Bling!

Email: "Pipeline for branch best-refactor failed."

How the fuck - some random test that I didn't even touch is now failing. Life is bad. Jest is bad. Why do we even use Javascript at all? This would have never happened if we'd picked a proper language. Someone was talking about ELM. A delightful language for reliable web applications. My ass, those underpaid hipsters probably have it even worse. JS is freedom! And job security in a way. Ha I'm glad after all. Ah yes all is good, some insanity never killed anybody I guess. He probably killed himself for other reasons. But let's debug the problem - ah easy - just Jest version update screwing some stuff up. Nothing I can't fix with sword and flames - rewrite that crappy test, it's legacy anyway, we know better now, hate that guy that wrote this if we had no HR, god what I would... mothe...

Pipeline passing! Reapprove! Yes! Merged to RC!

Oh god yes, tears, let's have a shot of schnapps, it's after 3PM anyway!

This was the best sprint, code is now good, we learned so much, kudos to everyone for reviews and approvals, I'm best, I'm sane again. This team delivers! That guy FUCKS! Wait, who's that guy anyway? Is that the new guy? Oh, we have 3 new guys now? Didn't notice... Anyway, thank god we have Typescript or else this refactor would have never happened in 1 sprint worth of man-days, if it hadn't been for those types and interfaces... An Jest, you lovely Jest - so much functionality would have been broken if it wasn't tested. Was anybody doubting JS? Not me! Ah yes, we are good. I bet I could pass some nice knowledge to those freelancers if they were still around. Miss those guys.

Life is good and when you leave for the weekend after the sprint ends, you have peace of mind and get home in a pure zen mood. After all, you already threw all the rage out at work.

Rage Driven Development delivers.

Note: Above article is satire and you should tackle big refactors with caution and care and always care for a good mood in your team. Also don't swear at work. Any resemblance to real world situations is purely casual.

gameboy css replica

2021-02-06T00:00:00Z

Today was a rainy day.

A replica of Nintendo GameBoy made with HTML and CSS.

Fork it here: https://codepen.io/easwee/pen/yLVObNZ

customized keyboard

2021-01-20T00:00:00Z

This xmas I wished for a silent tenkeyless mechanical keyboard with ISO layout, preferably with Slovenian keycaps. Turns out it’s not so easy to get one.

I was digging into the custom mech keyboards community and the beautiful renders and build streams you can find around the net really get you hyped into getting a nice custom keyboard. But not for long, since you soon give up when you see everything is a group buy and has raffles and waitlists of 6-9 months before you get any parts delivered. And stuff gets really expensive really fast! It’s like Lego, just keyboards.

I decided to take a middle path, which still took me a month, but I somehow put something together with some average spending (far from cheap).

I ordered a Keychron K8 with hot-swappable PCB and German ISO key layout. Close enough to what I need and from here I can start modifying.

Keychron K8 has a metal top plate, there is also nice metal frame that goes all around the keyboard and adds some weight to it, but the bottom is plastic, and most mech keeb fans won’t like it, but that’s what you get for that price - I think it’s a solid deal.

The first common mod I did was to add some foam inside the case that should improve the sound of it - it changes a bit but don’t expect wonders. I used the foam that comes with the packaging, 2 layers of it fit perfectly so you can still fit the PCB back in without problems.

Second thing, I pulled out all the switches. My K8 came with Gateron Red switches. Since this is a hot-swap PCB no soldering is required, you can just unplug each switch (you get a switch puller tool with it, although it is quite low quality - if you plan to work with hot-swappable PCBs more definitely get a better tool).

There is a never ending debate around switches, but all I wanted is silence (mechanical silence). Just get whatever you like and don’t listen much to opinions. At first I wanted to get Cherry MX silent blacks, but stock was low on those, so a few hours of mechanical keyboard typing ASMR videos later, I settled for ZealPC’s Tealios linear switches (67g version 2). They seemed quiet enough for what I needed and it is also a quality switch - a bit pricey at 1$ per switch, but I was willing to spend money here - this was a treat for myself. Good, got them. Obviously you need to lube them - that makes them smooth, so I also ordered a 5ml capsule of Tribosys 3204 switch lubricant (supposed to be enough for 400 switches) and also some TX switch films. You put the films between the top and the bottom of the switch case to minimize the rattle. Lubing itself took a few hours to do the entire TKL (lucky I've got a helper - thanks!).

Since silence was my top priority, I also found bought a component called QMX Clips from Unikey. They cancel the bottom-up hit of the switch stem supposedly reducing the noise by 10dB (I was skeptical while ordering, but they work). This makes a huge difference in how the keyboard sounds, but it also changes the typing experience a bit, since the key travel distance is now a bit shorter and some people may not like that. It’s fine for me and I intend to keep the clips on and I also like the softer typing experience. QMX Clips are specifically made for Cherry-style switch housings, so they will work with Zeal, although it was a huge effort to click them in place (never tried on Cherry - maybe that’s just how they normally fit). It helps if you first clip it on one side and wobble it a bit, then unclip and clip the other side and in the end push it down, so it clips on both sides. Also I was not able to fit the clips on the backspace, enter and shift key due to stabilizers not leaving enough space to fit the clip.

For the keycaps, I found two beautiful sets that contained all the keys I needed for a Slovenian layout - GMK Yugo and KAT Napoleonic. Obviously both are sold out, so no luck there. I went with an alternative and purchased a set of blank keycaps to which I planned to add a printed set of Slovenian symbols on the south side of the cap. A clear look from top, but still have the symbols on the south side of the keycap. In the end I dropped the idea since blanks looked so good and I would probably have a lot of trouble aligning the stickers anyway.

So I ended up with a very silent blank ISO keyboard, fully lubed and equipped with QMX clips. I don’t really like the color of the keycaps, they look a bit boring, but they will do fine until I find a set I like and that fits my needs.

Total price of all parts was ~200€ without shipping costs.

testing domain level localization on localhost

2020-12-30T00:00:00Z

This approach is useful when you are making a multilanguage website that starts localizing already at domain level - meaning that each domain caters to it's own locale.

First add custom local domains to your hosts file. Make them unique and make sure they are not registered domains:

127.0.0.1       mylocaldomainxyz.com
127.0.0.1       mylocaldomainxyz.ch
127.0.0.1       mylocaldomainxyz.fr
127.0.0.1       mylocaldomainxyz.de

If you pick registered domain names like test.com or similar, HSTS will kick in and it will force redirect your local domain to https. In Firefox you can disable HSTS list preloading by setting network.stricttransportsecurity.preloadlist to false in about:config, I couldn't manage to disable it in latest Chrome - also didn't bother much since using unique local domains is way more simple.

Now I want to use this with latest NextJS (at the time of writing v10).

Simple enough it can now all be configured in next.config.js without the need of any additional libraries:

module.exports = {
  i18n: {
    http: true,
    locales: ["en", "fr", "de", "fr-CH", "it-CH", "de-CH"],
    defaultLocale: "en",
    domains: [
      {
        http: true,
        domain: "mylocaldomainxyz.com:3000",
        defaultLocale: "en",
      },
      {
        http: true,
        domain: "mylocaldomainxyz.de:3000",
        defaultLocale: "de",
      },
      {
        http: true,
        domain: "mylocaldomainxyz.fr:3000",
        defaultLocale: "fr",
      },
      {
        http: true,
        domain: "mylocaldomainxyz.ch:3000",
        defaultLocale: "de-CH",
        locales: ["fr-CH", "it-CH"],
      },
    ],
  }
};

The entry for Swiss uses multiple locales - default locale when hitting mylocaldomainxyz.ch will be German; French and Italian versions will be available on mylocaldomainxyz.ch/fr-CH and mylocaldomainxyz.ch/it-CH. Language detection is triggered only when hitting root index page. You can rewrite the urls if -CH suffix looks like overhead, but you will need to have the locales defined correctly, since de locale is not same as de-CH, ISO standard applies. For more configuration and usage options check NextJS Internationalized Routing docs.

Optional:

If you are running your apps on a custom port (3000 is popular) and find it annoying to have port appended to your custom url, you can redirect default port 80 to whatever port you want using iptables:

sudo iptables -t nat -I OUTPUT -p tcp -d 127.0.0.1 --dport 80 -j REDIRECT --to-ports 3000

You can now access your app directly without specifying port: http://mylocaldomainxyz.fr

To remove the output redirect when you don't need it anymore, first get numbered list of output redirects:

sudo iptables -t nat -v -L OUTPUT -n --line-number

A list of redirects is returned.

Check which line number is your custom redirect and remove it:

sudo iptables -t nat -D OUTPUT 3

Entry with line number 3 is removed.

blyat – brickout-like game done with godot engine

2020-10-02T00:00:00Z

Tinkering with Godot features, this was a good learning project to get a small game done from start to end. 3 levels total.

HTML5 wasm build for preview:
https://sample.easwee.net/blyat/blyat.html

Forkable repository – feel free to grab:
https://github.com/easwee/blyat

devlog - godot dump

2020-09-16T00:00:00Z

It’s been a few months since I’ve started playing with Godot engine and it has been an enjoyable experience.

Here I’m dumping a list of “aha moments” that I’ve pilled up while learning how to use it, hoping come handy to some other newcomer.

signals are Godot’s events; they are locally scoped to the component defining/using them; defining them in an auto-loaded singleton is a pattern I found useful using them as a cross-project event system
Vector2 has methods for most of the stuff you think you need to write a function for (need a distance between two points? no need for writing it from scratch – use distance_to), always check the latest docs
KinematicBody is easier to use to implement fine tuned player movement; compared to Rigidbody physics that will require you to understand forces and may be a pain to optimize into a smooth and simple game-play experience – always evaluate your approaches
multi-line comment shortcut: ctrl + k
if you have problems with imported asset types always check the “import” tab and hit “Reimport” with appropriate asset type selected
you can reduce your build size by compiling Godot from source and omitting unused features
Godot’s filesystem dock only shows built-in resources. JSON files are not built-in resources (https://godotengine.org/qa/30357/json-file-not-showing-in-editor)
when debugging collision shapes enable: Debug -> Visible Collision Shapes
when debugging mobile touch input enable: Project -> Project settings -> Input Devices -> Emulate touch from mouse
mouse_entered() and mouse_exited() also trigger with touch events
when exporting _.json, _.csv, *.txt, etc… data files, you need to specify file types in Export -> Resources -> Filters to export non-resource files/folders
need to setup for Android? This video tutorial is spot on: https://www.youtube.com/watch?v=6646oo2YSBY
but there can be a trick with older Android device running on Adreno based GPUs – they don’t support GLES3. Go to Project settings -> Rendering/Quality -> Render Name and set it to GLES2; Project settings -> Rendering/Vram Compression and enable Import Etc
you can have custom-shaped clickable buttons using BMP click masks and TextureButton (white clickable; black non-clickable; BMP must be 24-bit)
when you save the BMP into Godot folder it imports it as Texture – reimport it with correct format
mobile size of 1920×1080 works quite well; also try to play with stretch/size in Project settings
portrait mode can also be forced in Project settings
while we are at Project settings – don’t forget they have a “search” input
RichTextLabel support BB code formatting – brings back bulletin board memories, but is also a quite handy and useful text formatting method (at least I liked it)
there is also VisualScript inside Godot for “non-coders” – I don’t use it, but interesting
last bullet for this dump – but probably the most important: if you want to get anything done with Godot stop worrying about your code and architecture and just make your idea work smoothly, make it playable, polish the details for the user, not for developer, get it done, ship it out or you will never release anything if you just keep polishing the code. The engine is built for mess and node/component isolation allows you to keep even messy code manageable. If you are coming into Godot with years of development experience from other areas, over-optimizing/organizing your code can be a trap of getting frustrated with it – enjoy it – it’s GAME development – should be playful.

Hope this knowledge dump comes handy for some lonely indie game dev newbie soul. And let’s hope there is a part II in a few months.

convert large .pbf to .map using osmosis

2020-09-12T00:00:00Z

Prerequisites:
– osmosis
– mapsforge-map-writer plugin
– as much free HD space as possible

Download Osmosis and mapsforge-map-writer plugin as specified in their docs (as of writing this I used osmosis-0.48.2 and mapsforge-map-writer-master-20200902.143123-360-jar-with-dependencies.jar). Inside of /osmosis root folder create a /plugins folder and put mapsforge-map-writer-<version>-jar-with-dependencies.jar inside it.
You can run Osmosis from /bin folder – if any additional plugins are present inside the /plugins folder, you will be able to use additional options when running commands.

By default Osmosis runs in-memory (default type=ram), however for large map conversions, it can run out of memory and even allocating more (JAVACMD_OPTIONS=-Xmx8G or more) is sometimes not enough (throwing OutOfMemory: Java heap space).

Switching to type=hd, it offloads the temporary data to your hard drive:

osmosis --rb file=your_map_file.pbf --mapfile-writer file=converted_file_name.map type=hd

Above command will store temporary files in your OS temporary folder location instead of using memory, but the process itself takes more data, so you need a larger amount of free space compared to running type=ram

Note: You can run java -XshowSettings and check java.io.tmpdir value to see your temporary files location. In case your drive is full, it can be changed to another drive if you need more space. To convert a ~2.5GB .pbf file I needed ~50.0GB of free space for temporary files. I did the conversion on a Windows 10 machine, but it works the same on Linux.

hexagons in a spiral grid

2020-07-12T00:00:00Z

Had some obsession with hexagons lately while planning for a hobby project I want to build some time in the future, result of it is this trippy rainbows demo, drawing hexagons in a spiral grid.

The longer you let it run, more trippy it gets 🙂

Click to run

dom tribute to conway

2020-05-05T00:00:00Z

A small and rather low-performance DOM tribute to John Conway and his iconic Game of life.

The known rules are:
1.) Any live cell with fewer than two live neighbours dies, as if by underpopulation.
2.) Any live cell with two or three live neighbours lives on to the next generation.
3.) Any live cell with more than three live neighbours dies, as if by overpopulation.
4.) Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

The fascinating aspect of the game is that there is no known algorithm that can predict for how many generations an initial setup will survive. It could be 1, 10 or 10000, it could run for 1.000.000 generations and still go extinct in the 1.000.001.

PDF invoice generator

2019-09-28T00:00:00Z

As mentioned in my previous post I’ve been trying out Svelte for the last few weeks. Considering making the classic TO-DO app demo sounded a bit boring, I decided to build something more useful for myself – so I’ve put together an invoice generator that allows me to generate invoices for my company faster, compared to using a spreadsheet, as I used to do it until now.

It’s free to use and GDPR compliant, since all of the data you input is stored into IndexedDB, which lives inside your own browser only and is never sent to any server. A cheap but fast solution (avoiding to do any auth) . Once you set up the template, you will have it ready each time you return back. So you just update the client and invoice rows and generate a new PDF.

Check it out on this subdomain: https://invoicer.easwee.net/

Hope you find it useful.

oneplus one OS upgrade

2019-09-05T00:00:00Z

It’s been past 5 years since OnePlus released their first model One and this is still my main phone today. You may question why, but in reality except boosting specs and increasing camera picture quality, nothing impressive really happened in the phone tech, that would make me want to buy a new cutting edge phone (if I want quality pictures I use my DSLR, but also as a software developer I already have access to all the latest phones at work, so I really have no incentive of buying a new personal phone, not even just for fun).

But as time passes, I’ve also got a challenge idea – how long can I keep using this phone without having to give up any new app features, deal with slowdowns or let’s hope not breaking it (although I could replace the screen just for the sake of seeing how far I can go) .

In the last year I’ve noticed slowdowns in certain apps. The phone was running on Cyanogen 12.1 which is built on top of Android 5.1 and this was the last update I did (Cyanogen development has stopped 2 years ago – it’s a discontinued project).

As time goes by, we now have Android 10 out and major app developers started dropping support for Android 5. While I try to not be an app power user, there are a few apps I use daily and one of them is Revolut, that is my main way of payment for online shopping and also lunch bill splitting with work colleagues. Recently (Nov 13th, 2019) they also dropped support for Android 5 and there is really nothing to do but upgrade your phone OS (I obviously support this – we all hate those IE users, that still haven’t upgraded – and I’m a similar case, just in Android world). Considering I kinda want to keep using this handy app and still don’t want to buy a new phone, I started searching for alternatives to do a ROM upgrade for my OnePlus One.

Most reviews praised LineageOS as being a solid system that focuses on performance and simplicity, while still supporting all of the Google stuff without hassle – and must say that I’m very satisfied with it.

Install process is well documented and their website provides all of the info you need to get it running (took me about 1h to wipe and format, read through docs and install the new OS – just note I have adb and entire android development env already set up on work station – it may take a bit more for someone doing a custom ROM install for the first time).

Currently the version 16 runs on Android 9 and this brings a nice performance boost in terms of navigation and UX, also another very welcome feature is their “Extreme power saver” mode, which will extend daily duration of the now 5 years old battery that has seen better days (a full charge is needed every 1.5 days now – used to last above 3 days in beginning – all considering my personal usage, I would say some users would drain it faster). Add in nice personalization options as far as UX and theming goes and I think you have all you really need in a phone OS. Oh and enhanced privacy (Privacy Guard feature let’s you control what your apps do in background with a wider set of options)!

So if you are looking for a decent Android custom ROM, I would recommend to give LineageOS a try.

migration

2019-09-01T00:00:00Z

After 12 years since easwee.net was first registered, I decided that it’s time to move from a managed to a dedicated hosting to support new exciting projects. Migration is now done, including all of the subdomains and hosted files, so easwee’s network now runs on a more mature setup.

Stay tuned for interesting new future projects!

brief history of Slovenian game development

2019-07-28T00:00:00Z

In a country with a population of just 2 million people you can quickly figure out that not many are developers and if you take those that are, you can find out that game developers are even more uncommon, since earning your everyday bread in this wild industry is similar to playing lottery. Yet, there has always been a lively game development scene in Slovenia and some players managed to make it big. Out of curiosity I researched it a bit, trying to collect some of the pieces together into a brief history of Slovenian game development, since I couldn’t find anything around.

It all started in June 1984 when Kontrabant was published by Žiga Turk and Matevž Kmet. It was a text adventure game, costing 700 Yugoslavian dinars, and it ran on ZX Spectrum. Game theme was quite popular for that time in history – build your own computer by smuggling parts into Yugoslavia. The publisher – Radio Študent (student radio) also ran a prize contest at the time, where the best smugglers would submit letters by mail, containing passwords, number of steps and score points and a short funny write-up on how it was playing the game. The main prize was the ZX Spectrum which was awarded by a coin toss between the first two guys who finished the game – Iztok Saje as first to solve it and Peter Sokolov as second (as reported by the magazine Moj Mikro, November 1984, Peter won the ZX and Iztok got a “Zlatorog” sponsor package – probably beer considering what the company produced).

A sequel followed in December the same year with Kontrabant 2. Later on Žiga Turk in Ciril Kraševec created the publishing company Xenon, which released a few more Spectrum games – Smrkci (Smurfs), Eurorun and Bajke, together with Croatian publisher Suzy Soft from Zagreb, which was another adventure and treasure hunting game based on stories from Slovenian writer and historian Janez Trdina – Bajke in povesti o Gorjancih (Tales and stories about Gorjanci).

The next mention is a game called Zakladi Slovenije (Treasures of Slovenia) by Matej Kurent, which came out in October 1986 and was the first self-published game (indie), costing 1200 DIN. By playing the game you got to know Slovenia better, while you had to find a ship, sail and radar in order to be able to sail away (a bit silly since Slovenia has a lot of beautiful landmarks, but you know – abroad is always more interesting than at home).

The Commodore 64 scene was mostly made of pirated games or copies of popular games. Pirated games were advertised in magazines and even broadcasted over national radio for anyone free to record. While there were various demos and programs written, I couldn’t find anything major in Commodore gaming.
In 1989 Arxel Tribe was founded by Matjaž Požlep and Diego Zanco with the initial idea of producing computer generated images. They made several TV shows and opened a Paris based 3D subsidiary and later expanded into an international collaboration switching to game production in 1996. After the first successful game release in France with Pilgrim (250.000 units sold, published by Infogrames), they had their first international breakthrough of the studio in 1998 with Ring: The Legend of the Nibelungen published under Cryo, which sold an amazing 700.000 copies — a lot at the time.

Ring is an interactive science fiction opera adventure, a 3D graphical adventure set in the 40th century that follows the story of Richard Wagner’s epic opera Ring of the Nibelungen. As one of four characters, the player must conclude the legend of the Ring and restore humanity to its rightful place as leaders of the universe by defeating four evil powers.

In 1999 Arxel Tribe became a video game publisher releasing games in 35 countries developed by fellow studios based in Europe, North America and Korea, along its own creations. The company was sold in 2001 to one of its clients, CTO S.p.A., Italy’s largest video game distributor.

Arxel Tribe in a way paved the way for ZootFly, a game studio founded in 2002 by Boštjan Troha, Denis Rožaj and David Pangerl, who came from Arxel Tribe’s team. One of the more know titles developed was Panzer Elite Action: Fields of glory. It’s a story of three tank commanders and their crew. The German commander, encouraged by easy successes in Poland and France, moves on to the Eastern Front and the brink of victory with the taking of Stalingrad. Players meet the Russian commander in desperate straits as he helps defend Stalingrad, and follow him as the tide turns against the Germans and he joins the massive battle of Kursk. The American commander enters the war at the Normandy Beachhead on D-Day. After the struggle for the Bocage, he defends against the German outbreak at the Battle of the Bulge and then drives on to the victorious crossing of the Rhine. Game was released on PC and the Xbox.

Another well selling title done in the later years was Marlow Briggs and the Mask of Death, co-developed with Microsoft on a budget of $5 million, bringing in $45 million.

Zootfly also invested a lot of time into research of psychometrics – building psychological profiles of players using their inputs and adapting the game accordingly. For example, a game could have three distinctly different conclusions and the psychometrics engine would pick the right one for the player. The goal was to avoid unwanted endings, as the game would hopefully have enough feedback to deliver what the player wanted. The immediate reactions of the game would work on positive feedback. If the player were cerebral, they would receive more cerebral challenges; if violent, more violence.

Immediate responses could improve the usability/learning curves as well. For example, if the player were to quick-save often, the game might be too difficult, and if they were to not discover many rooms in a time period, they might be lost and need additional stimuli to proceed. If they were too fast and the game was not fun anymore, they might require more interesting obstacles.

In the end this was probably also what sparkled interest for the acquisition of the Zootfly by a company that made luxury casino and gaming products, with hopes that this could be integrated into their machines.

2005 brought us Dugout Online a free to play online football manager browser game developed by Melderon. I remember playing this game at the time and compared to the Football Manager series by Sports Interactive, Dugout used auto-generated and country-localized player names (probably to avoid licensing), which brought a lot of fun into the game since often the name and surname combinations sounded silly, which added extra fun when buying and selling players (that also aged with season) and also got you a bit emotionally attached to them. Worth checking out if you are a football enthusiast, it is still running today.

In 2006, in times when Flash games were still thriving, you may remember the global phenomena game Line Rider done by Boštjan Čadež and released first on DeviantArt in September 2006. The game itself is pretty simple, you are presented with a blank white space on which you can draw lines where Bosh, the main character, will ride with his sledge. This opens up millions of options for the user to create tracks and exploit the game physics in every possible way you can imagine. On July 1, 2008, the original Flash version was replaced by a new one written in Silverlight. It included a new feature that allowed people to send tracks to other people via Windows Messenger. On October 23, 2009, this was replaced by Beta 3, which has the option to use dual players, a camera, trapdoor and deceleration lines. A second release of the game also followed on Nintendo DS and Wii in 2008. It definitely became a cult game, which got featured all over the net and also won the Best Webtoy of 2006 award.

Moving forward to 2008 a new company called Actalogic was founded by David Pangerl from Zootfly. With a small team, which made a few different simulator games in the begining (Skyscraper simulator, Tank simulator, Hotel Empire), their first major success came in 2010 with the release of Agrar Simulator on Steam, which sold quite well in its early days. The company had some ups and downs, but they are still kicking today with the release of Hypernova: Escape from Hadea in 2017, a tower defense type of game.

With the rise of Android phones and mobile gaming we got more attempts of trying to break through in this field too.

The next big player – Outfit7 – started their journey in 2009. Samo and Iza Login founded it with the idea to enter the business of mobile apps, but soon turned into mobile gaming, when they developed a children’s app called Talking Tom Cat. It is a tamagotchi-like game, where you feed and pet your 3D cartoon-ish cat, but with an interesting feature where you can use a voice input to talk to it and it will repeat you words with a high pitched voice. Kids loved it and it sparkled a huge success and soon Talking Tom and friends followed, which added a few new characters into the game. Talking Tom and Friends reached 300 million downloads 19 months after its launch. The app franchise then went on to hit one billion downloads in June 2013 and reached over 230 countries worldwide. Later they expanded the story by releasing YouTube singles, various merchandise and an animated series in collaboration with Disney. The company sold in 2017 to the chinese for an incredible sum of $1 billion, but they still continue making new games.

An interesting case in indie scene is Bojan Klabjan with his Matches puzzle game. In 2015 he wrote the game out of boredom at his daily job. The game is as simple as it gets – solve logical and mathematical problems by adding or removing matches from patterns on screen. The games keeps the user engaged with over 1000 different levels. Level difficulty does not increase with each new level, but rather keeps the user engaged and entertained by mixing easy and hard levels through the game progression. This way an average user actually completes the game in approximately 14 days. The game was translated in 16 different languages, very well received by the public and quickly reached 10 million downloads, which allowed him to quit his job as bank sysadmin and concentrate on what he really enjoys doing.

Motiviti has been around since 2009, but I would like to specifically expose their currently-in-development game Elroy and the aliens. Elroy and the aliens is an adventure action puzzle game that reminds me a bit of Monkey Island as far as graphics go, and while it has been in development since 2015, the creators are promising a release soon (end of 2018, most probably 2019 considering they are putting in the free hours besides their regular projects), but for all the fans of this forgotten genre the wait is worth it.

There has already been a huge wave of good feedback from Steam community and getting green-lit was the first step. The game is running on Unity engine and features amazing hand-drawn and colorful graphics and they are promising us a good dose of humor including voice acting. I’ll be keeping an eye on it since there hasn’t been a game release of this type for a long time now.

Note: the following write-up was put together purely from my knowledge of the Slovenian game dev scene and from some minor research I did online in order to cover the early years. Link references can be found below for extra info. If you think that any major player is missing (early commodore scene? I was a kinder-garden kid at the time) contact me and I’ll be glad to expand the article with merits.

References:

http://retrospec.sgn.net/users/tomcat/yu/ZX_list.php
https://en.wikipedia.org/wiki/Arxel_Tribe
https://www.mobygames.com/game/ring-the-legend-of-the-nibelungen
https://en.wikipedia.org/wiki/ZootFly
https://www.linerider.com/
https://en.wikipedia.org/wiki/Line_Rider
https://www.deviantart.com/fsk/art/Line-Rider-beta-40255643
http://www.actalogic.com/
https://store.steampowered.com/app/650750/
https://www.delo.si/druzba/delova-borza-dela/z-racunalniskimi-igrami-na-svetovni-trg.html
https://en.wikipedia.org/wiki/Outfit
https://www.dugout-online.com
https://play.google.com/store/apps/details?id=com.klabjan.movethematchespuzzles&hl=en_US
https://www.rtvslo.si/rckc/slo/druzba/devet-milijonov-prenosov-iger-z-vzigalicami-in-direktorska-placa-za-ustvarjalca/367790
https://www.motiviti.com/
https://elroythegame.com/
http://javka.mn3njalnik.com/igrovje/slovenska-dogodivscina-na-obzorju-elroy-and-the-aliens/
http://www.slogamedev.net/

rendering 10.000 svg icons

2019-05-08T00:00:00Z

A quick performance test on what is the best approach to render 10.000 SVG icons.

Tests were done in Chrome version 79.0.3945.117 (Official Build) (64-bit) running on ThinkPad x270 16GB RAM.

Same tests done in Firefox actually render SVGs much faster – so Firefox seems to have a better handler for SVG rendering.

Test files are linked for each test so you can try them on your own machine.

1.) All inline – AWFUL performance (Inline test file)

2.) Inline using symbol – BEST when you don’t want extra requests (Inline with 1 symbol | Inline with multiple symbols)

3.) External – ABSOLUTE FASTEST to render but makes extra request for each file so that may slow it down when many icons are used (External with 1 svg | External with multiple SVGs)

4.) External using symbol – SLOWER than #2 and #3 (External with symbol test file)

devlog - svelte app development experience

2019-02-02T00:00:00Z

This is a short write-up after completing a single page app project in Svelte.

The goal was to create an invoicing app that allows me to generate invoices for my company and export them into PDF with minimal click steps. It also includes conversion rates API fetching to support on-the-fly $ to € conversion, and simple client-side data storage inside IndexedDB, to prevent having to write in company data each time – ideal for recurring monthly invoices (I did not want to deal with setting up a server and database and user authentication at this point).

The initial setup really requires no effort. I decided to pick Rollup instead of Webpack as a bundler, just to test it out – no problems (your decision – both can be used).

So what is so amazing about Svelte?

First thing, writing your components requires minimal boilerplate. A custom date-picker component with change handler that fires and stores date into IndexedDB, and also fetches new conversion rates from API endpoint when user stops typing or picks a date, would look something like this:

<script>
  import { onMount } from "svelte";
  import { fetchRates } from "api";
  import { format } from "date-fns";
  import { rates, ownerData } from "store";
  import { idbRead, idbUpdate } from "utils";
  let typingTimeout = null;
  function handleInputChange() {
    window.clearTimeout(typingTimeout);
    $ownerData = $ownerData;
    typingTimeout = window.setTimeout(function() {
      idbUpdate("db", "owner", 1, $ownerData)
        .then(() => idbRead("biro_db", "owner", 1))
        .then(async result => {
          ownerData.set(result);
          const response = await fetchRates(
            format($ownerData.issue_date, "YYYY-MM-DD"),
            $ownerData.base_currency
          );
          rates.set(response.data.rates);
        });
    }, 500);
  }
</script>
<style>
  label {
    display: block;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
  }
</style>
<form>
  <div class="field">
    <label>Issue date:</label>
    <input
      type="date"
      bind:value={$ownerData.issue_date}
      on:keyup={() => handleInputChange()}
      on:change={() => handleInputChange()}
      placeholder="Issue date" />
  </div>
</form>

As you can see while there is quite some functionality done, the code itself is mostly plain html/js/css.

Proprietary syntax is:
– $ sign, which means automatic store subscription onMount and unsubscription on onDestroy (shorthand for store .subscribe()/.unsubscribe()methods). This makes it easy to read data from store inside templates.
– bind:value which makes two way data binding with input fields a piece of cake.
– on: event supports any of the regular js events.

The next thing that amazed me is how simple it is to create transitions with Svelte. For fading in and out a component when it mounts and unmounts all it takes is:

<script>
  import { fade } from "svelte/transition";
</script>
<div transition:fade>It fades!</div>

That’s it – and you have a fading element out of the box – and it’s a smooth CSS transition! Transition also accepts a configuration, so you can customize it to your likes.

The last thing I’d like to point out in this post (to avoid listing all the Svelte features, which are also nicely available in their online interactive tutorial) is the global store integration.
If you’ve been coding SPAs for last few years you may have dealt with at least 3-4 different libs for handling global state changes and you may know that most of them take some complexity in the process of making them work. Svelte comes with it’s own solution – with readable and writable stores and a bunch of other handy features and so far this has been the easiest one to implement for me. Some examples:

// define it in a store.js or wherever you want
export const rates = writable({USD: 0.8643});
// import it when you need it
import { rates } from "store";
// simply use it in code with $ shortcut
<p>Total is: {100 * $rates.USD}
// set it to a new value (let's say after API response)
rates.set(response.data.rates);
// .update() that takes function also available

Again no bloated code – clean and readable.

To recap: minimal boilerplate code, simple way of achieving transitions and animations and dirt simple global state management add so much to development speed that you can finally focus on developing features and stop wasting time on bloated patterns wrapped in tons of boilerplate code (khm… I’m looking at you Redux…) that at the end of the day don’t add anything to the final product and usability. All of this combined with performance that beats React’s speed in re-rendering definitely make me wanna use it again.

For more of Svelte’s features check out the interactive tutorial:
https://svelte.dev/tutorial/basics

Now there is one more question – would I use it in production?

If I was making a fully client based single page app with heavy animations and a lot of UX state changes – I would definitely dare to pitch it to a client. Svelte also offers Sapper, which we could say is an equivalent of Next.js, but at the time of writing this (august 2019) I haven’t dived into Sapper much yet, so I’m not confident enough to give an opinion on it, but we could say it is pretty much an equivalent to Next.js in terms of features. I would first like to understand how Svelte works fully and try out all of it’s features. Considering occasionally you still stumble upon some bugs, I want to be confident that I understand the mechanics of the basic Svelte library before diving into Sapper, so I can easily work around those (or maybe contribute a fix). An excellent point of reference for me is the very welcoming Svelte Discord community – live and active.

In conclusion I would say that Svelte is a framework I will be watching and using in the near future and I have a feeling it has great potential to grow in user adoption. Keep an eye on it!

Big thumbs up to the Svelte dev team!

P.S.: Maybe I should generalize the invoicer app and just release it to public – a TODO if I find some more time to spend on it.

devlog - how I use chrome devtools

2019-01-12T00:00:00Z

When collaborating on projects and helping debugging websites and web apps, I often notice that a lot of developers miss out on a lot of useful features that Chrome DevTools have to offer, making their debugging experience more painful and time consuming, so I’m presenting my “tool-bag” of Chrome DevTools features that help me solve code issues faster.

General #

ctrl + p
You may be used to this command from your favorite popular code editors and IDEs, but this is also available inside Chrome DevTools and let’s you open files and resources loaded by the page and browse through them.

ctrl + shift + p
Similar to the previous shortcut, this one opens a list of all available commands in a nicely formatted list. Super useful shortcut and feature that will certainly introduce you to a lot of other features you may not even notice at first glance. Take your time to go through the list – you will most probably find something new.

Elements tab #

Elements tab presents you with DOM and CSS and is generally used for debugging layout and checking DOM props. But it also contains a few nice hidden features:

Reorder DOM elements
By clicking-holding an element you can actually drag it around and rearrange it’s order or nest it out of it’s parent or move it into another DOM element. Note that by deleting element by element you can sometimes easily identify which one is causing your layout to break.

Shift-click on CSS colors
By holding down shift key you can click on any CSS color and change it’s format. Available formats are: hex, short-hex, rgb and hsl. Switching will convert the values to appropriate format, which is often useful when you need to quickly convert hex to rgba since you decided you want to introduce the alpha channel to the color.

Toggle element state
While it’s nicely visible it’s often a forgotten feature – clicking :hov expands a menu where you can select different element states so you can test the styles for them.

Console #

Timestamps
Hit F1 (or click the three vertical dots in top right corner and select Settings) to open Settings and under the Console section check “timestamps”. Now any console output will have a timestamp printed, which already gives you a better overview of events in time.

console.table()
Besides console.log you probably also use console.error and console.warning, but there is also the very handy way of printing out data with console.table, which often looks much more readable. This is not a Chrome DevTools feature, since you can use it in any console output, but I feel like I should mention it here.
Check MDN for details: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

copy(var)
With copy() you can copy the value of any variable from console to your clipboard.

Preserve log
I always have preserve log turned on in the console settings to keep logs between page refreshes. I use clear if I need to empty the console.

Source tab #

Breakpoints
Amazing as it is the debugger statement is often ignored by JS developers. Stopping code inside your functions is the most common way of debugging in most languages, but somehow it is not the go-to practice in the JS world, where throwing console.logs all over the place is the most seen practice. Using debugger will let you easily access and print out any variable to the console, but also will enable you to step through your code line by line and facilitate identifying the problematic line. DevTools also let you place inline breakpoints on-the-fly, that speed up the debugging when you just want to skip a few lines of code and stop at another point, and also let you step into functions.

Deactivate breakpoints
When debugging a complex problem you will usually end up with multiple breakpoints cross multiple functions. When trying out a solution, you can quickly deactivate all breakpoints and let the code run to the end without having to manually progress over breakpoints.

Pause on exception
Sometimes you deal with errors that show up once your app has been running for some time or you just want to stop before the error throws. Enabling pause on exception will catch the error when it happens and pause code execution right before throwing it, letting you analyze the last state before it happened.

Pretty print
When catching production only bugs, you will often have to deal with hard-to-read minified code. Clicking the pretty print button will reformat back to a human readable source and let you place inline breakpoints on it.

Network tab #

Network tab is straight forward with it’s UI – two features I’d like to expose:

Block request URL / domain
When you need to test how something would render if a network request is blocked or fails, you can temporarily block/unblock specific URLs or entire domain by right clicking on the specific item from the list and selecting it in the menu. Useful also to quickly check out alt texts by blocking image URLs.

Bandwidth throttling
This comes handy when your app rendering depends on the network speed and you want to see how partially loaded containers look like or check loading animations.

Performance tab #

CPU throttling
When you want to simulate the rendering of a low-tier device with bad CPU you can slow down the profiler by setting a 6x or 10x slower CPU rendering simulation, and see which potential bottlenecks in rendering times can arise when you don’t have powerful CPUs available.

Save/Load profile
After each profiling you can also save the data gathered and load it later for comparison when optimizations have been done on your code.

Rest of tabs mostly contain just various data representation and analysis and are straight forward obvious to read and understand.

Don’t forget that there are also many additional plugins you can add to Chrome DevTools depending on which technologies you use on your project. Check out Chrome Web Store to see what’s available on: https://chrome.google.com/webstore/category/ext/11-web-development

eventko v2

2018-11-07T00:00:00Z

For a few years I’ve been running a daily events collector that pooled Facebook events for our capital city Ljubljana from a curated list of venues. Unfortunately in 2018 Facebook limited the amount of data that you can get from their Graph API, so my events collector stopped working.

Since the Facebook events feed on their main website is still messy and the event results returned there are cluttered with a lot of content I really do not care for, I re-wrote the events collector.

You can visit it here: https://eventko.easwee.net/

List is updated once per day and pulls in events from ~170 venues in Ljubljana. The whole app runs on Node.js on a EC2 Linux instance. Cron job is triggered daily to collect fresh events and store them to a temporary database. I do not keep any old events – only future events are collected, old data is dumped every morning, in order to keep the AWS costs to a minimum.

This project is probably useless to the larger global population, but I believe it can be handy to the citizens of Ljubljana, who can have a clean source of quality daily events (concerts, movies, theater, public educational events, exhibitions,…).

In the future I hope to come up with more projects like this, that cater to a local community, but bring tailored content that may suit it better, than the results you would get on big websites.

snooffline

2018-10-01T00:00:00Z

js13k2018 challenge done in collaboration with Adam Giacomelli.
A 13kb javascript game done for the “offline” or “off-the-line and keeping the party going” 2018 code challenge theme, including hand written midi music tribute to Eric Clapton 🙂

Keep the bar leveled.

Code freely available for forking on https://github.com/easwee/snooffline

Also check out my previous years entries Balls juggle and Baloon operator.

quick setup for husky with lint-staged

2018-06-24T00:00:00Z

1.) Install dev dependencies:

npm install husky lint-staged eslint --save-dev

Note: if you get an error like

ENOENT: no such file or directory, mkdir 'node_modules/husky/.git/hooks'
husky > Failed to install

just update your git to latest version and it should install fine.

2.) Update package.json with husky and lint-staged definitions by adding:

 ...
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": [
      "./node_modules/.bin/eslint --fix",
    ]
  }
  ...

Note: you may want to also add ts or jsx like {js,jsx,ts} depending on what kind of setup you are working on

This is the very basic setup – for all extra consult the docs: https://github.com/okonet/lint-staged

morse code – text-to-morse translator

2018-04-22T00:00:00Z

The invention of the telegraph as the first electrical telecommunications system is an important landmark in the history of communication, but while the tech itself is very interesting hardware, from the coding point of view I’m more interested in the Morse code used to send messages with it.

Morse code consists of dots, dashes and spaces which when linearly combined and transmitted make up letters, words and sentences. Named after Samuel Finley Breese Morse who helped co-develop it, it was later refined by Friedrich Clemens Gerke and after the adoption by the Deutsch-Österreichischer Telegraphenverein (German-Austrian Telegraph Society) in 1851, we’ve got the International Morse code in 1865, which, while slowly declining in usage and making way for better ways of communication, stayed in use up to this days and that’s the alphabet set we are gonna use to code our text-to-morse translator in Javascript.

We have 26 letters and 10 numerals available. Dots and dash sequences (dot vocalized as “dit” and dash as “dah”) are assigned to letters based on how commonly they are used – shorter combinations are assigned to the most used letters. To keep it simple we will not be integrating the prosigns in this version (like SOS = …—…)

We are translating text into an audible audio signal over the Javascript Audio API, using the OscillatorNode and a GainNode connected to it – with this two we have all the tools needed to simulate the telegraph behavior (we could go further and even simulate the communication between two telegraph devices over a socket connection or even better with WebRTC which is ideal since a telegraph is basically a p2p connection, but let’s leave this for a part 2 maybe).

With the above info all we have to do is to convert the text into a sequence of dots, dashes and spaces which can be then looped over and by altering the gainNode volume for each character in the sentence we get the telegraph behavior.

If we consider that we have a time unit of X ms, the rules for emitting the signals are:

dot = 1 unit of sound
dash = 3 units of sound
sign space = 1 unit of silence
letter space = 3 units of silence
word space = 7 units of silence

Morse code also does not distinguish between upper and lowercase, so we can transform all text to lowercase and just work with that. With this rules in mind I can define a few constants to concatenate into the morse sequence that will be interpreted by the oscillator:

const SEQUENCE_SIGNS = {
    DIT: ".",
    DAH: "-",
    SIGN_SPACE: "x",
    LETTER_SPACE: "xxx",
    WORD_SPACE: "xxxxxxx",
};

For the common test string “PARIS” using the above sign set we get a sequence (let’s us “x” to represent a space unit for clarity):

.x-x-x.xxx.x-xxx.x-x.xxx.x.xxx.x.x.

All that is left to do is to loop over it and toggle the gainNode volume on and off. All that is left to do is to loop over it and toggle the gainNode volume on and off and we end up with a very basic morse code interpreter – play with it:

100k decimals of pie

2017-05-20T00:00:00Z

100k decimals of pie visualized on HTML canvas – simple script alternates between 4 quadrants.

Fiddle script: https://jsfiddle.net/easwee/adq4a4e7/

Javascript’s Math.PI is limited to 15 decimal places, so we need to use a pre-rendered set of decimals (taken from http://www.piday.org/million/).

canvas based music visualizations

2016-04-07T00:00:00Z

Sound wave to music javascript conversion – pixel by pixel, manipulated in a pattern.

Sample song by Soundtribe Sector 9 – Better Day

panorama of valletta

2016-03-14T00:00:00Z

valetta, malta, march 2016

precise-text-size

2015-12-04T00:00:00Z

Script that returns precise text width and height - from first non-transparent pixel to the last-one, ignoring any kerning space before/after word, which is usually accounted into a getTextWidth() calculation.

Works with custom fonts too. Measurement is done by traversing pixels of word raster drawn on inmemory canvas.

Grab from github: https://github.com/easwee/precise-text-size

rastapico

2015-11-30T00:00:00Z

Rastapico from Jamaica is gonna chop some plants today! A simple Pico-8 8-bit game done in 12 hours.

Due to console controller key setup X = N – move with arrow keys.

grab 33

2015-09-15T00:00:00Z

Tiny Sunday project – HTML game based on Unicode characters as graphics.

This will probably render differently across various OS/browsers – depends on Unicode support and it’s rendering. As far as I tested it works and renders nicely in latest Opera and Chrome (both Linux and Windows) – Firefox cuts part of smiley since it renders it bigger.

Try it:

3d football field fiddle

2015-09-14T00:00:00Z

Three.js football field basic 3d model test.

generating funky patterns from a weird youtube comment

2015-08-15T00:00:00Z

Recently I stumbled upon a weird, but interesting Youtube video comment.

I decided to take a look at what characters may compose such a pattern, so I put up a tiny script to process the string, output unique characters and generate new random patterns with them.

Few interesting patterns that triggered some references for me (Opera on Windows 7):

The ceiling vines example is the most interesting since it concatenates the Combining Diacritical Marks directly without space and makes the pattern organic in a way. I’ve tried to run the same sample on Ubuntu Chrome, but it seems like it does not support rendering of concatenated marks, however Ubuntu Firefox does it well. The rendering is very inconsistent across OS/browsers.

Running sample (switch in select):

You can fork it from jsfiddle and try your own patterns in the config: https://jsfiddle.net/easwee/7wzrha77/1/

dotted polygons

2015-06-30T00:00:00Z

A script that arranges dots into dotted polygons with N sides.

View on Codepen: http://codepen.io/easwee/pen/CIuEj

noise tv

2015-06-15T00:00:00Z

You can see and play with the code on Codepen: http://codepen.io/easwee/pen/lweIk

panoramic view from štanjel

2015-05-31T00:00:00Z

Panoramic view from Štanjel, Slovenia.

31st may 2015, štanjel, slovenia

in-house bicycle

2015-03-31T00:00:00Z

30th march 2015, ljubljana, slovenia

train front

2015-03-15T00:00:00Z

15th march 2015, ljubljana, slovenia

twins

2015-02-28T00:00:00Z

28th february 2015, ljubljana, slovenia

goriška panorama

2014-12-15T00:00:00Z

A panoramic photo of my home region – Goriška, taken on Slovenian/Italian border.

goriška, slovenia

klinika industriale

2014-10-31T00:00:00Z

Something similar to a meth lab found doing urbex around Ljubljana.

31st october 2014, ljubljana, slovenia

turntable service facility panorama

2014-10-11T00:00:00Z

train museum, 10th october 2014, ljubljana, slovenia

transit station

2014-09-21T00:00:00Z

Ljubljana train station in a post-industrial futuristic atmosphere.

30th september 2014, ljubljana, slovenia

encrypted

2014-09-15T00:00:00Z

Post edited Mandelbulb3d render.

circular wheel css illusion

2014-09-15T00:00:00Z

Focus on one dot to understand this illusion.

Check the code on Codepen: http://codepen.io/easwee/pen/qxgzw

three.js 3d rotating object with textures test

2014-08-18T00:00:00Z

Playing around with three.js 3d javascript library.

Object with custom textures sample: https://sample.easwee.net/rotating-cube/

cik cak

2014-08-16T00:00:00Z

Triangles in Fibonacci sequence.

html5 audio api – oscillator

2014-08-10T00:00:00Z

A very primitive oscillator device done with HTML5 audio api using oscillator node. Requires HTML5 audio api browser support (runs in latest Chrome, Opera and Firefox).

View on Codepen: http://codepen.io/easwee/pen/sFpmo

roflcopter

2014-07-15T00:00:00Z

A silly animation done by replacing characters in pre-formatted text.

Play with the code on Codepen: http://codepen.io/easwee/pen/wbvue

grad rakičan

2014-05-18T00:00:00Z

18th may 2014, rakican, slovenia

circular equalizer

2014-05-15T00:00:00Z

Exploring the possibilities of CSS animations. No javascript.

Check the code on Codepen: http://codepen.io/easwee/pen/ehiog

css pacman

2014-05-07T00:00:00Z

Pacman tribute – pure css animation.

Source available on Codepen: http://codepen.io/easwee/pen/qFmDb

looking at sarajevo

2014-05-01T00:00:00Z

1st may 2014, sarajevo, bih

koliko?

2014-03-28T00:00:00Z

An attempt to visualize perception of a poem. Poem written by Dejan Koban from Razporeditve, 2013.

vortex

2014-03-14T00:00:00Z

Code available on Codepen: http://codepen.io/easwee/pen/LydFH

invokelist – invoker spellcasting trainer

2013-12-14T00:00:00Z

I’ve been doing some javascript practice and remade the Dota 2 Invoker casting interface. It could be further improved, but

I’m quite satisfied where this practice snippet got.

Run it here: https://sample.easwee.net/invokelist/

core

2013-12-10T00:00:00Z

Building on Fibonacci series with curve drawing using HTML5 canvas and some simple javascript. Post edited in Photoshop.

animate elements on spiral path with css

2013-12-06T00:00:00Z

Live sample: https://sample.easwee.net/css-spiral-path/index.html

Check the code on Codepen: http://codepen.io/easwee/pen/gtnJi

jezersko

2013-08-15T00:00:00Z

15th august 2013, zgornje jezersko, slovenia

bending space and time

2013-02-17T00:00:00Z

Bending with Droste effect. Done in Photoshop using custom filters.

CSS only responsive horizontaly and verticaly centered content overlay

2012-12-22T00:00:00Z

!!!Note: this is a very old way of doing this when we still supported Internet Explorer 8 and responsive design became a thing.

Centers content horizontally and vertically without setting parent’s height. Works with any width value. Supports IE8 and above. Supports mobile screen resolution (responsive).

HTML: #

<div class="sample-container">
    <img src="http://placehold.it/300x200" alt="" />
    <div class="sample-container-overlay">
        <div class="sample-container-overlay-inner">
            <div class="sample-container-overlay-inner-content">
                <a class="link1" href="#">Item 1</a>
                <a class="link2" href="#">Item 2</a>
                <a class="link3" href="#">Item 3</a>
            </div>
        </div>
    </div>
</div>

CSS: #

.sample-container {
    position:relative;
    max-width:500px;
    margin:0 auto;
}
.sample-container img {
    display:block;
    max-width:100%;
    width:100%;
}
.sample-container-overlay {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:200px;
    margin:auto;
}
.sample-container-overlay-inner {
    display:table;
    width:100%;
    height:100%;
}
.sample-container-overlay-inner-content {
    display:table-cell;
    vertical-align:middle;
}
.sample-container-overlay-inner-content a {
    display:block;
    padding:10px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    opacity:.8;
}
.sample-container-overlay-inner-content a:hover {
    opacity:1;
}
.sample-container .link1 {background:red;}
.sample-container .link2 {background:green;}
.sample-container .link3 {background:blue;}

snowy train ride

2012-12-03T00:00:00Z

Riding in train during a snow storm. Taken on Slovenian Karst.

15th february 2015, karst, slovenia

redbull flugtag skydiver

2012-06-11T00:00:00Z

Opening of Red Bull Flugtag Ljubljana with skydivers.

15th april 2015, ljubljana, slovenia

detail of my spaceship

2012-06-11T00:00:00Z

Detail of an old gas station roof on Tivolska street in Ljubljana. Architect Milan Mihelič.

11th june 2012, ljubljana, slovenia

filmstrip

2012-05-25T00:00:00Z

passenger cart, 25th may 2012, ljubljana, slovenia

wired

2012-02-18T00:00:00Z

electric wires, ljubljana train station, winter 2012

hellcopter operation

2007-10-01T00:00:00Z

First game I managed to develop from start to finish. This was done in 2007 towards the end of my study days, using Flash/ActionScript 2.0 and compiled into .exe using Zinc. It's a simple sidescroller game where you control a helicopter named "Hellcopter" that needs to shoot and save the city from alien invaders. Watch out to not crash to the ground or get hit by aliens.

Executable for Windows still exists here: https://sample.easwee.net/hellcopter-operation/hellcopter-operation-v1.zip