Welcome ... I'm Kristof

I've been a passionate software developer for almost 30 years and currently a tech-savvy IT manager. I tinker with things like this blog in my spare time, because creating things never lets you go. Here is more about me ...


Rocky Stairway

Anatomy of Service Worker Communication

Let your App communicate with its Service Worker

I have a SPA that works as a PWA, which means that in the background a service worker makes sure that the required files for the offline mode end up in the cache.

From time to time I also update the Service Worker, which defines which files it should keep offline and which not. Unfortunately, the app itself didn’t get any of this because there was no communication channel for them to talk.

If you research this topic on the web, you have to dig through many architecture pages and documentations that have one thing in common: sometimes they just don’t get to the point. So here are my 50 cents on the subject and my sample implementation.

Continue reading ...

Garden Beauties XIV
Discoveries

Discoveries #20 - CSS & UI

Web interfaces are unthinkable without CSS. It has its pitfalls, but when used correctly it’s damn powerful. It’s always incredible what developers do with it. This month’s Discoveries is about the basics and the amazing.

  • My Custom CSS Reset
  • Defensive CSS
  • 10 Useful CSS Tricks for Front-end Developers
  • Animated Star Rating
  • CSS Marquee Examples
  • CSS Rolling Text
  • Cool Hover Effects That Use CSS Text Shadow
  • Solving 'The Dangler' Conundrum with Container Queries and :has()
  • Conditionally Styling Selected Elements in a Grid Container
  • Intersection Observer Scrolling Effects

Continue reading ...

Ancient Cockpit
Golem

One mouse to rule them all

Multiple monitors on one computer are elementary for effective IT work. However, operating multiple computers with one input set requires tools, for example one from the Microsoft Garage.

The trend is toward second or third devices, especially among IT workers. In addition to the stationary computer, which may still be under the desk, there is a laptop and possibly a tablet. All of them are connected to cloud services. If the desk is large enough, there may be two monitors and a full-size keyboard connected to the desktop, the laptop on the left, on which two or three special programs are installed, and the Surface tablet on the right for communication with its narrow-track keyboard. And spread out on the table are three mice in different colors so as not to constantly get the wrong one. A scenario that the author of these lines was also confronted with … yes, until a few years ago a small tool for Microsoft Windows fell in front of his feet, which abruptly ended the input chaos: Mouse Without Borders.

Continue reading ...

Old Master Veggies II

Creating Icon Font from SVG Files

A several years ago I started building a little PWA and chose Bootswatch 3.3.5. for theming. As it depends on Bootstrap I was able to use the icons from Bootstrap. At the beginning I needed only a handful of these icons, but with the time it became more and more difficult to find the right one, because the Bootstrap Glyphicons in version 3 included only around 250 icons and there was not always the right one. Also, the app was always lugging around well over 100 KB of extra files, of which I actually only needed a few kilobytes.

In another project I had used Fontello, where you can build and download your own icon font from a selection of available icons. Very nice, but I didn’t feel like fiddling with project-specific configuration files on the Fontello website. But since you could upload your own SVG files in Fontello, which were then taken over into the font, the same had to work somehow with a Node.JS plugin!?

And yes gulp-iconfont from Nicolas Froidure was exactly what I needed.

gulp-iconfont on GitHub


First Solution

Just copy a bunch of SVG files in a folder, run gulp and there was my own customized icon font with a tolerable size of around 20 kilobytes. At that time, Thomas Jaggi had taken care of the creation of a CSS file with the correct code points that matched the font with his tool gulp-iconfont-css.

Continue reading ...

Thomas' Garden VI
Golem

Dopamine, a music player for Windows 10 as it should be

A minimalist MP3 player under Windows, distributed as open source, which does not shy away from large collections

There are about fourleventy millions music apps for smartphones running Android and iOS. However, most of them are relatively junk or try to foist malware on users. You have to make sure that you separate the wheat from the chaff. On the other hand, the situation is surprisingly different for Windows, the much older operating system. The older ones of us will still remember the glorious WinAmp times, whose current owner Radionomy has been making a very long new attempt for a new version 6 since 2018 (version 5.8 is already a handsome 6 years old), but you can actually count the good music players for Windows 10 and higher on one hand, if you subtract the streaming apps such as Spotify and Co. and disregard everything that comes along as a jack of all trades and can ALSO play MP3. The best known are the in Windows included and miserably failed iTunes clone from Micosoft called Groove, AIMP, foobar2000, MediaMonkey and MusicBee. Some nostalgic people might also add the good old Windows Media Player, which managed to survive on the net despite Groove. If you look at the download pages of these music player candidates and try to look behind the business model, some of them simply do not download. One or the other player also overdoes it with the featuritis. Bouncing balls or bars to the music are gimmicks that were thought to be outdated long ago, when it is actually only about listening to music.

Belgian software developer Raphaël Godart (twitter.com/RaphaelGodart) must have felt the same way a few years ago when he set out to launch his own player for local MP3 collections, which in this case sounds falsely commercial because his player Dopamine is freely available on GitHub and open source under GPL 3.0 license. It plays music under a plain and simple, yet chic interface … Period. Everything a music lover’s heart desires is on board:

Continue reading ...

Manometer
Golem

Gitpod - Visual Studio Code on the Web

The popular code editor is conquering the browser and remote work and the Kiel-based company Gitpod is at the forefront with their solution

It’s amazing how quickly the editor Visual Studio Code (VS Code) has conquered the developer community (#1 in the Stack Overflow Developer Survey Ranking 2021) and even those from the Linux faction, who are historically rather critical of Microsoft, but for good reason. The company from Redmond has done quite a lot right with the tool and has gathered a large group of open source developers around it (currently 1,640 contributors), who contribute to the fact that the Swiss Microsoft team around Erich Gamma can bring out a new release for Windows, Linux and macOS every few weeks.

It all started with the Monaco Editor, the core around which VS Code is built and which was first released on April 14, 2016. The exciting thing about Monaco and VS Code is, that it is consistently written using web technologies, i.e. HTML, CSS and Javascript, packaged and executed using the framework Electron developed by GitHub, which in turn is based on Node.js and the open source browser engine Chromium from Google.

Continue reading ...

Thomas' Ruby Prince I
Discoveries

Discoveries #19 - Visual Helpers

Colors and images are the visual meat on the boil of any web solution. If you don’t convince the visitor’s eye, they will quickly leave and if users have to work with a visually poor solution, they will be too dissatisfied, no matter how well the algorithms work.

Below are a few JavaScript libraries that help to create appealing interfaces.

  • Color Thief
  • Vibrant Colors
  • Color.js
  • TinyColor
  • Qix color
  • Alpha Paintlet
  • DOM to Image
  • imagesLoaded
  • Graphery SVG
  • Flickity

Continue reading ...