me.dt.in.th

What’s NOT a functor?

2015-12-16T00:00:00+00:00

(This is a sequel to What is a functor?)

In this article, I’ll show some cases where something looks like a functor (it has a .map(f) method), but did not obey every functor law.

What is a functor?

2015-12-16T00:00:00+00:00

This is my attempt at explaining about a functional programming concept called ‘functor’ in an easy-to-understand way. I’ll be explaining it in JavaScript.

simple > complex > complicated

2015-11-12T00:00:00+00:00

(This is a response to The Single Biggest Mistake Programmers Make Every Day)

It reminds me of this from the Zen of Python:

Simple is better than complex.
Complex is better than complicated.

It is not until recently — when I got to work with some very complicated code — that I finally experience the differences between complex and complicated.

Isolating `node_modules` in Vagrant

2015-11-03T00:00:00+00:00

I’m playing with Otto to set up a development environment for my Node.js project.

The problem comes when I try to npm install inside the VM. Lots of weird errors going on. The /vagrant folder is shared between my Mac and my virtual machine. By extension, this means the node_modules are shared as well.

npm install seems to cause a lot of crazy disk I/O on the shared folder, causing gibberish bytes to be written in some files, causing installation failure.

The solution is to isolate that folder, so that the node_modules folder lives in the VM instead of shared between guest and host.

How to organize CSS in multiple files

2015-10-27T00:00:00+00:00

(This is a response to Things To Avoid When Writing CSS)

You shouldn’t organise CSS by splitting it into separate files any more than you should organise a pane of glass by dropping it on a concrete floor.

An alternative to not splitting your CSS into multiple files, is to learn how to properly organize your CSS in multiple files. When done properly, this brings many advantages:

Your CSS files will be small and easy to navigate. No need to scroll up and down, and your text editor will love you.
Your CSS files will be more modular.
Your CSS selectors won’t cascade or conflict with other selectors.
Your style will be more predictable, even though you can’t predict which file gets included first.

Functions in functions

2015-10-27T00:00:00+00:00

(This is a response to Straight-line code over functions — FunFunFunction #3)

I sometimes prefer to write a single, straight-line functions rather than writing a function that calls many small closely-related functions, especially in imperative code.

But when a function starts to get longer than 15 lines, I start feeling that the code becomes less readable.

One of the pattern I found very useful when writing JavaScript code is to write functions in functions.

Classical composition

2015-10-23T00:00:00+00:00

(This is a sequel to Different definitions of inheritance)

Learn how you can do composition using classical inheritance and fluent ES6 classes. This article shows you that after all, it’s not about which technique is used to structure your application (classes, stamps, prototypes, factories); it’s actually about how one approaches Object-Oriented Analysis and Design.

Different definitions of inheritance

2015-10-22T00:00:00+00:00

(This is a sequel to ES6 class ≠ classical inheritance)

Get to understand ‘inheritance’ and ‘composition’ from both a technical aspect, and from an OOAD aspect, and learn how these words with ambiguous meaning causes a lot of confusion in the development community.

ES6 class ≠ classical inheritance

2015-10-20T00:00:00+00:00

I’ve read several articles by Eric Elliott on JavaScript, such as 10 Interview Questions Every JavaScript Developer Should Know and The Two Pillars of JavaScript.

He emphasizes that classical inheritance is dangerous and should not be used (which I agree), but somehow, the class syntax also gets the blame. In fact, it seems to me that the terms classical inheritance, class, and ES6 class were used interchangeably.

And that is totally wrong.

Some subtle 3D effects for Atom

2015-06-30T00:00:00+00:00

Atom 1.0 has recently been released. It is a very nice text editor that is “hackable to the core.” You can change its look and behavior with CSS (Less) and CoffeeScript.

So I added some subtle 3D effects to the text editor’s tree view and the minimap to make it look more “cool.”

Frontend Web Development in 2015 (Talk)

2015-06-27T00:00:00+00:00

I recently gave a talk at Code Mania 10, organized by Thai Programmer Network.

This talk was about frontend web development in 2015. I briefly gave an overview of new web technologies from the past four years, and gave an example of a web development workflow using ES6, React and Webpack.

“Code, Applied to Life”

2015-05-23T00:00:00+00:00

I created a publication on Medium called “Code, Applied to Life” because I want to inspire people to get more excited about code. I want to show how a small piece of code (or shell script) can make your life easier.

This publication is looking for writers. Let’s tell the world how you use code to solve everyday problems. Please contact me if you want to help contribute to this collection!

How to set up an alarm on Mac OS X without 3rd party applications

2015-05-09T00:00:00+00:00

So I’m sleepy, but want to make sure that I wake up on time.

For numerous times, my phone’s alarm clocks failed me. Some morning I wake up late with a notification, saying ‘missed alarm.’ My iPad, too. It would play the alarm song once before going completely silent.

In this episode, I created a simple alarm clock in shell script that tells iTunes to start playing songs after a certain period of time passes.

Towards a More Maintainable CSS

2015-03-03T00:00:00+00:00

We recently launched the new Oozou website. Having worked on some projects (both mine and others; both inside and outside Oozou) with CSS code that’s not quite easy to maintain, this time I want to find ways to write CSS in a more maintainable and predictable way.

Never Skip a Callback in Your Tests

2015-02-11T00:00:00+00:00

On SlimWiki code, one failing test took me a whole day to track down. The worst thing is that the spec passes when the example is run in isolation, but fails when run in a test suite.

How I built synth.spacet.me

2015-01-27T00:00:00+00:00

I competed in this year’s Static Showdown. This year I created a web-based synthesizer.

This year’s grand sponsor is the Polymer project, with a special prize for Best Use of Web Components, so this event is the best time to experiment with Polymer.

(Update: I won that prize.)

This article describes the process of building this application using Polymer, Gulp, Jade, Sass and ES6.

Automated GitHub Organization Invites, with Ruby, Sinatra, Slim, Octokit and ngrok

2015-01-15T00:00:00+00:00

I’m working as a TA for a university course (Software Specification and Design), and I’m creating a GitHub organization for students to submit assignments.

The problem is getting all students into this organization.

In this episode, I created a simple web site where students can enter their GitHub username and have an invite automatically send to them.

The Sass REPL, a Hidden Gem

2015-01-06T00:00:00+00:00

Happy new year! In this short episode, we’ll look into how we can use the Sass REPL to generate colors for GitHub labels.

How to Copy GitHub Labels from One Project to Another

2015-01-06T00:00:00+00:00

My GitHub project consists of several sub-projects. To make the labels consistent, we can use some tool to copy the label from one project to another. In this instance, I want to copy the labels from bemusic/bemuse to bemusic/bms-js.

Let’s Sing Christmas Carols in Harmony!

2014-12-24T00:00:00+00:00

Just in time for Christmas, the spacet.me Labs is proud to present a tool to help you learn to sing in four-part harmony. A HTML5, ES6, and Web Audio experiment.

Working with Multiple Values in a Promise Chain using Stateful Context

2014-11-21T00:00:00+00:00

When we do asynchronous operations involving multiple values or objects using promises, sometimes our code could become messy. This article proposes an approach that could make the code more clean.

Changing the System Font on Yosemite

2014-10-17T00:00:00+00:00

Mac OS X comes with a new system font, Helvetica Neue. Maybe it’s just me, but for such a new and modern interface, Helvetica Neue feels… ancient, and Helvetica is already everywhere…

A more futuristic font such as Avenir Next may be a better choice.

Declaring a CSS Animation @keyframes Directly on an Element using Sass

2014-10-13T00:00:00+00:00

Usually, when I write CSS (or Sass), making an element animate involves creating an @keyframe declaration and giving it a name, and referencing it in the CSS ruleset by name.

More often than not, that particular animation would have been used only once in your whole CSS file. This article introduces a mixin to help.

Please Remind Me Every 15 Minutes! (quick 'n dirty in the irb)

2014-08-09T00:00:00+00:00

At where I stay at NAIST, I use the room’s television in place of a speaker. But because there is no video signal, the TV keeps turning off by itself after 15 minutes.

So I have to set a reminder every 15 minutes, and I quickly did this in the irb.

Ruby Everywhere: Ruby on Kindle Paperwhite

2014-07-24T00:00:00+00:00

In this episode, I’ll get Ruby 2.1 to run on my Kindle Paperwhite. This involves jailbreaking my Kindle.

One-Line Countdown Timer

2014-07-14T00:00:00+00:00

I don’t have any countdown timer app installed, but I have Ruby…

Copying Table from Numbers into a Wiki

2014-07-11T00:00:00+00:00

I want to convert a table from Numbers into a wiki language, so I wrote some quick-and-dirty Ruby code in the IRB to help me with this.

Growling the Current Song in a Mix, Using AppleScript, Osaka, iTunes, and Growl

2014-07-10T00:00:00+00:00

Every week, I listen to Uplifting Only on SoundCloud. It is a two-hour mix of Orchestral Uplifting and Uplifting Trance music.

Recently, I have been able to get this SoundCloud feed into iTunes. I want to create a script that notifies me when the song changes, so I don’t have to manually check for the playing song in iTunes.

Generating Text Title Images, Using a Ruby script and PhantomJS

2014-07-08T00:00:00+00:00

In my last article, I grouped my Facebook photos during my internship by week: each week has its own photo album.

Since I might visit several places in a single week, I want to put a “title image” to separate between the photos of different places or different date on the same week.

Batch Changing Facebook Album Descriptions

2014-06-22T00:00:00+00:00

I am doing an internship at Nara Institute of Science and Technology for 2 months. During my time here, I traveled a lot and took many photos, and uploaded them to Facebook.

The problem is that when there are so many photos in a single album, performance degrades, so I want to split them into many albums, while interlinking them together.

One approach to do this is by putting links in the description of each album, linking to the other albums.

Who Goes First?

2014-06-13T00:00:00+00:00

I was at a software development training camp when, at the day of presentation, I was asked to randomly choose which group to present first…

Populate .gitignore Automatically with git-ignore

2014-05-27T00:00:00+00:00

Tired of having to create your .gitignore manually? Like, having to add .DS_Store, Thumbs.db, *.swp, *.swo, *.swn, node_modules?

I stumbled upon this project called git-ignore.

Quick Note: Setting up NAT service on Mac OS X

2014-05-19T00:00:00+00:00

I wanted to share my Mac’s Internet connection from en2 (Bluetooth PAN) to en1 (Wi-Fi), but didn’t want to run a full-fledged Internet Sharing (DHCP, Wireless Access Point, …).

Thanks to this post, here is the relevant part:

# Enable IP forwarding:
sudo sysctl -w net.inet.ip.forwarding=1

# Kill natd, just in case:
sudo killall -9 natd
sudo killall -9 natd

# Some ipfw rules:
sudo /sbin/ipfw add 100 divert natd ip from any to any via en2

# ...and start the NAT server:
sudo /usr/sbin/natd -interface en2 -use_sockets -same_ports -unregistered_only -dynamic -clamp_mss -enable_natportmap -natportmap_interface en1

Now, the client should be able to set the Default Gateway to Mac’s IP address and use the Internet through it!

Quick and Dirty Real-time Collaborative Coding Development Environment with code.stypi.com

2014-05-07T00:00:00+00:00

I have to work on a very small C++ project with my friends, so I want to edit my code like Google Docs.

code.stypi.com provides a real-time collaborative code editor, like Etherpad or Google Docs, but it only supports editing a single file. So some quick and dirty script must be used to enable quick development and testing cycle.

The Nature of the Project

Of course, this approach does not apply in all projects, so here’s some background on the project.

It’s only a small group assignment. We don’t need permanent storage; just a way to collaborate.
It consists of only a few C++ source files, no images or binary files.
I develop on Linux while my friends use Windows.
It’s a group assignment for the real-time systems engineering course. We have to create simulation using OMNeT++.

Let’s consider the alternatives first, and why we did not use it

Dropbox / Google Drive

No real-time editing. Must save the file in order for it to synchronize.
When we edit the same file, Dropbox just marks it as conflict and adds conflicted versions to the Dropbox.
Binaries (for different platforms) gets added to the Dropbox and synchronized all over. No way to ignore certain files.

GitHub

Not real-time.
Too slow cycle: have to save, commit, push, pull, merge.

Nitrous.io / Cloud9 / Koding

Creating a full-fledged project with a virtual machine and getting my friends to create an account on sites like Nitrous.io, Cloud9 or Koding just for a quick bootstrapping of a project seems to be an overkill.
I want something more lightweight.
Cloud9’s collaboration feature is too laggy.
Koding is too buggy (as of writing).

Etherpad

No syntax highlighting.

(If you know of a better solution, please leave a comment. Thanks!)

How about Stypi?

code.stypi.com is a real-time collaboration platform.

It lets you collaborate on writing code. It is usually used for online interviewing.
It supports syntax highlighting and has a configurable tab size.
You don’t have to sign in; you can work anonymously.
It also allows you to access the raw contents. So you can quickly download the code and build them with a quick and dirty script.

The Workflow

Collaborate the code on Stypi.
Run a script to download the code from Stypi, builds, and test it.
Repeat.

Seems simple, right?

Overcoming Single File Limitation

Since Stypi does not have tabs or support multiple files, we decided to work on a single page, and then let the build script split it into multiple files. The convention used is this:

/*FILE file1.h*/
(contents of file1.h)

/*FILE file1.cc*/
(contents of file1.cc)

/*FILE main.cc*/
#include "file1.h"
int main(int argc, char **argv) {
  stuff();
  return 0;
}

Getting the Raw Link

If your Stypi is here:

https://code.stypi.com/lg1ervbj

You can access the raw contents using this URL:

https://code.stypi.com/raw/lg1ervbj

The Download Script

First, I want a script that fetches the code from Stypi and spit out to multiple files.

So I put this into Stypi:

/*FILE download.rb*/
require 'open-uri'

puts "Downloading File:"

code = open('https://code.stypi.com/raw/lg1ervbj').read
code.split(/\/\*FILE ([a-z0-9]+\.[a-z0-9]+)\*\//i).drop(1).each_slice(2) do |file_name, contents|
  puts " ==> #{file_name}"
  File.write(file_name, contents)
end

It simply fetches the code, and uses a regular expression to split it into many files.

Here’s how it now looks like:

This Stypi page contains the code for many files. Each file is identified by a special comment.

Bootstrapping

Next thing, I have to tell my friends to download and install Ruby, MingW and MSYS. Then, I tell them to manually copy the code for download.rb into a new file in a new directory, and then run ruby download.rb.

If all goes well, all files should be downloaded:

After running ruby download.rb, all files (including download.rb itself) have been download.

Building

Since the download script is finished, we can now make a build script!

/*FILE build.sh*/
set -e
g++ file1.cc main.cc

/*FILE test.sh*/
set -e
if [ -e a.out ]; then
  ./a.out
else
  ./a.exe
fi

/*FILE run.sh*/
set -e
ruby download.rb
bash build.sh
bash test.sh

Three files:

build.sh compiles the source code.
test.sh runs the compiled code.
run.sh re-downloads the code, compiles, and runs.

I then told my friends to run ruby download.sh again. It now downloads the required build script.

They can now type bash run.sh to re-download the code, compile, and run it.

Enjoy the Collaboration

Now we can enjoy collaborating on this small project. When we make a change, we can just type bash run.sh to test it.

Creating Music with Algorithms and Mathematics

2014-05-05T00:00:00+00:00

Just playing with http://studio.substack.net/, a Browser Synths with Code Studio. It is a website where you enter JavaScript code and it generates sound from it.

Here’s what I came up with.

Do You Hear the People Sing? (Uplifting Mix)

Inspired by another code, DUHearThePeopleSing, which comes from the song Do You Heart the People Sing from Les Miserables I created a version with sawtooth synth arpeggios and beats.

Do You Hear the People Sing (Uplifting Mix, v1.3)

I created this song in a declarative, functional approach. Each synthesizer is simply a function (such as sine, sawtooth) that takes the time and returns the sample. These synthesizers are filtered and mixed through a higher-order function. Finally, I ended up with a function that represents the music itself.

Since writing a lot of function() {} things are so cumbersome, I decided to develop it using CoffeeScript instead. Here is the source code in CoffeeScript.

Interactive Version

I added some hack to it to allow mouse position to be captured. I used the mouse position to control the highpass/lowpass filter and some stuttering beat effect.

Do You Hear the People Sing (Uplifting Mix, v1.31)
(Interactive Version) (move your mouse around!)

Rising Arp

A fat sawtooth arpeggio that keeps rising in frequency. After one minute, it somehow turned into some kind of non-melodic sound.

Rising Arp

Infinitely Descending Chord Progression

This music features a chord progression that keeps descending.

It goes like this: C/E, Cm/Eb, A#/D, A#m/Db, G#/C, G#m/B, …

However, the chord progression seems to keep descending without ending. This is possible by an auditory illusion known as Shepard tone.

Infinitely Descending Chord Progression (v1.1)

There are a lot of other nice sound, which you can find in /-/recent.

One Liner: Brick

2014-02-01T00:00:00+00:00

A sophomore student asked me if I can write a solution to a programming problem “Brick” in one line. So I tried it and decided to write a walkthrough.

The Problem

This problem comes from Programming.in.th. Given the size of the board (rows and column), the board, and number of bricks to drop on each column, print the resulting board.

Example Input

8 5
.....
.....
.OO..
.....
.O...
...O.
.....
.....
1 1 3 2 0 

Example Output

..#..
.##..
.OO..
...#.
.O.#.
...O.
.....
#....

The Solution

Within 7 minutes, I came up with this solution in Ruby:

puts -> r, c { -> b, q { b.zip(q).map { |col, q| -> i { (i - 1).downto([0, i - q].max) { |x| col[x] = '#' } && col }[col.index('O') || r] } }[Array.new(r).map { gets.strip.chars }.transpose, gets.split.map(&:to_i)] }[*gets.split.map(&:to_i)].transpose.map(&:join)

The Walkthrough

Let’s walk through the code and how I can come up with this solution.

Overview

This problem can be broken into many smaller subproblems.

Getting the size of the board

The first line of input is the number of rows and column. We can get it in one go:

p gets.split.map(&:to_i)
#=> [8, 5]

We can put them into a variable and use them later by using Ruby’s lambdas.

p -> r, c { ... }[*gets.split.map(&:to_i)]

Reading the board and the number of bricks

Given r and c, we can read the board using:

p -> r, c {
  Array.new(r).map { gets.strip.chars }.transpose
}[*gets.split.map(&:to_i)]
#=> [[".", ".", ".", ".", ".", ".", ".", "."],
#    [".", ".", "O", ".", "O", ".", ".", "."],
#    [".", ".", "O", ".", ".", ".", ".", "."],
#    [".", ".", ".", ".", ".", "O", ".", "."],
#    [".", ".", ".", ".", ".", ".", ".", "."]]

We transpose the board to make it easier to process.

Then we can read the number of bricks to drop for each column using:

p -> r, c { Array.new(r).map { gets.strip.chars }.transpose
  gets.split.map(&:to_i)
}[*gets.split.map(&:to_i)]
#=> [1, 1, 3, 2, 0]

Put them in variables!

p -> r, c { -> b, q {
  ...
}[Array.new(r).map { gets.strip.chars }.transpose, gets.split.map(&:to_i)] }[*gets.split.map(&:to_i)]

We can zip the column and question like this:

p -> r, c { -> b, q {
  b.zip(q)
}[Array.new(r).map { gets.strip.chars }.transpose, gets.split.map(&:to_i)] }[*gets.split.map(&:to_i)]
#=> [[[".", ".", ".", ".", ".", ".", ".", "."], 1],
#    [[".", ".", "O", ".", "O", ".", ".", "."], 1],
#    [[".", ".", "O", ".", ".", ".", ".", "."], 3],
#    [[".", ".", ".", ".", ".", "O", ".", "."], 2],
#    [[".", ".", ".", ".", ".", ".", ".", "."], 0]]

We get an array where each element represents a problem. The first sub-element is the column (we name it col), and the second sub-element the number of blocks to drop on that column (we name it q).

Dropping blocks

Now, we can solve the problem for each column separately. Consider the fourth column:

col = [".", ".", ".", ".", ".", "O", ".", "."]
r = 8
q = 2

First, we have to calculate where to drop blocks…

If there is an “O” in that column, we put blocks above it.
Otherwise, we put blocks on the bottom.

The above can be summarized by this expression:

i = col.index('O') || r
#=> 5  --------------------------+
#                                ↓
#     [".", ".", ".", ".", ".", "O", ".", "."]

Now, if we want to drop q blocks above the ith index, we can use this code:

(i - 1).downto([0, i - q].max) { |x| col[x] = '#' }

col #=> [".", ".", ".", "#", "#", "O", ".", "."]

Putting them together, we get:

-> i { (i - 1).downto([0, i - q].max) { |x| col[x] = '#' } && col }[col.index('O') || r]

Putting all of them together, we get:

p -> r, c { -> b, q { b.zip(q)
  .map { |col, q| -> i { (i - 1).downto([0, i - q].max) { |x| col[x] = '#' } && col }[col.index('O') || r] }
}[Array.new(r).map { gets.strip.chars }.transpose, gets.split.map(&:to_i)] }[*gets.split.map(&:to_i)]
#=> [[".", ".", ".", ".", ".", ".", ".", "#"],
#    [".", "#", "O", ".", "O", ".", ".", "."],
#    ["#", "#", "O", ".", ".", ".", ".", "."],
#    [".", ".", ".", "#", "#", "O", ".", "."],
#    [".", ".", ".", ".", ".", ".", ".", "."]]

Formatting the output

Now that we have the answer, we just transpose it back, and print them!

puts -> r, c { -> b, q { b.zip(q).map { |col, q| -> i { (i - 1).downto([0, i - q].max) { |x| col[x] = '#' } && col }[col.index('O') || r] } }[Array.new(r).map { gets.strip.chars }.transpose, gets.split.map(&:to_i)] }[*gets.split.map(&:to_i)]
  .transpose.map(&:join)
# STDOUT:
#    ..#..
#    .##..
#    .OO..
#    ...#.
#    .O.#.
#    ...O.
#    .....
#    #....

please — repeat last command as root.

2014-01-03T00:00:00+00:00

Today I’d like to introduce you to this recipe you can put in your .bashrc:

alias please='sudo bash -c "$(history -p !!)"'

You probably have had these moments when you are trying to run a command only to find out that you are not root:

▹ echo 127.0.0.1 dev.my.test.app.com >> /etc/hosts
-bash: /etc/hosts: Permission denied

With this alias, you can just re-run the command using

▹ please

and it will re-run the command as root. Note that it also works with redirections!

Handles Arguments Correctly

To see if this recipe works well with complex commands, consider this example:

▹ ruby -e 'p [ARGV, `whoami`.strip]' a 'b c' "d e" f `whoami`
[["a", "b c", "d e", "f", "dttvb"], "dttvb"]

▹ please
[["a", "b c", "d e", "f", "root"], "root"]

As you can see, the whole command is run as if it’s being typed again, but in the root shell.

pushnot — A Personal Push Notification Server

2013-11-29T00:00:00+00:00

pushnot is an open source push notification server written in Node.js. You can use it to push notifications to your Mac.

When I push my code, the post-receive hook deploys it, and pushes the notification back to my screen.

Background

When I push code to my GitHub repository, GitHub triggers a Post-Receive WebHook that I set up to compile the code and deploy it.

I want to be notified when the code is successfully deployed.

Apple already has Safari Push Notifications, but to use it, I need to be in their Mac Developer or iOS Developer program.

So I decided to roll my own.

Features

Send push notifications from your shell scripts, PHP scripts, or whatever.
Notifications are encrypted using public key.

Overview

The client sends a notification to the server. The server pushes it to the subscriber.
The subscriber displays the notification on screen.

Pushnot consists of three major components:

The server that clients can send a notification to, and subscribers can subscribe to these notifications.
The client is any application that wants to send a notification to the user.
The subscriber waits for the server to push the notification and notifys the user.

Prerequisites

First, you need to have a private server to run your personal notification server. I’m using DigitalOcean’s VPS which costs only $5 a month. Installing Node.js on it is straightforward.

On both your personal computer and the server, install:

Node.js
zeromq
- On Ubuntu, apt-get install libzmq-dev should do it.
- On Mac OS X, perhaps using Homebrew.

On your personal computer, install and run:

Public and Private Key Generation

All notifications are encrypted using a public key, and only the user (with the private key) can see that notification.

pushnot requires an RSA key of at least 2048 bit:

openssl genrsa -out ~/.pushnot.pem 2048
openssl rsa -in ~/.pushnot.pem -pubout > ~/.pushnot.pub

Configuration

You need a configuration file to locate the server.

cat > ~/.pushnot.conf.json
{ "server": "your.vps.host", "http": 60001, "zmq": 60002, "key": "some random string" }

server: This is the IP address or host name of your server.
http: The port of the HTTP server. You can use 60001.
zmq: The port of the ZeroMQ server. You can use 60002.
key: Enter some random string here, which is a shared key to communicate between the client and server.

Server Installation

On server, install pm2.

npm install -g pm2 --unsafe-perm

Copy ~/.pushnot.conf.json and ~/.pushnot.pub to your server.

Clone the project and install dependencies:

git clone https://github.com/dtinth/pushnot.git
cd pushnot
npm install

Link so that you can use the command pushnot anywhere.

npm link

Start the server:

pm2 start pushnot-server.js

Client Installation

Also clone the project, and install dependencies. You can link so that you can send push notifications from your computer too.

git clone https://github.com/dtinth/pushnot.git
cd pushnot
npm install
npm link

Make sure both Zephyros and Growl is running, start the subscriber!

node pushnot-subscriber.js

Let’s send a push notification! From the server, run:

pushnot hello Hello World

You should now see the notification on your computer.

Here comes the notification.

Turn off Growl Display

You should probably see that the notification is displayed both by Zephyros and Growl.

The reason for that is because I like Zephyros’ alert boxes better (you can click through it), but I also want Growl to put the notification in “Growl Notification Rollup” when I am idle.

But displaying two notifications at once seems like a silly idea. That’s why I tell Growl not to display a notification by setting the display style to “No Default Display”

Set the Application's Display Style for pushnot to "No Default Display."

Zephyros Configuration

You’ll see that you need to keep this script running to receive push notifications, but you can configure Zephyros to keep it running!

Go to Zephyros preferences, and set the script to pushnot subscriber:

Depending on how you installed node, your command may vary. Here’s mine:

/Users/dttvb/.nvm/v0.10.5/bin/node /Users/dttvb/Projects/pushnot/pushnot-subscriber.js

To determine which command you want to use, make sure you’re in pushnot folder:

echo `which node` `pwd`/pushnot-subscriber.js

Use pushnot in Your Hooks

Now you are free to use pushnot in your post-commit hooks. For example, if you just want to notify when someone pushes a commit to your repository, you can use this hook (written in PHP):

<?php

function truncate($text) {
  $text = trim(preg_replace('~\n.*$~s', '', $text));
  return strlen($text) > 80 ? substr($text, 0, 80) . '...' : $text;
}

$payload = json_decode($_POST['payload']);

$app = $payload->repository->owner->name . ' / ' . $payload->repository->name;
$messages = array('New commit:');

$commits = array_slice(array_reverse($payload->commits), 0, 3);

foreach ($commits as $commit) {
  $commit_message = truncate($commit->message);
  $messages[] = '+ (' . $commit->author->name . ') ' . $commit_message;
}

$message = implode("\n", $messages);
system('pushnot ' . escapeshellarg($app) . ' ' . escapeshellarg($message));

A Wrapper Script

Since I install node inside nvm. It can’t be run by nobody (web server’s PHP process). To make it work I need to use some dirty hack:

/usr/bin/pushnot

#!/bin/bash
export PATH=/root/.nvm/v0.10.22/bin:$PATH
export HOME=/root
echo "sending noti"
/root/.nvm/v0.10.22/bin/pushnot "$@" 2>&1

And make sure to give appropriate permissions to /root and /root/.nvm. I know it’s dirty, but it works for me.

The "itself" Recipe

2013-11-22T00:00:00+00:00

I’m tired of having to write function(x) { return x.something } again and again and again and again and again, and I’m working on a very small standalone script, so using it.js seems to be an overkill for me.

So I came up with a simple recipe:

function itself(code) {
  return new Function('its', 'return its' + code)
}

var its = itself

Let’s see some use cases…

;['hello\n', 'world\n', 'test\n'].map(itself('.trim()'))
// => [ 'hello', 'world', 'test' ]

An npm module is available!

npm install itself

That version also has function caching, so it should be extremely fast.

Monkey-Patching, Overriding, and Decorating Methods in JavaScript

2013-11-19T00:00:00+00:00

While working on a CasperJS test suite, I wanted to make it generate another file after the test result file was generated, so I had to monkey-patch their test framework (see the section after this article for why I had to do it).

Monkey-patching is a way to override or extend the behaviour of a method without changing its original source code. This article shows you how you can do it in a beautiful way in JavaScript.

Original Code

Let’s take this class as an example. The Tester class has a method saveResults that saves the test result to a file specified by filepath.

function Tester() {
}

Tester.prototype.saveResults = function(filepath) {
  console.log('Save test result to ' + filepath)
}

Tester.prototype.run = function() {
  console.log('Running tests...')
  this.saveResults('test.xml')
}

And it’d be used like this…

var test = new Tester()
test.run()

Let’s say that the Tester class is written by a third-party, so I don’t want to modify its source code.

However, I wanted my Tester to also generate and save a test plan file after the test result is saved. This is where monkey-patching comes in.

Stupid Monkey Patching

This is the simplest way to do monkey patching. Just copy the source code and modify it to your needs, replacing the original function.

var test = new Tester()

test.saveResults = function(filepath) {
  console.log('Save test result to ' + filepath)        // old code
  var planpath = filepath.replace('.xml', '_plan.xml')  // new code
  console.log('Save test plan to ' + planpath)          // new code
}

test.run()

It works but you have to duplicate some code from the source code.

There has to be a better way…

Store a Reference to the Original Function

We can store a reference to the original function, and call it in our new function.

var test = new Tester()

var originalSaveResults = test.saveResults
test.saveResults = function(filepath) {
  originalSaveResults.apply(this, arguments)
  var planpath = filepath.replace('.xml', '_plan.xml')
  console.log('Save test plan to ' + planpath)
}

test.run()

But how could you be sure that the function that calls saveResults doesn’t use its return value? We can save the return value from the original function and return it to preserve its return value, whatever it might be:

var test = new Tester()

var originalSaveResults = test.saveResults
test.saveResults = function(filepath) {
  var returnValue = originalSaveResults.apply(this, arguments)
  var planpath = filepath.replace('.xml', '_plan.xml')
  console.log('Save test plan to ' + planpath)
  return returnValue
}

test.run()

Having to do this every time we monkey-patch a function seems to me like a lot of work.

There has to be a better way…

Meet the `override` function

When we override a method, we

save the original function in a variable, and
replace that method with the function we desire to use.

So I factored it out. Here’s our override function:

function override(object, methodName, callback) {
  object[methodName] = callback(object[methodName])
}

What it does is this: it sends the original function into the callback function, and whatever that callback function returns, we replace the object’s method with it.

Here’s how we can use it:

var test = new Tester()

override(test, 'saveResults', function(original) {
  return function(filepath) {
    var returnValue = original.apply(this, arguments)
    var planpath = filepath.replace('.xml', '_plan.xml')
    console.log('Save test plan to ' + planpath)
    return returnValue
  }
})

test.run()

Now it’s very clear that we are overriding a function, and no more do we have save the original function in a variable—it gets passed into the callback function. Also, instead of having to write the name of the method to monkey-patch twice, we only have to write it once.

However, having to call the original function, and save its return value, and return it myself does not look ideal…

There has to be a better way…

Meet the `after` decorator

You see the pattern: in the function we want to replace, we

call the original function,
save its return value,
do our work, and
return the saved return value.

We can factor that out too. Meet the after function:

function after(extraBehavior) {
  return function(original) {
    return function() {
      var returnValue = original.apply(this, arguments)
      extraBehavior.apply(this, arguments)
      return returnValue
    }
  }
}

It’s a decorator. It takes a function extraBehavior, and return a function suitable for passing to override—a function that takes the original function and return the altered behavior. We can use it like this.

override(test, 'saveResults', after(function(filepath) {
  var planpath = filepath.replace('.xml', '_plan.xml')
  console.log('Save test plan to ' + planpath)
}))

Meet the Other Decorators

Here are some other decorators, just to give you some idea how far you can go with it.

`before`

function before(extraBehavior) {
  return function(original) {
    return function() {
      extraBehavior.apply(this, arguments)
      return original.apply(this, arguments)
    }
  }
}

`compose`

function compose(extraBehavior) {
  return function(original) {
    return function() {
      return extraBehavior.call(this, original.apply(this, arguments))
    }
  }
}

Let’s say you want to make getName always return the name uppercased:

override(person, 'getName', compose(function(name) {
  return name.toUpperCase()
}))

`benchmark`

function benchmark(original) {
  return function() {
    var startTime = new Date().getTime()
    var returnValue = original.apply(this, arguments)
    var finishTime = new Date().getTime()
    console.log('Took', finishTime - startTime, 'ms.')
    return returnValue
  }
}

`memoize`

// XXX: Work only with functions with 1 argument.
function memoize(original) {
  var memo = { }
  return function(x) {
    if (Object.prototype.hasOwnProperty.call(memo, x)) return memo[x]
    memo[x] = original.call(this, x)
    return memo[x]
  }
}

Well, maybe we might want to memoize a recursive function.

var fibonacci = {
  fib: function(x) {
    return x <= 1 ? x : this.fib(x - 1) + this.fib(x - 2)
  }
}
override(fibonacci, 'fib', memoize)
console.log(fibonacci.fib(42)) // ~6111ms without memoize,
                               //     0ms with memoize.

Using These Decorators on Their Own

Of course, it’s possible to use these decorators on their own. Here’s how I measured the speed of the above benchmark of memoize decorator:

benchmark(fibonacci.fib.bind(fibonacci))(42)
override(fibonacci, 'fib', memoize)
benchmark(fibonacci.fib.bind(fibonacci))(42)

Afterthoughts

Monkey-patching is extremely useful when you want to modify the behavior of some methods, but you don’t want to alter its source code. For example, when attaching some extra behavior or when working around an issue in a third-party library.

However, I don’t recommend using it in your own code because when you read the original function, it will be hard to predict if some extra behavior will run because it’s been monkey-patched somewhere else in your application or not.

Here’s a case study:

My Twitter client, thaiWitter, has a lot of base functionalities hard-coded. Additional functionalities are added by monkey-patching these classes on top of one another.

Soon the code became a big mess. It’s hard to test and debug.

The lessons I learned is this: it’s better to make an object extensible explicitly (using hooks, events, or whatever) than implicitly (monkey patches on top of monkey patches).

Why I had to do monkey-patch CasperJS

Capturing Screenshot when Test Failed

CasperJS’s tester module fires the fail event when an assertion failure occurs. We could have used that instead.

However, when we tell CasperJS to abort the test suite on first failure (don’t keep going on) with the --fail-fast flag turned on, CasperJS doesn’t call the registered event handler!

So we had to work around by monkey-patching the function that gets called when an error or an assertion failure occurs:

override(test.currentSuite, 'addFailure', after(handleFailure))
override(test.currentSuite, 'addError',   after(handleFailure))

Generating Test Plans

Furthermore, we want to be able to generate a test plan document in addition to the test result, and that’s just what we did in the article:

override(test, 'saveResults', after(savePlan))

How I sent my friend to sleep

2013-10-10T00:00:00+00:00

Or, how I explained the expected value of a Geometric Random Variable to a friend.

With Angular.js I Created a Teaching Material in 15 minutes

2013-09-29T00:00:00+00:00

Just as iron sharpens iron, friends sharpen the minds of each other. —Proverbs 27:17 (CEV)

I like to teach my friends about coding stuff, usually about the web, JavaScript, Ruby, and sometimes other things. When I do, I like to find new ways to help people see what actually happened. Anyway, this post isn’t about me; it’s about Angular.js. I used it to create an array visualizer to help visualize how sorting algorithms work, within 15 minutes.

Cool things you can do with it.js

2013-07-06T00:00:00+00:00

I just released a new small JavaScript library called it.js.

If you’ve ever used any of these: array.map, array.filter, _.sortBy, _.all, or _.any, you’ll know that these “higher-order” functions wants you to to pass in some kind of function. Usually this function just takes an object, looks up a property or call a method, and return the result.

This library, it.js, helps you create that function, so you can write:

var ok = _.every(fields, It.send('validate'))

Instead of

var ok = _.every(fields, function(field) { return field.validate() })

This library is a byproduct of me building another AngularJS app, the new version of Friendlist, friend list manager for Facebook.

This article will show you what you can do with it.js. For more detailed documentation, please see the project page on GitHub!.

it.js generates functions

Generating functions is a main duty of it.js.

Let’s see some analogies. The first line is how you can do it without it.js, and the second line shows how you can use it.js instead of writing these functions by hand.

(function(x) { return x.length })
 => It.get('length')

(function(x) { return x.charCodeAt(0) })
 => It.send('charCodeAt', 0)

(function(x) { return x * 2 })
 => It['*'](2)

(function(x) { return x % 2 === 0 })
 => It['%'](2)['==='](0)

(function(x) { return x.age >= 13 })
 => It.get('age')['>='](13)

(function(a) { return a.map(function(x) { return x.name }) })
 => It.pluck('name')

(function(a) { return a.map(function(x) { return x.toUpperCase() }) })
 => It.splat(It.send('toUpperCase'))

(function(o) { return o && o[0] && o[0].user && o[0].user.screen_name && userLink(o[0].user.screen_name) })
 => It.maybe('0').maybe('user').maybe('screen_name').maybe(userLink)

Here are the things

Here we have an array of “things”.

var things = [
  { name: 'Apple',          type: 'fruit' },
  { name: 'CoffeeScript',   type: 'language' },
  { name: 'Cat',            type: 'animal' },
  { name: 'Dog',            type: 'animal' },
  { name: 'Guava',          type: 'fruit' },
  { name: 'JavaScript',     type: 'language' },
  { name: 'Mountain Lion',  type: 'animal' },
  { name: 'Pineapple',      type: 'fruit' },
  { name: 'Ruby',           type: 'language' } ]

Let’s see what we can do with it…

The first line shows how you can do it without using it.js.
Subsequent lines shows how it.js can help simplify your code.

Get all the names!

things.map(function(thing) { return thing.name })

things.map(It.get('name'))

How about having them lowercased?

things.map(function(thing) { return thing.name.toLowerCase() })

things.map(It.get('name').send('toLowerCase'))

What if we only want the fruits?

things.filter(function(thing) { return thing.type == 'fruit' })

things.filter(It.get('type')['==']('fruit'))

And if we only want the name of these fruits?

things.filter(function(thing) { return thing.type == 'fruit' })
      .map(function(thing) { return thing.name })

things.filter(It.get('type')['==']('fruit')).map(It.get('name'))

Here are the strings

var strings = [
  'Piece', 'of', 'my', 'life',
  'I', 'still', 'to', 'still',
  'Wall', 'is', 'in', 'my', 'heart' ]

What if we want to get a case-insensitive sorted copy? Using Lo-Dash or underscore:

_.sortBy(strings, function(s) { return s.toLowerCase() })

_.sortBy(strings, It.send('toLowerCase'))

Conclusion

As you can see, where we could create a simple function manually, we can use it.js to help.

As a note about performance, it takes a lot of operation to generate a function, so you should not generate these functions inside a loop.

You can, and should, generate these functions somewhere else. They can be used later.

For example, you could write this:

var caseInsensitive = It.send('toLowerCase')

And use them like this:

_.sortBy(strings, caseInsensitive)

Vim: Running Custom Shell Commands Quickly

2013-06-07T00:00:00+00:00

When I use Vim, sometimes when I make an edit, I want to test if it works by running some command. (Something like gcc % && ./a.out).

So I made a simple Vim script to help:

To use it, first, press <Leader>s. It will ask for a command, in which you type the command you wish to run.

Then, when you want to run the configured command, just press <Leader>r.

Building an AngularJS App that Synchronizes Across Clients in Realtime with Synchroscope

2013-06-07T00:00:00+00:00

This article tells story about my first AngularJS web app, and development of my first AngularJS library called synchroscope that lets multiple web clients to synchronize AngularJS scope variables in realtime. If you just want to see the library, please see the GitHub project.

My Computer Engineering department has an activity to welcome first-year students every year, the Freshy Camp. I work on the registration part, so I made a web app to make the registration process quicker and more accurate.

I think I’d go with AngularJS because I’ve never used it, and I’m wondering why everyone loves it.

The Freshy Camp Registration App

Let’s first see how the web application I made looked like… There are two interfaces, one facing the freshmen on an iPad, and another one facing me on my laptop.

The welcome screen: freshmen just touch the screen!

Then, the freshmen writes part of his/her real name.
The handwriting appears on my screen, and I type his/her name accordingly.
The app searches for matching names and displays it in a table, making it look like the app magically recognizes their handwriting, where actually, I was the recognizer.
The freshmen chooses the correct record and proceed to the next step.

The freshmen writes in his/her nickname. I see it written, and type accordingly.

The freshmen enters his/her mobile phone number.

The app informs the freshmen's assigned group, called "mung."
To this day I still don't know why they use the word "mung."

Thanks to AngularJS’ design, the model (the $scope data) and the controller can be totally separated from the view. So I can write different views for same model.

The model (scope) contains:

The current step (welcome, entering name, phone number, or finished)
The handwriting that the freshmen is writing
A flag whether the handwriting pad is visible
Selected student ID, name, phone number, and assigned group, and more.

So now, when it comes to view, I just display stuff based on the model. On the iPad, showing different components for different steps is as easy as:

<div ng-show="step==1" ...

On my desktop page, it’s something like:

<li ng-class="{active: step==1}" ...

But…

Well, but the iPad’s view and desktop’s view aren’t on the same page. In fact, they’re on entirely different devices! So how can they access the same model? Well, they can’t!

Therefore, it’s clear that there must be something that syncs the models between two devices.

And that’s where my new library, synchroscope kicks in.
Actually, this library is extracted from this Freshy Camp webapp.

How?

Using synchroscope is easy. You just include several JS files, declare a dependency, and then add one line of JavaScript to your controller:

$ync($scope, ['list', 'of', 'properties', 'to', 'keep', 'in', 'sync'], 'roomName')

After this, synchroscope will keep these properties in your $scope in sync with all clients in the same server and room.

With the rooms feature, I can have multiple iPad+Computer+Human to register multiple people at the same time.

The Server

Synchroscope uses Socket.IO for realtime communication. It also requires only one line of code to add Synchroscope server to your Node.js server. It’s also possible to run a server on its own. Just see the project page for instructions.

Limitations

Because it’s designed to be use in a small registration place, the server kept all data in memory, and they won’t survive restarts. It also doesn’t scale beyond one process.

Although this library doesn’t cover all realtime collaborative app use cases, I think that being able to synchronize data across clients using very few lines of code—both on the client and server—makes it very easy to get started.

Conclusion

This is my first AngularJS web project and library. After I tried AngularJS, I completely fell in love with it.

I now see no reasons not to use AngularJS anymore, even for very small projects, because it’s so simple. Just include angular.min.js and add ng-app to your <html>, your HTML becomes much more powerful with data binding and directives!

Application

So after I wrote synchroscope, I recalled having written a similar project that synchronizes data between iPad and computer, called shoutpraises. I use it to display onscreen lyrics during worship at church.

So I went ahead and turned it into my second AngularJS webapp, and that took me less than an hour. The codebase is much more cleaner and I don’t have to worry about synchronizing between the clients anymore.

ttycast v0.2 Released

2013-02-02T00:00:00+00:00

ttycast v0.2.0 is just released. This new version is easier to use, includes server-side terminal emulation (instead of client-side), configurable terminal size, and recording support to .tty file.

The terminal window is moved to the center of browser window, and is accompanied with a little glow around the border.

Server-side terminal emulation

In old version (v0.0.x) raw terminal data is sent directly to each client, and each client runs its own terminal emulator.

In this version the terminal emulation is done in server-side. The rendered content is then sent to the browser. This ensures that all viewers see the same thing. The client side code to download is a lot smaller too.

Easier to use

You don’t have to type long commands (mkfifo /tmp/......) to start ttycast anymore.

In this new version, just type ttyreccast in one terminal and ttyrec /tmp/ttycast in another.

Recording

The new ttyreccast command also support recording to .tty file as you broadcast.

You may play the recorded file normally using ttyplay.

Adjustable Terminal Size

This version of ttycast doesn’t require you to use 80x25 terminal anymore.

You can use any terminal size you want.

You can read more about ttycast and how to install it at GitHub Project. Enjoy!

Node.js: When to use a StringDecoder?

2013-02-02T00:00:00+00:00

In Node.js, Buffers has toString() that can convert a buffer into a String with a specified encoding, and StringDecoder does the same. So, when to use StringDecoder?

The docs says that the StringDecoder is better at UTF-8. Let’s see some practical use. Here I have few buffers:

var b1 = new Buffer([0xe0,0xb8,0x81,0xe0,0xb8,0xb2,0xe0,0xb8])
  , b2 = new Buffer([0xa3,0xe0,0xb8,0x97,0xe0,0xb8,0x94,0xe0])
  , b3 = new Buffer([0xb8,0xaa,0xe0,0xb8,0xad,0xe0,0xb8,0x9a])

Let’s say that we received these buffers one at a time.

When we receive each of these buffers, we want to pass it immediately to the client as a string.

So for each received buffer, we decoded it and sent it right away.

console.log(b1.toString('utf-8'))
console.log(b2.toString('utf-8'))
console.log(b3.toString('utf-8'))

Now, what did the client get? Some gibberish along with the text…

กา��
�ทด�
��อบ

How about a StringDecoder?

var decoder = new (require('string_decoder').StringDecoder)('utf-8')
console.log(decoder.write(b1))
console.log(decoder.write(b2))
console.log(decoder.write(b3))

Here’s the output:

กา
รทด
สอบ

So from what we see, instead of converting incomplete UTF-8 character sequence into gibberish, a StringDecoder does buffer incomplete UTF-8 multibyte character sequence and waits until the character sequence is completed.

Understanding Quicksort (with interactive demo)

2012-11-08T00:00:00+00:00

At the college, we’re learning about abstract data types and few sorting algorithms, and so in this article I try to explain about the quicksort algorithm using some kind of an interactive demo.

Quicksort is a sorting algorithm, which takes an array like this:

and turns it into this:

This blog post will just explain the concepts of quicksort in a very high level.

I won’t go down into the code, or the analysis of running time, because that’s boring.

This blog post requires JavaScript to function properly. Please read this post directly on the blog, and turn on JavaScript.

Overview of Quicksort

Now, the principle of the quicksort algorithm is this:

Pick a “pivot” element.
“Partition” the array into 3 parts:
- First part: all elements in this part is less than the pivot.
- Second part: the pivot itself (only one element!)
- Third part: all elements in this part is greater than or equal to the pivot.
Then, apply the quicksort algorithm to the first and the third part. (recursively)

(drag the slider to see each step of the demonstration)

Partitioning

An important part of this algorithm is the partitioning — how it partitions an array into 3 parts in-place, that is, without creating extra arrays (like in mergesort). You can do it with some clever algorithm.

Here is one algorithm to partition the array, which I try to present in a way that’s as easy to understand as possible. We’ll try to partition the array like a card game.

First, assume that the pivot is the leftmost element.
Flip all the other cards down.
Then, open each card from left to right.
- If you find a card that is less than the pivot:
  - Swap that card with the card that was first opened (the leftmost open card), and close that leftmost card.
  - Also take note of the last closed card.
- Otherwise, continue opening the next card.
Swap the last closed card with the pivot (if any).
Open all cards… You will see that the array is already partitioned!

Picking the Pivot

For simplicity, we picked the leftmost element as the pivot, but this isn’t always good. Let’s consider this case where the array is reverse-sorted:

As you can see, the size of the problem is only reduced by 1 in each recursive call.

Note that the steps it take to partition is proportional to the number of elements to partition, therefore the more we can reduce the problem size, the lesser the number of steps.

The best pivot would split the array into 2 equal parts, so the problem size would be reduced by half. That is, the best pivot would be the median of the elements, but to find the median you first need to sort the array (which is what we’re doing), so that wouldn’t work*.

One approach that some people use is: just pick a random pivot!

… “but the partitioning algorithm assumes that the pivot is at the leftmost element!”

Easy, just swap the pivot we picked with the leftmost element, then the leftmost element becomes the pivot.

Here’s what happens if we were able to choose the best pivot.

* I remembered that one friend asked me when he tries to implement the heapsort, the conversation goes like this:

” Do I need to sort the array first? “

” Wait wait wait, what are you trying to implement? “

” Heapsort. “

” Then what’s the point of doing the heap sort if we have to sort the array before we can sort the array using heapsort?! “

Pagist — Turn a Gist Into a Web Page

2012-10-17T00:00:00+00:00

Tomorrow I’m going to have a discrete maths test, and so there are few friends asking me several questions.

So I think, wouldn’t it be nice if there is a way to send them these mathematical equations (or few paragraph of text) in a way that is as easy as posting a Gist?

That’s why I created Pagist.

Basically, pagist lets you write some text documents in Markdown format, submit it to Gist, and alter the URL from https://gist.github.com to http://pagist.github.com.

Then Pagist will fetch the Gist, format the contents with Markdown, and apply Mathjax. Here’s how it looks like:

The good thing is that Gists are editble, so I can just edit the Gist and when I refresh the page, I can see new content. Here’s an example of a Pagist, which is generated from this Gist.

Pagist also allows raw HTML, CSS and JavaScript. So you can make dynamic pages quickly from Pagist. See the Pagist Kitchen Sink.

Poor, Poor Return Key!

2012-09-12T00:00:00+00:00

Just a diary for myself. Yesterday, while I was using my MacBook Pro normally, a soft touch on the return key broke it apart into two pieces.

Right then I panicked. The Return key is one of the key I use constantly, for 278 days, and not being able to press it in a comfortable way could greatly impact my productivity.

Lucky for me that I still have my old MacBook with me (Early 2008 Model), so I think maybe I should try replace the Return key with my old MacBook’s

I researched on YouTube about how to replace MacBook keys, and I found a video on removing the Return key. So I practiced with some other keys in my old MacBook first.

The video recommended that we use some kind flat screwdriver because that’s a lot easier, but I don’t have it with me at that time, and that was late at night.

The best alternative is, well, a Lancer Spiral.

After tens of minutes of fiddling, I managed to pop the Return key out, but then underneath the key, the two models have different layout. Forcing it into my MacBook Pro’s keyboard made the key stuck and made it even harder to press return.

Now I’m totally out of luck. But thank God I suddenly feel like there’s nothing better to do, then let’s just pop the Caps Lock key out for brevity.

And looking below, the layout underneath the key matches exactly!

So I just push it back in place of the broken Return key and voila:

Oh and finally, where did my old Return key go?

Well,

Serve Google Spreadsheet as JSONP (JavaScript)

2012-09-08T00:00:00+00:00

While creating a Live Scoreboard for this year’s DJMAX Technika Thailand Championship, some of the data (list of participants, offline judge results) are stored on Google Spreadsheets.

I need to find a way to incorporate these data into the web app, and I find a purely client-side way to do it.

Preparing the Spreadsheet

Create a new sheet in the spreadsheet, call it “JS”. And fill in the sheet like this:

Create a Google Apps Script

Go to Tools -> Script Editor to create a script, paste in this code, and save:

function onEdit(e) {
  var value = SpreadsheetApp.getActiveSpreadsheet().getSheets()
      .filter(function(sheet) { return sheet.getName() != "JS" })
      .map(function(sheet) {
        return { name: sheet.getName(),
                 values: sheet.getDataRange().getValues() };
      });
  SpreadsheetApp.getActiveSpreadsheet()
    .getSheetByName("JS").getRange("B1").setValue(JSON.stringify(value));
}

Basically, what is does is this: when the spreadsheet is edited, the script gets all the sheets, filter out the one named JS, and create an object representing the sheet and all its values for each sheet.

Finally, these objects are stringified into JSON, and are put on the B1 cell of the JS sheet.

Make some change, and behold

After you make changes in other sheets, and then switch to the JS sheet, you will see that the B1 cell we first intentionally left blank at first now contains the JSON representation of the other sheets.

Now, what does it look like? A JavaScript code!

Publish the JS sheet

Now, we can publish the JS sheet. Tell it to auto publish so that the data is always fresh.

Then, get the link to the publish data as TXT (Plain Text)

Include it in your web page!

Since the exported text is a valid JavaScript code, you can now include them inside your page!

<script>
function loadData(sheets) {
  alert(JSON.stringify(sheets));
}
</script>
<script src="https://docs.google.com/spreadsheet/pub?key=...output=txt"></script>

What I learned during refactoring JavaScript

2012-08-17T00:00:00+00:00

I just refactored dtinthstagram a bit, to make the code more concise, also making use of Backbone.js. Here’s the experience of it.

The current version, as of writing, has a lot of memory leaks. When the view wants to update itself according to the change in the model, it adds an observer to the model. That’s normal.

But when the view is not used anymore, it does not remove the observer from the model. The observer also references the view, obviously, because it needs to update the view. So the view hangs around unused forever! Memory leak!

Now the problems are:

My implementation of EventEmitter does not provide a way to remove event listeners. That’s ridiculous. The solution is just use Backbone.Events instead.
The view doesn’t know when it is not going to be used anymore. Because the event listener is still around, it keeps a reference to the view, thus to the DOM, so the memory leaks. The solution is just to explicitly tell the view to GTFO. Then so view can go remove the DOM and clear any references to it, and also unbind its observers from the model.

Now for even more problems:

The Code Is Already Ugly Enough!

Here is the code that enables and disables the refresh button, the loading indicator, and the load more button.

When refreshing, the button should dim and should light back up when finished.
When loading more photos, the button should switch to a loading indicator, and switch back when finished.

Pretty strightforward:

that.feed.on('startLoading', function() {
	that.view.loading.show();
	that.view.loadMore.hide();
});
that.feed.on('finishLoading', function() {
	that.view.loading.hide();
	if (that.feed.hasNext()) {
		that.view.loadMore.show();
	}
});
that.view.loadMore.hide();

// ...

var refreshing = false;
that.feed.on('startRefreshing', function() {
	refreshing = true;
	that.view.refresh.addClass('dim');
});
that.feed.on('finishRefreshing', function() {
	refreshing = false;
	that.view.refresh.removeClass('dim');
});

Although it’s long, it doesn’t look bad. Just that the same logic is used over again.

Here’s another piece of code that updates the like button, as well as the like indicator.

function updateLike() {
	view.likeIcon.data('icon').attr('fill', media.liked ? '#ffff99' : '#8b8685');
}
media.on('likeChanged', updateLike);
updateLike();

media.on('startLike', function() { view.likeIcon.addClass('dim'); });
media.on('finishLike', function() { view.likeIcon.removeClass('dim'); });
media.on('startReload', function() { view.right.addClass('dim'); });
media.on('finishReload', function() { view.right.removeClass('dim'); });

Now I think, when the view is no longer used, then I have to go and remove each of the listeners that I just added, TO CLEAN UP ALL THE MESS THAT WAS CAUSED TO THE MODEL.

And if I forget to remove only one of the event listeners, then the view would stay around forever, FOREVER!! Until the web page is unloaded. Now we know how easy it is to cause a memory leak in JavaScript.

There must be a better way!

What I learned: Write it the way I want to write it first!

Yes, forget all the APIs. Don’t forget the syntaxes.

Then refine and implement the missing parts later. So I replaced those code with this:

binds(that.feed.status, that)
	.showWhile('loading', that.dom.loading)
	.hideWhile('loading', that.dom.loadMore)
	.toggleClass('refreshing', that.dom.refresh, 'dim')

and this:

function updateLike() {
	dom.likeIcon.data('icon').attr('fill',
		media.get('liked') ? '#ffff99' : '#8b8685');
}

binds(media, that)
	.toggleClass('liking', dom.likeIcon, 'dim')
	.toggleClass('reloading', dom.right, 'dim')
	.bind('liked', updateLike)

In my head is a design of a model-view binder that binds itself to both the model and the view, and then:

When the model is changed, or when the binding is initially created, the binder updates various elements inside the view.
When the view is destroyed, the binder unbinds itself from the model and the view. As of writing, I didn’t implement this yet, but it should be much easier than binding and unbinding manually.

Finally, I go implement the binds function, the model-view binder, and problem solved.

Thanks to Chris Headley of WhoIsHostingThis.com for reporting the broken links. You might find Backbone.js Introduction and Resources on WhoIsHostingThis.com useful.

Playing with mplayer and caca

2012-08-16T00:00:00+00:00

I’m giving my friend a JavaScript and Node.js crash course through Skype, using ttycast to stream my live terminal session through to friend. Then I talked to him about what command-line apps can do: browsing the web, installing software, chatting, and watching movies right inside a Terminal!

I’m giving my friend a JavaScript and Node.js crash course through Skype, using ttycast to stream my live terminal session through to friend.

After teaching, I talked to him about what Terminal apps can do, such as:

Using find to convert all .wav files in current and subdirectory to .ogg file and delete the original wav files.
Using brew to quickly install software.
Browsing the web with elinks.
Chatting on Facebook using finch.
Playing music using mplayer (he hears it through Skype)

And finally, playing movies on a Terminal!

Sintel © copyright Blender Foundation | www.sintel.org

First, rebuild mplayer with libcaca.

brew unlink mplayer
brew uninstall mplayer
brew install libcaca
brew install mplayer

And then, stream the movie (thanks to this post)

CACA_DRIVER=ncurses mplayer \
    -vf framestep=10 -vo caca -quiet \
    sintel-2048-surround.mp4

-vf framestep=10 tells mplayer to update every 10 frames so the movie doesn’t flicker too much. -vo caca tells mplayer to output as a colored ASCII art. Finally, -quiet tells mplayer not to display the current playing stats every frame, which interferes with the terminal output.

Last but not least, I opened up VLC and streamed from iSight through network, and then told mplayer to stream from it:

dtinthstagram: Instagram Viewer for Web and Desktop

2012-08-14T00:00:00+00:00

An Ajax app I made some time ago. It is an open-source super-smooth web-based Instagram viewer. If you are an Instagram user, try it out! :D

View your Instagram feed, like and comments on photos,
in your big computer screen.
Auto-refreshes and works minimized:
come back some time later and view all new photos.
Dark, slick and simple user interface with super-smooth animations.
Free and open source! on GitHub.

try it now

tested on Firefox, Safari and Chrome

Desktop Version (installation instructions)

### Windows and Linux (Chrome) * Install Google Chrome * Open dtinthstagram with Google Chrome * Click the Wrench Icon, Tools and then Create Application Shortcuts * Click Create to finish. Next time, run dtinthstagram from your desktop.

### Mac OS X (Fluid) * Install Fluid * Run the Fluid app. * In the URL field, type in:
http://dtinth.github.com/dtinthstagram/ * In the Name field, type in:
dtinthstagram * Click Create to finish. Next time, run the newly-created dtinthstagram app.

Remote Camera Shutter for a Jailbroken iPad Powered by Node.js

2012-07-20T00:00:00+00:00

Yesterday, I went to Chocolate Ville, a very beautiful restaurant, planning to take bunch of photos. I went with many friends, my MacBook Pro and my New iPad.

After the food is ordered, my friends went to look around and take more photos, while I and another friend were waiting for the food (someone has to look for our belongings), I then felt like oh it’s a nice idea to take photos of everyone.

…but instead of asking the waitress to take a photo for us, I think I’d make my MacBook press the shutter button on my iPad for me. So while waiting for the food, I quickly created a remote shutter in Node.js.

A Node.js server sending tap events to the iPad through Veency.

On the iPad

On the iPad, I installed “Veency”, which is a VNC server for the iPad, from Cydia. That’s all.

Make sure you enabled the server and set the password to something.

Then I used the normal camera app to take photos.

On My Laptop

First, I tried connecting my iPad to my MacBook through Bluetooth PAN, but the remote shutter works for like 2–3 meters and is so delayed. So I recommend you to set up an ad-hoc wireless network. Static IP is recommended because that makes these 2 devices see each other more quickly.

The Node.js Server

substack has made the excellent rfb module that lets Node connect to a VNC server. I also used connect so that I build the web server more quickly. So,

npm install rfb connect

And the app code (this code is refined to work better):

var RFB = require('rfb')
  , client = new RFB({
      host: process.argv[2]
    , password: process.argv[3]
    , securityType: 'vnc'
    })
  , connect = require('connect')

console.log('connecting')
client.dimensions(function(dim) {
  console.log('connected', dim)
  connect.createServer()
    .use(function(req, res, next) {
      var m = req.url.match(/click\/([\d\.]+)\/([\d\.]+)/)
      if (!m) return next()
      var x = parseFloat(m[1])
      var y = parseFloat(m[2])
      client.sendPointer(x * dim.width, y * dim.height, true)
      res.setHeader('Content-Type', 'text/plain')
      process.nextTick(function() {
        client.sendPointer(x * dim.width, y * dim.height, false)
        res.end('ok')
      })
    })
    .listen(2271)
})

Basically, what this code does is connecting to the VNC server, which is my iPad, and then starts a web server. If I go to:

http://localhost:2271/click/0.95/0.5

This will tap on the iPad at the point (0.95, 0.5) in the screen. The point in the screen is defined in range 0–1, where 0 is left/top and 1 is right/bottom.

Note that the coordinates are independent of the orientation of the device. The left side of the iPad screen is always the side that the home button resides. If you rotate your iPad, you have to rotate the numbers too if you want it to click on the same button.

Using It

Now, after the iPad and the laptop is in the same wireless network, run:

node app.js 192.168.43.42 vncpass1

Change the IP and your VNC password accordingly, then if it works, it should say “connected” along with the dimensions of the screen.

Then on the iPad, fire up the Camera app, and rotate your screen so that the lens are at the top, and the on-screen shutter button is on the same side as the home button.

Then fire the web browser to:

http://localhost:2271/click/0.05/0.5

The shutter button should act like it is actually tapped by a finger, and a photo should be taken, and the browser should say “ok”.

Now to take more photos, you just press Cmd+R on your keyboard and the shutter will be pressed again.

In closing, I think it is pretty amazing that with Node.js and the right module, it’s possible to make a working remote camera shutter in less than 30 lines of code and within 10 minutes while waiting for the food to be served.

XULRunner App Development Experience

2012-07-12T00:00:00+00:00

#thaiWitter has been using the engine in Firefox 3.6 since 2011, and I attempt to roll my own #thaiWitter app in XULRunner.

This blog post describes its experience.

This blog post doesn’t cover how to write XUL applications, you better read about it on the MDN.

This blog post covers about how to run a XUL application on various platform, because XULRunner sometimes like to act very strangely in some platform.

At the time of writing, it’s XULRunner 13.0.2. And the XUL articles on MDN is very outdated.

On The Mac

I started with the Mac platform. I followed the tutorial to create a XUL application. I got all the chrome stuff ready and ready to run the application.

xulrunner `pwd`/application.ini

Didn’t work. --install-app also doesn’t work.

So I think I will have to package an application bundle first to be able to try it out, and that worked.

I followed the steps described in Deploying XULRunner article, to the point of running the app:

./thaiWitter-DEV.app/Contents/MacOS/xulrunner

It complains about library not found and stuff. It turns out that I have to copy (or symlink) all the .dylib files from Frameworks/XUL.Framework/ into the MacOS folder too.

…and finally, it runs, it runs!

So therefore I assembled a build script that packages the application, available here: dtinth/xulrunner-twclient/osx.

Windows

On Windows, however, it’s much more straightforward. Just follow the deploying XULRunner article and everything should work just fine.

To change the icon of the window (by default windows will show the blue globe icon), just add an ico file with the name matching the id property of the window to the chrome/icons/default directory.

So if I have a <window id="tw-main-window">, I’d put my app icon on chrome/icons/default/tw-main-window.ico.

On Windows, I like to distribute my app as a “portable app,” so I also made a batch script that copies stuff to make a runnable app, available here: dtinth/xulrunner-twclient/win.

Linux

Not yet lol

When the linux version is out, I’ll update this post. But I guess that it’s straightforward, just follow the deploy guide and things should work well.

ttycast: Broadcast your tty to the world!

2012-07-07T00:00:00+00:00

ttycast is a Node.js app that allows you to broadcast your tty online, in really real time!

Sometimes I teach my friends some programming over Skype, and to show them code, I have to share my screen or paste my code in the chat box and let him try out himself.

Sharing screen is usually slow, and has very low frame rate. And I can’t figure out how to share part of my screen.

Now I really like Destroy All Software’s screencasts, where almost everything in his screencasts is done inside a terminal. I am really inspired by it and think:

Wouldn’t it be great if I can share what I’m seeing inside a terminal easily?

I think it’d be very fast, because only text needs to be sent, I think it’ll be very smooth like when I use SSH. I also see that there’s already a terminal emulator written in JavaScript out there and there’s already a tool to record my terminal screen, ttyrec.

Introducing ttycast

This app is a result of putting together several libraries:

and there’s less than 80 lines of my code.

So, to get started, just read the README!

Divide Money - My first app written using Knockout.js

2012-07-07T00:00:00+00:00

I just came from an HTML5 training. The instructors taught us some basic jQuery and told us to make an app about lifestyle.

So I think I’d try something new, so instead I play with Knockout.js

Here is the result: Divide Money App

It is an app to help you to figure out how much one needs to pay when eating at a restaurant. It is designed to be flexible so that it works with almost any situation.

After the experience, I found out that it’s extremely easy to build very rich app with this. You can add, change, and remove people and food, and the UI and results updates itself automatically.

And all of that is done with Knockout in less than 300 lines of code, which for me is really amazing.

So I definitely recommend playing with it: Knockout!

pmd: A Command-Line Pomodoro Timer for Mac

2012-06-29T00:00:00+00:00

Today, I started applying The Pomodoro Technique, so I made for myself a simple countdown timer.

This blog post also covers how to make a NSStatusItem that lives at the far right of the items.

As I usually work with the Terminal, this app must be easily usable from the Terminal. But I also want to always see the time remaining.

The result is pmd. It is invoked from the command-line, and displays the remaining time at the status bar, finally, it sends a Growl notification.

The command is written in Shell Script, with the countdown timer written in MacRuby.

To use, just invoke from the terminal:

pmd start

Then the countdown will show.

Making a Status Bar Item Go Far Right

Originally, I wrote the countdown in Objective-C and working with it feels like an overkill. There is an Xcode project file, a main.m, the app delegate stuff (.m and .h), a .xib file, and finally an .app file. So I rewrote it in 42 lines of MacRuby. The code shown here will be from the Objective-C version though.

Usually, when running a status bar application, the new status bar item gets added to the left of the status bar.

To make it go to far right, we must use Cocoa’s private API.

statusItem = [[NSStatusBar systemStatusBar] _statusItemWithLength:0.0 withPriority:INT_MAX];

But the length parameter is not used when doing it this way, so after creating the item, we need to set its length.

[statusItem setLength:NSVariableStatusItemLength];

tos3: An extremely simple tool to sync local files to Amazon S3.

2012-06-25T00:00:00+00:00

For some time blog has been running on a Ruby on Rails webapp hosted on Heroku, which makes it feels somewhat “slow”. So I decided to make my website totally static and host them somewhere.

I got the blog engine done and then wondered where and how to put these static files. I chose Amazon S3 and tried to find a nice way to put the files up. I ended up writing my own syncer in Java.

Why Java?

Well, because I love its File class and how it abstracts the file system, so I can use them consistently on all platform. I don’t have to worry about slashes and backslashes.

Then, because Amazon AWS has a Java SDK.

Another nice thing is that I can compile it to a single .jar file and then run it on all platforms.

Usage

After compiling, you can run it like this:

java -jar tos3.jar <directory> <bucket> <path-to-s3credentials.properties> preview

It will look at the <directory> and list of files in the <bucket>, and compares them to show what file needs to be added or removed.

The <path-to-s3credentials.properties> is path to your credentials file, which should look like this:

accessKey=YOUR_ACCESS_KEY
secretKey=YOUR_SECRET_KEY

After you’re sure about what you’re going to upload, you can remove the “preview” part, and then tos3 will actually upload and remove files on s3.

.noex.html

For pretty URLs, I prefer that many URLs don’t have file extension, but served like an HTML file. For instance, this blog post URL doesn’t have the file extension.

For dynamic sites this can be achieved easily, and for static sites this app handles it for you: any file whose name ends with .noex.(whatever) will have that part removed when uploading.

So actually on my local computer this blog post resides at “page/tos3.noex.html”, but when uploaded it will go to “page/tos3” instead.

sgvc

2012-06-17T00:00:00+00:00

This is my new static site generator system, inspired by Jekyll, but is written in Node.js. The name stands for Static Site Generator using Views and Contents. It aims to be extremely flexible.

Before that, this website is running on a Ruby on Rails application, but I think that Ruby on Rails is too complex for this kind of simple blog, so I think writing a static site generator is better.

Features

Each post is a single text file, which corresponds to a single file.
Write posts using a combination of Markdown and HTML. You can switch back and forth between Markdown and HTML using a special syntax.
Each post can define its own CSS and JavaScript, so each blog post can be different.
Each post can define parameters, which then can be understood by the layout.
- For example, each post has to define a title, which the blog engine will then use to display on the list.
- Each post can also define custom parameters, such as the “comments” parameter, and the layout can decide by this parameter whether to display the Disqus comment box or whatever.
The index page is a single page which displays all of the posts.
Each post can also have a preamble (Markdown only), which will be displayed on the index page.

Quick Note about Jailcoder

2012-05-27T00:00:00+00:00

Just tried using Jailcoder to build and run iOS apps on my iPad. So here is a quick how to.

Jailbreak the iDevice.
Install AppSync from cydia.hackulo.us repo.
Install Jailcoder and patch your Xcode.
After creating, patch your Project.
Build the app for the iDevice.
Click run and your app should run.

But when app doesn’t run:

Xcode cannot run using the selected device. No provisioned iOS devices are available with a compatible iOS version.

Make sure the deployment target is set to the right version on your device.
Go to the organizer and click “use for development” on your device. There is no need to sign in.
Try disconnecting and reconnecting your iDevice.

Build failed with something about no certificate.

Make sure the project is patched.

App doesn’t install and complains something about installd.

Make sure AppSync is installed.

Fluid (Mac): Fix Back Button Breaking the JavaScript API

2012-04-09T00:00:00+00:00

While I was making dtinthstagram, I thought that it would be a good idea to make it work in Fluid, as well as a support for dock badges.

So I implemented it in a straightforward way. Then I found that going to other page and back to the old page breaks the Fluid JavaScript API.

When navigating to another page, the API gets destroyed. When the user return back to the old page, calls to the API generates an error:

ReferenceError: Trying to access object from destroyed plug-in.

I contacted the developer of Fluid, but for now, I came up with a workaround that works pretty well.

I fixed the problem by checking, if invoking the Fluid API generates an error, then create a hidden iframe (which Fluid will initialize another JavaScript API instance inside it), and then use the API of the iframe instead.

The code goes like this (comments added):

// holds the reference to the window
// that holds the Fluid JavaScript API.
var fluidHoster = window;

// the iframe instance, if any.
var fluidIframe = null;

// the text queued to show on the dock badge.
var fluidQueuedText = null;

function setDockBadge(text) {
	if ('fluid' in window) {
		try {
			if (fluidHoster == null) {
				// the iframe did not finish loading, queue the text
				fluidQueuedText = text;
			} else {
				// try calling the API
				fluidHoster.fluid.dockBadge = text;
			}
		} catch (e) {

			// in case of error, queue the text,
			fluidHoster = null;
			fluidQueuedText = text;

			// trash the old iframe,
			if (fluidIframe != null && fluidIframe.parentNode) {
				fluidIframe.parentNode.removeChild(fluidIframe);
			}

			// create a new iframe,
			var iframe = fluidIframe = document.createElement('iframe');

			// make it display the queued text on the dock
			// when the API is ready
			iframe.onload = function() {
				fluidHoster = iframe.contentWindow;
				fluidHoster.fluid.dockBadge = fluidQueuedText;
			};

			// add to document.body
			iframe.src = 'about:blank';
			iframe.style.display = 'none';
			document.body.appendChild(iframe);

		}
	}
}

About ActionListeners

2012-03-05T00:00:00+00:00

I’ve been chatting some OOP with a friend, who went to an army camp during the Object-Oriented Programming class. So I explained to him a bit on how ActionListeners work. And here’s how the conversation went:

I’ll have to introduce you to a concept of what we call “Listener”.

Normally, when we add buttons, we want something to happen when user clicks it.

And in Java Swing, we use ActionListeners.

ActionListener Basics

What are action listeners? They are classes that implements the interface ActionListener.

And they have one required method: void actionPerformed(ActionEvent event)

So, when you create a button, and you want something to happen, you create an action listener, and add it to the button.

 ActionListener listener = new MyButtonListener();
 button.addActionListener(listener);

The above code basically says to the button, “if someone presses you, call the actionPerformed method of listener”

ActionListeners are flexible

[…] a button can have many action listeners. And one action listener can be added to multiple buttons, or other components that can perform action, or even a swing timer.

When a button is clicked, in Swing, we say that “an action is performed on the button”. That’s why we use the method actionPerformed.

For example, when a menu item is clicked, we also say, “an action is performed on the menu item”. For a JTextField, when use enters a text and then press ENTER, then an action is performed on that text field.

For Swing timers, when it’s the specified time, the timer will perform some action.

Other kinds of Listeners

For many components, actions can be performed on them. But it’s different for each component on how can the user perform action on it.

So that’s why sometimes, ActionListener is not enough. For example, for a JTextField, we may want to know when a key is pressed, not just when the user press Enter.

So on JTextField, we also have addKeyListener(KeyListener), and a KeyListener interface, that has 3 methods, each receiving a KeyEvent: keyTyped, keyPressed, keyReleased.

And also, sometimes, maybe we want to detect when the user moves mouse over the button (or maybe another component), we can use a MouseListener and/or MouseMotionListener.

Hope that kinds of explained it.

Stylus Snippet - Deopacify

2011-11-29T00:00:00+00:00

What it does, given a background color, an opacity, and a target color: It finds a color which when drawn on the background color with the given opacity, results in the target color.

When I was making dark-facebook, I noticed a performance drop because lots of opacity use in images.

For example, I darkened the icons by applying opacity on the icon. And for text I just use gray (but the gray that I use everywhere).

. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .
. text . . . . . . . .

Though it doesn’t look laggy here, it does on Facebook because of its page complexity.

I tried another experiment, by changing the opacity of the whole list.

. text . . . . . . . .

And that did make it faster, but the text is also dimmed, but I still want it to be that gray.

That’s where this function comes in handy. I call it deopacify, and it goes like this:

deopacify($background, $alpha, $target)
	dv($fn, $bg-v, $target-v)
		$v = $bg-v + ($target-v - $bg-v) / $alpha
		if $v > 255
			warn('IMPOSSIBRU!! TOO BRIGHT! Would result in ' + $fn + ' = ' + $v)
			return 255
		else if $v < 0
			warn('IMPOSSIBRU!! TOO DARK! Would result in ' + $fn + ' = ' + $v)
			return 0
		else
			return $v
	rgb(dv('red', red($background), red($target)), dv('green', green($background), green($target)), dv('blue', blue($background), blue($target)))

So, deopacify(#353433, 0.6, #8b8685) results in #c4bdbc, which is the color that is drawn on #353433 with 60% opacity and results in #8b8685.

So let’s compare, the old method, with opacity in each image:

. text . . . . . . . .
. text . . . . . . . .

and the new method with opacity on the container.

. text . . . . . . . .
. text . . . . . . . .

It looks the same, but if you select the text you’ll notice that the opacity is different.

And it will warn you when you try to do impossible things, for example, deopacify(#353433, 0.6, #fff) will generate the following warnings:

Warning: IMPOSSIBRU!! TOO BRIGHT! Would result in red = 389.6666666666667
Warning: IMPOSSIBRU!! TOO BRIGHT! Would result in green = 390.33333333333337
Warning: IMPOSSIBRU!! TOO BRIGHT! Would result in blue = 391

Because there’s no way to draw white on dark gray with opacity less than 100% and still results in white.

It will return the closest color it can find though, which in this case is #fff.

PhantomJS - Passing Variables to page.evaluate

2011-11-23T00:00:00+00:00

When I was making an auto form submission script, I tried to find out how to pass data from outside script to page.evaluate script. In all form submission examples that I’ve seen, they all use fixed data. As of 1.3.0, it’s still unsupported.

So I thought I would pass it as a global variable instead.

And here’s how I did it.

function setGlobal(page, name, data) {
	var json = JSON.stringify(data);
	var fn = 'return window[' + JSON.stringify(name) + ']=' + json + ';';
	return page.evaluate(new Function(fn));
}

(note: I tried adding it to WebPage.prototype but it didn’t work)

And then in the page handler:

setGlobal(page, '__dt_credentials', credentials);

and finally the code inside page.evaluate:

			un.value = __dt_credentials.username;

Generating a Tone on Internal PC Speaker (Linux C, C++)

2011-11-23T00:00:00+00:00

So I played a bit with the PC Speaker like I like to do before in an AX-11. I tried using Beep() on Windows 7, but it didn’t work, so I had to use Linux. I searched a lot on the Internet for how to make it generate a tone so I’ll post it here for future reference.

By the way here’s the result:

Enabling the PC Speaker

sudo modprobe pcspkr

Code

#include <unistd.h>
#include <fcntl.h>
#include <linux/kd.h>
#include <sys/ioctl.h>

// ...
ioctl(STDOUT_FILENO, KIOCSOUND, 1193180 / freq);
usleep(wait);
ioctl(STDOUT_FILENO, KIOCSOUND, 0);

References

My Eclipse Color Theme

2011-11-18T00:00:00+00:00

I just finished tweaking my Eclipse color theme.

On code with good balance of code and documentation, it will have a mix of cool colors and warm colors. Without the comments and stuff, it will look reddish.

Here’s how it looks like:

You can get it at Eclipse Color Themes!

Gzipping Responses in Node.js + Express App (Obsoleted)

2011-11-10T00:00:00+00:00

Not long ago while developing the #thaiWitter 3 server (Node.js + Express App), I realized that Heroku/Cedar doesn’t gzip the output, so I need to gzip them myself. I go with node-compress.

Update 2012-06-25: Since node 0.6 we now have Zlib built-in, so this post is no longer valid. Just use(connect.compress()) hell yeah!

Gzipping Static Content

My app has a lot of client side data, and they are served using express.static.

gzippo is a drop-in replacement for it, so just install gzippo and use gzippo.staticGzip in place of express.static. It gzips the static data on-the-fly and cache them in memory.

My Gzip Middleware

I also need to Gzip the API output too, so I made my own middleware express-gzip. And the code that does the action here.

It doesn’t get in your way, that means, you have to tell it to output Gzip yourself, but that’s easier for me. It adds 3 functions. 1 to the request object, and 2 to the response object.

req.supportsGzip() - returns true if the browser supports Gzip
res.setGzipHeader() - sets the gzip headers for the response
res.sendGzipped(text, headers) - sends text data to the browser, gzipped

Note that res.sendGzipped() only allow UTF-8 encoded strings.

I’m going to use it in the rest of this post.

Gzipping API Responses

As a web-based Twitter client, most of my API calls returns data from Twitter API as JSON. And JSON gzips very well!

For that, at the final stage when sending output, I just use res.sendGzipped from my middleware.

Gzipping Pre-gzipped Assets

The client-side JavaScript file is big, nearly 190k.

I have a build script to Gzip them, and I use a separate request handler to load both the non-gzipped version and gzipped version into memory at startup time.

I need to do that because when I compile assets, it goes to, thaiWitterAsset1.js. But I also need a way to make the browser get the latest version. So I reference in the HTML file as thaiWitterAsset1_[hash of the file].js. express.static couldn’t do that, so I need to make a new request handler. Surely I could just append a query string, but I heard from somewhere that it will not be cached as good as having the hash in the file name.

The handler code looks something like this:

	if (req.supportsGzip()) {
		res.setGzipHeader();
		return res.send(gzipped, headers);
	} else {
		return res.send(nonGzipped, headers);
	}

Performances

So people at Connect and Express said that it is more of a loss to Gzip. It takes lot of power to serve Gzipped content and removed it in newer versions.

But for me, my connection to Heroku wasn’t fast. So before I use Gzip, the home timeline loads in about 2.3s, but after I enable Gzip, it loads in about 1.5s. I didn’t remember the number, but it’s significantly faster.

The size of the JSON output from the server reduced from 45k to around 8k and that makes it load faster.

Checking for SSL in Node.js App on Heroku/Cedar

2011-11-02T00:00:00+00:00

So in the preview of #thaiWitter 3 I’ve added Piggyback SSL to my Heroku app, and I couldn’t find a way for the app to check if it’s requested via SSL or not…

…and for 3 days or so I have been checking on the client side and passing parameters to the API to indicate that the API call was secure, like this:

location.protocol == 'https:'

I’ve tried looking at the environment variables and stuff (like in PHP or CGI applications, we like to look at environment variables to find out about the user) to find out nothing. It’s nothing like that anymore.

Well, I forgot to look at the request headers. :(

So I added a handler that shows all the request headers and found out. So now here’s how to check:

req.headers['x-forwarded-proto'] == 'https'

thaiWitter 3 RC

2011-10-27T00:00:00+00:00

The newer version of thaiWitter (known as thaiWitter 3) is almost out

Downloads

You can download the latest builds at the main Downloads page: http://docs.dt.in.th/thaiWitter/Download

Enable User Stream / Direct API Call in Firefox

Please install the latest thaiWitter Client Extension which now works in thaiWitter beta.

Changelog

A bit refactored code. Now written in its own language thaiJS (compiles to JavaScript) ;p
Fixed many small bugs and lot of stuff.
Server rewritten in Node.js + Express so very lightweight.
Live conversation view: new tweets that are relevant to the conversation will now slide into the conversation view.
Has Logout / Change Account button for re-authentication.
Has HTTPS thanks to Heroku.
Can post status updates to Facebook.
New image upload system. Can now post images to pic.twitter.com. Just drag and drop the images into the text box and send. User interface inspired from @manatsawin’s Twitica Desktop.
Has the image preview feature, as suggested by @tannce and @icez. (Disabled by default).
Allows retweeting a retweet when the retweeter is protected, as reported by @PalmZenith.
When counting tweet text, all URLs will count as 20-21 characters because they will be shortened by t.co. Also each image upload will also count as 21 characters. And URL shorteners are now deprecated and gone.
Search feature is a more reliable, it now uses OAuth.
Displays “Twitter is over capacity” when Twitter is over capacity.
Lists timeline will now include retweets.
Can now follow/unfollow people/lists in-app.
Portable version: some common dialog UI adjustments :)
Portable version: now uses no-remote so you can run multiple instances of #thaiWitter at the same time. Just extract the package somewhere else.
When opening a new window, the new window’s size will match the size of the old window.
Too long words will be broken into lines using word-wrap: break-word.
More (or less :P) mobile compatibility. Better touch handling in iOS.
Username auto-completion using Tab key.
New notification options.

JavaScript - Asynchronous Loops

2011-10-23T00:00:00+00:00

I’m been working on a little experiment that I need to process a set of images (loading it, and putting it in canvas, and then process it) sequentially.

In JavaScript, image loading is asynchronous, so I made these utility functions that makes processing things sequentially a lot easier.

var asyncWhile = function(cond, body, fin) {
	function cont() { if (cond()) body(cont, brk); else brk(); }
	function brk() { if (fin) fin(); }
	cont();
};

var asyncFor = function(init, cond, next, body, fin) {
	init();
	asyncWhile(cond, function(cont, brk) {
		body(function() { next(); cont(); }, brk);
	}, fin);
};

asyncWhile

This function, asyncWhile works like a while loop. It receives 3 arguments.

The first one is the condition function. It should return true if the loop should run.
The second argument is the body of the loop, and it can be asynchronous function.
- It receives 2 arguments: cont and brk. Just use return cont(); in place of continue; and use return brk(); in place of break;.
- So in asynchronous nature, this utility function doesn’t know when to continue, so return cont(); must be explicitly called so that the loop can continue.
The third argument is the finishing function. It is called when the loop is over.

asyncFor

Another function, asyncFor, well, works like the for loop. It just receives 2 more arguments. The initializer and the runner. Its implementation is rather simple, it just calls init() at the start and injects next() into the cond function passed to the body of the function.

So back to the sequential image loading problem, I can use these functions to do this:

var i;
asyncFor(
	function() { i = 0; },
	function() { return i < images.length; },
	function() { i ++ },
	function(cont, brk) {
		console.log('loading image #' + i);
		var img = new Image();
		img.onload = function() {
			console.log('image #' + i + ' loaded');
			return cont();
		};
		img.src = images[i];
	},
	function() {
		console.log('all images loaded!');
	}
);

asyncSeq

I also made this function, which makes it easy to run lots of asynchronous functions sequentially, without having to nest them:

var asyncSeq = function() {
	var i, args = arguments;
	asyncLoop(
		function() { i = 0; },
		function() { return i < args.length; },
		function() { i ++; },
		function(cont, brk) {
			args[i](cont, brk);
		}
	);
};

The usage is like this:

asyncSeq(
	function(cont, brk) {
		console.log('function 1 called');
		return cont();
	},
	function(cont, brk) {
		console.log('function 2 called');
		setTimeout(function() { return cont(); }, 300);
	},
	function(cont, brk) {
		console.log('function 3 called');
		setTimeout(function() { return cont(); }, 1000);
	},
	function(cont, brk) {
		console.log('function 4 called');
		return cont();
	}
);

So I hope that these utility functions can be useful for you and feel free to use them in your code!

And I made a simple game for you.

Here I have ten buttons. Click from left to right and you win!

The relevant code looks like this:

asyncFor(
	function() { i = 1; },
	function() { return i <= 10; },
	function() { i ++; },
	function(cont, brk) {
		var b = document.getElementById('b' + i);
		b.className = 'bt bt-click';
		b.onclick = function() {
			b.className = 'bt';
			b.onclick = undefined;
			return cont();
		};
	},
	win
);

So as you see. You need to be careful not to let cont() or brk() be called more than one time, or you will encounter unexpected results.

How Facebook Ranks Your Friends

2011-10-13T00:00:00+00:00

I’m a bit tired of all those applications that tries to determine your top friends based on some factor, knowing that Facebook knows the ranking of your friend more than any other applications could know. So I created this little experiment.

Please use Firefox or Chrome for this experiment.

The results from this application is considered private. No data will be sent to my server in this experiment.

Get the User ID

Click here to get the user ID (or enter your ID manually:)

(if the text above says "undefined", please click the above link again)

Get the Raw List

You should see a very long text. Copy all of them and paste it in the box below.

Paste The Content

Finally, click the button to see the ordered list of your friends, in some particular order that I don’t know, but this is the order that you’ll see when you tag your friends in posts/comments/photos.

Output

your results will display here

Hello, Rails!

2011-10-12T00:00:00+00:00

Hello! I am new to Ruby on Rails!

And I’m liking it! <3

#thaiWitter Scrolling Equation

2011-08-28T00:00:00+00:00

Since the beginning, thaiWitter has a characteristic about the way it scrolls from one place to another place. This article discusses, in mathematics style, about how it scrolls from one position to another.

In acceleration phase, the acceleration is constant, so the animation is quadratic.
In deceleration phase, the acceleration is not constant. The velocity is proportional to the distance to the target, so the animation is exponential.

New Algorithm

This algorithm is almost identical to the original algorithm, but the time is used in calculation, so the scrolling speed will be the same everywhere.

In acceleration phase:

The speed is $v_0 + kt_1$.
So the displacement is $x_0 + v_0t_1 + {1 \over 2}kt_1^2$. </ul> In deceleration phase:
- The speed is $-\mu x$.
- Solve the differential equation, you get $c_0 e^{-\mu t_2}$.
- Substitute it in the speed (or differentiate it!) to get $-\mu c_0 e^{-\mu t_2}$.
Put the 2 phase one after another: Let $x_0$ be initial distance to target (always positive). Let $v_0$ be initial velocity (always negative). Let $\mu$ be the friction coefficient (0.27 in #thaiWitter). Let $k$ be the acceleration coefficient (5 in #thaiWitter). Let $t$ be the number of frames in current animation. Find the time $t_c$ which the animation changes from acceleration to deceleration: $$ a = {1 \over 2} \mu k $$ $$ b = -\mu v_0 + k $$ $$ c = -\mu x\_0 - v\_0 $$ $$ t_c = { -b + \sqrt{ b^2 - 4ac } \over 2a } $$ Let $x$ be the distance to target after $t$ frames, $x$ is defined as:
$$ x = \begin{cases} (x_0 + v_0 t_c - {1 \over 2} k {t_c}^2) e^{-\mu (t - t_c)} & t \ge t_c \\[1em] x_0 + v_0 t - {1 \over 2} k t^2 & t < t_c \end{cases} $$
Let $v$ be the current scrolling speed after $t$ frames, $v$ is defined as:
$$ v = \begin{cases} -\mu(x_0 + v_0 t_c - {1 \over 2} k {t_c}^2 ) e^{-\mu (t - t_c)} & t \ge t_c \\[1em] v_0 - k t & t < t_c \end{cases} $$
Original Algorithm in JavaScript ---- This speed of the scrolling varies with the performance of the computer, because the next scrolling position is computed based on last frame without difference in time being used. var direction = this.scrollPos < this.curScrollPos ? -1 : 1; var distance = Math.abs(this.scrollPos - this.curScrollPos); var speed = Math.min(Math.max(1, Math.ceil(distance * 0.27)), this.lastAmount + 5); var amount = direction * speed; this.lastAmount = speed; this.curScrollPos += amount; this.scrollTo (0, this.curScrollPos);

A Simple GPS Tracker is Too Simple. My GPS Tracking Webapp.

2011-04-08T00:00:00+00:00

I was looking for a free GPS tracker to record trips from my school to my university on my iPad.

One that does the simplest things that a GPS tracker can do: record the coordinates and let me get these data out to do stuff with it.

I Haven't Found Any Which Works for Me

Many GPS trackers are not free (and has a lot of features I don't really want), or relies heavily on their own server.

I prefer to have full control over my data. I would like to only send them when I want, and have full access to them.

My Simplest GPS Tracking Webapp

This is the simplest GPS tracking webapp that works for me.

What it does: It logs your location and time in localStorage and submits them to any URL when you click "Submit". That's it.

Without much talking, let's see the code (or the live version).

It has got no map display, speedometer, or whatever. It just logs your coordinates locally into the textarea and localStorage and submits to the URL specified at the top.

This app won't communicate with the server (the URL specified at the top) unless you click the submit button.

Usage (for GPS-equipped iDevices)

Turn off "Auto-Lock" in the Settings app (set it to Never). This app won't track your location when your device is off or locked.
Open Safari and navigate to the web app's URL.
Specify the server's URL.
Tap the "Start Tracking" button.
When tracking, no connection to the Internet is needed.
Once finished, tap the "Submit" button to submit them to the server.

Receiving The Log

My GPS tracker sends the log (contents of the textarea) to the URL specified at the top by using the coords POST variable.

Your script should be able to handle it easily. Here is the script that runs on my server:

<?php file_put_contents('/path/to/gps.log', $_POST['coords']);

Parsing The Log Format

There are 4 kinds of line. A comment line, a start line, a coordinate line, or the failing line.

A comment line starts with --. Your log parser should ignore these lines. For example:

-- this is a comment

A start line indicates the time that the user pressed the "Start Tracking" button. The format is [time] // start. For example:

1302263615830 // start

A coordinate line looks like [time] // [lat] // [lng]. A example of this line:

1302263698765 // 13.797455945576084 // 100.61361547747381

Finally, a failure line indicates that the tracker wasn't able to track the position at a specified time. For example,

1302263678901 // fail

Have Fun With Your Data

Use it with Google Maps API or whatever. Have fun!

I Put Stuff On GitHub

2011-03-16T00:00:00+00:00

I put some stuff on my GitHub profile, but did not mention it on this blog.

You can take a look: https://github.com/dtinth

I also moved several old projects to GitHub:

This month, I'm staying at a computer camp, so I might not blog much.

Shell Script: Testing Gzip

2011-02-27T00:00:00+00:00

I found this old shell script I have written long time ago. I called it httpgztest.

#!/bin/bash
NOGZ=`wget "$1" -q -O- | wc -c`
echo "Without gzip:       $NOGZ"
YESGZ=`wget --header="Accept-Encoding: gzip, deflate" "$1" -q -O- | wc -c`
echo "With gzip:          $YESGZ"
RATIO=`echo "scale=3;$YESGZ/$NOGZ" | bc`
echo "Compression ratio:  $RATIO"
if [ $YESGZ -ge $NOGZ ]; then
    echo "Gzip is not enabled for this URL. Go check."
fi

To use it, run it, passing URL as the argument

httpgztest http://dev.tw.dt.in.th/thaiWitter/js.js

and it shows the compression ratio.

Without gzip:       79851
With gzip:          20839
Compression ratio:  .260

And if the first and the second number are the same, i.e., the compression ratio is 1, then your gzip is not working.

Without gzip:       1820
With gzip:          1820
Compression ratio:  1.000

Serving Mercurial Over SSH, with Passwords

2011-02-25T00:00:00+00:00

I'm doing a website project and I want to put them in a central repository on my server. I prefer to use password authentication on the server. The trick is to tell SSH to always execute hg instead of the shell.

Note: These command are to be executed as root.

Preparing for the environment

I created a /hg directory to hold the repositories.

mkdir /hg
cd /hg

Setting up a skeleton

mkdir skel
mkdir skel/.ssh
mkdir skel/repo
echo > skel/.ssh/authorized_keys
chmod 600 skel/.ssh/authorized_keys

This creates a skeleton directory.

Creating A New User

I do this by copying the skeleton, well, actually, I like doing this manually:

cp -Rp skel hg-rwb
chown -R hg-username:hg hg-username/

Add the new user to /etc/passwd

hg-username:x:3001:3000::/hg/hg-username:/bin/sh

Take note of the group ID 3000, we'll add it in /etc/group

hg:x:3000:hg-username

Add the password:

passwd hg-username

Tell the SSH server to allow only Mercurial

Edit /etc/ssh/sshd_config and add these lines:

Match Group hg
    ForceCommand hg -R ~/repo serve --stdio
    AllowAgentForwarding no
    AllowTcpForwarding no
    X11Forwarding no

Initialize the repository

su hg-username
cd ~/repo
exec hg init

Use it!

hg init
hg add
hg commit
echo '[paths]' >> .hg/hgrc
echo 'default-push=ssh://hg-username@my.secret.server/' >> .hg/hgrc
hg push

jQuery: Checkboxes Toggling Plugin

2011-02-21T00:00:00+00:00

In hurry, I made this simple plugin to jQuery:

    $.fn.toggleCheckboxes = function() {
        var state = false;
        $('input:checkbox', this).each(function() {
            if (!this.checked) {
                state = true;
                return false;
            }
        }).each(function() {
            this.checked = state;
        })
    };

It toggles all the checkboxes inside the matched elements all at once.

This allows you to do something like

$('.toggle').click(function() {
    $(this).closest('tr').toggleCheckboxes();
});

Converting StepMania Stepcharts to Tap Studio

2011-02-04T00:00:00+00:00

Tap Studio 3 is a nice game, but is full of off-synced tapcharts.

This is mainly because of the way the tapcharts are made: It plays the song, the user records the tapchart as the song plays. When the song finishes, you get a tapchart ready to play. In Tap Studio 3, it has a basic UI for editing taps, but you can't be sure that it syncs well with the song, and it fells unresponsive too.

Few days ago, I tried making my own taps, but each song took me a lot of time, because when I record, there will be an error in some point in the song (missing taps, extra taps, offbeat taps).

StepMania is Much Better At Making Notecharts!

Making stepcharts in StepMania is much more fun. You can record notes into your stepchart, or you can choose to add notes one by one. It has a lot of tools that you can use to fine-tune and sync your stepchart.

Also, most of the already available simfiles on the Internet are pretty time-accurate.

So I made a small Python script to convert my .sm files to be playable on Tap Studio, so I can play them anywhere.

Prerequisites

To be able to convert .sm files for playing in Tap Studio, you need:

A Mac.
A jailbroken iDevice, with an SSH server installed.
Tap Studio (either version 2 or version 3 will do).
sm2tap.

Converting Stepcharts

Song Initialization

First, you need to have the song you want to convert in your device.

Then, you need to initialize a song. Open Tap Studio, then go to your song library and pick a song you want. After that, press Record. After the song starts, record only one note and save it.

Copying the Song to Your Mac

Then, SSH to your device, or run a terminal on your device as mobile user, and then issue this command:

find Applications -name '*.tapd'

This should list all the tapfiles you have and the locations where they reside in. Copy the tap file you just created (the one with the song name) to your Mac.

Converting StepMania Notes to Tap Studio Notes

On your Mac, you need to convert the .tapd file into an XML file.

Open a Terminal, and then type in

plutil -convert xml1

then press space, then drag the .tapd file into the terminal window, and then press Enter. You will see that the .tapd file will be slightly bigger.

After that, type in:

python

Press space, and drag these files into the terminal window in order:

My convert.py file.
The .sm file.
The .tapd file.

Then go back to terminal and press enter. You should see a list of available step types that can be converted. Type in the name of the step type and press enter. Your .tapd file should be a lot bigger by now.

Finally, to convert it back into binary format,

plutil -convert binary1

then press space, then drag the .tapd file into the terminal window, and then press Enter. The size of the .tapd file will be reduced.

Copying the Modified Notes Back to Device

Copy this file back into your device. You can now play your simfile on your device!

Enjoy!

CoffeeScripting @ Code Jom

2011-02-02T00:00:00+00:00

Last year, I used JavaScript at Code Jom competition. It was great, and I thought that I will use JavaScript in this year, but not using the old PHP+SpiderMonkey shell. I wanted to try something different, and I was really interested in Node.js and Narwhal.

However, I stumbled upon a question on StackOverflow asking about CoffeeScript, then I looked at CoffeeScript's home page.

When I saw the example CoffeeScript in that page, compared to the compiled JavaScript, I had a feeling that I want to try to use it. The code indeed looked a lot less messy! And because CoffeeScript works with Node.js (it is available as a Node.js package), I went on with Node.js.

First Round

The first round started after I first knew CoffeeScript for less than 1 day. A day before that, I ported my old library for use in Code Jom written in JavaScript into CoffeeScript and used it.

Surprisingly, I felt very comfortable. I felt like I still have all the power of JavaScript, but in a new, cleaner syntax. I finished the first round with a score of 9 (out of 14, ranked third).

Final Round

I prepared for the final round by familiarizing myself with CoffeeScript. I made a simple mashup webapp called Crew Standings in CoffeeScript and using jQuery and YQL.

Because I planned it a bit wrong and went on working on the main scope, things got messed up when I create functions as sometimes it use the variables outside the function's scope (because I used a variable name outside that scope.

But JavaScript (and CoffeeScript) is specialized in string handling, for example, when I need to get the first digit of a number, I can just convert the number to a string and use it. When I want to match a pattern from a string, I simply check the string if it matches a regular expression.

I couldn't do some questions that is based on some algorithm, where some others would be able to do it easily. For example, I was a bit too excited to be able to do the knapsack question.

Also, a lack of fixed multidimensional arrays in JavaScript made things a bit harder, my solution is to put it in an object:

price[p + '-' + m] = ......

But that looked ugly and less straightforward than built-in fixed multidimensional arrays like in C where you can int price[1000][1000];

However, I did it. My team got the first place for the student level.

The Library

I ported the last year's library to CoffeeScript, so that I don't have to learn all the new set of functions.

I used a simple hack for forcing functions into the global scope

(-> # force global scope

    @print = (x...) ->
        sys.print y + '\n' for y in x

).call null

Anything that got added to this will be added to the global scope, thanks to CoffeeScript, this.name can be called @name, so the above code added print function to the global scope.

Here is the full library script:

And a small example:

require './LIBRARY'

for testcase in [1..scanNumber()]
    n = scanNumber()
    print (n * (n + 1)) / 2

Serving Files in Current Directory, the Quickest Way

2011-01-09T00:00:00+00:00

I need to test some HTML files in other web browsers on other computers, but I don't want to temporarily move/copy/symlink these files to Apache's directory. I found the solution:

From the docs,

python -m SimpleHTTPServer 8000

Serves files in current directory to everyone connecting to port 8000! Change the port number as needed.

So I added this to my .bash_profile.

alias serve="python -m SimpleHTTPServer"

Note: If you don't specify a port number, this one defaults to port 8000. So you can just type serve.

My Facebook Friend List Manager

2010-12-28T00:00:00+00:00

(Updated: I changed the link to point to a newer version on GitHub, which also supports groups and negation).

On Facebook, I try to keep all my friends arranged inside at least one list.

But when I add new friends, I usually forget to put them inside a list. I lost them, because I found no easy way to find all the friends that are not in any lists.

That is why I made this:

http://dtinth.github.com/friendlist/

It is a JavaScript application with no server side stuff and this is my first time using Facebook's API.

This tool helps you find them (friends not in any lists) and helps you put them in the right list. This tool can also suggest the list based on their mutual friends with you.

This tool works best when you don't have too much friends, because this tool fetches all of your friends and friend lists at start time. If you have too much of them, not all of them will be fetched and there will be problems. It works fine for me, but I can't guarantee that it will work for everyone.

Works best in Firefox. Untested in other browsers.

Fix Thai Language Floating Tone Marks Problem in mPDF

2010-11-26T00:00:00+00:00

I am working for my school's exhibition web site, which allows students from other schools to register for various competitions and activities in the exhibition day.

At first, there was only a registration website. Later, I am informed that it should be able to generate the report as PDF file, so it could be printed and handed to the academic administration department quickly.

I searched for a PDF generation libraries and decided to use mPDF because its partial support HTML and CSS is really nice and it has UTF-8 support (the database is utf8 encoded).

All is going well, except for some floating tone marks that looks too high.

I wrote a little function that fixes this, it now looks like this:

As you see, the tone marks do not look to high anymore. Here is the code:

To use it, just before added some data to the PDF, wrap it in thai() function. For example,

$pdf->WriteHTML ($table->getHTML());

...becomes...

$pdf->WriteHTML (thai($table->getHTML()));

And that's it. I hope that this can be useful for some people generating PDFs with Thai language.

Test iPhone Web Apps in iPad

2010-11-08T00:00:00+00:00

I wanted to test how websites will look on iPhone on iPad because I don't want to buy another device. After a bit of hacking, I found the solution, but you need a jailbroken iPad.

Here's how (try it at your own risk!):

First, you need to ssh to your iPad, then

cd /Applications/
cp -R MobileSafari.app/ MobileSafari01.app

This duplicates MobileSafari app. (Thanks to this guide on how to duplicate any application).

Then open your file transfer program (I use Cyberduck) and go to /Applications/MobileSafari01.app/

Download Info.plist to your computer, open it with Property List Editor.

Change CFBundleIdentifier (or Bundle identifier) to com.apple.mobilesafari01. This makes iOS know that it's a separate application.

Go to UIDeviceFamily, and then remove the item with the value 2. This makes iOS run the application in iPhone mode.

Save the file, upload it back, and respring. You will have another Safari icon.

One will run in normal mode and another one will run in iPhone mode.

Now you can see how web apps will look like in an iPhone, in iPad. Also, in iPhone mode, Safari will identify itself as an iPhone, instead of iPad!

As the article points out, it will save the settings separately, as far as I have tried, I couldn't see a way to configure the iPhone Safari. If anyone did it, please let me know.

Also, don't run two versions simultaneously, or they may clash with eachother.

Audio Data API in Firefox 4: audio generation demo

2010-10-24T00:00:00+00:00

(Update: I just came back home, so I will fill this post with some technical details)

I just spoke at #barcampbkk4 about the Audio Data API that's coming in Firefox 4.

The demo: http://blog.dt.in.th/stuff/audiodata/

Click for a crash cymbal.
Move the mouse: control the appregiator.
Accelerometer: control pad's lowpass filter (a very simple lowpass)
Sound only, no visualization.

Technical info:

There are 5 samples used: kick, snare, closed hihat, open hihat and crash cymbal. These samples are converted to 32bit float raw file using Audacity (44100 hz, mono), and then are converted to array using a convertor written in PHP. All melodic sounds are generated using an oscillator.

This demo does not use dsp.js because at that time I haven't figured out how to use it.

Instead, it used a very simple approach by putting all tracks in a single array. Each track is an object (or you can say singleton class) which has the following methods:

init will be called at the very beginning, used to set up event handlers (if there are any).
trigger will be called every 1 step. The track can use this moment to update its frequency, etc etc.
sample will be called for each sample. This method needs to return the sample for this track.

At the beginning, the script will call init() method for each object in the array. When the user clicks the start button, it will create 2 timers, one every 60000 / 130 / 4 msec (= 1/4 beat if BPM is 130), and one every sample.

The first timer will call the trigger() method on each object in the array, and another one goes through the array, call the sample() method and sum it up, and commit the audio buffer to the audio tag.

I Just Want to Call Twitter's API With My Own Account!

2010-09-18T00:00:00+00:00

I'm not making a new Twitter client, or a Twitter service. I am not making an app for users to use. I just want to call the API with my account!

I think OAuth is complicated in some situations, especially when you want to do something very simple, e.g. posting a status update from your own account.

Before Twitter killed basic authentication, it was as simple as a single line curl command, but now, it's a lot more complicated.

Introducing OAuth Damnit

So let me introduce OAuth Damnit, a super simple Twitter OAuth library for PHP. This library is for you if:

You just want to make a simple PHP script that calls the Twitter API using your account.
You are not planning to let other users to sign in with your application.
You want to parse the response yourself.

This library is a very simple implementation of OAuth. It's only job is -- given the consumer key, consumer secret, access token, access token secret, and a GET/POST request to an OAuth service -- to sign the request, send the request to the server, and then pass the response from the server back.

I coded it based on abraham's twitteroauth project. Did not really copy any code from there, I just look at it to figure out how the OAuth process works.

Get OAuth Damnit

Get oauthdamnit.php here.

Registering an Application for Your Account

To make OAuth calls as an authenticated user, you will need a consumer key + secret and an access token + secret. To get that you will need to register a Twitter application.

First of all, you will want to create an application for yourself. Sign in with the Twitter account you want to use your application with, then go to http://dev.twitter.com/apps/new and register a new application.

Application Name is what people will see as the source of the tweet. On Twitter it will show as "less than 20 seconds ago via your application name"
Application Website: Put in your website address, so that when people click on your application's link, they will go to your website.
Application Type: Client.
Access Type: Read & Write.

Getting the Keys, Secrets and Tokens

After you register your application, you will be taken to your application's details page. Take note of your application's:

Consumer key
Consumer secret

Now on the right side, click the navigation link that says "My Access Token". Then take note of your:

Access token
Access token secret

Then make a new file to hold your key, token, and your secrets. Let's name it config.php.

Using OAuth Damnit

How to use it? Simple!

To create a new instance of the API object, you just:

$api = new OAuthDamnit(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);

To GET something from the Twitter API:

$raw = $api->get($url, $params);

To POST something to the Twitter API:

$raw = $api->post($url, $params);

Where $url is the absolute URL to Twitter's API endpoint and $params is an array of parameters to send to Twitter API.

These 2 functions returns the raw response from Twitter's API and has not been processed in anyway. It's now up to you to do whatever you need to do with it.

An Example

This example calls verify_credentials method, parses it and displays the output.

An example of a POST request:

$raw = $api->post('http://api.twitter.com/1/statuses/update.json', array('status' => 'Testin it again!'));

That's It

Oh and if my library somehow doesn't work (it worked for me), please try to fix it and send me a correction. Thanks!

Thor, Technical Pattern Wallpaper

2010-09-13T00:00:00+00:00

This is a wallpaper of the DJMAX TECHNIKA note pattern of the song Thor.

It looks very hard, so I made a wallpaper of it. 1280x800.

You Can Distort Time. At Least in JavaScript.

2010-09-08T00:00:00+00:00

Tested on Firefox. Untested on other browsers. :P

Couple of hours ago something crazy came to my head. I want to control the flow of time by manipulating the Date() constructor and see what's gonna happen.

So I wrote this code. This JavaScript code makes the Date() constructor slow down 4 times.

For example, if I inject the JavaScript at 12:00 PM, then wait 4 minutes, and check the current time, it will say 12:01 PM. You get the point.

The setInterval and setTimeout function is also modified to be slower.

As a live example, I have included the script on this page too. All animations on this page will be 4 times slower! Compare it with the home page!

You can also have the slow down bookmarklet.

Try it! Drag the bookmarklet to the bookmarks bar, and then go to some site with animation effects (for example, http://jquery.com/) and activate it. You will see that all the animations in the page will be 4x slower.

The bookmarklet will not work with some websites or JavaScript frameworks that keeps the original Date constructor and use it, but as far as I know, jQuery always use the Date constructor currently present in window.

This bookmarklet will not work with CSS transitions.

........................

I'll see if I can do something fun with this.

Userscript: Drag and Drop Upload for upic.me, making of

2010-08-15T00:00:00+00:00

I have just seen upic.me's new style. It looks really nice. At the same moment, I feel that it would be nice to be able to drag and drop pictures from my computer to upload that picture. I knew it was possible because I have seen this. So I started coding and here's the result:

upic.me Drag and Drop Upload

After installing this userscript, try going to http://upic.me/. The box should say "drop here to upload picture" instead of "click there to upload picture." Try draging some pictures from your computer and drop it on the website. The image you dragged should upload right away.

This best thing about this is it handles file uploading by itself. It does not require Flash at all.

Update 2012-06-29: Now we have the FormData API, the following is not needed anymore!

Also, the code here is extremely outdated and uses unsupported nonstandard deprecated APIs such as file.getAsBinary and xhr.sendAsBinary that no longer work in any browser anymore. Just use the FormData API!

If you want to implement this on your own userscript or your website, feel free to copy it from my code. You should also read this to learn how to setup drop boxes: Using files from web applications#Selecting files using drag and drop.

~~The uploading part is the one of the hardest parts. That is because you need to create the POST request payload by yourself.~~

To do this, first, you can just set up XMLHttpRequest normally.

    var xhr = new XMLHttpRequest();
    xhr.open ('POST', '/upload.php');
    xhr.onreadystatechange = function() {
        // ...
    };

Then make a progress listener if you want to keep track of the progress.

    xhr.upload.addEventListener ('progress', function(e) {
        if (e.lengthComputable) {
            // e.loaded = amount of data sent
            // e.total = total amount of data
        }
    }, false);

Now we need to prepare the payload the boundaries.

    var payload = '';
    var boundary = '---------------------------53748593789457348248012312';

So I made this 2 utility functions that will help you.

The first function adds a normal field data to the payload. You will use this for normal form input fields, such as hidden or text input.

The second function receives a HTML5 File object and adds it to the payload.

    function addFormField(name, value) {
        payload += '\r\nContent-Disposition: form-data; name="' + name + '"\r\n\r\n' + value + '\r\n--' + boundary;
    }
    function addFile(name, fileName, file) {
        payload += '\r\nContent-Disposition: form-data; name="' + name + '"; filename="' + fileName + '"\r\nContent-Type: ' + file.type + '\r\n\r\n' + file.getAsBinary() + '\r\n--' + boundary;
    }

So after you prepare the payload using these 2 functions, now we have a huge string of data waiting to be sent to the server, so now let's upload it!

    xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
    xhr.setRequestHeader("Content-Length", payload.length);
    xhr.sendAsBinary (payload);

If you want, you can also see the source code of my userscript. That's it for today's blog post.

TNK Grid

2010-08-13T00:00:00+00:00

First of all,

Browser support: Firefox
Operating system support: Linux and Mac (I'm sorry Windows users)

This is a little bookmarklet for DJMAX TECHNIKA players (who uses Linux or Mac). It displays a grid line overlaying the web page. It can help you time the notes, so that when you play, you know exactly when to activate that note, because now you know where exactly the note is.

Suppose you are watching a video of DJMAX TECHNIKA on YouTube.

You just click on the bookmarklet, and you see a gridline in front of you. You drag the handles of the gridline to fit it on the YouTube video.

You can then see how the notes are timed.

In the above picture, thick line represents a "beat" in the song, while thin line represents a "step" or "1/4 beat" in the song.

Note that in DJMAX TECHNIKA, the curvy dragging notes seems to be shifted slightly toward. It's not really related to this, so see this discussion on activation of different types of note in DJMAX Technika for more information on it.

Get TNK Grid: Click here to install TNK grid.

On that page, drag the blue link to your bookmarks toolbar. If you don't see a link labelled "TNK Grid 2," then you need a better browser.

To use, click on the "TNK Grid 2" item on your bookmarks toolbar, you will see a grid. Drag the handles (the borders) of it to size it according to the video.

You can click on the gridlines to switch the direction of that grid. This makes it possible to see the timing of videos with "left swipe", "right swipe" or "reverse swipe" effect added.

By the way, it also works with TECHNIKA 2!

phpQuery makes scraping a hell lot easier.

2010-07-18T00:00:00+00:00

phpQuery is a PHP port of jQuery, so if you know how to use jQuery and PHP, you can easily use phpQuery. It's really awesome.

You just need to see it: http://code.google.com/p/phpquery/

I am using phpQuery for my DJMAX TECHNIKA Score Tracker's backend code which fetchs the score from Platinum Crew's website and puts it in MySQL table every 4 hours, which is then used by the frontend. It also uses the DJMAX Technika API (Thailand only ;)) to fetch some data instead of scraping in order to save bandwidth.

I made a simple utility function that makes scraping tabular data from web pages a lot easier.

All you need to do is throw in a selector for each column on that page. Just make sure that the selector for each column yields the same number of matching element, and then the function uses a parser function, which you define, to take that element and turn it into value.

You can find the selector for the column you want easily using SelectorGadget.

For example, the following code scans the DJ Title Rank page from Platinum Crew (Thailand)'s website for top 15 DJs.

Note that the callback function that I use is a class member of the PCParser class. That's why you see the callback function in arrays. Now here's the output.

It works like a charm. Whenever the website's design is updated or changed, I just update these selectors (using SelectorGadget gives me the selector in less than one minute) and everything works again.

My Facebook Account Was Blocked

2010-06-18T00:00:00+00:00

I am at school and I want to sign in to Facebook chat from my mobile phone. It is a Nokia 5630. I downloaded eBuddy Mobile from the Ovi Store, but as soon as I sign in to Facebook, it says "wrong username/password."

So I opened up Opera Mobile to sign in to Facebook, but it says:

So maybe it's eBuddy's server accessing my Facebook account, so I just continue. The next step is pretty easy: confirm using my mobile phone.

I waited for more than 10 minutes, and no single SMS, so I left the fields blank and confirm the code. I tried this several times, but no SMS sent. I kept retrying.

...until Facebook sends me to this screen:

That looks very fun and exciting. I mean, it is just like a game. If I can remember people's face correctly then I can get my account back. So I pressed Start and then Facebook starts showing me pictures of my friends:

Well, A Technika screen? I never have a friend as a Technika screen. I have seen many Technika screens before and they all look the same. I don't even know their name, so who could this be? I have no other choices. I need to skip this question to get my Facebook account back.

Now a Facebook logo? Seriously what the fuck is this? I only have 2 skips, and again, I need to use it.

Then I see a photo where I can recognize the face, but...

....but look at these names! How can I know which name to choose? I also run out of skips. So I failed the tests, however, it's good that I have unlimited retries. Just sign out and sign in again.

I keep retrying until I can get pass through it. It appears that eBuddy's server accessed my account and Facebook never see me using eBuddy, so Facebook locked my account.

Now that my account was unlocked, I tried again, and then access to my account is blocked again and I have to through all the steps again. I forgot that eBuddy have many servers around the world. When I sign in the second time, it is from another server. I will never try it again. I will just stick with Nimbuzz. :D

Total time wasted: around 2 hours.

From my experience with Facebook, combined with what happened to me today, I see these things very annoying on Facebook:

Tagging People Who Has Nothing To Do With A Photo

I always remove my tag from photos that I am not in. I recommend that you do it too.

Usually when people want to share a photo with their friends, they tag their friends in this photo. To me it seems not right. I think that it's best to tag people in a photo if he/she is actually in the photo.

So how to share your photo with your friends? I think that the best way to use the share feature in Facebook. To share it with all your friends, just click "share" on the sidebar and post it to profile.

Want to share it with only a number of friends? Click "share" on the sidebar, and then click on "send as a message instead." You can then choose who to send to.

Using An Alias For Their Name On Facebook

Most of the time I will never accept friend requests from people who don't use a real name. This is just my personal opinion. I am just annoyed.

On Windows Live Messenger, I can assign a personal alias to their contacts on their contact list, so I will know who is who. However on Facebook I can't.

To me, Facebook is different from other social networks. Unlike Twitter or Windows Live Messenger, I think that Facebook is where I can get in touch with people I already know and I will only be friends with people I already know. For Twitter and Windows Live Messenger that I use to chat and meet random people.

So... that's all for this blog post.

Poem Remembering WIN

2010-06-04T00:00:00+00:00

Sometimes the most dangerous place is the safest place!

บางที ที่ที่อันตรายที่สุดก็อาจจะเป็นที่ที่ปลอดภัยที่สุด...

Explaination: The picture above is of Thai language class, where everyone needs to remember a 20-line poem, and say it aloud to the teacher without reading it (or let the teacher see that you are reading it).

You don't need to know the victim's IP address to crack their PC.

2010-06-03T00:00:00+00:00

I have been chatting with a random guy, in Thai language. The following chat transcription is translated (and is slightly modified).

First, it was a normal chat. And then he starts out: I am a hacker, white hat hacker. I use my skill to fix others' computer problems without them knowing it. I think like... really? Let me check if you really are one.

So first, let me ask you some basic question first.

> What Windows are you using?
< No, not Windows. It's a specialized system for hacking.

So I guess he must be a Linux user. What else could it be? Mac? ~~Specialized for hacking? No way.~~

> So do you know what version of Windows I'm using?
< Either Windows XP or Windows 7
  So do you use XP?

Obviously, if one does not use Windows XP, they will probably use Windows 7. Vista sucks.

> No.

Again, it's 50% chance, and he has failed.

< So it must be Windows 7.
> Obviously, but why can't you get it right at the first place?
< It's really hard to see. I have to dig through millions of number.
  However, I can get the right answer if I want it.
  But hey, Windows 7 is a very good operating system—
  it offers good protection!

I already knew about the protection thing of Windows 7, but millions of number? Windows XP is 5.1, and Windows 7 is 6.1. Just look at this damn string, is it so hard to figure out?

> Do you know my IP?
< It will take a long time. There are billions of IP.....

While I chat with that guy, I made a page that just redirects the viewer to a Wikipedia article about TCP/IP, and gave that link to him, shortened using bit.ly.

> Well, I suggest that you read about this: http://bit.ly/.....
  You should learn about TCP/IP.

He clicked on it. His IP address and user agent string is recorded on the server's log. It shows that he is using Windows XP, and not any kind of a specialized operating system.

We continued chatting for a while, then I decided to surprise him a bit.

> I will tell you something. Your IP is 124.122.___.___.

But that guy keeps "tae"ing.

< Hahaha, that was my fake IP.
> Yeah, but I can tell your "fake IP" in seconds.
  So what's your real IP?

I think that the IP I found is already a real IP. If it's not then he must be using a proxy server.

But the next thing shocked me.

< I'm not gonna tell you my real IP. But here's a hint:
  My IP starts with 192.16

What the fuck.

< And that IP address was the IP address of my server. I put it at Korea.

That IP address comes from Thailand. Everyone knows it.

> Let me tell you something. 124.122.___.___ is a Thailand IP address and not Korea. You're also using True Internet.
< But the server is really at Korea.

I then completely ignored this guy.

That was just for fun. I hope that he didn't take it too seriously. Heheh.

Edit 2012-06-29: made few changes to the text to make it more clear.

Shuffle for Booklet

2010-05-28T00:00:00+00:00

I have a reading record homework, where I have to read 10 stories, write the details about them, give them point of views, and write down 10 new vocabularies for each story. It needs to be printed on an A5 booklet, that is, one A4 paper folded in half to form 4 A5 pages.

First, I made the template in iWork, but then I realized that iWork can't make booklets. I think that I will use FPDF and FPDI to do this job.

So here's the thing I am doing.

Input Data: A pdf file of A5 pages.
Output Data: An A4 landscape PDF file with all the pages shuffled for printing booklets.

But I found out that I can only output from first page to the last page, so I need to know first how to print a booklet of N pages. This is the topic of the blog post, which shows you the most straightforward way of computing which input page goes to which side of the output pages. Here's how the algorithm work.

First, calculate the number of papers needed for N page, which is ⌈N / 4⌉ For example, I want a booklet of 16 pages, I need 4 pieces of paper. That means 8 pages.

Then, put these papers on top of each other, fold them in half. You get booklet like this.

Starting from the front of your booklet, label that page 1, then turn your page, label it 2 and 3. Do this for all pages.

Now you know what to print on each page.

Transform the above instructions into code. I get this.

An example...

P.S. I should have seen ps2book before I start writing this.

How I installed drivers on my dad's PC.

2010-05-21T00:00:00+00:00

I just re-installed Windows for my dad's PC. It does not come with any drivers.

I can't set the screen resolution, I can't play sounds, I can't go to the Internet to download drivers. The first thing that came to my mind is to use Ubuntu.

I inserted the Ubuntu Live CD, and I found out that everything works! So I used it to find out the drivers I need, and I downloaded them and installed them.

So, here's how to do it.

Insert Ubuntu Live CD and boot.
Go to System, then Administration, then Software Sources
Enable the universe.
Select the mirror close to you.
Close but do not update yet.
Open gnome-terminal.
sudo apt-get update
sudo apt-get install hardinfo
hardinfo
Click on the generate report thing. Save your report file somewhere.
Copy the report to your flashdrive, or scp it to other unix PC.
Now, on another PC with internet access, open the report that you have just copied. Look for the PCI section, go and download the driver from manufacturer's website. Copy it, and install it. I recommend that you install the network / wifi drivers first, so you can continue on that computer.

Abscapture - Take Screenshot with Transparency (for Linux)

2010-05-17T00:00:00+00:00

It has once been posted on my old blog, since my old blog is gone forever, I'm going to re-post this tool.

Abscapture is a tool written in Python that allows you to take screenshots with alpha transparency.

This tools work by capturing 2 screenshots. The first screenshot is the object on black background. The second screenshot is the same object on white background. The application then merges these 2 images together using a simple algorithm, producing a alpha-blended version of it.

Here is an overview of an algorithm.

Finding the alpha component. Because in each pixel, the red, green and blue components shares the same opacity (which is the alpha component), here is a way to find the alpha channel.
- Let B is the average of red, green and blue components of each pixel on the black image.
- Let W is the average of red, green and blue components of the same pixel on the white image.
- The transparency of that pixel in the resulting image is simply W - B. Imagine these examples.
  - If the pixel is opaque, then B will be equal to W. The transparency is 0%.
  - If the pixel is transparent, then B will be 0% and W will be 100%. The transparency is 100%.
- The alpha/channel opacity is the 100% - transparency or 100% - W + B.
Finding the color component.
- Let V_b be the value of a component (red, green, or blue) of a pixel on the black image.
- Let V_w be the value of that component of that pixel on the white image.
- Let V_r be the value of that component of that pixel on the resulting image.
- Let A be the opacity of that pixel (calculated using above formula).
- You can see that:
  - V_b will go towards 0% when opacity decreases, while V_w will go towards 100% when opacity increases.
- We can find V_r by solving two simultaneous equation:
  - V_r * A = V_b
  - V_r * A = 100% - V_w
- That means: V_r = V_b / A.
- There is a case where the pixel is transparent, A = 0. There is a need to check for it too or it's division by zero.

Now, let's see how the resulting image looks like:

Try it! Load the above image in GIMP and see the transparency for yourself.

Download!

Download it! abscapture-2010-05-17.tar.gz

How to use abscapture?

First, install scrot.

After you extract the files, double click on abscapture.py and click "run."

A dialog box will open, telling you to set up the scene.

Minimize all windows that you don't want in your screenshot. Leaving only the desktop, the panel and the windows you want. When you're ready, press OK. You will have 5 seconds to open up menus, tooltips, or additional elements you want in your screenshot.

After 5 seconds, the desktop changes to white. About 3 seconds later, the desktop changes to back. 3 seconds and then the desktop returns to normal. A window with a progress bar will appear. Wait for it to finish. That window with progress bar closes automatically when finish. You will have the file result.png which is your screenshot!

And again, I hope that someone will pick this up and improve this tool or incorporate the feature of this tool into other software.

Please add a comment if you have done so, or if you just want to say thanks, that's OK too!

Blurry Text using CSS 3

2010-05-14T00:00:00+00:00

This is an effect I have been using in a hidden feature of #thaiWitter, where a text pops up, and then blurs and fades away.

I will show you how it looks like:

Hello, World!

This effect can be achieved using CSS3. By setting the text to transparent and give it a text shadow. However this won't work on WebKit, because on WebKit browsers, if a text is transparent, then its shadow is transparent too, so in the example above you see nothing. Don't know how it looks like on Opera because I don't care. Anyway here's the code:

color: rgba(255, 255, 255, 0);
text-shadow: 0 0 10px #fff;

Oh and for IE, just use progid:DXImageTransform.Microsoft.Blur then. In fact it works for images too, not just text.

I Bought an In-Ear Earphone From Japan.

2010-04-29T00:00:00+00:00

I came back from Japan 3 days ago.

While I was at the airport I decided to buy some good earphones. So here's my new earphone.

And when I open it...

Look closely....

Ah.

But it sounds very nice anyway.

Grader in 35 lines.

2010-04-28T00:00:00+00:00

So we're doing some programming tasks at the computer olympics camp. My friend has got the task descriptions and all the testcases for the last year's competitions.

Now that everyone has finished their codes, we need to grade them and see if....

The output is correct.
The code runs in time.
The code uses not much memory (but I don't know how to check it, so skip it :D)

But I don't have a grader so I came up with this real quick.

So there you have it. Read the code to know how to use it.

My Color Tester

2010-04-27T00:00:00+00:00

I'm customizing my text editor's syntax highlighter.

Usually I start by opening the text editor's option, pick a syntax item and then pick a random color. Apply and see if it looks nice. But then I realize that it doesn't work very well.

Why? Because there are no plans for what part of a syntax (number, strings, statements) belongs to what color.

So I need to plan all the color first before I can actually use it in a text editor. So I came up with this.

My Color Tester

So to use it, type in some color codes. The first color will be displayed as a background, and the rest will be displayed as text. Still don't get it? Here's a sample. If I typed

#ffffff
#10a520
#aab512
#984151

The result will look like this:

You can also include some text too to describe the color. So here is my color scheme.

#232323
#dadada for normal text
#80ceff for preprocessors
#80ef50 for comments
#d0f979 for characters
#f9f979 for strings
#ecb760 for keywords
#f08686 for numbers

And here's how it looks like.

Putting it in my favorite text editor, it now looks like this.

Maybe I will use this scheme for all other codes that I may post on this blog too.

And oh, I came up with this color scheme because I have bought a black (in fact, it's dark gray) notebook from Japan. All the pages are in dark gray and they need special pens to write on it. So I played with these colored pens and black papers and came up with this color scheme.

With this color scheme, codes will have hot colors, so yellow for strings, red for numbers and orange for keywords. Comments and preprocessors have colder colors so they stand out.

So that's it, hope you like it.

By the way I'm going to a computer olympics camp tomorrow, so I may post some C stuff here lol.

Stopwatch

2010-03-28T00:00:00+00:00

I was at a computer camp (today I came back to my home but I'll go back to the computer camp for three more days after posting this).

I learned about sorting algorithms (and their efficiency) and we took the pre-test.

I have to explain about sorting algorithms and do some data sorting on paper using various algorithms. I got 15 numbers and the test says that I have to sort these data using Insertion Sort, Selection Sort, Merge Sort and Quick Sort, and I have 45 minutes to do it. I didn't finish it in time, so I have to practicing about sorting on paper.

So I wrote some numbers on the paper, and use my stopwatch to record the time I use to sort it.

But I don't have a stopwatch... So I decided to open the Terminal and do this:

time cat

The timer start, and when I want to stop, I press Ctrl+D, then it tells the time! :P

JavaScripting @ Code Jom

2010-02-12T00:00:00+00:00

Update 2012-06-23: Now that we have Node.js, this isn't needed anymore. Yay!

I've been to Thailand Code Jom today. It's a programming competition but it's focused on speed.

Competitors can use any language they wish to use. It works by downloading a test case, run it through the program you wrote, and then upload the result. Pretty much like Google's Code Jam.

My preferred language is JavaScript, and here's how I use JavaScript in this event:

I installed SpiderMonkey JavaScript Engine and it's JavaScript shell, so it can be called from terminal and other shell scripts.
I wrote and used this PHP script that takes the code, the input file, run it and spit out the output (both to the Terminal and to a file)
The script takes 2 arguments: the code file name and the input file name.
The script generates a script that stores the input file content in the variable called "input", includes the file "lib.js", and then pass the code to the function "runCode()"
Here's the file lib.js. It contains the frequently used functions and utility functions.
After that, then run the script like this: ./run code.js input.txt
Whatever the script prints out will be saved to a file CODEJOM_OUTPUT.txt

Here's the functions in lib.js.

var x = scanNumber() scans a number from the input file and returns it, and remove it from the variable input. Pretty much like scanf("%d", &x);
var x = scanWord() scans a word (sequence of non-whitespace characters) and returns it, also remove it from the variable input.
var x = scanText() scans a line of text (non-whitespace characters followed by any characters except newline) and return it. Removes that line from the variable input. Like fgets'ing from stdin.
var x = scanArray() scans the entire input file into an array where each array element is one line.
generatePrimeDB(upto) generates all prime numbers upto a specific number. Returns a JavaScript object, which, if an element with that number as a key doesn't exist in the returned object, then it's a prime number. The object also contains a "list" property, which is an array of all prime numbers from 2 to the specified number.
And the function runCode() which is internal to the run script, so don't use it in your code.

Here's how simple the code for the second example in this page can be.

var n = scanNumber();
for (var i = 0; i < n; i ++) {
    var word = scanWord();
    var len = scanNumber();
    var o = [];
    for (var j = 0; j <= word.length - len; j++) {
        o.push (word.substr(j, len));
    }
    o.sort ();
    print (o[0]);
}

By the way I forgot to include JavaScript Port of BCMath library in the lib.js file. With it I could compute very large numbers easily.

Will be AFK for 3 days.

2010-02-06T00:00:00+00:00

...because I'm going to Khao Chon Kai.

By the way I published this post from mobile phone.

A Quick Way of Getting Your Public IP Address

2010-01-09T00:00:00+00:00

My ADSL USB MODEM that is connected directly to my server is broken. Now I need to use a router instead.

However, I can't get noip2 to find my public IP Address, but there is noip2 -i (your ip address).

So here is my solution:

Whenever you want to use your public IP address, just type:

`curl http://ip.appspot.com/`

And that's it, so my noip2 command would be like:

sudo noip2 -i `curl http://ip.appspot.com/`

HCF Function in PHP

2010-01-09T00:00:00+00:00

I just learned more about recursive functions.

So I made this little function in PHP.

function hcf($a, $b) {
    if ($b > $a) return hcf($b, $a);
    if ($b == 0) return $a;
    return hcf($b, $a % $b);
}

function hcf_array($array) {
    if (count($array) < 1) return false;
    if (count($array) == 1) return $array[0];
    array_unshift ($array, hcf(array_shift($array), array_shift($array)));
    return hcf_array($array);
}

Function hcf($a, $b) finds the HCF of $a and $b.

Function hcf_array($a) finds the HCF of array $a.

May be useful in the future.

My sound slicer

2010-01-08T00:00:00+00:00

(This article should be very confusing for you to read, sorry, but I can't explain this tool I made very well)

When I was very new to BMS making I use Audacity to slice the sounds to make keysounds manually. It's very tiresome!

So I made a tool to slice the wav files into parts. Written in PHP:

GitHub: https://github.com/dtinth/sound-slicer

Then, for example, I have a .wav file called "x.wav", I need to make a text file called "x.txt" and type in some beats.

Syntax:

120bpm
16th
,..,..,. ,..,..,.
,...,... ,...,.,.
12th
,,,,,, ,,,,,,

Here are the explainations.

120bpm -> The BPM of the wav file is 120 (changes the tempo, affects the commands after it)
16th -> 1 measure is divided into 16 steps (changes the step size, will affect the commands after it)
, -> Starts a new wave file and put 1 step into that file.
. -> Put 1 step into the last file.
Other texts are treated as comments.

So from the above text file, the application would slice the wav file like this:

0.000 sec
0.375 sec
0.750 sec
1.000 sec
1.375 sec
1.750 sec
2.000 sec
2.500 sec
3.000 sec
3.500 sec
3.750 sec
4.000 sec
4.167 sec
4.333 sec
4.500 sec
4.667 sec
4.833 sec
5.000 sec
5.167 sec
5.333 sec
5.500 sec
5.667 sec
5.833 sec (and lasts for 0.167 seconds)

The generated files will be saved in the folder called "wav". You can them import and use in BMSE.

Update 2012-06-23: Updated links to GitHub.

Typentilt: Type and Tilt!

2009-12-18T00:00:00+00:00

I made something long time ago since I heard the news about accelerometer support in Firefox 3.6.

I use a MacBook and MacBooks has accelerometer built in, so I made this. I call it Typentilt, which comes from from Type and Tilt!

To use it just open it in Firefox 3.6 beta 4 or later, type some text in and then rotate your MacBook vertically. The text you type appears, filling the browser. It's best to use this in Full Screen! (Cmd+Shift+F in Firefox 3.6)

Download: typentilt.zip

Update 2012-06-23: The MozOrientation is now the standard called "DeviceOrientation" API. And while Firefox claims that it's working, as of writing it doesn't. You should try it on Google Chrome, instead.

I also moved the files to GitHub: http://dtinth.github.com/typentilt/

I Hate Writing Poems

2009-12-13T00:00:00+00:00

I hate writing poems
I hate writing rhymes
Wanna know what's the problem?
That's because I don't have time!

I wasted all the minutes
On play cards
That's why I came up with this shit
Don't know where to start

But now I can do it
I am very proud
I'm writing this in the last minute

I'm back from an English camp with AYC. In the English camp they told us to make a poem for the funny poem contest since the first day of camp (it's 3-day camp) but I didn't have time to think about it. Just practicing the talent show and play play play play.

So in the last day I came up with this stupid poem. And because I wrote the last line in the last minutes, that's an abrupt end.

Finally, the staff adds in the final line:

I'm singing but I've got no crowds.

End of the Moonlight, Technical Pattern Wallpaper

2009-12-09T00:00:00+00:00

Well. Finally I can reach the last stage of the Challenger Set. The last song is "End of the Moonlight" (but if you play better you may get "Fermion". I'm not yet that good). Still, I can't pass this song.

So I made this:

Made using JavaScript and Canvas.

Monitoring Web Pages

2009-12-04T00:00:00+00:00

My friends wanted my help. There is a locked forum topic that will open for reply in the next 20 minutes. He needs to reply on that topic as soon as it is available.

I used this script.

#!/bin/bash
URL='the url you want to monitor'
MATCH='the text that if match, means that the topic is still locked'
while true; do
    if (curl "$URL" | grep "$MATCH"); then
        echo '!!!!!!!!!!!!!!!!~ Not Yet'
    else
        echo '!!%$$%!%$#@$%#$%@%$%$!#%$!%%^!%^@%^!%^@!! NOW!'
    fi
    sleep 60
done

So this bash script just periodically checks that page until the match is not found.

The reason why I need to make a bash script is because I forgot to install the ReloadEvery extension for Firefox.

JScript Hypertext Preprocessor

2009-12-01T00:00:00+00:00

I and my team are in a HTML website making competition. We can use only text editors and other tools unrelated to building websites. Here's what they have

Windows XP
Adobe Photoshop
Macromedia Flash (Yes, Macromedia.)

I asked the staff to let my team install some more applications:

Notepad2
GIMP

With these 2 applications, I can write HTML codes more comfortable.

But I still need a way to quickly generate templates (e.g. the header, menu, footer) so when I change something I don't have to edit all the files. Something like a templating system. It makes me think of Windows Scripting Host. What about making a .bat file that runs a JScript script that processes text file?

So I wrote this something that I call it "JScript Hypertext Preprocessor." I will start by creating a working directory for the web. In this post I will refer as "C:\Web". Create the directory structure as follows:

C:\Web - The working directory.
C:\Web\Dev - All the website files will stay in here.
C:\Web\Dev\include - The .jshp files that you don't want to make it publicly available.

And these 2 little file.

C:\Web\Build.bat

cd %0\..

cd Dev
for /r %%i in (*.jshp) do wscript ..\Eval.js %%i
cd ..

del /s /q Publish
xcopy /s /i Dev Publish
cd Publish
del /s *.jshp
rmdir /s /q include
cd ..

C:\Web\Eval.js

var _sh = WScript.createObject('WScript.Shell');
var _fs = WScript.createObject('Scripting.FileSystemObject');
var _sn = WScript.arguments(0);
var _ob = '';

function alert(x) {
    _sh.popup (x + '');
}

function include(x) {
    var file = _fs.openTextFile(x, 1);
    var content = file.readAll();
    file.close ();
    return content.replace(/[^<]+|\<\?jshp([\s\S]*?)\?\>\s*|\<\?=([\s\S]*?)\?\>\s*|[\s\S]/g, function(a, b, c) {
        if (b) {
            return b + '\n';
        }
        if (c) {
            return 'output(\'\' + eval(unescape(\'' + escape(c) + '\')));\n';
        }
        return 'output(unescape(\'' + escape(a) + '\'));\n';
    });
}

function output(x) {
    _ob += (x);
}

echo = output;
print = output;

function output_file() {
    if (_ob.match(/^\s*$/)) return;
    var file = _fs.createTextFile(_sn.substr(0, _sn.length - 4) + 'html', true);
    file.write (_ob);
    file.close ();
}

eval (include(_sn));
output_file ();

Very tiny, isn't it?

Now, to use it, I will show you some bit of code.

C:\Web\Dev\index.jshp

<?jshp eval(include('include/config.jshp')) ?>
<!DOCTYPE html>
<title>Homepage - <?= siteTitle; ?></title>
<body>
<h1>PI = <?=Math.PI?>!!</h1>
<p><?jshp
     showGenerated ();
?></p>
</body>

C:\Web\Dev\include\config.jshp

<?jshp

var siteTitle = 'My Web Site Title';

function showGenerated() {
 print ('Generated: ' + new Date().toString());
}

?>

Then double click on "Build.bat".

If you go and look into the "Dev" directory, you will see that "index.html" file is generated. It is generated from .jshp file.

You will note that there is also a directory called "Publish."

That directory is, in fact, a copy of the "Dev" directory, with .jshp files and the include directory removed.

Here are the list of functions you can use:

Functions from JScript.
alert(text) - Displays an alert.
output(blah), print(blah), echo(blah) - Prints the text into the .html file.
eval(include('filename')) - Like include in PHP.
print(include('filename')) - Like readfile in PHP.

The open and close tags are <?jshp and ?>. I use the PHP styles because text editors with syntax highlighting will treat it as PHP code.

Oh and about the competition, here is the list of scoring points:

Use frames (10 points)
Beautifulness of design (10 points)
Use of animations (10 points)
Content layouts (10 points)
And something I didn't remember (10 points)

I didn't use frames because I can't remember how to write it. However I used an iframe on one page. I hope that it counts as frames!

For animations, I just use a subtle animation in the header part so that it does not distract the whole page.

When the result is out I will tell you.

Linux: Fixing bad sectors the DtTvB's way!

2009-04-20T00:00:00+00:00

VMware made a bad sector on my hard disk, maybe because of the electricity that go down.

Anyway, 2 days ago, I can't access the virtual machine because whenever I boot it up, the system locks up. When I switch to the console, I saw something like this: { DRDY ERR }, { UNC } and some random numbers!

ata4.01: status: { DRDY ERR }
ata4.01: error: { UNC }
ata4.01: exception Emask 0x0 SAct 0x0 SErr 0x0 action 0x0
ata4.01: BMDMA stat 0x44
ata4.01: cmd 25/00:08:1e:0a:ab/00:00:54:00:00/f0 tag 0 dma 4096 in ...

I ran SMART check:

SMART overall-health self-assessment test result: PASSED

I ran fsck and everything was clean.

So, what could be the problem?

After 2 days of searching, I can identify the bad sector and move it out of my way.

Based on Kurt Roeckx's article "Finding which sector belongs to which file on a RAID device," from the line with random hex number above:

00:08:1e:0a:ab/00:00:54:00:00

Now I know that the random number at the top is not random anymore!

Ok, so the bad sector must be at 0x54ab0a1e, which equals to 1420495390. So I tried copying that sector over to other file:

dttvb@dttvb:~$ sudo dd if=/dev/sdb of=/media/disk-3/test skip=1420495390 bs=512 count=1 iflag=direct
dd: reading `/dev/sdb': Input/output error
0+0 records in
0+0 records out
0 bytes (0 B) copied, 24.5439 s, 0.0 kB/s

See? It cannot copy. Let's change from 1420495390 to 1420495389 (minus one):

dttvb@dttvb:~$ sudo dd if=/dev/sdb of=/media/disk-3/test skip=1420495389 bs=512 count=1 iflag=direct
1+0 records in
1+0 records out
512 bytes (512 B) copied, 0.0218896 s, 23.4 kB/s

Or plus one:

dttvb@dttvb:~$ sudo dd if=/dev/sdb of=/media/disk-3/test skip=1420495391 bs=512 count=1 iflag=direct
1+0 records in
1+0 records out
512 bytes (512 B) copied, 0.0255337 s, 20.1 kB/s

Ok, so the problem is sector number 1420495390. Now I have to identify what partition that causes the error.

dttvb@dttvb:~$ sudo fdisk -lu
   Device Boot      Start         End      Blocks   Id  System
.........      ..........  ..........    ........   ..  ......
.........      ..........  ..........    ........   ..  ......
/dev/sdb4      1240571430  1426073984    92751277+  83  Linux
.........      ..........  ..........    ........   ..  ......
.........      ..........  ..........    ........   ..  ......

I removed all other entries so that you can focus on only one entry. 1420495390 (the bad sector) is between 1240571430 and 1426073984, so it must be on this partition! Let's unmount it first.

sudo umount /dev/sdb4

Subtract the bad sector number from the start number:

1420495390 - 1240571430 = 179923960

And convert it to blocks:

(179923960 * 512) / 4096 = 22490495

Change 4096 to the block size of your file system. Now I have the block number, I ran debugfs on my file system:

dttvb@dttvb:~$ sudo debugfs /dev/sdb4

Find the inode:

debugfs:  icheck 22490495
Block   Inode number
22490495    3956755

And find the file name:

debugfs:  ncheck 3956755
Inode   Pathname
3956755 /VM/WIN2/*************************************.vmem

Alright. So it's a .vmem file. Based on this article, .vmem file is just a backup file when the virtual machine is not shut down cleanly, well, may be because of electricity. Let's reserve it as a bad sector my moving the file elsewhere (I am not brave enough to dd directly on this to reallocate).

debugfs:  q

This returns you to the shell. Let's mount the file system. (Normally I mount it at /n)

dttvb@dttvb:~$ sudo mount /n

Ok.

dttvb@dttvb:/n/VM/WIN2$ mv *************************************.vmem ../bad-sector.001
dttvb@dttvb:/n/VM/WIN2$ rm *************************************.vmem.WRITELOCK

Ok, now you have get rid, uh, I mean, move the problem out of your way.

And now I can boot my virtual machine happily, and everything went back to normal. XD

Mac OS X's say command

2009-03-01T00:00:00+00:00

This isn't new at all, but I like it a lot. The say command is very handy when you want your Mac to say something. You can use the say command from the terminal, via SSH, or on a web application that can execute the say command on the Mac.

Lately, I made a small web app running on the Mac, with an intention to access it from localhost only. I made an app that basically searchs for tweets that matches a predefined query every once a while, show it on the screen with a very big font, and read it aloud. That way, if I am near my MacBook but I am working on my PC, I can just listen to the tweet. If I am far from the MacBook or can't hear it clearly, I can just look at the screen.

The following code will only work when you host the script on your Mac. If you access the script on other PC, it will still read aloud on your Mac.

Here is the PHP code I use in order for a Mac to say:

<?php exec ('say ' . escapeshellarg(stripslashes($_GET['q']))); ?>

And the JavaScript code.

function say(something, callback) {

     var x = new XMLHttpRequest();
     // all browsers on the mac already supports xmlhttprequest
     // except the ancient ones

     x.open ('get', 'say.php?q=' + encodeURIComponent(something), true);
     x.onreadystatechange = function() {
         if (x.readyState == 4) {
             if (callback) (callback) ();
         }
     };
     x.send ('');

}

Now you can go ahead and implement whatever the hell you want.