Better Input Change Event

Often it is important to trigger an event, after the user of your website/web app has filled out an text input. You have to do something with the given value in JavaScript.

The intended event for this is change, which will be triggered, when the user has ended changing by leaving the input with his cursor, mostly by using the TAB key. This works at some degree, if there is a physical keyboard, but not really on mobile devices … and for me is leaving the field often too late to start the upcoming event.

Read More

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:

1
2
3
4
5
6
7
8
9
10
body {
background-color: white;
color: black;
}

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

Read More

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.

Read More

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…

Read More