As of today, there is no true Masonry Layout technique in web development that can be implemented exclusively with CSS and is not based on JavaScript. True in the meaning, that the reading direction should be from left to right and not in the form of columns from top to bottom. For the latter, also called Fake Masonry, there are even two implementation options in CSS: Columns or Flex, whereas the Columns variant is the much simpler one.

Lets say you have a list of boxes you want to show in a grid-like list, but the height of every box is defined by its content, which results in different heights. Here is an example with a base64 encoded 1px image with an individually defined height:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="wrapper">
  <div class="item">
    Box 1
    <img style="height:53px" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
  </div>
  <div class="item">
    Box 2
    <img style="height:50px" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
  </div>
  <div class="item">
    Box 3
    <img style="height:33px" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
  </div>
  <!-- ... 6 more items with different heights -->
</div>

By applying column-count and column-gap to the wrapper and a margin-bottom with the same value as the gap to each item, you will achieve this:

The order of the boxes is from top to bottom and then from left to right … Fake Masonry, but is works as expected. Here is the most important CSS:

Continue reading ...

Currently I’m working on improving my projects section by linking to some of my projects hosted on Github. One idea is to display the Github README there. Playing around with the GitHub API is fun and so I created two new Hexo Tag Plugins that I don’t want to deprive you of and that extend the Hexo Tag Plugin Collection.

• GitHub README
• GitHub User & Repo Card

Continue reading ...

Especially on Github you can find amazing open source solutions for self hosting, that makes it unnecessary to rely on web services from companies you did not know. In this issue of Discoveries I would like to introduce you to a few of them … Happy Holidays

• AppFlowy
• Bangle.io
• Cal.com (formerly Calendso)
• RSS-proxy
• FreshRSS
• Statsig's Status Page
• changedetection.io
• Homer
• Fiddly
• FileDrop

Continue reading ...

Since day one of this blog I use Tag Plugins, sometimes as NPM packages from other developers, sometimes developed by myself.

The latter have grown significantly over time and I want to share them with you by publishing them in a Github project called hexo-tag-plugins, where you can download and use those you need on extending your own Hexo based blog.

On the Github page you can find all the info on how to use the plugins. In this article I will only briefly introduce them:

• Anchor
• Anchorlist
• Alertbox
• Alternative Blockqoute
• Blockquote Details
• Codepen
• CodeSandbox
• Download Link
• Image Compare
• Image Link
• Image Slide
• Indiepen
• More Info

Continue reading ...

When talking about triangulation, non-mathematicians generally understand it as a geometric method for measuring distances. Roughly speaking, two known points in space can be used to calculate a third via the angles to it. In one or the other Hollywood flick of the genres war or spy movie you have surely come across this.

However, triangulation also refers to the division of a surface into triangles or, more generally, the description of an object by means of polygons. It is used in topology and land surveying, but also in imaging methods of modeling.

How wonderfully this field of mathematics can be applied to photos is shown by the GitHub user RyanH with his program Triangula written in Go, which first roughly splits a given JPG or PNG image into triangles and then refines it further and further via mutations. Among other things, you can specify how many points you want to start with and how many mutations the program should perform. It is also possible to calculate the new image using hexagons instead of classic triangles.

Continue reading ...

In this month discoveries you will find some posts and pens regarding CSS and its possibilities. It’s always amazing what can be done with it and what cool solutions can be found on the web.

• Sticky Definition Lists
• How to Detect When a Sticky Element Gets Pinned
• Dark mode in 5 minutes, with inverted lightness variables
• Float an Element to the Bottom Corner
• Neat Parallax Hero Effect
• Underline animation
• Building split text animations
• Intrinsic Typography is the Future of Styling Text on the Web
• CSS morphing
• CSS Tips

Continue reading ...

For most of the years I have been in the IT industry, I have worked with the “fat” Visual Studio from Microsoft. Fat in terms of features, for sure, but also in size and load times. It made no sense to use an other IDE, while developing software with VB.NET/C#. But with the advent of Node.JS JavaScript, so far only known as a scripting language for web pages, outgrew itself and became a serious competitor to established languages.

In 2012 Adobe came out with Brackets, a lightweight IDE for developing web applications, written with the very same tech stack: HTML, CSS and JavaScript! Based on the Chromium Embedded Framework, it felt like a normal application! Mind blowing…

In 2015 there was a new kid in town: Visual Studio Code (VS Code), of all things from … Microsoft. During this time, the Redmond-based company had finally jumped on the open source bandwagon and perhaps they saw that Adobe was doing some things right on the IDE market with Brackets (but also some things wrong) and you didn’t want to miss the chance to engage the open source community.

The speed with which VS Code passed other IDE’s in the developer favor was quite amazing, due to the fact that the source code was openly available on GitHub and the developers in Switzerland released a new version every damn month.

What was exciting for me was the question of how long it would take for someone to make this IDE based on web technology available online, i.e. in a browser. It took until 2021…

Continue reading ...

Staying in Croatia is always a joy, in summer but also in winter. I’m on this side of the Adriatic sea almost every year. In summer you have a pleasant heat, inviting you to swim, and sometimes too many tourists. In winter you have the magic light and space to enjoy the country.

Over the past years a have created some presets to bring my images, shot in Croatia, to a next level of beauty and I want to share them with you in this post.

Continue reading ...

In the last decade(s) I have seen and tried many image galleries and lightboxes for showing images or groups of images. Depending on your needs, you can choose out of trillions of solutions, for every JS framework or vanilla JS, in every flavour, size and color. With many of them, however, you reach the limits quite quickly. Be it in terms of visual adaptability, extensibility or implementation. Customization cost time and nerves, especially if the respective library has structural weaknesses.

However, from today on, I don’t need to look for a suitable solution for my next project, because I found one that leaves absolutely none of my wishes unfulfillede: Spotlight by Nextapps from Berlin, Germany.

To make it clear: this is not a paid advertising text or something like that. That wouldn’t make sense either, because Spotlight is Open Source (Apache 2.0 License) and its code is availabel at GitHub. I’m just thrilled with the work of the developers.

Continue reading ...

This month, Discoveries is all about JavaScript-driven “components” that you can quickly and easily add to your own website to enhance it. Be it with a simple code viewer or an ingenious print function or simply to display or filter photos. Go on a journey of discovery…

• indiepen
• Panzoom
• guggenheim.js
• Lazy Loading Mosaic Tiling Plugin
• ScrollTrigger
• WinBox.js
• Print.js
• Simple Text Annotations
• Clicky Menus!
• Responsive Dropdown Menu (Vanilla Navbar Menu)
• Smooth-side-bar
• Podtablejs

Continue reading ...

A while ago I wrote about Automatic Duplicate Image Shadow and used indiepen for showing the result of my efforts.

I did it quick and dirty first (sample files in a static folder) and now it was the time to do it right: place the sample files in a subfolder of the post in my Hexo-driven blog solution, in order to reference it from there AND have the possibility to call it directly via ./post/my-post/sample.

The key to achive that in Hexo is the configuration option post_asset_folder: true, which generates a subfolder for all assets with the same name as the post.

1
2
3
4
5

|- _posts
   |- my-blog-post
      |- my-first-asset.jpg
      |- my-second-asset.jpg
   |- my-blog-post.md

My idea regarding the indiepen files was having a subfolder for each indiepen in the post asset folder:

1
2
3
4
5
6
7
8
9

|- _posts
   |- my-blog-post
      |- my-first-asset.jpg
      |- my-second-asset.jpg
NEW   |- sample
NEW      |- index.html
NEW      |- main.js
NEW      |- styles.css
   |- my-blog-post.md

Run hexo generate, check that the indiepen was showing up properly and I thought I was done. Wrong … after commiting my changes to Github, where my blog is living, and checking my RSS feed a while after, I saw this:

Three empty posts…!?

Continue reading ...

To be honest: many of my posts here on kiko.io are written just for me. To internalize things by writing them down and to give my future me the chance to look up something I did in the past. So is this post. Future me: Don’t forget the following!

I while ago I was on a trip, shooting a lot of photographs and on my way back home I had three 32GB SD cards full with great photos. I was working with my old Nikon D7000, which has 2 card slots and I just took them out, when one of the cards was full. Worked fine for several years … but after this trip, one of the cards, full with RAW files and wonderful photos, w-a-s   N-O-T   r-e-a-d-a-b-l-e   a-n-y-m-o-r-e … f***! I saved myself the backup and now had to suffer over my carelessness.

I thought about some fancy and expensive backup solutions for professional photographers, but realized after a while, that I already had the equipment to achieve everything I needed and I could even use it to improve my general workflow.

In this post, I want to show you, what my workflow looks like today and how yours might benefit from my mistake.

Continue reading ...