Split Rotunda
Lightroom Presets

Croatian Presets for Lightroom

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

Seating Group
Great Finds

The Last Image Gallery...

... you have to deal with: Spotlight

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

Windowed Wall
Discoveries

Discoveries #13

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

Mooring Ropes

Uups ... empty posts

Problems with post asset files in Hexo and a solution approach

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

indiepen is a solution for showing code samples without the need of a code sharing platform, like codepen. Just reference a index.html, main.js and styles.css from wherever you want and indiepen is wrapping it with a neat viewer inside an IFrame.

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

Rainbow Crane
Step By Step

Photo Workflow Re-Thought

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

Copenhagen Window

Application-Specific Links on Windows 10

What works and what we still have to wait for

While reading the Chris Coyier’s post Application-Specific Links the other day, I realized what has been bugging me for a long time now: a proper solution for openening a certain URL in a modern Web App.

Since the beginning of the digital age (feels like that), we have files associated to a certain application, installed on our machine, regardless if its running Windows, iOS, OS/2 or whatever. We have learned that well and no one questions it … but … the IT world keeps on turning and today we are not only talking about files, but about links.

Many modern applications are written with Web technologies, thanks to cross platform frameworks like Electron. Some of them are real apps for working on things, like the famous editor Visual Studio Code, and some are mirroring their online services in a desktop app only, like Slack or Notion. However, the latter have the problem how to deal with links to their online services. When a user is sent a link and has become accustomed to using the desktop app, it won’t open in the app as he clicks on it, but in his default browser. The question is, how to associate not only files, but links with certain desktop apps?

Continue reading ...

Garden Beauties I

Pattern for dynamic Hexo pages

Set up pages with dynamic data easily

Hexo is a great SSG platform for blogging. Just write your Markdown beneath some Frontmatter meta data, run hexo generate and publish the results to a web server.

But at some point you may want to process different data from internal or external sources and integrate it into your blog. Hexo doesn’t support this out of the box, but has a powerful feature called Generator, which helps you to achieve your goal. The following is a sample and pattern of how to implement this.

The starting point of my example is the requirement to display several elements of the same type on a dynamic page, but you can of course adapt the example according to your needs.

Continue reading ...

Thomas' German Flag

Visualize the codebase of your GitHub repo

Try GitHub Next's repo-vizualizer action for generating a diagram of your codebase

Beginning of the month, Amelia Wattenberger of GitHub Next has published a project to create a SVG visualization of a GitHub repository’s codebase.

On the project page Visualizing a codebase, she talks about the advantages of code vizualization in terms of a better overview and comparability of code … and I loved it at first sight, because I’m an absolute visual person.

But her attempt was not only to show us what’s possible (static SVG files and even interactive apps for code browsing, filtering and comparing), but give us the possibility to create our own codebase diagrams as SVG automatically, whenever we commit our code, by running a GitHub Action, she and her team has developed … the Repo Vizualizer

Continue reading ...

RYB Brass & Wires

GitHubs Magic Dot

New experience in code editing

GitHub has released the long awaited solution für code editing in the web today, or more precisely, the two new solutions: CodeSpaces and github.dev.

As Brigit Murtaugh and Allison Weins pointed out in their presentation at the live stream on Youtube (VS Code anywhere: GitHub Codespaces and github.dev), both solutions are based on the codebase of Visual Studio Code, but have different approaches and target groups.

Where Codespaces is an online editor with computing capabilities (realized by running a VM in the backend) and is only available für paid plans, github.dev is a free online editor to change files in your GitHub repo as you do it in your local VSCode, but without running and debugging capabilities.

Continue reading ...

Beer Barrels
Discoveries

Discoveries #12 - Tutorials

Some great articles from CSS masters

This months discoveries it’s all about CSS tutorials. You will find some of the best articles of profound CSS masters like Ahmad Shadeed or Josh Comeau. All tips are vital to bring your CSS to the next level. Happy learning…

  • CSS Variables 101
  • Full-Bleed Layout Using CSS Grid
  • A Deep Dive Into CSS Grid minmax()
  • Create Diagonal Layouts Like It's 2020
  • Using calc to figure out optimal line-height
  • Drop-Shadow: The Underrated CSS Filter
  • A Guide to the Responsive Images Syntax in HTML
  • Centering in CSS
  • How to trigger a CSS animation on scroll
  • CSS Scroll Snap

Continue reading ...

Coal Flame

Running Rollup with Gulp

Use Rollup.js as JavaScript bundler in your Gulp pipeline

Writing an SPA (Single Page Application) in JavaScript/CSS always means to keep an eye on small files to deliver. Especially when utilizing a bunch of libraries and frameworks, bundling is some sort of a must. The offer on bundlers and task runners is large on the web: WebPack, Snowpack, Browserify, Parcel, Grunt, Gulp and “DingDong” (just replace with the hotest new shit available).

But, it is not always necessary to replace your complete building pipeline, when the new “DingDong” is hyped in the media. Brave old tools like Gulp are doing their job pretty well … and you are able to integrate some more modern approaches on bundling JS, for example.

I couple of months ago, while working on a private project, I became attentive to Rollup.js, a next-generation JavaScript module bundler from Rich Harris, the author of Svelte. Rollup uses the new standardized format for code modules included in the ES6 revision of JavaScript and supports Tree-Shaking, which means that it analyzes all your ES6 imports statements and bundles only the code which is used. Pretty cool … but … it is a JavaScript bundler only and there are no plugins for Gulp, my favourite task runner.

In this article I will show you, how to integrate Rollup in your Gulp bundling pipeline.

Continue reading ...

Colorful Twig

Automatic Duplicate Image Shadow

Drop an image shadow with the image itself via JavaScript

At the beginning of the year I wrote a post about showing a shadow on an image with the image itself instead of using box-shadow, to make the image appear glass-like.

Nice trick, but it would be much easier to have a little script, that does this automatically for all images on a page. In this post I will show you how to achieve this.

Continue reading ...