Terrified

“Terrified” performed by Katharine McPhee on the album Unbroken (Released on 1/5/2010), written and also covered by Kara Dioguardi and Jason Reeves, also performed by an American Idol contestant Didi Benami.

But none of those versions above were the first I heard from, the first cover was by Leah Daniels on YouTube, then I started to google this song, later, another subscription gave me this cover by Nicole. I seem to first listen to a song by covers at first.

Anyway, here is the Katharine McPhee's live performance from Jay Leno show, too bad it's not allowed to be embedded. So this one is from Grooveshark:

The writers' date cover:

I really like this song, so I decided to post about it. It's been a long time that I have posted about a song on a blog and I keep single-looping mode on.

Lines of jQuery and jQuery UI releases

This chart only counted (egrep -v '^$' file | wc -l) the uncompressed JavaScript files, jquery-*.js, (jquery.)effects.*.js and (jquery.)ui.*.js. (localization, demo, test, etc. files are not included) The release dates may not be accurate because some are hard to find out. You can see there are three data lines for jQuery UI from chart, they need specific jQuery versions to work, which are noted within parentheses, e.g. UI (1.3) means those jQuery UI releases require jQuery 1.3.x.

First step to Twitter OAuth & Streaming API using Python

Few days ago, I knew Basic Auth will be removed by June 30, 2010, Twitter even made a nice countdown timer.

At the moment, I said Ill be damned! to myself, because I simply didnt want to switch to OAuth for the scripts I am using. Alright, I admit that the real reason is I dont want to learn OAuth, yes, I still didnt know how OAuth works in behind.

Anyway, it turned out I spent an hour to make one of my code to use OAuth with help from python-oauth2 library. Yes, I only took an hour to modify and believe or not, for 50 minutes, I was using wrong consumer key or secret. I somehow copy-and-paste them with some dust.

Using python-oauth2 is pretty simple if you used to access Twitter API, then json.loads(content) on your own, read on. If you are using python-twitter, you will need to find a library with Twitter OAuth support, or just objectify the parsed json content to have similar Status, User, etc. from python-twitter.

As for Streaming API, I would simply say its an alternative way to search but more efficient because we keep-alive the connection. The Twitter Search API, we request every a while. Streaming API requires us staying where we can see each other all the time.

Single frequency wave generation using HTML5 audio

Some time ago, I read about data URI scheme while I was absorbing HTML5, I got an idea about using <audio> to generate wave data on the fly — not meaning streaming, this is not new idea, many people have done using <embed> and <audio> already. I did it on my own anyway.

This is just the first baby step, my goal is to make a code to play a 8-bit game music. Right now, I don't know how to do next because I don't know what synthesis method/math those games/console use, or where to get music sheets of games. I have no talent in music, you can't expect me to compose one. There are some Flash play 8-bit music, but I don't know where they started from, using existing wavefont or synthesis on their own? I want to do from the fundamental.

The following is what I have now, Chrome/Chromium (5.0.375.9) couldn't play it normally at this moment. Firefox 3.6.3 can play it correctly.

Function:
Frequency: Hz / Duration: seconds /
First 600 data points

It is just simple math, view source for JavaScript. I didn't really code well, it might look messy.

If you know 8-bit game music and you also know where I can get a cheatsheet of math they use and precise parameters for wavefonts, please drop me a message!

Adayaedmoob [Boom De YaDa] - Reverse MP3

I read a post on FriendFeed about listening to MP3 backwards, it uses Audacity to do the trick.

I came out with this command:

ffmpeg -i src.mp3 /tmp/src.wav && python -c "import wave ; s = wave.open('/tmp/src.wav', 'rb') ; r= wave.open('/tmp/rev.wav', 'wb') ; r.setparams(s.getparams()) ; count = s.getnframes()
while count > 0:
 count -= 1
 s.setpos(count)
 r.writeframes(s.readframes(1))" && ffmpeg -i /tmp/rev.wav rev.mp3

It uses ffmpeg to convert mp3 to wave, then convert reversed wave back to mp3. The reversing process uses Python's wave module. Here is a better formatting of code:

import wave

s = wave.open('/tmp/src.wav', 'rb')
r= wave.open('/tmp/rev.wav', 'wb')
r.setparams(s.getparams())

count = s.getnframes()
while count > 0:
    count -= 1
    s.setpos(count)
    r.writeframes(s.readframes(1))

If readframes() returned a list of frames, line count would be reduced by four, and it could run much faster. It runs pretty slow, because it reverses frame by frame, I think Audacity could do this in a blink of second. But my point is to make the code one-liner (it actually is five lines).

"Boom De YaDa" is the audio file I used to test, the result is pretty interesting (or creepy?). You can listen it here (Hope Discovery wouldn't mind).

Updated

Now this is a true one-liner:

ffmpeg -i src.mp3 /tmp/src.wav &&  python -c "import wave ; s = wave.open('/tmp/src.wav', 'rb') ; r= wave.open('/tmp/rev.wav', 'wb') ; r.setparams(s.getparams()) ; d = [s.readframes(1) for i in range(s.getnframes())] ; d.reverse() ; r.writeframes(''.join(d))"  && ffmpeg -i /tmp/rev.wav rev.mp3

Python part:

import wave

s = wave.open('/tmp/src.wav', 'rb')
r= wave.open('/tmp/rev.wav', 'wb')
r.setparams(s.getparams())

d = [s.readframes(1) for i in range(s.getnframes())]
d.reverse()

r.writeframes(''.join(d))

And it runs much faster!

Handling standard input in Python

I was writing a small Python script and wanted it to handle three types of inputs:

  1. Standard input by user inputing from keyboard
  2. Standard input by pipeline
  3. File input

I wanted to make my script can do as follow:

$ program # Sometimes, implying using standard input but depends on the purpose of program
$ program - # Indicates using standard input
$ program filename
$ prog2 | program # Pipe prog2s standard output to programs standard input

We should all have no problem with file, you just check the argument to see if we need to open a file as input.

The first two input types are not hard to do, we only need to use file.isatty() to identify current state of standard input:

file.isatty() Return True if the file is connected to a tty(-like) device, else False.

We can decide based on the following:

sys.stdin.isatty()

Pure CSS loading indicator (image) [WebKit-only]

I suddenly have this idea: Can I use pure CSS to create a loading indicator (image)? Then I have this:

Loading...

Here is a YouTube clip if you can see the above stuff normally.

Complete code

HTML
<div class="loading-image-wrapper">
  <div class="loading-image-container" id="lic-1">
    <div class="loading-image">
      <div class="loading-image">
        <div class="loading-image">
          <div class="loading-image">
            <div class="loading-image">
              <div class="loading-image">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="message">Loading...</div>
</div>
CSS
@-webkit-keyframes rotation {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(359deg);}
}
div.loading-image-container {
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: normal;
}
div.loading-image-wrapper {
  border: 1px solid black;
  border-radius: 5px;
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  box-shadow: #000 0 0 5px;
  -moz-box-shadow: #000 0 0 5px;
  -webkit-box-shadow: #000 0 0 5px;
  padding-top: 51px;
  width: 128px;
  margin: 0 auto;
}
div.loading-image-container,
div.loading-image {
  width: 0px;
  height: 0px;
  margin: 0 auto;
}
div.loading-image-container {
  border: 1px solid transparent;
}
div.loading-image {
  margin-left: 0;
  margin-top: -72px;
  position: relative;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  opacity: 0.5;
}
div.loading-image-container > div.loading-image{
  margin-left: -36px;
  margin-top: -36px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  opacity: 1;
}
div.loading-image:before {
  color: #000;
  content: "\2501";
  display: block;
  font-family: Arial;
  font-size: 36px;
  width: 72px;
  height: 72px;
}
div.loading-image-wrapper div.message {
  font-family: Arial;
  font-size: 24px;
  margin-top: 51px;
  text-align: center;
}

Explanation

Photo Caption Strip using CSS3 Gradient

Idea

There are some websites showing pictures with over-image-caption, for example, this cat photo on Posterous.com. Move your cursor over the photo, you will see a rounded bar shows up offering some actions you can take. I began to think if I can use similar thing to add a photo caption over the photo. I knew there is a CSS gradients1, which can help me archive my goal with better visual effect.

Why do I need a caption, because its a way to add attribution. Many photos on Internet are licensed under the Creative Commons, therefore you must attribute the work author. I think its a great way to put attribution to photo caption.

The following photo2 should demonstrate what I want to show you, you can view this screenshot for the correct result if your browser doesnt support.

Zebra Butterfly
Zebra Butterfly by San Diego Shooter, on Flickr

Starter

Once again, I started over again. From one blog to blogs with specific topics, then back to one. But this time, I brought a new domain name with me, yjl.im. I think I finally find a domain name I would like to own. Why I suddenly wanted to have a domain name? Two or three days ago, after I saw a .name domain, I began to find one. Somehow, I ended up with .im domain name. I interprets "im" as "I'm," I like that but it has a major drawback, I might be hunt down someday. :)

I also wrote a landing page, a pretty simple one, few links, that's all. I was thinking to use Flavors.me, but it costs money for custom domain, I don't want to use url forwarding to an ugly url. So Google App Engine comes to save my money and it actually could do better if I could design.

I chose to stay with Blogger platform, because I know it better and it has better freedom. I really don't want to pay hosting fee and use less 1% of monthly quota. I had thought about using Blogging software for Google App Engine and even considered writing one of my own, but neither would be easy task. If you know me, I am lazy.

To be honesty, I don't know what I will write or how long I will last until I get bored again. I really like the design I have here, it would be great if I could really write something good articles.

Hope this is a good start!