SVG filters are a very nice thing if you want to add some dynamic graphic effects to your website. Coding them purely using XML can be a bit cumbersome, though, and the UI of e.g. Inkscape isn’t that great, either. But fear not, the following great web tools can be used for this task instead: svgfilters.client.io This is a drag-and-drop-based g...

Scroll shadows are a useful tool for indicating to a user that they can scroll in a certain direction. Lea Verou has pioneered a technique for implementing these using CSS only, which has been picked up by e.g. CSS-Tricks. I’ve employed this technique in a prototype for a desktop/mobile web app for the horizontal scrolling of a (possibly very w...

Arithmetic with unit values is quite restricted in CSS. There are many mathematical functions available – like sin(), cos(), pow() and sqrt() – but almost all of them only support unitless values. If you want to calculate something, e.g. to scale the height of an image based on the viewport width, you are therefore restricted to linear relations...

This blog, as well as my other static websites, are all built using Jekyll. It’s a great tool, and really easy to work with, because it takes care of related build steps like compiling your SCSS sources to CSS. While doing some refactoring, I wanted to switch from using a pre-built version of the Bootstrap CSS framework to building it from its S...

It is a suprisingly complex topic to supply all the correct favicons for the diverse range of devices and browsers that are in use today. It started with just favicon.ico in 32x32 (or 16x16), but now you also need high-resolution icons for iPhone and iPad even larger icons for Progressive Web Application (PWA) splash screens — and Google for exa...

Did you know that one does not need cookies, or any locally stored state, to identify your specific browser/computer in a globally unique way? Browser fingerprinting is scary. If you also want to go down this rabbit hole, and see how unique your browser’s fingerprint is: https://amiunique.org/ https://coveryourtracks.eff.org/ You can ev...

Well, imagine this: You have website with a big background image, and you want it to work well across all screen sizes. That is, it should fill the whole viewport, no matter the screen size or aspect ratio. You also want to do this using CSS only. In this post, we will first cover how to do this for background-image, and at the end, I will exte...

While toying around with writing a custom note-taking, CRM-like application for my personal use, I was surveying the current landscape of cross-platform frameworks for mobile app plus web development.