picostitch
crafting (and) JavaScript

Tidbits πŸ˜‹

are shorter articles, like notes, about tweet-size, no full blog post.

tidbit [noun] /ˈtΙͺd.bΙͺt/ - a small piece of interesting information. from Cambridge Dictionary.
Synonyms for tidbit: goody, delicacy, snack, treat, tweet partly from thesaurus.com.

#CSS

Inline @scope for CSS

I am not tightly following what's going on in CSS land, since blogs are not the thing and mailing lists became spam lists I don't know where to "listen". But from time to time I read MDN and look for the things that I expect CSS and HTML to provide. And funny enough, often my expectations and reality are aligned. Maybe because the missing things are just so obvious :).
Continue reading β†’

#linux

Setup HTTPS with letsencrypt for a new server

The following does NOT need to connect the server, which is another way, where the server provides a secret via http, and the letsencrypt server checks it. But the drawback of that is that you need to run the webserver and later reconfigure it, since this is only needed for the initial cert afaik. So I went the other way. Will see how the renewal works, but I think it should work.
Continue reading β†’

#docker

Free Docker Disk Space

If you are running out of disk space on your docker host, you can free up some space by removing unused docker images, containers, and volumes. I am running docker-compose and always watch the logs, since the service is not high scale yet, so the log files fill up. This means from time to time I need to free some disk space.
Continue reading β†’

#maraidb

MariaDB Cheatsheet

A long time ago, I used to know all MySQL commands by heart. Now I am re-learning them, but this time with MariaDB, and I learn best by writing things down. So here is the cheatsheet to have a way of looking up commands quickly.
Continue reading β†’

#git

Git Diff of just one Commit

I was wondering how I can see the change of one git commit, I want to see ONLY the changes of this commit, not compared to any other or alike, found it: git diff <hash>~ <hash>. Welcome in git wonderland :).

#docker

Verbose docker build

The container build process feels a bit not that transparent, I feel. But using: docker-compose build --progress=plain it becomes a bit more transparent.
Continue reading β†’

#linux

Execute install.sh file

There I have it again, a install.sh file on a linux and I don't remember how execute it. I tried ./install.sh, error, . ./install.sh another error, it also never felt right the way I did it.
Continue reading β†’

#docker

Docker on MacOS (without Docker Desktop)

I learned just yesterday that Docker Inc. is charging for their Docker Desktop client. Only when certain conditions apply, but still. I am not at all against charging for good products, but now I also understand why the docker app and website wanted me to log in lately. Good time to get rid of it and use the less annoying tools, I found colima as my new docker runtime, simple, easy, not in my way.
Continue reading β†’

#docker

Docker and Time

Inside your docker container you have a wrong time? Then it mostly depends on your timezone. Mostly it is solved by passing in the timezone from your host into the container, e.g. in the docker-compose.yml, by setting TZ environment variable directly, like so.
Continue reading β†’

#node-red

Node-RED Setup with Docker and Versioning

As described before, I am learning node-RED. The first thing though that I always want to ensure is that a project can be cloned (from git) and run with (ideally) just one click.
For this the defacto standard nowadays is docker, which allows to set up an environment that can be reproduced on any system and therefore also allows to reduce the cost of setup, sync, and it improves easier collaboration.
Continue reading β†’

#node-red

Learning node-RED

I changed my job inside Sono Motors a bit, I need to learn node-RED now. Node-RED is a low-code, drag-n-drop UI for building execution flows, often used in IOT, but basically can be used to build any kind of (JavaScript) program. One can install add-ons (nodejs modules) that offer any kind of helper, interfaces, connectors, UI, and so on. You can build anything with it.
Continue reading β†’

#React

Redux, Context or What

State management in react as it is most commonly spread among devs is suboptimal, I would say. I just looked up my first react app, it's from 2014 and we used react to make working with HTML in a "normal" DOM based page easier and code more readable. React didn't control all the page. We used jQuery to animate between the pages, where each page was a react component. Nowadays a react app tries to get the entire app to be react as quickly as possible. Has it turned around, against us?
Continue reading β†’

#learning

What's an "Unary" Operator?

Coming across "unary operators" might happen in JavaScript, or (m)any other programming language(s). A couple examples for what is a "unary operator".
In JavaScript you may find: +1, -42, + "1", !true, delete x. All those are unary operators as you can also read on MDN and in the spec. But what does the "unary" really mean? And why is 1 + 1 not using a unary operator?
Continue reading β†’

#react

React: Hooks vs. Saga

I am currently working on a React Native app that uses redux saga heavily. My main concern with it is the traceability of code that goes together, the modularization. It is hard, if not impossible to know what belongs together, what is needed in combination with what.
Continue reading β†’

#crafting

Every Day is Refactoring Day

It is always good to remind oneself constantly how and why to do things. Refactoring is one of the things that I see getting too little attention. I don't mean in our sprints or tickets, I mean in our professional lifes. Refactoring is a tool we have. Use it (right)! I guess "right" is more often important than one thinks.
Continue reading β†’

#docker

Docker vs. docker-compose

After clarifying why I use Docker for every project I set up let me try to clarify also: Why would I use a docker-compose setup over a single Dockerfile setup? I had been doing the single Dockerfile setup for quite a while. I was doing a lot of manual work, that made the setup work. But I don't regret it, it taught me a lot! But that was not sustainable, and it didn't scale.
Continue reading β†’

#docker

Why I Use Docker for Every Project

I used to install everything on my machine. I used to have ruby, nodejs, python, java, rebol, red and all the programming languages and environments, their packagers and tools I needed installed on my machine. It was heaven. Except for the moment when I had to install a new tool, that needed a newer version, and the old ones might broke and then I had to choose or reinstall every time, switch to rvm, nvm, pyenv or something else. For a while vagrant was cool.
Continue reading β†’

#tools

Choosing a new Template Engine

I have been using tundra as template engine for this site. And I am thankful for it, but it's time to move on. I mainly chose it because it is tiny, has no dependencies and it has the features I was looking for. It just does the things I am used to from django-like template engines not well enough, misses a tiny useful feature here and there. This does especially hurt, when I want to reuse HTML sceletons, tags, HTML snippets or functions to generate them. That is where tundra stops working. Knowing the code a bit I also think I have a feeling that getting it there would be quite some work.
Continue reading β†’

#HTML

HTML Element <dfn>

HTML is getting more and more semantic it seems. I am seriously wondering what this means for building things like a blog, like this one here. It becomes more and more reasonable to write pure HTML, instead of markdown, doesn't it? Maybe I am just late and just learned about some HTML elements now. What a shame.
Continue reading β†’

#tools

Learning nginx

Until today I was just a copy+paster of nginx configs. I thought I had my share back when I learned and undestood apache very well, so why learn another one. But my nextcloud setup and letsencrypt that comes with it has an nginx "bundled", so I would like to understand things a bit better. So I started reading the docs and will take my notes here.
Continue reading β†’

#tools

Website Speed - Lab and Field Tools

When I was involved in page speed optimization, in my last job, I was always fighting for measuring in two ways. One using tools like webpagetest and lighthouse and two measuring the real user's experience, on the site. There are even names for it, I didn't know, until now:
Continue reading β†’

#React Native

Android Ripple Effect - Analyzed

React Native has a component Pressable. Used like so <Pressable>clickable thing</Pressable>. It is a more abstract way to build a button or something that a user can click. The component Pressable has one Android-specific attribute android_ripple, which allows to customize the UX of the ripple effect. I think the visual feedback the ripple effect provides is very user-friendly, it indicates if a click was detected. So I am investing time in making it work well, but it's not that easy. Let me share my learnings.
Continue reading β†’

#tools

Restore deleted git branch

I had deleted a git branch locally, which I wanted to restore. It's totally easy. A tiny bit of knowledge upfront. There is something called the reflog, it's kinda like the hidden git history, that knows every change you did on the repo, every change, and it does NOT throw away anything.
Continue reading β†’

#learning

ML for VRT - Part 3: Hands On

I renamed the series to "ML for VRT" instead of "ML vs. VRT" since that is what I actually want to achieve (eventually), as you can read in Part 1 - Machine Learning vs. Screenshot Comparing?. Read on to figure out how I ended up next to learn about neural networks, because I figured out just applying some code examples learned from tutorials won't suffice my learning and they won't answer the questions I actually have to understand how to tune a neural network to do what I image it to do, detecting screenshots for visual regression testing.
Continue reading β†’

#testing

ML for VRT - Part 2: Learning Keras

In part 1 I started my naive investigation on how to apply machine learning for making visual regression tests (VRT) better. I described the problem to solve, explored Keras very superficially and did also touched on the complexity of doing ML myself as opposed to having colleagues who are experts and who throw phrases like "train a model" and "predict" etc. around.
Oh boy, did I underestimate this.
Continue reading β†’

#JavaScript

ECMAScript Module Support in nodejs

While working on pico-tester I realized I am not as knowledgable in nodejs' support for ECMAScript Modules (esm).
I think it's very simple in the browser. There is <script type=module> which understands import and there is <script nomodule> which nicely gradually falls back to before ESM times. But what about nodejs? There is a package.json with properties such as main: <filename>, exports: {} type: module, type: commonjs, and any combination of them. For a long time I am using the package esm to allow me to use ESM on nodejs, but when publishing a package such as pico-tester, I must be compatible with as many ways as possible, in which nodejs can be used. So first there is terminology to get right (esm, cjs, ...) and than provide the right type of package or packaging so it can be used there. I might update this over time with more learnings.
Continue reading β†’

#open source

Open Source Sustainability

The title does not really enclose all the topics and cover the full value of this talk. Actually it is not explicit enough, because sustainability is a word that is being used in too many contexts and means too much. I would maybe rephrase the title to "The Real Cost and Value of Open Source and Why and How Your Company can Participate and Give Back". A bit clunky, but it tells the story I believe.
Continue reading β†’

#javascript

NodeJS Architecture Applied

The article Node.js, Dependency Injection, Layered Architecture, and TDD: A Practical Example, Part 1 by @Carlos GonzΓ‘lez gives a very good introduction of how to structure a (TypeScript/JavaScript) app. He links articles that allow one to dive deeper into underlying concepts and still explains the big picture very well. Great job Carlos!
Continue reading β†’

#writing

What does "sic" mean?

I just came across an article again, that had "(sic!)" in it, and I finally looked up what it means. I also see it in german text. So it's time to look it up and learn what it means and how to use it when appropriate.
Continue reading β†’

#tools

Github Action Features

While reading about github actions I note down a couple of things here, that I find worth noting and remembering. Basically I can imagine what it looks like, it's a travis with a tighter integration into github, but some details are interesting.
Continue reading β†’

#tools

Is it Github "Actions" or "Workflow"?

I wanted to deploy to github-pages using the renamed branch "main", but it seems not to be possible with github (yet) to turn on github-pages with a branch different then "master". So I thought it might be a good time to try out github actions, maybe this will help? If not I will have learned something.
Continue reading β†’

#web

HTML Elements not Upgradable to CBEs

More HTML provides a CBE (Customized Built-in Element) for upgrading heading tags such as H1, H2, ... to render a link-icon beside them, as many know it from github readme files.
I wanted to upgrade all picostitch sites automatically by just including a <script> which upgrades all headings on the page and adds this functionality.
It is not possible to upgrade a parsed and rendered element (like an H1) afterwards.
Continue reading β†’

#tools

mov to gif converter

Since QuickTime on Mac is great for short screen recordings, but the web can handle animated gifs better, I need https://cloudconvert.com/mov-to-gif it's a simple and awesome service!
Pricing: "absolutely free for up to 25 conversions per day", totally cool. Thanks!

#web

CSS Reset

First search result for "CSS reset" is by the mighty Eric Meyer https://meyerweb.com/eric/tools/css/reset/ from quite some time ago. And looking up the source of his site I see the reset is not really included, also no modified version as far as I saw it. Next I came across https://cssreset.com/what-is-a-css-reset/ which nicely explains the whys and also states the cons. Unfortunately the latter article is missing a date, so I can't say how old this knowledge is. That's why I was so very keen on having all items properly dated on my blog.
Continue reading β†’

#web

The History of the Web

In October 17, 1990 IMDb started as a unix script.
December 25, 1990 Tim Berners-Lee releases WorldWideWeb (later Nexus) on Christmas day, the first ever browser for the web.
August 6, 1991 Tim Berners-Lee responding to a thread on the alt.hypertext Usenet newsgroup, publicly announces the World Wide Web project for the first time. The History of the Web has so interesting stuff. Very worth a read. A great site to spend a lot of time on.

#JavaScript

Make arr[0] Fail Safe

I was just filtering a list list.filter(someCondition) and I only wanted the first element in case there is one. Doing list.filter(someCondition)[0] fails when the filtered list is empty. So I am using slice(0, 1), which returns the first element if there is one, an empty list otherwise. Now I do list.filter(someCondition).slice(0, 1) and never list.filter(someCondition)[0]. Such small things.
Continue reading β†’

#tools

GitUp v1.1.3 is out

My favourite git tool GitUp, which allows me to do everything with the keyboard and still has a UI has just received an update and if I had not read the release notes I wouldn't have known that now the "Fix double clicking title not expanding window" landed. I had already trained my muscle memory and would probably not have realized.
Continue reading β†’

#tools

$ and $$ - Shortcut for document.querySelector[All]()

I still often type document.querySelector() or document.querySelectorAll() even though even before this was available in the browser the developer consoles, FireBugs or whatever they were called had a shorter version available $ and $$. Yep, it works almost exactly the same, just that one returns a NodeList the other an array. Just try it. It works in all browsers as far as I know, I tried Firefox, Safari, Chrome and Edge. See the image below for how it works in Firefox.
Continue reading β†’

#linux

Diff of the Files in Two Directories

diff --recursive <dir1> <dir2> to diff the files and their contents in two directories I just needed to do some golden master tests after updating a dependency

#indieweb

Exploring micro.blog

The tries I had with "tweeting" from micro.blog and how it lands on twitter and also how I see and can act on replies is still too basic. I know I am twitter spoiled, but it's currently my source of information. Should I build my own #indieweb twitter frontend? mmmh
Continue reading β†’

#indieweb

JS People on micro.blog

There are some #javascript people around on micro.blog/discover/... :) and somehow the stuff I found until now looked interesting, I might try out that bubble a bit more, the micro.blog bubble :)
Continue reading β†’