I’m a customer of Dropbox many, many years, a paying customer, and was always happy about the service, as it is fast and easy to use. No problems … until now! Be aware … this will be a rant :/

But first a step back:

Nowadays it is normal to work with different classes of devices: stationary PCs, different types of laptops, tablets and also smartphones. You start writing a text on your laptop at home in the garden, have to interrupt it because of an appointment and continue writing on your tablet on your way, only to finish it at home on your PC, because it has started to rain. All of these used devices to write the text may have a different hard- and software configuration, but today we have synchronisation services like Dropbox, OneDrive, GoogleDrive and man others, which ensures that the same version of the text is available at all times at all devices.

To me it is obvious that software manufacturers cannot support every operating system, but I can expect that if they support a particular OS, they will do so on any hardware that the OS manufacturer also supports!

Continue reading ...

This months Discoveries it’s all about Web UI driven by JavaScript. I have found some really cool components in the net you can use in your project right away to give your users a bit more food for the eye. Congrats to the developers for their amazing work.

• Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
• Slider Scroll
• Add-to-Calendar Button
• Responsive Clock Ui
• Swiffy Slider
• Floating UI
• 8 CSS & JavaScript Snippets for Creating Cool Card UI Hover Effects
• How To Build An Expandable Accessible Gallery
• Omicron drag&drop
• LetMeScroll

Continue reading ...

• Easing Functions Cheat Sheet
• A New Way To Reduce Font Loading Impact: CSS Font Descriptors
• Container Queries in Web Components
• Multi Color Text With CSS
• Conditional Border Radius In CSS
• Icons in Pure CSS
• parallax.css
• Defensive CSS
• How to Create a CSS-Only Loader Using One Element
• Getting Your head Straight: A New CSS Performance Diagnostics Snippet

Continue reading ...

Those who have a Google account usually also use the web-based mailer Gmail, often Google Calendar for appointments and perhaps Google Drive for storing files in the cloud. The US internet company makes it very easy for users to use its web-based services. The entry barriers are low and the interfaces are tidy and intuitive.

If you use the in-house Chrome browser, you can also be informed about incoming mails or upcoming appointments. One click and the browser opens with Gmail or Google Calendar …

But it is not always necessary or desirable to load one of the Google tools completely in a new browser window, when you may already have two or three dozen tabs open in several windows and are in danger of losing track of them.

That’s what Montreal-based software developer Jason Savard seems to have thought ten years ago. At that time, he began writing a Chrome extension that would report a newly received Gmail by means of a small icon in the extension bar of the browser and display it directly in a separate pop-up window by clicking on it. The result was Checker Plus for Gmail.

Continue reading ...

In the first discoveries of 2022 I would like to offer you some interesting links to JavaScript articles that have general language features as their topic or extend them in a clever way. The language (respectively the ECMA standard behind it) is growing from year to year and it is exiting to see how it is expanding.

• Modern Javascript: Everything you missed over the last 10 years
• How can I define an enum in JavaScript?
• 'export default thing' is different to 'export { thing as default }'
• Dynamic, Conditional Imports
• 10 Client-side Storage Options and When to Use Them
• An Intro to JavaScript Proxy
• The Observer Pattern in JavaScript - The Key to a Reactive Behavior
• Why JavaScript Developers Should Prefer Axios Over Fetch
• Toolkit for managing multiple promises
• Promisify an entire object or class instance

Continue reading ...

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