Notes

Notes is where I put down thoughts, ideas and everything else that doesn't classify as a full article.

Deleting multiple GIT branches

One thing I always came across, but then never really looked into, was deleting multiple GIT branches at once. Usually this has never been a big necessity, since I never had that many branches to delete in the first place. Since we started work on Colloq, the number of branches has increased a lot and it's a good thing to know to keep the local environment clean.
This resource from Marcelo Luz on how to delete multiple GIT branches is a very helpful one.

iCloud Calendar Spam - Part 2

As I have just seen on Daring Fireball, Apple has now released a first step to prevent any further troubles with iCloud calendar spam that appeared last month. Unfortunately this is currently only available on iCloud.com, but I suppose this feature will get rolled out in the macOS and iOS versions of Calendar in the near future. Or at least I hope so.

I haven't received any further spam invites so far and maybe that was only around the time of Black Friday, but in that case it's just a matter of time to happen again, I guess. Let's see, but in the meantime it's good to know that they have been acknowledging the problem and there's a first solution that has been rolled out.

iCloud Calendar Spam

Last week I tweeted about receiving some iCloud calendar spam and I was wondering if this is the new thing now.

Since it was kind of a one off, I didn't pay too much attention anymore, besides trying to figure out how to get it out of my calendar without accepting or declining the event. After that I did remove the shared calendar that the invites appeared in and moved on. Since then I received two more of these spam messages into the calendar on my phone, but that was it. At first I thought it has something to do with being located in Hong Kong, and thus being close to China, since this spam in general happens here quite a bit. But today I noticed that it happened to more people outside of HK and that there is an article about it on Daring Fireball, too.

The better news is, that Ars Technica reports that there is now a workaround for this issue. It still doesn't solve the issue, but at least helps in the short run. I really hope that this doesn't get any bigger, because this is one of the rather more annoying things.

Let's hope for the best.

Shopify Theme Kit Time Out

During my first time of using the Shopify Theme Kit, I ran into some problems during setup. One of the issues was that Theme Kit gave me a timeout during synch and it turned out that it doesn't like empty config settings.

Received Update event on snippets/size-filter-dynamic.liquid
[999]Could not perform Update to snippets/size-filter-dynamic.liquid at Host Unknown
    Put https://xxx.myshopify.com/admin/themes/xxx/assets.json: dial tcp 23.227.38.68:443: i/o timeout
Received Update event on snippets/size-filter-dynamic.liquid
[999]Could not perform Update to snippets/size-filter-dynamic.liquid at Host Unknown
    Put https://xxx.myshopify.com/admin/themes/xxx/assets.json: dial tcp: i/o timeout

I found a hint in Theme Kit’s Github issues and removing the empty config entries for ignore_files: and ignores: fixed the problem.

Gulp CSS Assets for Shopify

I'm currently working on a Shopify project and was trying to make my life a little easier… I generally like working with Shopify, but sometimes it turns tedious. My front end modules currently live in a separate repo and thus I need to copy CSS and JS over a bit. Especially for the CSS updates it makes a lot of sense to create certain tasks, otherwise manual change become unbearable over time. For this project I created a Gulp task that converts my CSS background rules including images to Shopify compatible asset URLs.

The Gulp task

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var replace = require('gulp-replace');
var rename = require("gulp-rename");

/*
Gulp task to convert CSS background image paths to Shopify asset urls,
e.g. url(/images/background.jpg) -> url({{ 'background.jpg' | asset_url }})
*/

gulp.task('fixurls', function(){
  gulp.src(['css/app.css'])
    .pipe(replace(/url\(\/?images\/(.+)\)/g, 'url({{ \'$1\' | asset_url }})'))
    .pipe(rename("style.css.liquid"))
    .pipe(gulp.dest('./css'));
});

You can find the Gist here.

What this task does, is to convert the following rule:

.bg {
  background-image: url(images/icon-search.svg);
}

to something like this, which Shopify then can process:

.bg {
  background-image: url( {{ 'icon-search.svg' | asset_url }} );
}

Finally the CSS file gets saved as styles.css.liquid which I then can easily copy over to the Shopify assets. Even better would be to additionally save this file straight into the Shopify repo and then would be uploaded right away. I might add that step soon, since that would be even better. For now this task already does its job. And if you found this, I hope it will help to make your life a little easier, too.

Late to the Gulp Party

At first I thought Gulp looked much more difficult at first sight than Grunt. After working with it and setting up various things for about 2 days, it comes off much easier and more intuitive than Grunt ever was. It still takes a little getting used to, since things work slightly different and the fact that tasks run async is sometimes confusing, but all in all I have to say I'm looking forward to learn and explore more.

"M" as in Making

After all of the conversations and inspiration that I have soaked in over the last week that I was in Europe, this shall serve as a reminder for myself to make. Create more, craft more, learn more and make more.

Embedding Tweets in Kirby’s Markdown

After an unsuccessful attempt to embed tweets in an article on my blog, Bastian found out that Parsedown somehow has an issue with the widget script that comes with every embedded tweet.

A quick workaround to solve this issue is to remove Twitter's widget script from each tweet and move it into either the header/footer of the page or to paste it at the end of the page content in your markdown field.

Whereas the header or footer would probably be the “more correct” locations to place the script, it would load on every page, even pages with no embedded tweets. To solve this, you could put the script into a snippet, add a checkbox to the page and load the script only when you add embedded tweets to a page. Either way, for today, I went with the easy and quick fix.

Component Libraries

This article from Clearleft on building component libraries resonates with me a lot. Especially this part right in the beginning made me smile, because I recently had a similar conversation about how to call "this thing" now. It's not easy to choose the right words and language around what we build, especially to make it understandable to people that might not be as involved as we developers are.

Libraries, styleguides, components, patterns, modules, layouts, pages, atoms, molecules, organisms, blocks, modifiers, variants… there is a lot of domain-specific language floating around this niche corner of design and development. Like with anything, language can either clarify or obfuscate, and so it’s important to define and then be consistent with the words that you are using on your projects.

Not only this, but there are many other great points in there, and the article is definitely worth a read.

Facelifting

Over the last two weekends I have finally gotten around to work on the long overdue facelift of my site. I mainly polished up the overall look and added a few tweaks here and there. Nothing much, but at least it's slowly coming together and does look a little less "in progress" than it was before. I also added a new speaking section which I had planned for a while now. There's still many things that I want to do and I'm confident that it won't take too long until I find some time again to further continue working on it.

Better Writing

During HK CodeConf in October, I had the chance to watch some great talks from other speakers. One of those presentations inspired me to write this post, which will hopefully make me remember this in the future. Donal Ellis' talk "Words of Support" focused on clear and good writing, not only in the area of technical support, but how well written communication is key in general.

The last slide of the talk read: "Rewrite at least three times."

Since I am trying to write better words from now on, this post has been rewritten 3 times.

Form Function Class 6

Last weekend I got to speak at Form Function Class 6 in Manila, Philippines, alongside some fantastic speakers. It's been my second time at FFC and again, it has been a great conference and an amazing experience.

My talk "Sweating Details" is about how small tweaks and changes can make a big difference in our web design work. From optimising the process, via UX and design, all the way to good performance, this talk covers possible tweaks and recommended practices with some practical examples to improve the overall experience of our digital products.

You can find the slides of my talk on Slideshare.

Hong Kong CodeConf 15

These are the slides from my talk "Your WebPerf is 💩" at HK CodeConf 2015 at Science Park in Hong Kong, October 24th.

Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and which tools can help to do so.

The deck can be found on Slideshare.

Broken Glass

Today was a somewhat special day. My first iPhone was an iPhone 3G. From that very first phone on, I always loved the form factor and the feel of every single model I have owned. This fact has been the reason that I have always refused to use any kind of phone cover, because it changes the look and feel of a product that is truly great design, which is one of the reasons I like iPhones as much as I do. It just feels good.

Over the last years, many people called me crazy for not using a cover and I do understand where they are coming from. Still, I refused and rather enjoyed the iPhone as is, with its intended size and shape. I dropped them here and there and every phone I owned so far had its own character in terms of scratches, small dents and wear and tear. But I managed to never break a screen. So far. Until today.

This morning after getting out of bed, I dropped my iPhone 6 straight down on its screen and it cracked. Many times. All over. It didn't drop from very high, maybe 40cm or so. I was too tired to get upset about it and somehow got used to the new reality over the day. It happens. But it's sad. I will get the screen replaced and will continue to refuse to put a cover on it. Good luck to me for the years coming that this drop will stay a one time occurrence.

A Kirby Scratchpad

While I was editing some content in Kirby today, I wanted to remove one part of a copy but still use it at a later point. I had the idea of creating a "scratchpad" for that page, so I can save content snippets for later use. I added another field to the page's blueprint and called it "Scratchpad". Scratchpad Done.

Git Commit Wildcard

I wasn't sure if supplying a wildcard to git commit would work, but then I just tried it and it actually does:
git commit content/* -m 'update content'commits all staged files in the specified path. Definitely helpful, especially when updating lots of random things in Kirby's content files.

Outside the box

Today it turned out that looking at things from a different angle can solve all your problems. In terms of a regular expression problem I tried to solve, it was helpful to start thinking at the end of the previous line instead of the start of a line.

Going Full Kirby

So today (or actually yesterday) I decided to move my personal site from WordPress to Kirby. Moving content over was fairly quick, even though a bit tricky here and there.