18 Oct

Mac OS X Yosemite Upgrade & PostgreSQL

Even though I am currently deep into a project which is coming closer to launch and despite trying to not upgrade yet, I couldn’t wait to install Yosemite on my main machine. So I did. Luckily everything works and it was an easy upgrade process. The only thing that needed a little bit of work was a problem with PostgreSQL not starting anymore, which I found after getting an error trying to start the rails server.

Disclaimer: PostgreSQL is one thing which I don’t know much about at all, but this fix doesn’t involve anything that could break your machine, so I thought it might be worth posting.

$ rails s
/Users/foobartel/.rvm/gems/ruby-2.1.2@ik/gems/activerecord-4.1.4/lib/active_record/connection_adapters/postgresql_adapter.rb:888:in `initialize': could not connect to server: No such file or directory (PG::ConnectionBad)
Is the server running locally and accepting
connections on Unix domain socket "/tmp/.s.PGSQL.5432"?

I checked the log file (/usr/local/var/postgres/server.log) and found these lines:

FATAL:  could not open directory "pg_tblspc": No such file or directory
FATAL:  could not open directory "pg_twophase": No such file or directory

I did a Google search for these two lines and found this article on StackOverflow, which seemed to provide the fix. Since this was an easy one to try, I just created these directories.

mkdir /usr/local/var/postgres/pg_tblspc
mkdir /usr/local/var/postgres/pg_twophase
mkdir /usr/local/var/postgres/pg_stat_tmp

Starting the PostgreSQL with pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start then worked. Problem solved. If you ran into the same thing and see the same fatal errors in your log file, I hope this solution works for you as well. Just to be on the safe side, don’t forget to create a backup if you haven’t done so already.

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: {
    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!