I've been a passionate software developer for a very long time ... now I'm a tech-savvy IT manager and tinker with things like this blog in my free time ;)
Developing software never lets you go. It's a creative passion and for me it's the web that has fascinated me for almost 30 years.
My latest stuff is below and here is more about me. Meet me @kiko@indieweb.social.
From the beginning of this blog I wanted to provide some kind of full text search in order to give my users the ability to find stuff by keyword.
There are a few Hexo plugins that have approached the subject, but it was not really satisfactory and performant. So I relied on the worlds biggest search engine: Google. A search button, which drives out a small input field and with the pressing of the ENTER key the form was sent via GET to //google.com/search.
The procedure was simple, but also burdened with the fact that I always expose my users to Google. At least until now … :)
Bryce Wray set me on a new path with his post Sweeter searches with Pagefind, in which he talks about his experience with the still fairly fresh tool Pagefind…
--- Liam Bigelow @ pagefind.appPagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure …
Pardon me? A full text search for SSG’s running completely in the browser? It sounded so great that I had to try it right away. And what can I say … it not only works fantastically well, but is also extremely easy to implement. Of course, you have to consider a few things, especially with regard to the SSG Hexo I use, but I didn’t find any big hurdles, also because the tool is so well documented. Let’s see what my implementation looks like…
Every year CodePen publishes a list of the 100 most “liked” pens on their site: The Most Hearted of 2022. It’s always exciting to scroll through the list and marvel at the incredibly good work of CSS artists.
My favorite in terms of CSS coding art this year is the work A moment of pure CSS by Ben Evans. Absolutely amazing what he does with pure CSS:
From all these works you can take a lot of know-how for yourself, but many of these pens have no practical use at first, i.e. you can’t really use them directly on your own website. They are art. Some of them impressed me not only because of their creativity, but I saved them on my own Trello list to try them out in one of the next projects. Partly they are clever approaches regarding usability, partly more or less standard functions were implemented in a visually impressive way. Some of them need some JS to work, sime of them not. Let yourself be inspired …
As someone said the other day? “January is the Monday of the year”. How true. After programming myself a new workflow for creating my discoveries (see Generate Content from Trello) at the end of last year, I wanted to try it out again right away and give you a list of tips and tricks for starting 2023.
I’m collecting/bookmarking links to interesting website post on a public Trello board and aggregating them from time to time in a special post series called Discoveries, where I present 10 of them in one post on a specific topic.
Writing these summaries is currently still a bit time-consuming, because in addition to the link, the name of the author and a small description, I would also like to display a screenshot of the page in each case … and it is still a completely manual process.
After selecting the 10 links I want to talk about, I first create a new post for my Hexo blog and then process the links as follows:
I do use two tag plugins (tag-anchorlist and tag-discovery) for this in the post draft, but despite that, it’s quite time-consuming and always the same procedure that can be wonderfully automated… and here I’d like to write about how I approached this task, while I’m working on it.
Websites always have a certain purpose and depending on what you want to do with it, there are pre-designed tools, that make it very easy to get started. In this issue of Discoveries I have collected a few such enablers.
Also included are two hosting offers that address the hot topics of #Fediverse and #IndieWeb in times of #TwitterMigration.
I’ve started this blog in 2019 with this article primarily because I needed an area to record things learned for myself, with the side effect that others can benefit from it if they want.
Why my choice fell on the static site generator Hexo, I no longer know, but I have now become accustomed (even to the shortcomings) and so far I have been able to implement all my ideas in it … and I had a few of them.
In this post I would like to share a few experiences I have had with Hexo, regarding the main functionality and the things I’ve customized and describe my workflow behind the individual features of my blog. The latter is not as straightforward as I would like it to be, especially because I have different devices in use that require different approaches. The main purpose of this post is to simply write down for me, how things currently work on kiko.io and to have one or the other idea how to do it better while writing. Doing this publicly is in the hope that you might read this and have a terrific idea that I haven’t come up with yet and leave a comment or webmention … :)
This weekend I had a revival experience. I got myself a Mastodon account, after many years of staying away from social media as far as I could and at most tweeting a new blog post. Since my active Twitter days, things have taken such a turn for the worse, that I’ve preferred to stay away completely.
I don’t know what made me join Mastodon on Sunday, but it sparked something in me: The love for the good old internet of the late 90s, early 2000s. These guys gave me a warm welcome and made me feel that Internet communities, away from sleazy influencers and banner ads, could actually still work. I got a taste of it, when I let this blog become part of IndieWeb over a year ago, but didn’t quite believe in it because of the low traffic and mentions.
Now the richest man on the planet has to come along and buy the bird site, and a niche product called Mastodon, well known but underestimated in tech circles, almost explodes under the onslaught of disappointed commercial users. And that’s what we are on Twitter, Facebook and Co … a commercial object.
The problem now will be how the community can integrate these many users for whom it was not mentally prepared. What now adapts to whom? The most important thing, however, will be to teach the newcomers (and I count myself among them) that Mastodon is not Twitter in new clothes!
I was going to write a few things about this, but this morning I read a Twitter thread from Peter Jakobs, a self-proclaimed digital Aboriginal from Germany, that just sums it all up and explains it so well I could hardly do it:
That’s why I’m now doing something I’ve never done before: I quote Peter here completely, translated from German into English … Curtain up (and thank you DeepL :D):
Ok, I admit it: I read RSS feeds. Quite old school you might think, but I’m mostly off Social Media and the most news sites quite a while ago, with a few exceptions. I just want to read selective stuff, especially in the direction of technology, and not interrupted by items, the news provider think I have to read. My favorite tool for my feed collection is Feedly, which I open up almost every morning.
Today, Max Böck gave me the momentum with his article The IndieWeb for Everyone to try another type of social media I know for quite a long time, but never give it a chance: Mastodon. I’m now part of it on indieweb.social.
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.
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.
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.
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.
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.