Inline Google fonts to further reduce number of blocking CSS resources
Most major browsers have support for
.woff font format for quite awhile now. The number is around 85%+ with IE8 is the most high profile exception. But … who actually cares about IE8 right! Chances are if you are reading my blog, you won’t be using it anyway 1.
Ok, I’m convinced. How do I download and use
.woff fonts now?
There is a npm package called
webfont-dl which will create a ready-to-use CSS file with
.woff fonts inline and other font formats as well as fallback. Including it in your main stylesheet and you’re done. Maybe organize it in a
/fonts/ folder and update the font links in the CSS. That’s it.
npm install -g webfont-dl
To download the CSS and webfonts:
webfont-dl "http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500" \ -o css/font.css
I provide fallbacks for unsupported browser anyway. See how nice I am ;) ↩
How to burn a bootable ISO file to USB stick on OS X
This method works with *unix ISO files. If you want to create a bootable Windows USB, use
Bootcamp Assistant instead.
OS X shipped with
dd installed. It’s a little utility to copy/convert from an input (your ISO file) to another output (your USB stick). The process is fairly easy.
Plugin your USB stick. Find where your USB stick is mounted by looking at the name and the size. It looks like
To burn the bootable ISO to USB stick, issue the following command. Replace the ISO file name with the path to your ISO file and
diskX with the value you noted at the previous step.
sudo dd if=xubuntu-14.10-desktop-amd64.iso of=/dev/diskX
Enter your password, wait for a little while. It may looks like it’s hanging but do not abort. It would take few minutes, depends on the size of the ISO file.
If you find
dd too slow, you can try replace
/dev/rdiskX and add
sudo dd if=xubuntu-14.10-desktop-amd64.iso of=/dev/rdiskX bs=4m
Contexts is the perfect companion app for Amethyst
⌘-Tab for application switching is a real nuisance. It’s application-based instead of document-based. Example, you have two documents, opened in two windows of an app.
⌘-Tab onlys show 1 entry (the app itself) in the application switcher, which is annoying. You have no way of getting to the window of the document that you want. Instead you will have to right click on the app icon in the dock and select from there.
Contexts is a simple app that solves a lot of problems with builtin
⌘-Tab app switcher.
Switching apps with Contexts
Contexts overrides the system shortcut
⌘-Tab so it will just fit right in.
The usual workflow when you want to switch to an app goes like this: you press
⌘-Tab, take a look at the list and keep pressing
Tab until you get to the application you want to switch to. It’s far from idea because you can’t jump straight to the app you want but keep holding
⌘-Tab while checking the list.
Contexts solve this problem by showing a small sidebar with badge number. All you have to do is to press
number1 to switch to the coresponding app.
Another problem is with the Finder app. When I need to open a new Finder window when there isn’t any opened. I will have to
Tab to it. Finder will be brought to front without any active window. I then have to press
⌘-N combination to open a new window. So much trouble for a simple operation. Contexts fixes this by openning a new window when there isn’t one.
Switching app by searching
Switching app by searching is by far my favorite feature.
Contexts allows you to search by pressing
Ctrl+Space then type app name or document’s title. This is a much improvement over the builtin application switcher. I can now switch app without the need to hold
⌘-Tab, which I found very tiresome.
I only use
⌘-Tab to quickly switch back to the previous app because Contexts sorts apps by default that way.
I fell in love with Contexts sometimes ago. Then there was Amethyst. These two apps just complements each other perfectly, making managing app windows a breeze.
If you’ve never tried it, give it a shot. Once you do, you won’t go back. Guaranteed.
I change the combination to
Alt+numbersince it messes up with Chrome tab switching (
⌘-number) shortcuts. ↩
A curated list of awesome machine learning frameworks, libraries and software (by language). Inspired by awesome-php. Other awesome lists can be found in the awesome-awesomeness list.
Stumble upon this list when I was looking for some Julia’s libraries.
Deferred font loading and using localStorage as cache
The idea is to lazy-load web fonts once everything else loaded completely, store them in
localStorage to be used for subsequent pages. A cookie is used as a flag to check if the fonts are cached in
There are something to note:
If visitors disable cookie, this method will backfire as the webfont will be reloaded everytime visitors go to a different page.
localStorageis slower than browser cache (So i heard).
A browser that supports
localStorageis required, which mean IE8+, Firefox, Opera and Chrome.
On first load, the page will be flashed a bit after finish loading web fonts. This happened because the web fonts finish loading and are re-applied onto the page. Because of this particular reason, I refuse to use this method to lazy-load web fonts. I just hate it seeing it flashed. I’m a sucker for this kind of detail.
nodejs: callback vs promise
Consider the code snippet below:
The second statement will not wait for the first one to complete, hence result in
true in the second statement.
When it comes to dealing with asynchronous in nodejs, we usually come down to 2 most popular options: callback and promise.
Callback is widely used but when we need 3 or more operations going in sequence, things are going to get ugly. Consider the following code snippet.
That is just one function with callback. Imagine this with 4 levels of callback. Welcome to CALLBACK HELL!!
What is a promise?
The core idea behind promises is that a promise represents the result of an asynchronous operation. A promise is in one of three different states:
- pending - The initial state of a promise.
- fulfilled - The state of a promise representing a successful operation.
- rejected - The state of a promise representing a failed operation.
Once a promise is fulfilled or rejected, it is immutable (i.e. it can never change again).
The most complete library for promise on Nodejs is
How to fix `Logon failed for login 'username' due to trigger execution` error with mssql
I recently tumbled upon an error when trying to connect to SQL Server in nodejs using
Logon failed for login 'username' due to trigger execution
I have no problem connecting to a dev db server of mine, probably due to I don’t have any restriction/security setup on it. I only got this when connecting to a production server.
Problem lies in the default driver
tedious used by
mssql. Changing to
tds fixes the problem.
I don’t actually understand the problem behind this so if anyone knows, please help explain it to me.
How to setup Sublime-IJulia with Sublime Text
I love Sublime Text. I prefer to do all of my development in Sublime Text if possible, especially when Julia Studio or Juno don’t offer much addtional features.
The instructions on GitHub repo is a bit confusing so I decided to rewrite it steps by steps how to set Sublime-IJulia up on OS X. I can’t say for other OS though.
I suppose that you have already had
julia installed (v0.3.3 as of this post) and add
julia to PATH variable.
Install zeromq and ipython
From terminal app, install
After that, launch
julia console and install
IJulia should be added and builded successfully.
Now head to Sublime Text and install
Sublime-IJulia by pressing
Ctrl+Cmd+P and type
Install Package, search for
Follow the instruction from step 7 of this GitHub repo. There are a few things to note though:
Change zeromq dylib path because of the version difference.
If you got
Kernel diederror message, try using absolute path for
juliaeven though you already have it in
That’s it. Follow the instructions carefully and it will work as expected.
A conversation with stranger
Stranger: So you’ve been living here for nine years? How come you don’t speak Thai?
me: Well… (chuckle)
Stranger: What do you do for a living?
me: I’m a programmer. I write softwares.
Stranger: Aha. So you’re a nerd? You don’t feel the need to talk to people.
Social sharing button without embedding sharing script crap
Found this collection share url structure from various social networks on Github.
Example, for Twitter:
Use this along with font-awesome icons and we have some nice social sharing buttons without tracking scripts or slowing down your website one bit.