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 β
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 β
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 β
I just learned about new AsyncFunction which is the async version of new Function. I had never heard of it before, but it is in the MDN docs.
Continue reading β
When I listened to the CRE podcast about hacker movies (german only)
I opened a lot of tabs in my browser which I never closed again. So now it's time to just simply persist all the links to the suggested hacker movie that had been mentioned in the podcast.
Continue reading β
You know cat file.txt which prints all the lines in a file from first to last. But what if you want to print them from last to first? Easy, just write cat backwards, which is tac voila.
Continue reading β
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 β
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 :).
How can I make a django model read-only? There seems to be no metadata option read_only or alike in django. Well it's easy to do in the admin, but I am creating a model that serves a DB view, which is, at least in MariaDB not writable. So I want to throw an error when someone tries to update data in the view.
Continue reading β
I had sync delays of about 15 seconds, when I changed a file on my MacOS fs and that it was seen as changed inside the docker container. This solved it: colima start --mount-type 9p Continue reading β
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 β
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 β
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 β
I had not yet heard of a type (not sure if it's a type?) in C called bit-fields, or at least I can't remember anymore. Let's look at one:
Continue reading β
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 β
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 β
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 β
I had no idea that docker uses the underlying platform as default also for images that it installs. My Dockerfile that just contained FROM ubuntu and I ran some linux binary in there, it threw:
Continue reading β
Taking in the rear view mirror for the first time and trying to sum up what I learned from ReScript and compare it to my initial expectations.
Continue reading β
The setup is working, I can compile and run ReScript files, I touched a bit on the syntax in Part 2, next I will continue through the docs chapters from top to bottom.
Continue reading β
In Part 1 I started with ReScript, I set up a project
and made my first steps, got it running. Now I want to learn more and get to the point where I have a feeling for how to use ReScript, lets see where it takes me. I guess it will take me more than this "Part 2" post to be comfortable to start a project with ReScript.
Continue reading β
Finally I am taking the time to learn ReScript. Follow me on my journey and read how I approach it, mixed with some of my opinions and experiences.
Continue reading β
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 β
I have been digging a little bit into Hermes (a mobile first JS engine)
focused on React Native. Since I shared most of it on twitter, I want to "copy" the content here to persist it for me, I know I am coming back to this eventually and this way I get up to speed faster.
Continue reading β
React Native (RN) 0.64 was just released. One of the things I had stumbled upon more often lately in RN code was the word "hermes". I didn't know what kinda tool or package that was. Until I informed myself a bit. In short: Hermes is a mobile optimized JavaScript engine.
Continue reading β
A while ago I optimized some images for the site you are looking at, by using the
webp format
because I had forgotten to do that, and
PageSpeed Insights
suggested to do so. I forgot how to do that, so I am writing it down now. Read on if you also want to know how to convert any kind of image to webp and embed it in your site.
Continue reading β
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 β
I am gladly using codeberg (as github alternative) for as many projects as I can, really support their mission. "Independent and powered by your donations and contributions". I struggled a little bit to figure out the URL that works
for a package that is not on npm yet, but exists just as a codeberg repo.
Continue reading β
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 β
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 β
Layouting a site with CSS is initially easy. It becomes fun and more difficult when it shall become responsive, when you have a special design in mind and when one browser does not work as expected. The site Solved by Flexbox
by @philwalton
is a great resource where he shows six major use cases and describes the solutions.
Continue reading β
Do you want to speed up CSS file loading? Do you also see this waterfall chart in the Network Tab of your DevTools? There is a simple measure to help the browser optimize loading assets. Preload them. I think it is superior to bundling. It is less complex and has better caching behavior.
Continue reading β
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 β
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 β
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 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 β
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 β
I want to get my nextcloud setup to run using docker-compose, and to start with I need a linux machine with docker running at start up. This is task #1, it looks like this blog post
has the answers how to do it.
Continue reading β
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 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 β
I never did android development, only the React Native side of things. Now while digging deeper, trying to figure out how to style a React Native picker on android (because the default is really ugly) I am reading into android docs. I found out how to break my app's rendering with one line of XML. Not true, five lines of XML.
Continue reading β
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 β
I want to use my real android device to preview stuff, not the emulator anymore. If I don't get the CPU power I need, I need to work around it.
Continue reading β
I was just struggling to find out how to start a different emulated Android device from the command line. I found the relevant commands:
Continue reading β
A very interesting 13 minutes video on arte
"China: One Country, Many Facets"
gave me a good, quick overview of China's history and where it is heading. This video also connects the dots and puts some of the current events into perspective.
On a friend's linkedin profile I saw some links to his content and since linkedin picks up in traffic and professional relevance, I thought I need to get my site's traffic better shareable.
Continue reading β
Actually Sir Tim Berners-Lee put the headline "Answers for Young People" above
this article, but this is by far not only for the younger people. I can highly recommend to read it.
Continue reading β
I am wondering if the React Native Picker component is still maintained and if it is usable or if I am totally looking at the wrong thing for using a picker for a mobile app.
Continue reading β
I started working at Sono Motors
September 2020. And just now I thought: why should I just leave it up to linkedin and twitter to get traffic and "use" my job update for showing you ads ;). So let me share some stuff here.
Continue reading β
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 β
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 β
I broke this site, and thanks to @Holger reporting the error I figured out I should have done more testing instead of just tweeting that I should :).
Continue reading β
Recently I was reading and learning a bit more about sustainable energy and since electric cars are no magic anymore, what about electric cars that charge themselves from the sun?
Continue reading β
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 β
I have this book
Get Your Hands Dirty on Clean Architecture
on my reading list, actually just as an open tab in my browser for a long time now. I just put it down here, maybe I come back to read it. Not sure if it is good and worth the time, but I like the topic and I think it is very relevant to understand this better.
Continue reading β
It was the @standardsbot that made me learn and look up
ValidityState. While that bot tweets weird stuff, there is always a learning in it. This time it was about ValidityState.
Continue reading β
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 β
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 β
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 β
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 β
Lately I thought more often about automating my blog using webmentions
and while reading the Github Actions docs, I found the following might come in handy. So I am parking that info here.
Continue reading β
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 β
It is painful sometimes, but having a setup that works on any machine (that has docker), just git-clone and run is AMAZING. I use a bash script
and a 2-line Dockerfile for it.
Continue reading β
The CSS pseudo-class :defined is for defined (custom) elements, sure. But what does "defined" really mean? While reading about upgrading CBEs
I came across the definition for it. Let me quote the DOM spec a bit.
Continue reading β
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 β
I saw a video that VS Code creates directories and file when adding a file named like dir1/dir2/file.js, I tried it in WebStorm. It works.
Continue reading β
Lately I am coming a across a couple of those tools that promise to remove the bundling overhead and pain from our projects. I already mentioned snowpack.
Continue reading β
A disclosure widget is a simple control whose sole purpose is to hide or show stuff. See his article for very in depth content on how to use <details> and <summary> tags.
https://adrianroselli.com/2020/05/disclosure-widgets.html
With latest privacy awareness I believe cookies are also one sensitive topic. I have no numbers, but I guess there are more people who have cookies disabled then we believe. If not, I learned something here.
Continue reading β
I wish to have a type system where I only need to type-hint the published parts (of a module/file) and let the type system infer all internal types. Though, I learned that even in Haskell land it is referred to as good practice to still type every function, no matter if public or private.
Flow sounds to be doing what I want.
Continue reading β
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!
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 β
The headline is a quote from Hammer and Nails by Stuart Langridge where he states how we make every user's browser a "fat client" (I called it that) by making them work far beyond rendering some HTML+CSS.
Continue reading β
Bundler like webpack take up too much of our intention, imho. We spend a lot of time configuring them and waiting for them to build so we can see our site. Snowpack moves the bundler out of the way so you can develop without worrying about it locally.
Continue reading β
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.
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 β
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 β
Diving into the topic of accessibility I found so much more than I expected. The first was the fact that "About 1 in 5 people has some type of disability.". I always knew and fought for doing accessibility at least better than yesterday, but effecting 20% by doing it badly can be painful, not only emotionally also for a business.
Continue reading β
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 β
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 β
While hunting for accessibility resources, especially the reasons why designs need to be flexible I came across this article Accessible CSS on WebAIM.org. And their warning sign just needs to be shown around the web even more.
Continue reading β
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 β
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 β
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 β
I read the real book a long time ago, but I just moved this blog to use proper <aside>, <article> and alikes today, I had forgotten a lot. But I remember it being the best HTML(5) in depth I ever saw.
https://diveinto.html5doctor.com/ a must read!
Wondering how to layout and use <section>, <h1>, <h2>, etc. I came across the first place one should read on MDN
Using HTML sections and outlines
also very insightful and more specific is this on the W3C wiki
HTML/Usage/Headings/Missing. If you have 27 minutes to learn how to use all those semantic tags watch Brian Haferkamp's
Semantic Elements and Structure a very well explained video.
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 β
I didn't know that for English "sources disagree on the details of capitalizing prepositions". I read so often "capitalize all words of four letters or more". What an arbitrary rule is that? Ok, I will try to follow this and capitalizing all "major words", they call them. There are a couple (SEO) sites that capitalize your headline correctly, you'll find them when you need 'em.
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 β
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
MacOS: Woa, I didn't know you can take screenshots of windows with transparent backround by doing CMD+Shift+4 and then hitting the space bar. π€―
pic.twitter.com/WjdV15q4H0
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 β
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 β
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 β
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 β
what if an code editor had #refactoring as the default when changing variables names, etc. and not as a sub-menu item which one has to search for
Continue reading β