Blue Lock

Native JavaScript Multilanguage Templating

In the project I’m currently working on, I faced the “problem” to integrate multilanguage support, but due to the fact that the new app should be written in vanilla JS, without any plugins, libraries or other dependencies, I had to develop my own localization layer. In this article I want to show you my approach on this…

Continue reading ...

Direction Airport

Remote Testing and Debugging with Chrome

How to test a local site on a mobile device and debug it locally

Developing a website or web app means, you have installed an editor locally on your computer, writing your code locally and start a tiny, built-in web server for debugging locally in your preferred browser. In most browsers, there are some features to mimic a smartphone, to see if your solution is working on such a device too, but you only get a hint if it’s running properly. Some mobile features like navigator.canShare do not work at all. Better is to see it live on your device.

This article will show you firstly, how to test your local solution on a smartphone and secondly, how to debug it locally, when it runs on the smartphone after releasing.

Continue reading ...

Light Bulbs
Discoveries

Discoveries #6

2020 is over and history. Well, may 2021 be with us. With this post I would like to continue the Discoveries, with new momentum. There was a lot to read over the holidays.

All the finds in this issue have something to do with visual aspects of web design in the broadest sense.

  • Drop-Shadow: The Underrated CSS Filter
  • css.gg - 700+ CSS Icons
  • SVGBox - API for Web Icons
  • Change Color of SVG on Hover
  • CSS filter generator to convert from black to target hex color
  • Responsive && Configurable SVG Waves
  • Balloon.css
  • How to Build a CSS-only Organizational Chart
  • Shifty
  • Brad Traversy's 50 Projects 50 Days

Continue reading ...

Oriental Lights

Use a duplicate image to drop a shadow

An alternative for 'box-shadow' on images

Depending on your design, sometimes it is nice to drop a shadow on an image to highlight it:

1
<img src="my-image.jpg" />
1
2
3
img {
box-shadow: 0px 25px 25px -10px #666;
}

Normal Box Shadow

But … it looks like a paper print of the image, with a light bulb in the first third above it. The shade is grey, boring and has been used and seen many times before…

An design related Instagram post from Muhammad Abdull of thewilsonthings, inspired me to use the image itself as the shadow in order to make the image look a bit translucent. Should be the same technique as that of a reflection. Here is the HTML/CSS code for it, as the people asking for it in the comments.

Continue reading ...

Metal Rose

Safely remove multiple classes using a prefix

Avoiding pitfalls when iterating over classList

Writing a Web App with HTML and JavaScript means you deal with several classes on your DOM elements in order to visualize state changes. And there are some pitfalls to be aware of with regard to removal.

Assuming you want to open some kind of sidebar above a container. In this sidebar you have several buttons to show different content via JavaScript and a close button, which closes the sidebar again. You HTML code maybe looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<div id="container">... Main Content ...</div>

<nav>
<button id="open-sidebar">
</nav>

<aside id="sidebar">
<div class="content">... Sidebar Content ...</div>
<button id="close">Close Sidebar</button>
<button id="content1">Show Content 1</button>
<button id="content2">Show Content 2</button>
<button id="content3">Show Content 3</button>
</aside>

</body>
</html>

By clicking on the open-sidebar button, the sidebar is opened and the action, respectively the new state, is vizualized by adding an appropriate class to the parent sidebar element. In order to make it easy for the user, the default content (Content 1) will be loaded also and its state will be marked with another class.

1
<aside class="sidebar open open-content1">

A click on of the other content buttons (let’s say Content 2), will replace the current content and the aside classes will change into:

1
<aside class="sidebar open open-content2">

Now we want to close the sidebar again, assuming that we don’t have stored the currently opened content in the JavaScript code…

Continue reading ...

Sky Rally III

Use and manage multiple Node.js versions on Windows 10

For a new project I needed to have Node 14 running on my Windows 10 machine, so installation was done quickly via downloading and running the setup file.

A short time later I wanted to write a new blog post here on kiko.io, which depends on the Node.js based static site generator Hexo … and ran into several problems.

First of all my hero image processing script (see Automatic Header Images in Hexo) returned an exception. The script uses hexo-fs and the problem is known quite some time, according to this Github issue. The guys recommend to downgrade to an older version of Node.js … :(

Ok … I needed a solution to install multiple Node.js versions and switch between them, depending on which project I want to work on … and there is one: nvm-windows by Corey Butler!

Continue reading ...

Whirling Spark I

How to prevent duplicate events

I’m working on a new web app that contains a sliding out panel with some additional information on the selected element. This panel can be closed by the user via the ESC key. The implementation on initializing the panel seems very straight forward:

1
2
3
4
5
6
7
8
9
10
11
class Panel() {
init() {

document.addEventListener("keydown", function(event) {
if(event.key === "Escape"){
//close the panel
}
});

}
}

Problem is: the panel, which is part of the basic HTML, will be initialized with its content and functionality in a ES6 class. So … on every init, another event listener is added.

You can easily figure that out, by calling getEventListeners(document) in the Chrome DevTools:

Chrome DevTools: Multiple Event Listeners

Continue reading ...

Rusted Bike

Utilize a repository of reusable ES6 template literals

The Template Literals introduced with ES6 are very useful to deal with multiline strings, because they support embedded expressions. Gone are the days of endless string concatination or replacing variables in a string by using RegEx.

Instead of…

1
2
3
4
5
6
7
8
var url = ...
var file = ...

var template =
'<div class="photo">' +
'<a href="' + url + "' +
'style="background-image: url(' + file + ')"</a>' +
'</div>'

… you can write:

1
2
3
4
5
6
7
8
9
var url = ...
var file = ...

var template = `
<div class="photo">
<a href="${url}/"
style="background-image: url(${file});"></a>
</div>
`,

It’s much cleaner and easier to handle, as you can copy your needed HTML right into your code and surround it by backtick (!) characters. Insert your variable placeholders (expressions), indicated by a dollar sign and curly braces, and you are done.

But there is one “restriction”, you have to be aware of: the interpolation (substitution of the expressions) is done at declaration time and not at runtime. You can’t define your literals seperatly, take one and make your substitution as you need it, like you would do with Handlebars or other templating engines. Therefore the name template literals is a bit misleading. But … there is a way to achieve this anyway…

Continue reading ...

Kitchen Copper
Discoveries

Discoveries #5

In this episode of the Discoveries (almost) everything is about images and the web. There are so many pitfalls to do it wrong, but many more possibilities to do it right, especially with these resources I found in the last few weeks.

  • ASP.NET Core Image Resizing Middleware
  • Best way to lazy load images for maximum performance
  • image orientation on the web
  • cosha - Colorful shadows for your images
  • parax-bg - Parallax Backgrounds
  • parax - Parallax Elements
  • Luminous Lightbox
  • Tiny-Swiper - Image Carousel

Continue reading ...

Dead Sea Colors
Lightroom Presets

Israeli Presets for Lightroom

I’m a travel and event photo enthusiast, which means I’m shooting a lot of photographs on vacation or at special events only a few times a year. After I’m back home and start the image processing, I develop a particular look for my images of the past vacation or event. This has a lot to do with my mood and is very intuitive. Not all images are the same in terms of composition and light and so I create usually 3 or 4 different presets each time during image processing.

Back in 2019, I was traveling around Israel, a fascinating country where almost every wall has a story to tell and I was listening through my viewfinder. Here I want to share the presets with you…

Continue reading ...

Color Seat

Folder based publishing in Lightroom

In all times photography was a process: First you shoot you images, then you edit them and in the third step you publish them elsewhere.

Today Adobe Lightroom is a de-facto standard in photo processing, especially when you shoot RAW images. And I mean Lightroom Classic and not the new web/smartphone based software, which doesn’t come even close to the desktop application yet.

I use Lightroom for all purposes after I shot my images: editing, cataloguing, managing and … publishing. On publishing Lightroom offers you two approaches: Export and Publish. While Export is mainly for creating JPG copies of edited RAW images, Publish goes one step further and gives you the ability to do “something” with your exported JPG’s, for example upload them on Flickr, Instagram, 500px or to your own web server via FTP. Major difference to Export is, that Publish keeps your images in sync. Everytime you change the source images, the defined publish services recognizes and offer you to re-publish your image.

Lightroom Publish

In the past years I tried a lot of Lightroom plugins for publishing on several platforms, but it doesn’t work out for long, because all these platforms change their API almost every year (or are stamped) and the sparely maintained 3rd party plugins break.

My workflow for quite some time is to publish my photos on the hard drive, in a folder, which is synced via Dropbox with the cloud. From there I distribute them further.

Continue reading ...