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.

It has convenient function load(), which is fired “after the main application windows has finished loading. The window object has been initialized and can be used.”

So, when thaiWitter loads, the script will inject a function that lets thaiWitter perform a request to Twitter’s API directly.

Now here’s the problem. The load() function fires for only one time, the first time it’s loaded. If the user has reloaded the page again (for example, via the clear button), then the load() function won’t fire and I can’t inject an function into the document.

Luckily I found a way around this, but this involves hacking the Prism window.

Because the host window is not exposed to the webapp script, we have to search for it manually. So, starting from Line 8, this script loops through each open window, and performs a simple check to see if it is the window we want.

Because content window is exposed to the webapp script, we can check the content frame of the current window and see if it’s “contentWindow” is the same as “window” that is exposed to the webapp script.

Then we set the _firstLoad flag to “true”. This tricks Prism into believing that the content is loaded for the first time in the next time the content is loaded, so Prism will fire load() every page load.

Update: Too bad this one only works for the first and only first window opened in Prism application. Maybe I really need to write an extension to Prism and then release #thaiWitter with different packages for each platform. Did not sound like a good idea right? Other choices? Don’t think so. T_T

1. The client needs some information.
2. The client requests that information from the server.
3. The server creates a OAuth request based on client’s request and signs it.
4. The server sends the signed OAuth request to Twitter API.
5. Twitter responds with the information.
6. The server passes that information back to the client.
7. The client process the information from the server.

So, this happens every 8 seconds, which is so much work for the server. I am planning to change this a bit:

1. The client needs some information.
2. The client requests that information from the server.
3. The server creates a OAuth request based on client’s request and signs it.
4. The server sends the signed OAuth request back to the client.
5. The client sends the signed OAuth request to Twitter API.
6. Twitter responds with the information.
7. The client process the information from the Twitter API.

So as you see, the server’s work is done at step 4, then the client will contact Twitter’s API directly. However, this is impossible without an extension, because this needs cross-domain XMLHttpRequest.

Right now I am researching on how to accomplish this. More on this later.

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.

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.

• 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!

I came up with this: sharethisfolder.py

When you run this Python script, it will generate and give you a random code.

dttvb@the-dttvb:~/Desktop/Samples$ python ~/sharethisfolder.py
:60506/754312

You have to prefix this code with http:// and your IP. For example, I can give this to another person:

http://124.120.114.110:60506/754312

When they open it, the python script will zip everything inside the current working directory and send it to another person on-the-fly.

And when that another person is finished downloading these files, then you can just press Ctrl+C to shut down the server.

Limitations:

• Because the zip file is generated on the fly, we don’t know how big will it be. The downloader will not see the file progress.
• You can share only 1 folder at a time.

Have fun.

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.

As you see, some code is truncated. My userscript works by contacting Yahoo! Answers’ API to fetch the original question text as inputted by user and displays it instead of the built in one. Because of this, the question text is shown without truncating. Also, multiple spaces, tabs, and indentations are preserved. Here’s how it will look like after you install my userscript:

http://userscripts.org/scripts/show/80368

However, this userscript only works with the question text, and will not work with the answers text, because I can’t find a good way of determining the order of the answer that is shown in the page. Another reason is that I assume that you can use one of the paste bin sites to paste your code.

Get this userscript: http://userscripts.org/scripts/show/80368

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.

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.

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).