Jan
Kollars

Projects I worked on

  1. Angehörigen­dialog

    The aim of this project was the digitalisation of an interview guide for nursing relatives of persons suffering from dementia. This also included the creation of visualisations for the evaluation of the results.

  2. Greenovate

    I created the website for the research results of a project about building greening by the city of Krems. An interactive visualisation was also part of the project.

Posts

  1. A modern aspect ratio hack

    Until Safari supports the aspect-ratio property the struggle with hacky replacements continues. This article examines a new and flexible solution for enforcing an aspect ratio on an element.

  2. The sliding sidewalk: preventing a dropdown element from exceeding the screen

    A CSS pattern that keeps an absolutely positioned element inside the viewport.

  3. CSS Layout: Multi-line horizontal list with separators between items

    Learn how we can add separators between horizontal list and how to make them responsive.

  4. Use Eleventy to compile your Sass files!

    Read how Eleventy can handle the compilation of your Sass files.

  5. Firefox printing triangle border hack wrong

    The CSS hack for creating triangles is cool but there are two problems. It is hard to wrap your head around it and it is printed incorrectly by Firefox. Here is an alternative for us.

  6. Increasing the clickable area of chip buttons

    What to do if the buttons are too small for human fingers? Let's evaluate our options.

  7. How to prevent scrolling triggered by the space key

    Read how to prevent the space key from scrolling the page. And that you probably shouldn't.

  8. Wrapping slot items in Vue.js 2

    Sometimes you have to wrap a component's slot children. Accordions or sliders are good examples of such situations. I thought about this a little bit too much and came up with four different solutions.

  9. Firefox bug: when background-clip and animation-fill-mode are used together

    Read how I discoverd a Firefox bug and learn how to fix it.