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.

#tools

Docker - The Improved Commands

I just watched the very good, How to run Nginx inside Docker container video. In 9 minutes you will learn the basics of docker while starting up an nginx server running on docker. The real take away for me is the updated docker commands, which are finally as explicit as I always had wished they had been from the beginning. Like docker container run which was docker run.
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 β†’

#english

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

WebStorm Live Templates Rock (Again)

WebStorm has this awesome feature they call Live Templates where you can configure a text in a certain filetype to autocomplete to something, even dynamic. See how I built the auto-completion for dateC which becomes dateCreated: 2020-05-02 15:27 CET, which is current date of course, in my custom format.
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 β†’

#html

HTML Design Principles

There is nothing new about websites being backwards compatible. The HMTL Design Principles from the W3C are from November 2007 and they are not outdated!
Continue reading β†’

#docker

Very Fast Docker Image Build - Without Context

I use docker images to provide the environment for development. My nodejs is installed only inside the docker image. That means I always map my working directory into the container. This means I don't need to send no build context to the docker deamon.
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 β†’

#english

Than vs. Then

I always struggled with it. Actually I looked it up a couple days ago and until today I was under the assumption "than" was for time and ordering, I had been confused and wrong.
Continue reading β†’

#html

HTML Validators

#okr

OKRs are Works in Progress

I read it multiple times already in Measure What Matters by John Doerr, that OKRs are flexible. I normally underline those things, but now I have to note it somewhere where I can find it again without physically needing the book. On page 54 he writes
Continue reading β†’

#docker

Free Disk Space Used by Docker

TL;DR use any/all of docker system prune, docker container prune, docker image prune, docker volume prune or docker network prune to free the according space.
Continue reading β†’

#javascript

Upgrade npm Package to Latest Version

Run npm install <package>@latest to update to the latest version of a package, no matter the minor, major version, it always goes to the latest.

#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

#javascript

Tests using process.cpuUsage and process.memoryUsage

Learning stuff about nodejs (or v8) while writing tests that ensure runtime behaviour, using process.cpuUsage and process.memoryUsage. Curious how brittle those tests become over time. Glad the app ALWAYS runs in the same docker container (dev and prod).
Continue reading β†’

#javascript

Mocha's Magic done Parameter

Why a #mocha #test times out, when I write it like this: it('...', _ => {}); but it does NOT time out, when I write: it('...', () => {});? Exactly, because the _ is the magic done, that one needs to call.
Continue reading β†’

#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 β†’