Gulp Task: On Error Resume Next

Previously, as I have mentioned that I have been working on hybrid mobile apps using Ionic for a while. Since then, I was officially working on Node.js full-time – a great experience so far. Ionic hires Gulp as the task runner, which is really impressive.

As a developer working on anything front-end, you would like to reload the page whenever you make changes as the Minimum Viable Feature. In short, you want your developer experience smooth. So features like live preview/reload is something a front-end developer can’t live without. Like building a dream house with only hammer and nails is not fun.

Gulp comes all these features a front-end developer desire (although, they are not restricted to gulp). I am really enjoying building mobile apps while testing the most things in a browser.

  • Making changes to AngularJS controllers, it transpiles to ES5 JavaScript and reloads.
  • Making changes to html files, it refreshes.
  • Making changes to Sass files, it transpiles the css, prefix the vendor specific rules, and injects to the page.
  • Missing a semi-colon in your Sass file, … … … … … [10 seconds later], nothing happened?! Go back to shell… BOOM!!! The task crashed…

It happens all the time because typo is something very much a human factor. Terminating the Gulp instance, then re-runing the Gulp task is definitely something you want to avoid.

keep calm and on error resume next

On Error Resume Next is a super nice feature to change control flow, comes with Visual Basic in the early days. The idea is dead simple, whenever error happens, don’t crash and move on. It’s so nice a feature so even Reactive Extension offers this feature as well.

Gulp is a task runner based on the stream. It emits an error event when error happens. The reason the task crashes is because the error event is not handled properly, so the stream is never ended normally.

So to fix this is simply to guide the stream to the exit.

And in code, this is what you can do

gulp.task('sass', function () {
return gulp.src('./scss/')
.pipe(sass().on('error', onErrorResumeNext)) // the meat
function onErrorResumeNext (err) {
gutil.log(err) // logs the error for dianostics
this.emit('end') // ends the stream

view raw
hosted with ❤ by GitHub

Ionic: using $ionicHistory to calm down the ion-nav-bar

Being working on a mobile app using Ionic for a while. Find Ionic is really nice to build hybrid mobile apps. However, one thing I find uncomfortable with while dealing with workflows.

Ionic provides a directive ion-nav-bar, which displays side-menu toggle or back button based on the history managed by $ionicHistory.

It works great except this tiny little thingy. For example, given we have three screens
– Events, to show a list of events
– Event Detail, to display the details of the event
– Update Event, to update the details of the event

The workflow is simple, the app shows the events, user go to the specific event and make some changes, then go back to the events page.


But then, the ion-nav-bar still shows the back button. This might be okay for iOS app, because there isn’t a physical back button. However, on Android, I tend to tap the back button to quit the app. But instead, I go backwards like a crazy time machine!

After a bit conversion with Dr. Google, it turns out we can prevent this by reseting the navigation history. It’s actually well documented in the $ionicHistory documentation.


RTFM aye

So here is the meat

historyRoot: true

I find it nice to be part of the resolving phase, here’s the full example.

.controller('EventsCtrl', EventsCtrl)
function config ($stateProvider) {
.state('', {
url: '/events',
cache: false,
templateUrl: 'templates/events.html',
controller: 'EventsCtrl',
resolve: EventsCtrl.resolve
function EventsCtrl ($scope, events) {
angular.extend($scope, {
events: events
EventsCtrl.resolve = {
jobs: ($ionicHistory, EventService) => {
historyRoot: true
return EventService.allEvents()

view raw
hosted with ❤ by GitHub

Editor Adapter

As developer start adopting more and more programming languages. The number of IDEs we are working in increases as well. It is annoying (if not painful) to pick up new shortcuts to do just basic things like navigating around the code. My approach to that is to use Adapter Pattern.

Adapter Pattern is one of the most popular design pattern when we design systems. It helps us to remove the dependencies to the things that we don’t have control over. In real life, you will use adapter if you purchase electronic or digital products overseas. More often than not, the plug is not compatible to your wall outlet. The following is a typical situation illustrated.


In stead of replacing your wall outlet or tinkering your plug. An adapter is a decent solution to this issue. But when it comes to the editors and IDEs, same rule applies.

I use the following IDEs very often

  • Visual Studio , because I am a .NET developer for years.
  • Intellij IDEA for building Andriod apps and Data Science experiments.
  • XCode for iOS apps.
  • WebStorm for web development.
  • Atom as alternative to notepad.
  • Brackets as an alternative to WebStorm.

Anyway, you get the idea, right? At the beginning, I was trying to sync the shortcuts the same as Visual Studio settings. Very quickly, I find that was nearly impossible because I hit various limitations. Then I was trying to find a better solution – using Vim.

I started to experiment Vim in Visual Studio since May 2014. It was reeeeeally hard to get used to at beginning, just like any action game you are playing. How far can you go when you started playing Flappy Bird? But after a few days, Vim motions become something native to me. So I got the confidence to keep going. After a few months, I didn’t give up. Which was great. So I learnt something new and I was happy about it.

The good thing about Vim is that I can switch to different IDEs so smoothly because most IDEs do have native Vim support or via 3rd party plugin. That is what I called Editor Adapter – instead of changing shortcuts of IDEs, using a adapter as a solution. The another benefit is I can make simple changes to the files without leaving the shell environment.

editor adapter

Offloading SSD I/O Traffic by Creating Symbolinks

I’ve upgrade my 3.5 yo laptop to SSD for a month. I tossed away the CD-ROM and installed the HDD drive with a caddy. BOOM!! The performance is absolutely fantastic. And I can still keep all the things around in HDD drive.

And I hear lots of stories that SSD has its lifespan. The more you write on it, the shorter its life.

I’m on Windows 8 and I found most of the things on this post useful.

The one I like the most is mklink. It’s super useful. I used it occasionally whenever I want to share some resource across different projects. But anyway, the command is very easy. Let’s take Chrome as example. As we know, Chrome is greedy on cache – tons of writes – and I browse internet more than I breath. All right, that’s a bit exaggerating, but you get the point. So I decided to move it.

mklink "C:\Users\Mike\AppData\Local\Google\Chrome\" "D:\Users\Mike\AppData\Local\Google\Chrome\" /D

It’s pretty simple and handy. I did the same to Windows Search Indexes and a bunch of other folders.

Installing CyanogenMod on Nexus S

I’d like to play around Cordova to build cross platform mobile application. So, I took out my 3 years old Samsung Nexus S – the 1st phone I bought by the time I came to Australia. Tried to install CyanogenMod 11 which is based on Android 4.4 KitKat and design for better performence on low-end devices.

So I followed the instruction here. I’ve downloaded the rom and Andriod SDK. Managed to unlock the phone and then stuck at pushing the room via sideload method. It keeps complaining the protocol issue. And no luck with push method as well for very generic error.

fastboot recovery mode

fastboot recovery mode

So I asked the Google which led me to upgrade the rom manager. So I downloaded the one from this site. Then did the following to flash the manager

fastboot flash recovery recovery-clockwork-

Started over again with sideload, still with some random protocol issue. But this time, I was able to mount /data folder and ran the following command to push the rom.

adb shell "mkdir /sdcard/0/"
adb push /sdcard/0/

installing the new os

installing the new os

After the waiting for the installation. Reboot the device and here we go. New OS was installed.

up and running

up and running

Multi-user WordPress Hosted by IIS

I’ve been playing WebMatrix for open source projects. For Say you can start a WordPress instance with just a few clicks. It installs all the pre-requisites like MySQL database and PHP. Then downloads WordPress and bootstraps the configuration. All happens within just a couple of minutes. Which is amazing.

Everything goes well until you start to enable multi-site aka Network feature. The setup requires the site hosting on port 80. So I have to change the IIS Express binding and put a new entry to my local hosts registration. And I have to start WebMatrix as administrator.

This seems to be fine and it asks to update the web.config with new URL rewrite. But when I visit the sub-site. The address is not able to be resolved. After I asked the Dr. Google which led me to this post. There provides a better rewrite rules. Now everything works like a magic. ;)

<!– –>
<?xml version="1.0" encoding="UTF-8"?>
<rule name="WordPress Rule 1" stopProcessing="true">
<match url="^index\.php$" ignoreCase="false" />
<action type="None" />
<rule name="WordPress Rule 2" stopProcessing="true">
<match url="^([_0-9a-zA-Z-]+/)?files/(.+)" ignoreCase="false" />
<action type="Rewrite" url="wp-includes/ms-files.php?file={R:2}" appendQueryString="false" />
<rule name="WordPress Rule 3" stopProcessing="true">
<match url="^([_0-9a-zA-Z-]+/)?wp-admin$" ignoreCase="false" />
<action type="Redirect" url="{R:1}wp-admin/" redirectType="Permanent" />
<rule name="WordPress Rule 4" stopProcessing="true">
<match url="^" ignoreCase="false" />
<conditions logicalGrouping="MatchAny">
<add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" />
<action type="None" />
<rule name="WordPress Rule 5" stopProcessing="true">
<match url="^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*)" ignoreCase="false" />
<action type="Rewrite" url="{R:2}" />
<rule name="WordPress Rule 6" stopProcessing="true">
<match url="^([_0-9a-zA-Z-]+/)?(.*\.php)$" ignoreCase="false" />
<action type="Rewrite" url="{R:2}" />
<rule name="WordPress Rule 7" stopProcessing="true">
<match url="." ignoreCase="false" />
<action type="Rewrite" url="index.php" />

view raw
hosted with ❤ by GitHub

AngularJS, Protractor, Visual Studio! SUPER DRY!!

I AM A .NET Developer. Visual Studio is the trench that I dig every day. AngularJS is the primary weapon that I use in the frontend. I want to have Protractor as my first aid kit which doesn’t play nicely without Node.js. But it’s all right, I can tame it!

Update: you might be interested in this sample project to dig in quickly. It contains a tiny AngularJS app and a few test cases.

Let’s shave the yak

Do you know that Node.js Project is actually a Node.js flavoured ASP.NET project?

  • Update selenium standalone server
    .bin\webdriver-manager update

  • Start selenium standalone server
    .bin\webdriver-manager start

  • Run test specs
    .bin\protractor protractor.conf.js


  • Include node_modules\protractor\lib\cli.js into project and Set it as Node.js Startup File
  • In project properties, configure Script arguments as protractor.conf.js


  • taskkill /f /t /im chromedriver.exe
    Sometimes you are stuck while debugging because previous chromedriver session was not terminated properly. Use this to kill all chromdrivers that lurks around.

  • Testing out Protractor interactively
    The tool provides a REPL-ish way to test selector.
    It helps to test while writing the test. Instead of test after you finish the test spec.

Other things help you get started

Sublime Code Preview

Sublime Code Preview, a Sublime Text package, inspired by Visual Studio Web Essentials.

sublime code preview ui

Sublime Code Preview UI

Excitingly, my package get merged into sublime package community list last weekend. And within a week, I got a pull request from Carl Furrow. Carl says it is the beauty of the open source. Anyway, it does make me feel so social in the bits and bytes world ;)

This package is totally inspired by Visual Studio Web Essential, which has a awesome code preview window for CoffeeScript, TypeScript etc. I really like feedback it provides as I am writing the code. So I ended up with this package provide similar code preview tool for Sublime Text.

The source code is hosted on github, feel free to contribute new features to the project!

#Appfest Sydney

#appfest sydney

Just spent 3 days join in the #Appfest Sydney since last Friday. Got a little bit tired. But it’s absolutely fantastic. This event is about windows 8 app, windows phone app and windows azure.

As I join the session of building apps for two platforms, talked by Microsoft technical evangelist, Nick Hodge. He is funny, and his style is somewhat like Scott Hanselman to me.

Shane Morris shared very good slides at keynote session for designing windows and windows phone app.


What I got from this 3-day event? A lot of freebies, fantastic catering, and most of all, the tips of designing and building windows, windows phone apps.

Mentors are very helpful. So there are many good ideas generated. I really enjoyed. Thanks for organizing such an event. And I decided to start my journey of building windows apps.