From day one of this blog I wanted to combine two of my passions: tech stuff and photography. All these photos I have shot myself in recent years and now they are representing my thoughts & findings about digital technology. I wrote about my approach to provide these images in my post Automatic Header Images in Hexo.

When I share one of my posts on social media I provide the appropriate image as a visual anchor to my writing. The technique behind this are the meta tags in the HTML of my posts:

1
2
3
4
5
6
7
8
9

<!-- Schema.org for Google -->
<meta itemprop="image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

<!-- Open Graph -->
<meta property="og:image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

There are several meta tags for different purposes regarding images. For more information see the links at the end of this post. To make a long story short: The sum of these approaches ensures that when an article is posted, the corresponding image is also displayed in the social media post.

But … it’s only the image, without a visual reference to the post itself. In this article I want to show you how to combine the photo with some meta information of the post automatically, to get a Social Media Image.

Continue reading ...

Todays issue of Discoveries is all about images. Show them, manipulate them, get information about them, protect them, use them and create them with JavaScript. Have fun trying out one of these cool solutions.

• PhotoSwipe
• lightGallery
• Pica
• Resemble.js
• medium-zoom
• LC-Mouse-Drag
• ProtectImage.js
• Tinygraphs
• Dynamic Social Sharing Images
• Automatic Social Share Images

Continue reading ...

A while ago I needed some functionality regarding database access in one of my spare time projects and I decided to use a library from NPM. Typed npm install and the hell was breaking loose … 186 direct dependencies and nearly 200K of files were flooding my harddrive!

The mental basis of IT is lazyness, which means that we produce software to make our and others life easier. This also applies to the building process. Don’t reinvent the wheel, but reuse the work of other developers. But … we have to recognize the limits and prevent to fall into the dependency hell.

To get a better overview over dependencies, regarding NPM and other repositories, some Google engineers have published a project called Open Source Insights a couple of days ago.

Continue reading ...

Todays Discoveries it’s all about my favourite programming language JavaScript. Some tiny tips and tricks alongside with a deep dive into ‘console’ and some helful UI libraries. Have fun…

• Beyond Console.log()
• DOMGuard - Stop scammers from the manipulating DOM
• Handling User Permissions in JavaScript
• html-chain - Make html by chaining javascript functions
• Accessible Autocomplete
• JS DataTable
• MK Charts
• Snabbt.js - Fast animations with Javascript and CSS transforms
• SimplyLazy - Pure JavaScript Image Lazy Loader
• Blury-Loading

Continue reading ...

A meaningful interaction has always two directions: sending and receiving. In this part of the post I want to show you how to receive Webmentions from other blogs participating in the IndieWeb.

As Hexo is a SSG it generates static HTML pages. This has the advantage that the pages can be hosted just about anywhere (in my case Github Pages, but also the disadvantage of not having a real backend. Therefore, we need an external service that acts as an Webmention endpoint, where other people can send their webmentions.

Aaron Parecki, co-founder of the IndieWeb, has made a service called webmention.io we can use for free. It is able to convert old-fashioned Pingbacks to Webmentions, supports deleting of unwanted mentions, has a Blocklist for blocking domains, Webhooks for real-time processing and last but not least an API to get all your Webmentions per page or per site.

Continue reading ...

After you have created your new Hexo post with hexo new post "My Fancy Post" and spend a couple of minutes/hours/days on writing meaningful text, you publish it by running hexo generate and copying the generated HTML to your server.

Next step would be to inform all the blogs you linked to in your now published post, that you have done just that. You want to send Webmentions.

Good news: you don’t have to write your own solution to scan your article for external URL’s and sending Webmentions to their creators: Remy Sharp has done that already with his service webmention.app. It supports the long existing Pingbacks too and offers several ways to achieve your goal:

Continue reading ...

It is cool to publish your thoughts on your own blog under your only domain and not only on big social media platforms, because that way you keep control over your content. But what makes Facebook, Twitter and others “social” is the interaction between the people. Likes, Retweets, Mentions, Replies are the fuel which drives them. But most of the blogging solutions offers only rudimentary interactions, in form of article comments. The comment hurdle is high because interacting on someone else’s site is different from interacting on what is supposed to be your own, such as your Twitter or Facebook feed.

The project IndieWeb and their approach of Webmentions, has the goal to fill this gap. As a W3C recommendation, it defines standards how the social interaction of independent blogging solutions can be technically implemented without the need of manual intervention. Let software do the job…

In this article I will only briefly go into the basics and then show an implementation solution for the SSG Hexo.

Continue reading ...

As I am a photo enthusiast I’m always excited to find new tools, to give images a unique look. Today I stumbled over Triangula. Ever seen one of those cool backgrounds, where a picture has been broken up into lots of little triangles?

In trigonometry and elementary geometry, the division of a surface into triangles is called a triangular grid, triangular mesh or triangulation.
Wikipedia

Whoever RH12503 (Ryan H??) is, he did an amazing job on creating this little Go program, including a pleasing UI, do convert images into those equivalents.

Continue reading ...

As I started with this blog 2 years ago, I wanted to document the customization of Hexo to my needs in a series of articles. To group these articles I considered using the build-in categories, but I already used them to group articles by the underlying tech stack or area, like ´JavaScript´, ´C#´ or ´Tools´ and I didn’t want to mix it, as the category was also used in the Url of a post.

I was researching another grouping solution for Hexo and stumbled upon hexo-index-anything, a very clever Hexo plugin to generate index pages for almost every FrontMatter variable in a post.

As it was freely available under a MIT license on Github, I forked it in July 2020 and made some bug fixes and drop a pull request to Levi … but he unfortunately never answered my pull or issue requests and has set the status of the project to DEPRECATED.

Ok then … make a successor on your own, fella…

Continue reading ...

Todays issue is all about extending your Web Developers toolbox with some useful libraries to provide the best UX to your users or visitors. Tables, Dropdowns, Color Pickers, Footnotes and GDPR dialogs on steroids.

• JSTable
• Luckysheet
• Virtual Select
• LC Select
• Vanilla Colorful
• Duet Date Picker
• Cookie Though
• Full-Screen-Touch-Slider
• Bigfoot
• Number Rollup

Continue reading ...

Have you ever been in Scotland during summertime? Wonderful tranquility, great scenery and great photo opportunities at every turn. In 2019 I’ve made some great shots there and I want to share the presets with you, that I have developed for processing the photos from my trip through the Highlands and the Isle of Skye.

Continue reading ...

Working with the PowerShell in 2020 means fun, because of the new Windows Terminal (get it from Windows Store). It has more power as the old Powershell Console and it is visually adaptable to your personal taste, by installing the wonderful theming engine oh-my-posh from Jan De Dobbeleer.

To get Oh-My-Posh properly run, there are several steps to do I want to show here in a nutshell…

Continue reading ...