My professional work is proprietary, but occasionally I make something I can share here.
The goal of this project is to make sure your portable files are automatically backed up when you attach your USB device to your computer. It runs on Linux. As it is written in C, it does not require any runtime or application virtual machine. While I do provide the source, I don't provide binaries.
C, Linux, source on GitHub.
Any text or (partial) code listing can be used as input, the output will be labeled colored rectangles. The tool supports the web color names, rgb(a), hsl(a), (ok)lab, (ok)lch, hwb and color notations. It can also show if the current browser supports the notation.
Markdown ToC generator
Bash script to generate the table of contents for a markdown file. Supports sub-headings.
Simply a page with timers and stopwatches . A larger countdown time on a timer will produce more beeps.
I find this a handy tool. The code is not really of interest.
Similar to a kanban board. The vertical board can be used to organise our thoughts or manage our tasks. Not suitable for mobile devices. You can download the files from the repository on Gitlab and use it from your own computer.
HTML, CSS, JS, offline, source on GitLab.
CSS generation for hybrid CSS and JS theme support
By using a hybrid CSS and JS approach to web dark/light mode theme support we automatically provide the user their preferred theme but still allow them to change the theme. It is good to give the user a choice, because although they may prefer to see their regular applications in a light theme, they may prefer to use our websites in a dark theme or a custom theme.
It consists of short scripts using bash and GNU tools.
CSS tutorials / examples
Here are some CSS explanations or CSS / SVG effects that I like. Maybe these examples can be helpful to someone.
- Using CSS and SVG to mix and cut out background images
- An alternative explanation of how CSS polygon clip path rules work.
- Examples of card designs and how to implement them.
- The Breathing section has an example of CSS-only animation, and a slightly dynamic user interface. View the source of the page to see how it works; it is all in one document.
- More examples are in the Doodles that do not stay section.
Doodles that do not stay
Draw by triggering color changes. It works by tapping on touchscreens or moving the mouse around.
We don't need to control the outcome, and the outcome is not saved.
Box breathing is a calming breathing technique. It is also known as 4-4-4-4 breathing. The idea is to breathe in a pattern. We breathe in for four seconds, hold for four, exhale for four, and hold for four. Then we breathe in again for four seconds, and continue the pattern.
I have made a visual aid to help keeping to the pattern. It works with CSS only. A counter will be shown after hovering or tapping in the bottom half of the screen.