Kosmic wins at the Australian Web Awards

The new Kosmic website has won the ‘Best Overall User Experience’ category at this year’s Australian Web Awards.

Congratulations to Kosmic and to the team at Humaan. It’s been great working with you guys and it’s a fantastic achievement.

Kosmic website featured on the Web Awards website

Full Post + Comments

Recent Project: Kosmic Online Store

Towards the end of last year, Jay, the principal at Humaan and a good friend of mine, asked me if I was interested in collaborating with his agency on a new online store for Kosmic.

The new website went live recently. After several months of work, we were pleased with how things turned out.

Kosmic Website

The client had previously gone down the path of a bespoke system. Relations with the previous developer had soured and the client expressed a strong preference for an open source system in order to minimise vendor lock-in.

We looked at the requirements and decided to build on the Magento platform. Magento has a rich ecosystem of third party modules that we could tap into. This allowed us to reach feature parity with the old website very quickly. At launch, the new website would do much more than what the old site used to do. We were very happy to achieve that in what was essentially a reset, start from scratch project.

Problems like shopping carts and customer order history have been solved a zillion times before. Not having to reinvent the wheel allowed us to spend more time on building a great customer experience, streamlining admin workflows, and integration with point of sale and back office systems.

If you are into music, check Kosmic out. They are running great deals at the moment.

Full Post + Comments

CalorieKing App Now Universal

We have released a universal version of the CalorieKing app.

CalorieKing App - iPad screenshot

Full Post + Comments

Alfred As an Application Switcher


Ever since OS X Lion, the number of spaces that I spawn has skyrocketed. As a result, I’ve found myself using Alfred more and more as an application switcher. I could be coding in a full-screened Vim session and need to refer to an email. Vim is in space #4 while Sparrow, my email client, is in space #1. I just need to invoke Alfred (cmd-space), type “sp”, and hit enter. I’m instantly teleported to the right space and Sparrow is made the foremost window. A keyboard driven workflow full of win. It doesn’t matter if I forget what space Sparrow is in, or whether the application window is minimised. Alfred the butler will serve me Sparrow on a platter.

How about the built in application switcher, the good old cmd-tab? I find that I only tend to use cmd-tab when I want to switch back to the previous application. Anything beyond that feels like too much work. It’s cmd-tab, tab, tab, tab – damn I overshot. Backtick. OK, finally there. Cmd-tab is serial access. Alfred is random access. With Alfred, MacVim is “vi”, Xcode is “xc”.

Alfred appeals to the Vim user in me. In Vim, I routinely hit / to invoke search to jump around code. Alfred is the / of my window management.

Full Post + Comments

Our CalorieKing App Was Released Today

CalorieKing Calorie Counter App Screenshots

Our CalorieKing iPhone app went live today. It’s the first iOS project that I’ve been involved in. After spending the last few months in Xcode, I’m pretty happy to see it on the app store :)

Full Post + Comments

Syncing Safari Bookmarks Using Dropbox

Update: Unfortunately this does not work. I find that Safari will overwrite my symlink with a new Bookmarks.plist file in ~/Library/Safari/. There’s a thread about this issue on the Dropbox forums.

Safari Bookmarks User Interface

If you have multiple Macs and use Dropbox, there’s an easy way to keep your Safari bookmarks in sync on your different machines.

Safari stores your bookmarks in a file called Bookmarks.plist in ~/Library/Safari/. Just move the file to your Dropbox, and create a symlink to it. I keep mine in ~/Dropbox/Sync/OSX/Safari:

mkdir -p ~/Dropbox/Sync/OSX/Safari
cd ~/Library/Safari
mv Bookmarks.plist ~/Dropbox/Sync/OSX/Safari
ln -s ~/Dropbox/Sync/OSX/Safari/Bookmarks.plist Bookmarks.plist

Then, on your other Macs, just delete the bookmarks file and create a symlink to your Dropbox.

Full Post + Comments

Career Development Interview – Design/Multimedia Slant

I was recently interviewed by a design/multimedia student for his career development class in university. This is how it went.

Illustration of a microphone

  • Q What is your name?

    A Vy-Shane Sin Fat

  • Q What is your title?

    A Development Lead

  • Q How long have you been in this career?

    A Six years

  • Q What duties do you perform?

    A In addition to programming, responsibilities are: managing the activities of the development team, project management, scheduling, implementing development and deployment processes for the team, staff mentoring, requirements analysis, functional specifications, and some server administration.

    What a mouthful. In a nutshell, I create stuff, and I facilitate the creation of stuff.

  • Q What tools, hardware and software do you use?

    A Hardware: MacBook Pro, iPad, iPhone, few servers.

    Software: OS X, FreeBSD, Linux, VMWare ESXi, VMWare Fusion, Vim, Subversion, CVS, Mercurial, JIRA, Confluence, PostgreSQL, Adobe Photoshop, Adobe Fireworks, Omnigraffle, Omniplan, Xcode, Interface Builder, MS Office.

  • Q What education did you receive and did it help you on this job?

    A I studied a Bachelor of Communication, majoring in Computer Science and Interactive Multimedia Technologies. The university course helped me learn how to learn and helped me identify what I needed to learn. Most practical things that I do day to day in my work, I learnt by myself.

  • Q If you went to school specifically for this position, what did you not learn at school that you had to learn on the job? In other words what do you know now you wish you had learned before you started your career?

    A I wish that I'd taken some management courses. I received technical training in uni, but had to learn the soft skills on my own.

  • Q Do you think that your employer was looking for someone with your specific degree? For instance, I have seen a lot of openings for web designers, but they all require work experience and a degree. If your position required experience, how did you get the experience. In other words, how did you get your foot in the door in your career?

    A My employer was looking for someone with my specific degree. As a general hiring rule, I also tend to look for someone who has a degree. This is only a general rule and I'm willing to make exceptions. University courses provide some theoretical grounding that self taught individuals often lack. A very simplistic example would be a self taught designer who knows Photoshop inside out, but who is weak in Typography. It takes a dedicated individual to seek out the less tangible, deeper and less immediately accessible topics. These individuals do exist, and I'm willing to make exceptions.

    It's hard to land the first job. Most companies prefer to hire people with experience. In order to get around this, work on your portfolio while in uni. Build up a body of work that demonstrates your skills. This is especially important for designers. I would hire the designer with the better portfolio over a designer who's got better grades. Start some personal projects. Start a blog where you showcase knowledge that you can't list on your resume. A resume can only fit so many words. A prospective employer will look at your blog.

    Be hungry. I was working at Subway in my final year in uni. I was getting paid $8.50 and hour, before tax. I wasn't too fussed about raking in the money when I applied for my first “real” job. I just wanted to get my foot in the door and I said as much. The money will come soon enough. Be confident that once you're in you'll be able to show your worth. In this industry you can easily double your pay within a few years of starting out.

  • Q How important is a portfolio versus a degree? If a portfolio is the most important aspect, how do you put together a professional portfolio? For instance I probably had the best portfolio in my class, and I received all A’s for my work, but I still am not confident that it’s at a professional level.

    A I personally think that a portfolio is more important than a degree, especially for designers. The best way to put together a portfolio is to get involved in side projects that try to solve real problems. For example, design a logo for your uncle's restaurant. Design a poster for a local charity. Get to work on real stuff rather than just concepts. Design doesn't happen in a vacuum. You don't want your interviewer to go “That looks nice”. You want her to go “That's a clever solution. You've convinced me.”

    Confidence is very important. You don't just show a portfolio. You talk through it. When showing off a project, you're describing the context. You're stating the goals that you set out to achieve. You're describing the different options that you considered. You're describing your ultimate solution. You're saying how the goals were met. Maybe you have some data (Sales increased by 20% during the campaign). You're defending your choices. You're selling your work. If you feel that your portfolio is not to a “professional” level of polish, concentrate on showing that you understood the problem, and sell your solution.

  • Q What are the fun and difficult parts of your job?

    A The fun part is all about building things. Anything that involves creativity is heaps of fun. The most difficult part is estimation and project management. Software/Web projects are pure thought works. It's is very hard to estimate how long a big project will take to build, and it is very hard to keep it on track once a timeframe and budget have been set.

  • Q Do any of the companies or company you worked for offer future training once you’re hired, and possible advancement within the company? How do you view your career and industry? Are there any major problems with it?

    A One of the companies sent me to a conference and offered to send me to a management course. Conferences are great. You come back with new enthusiasm, new ideas, and new contacts.

    Advancement is really very much up to you. The easiest way to advance within a company is to give your boss peace of mind. It's a simple concept and there are two parts to it. The first part is to be dependable. If you're given a task, you do it within the deadline and you do it well. Your boss shouldn't have to check your work or micromanage you. The second part is to be willing to take on more responsibility. Your boss will only be too happy to delegate some of her responsibilities to you. She's got enough on her mind. If you're dependable and willing, you can have it. More responsibility equals more value equals better role equals more pay. When she leaves or moves up, she will recommend you as next in line.

    The IT/Web industry is very young. We wear jeans and t-shirts to work. We value meritocracy over seniority. If you're good, it is easy to increase your salary very quickly. However, you need a big and constant time investment in order to stay relevant. It's easy to do when you're single and fresh out of uni. However, you're still expected to find the time to do it even after you get married and have kids. I'm not married yet and I don't have kids. However, even girlfriends get grumpy when you're in front of your computer for four hours after diner, reading about the silver bullet du jour.

  • Q Do you think it has a healthy future? What skills or programs would you recommend learning if you do foresee a change?

    A The creative industry has a healthy future. In the grand scheme of things, IT/Web is really just starting out. Even then, for many of the problems that we set out to solve, we've already moved from trying to make things possible to trying to make things better. We've moved from trying to allow people to manage their calendars on their computers to trying to come up with more intuitive interfaces for those calendars. Check out the competition between RSS readers for the iPad. Most of them have nailed the basic features like feed management, article download, sync and offline reading. They are now competing on UX and there's an explosion of innovation in that space. It's a great time to be a designer. I would recommend learning UX. Interactive design is the next logical progression in design. This is what differentiated the iPhone from the other phones in 2007. This is already how software is competing with each other. We're moving beyond feature sets.

    Get an iPad if you don't already have one. You may have read everything there is to read about tablets and multitouch, but until you immerse yourself into a new medium, you won't get it. You need to get it at a subconscious level. Only then will you suddenly think of a novel way to design user interaction while you're in the shower. As a designer, get an iPad. Not because you need it for X software or for Y use case. Get it because you need to understand the medium thoroughly. The latest medium is multitouch. This is where all the interesting stuff is happening. This is where people are still experimenting and discovering new things. This is also where you're likely to get paid more. Be ahead of the curve. Now, why an iPad and not an Android device? Well, the iPad has a head start, and the software is already moving from trying to make things possible to trying to make things better. If you're looking for inspiration and innovation, you're more likely to find it there.

    Learn the soft skills. Become a good salesperson. As a designer, you're constantly selling. You're selling yourself to a prospective client. You win the project and you're then selling your design to the client. Your client accepts your design and you're now selling their products.

Full Post + Comments

Keyboard Mod: Forceful Caps Lock Remapping on a Macally MK-96

A few years ago I went on a mechanical keyboard buying spree. Among the keyboards that I purchased were two Macally MK-96s. I got them from an eBay seller for around $15 USD apiece. I gave one of them away to a friend and the other one remained unused in its box until a few months ago.

Macally MK-96 box

Macally MK-96 keyboard

The MK-96 is an old Macintosh keyboard that is no longer made. I like that is is fairly compact. The small footprint is achieved by omitting the Insert/Delete, Home/End, Page Up/Page Down cluster, and by moving the arrow keys to the main section of the board. It’s a different philosophy from the tenkeyless design. The latter foregoes the numeric keypad while keeping the rest of the board standard. As a programmer, I rarely use the numeric keypad. So I prefer the tenkeyless design. If you want a compact keyboard and use the numeric keypad a lot, you might like the MK-96 approach better.

The keyboard uses the old Mac ADB connector and you need an ADB to USB adapter to use it with modern computers. I only got around to purchasing an iMate adapter a few months ago, which is why the keyboard remained unused until then.

ADB connector and iMate ADB to USB adapter

Simplified White ALPS

So, what’s so special about this keyboard? In a word – ALPS. Pop a few keycaps off and this is what we see.

White ALPS switches

The MK-96 uses simplified white ALPS switches, which are tactile and clicky. They are quite loud, but provide a very crisp tactile feedback when the keys are depressed. If you like clicky keyboards, you should try white ALPS. I find that the tactile bump is more pronounced on the simplified white ALPS than on buckling springs. Actuation force is also higher than buckling springs.

Initial Issues and Workarounds

The first issue that I faced was the arrow keys layout. The MK-96 has them in an L shaped cluster instead of the now standard inverted T. Luckily I use hjkl to move around in Vim and I was able to ease into the layout without getting overly frustrated.

MK-96 arrow keys cluster

The next thing that kept tripping me over was the fact that the keycap nubs are on K and D instead of F and J. This again is non standard, and it makes it harder for me to correctly position my fingers over the home row. Since I find the home row by feel, I switched the caps around for these keys.

Swapped F and J key locations

Another drawback is the position of the Esc key. On the MK-96, Esc is not placed directly above the ` key. Instead, it is placed above the 2 key, and that messes with my muscle memory when I’m using Vim. It’s driven me to finally bind kj to enter normal mode.

The Dreaded Caps Lock

I use the Ctrl key a lot for window management in tmux and Vim. When setting up a new keyboard, one of the first things that I do is bind Ctrl to Caps Lock. I went ahead and did this with the MK-96. However, I quickly noticed a problem. When I held down the Caps Lock, and pressed another key multiple times, only the first key press was registered. For example, I’d hold down Caps Lock and press E multiple times to scroll down in Vim, and I would only be able to scroll down one line. In order to scroll down again, I had to release the Caps Lock and start over. This quickly became annoying.

Forceful Remapping

This was a deal breaker and made the keyboard unusable for me. Something had to be done. I grabbed a screwdriver and off came the case.

Case off

I turned the keyboard over and looked for the location on the PCB where the Caps Lock was soldered. If I scratched off the connections to the Caps Lock, it would prevent the keyboard from registering Caps when it was depressed. I would then be able to rewire the key switch to Ctrl.

PCB traces to be scratched out

I grabbed a pointy tool and scratched away at the PCB until the connections were cut of. I was not pretty but hey, it worked! I then rewired Caps Lock in parallel to the Ctrl key. As you can see, my soldering skills are pretty crap!

Wires soldered to PCB

Finished rewiring

Finally, I connected the keyboard back to the computer to test it out. Success! I now had a keyboard I could live with.


So, is the MK-96 my daily driver? Sadly, no. My current favourite white ALPS keyboard is a SIIG Minitouch, which I’m using at work. The SIIG is more compact, has a sane arrow keys layout, and the Esc key is where I expect it to be. However, it is still fun to whip out the Macally once in a while.

Further reading: There's a lot of information on various keyboards and key switch technologies at geekhack. Check out the wiki, starting with the mechanical keyboard guide.

Related Post: Topre Realforce 86U

Full Post + Comments

vydark – a Comfortable Vim Colour Scheme for Everyday Use

I’ve made the yang to vylight’s ying, and I’m calling it vydark. My goal was to create a dark-background colour scheme that’s comfortable for use over extended coding sessions.

vydark preview

Installing vydark

  1. Download vyldark.vim from vim.org
  2. Copy the file to your ~/.vim/colors/ directory
  3. In Vim, do :colorscheme vydark

vydark is meant for use with a GUI version of Vim.

See also: vylight, the light background version of this colour scheme.

Full Post + Comments

Is Your Bash Prompt Cramping Your Style?

It is sometimes hard to form a mental model of a directory tree when working with the command line. GUI shells tend to provide more visual cues. For example, in OS X, the Finder has a column view that allows you to quickly see how directories are nested.

Finder column view showing nested directories

So, like a lot of Bash users, I used to get around this by printing the current working directory in my shell prompt:

Directory structure printed in Bash prompt

However, things can get pretty cramped when dealing with deeply nested directories. A better solution is needed. Ideally, I want a minimal prompt that just displays my user@host. I only need to get my bearings when I’m moving around in the directory tree. Therefore, I’ve come up with the following.

Directory structure printed after every cd.  Bash prompt no longer prints current working directory.

The current working directory is printed after every cd. This allows me to get my bearings when I need to, while keeping my Bash prompt short and sweet. The following incantation in ~/.bashrc does the trick:

# Print working directory after a cd.
cd() {
    if [[ $@ == '-' ]]; then
        builtin cd "$@" > /dev/null  # We'll handle pwd.
        builtin cd "$@"
    echo -e "   \033[1;30m"`pwd`"\033[0m"

Have you come up with other solutions for longpromptitis? Let me know in the comments!

Full Post + Comments