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 ...

Some articles I stumble upon in my daily routine of reading news and blogs are diving very deep in a certain topic, especially if they are describing the basics of techniques I use every day.

All of the following reading tips are of the type “ahh, that’s why this works like that” or “uuh, I just scatch on the surface on that”. Take your time and read the articles in detail. We all never stop learning and it’s a pleasure to do so…

CSS

• CSS Viewport Units
• Grid for layout, Flexbox for components
• How CSS Perspective Works
• Linearly Scale font-size with CSS clamp() Based on the Viewport
• Learn CSS Centering

JavaScript

• The Flavors of Object-Oriented Programming (in JavaScript)
• Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

Continue reading ...

In some occasions it is necessary to know which device a user is using while writing JavaScript Web Apps. Should be nothing regarding layout, because for this we have CSS Media Queries.

Somewhere around 2011 W3C introduced matchMedia(), which returns a MediaQueryList object that can be used to detemnine if the document matches the media query string. The using is pretty straightforward and feels a bit like RegEx matching in JS:

1
2
3
4

const mediaQuery = window.matchMedia('(min-width: 1025px)')
if (mediaQuery.matches) {
  // do something...  
}

If you are interested in this API, you will find good introductions to the topic here, here and here (German).

One point of criticism on this pure JS approach can be, that you have to maintain the breakpoints in addition to CSS … but why not use these existing breakpoints in JS?

Continue reading ...

As this blog is a static one, generated by Hexo and hostet at GitHub, the page which was shown, when a user enters an Url which points to nowhere, was the default GitHub 404 page.

Continue reading ...

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 ...

New month, new discoveries. We will deal with key bindings, downloads on the fly, a lot of animations and contrasting images. Have fun, trying out these stunning solutions.

• tinykeys - Modern library for keybindings
• Creating files in JavaScript in your browser
• CSS Animated Google Fonts
• Skeleton Screen CSS
• More Control Over CSS Borders With background-image
• A CSS-only, animated, wrapping underline
• Nailing the Perfect Contrast Between Light Text and a Background Image
• Contrast.js

Continue reading ...

I was looking for a new way to store interesting website articles for reading later, as Pocket, my favourite tool until here, gets worse and worse. As I am a big Trello fan, I wanted to give it a chance to be Pockets successor on my smartphone, where I’m reading mostly.

On installing the Trello Android app, you will find a new SHARE target Add new Trello card, which is comfortable to use:

(Sry, for the German screenshots ;)

The result, website’s title and Url set, is nice at best:

… but Trello has a Bookmarklet, which does the job much better.

Continue reading ...

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 ...