29 Aug

Mac OS X: Open With… Duplicates

This is the problem: You want to open a file using something other than the default application. You right-click its icon in the Finder, choose Open With, and a submenu pops up with an absurd number of duplicate entries.

This is one of my favorite Mac OS X tips to know, even though it doesn’t seem to happen too often anymore, but when it does it can be quite annoying, because the list of possible apps to open your file with can get pretty long. So this one let’s you quickly tidy up and remove the annoyance.

The contextual menu for Open With… including duplicates

You can find the detailed instructions on how to remove the duplicates here: Getting rid of Open With… Duplicates. For me this solution has always worked like a charm and it helps to clean up this mess every once in a while.

22 Aug

Harbour Front HK Monthly #1

I’m happy to announce that Harbour Front HK will now introduce a new monthly event called ‘Harbour Front Monthly’. Harbour Front Monthly will cover a variety of topics around all things design strategy & process, mobile & responsive web design & development. The format will settle somewhere between presentations and hands-on workshops, rounded off by Q&A’s as well as possible discussions around the evenings topics. Of course there will be some time at the end of each event to mingle with your industry peers and have a relaxed drink.

The first event will be held on Wednesday, 27th of August at the Hive in Wan Chai. We will kick off #1 with the following talks:

  1. Don’t Overwrite My Stuff!
    An Introduction to Git for Front End Web Design – by Bart Verkoeijen
  2. Building Better Responsive Sites
    Tips, Tricks & Advice to Improve Your Responsive Design Projects – by yours truly

You can register for the first event right here on Eventbrite, add yourself to Lanyrd or follow @harbourfronthk on Twitter for the latest updates. We hope to see you there!

20 Aug

Grunt-processhtml Multiple/All Files in a Directory

A while ago I started to use Grunt in my projects and once you get your head around it, it can be a great helper. Unfortunately I find the documentation for some things hard to find and sometimes difficult to understand right away, so this shall serve as a note, in case you run into the same problem.

I’m using grunt-processhtml to replace various CSS and JS files with different ones, after the sources have been processed otherwise. So far my approach has always more or less looked like this, moving the processed file into the ‘dist’ directory:

processhtml: {
  dist: {
    files: {
      'dist/index.html': ['index.html']
    }
  }
}

For my latest project there are many more HTML files than just only one that need processing and the list suddenly got quite long. This wasn’t a maintainable solution after all:

processhtml: {
  dist: {
    files: {
     'dist/index.html': ['index.html'],
     'dist/page1.html': ['page1.html'],
     'dist/page2.html': ['page2.html'],
     'dist/page3.html': ['page3.html'],
     'dist/page4.html': ['page4.html'],
     …
     'dist/page20.html': ['page20.html']
    }
  }
}

As a result I wanted to grab all HTML files in the root directory, process them and then save the resulting file in a directory called ‘dist’. I couldn’t quite work out how to get this done and the documentation on file handling at first didn’t help either, but after looking at different other Grunt tasks and their file operations I finally figured it out. The solution to what I wanted to do now looks like this and works just like I needed it to:

processhtml: {
  dist:{
    options: {
      process: true,
    },
    files: [
    {
      expand: true,
      cwd: './',
      src: ['*.html'],
      dest: 'dist/',
      ext: '.html'
    },
    ],
  }
}

There are probably other options you can use but for now I’ll leave this for the basic task that gets the job done. I hope this helps in case you are looking for the same or similar solution.

07 Aug

Front End, Front-End or Frontend?

Despite so many people working, writing and talking about this field, it’s hard to find out what the correct spelling of “front-end” was. At times I can become quite obsessed about such things and so I went on a very short quest to find out.

While I was writing my talk on Front End Best Practices for WomenWhoCodeHK two weeks ago, I started to wonder once again what the proper spelling for “Front End” was?

It turns out that it’s pretty difficult to find the ‘correct’ spelling and opinions seems to differ widely. Many of the points made in below articles seem to have a valid reason for whichever their preference is and I really couldn’t take a side.

Then I went on to Google search and this yields the following:

  • front-end: About 405,000,000 results
  • front end: About 403,000,000 results
  • frontend: About 204,000,000 results

As we can see, “front-end” and “front end” seem to be the spelling leaders, with “frontend” only showing up about half as much. Because I’m not a very big fan of dashes and in consideration of the above results, I will stick with “front end” which has been my personal favorite for quite some time already. I also like the one-word-spelling, but I do like consistency even more, thus I will stick with one of the more popular ones and would love to see if there was only one proper spelling at some point :)

25 Jul

Front End Best Practices

This week I held a talk about Front End Best Practices at WomenWhoCode Hong Kong at the Wynd co-working space. While I was putting the talk together it became clear that there could be more than enough material to make this a three hour long session and it was quite difficult to select what to put in and what not to roughly fill one hour. Especially without knowing the level of expertise of the audience, it was quite difficult to choose the right content and I tried to strike a good balance that had something for everyone, from novice to expert.

Nevertheless, again I noticed how things have changed in the web design world over the years and how many things we, as web designers or front end developers, actually have to know, learn and keep up to date with in this ever evolving industry. Still many times I hear things like “It’s just HTML/CSS/JS” which is very likely due to the lack of knowledge and understanding of what goes into today’s (responsive) front end development process.

Here are the slides from that talk “Front End Best Practices” and even if you’re not a developer, there might be some take-aways and an idea of what’s up in the front end world. This is not even the most extensive list, but rather a selection of best practices, tips and advice.

24 Jul

A Different Mobile Navigation Pattern – Made in China

I recently came across the mobile shopping pages of Taobao and noticed their rather not so common approach to their mobile navigation. I’m not quite sure what to think of it at the moment though, but what I do like is that it’s something different in a way.

I haven’t gone into extensive testing on different devices, but it seems to work fine on iPhone and the MiUI Android browser. Because of the major market share of Android in China, I suspect it works on most other Androids, too.

T-Mall screenshots with mobile navigation

I do like the positioning and the general direction of this idea, since it allows you to easily reach the navigation without a problem.
Because of its absolute positioning this at the same time might also a problem that this approach faces…

During the workshop we ran at Harbour Front Web Days, we talked about perfect positioning of navigation and showed off where the hard to reach areas for navigation are located. This falls exactly in line with this navigation being positioned in quite a smart way, because it’s very easy to reach, (almost) no matter how large your phone is. For larger phones like a Samsung Note 3 or the Xiaomi Redmi Note, this position actually works much better than e.g. a ‘hamburger’ at the top of the page.

Luke Wroblewki wrote about optimizing for touch across different devices quite some time ago and his article best illustrates the different pain points and challenges of navigation positioning on touch devices.

Visit Tmall (This navigation only works on touch-enabled devices it seems)

Visit the mobile site of Taobao (This navigation also works with mouse-clicks)

I think this approach could turn into a solid solution for mobile devices and even might be a future version or replacement for our beloved hamburger menu icon, if done well.

I’m curious to hear your thoughts on this approach. Let me know!

28 May

The Ultimate* Guide to Conference Speaking

Over the last few months I have been collecting all kinds of different posts on speaking at conferences, from the dos and donts to sound advice and how to get into speaking in the first place. Without a lot of blah, here you go:

For Speakers

Getting Paid, Not Getting Paid And Other Options

Recently many people have been thinking, writing and discussing about getting paid for speaking. There are a lot of very fair points and it’s great to see how motivations differ. I personally think it depends a lot on where you coming from and to what level you want to take it to. Many people have different reasons for why want to speak and you’ll have to decide for yourself. The following links contain good pointers and thoughtful opinions about the different possible directions you can take in this regard.

For Conference Organizers

We all know that it (mostly) needs two hands to clap, thus it’s not only on the speakers to make an effort, but conference organizers can also help make everybodies experience a happy and great one:

Ready, Steady, Go

With all of this information you should now have all the basic knowledge to make a sane call on what you need to get started, how you would like to approach your speaking career and where to take it from here. For those of you who have been speaking at a few (or many) events already, I’m still confident that you’ll find some useful tips to enhance your future talks in some way or another. Happy speaking!

* I’m of course not claiming this collection ultimate or complete, but ‘ultimate’ is an extremely good looking word ;) I also didn’t want to call it something like “13 Links and what happens after reading will leave you speechless…”, because I’m strongly opposed to this trend of bad writing.
Fun Fact: While reading through the above linked posts again and copying the titles I noticed that only about three or so didn’t have text-transform: uppercase applied to the article headline. Must be a trend going on here ;)