Prevent Object-fit polyfill from messing with broken image’s alternative text styling

That is a hell of a long title for a very short post.

If you’re using the Object Fit Images Polyfill you might have noticed that broken images’ alt texts render in Times New Roman. This happens because Object Fit Images  works by setting a faux font-family on the image, which is then used by JavaScript. The problem is that the browser tries to render a broken image’s alt text which, of course, doesn’t exist. So it falls back to whatever the browser uses as default. 

To prevent this we can simply add inherit to our font-stack of the image: 

// When using Object Fit Images Manually
img {
object-fit: cover;
font-family: "object-fit:cover", inherit;

So what if you’re using PostCSS Object Fit Images to automatically add that font family to any selector that employs object-fit? Luckily it respects any existing font declaration and adds it to the font stack. So we can simply add the inherit statement directly:

// When using PostCSS Object Fit Images 
img {
object-fit: cover;
font-family: inherit;

The result in both cases is: font-family: "object-fit:cover", inherit; and allows for the polyfill to do its thing while at the same time setting the font-family to the one used in the next proximate parent.

What if not Apple?

I’ve got myself a new MacBook Pro and I’m even more disappointed than I had feared. Random freezes and total shutdowns. Time machine backups that work only occassionally and almost certainly not if using encryption.

So why not leave the world of Apple behind? Looking in my Applications folder I’ve found my list of reasons. It’s even longer than I’ve had anticipated.

  • Apple Photos + iCloud Photo Library
  • Affinity Designer & Publisher
  • Day One
  • Sketch
  • IconJar
  • RightFont
  • Prizmo
  • Sip
  • Contrast
  • Things
  • Tyme
  • iA Writer
  • Paprika

Work Manifesto

We create solid websites for clients who value their users.

We believe there is no better marketing than good content presented well.

We want out relationships to be straightforward, honest and transparent.

We don’t do things we consider ethically wrong.

Stretch SVG Background Images

The next time I’m going mad when trying to stretch a SVG background image using background-size I’ll remember adding preserveAspectRatio="none" to the SVG itself. Otherwise it’s gonna stick to its original aspect ratio like its life depends on it.

MAMP MySQL repair fails with Access Denied

mysqlcheck: Got error: 1045: Access denied for user ‘root’@‘localhost’ (using password: YES) when trying to connect

I have no clue where the MAMP GUI tries to take the credentials from when running checks and repairs. It just never seems to work.

The solution that worked for me, however, is to simply run mysql_upgrade -uroot -p on the command line. Don’t forget to check that MAMP’s mysql binary is in your PATH, because it is not by default. To do so add to your shell’s config (that’s .zhsrc for me) and restart your terminal:
export PATH="/Applications/MAMP/Library/bin:$PATH"

Et voilà:

Upgrade process completed successfully.
Checking if update is needed.

Track your learning hours

Just a quick idea I find very useful to motivate myself and keep track of time spent on lerning certain things.

If you already have a system in place to track work time just use that. If not, I can recommend an app called Tyme. Nice and clean, yet it has all features I need and doensn’t get in the way. It’s available for Mac OS and iOS and offers sync via. I’ve been using it for years to track freelance work but only recently came up with the idea to also employ it to see how much time I invest to improve my skills. I simply set up a project called Learning and in there I’m having tasks for every topic or tutorial I’m working on.

It’s gratifying to see despite having had a really crazy week that I still made time to spend an hour on that Vue training I’m so into right now. It helps a lot to not starting to think I’ve accomplished nothing – and it’s hell of a motivation to not just spend that time on Netflix or Twitter.

Using CSS Blur to add full-width image background

Many designs require the implementation of full-width imagery while restricting the component’s height at the same time.

Blurred Hero Component

Today I came up with this simple idea that may help in some situations: Put a blurred version of the hero image in the background, reduce its opacity and make it span the entire width. Place the actual image above and restrict its width to a dimensions that makes it easier for content editors to find a fitting image.

Bonus points: when using a small resolution for the blurred image it could serve as a placeholder while loading the high res version.


Mir geistert schon länger die Idee einer Art „Time Bank“ im Kopf.

Die Idee: mensch bietet beliebige Leistungen für andere Menschen an. Wenn jemand etwas in Anspruch nimmt bekommt mensch die dafür aufgebrachte Zeit auf einem Konto gutgeschrieben. Man könnte es auch umständlich ausdrücken: Zeitversetzter Tauschhandel für Dienstleistungen.

Mir gefällt der Gedanke sehr gut, dass der Zeit aller Teilnehmenden der gleiche Wert zugesprochen wird. Zeit als natürlich begrenztes Gut erlaubt wenig Spielraum für Spekulationsblasen.

Nun habe ich ein wenig recherchiert und festgestellt: Zeitbanken gibt es bereits, sowohl als Konzept als auch in diversen realen Anwendungen. Die findet meist in kleineren Kreisen und häufig auf lokaler Ebene statt. Ein bisschen wie Nachbarschaftshilfe. Eine Lösung, die ich selbst gerne nutzen würde ist mir noch nicht untergekommen. Eine lokal und global funktionierende Plattform für den Austausch von Fähigkeiten, bezahlt durch das Zurückgeben von Minuten, Stunden, Tagen.

Ich werde also vorerst weiterhin Tabellen führen, wem ich Zeit schuldig bin und bei wem ich noch ein paar Stunden gut habe.

Decoupled Drupal mit Gatsby

Heute kam ich endlich mal dazu, dieses Tutorial zu Decoupled Drupal mit GatsbyJS nachzubauen. In kürzester Zeit war Folgendes möglich:

  • CMS-Setup inklusive Einrichten der JSON-API
  • Anlegen einer von Drupal völlig unabhängigen statischen Site, die CMS-Content von der API konsumiert und rendert.

Oh, ich freu mich auf die Zukunft und auf reale Projekte mit Drupal als Headless CMS. Ungeahnte Möglichkeiten öffnen sich.

A True Alternative to Instagram

The idea started with the following tweet.

Right now this is just me, thinking loudly. If you’re feeling the same itches you’re more than welcome to join scratching. Continue reading

Roll back to an older version of the Evernote Web Clipper for Chrome

There’s no nice way to say it: with the release of version 7 of the Web Clipper Evernote demonstrated that they seem either to not use their own product. Or do the least amount of testing before releasing. And they really give a rat’s ass about their frustrated customers who start to ask themselves what it is they are paying for.

The devastating reviews on the Chrome Web Store for Version 7.x speak for themselves.

Personally I’m most upset about the following regressions, but apparently there are even  more features lost and bugs introduced: Continue reading

Re-use and override TailwindCSS Configuration

TailwindCSS is hands-down my most useful CSS tool of 2017. It’s a fantastic helper to create utility-first CSS. I’ve been working with it since its first public release and I’m still more than happy to have it.

Today I found out a way to make it even more useful. Say you’re having a Parent Theme that you use for a lot of projects, where each project implements a child theme that needs to adjust properties such colors, breakpoints or font stacks. That’s as simple as requiring your Parent Theme’s tailwind.js, override or add properties and export the adapted config.

const config = require('../parent_theme/tailwind');

config.colors['grey'] = '#eee'
config.screens['md'] = '32em'

module.exports = config;


Composer PHP Memory Limit on MAMP Pro

With every PHP update MAMP Pro adds an updated `php.ini file, so previous adaptations are lost after upgrading.

Interestingly, editing a specific PHP versions config file (via File > Edit Template > PHP -> [Version]) doesn’t have any effect on MAMP’s PHP used on the command line. To increase the PHP limit to be able to work with Composer I did the following:

  1. Find the current memory_limit value by running:
    php -r "echo ini_get('memory_limit').PHP_EOL;“
  2. Find out which php-ini is currently loaded on the command line by running:
    php -r 'phpinfo();' | grep 'php.ini'
  3. Update that config file

Rinse and repeat with every MAMP update.

Spotify is terrible for Audio Books and Podcasts

When I impulsively re-subscribed to Spotify Premium last week it was for listening to and finding new music. All the more I was pleasantly surprised when I discovered a bigger-than-expected selection of audio books being available on Spotify these days. I found myself thinking about weather this could even justify canceling my Audible subscription and stick with Spotify for the long run (I’m not sure yet if I want to pay for both services on a constant basis). Continue reading