I’m collecting interesting One-Page-Tools on the web on a Trello board. To add a new card, I use a simple little script on my Android smartphone, I wrote about here: Add website to Trello card the better way.

On processing the page to store on a card, Trello scrapes the page and takes the <meta> tag og:image out of the HTML to generate an image attachment and take it as cover for the card. This sometimes works, but most of the time it doesn’t, because website owners often don’t pay attention to reasonable <meta> tags.

Because it is easier to find a card with visual support, I create my own screenshots for the cards in a manual, but streamlined, process, I want to show you here.

Continue reading ...

Since beginning beginning of time, people are using symbols to make things clear quickly and easily. So do we when developing websites and web apps by using icons. Everybody knows what’s behind a loupe symbol or a hamburger icon.

The way we implement icons have changed in the past. From BMP files to GIF and JPG files, PNG files, to complete or customizable symbol fonts like fontello.com, to Scalable Vector Graphics (SVG).

SVG’s in particular are becoming increasingly popular, because they are nothing more than XML-like code, that can be manipulated via CSS or JS, their digital footprint is unbeatable small and they scale seemlessly.

Dealing with SVG’s is a little bit more difficult than placing a PNG in HTML, because of its complexity, but it is worth learning as much as possible about it. So did I in the last couple of month and I want to share my finds on the web with you in this post.

Continue reading ...

This month my discoveries are all about CSS … at least almost. See the stunning solutions developers around the world have created and take them to improve yours. Have fun exploring.

• Charts.css
• AnimXYZ
• Magic Animations
• transition.css
• Make Animated Content Placeholders with HTML and CSS
• Animating Underlines
• New aspect-ratio CSS property
• How to display language-specific quotes in CSS
• Making the DETAILS element look and behave like a modal
• Better Line Breaks for Long URLs

Continue reading ...

Developing micro services with Microsoft ASP.NET Core 5.0 Web API is powerful and fun, but the fun stops, if your data are accesses unauthorized. It is absolutely fundamental to have a protection layer, which filters out unwanted data requests.

A common way is to limit the service access by providing API Keys to well known clients. In this post I will show you how to implement such a filter in terms of API keys and IP addresses.

Continue reading ...

February and the first sunny days in 2021. What a delight! Have fun, sitting in the sun, discovering my newest finds on the web. This time, all regarding JavaScript…

• github1s: One second to read GitHub code with VS Code
• How to enhance fetch() with the Decorator Pattern
• Ky - Delightful HTTP Requests
• VS Code’s REST Client Plugin is All You Need to Make API Calls
• json-view
• You might not need jQuery
• JavaScript Algorithms and Data Structures
• date-fns - Modern JavaScript date utility library
• Parsing Markdown into an Automated Table of Contents
• FakeScroll - lightweight custom-looking scrollbars

Continue reading ...

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

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

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

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;
}

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

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

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

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:

Continue reading ...