MoreRSS

site iconChristian HeilmannModify

A Principal Program Manager living and working in Berlin, Germany. Author of The Developer Advocacy Handbook.
Please copy the RSS to your reader, or quickly subscribe to:

Inoreader Feedly Follow Feedbin Local Reader

Rss preview of Blog of Christian Heilmann

Building a “shoutout” component in plain HTML/CSS/JavaScript

2025-02-26 18:15:05

Every Wednesday I host WeAreDevelopers Live on YouTube. Afterwards we cut out short videos to post on social media. What we needed was an obvious “shoutout moment” in the recording to indicate an interesting quote or when we moved on to the next topic – much like a clapper in classic movies to sync audio and video. To this end, I wrote some functionality to show a “cool” and “next” overlay that will make it easier in post production to find the interesting spots. Here’s what that looks like:

The shoutout component in action

You can try the functionality out yourself by checking this codepen, focusing on the browser part and pressing either the `[` or `]` key.
You can also watch the following video to get this article as a step-by-step explanation:

And there is a detailed explanation of the code on the WeAreDevelopers Magazine.

I just love how easy these things are nowadays in HTML, CSS and plain JavaScript.

How to trim a video in MacOS using Finder!

2025-02-20 20:41:04

Context menus are a treasure trove of features you miss otherwise. Did you know for example that you can trim videos in MacOS Finder?

All you need to do is open the context menu on any video file, go to “Quick Actions” and select “Trim”:

MacOS finder with a selected video file and the context menu open and the Quick Actions selected and Trim available.

You then get a trimming interface that allows to drag the start, end and move the selection around.

A video with the trimming interface visible

You can then choose to save the video as a copy or replace the original one. If the video is an MP4 there is no re-encoding and the saving is immediately done.

Interface to select to save the video as a copy or replace the current one.

If you are already previewing the video by pressing space, you can also get to the trim interface using the button.

Trim button in the preview

Derpify.js is now on npm and GitHub – a tool for these trying times…

2025-01-27 21:49:17

Derpify.js logo showing the Spongebob clucking like a chicken meme

As the times we live in demand it, I released Derpify.js. It is an npm package (3 line method) that turns strings into strings that are randomly mixed upper and lower case.


console.log(derpify(‘All he wanted to say was I love you all.’))

gives you:

ALL hE WANTed to SAY WAS I lOVe YoU AlL.

Get it:

80 years ago

2025-01-27 17:19:55

80 years ago today the concentration camp Auschwitz-Birkenau was liberated. Millions of people were killed there. Jews, Roma and Sinti, people with disabilities, homosexuals, political prisoners… All accounted for.

Killed by people “just following orders”. An industrial destruction complex void of any emotion. A dehumanisation machine. Surrounded by villages of people who claim not to have known or were too scared to interfere. This did not start with posters stating “we will kill a lot of people here”.

It started by painting foreigners as a danger to the values and identity of Germany. It started with posters stating “Germany first” and “Don’t buy from Jewish people”. It started by promising people to protect their country from foreign criminals and allowing you to be proud.

Look around you right now. Read the posters. See the machismo and anger in the speeches of public figures. Realise how many simple messages are on offer for complex problems – all pointing to foreigners as the cause. Then remember what this will end in. is now.

Quick tip: Rotating images and videos 90 degrees in MacOS Finder using CMD+R or CMD+L

2025-01-25 00:01:46

Whilst trying to reload a document in my browser, I found an interesting shortcut. As I had a Finder window in focus with a video file highlighted, I found out that:

  • You can rotate images and videos in Finder 90 degrees clockwise by pressing CMD+R and
  • You can rotate images and videos in Finder 90 degrees counterclockwise by pressing CMD+L

The rotation is almost instant with smaller files and get a “conversion” pop-up for larger ones. In any case, it is much faster than doing it with FFMPEG or other tools.