Stone Chains

Series | A New Blog

Starting a new project is always exciting, especially when the building platform is totally new for oneself. As I started this blog in 2019 with Hexo, I had a good experience with JavaScript and some with Node, but no with EJS, Lodash and some of the other libraries Hexo is using.

This series is a little technical diary, how I started the blog and implemented my needs one by one. Learning by doing. Maybe some of my solutions are valuable to somebody else, who faces the same issues I had.

In the meantime, the “New” in the name of the series is no longer really appropriate, but I’m keeping it for the sake of tradition.


Following 27 posts belong to A New Blog ...

Garden Beauties V
A New Blog

Manipulation of Lists within a Sentence of Natural Language

Alternative to classic forms with the help of some JavaScript

The photo section on my blog, the main page of which I have now named COLLECTION, initially only served as an overview of the available or already used hero images for the various pages of the blog, such as posts and others. In the meantime, detailed pages for the individual photos and a world map have been added, in order to follow the IndieWeb idea that I want to publish my photos on my own site with all the information first and then syndicate them on other platforms.

At some point I implemented three different view modes for the photos, more out of a desire to play around than out of necessity: Grid, List and lastly Masonry. Depending on the device class, one mode or the other has its advantages in terms of overview.

Mode Switch Controls

What was still missing, however, was the option to filter and/or sort the amount of photos according to their use, as over time there are more rather than fewer and it becomes increasingly difficult to find the image you are looking for. I had already placed 3 icon buttons at the top right-hand corner for the various view modes and was faced with the decision of how to implement further control elements such as drop-down lists or similar. But I didn’t want the interface to look like “Your Company’s App” at some point, plastered with controls that distract the eye from the photos. Ideas such as folding and unfolding control panels, i.e. hiding the functionality, were also out of the question at second glance. That would only have shifted the problem.

Continue reading ...

Bubbles
A New Blog

Hexo, WebFinger and better discoverability

Providing a static Webfinger file via your own domain

Recently I read the blog post “Mastodon on your own domain without hosting a server” by Maarten Balliauw, which dealt with how to become more visible in the Fediverse, more precisely in Mastodon, with your own domain, because in contrast to the Indieweb approach, the Fediverse relies on Actors (@USER@INSTANCE) of the respective instance/platform and can only include your own domain, if it becomes a Fediverse endpoint itself.

In my case, the latter is not possible because this blog is a static site, generated via Hexo and hosted on GitHub. It simply lacks a modifiable active server component.

However, Maarten has found a trick to at least make it findable in Mastadon via his own domain. First, he explains how Fediverse platforms work in general:

– Mastodon (and others) use ActivityPub as their protocol to communicate between “actors”.
– Actors are discovered using WebFinger, a way to attach information to an email address, or other online resource.
– WebFinger lives on /.well-known/webfinger on a server.

His idea was to simply copy the WebFinger file to his server and make it available in the same way, to allow the Fediverse server to find the correct actor, so search for @me@mydomain.xxx and find @me@my-fediverse-instance.xxx.

Copy a file and deliver it via Hexo over .wellknown/webfinger? What can be so difficult about that…

Continue reading ...

Watergate 9
A New Blog

Experimenting with the font LEXEND

Easier reading for users and more beautiful typography

A few weeks ago, a blog entry (I can’t remember which one) drew my attention to a font called LEXEND. In this article, the author also went into the scientific background of the font, which was developed to simplify reading and thus support those with reading difficulties. The website lexend.com, operated by The Lexend Group, therefore also advertises the font with all kinds of reading statistics, although it is open source and is also freely available via Google Fonts.

Lexend

I simply liked the font style and wanted to try it out on this blog, which has always used the Open Sans font. It was harder than I thought…

Continue reading ...

Floral Magic XCI
A New Blog

Get and use a dominant color that matches the header image

Vibrant Color library and recalculating its HSL output values

The pages of this website are all structured according to the scheme Header, Content, Footer, where the header contains an individual hero image and, like the footer, has a dark gray background color. I chose dark gray at the time because I needed contrast and it matches all the other colors, since the header image is slowly overlaid by the header background color as you scroll.

In July last year, in Discoveries #19 - Visual Helpers, I introduced two tools that deal with determining the dominant color from an image, and since then I’ve been buzzing around in my head about using one of them to color the header and footer to match the image.

After a short testing period I decided to use Vibrant Colors (also because of the good example by Konstantin Polunin on Codepen) and how it works and how I had to adapt the results to my needs I want to highlight in this post.

Continue reading ...

Guinness Orchestra
A New Blog

Mastodon Share Bottom Sheet Dialog

Implement a 'Share Post' dialog in Hexo

Social media thrives on sharing. Thoughts, experiences, self-dramatizations or even texts or posts from other people. This is especially true for microblogging on (formerly) Twitter and (today) Mastodon. To make this easy, the platforms often offer a SHARE endpoint (URL), such as the famous

http://www.twitter.com/share?text=My impossible thoughts on X

… or any dirt buttons to collect user data.

A few months after the groundbreaking of Mastodon 2016, such a feature was also discussed and implemented on GitHub and out came:

https://<your-instance>/share&text=My benevolent thoughts on the Fediverse

But … where Twitter had it easy due to its central structure (twitter.com … period.), we Mastodon users all fidget around on different instances, i.e. each instance has its own /SHARE endpoint and so it’s a bit harder to stick a share button on your own blog, because you have to ask the user where he lives.

Of course, online services like toot.kytta.dev, s2f.kytta.dev, mastodonshare.com sprouted immediately, but also the button providers expanded their portfolio or new ones were launched, like shareon.js.org, share-on-mastodon.social, shareaholic.com.

But seriously … does it take an external service to ask the user for an instance name and redirect him to an URL (and run the risk of falling victim to data collection mania)? Because that’s all it is. All of the above do it exactly that way.

indieweb.social Share

So we come to the ready-made developer solutions e.g. How-To tutorials. Here, too, there are a lot of hits after a search: Mastodon-share-button (WebComponent), Mastodon-share-button (JS), Adding a Share On Mastodon button to a website, Adding a “share to mastodon” link to any web site – and here, … and I’ll join them here for my Hexo-driven blog.

Continue reading ...

Tulips
A New Blog

Convert HTML into Plain Text in Hexo

Render Page.Excerpt into META Tag

Hexo, on which this blog is based, is a Static Site Generator (SSG) that generates a whole structure of HTML files from individual Markdown files in which the articles were written. Besides the actual posts, also overview pages like the archives and others. For the latter, however, it only needs an excerpt from the actual article, which Hexo automatically creates from the initially generated HTML content and which is also available as HTML.

For my Page Meta dialog, however, I recently needed the excerpt as plain text to make it easier to transfer it manually to a Mastodon post, for example. My initial attempts to extract the plain text from the original Markdown turned out to be quite difficult, because in Hexo not only Markdown is used, but also special Tag Plugins in Nunjucks format and of course plain HTML. Long speech, short sense … after the first dozen RegEx-Replace calls, I got doubts to be on the right way and remembered Page.Excerpt, the variant already generated by Hexo in HTML.

Continue reading ...

Beer Copper
A New Blog

Pool Photo Generator

How to create multiple device dependent header photos with Node

Since the existence of this blog, the posts all have a custom header image that I generate from my own photos. Already three years ago (omg … really?) I described in an article how to do this with Hexo: Automatic Header Images in Hexo.

To keep it short, I use a pool folder for this, in which I keep in subfolders next to a meta.txt, for the title of the image and an external url on 500px for interactions to the image, three variants that I need for a new post:

  • mobile.jpg (width 480px)
  • tablet.jpg (width 768px)
  • normal.jpg (width 1280px)

The only piece of the puzzle that was still missing was the automatic generation of these three image variants and the meta file based on a selected photo that I want to add to the pool of available header images. So far it was fun to generate the header images manually either on the desktop or on the smartphone, but it really doesn’t have to be. My goal now was to write a script where I just throw a selected photo into a folder and the NodeJS script does the rest.

My photo workflow is based on Adobe Lightroom Classic and one of the steps is to give a title to the good ones I use here as well. So the script had to include four steps when iterating over the inbound folder’s JPG files:

  1. create new pool folder
  2. read meta data (IPTC -> title) and write it to meta.txt
  3. create the three image variants
  4. delete the processed image from the inbound folder

Continue reading ...

Ground Light
A New Blog

CONTINUE READING Link & Auto Scrolling on the called page

Help your user to read on directly

On the home page of a blog or other text-heavy site with regular new articles, it is often advisable not to display the entire text of the article, but a more or less large excerpt and a READ MORE or CONTINUE READING link that leads to the rest of the article, usually a stand-alone article page. This allows the user to quickly get a picture of, say, the last dozen posts when he comes here to browse your texts.

However, it is somewhat unpleasant if you as the author decide to display a larger excerpt after all, and the user lands at the top of the called page after clicking on the MORE link and first has to scroll/navigate to the right place until he can resume reading. This destroys his reading flow. It is better to take the user directly to the page where the MORE link interrupted the text on the home page.

With a hash and some JavaScript this is done so quickly, that I wonder why I haven’t implemented this on my own blog already :)

Continue reading ...

Smiling Guard
A New Blog

Include and provide JSON data in Hexo EJS Templates

... with a new Helper and an async function

The three main components of a standard installation of the Static Site Generator Hexo are the template system EJS (Embedded JavaScript Templating), Markdown for the content and Stylus for the styles.

In the template files are the three main tags for driving content:

Scriptlet tag for control flow (no output)

<%
  ... my JavaScript code to process data into the template
%>

Output a value as escaped HTML

<%= myVariable %>

Output of a raw value, usually in the form of a JavaScript function

<%- myFunction() %>

Hexo’s helper system is based on the latter. So you can include a JavaScript file in your template that makes use of the JS Helper in node_modules\hexo\lib\plugins\helper\js.js as follows …

<%- js('/js/dist/myFancyFunctions.js') %>

… which will be rendered to:

<script src="/js/dist//js/dist/qr-code-styling.js"></script>

The Problem

So far and short, so good … but I recently tried to use this way to include a JSON file whose data one of my scripts needed as startup options and I noticed that the above mentioned JS helper unfortunately takes care of the possibly missing file extension js. It doesn’t matter if you only pass the path to the file as a string or if all necessary attributes as an object.

Continue reading ...

Water Numbers
A New Blog

Show pages meta data (JSON-LD) in Bottom Sheet

Visualize the generated meta code on your page in a sliding panel for review and information purposes

A few months ago I introduced new meta data (JSON-LD) for the pages of this blog and also wrote about my implementation. Works also everything quite well … only the verification of the generated data was a bit cumbersome:

  1. Open DevTools for a page in Chrome.
  2. Search in the HEAD of the source code for the included script (“application/ld+json”)
  3. Copy out JSON-LD code
  4. Format JSON into VS code … and check

Nothing for now and simply impossible on the smartphone, even if there would be a reasonable Chrome extension for displaying JSON-LD data, but it does not exist (yet). Another problem was that I use automatically generated Socal Media images for my articles, which are included in the JSON-LD, but do not appear anywhere in the page and thus were beyond my control. I simply wanted to display all the generated stuff.

Since I’ve been a fan of the so-called bottom sheets since the first version of Google’s Material Design, I imagined a script that grabs the code embedded in the page and pushes a panel with all the data visualized there into the page from the bottom … and the whole act was easier than I thought.

Continue reading ...

Broken Onion
A New Blog

Provide Blog Metadata via JSON-LD

Centralization of a website's schema.org data in the HEAD instead of everywhere in the HTML

Chris Coyier’s post “Open Graph Blues“ got me thinking that my blog’s metadata, which are used by Google among others to index my pages, aren’t really at the cutting edge anymore. I took the markup of the individual elements of the pages via schema.org Microdata attributes from the standard Hexo template years ago and always adjusted it by value, but never questioned that there are more modern variants to provide the metadata.

It’s Ok for Google to use Microdata attributes, but the HTML code of my templates is getting more and more opaque, because next to these stick to the tags also those for the Indieweb, classes for CSS and last but not least those for the own indexing via Pagefind. There becomes from a simple

<article>
  <h1>Title of my latest blog post</h1>
  <p> ... </p>
</article>

quickly becomes a …

<article class="article-type-post h-entry" 
        data-pagefind-body="" data-pagefind-meta="type:Article" itemscope itemprop="blogPost">
  <h1 class="article-title p-name" 
      itemprop="name">Title of my latest blog post</h1>
  <p> ... </p>
</article>

Lots of textual overhead and the hardest part is maintaining it over the long term. Better would be a complete search engine description in the header of a page, where also the other meta information is available. In one place and not spread all over the HTML code. JSON-LD to the rescue

Continue reading ...

German Roofage
A New Blog

Pagefind UI and URL Parameters

UPDATE: Parts of the original post are outdated, as Pagefind DOES offer a way to preset a search string, which just hasn’t been documented yet … \o/ … see below.


A couple of days ago I wrote about my attempt to integrate Pagefind in my blog. In the meantime, I further refined the indexing by excluding more content areas and adding more for the metadata to make the search results even better.

But one thing was still missing: controlling the search via url parameters, so that you can actually consider the page as a search page. I came across this in a post about the sense and nonsense of Open Graph attributes and other search engine related metadata nowadays. Google, for example, likes to use JSON-LD and when describing the site you can define a search page which then makes it easier to search the site directly via Google … see Sitelinks search box (WebSite) structured data

In my implementation, I decided to adapt the Pagefind UI for myself instead of developing everything from scratch via JavaScript. There are always some limitations with pre-built solutions, but I want to show here that they are actually none for the inclusion of a url parameter.

Continue reading ...

Proud Vespa
A New Blog

Integration of Pagefind in Hexo

Adding a low-bandwidth local search to a static Hexo-powered website

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.

Google Site Search on kiko.io

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

Pagefind 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 …

--- Liam Bigelow @ pagefind.app

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…

Continue reading ...

Orange Shades
A New Blog

Generate Content from Trello

Use Trello board as bookmark data source for generating Hexo content

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:

  1. Creating, resizing and saving the screenshot
  2. Creating a new section in the post
  3. Setting a key for the post based on the title
  4. Setting the title
  5. Setting the author
  6. Setting the screenshot file

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.

Continue reading ...

Green Rag
A New Blog

The State of the Blog

Recap & Workflow after 3 years with Hexo

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 … :)

Continue reading ...

Garden Eden
A New Blog

Show related posts in Hexo

It is always nice to point the readers of your blog’s articles to related posts, they might be interested in. They stay a little longer to understand what you have to offer and increases the likelihood that they become loyal readers, followers or subscribers. Related posts has become a standard on delivering news and posts.

In the default Hexo theme Landscape, on which this blog is based, there is no such function built in, but as the Hexo community is very busy, there are some plugins you can use.

Continue reading ...

Summer Reading
A New Blog

Pimping the Permalink

How to copy and share the permalink programatically

Until now I did not show the permalink under my posts in this blog, but in the past I had sometimes the need to pass one of the links and it was not very user-friendly, on desktop as well as on mobile. Not the One-Click experience I prefer.

My goal was to show the permalink and, even more important, provide a simple way to copy and to share. JavaScript to the rescue…

Continue reading ...

Ancient Kitchen Stuff
A New Blog

Horizontal navigation menu above an image

How to deal with coverage, readability and scrollbars

I changed the main menu of my blog, because I wanted to get rid of the hamburger menu on the upper left, which was shown only for smartphones, but was not really reachable conveniently. Beside that it made no sense to have different navigations for different devices.

My choice was to implement a horizontal scrolling menu, which can grow over the time, without any need of customizing. As I have quite big header images and I wanted to place the new navigation in a more accessible zone, I decided to place it at the bottom, but above the header image.

Continue reading ...

Onion Bokeh
A New Blog

Change CSS class when element scrolls into viewport

I had a neat visual gimmick on the start page of this blog, that the gray-scaled header image of a post in the list scaled up to 100% and became colored, when the user hovered over it:

.article-inner .article-photo {
  height: 150px;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: all ease-out 0.6s;
  opacity: 0.3;
  filter: grayscale(1) contrast(0.5);
}
.article-inner:hover .article-photo {
  transform: scale(1.1);
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

Nice, but a little bit useless on smartphones or tablets, where HOVER doesn’t really work.

Continue reading ...

Shadow Hat
A New Blog

Using GitHub as Commenting Platform

Integrate Utterances' GitHub Issue Commenting to Hexo

If you run a blog, it is always advisable to integrate a commenting system, in order to get feedback on your posts from your readers.

So did I, when I start this blog and I decided to use the Disqus platform, as it was very easy to integrate … but I always had a bad feeling about a third-party platform collecting data from my readers. Disqus is probably not without reason under criticism by many people in the community.

As I host this blog at GitHub (see A New Blog (Part One): VS Code, Hexo and GitHub Pages) I was looking for a solution to host the comments also on my prefered platform. There were some solutions, which uses GitHub Issues for this and wanted to implement something like that someday.

Continue reading ...

Non Toccare
A New Blog

Automatic Header Images in Hexo

Use static images randomly for posts via Hexo script

Every article in this blog has an individual header image, to bring a little bit color into it. In this post I will show you how I deal with the images in using and automatic provisioning.

For serving these pictures I use a static folder, as described in A New Blog: Customizing Hexo. The hard work is done by the plugin Hexo Generator Copy, which copies the static files into the public_dir while generating.

Continue reading ...

Glencoe River
A New Blog

Hexo and the Dark Mode ... revised

Second approach to implement 'prefers-color-scheme'

While writing my post Hexo and the Dark Mode a few days ago, I thought it would be nice, if I could switch between the normal (light) and the dark theme, I’ve created for the support of the OS-related Dark Mode, even manually. The only thing I needed was a toggle element and a little bit of JavaScript.

Of course, I couldn’t manipulate the media query prefers-color-scheme itself, but introduce a different way by blog uses it. Instead of implementing the media query directly into my CSS (or Stylus) code, I used a root selector, which can be manipulated by JavaScript … something like this:

body {
    background-color: white;
    color: black;
}

[data-theme="dark"] body {
    background-color: black;
    color: white;
  }
}

Continue reading ...

Tiny Scots 5
A New Blog

A New Blog: Blogging and Synching en route

Part Three of having fun with Hexo and GitHub Pages

I work with several devices, some Windows, some Android, and sometimes I have time to write on my articles at home (Notebook, Tablet), in my spare time in the office (Desktop, Laptop) or on my way to somewhere (Smartphone). Right now I’m am in a barber shop, waiting for my haircut and write these lines. So, wherever I am, I need the Hexo project locally, but in sync on a digital device.

The blog is synced via Dropbox, but hosted on GitHub Pages, so on every device I need the publishing functions of Git too.

Continue reading ...

Thistle Fence
A New Blog

A New Blog: Customizing Hexo

Part Two of having fun with Hexo and GitHub Pages

Hexo is a great tool to get quick results (see Part One of this series), when you decide to have a blog and its defaults are practical, but it’s power lies in the possiblities of customization via plugins. On the official plugin page, there are actually 302 plugins listed, but there are many more and no wish will be unsatisfied.

I will show you which of these I found worth to work with…

Continue reading ...

Tiny Scots 7
A New Blog

A New Blog: VS Code, Hexo and GitHub Pages

Part One of having fun with Hexo and GitHub Pages

A few days ago I puzzled over a technical problem regarding SQL Server, Active Directory and Visual Studio Database Projects. With tips, hints and snippets from several websites I got it running and the solution was absolutely memorable. For myself and for others. Nothing is harder than to know ‘you did this before…’, but not to remember how.

Because of this strong leaning towards oblivion, I started over 20 years ago my very first website zerbit.de, manually crafted with Classic ASP and a SQL Server database as backend, with an editor, tagging, categories and so on. It was really exciting to build this blog from scratch and writing articles for it, but it was so time consuming to expand the features of the website and keep it running, that some day I quit it silently.

So, to document the solution mentioned above, I could use tools like OneNote or others, like in the past years, but this would be just for me and not for all developers, who have a similar problem. I felt it would be unfair to participate from the knowledge of others to get my solution and dont give something back.

I decided to write an article just in HTML and publish it on my personal GitHub Page that I didn’t used so far. Ok, just Text … ugly. Just a little CSS and a little more structure and maybe I should do something with Vue JS … STOP … It would be better to pick one of the cool new static website generators based on Node.js, to detain myself from inventing the wheel again and save my time to write articles. So I did a little research and found HEXO … Bingo! I can work with my favorite editor Visual Studio Code, its all HTML, JavaScript and CSS, I can write my articles in Markdown and Hexo has a lot of helpers for stuff Markdown doesn’t provide, it produces static files and works only with files, therefore no need for a database … and it is well documented.

Continue reading ...