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.
Hexo is a great SSG platform for blogging. Just write your Markdown beneath some Frontmatter meta data, run hexo generate and publish the results to a web server.
But at some point you may want to process different data from internal or external sources and integrate it into your blog. Hexo doesn’t support this out of the box, but has a powerful feature called Generator, which helps you to achieve your goal. The following is a sample and pattern of how to implement this.
The starting point of my example is the requirement to display several elements of the same type on a dynamic page, but you can of course adapt the example according to your needs.
Beginning of the month, Amelia Wattenberger of GitHub Next has published a project to create a SVG visualization of a GitHub repository’s codebase.
On the project page Visualizing a codebase, she talks about the advantages of code vizualization in terms of a better overview and comparability of code … and I loved it at first sight, because I’m an absolute visual person.
But her attempt was not only to show us what’s possible (static SVG files and even interactive apps for code browsing, filtering and comparing), but give us the possibility to create our own codebase diagrams as SVG automatically, whenever we commit our code, by running a GitHub Action, she and her team has developed … the Repo Vizualizer
GitHub has released the long awaited solution für code editing in the web today, or more precisely, the two new solutions: CodeSpaces and github.dev.
As Brigit Murtaugh and Allison Weins pointed out in their presentation at the live stream on Youtube (VS Code anywhere: GitHub Codespaces and github.dev), both solutions are based on the codebase of Visual Studio Code, but have different approaches and target groups.
Where Codespaces is an online editor with computing capabilities (realized by running a VM in the backend) and is only available für paid plans, github.dev is a free online editor to change files in your GitHub repo as you do it in your local VSCode, but without running and debugging capabilities.
This months discoveries it’s all about CSS tutorials. You will find some of the best articles of profound CSS masters like Ahmad Shadeed or Josh Comeau. All tips are vital to bring your CSS to the next level. Happy learning…
Writing an SPA (Single Page Application) in JavaScript/CSS always means to keep an eye on small files to deliver. Especially when utilizing a bunch of libraries and frameworks, bundling is some sort of a must. The offer on bundlers and task runners is large on the web: WebPack, Snowpack, Browserify, Parcel, Grunt, Gulp and “DingDong” (just replace with the hotest new shit available).
But, it is not always necessary to replace your complete building pipeline, when the new “DingDong” is hyped in the media. Brave old tools like Gulp are doing their job pretty well … and you are able to integrate some more modern approaches on bundling JS, for example.
I couple of months ago, while working on a private project, I became attentive to Rollup.js, a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. Rollup uses the new standardized format for code modules included in the ES6 revision of JavaScript and supports Tree-Shaking, which means that it analyzes all your ES6 imports statements and bundles only the code which is used. Pretty cool … but … it is a JavaScript bundler only and there are no plugins for Gulp, my favourite task runner.
In this article I will show you, how to integrate Rollup in your Gulp bundling pipeline.
At the beginning of the year I wrote a post about showing a shadow on an image with the image itself instead of using box-shadow, to make the image appear glass-like.
Nice trick, but it would be much easier to have a little script, that does this automatically for all images on a page. In this post I will show you how to achieve this.
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 | <!-- Schema.org for Google --> |
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.
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.
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.
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…
This is part three of the splitted original post Hexo and the IndieWeb. Don’t miss Part 2 Hexo and the IndieWeb (Sending Webmentions) either.
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.
This is part two of a blog post that turned out to be a bit too long. Don’t miss Part 1: Hexo and the IndieWeb …
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: