YJL --verbose

Have a list of backup DNS

2012-02-10T08:14:00.000-08:00

I was watching live stream and read the chat alongside, everything seemed to be normal until I couldn't open new websites. I had a script to get updates from all sorts of services also having trouble.

Although the stream was still playing smoothly and chat message was still coming in, but I can't ping with domain name, so I decided to restart my PPP.

Well, it's still didn't work. I noticed I could ping with IP address. I could also ping DNS with IP and resolve domain name with @dns_ip. Somehow, DNS didn't work normally, which are my ISP's DNS.

I even checked route table, it's good.

Restarting the ADSL router as the last hope, guessing that might be just some upgrading glitch in ISP's end. Well, it didn't work.

Since, I knew the problem was with DNS. I thought I could just replace with other DNS. The funny thing was I didn't have any IP address of other DNS.

Luckily, since I could @dns_ip to lookup Google's IP, so I could still use Google's IP to do search. Thank god! Amazingly, Google seems to be careful about such situation, I saw everything in search result. The Instant search was reacting to my typing, images were loaded normally. Everything was accessible via that single IP address I used to connect. (Google Search has many IPs)

The only one I knew I could probably trust and it's open to public access is the OpenDNS. I can't just click on the result to go to the website since it requires DNS to resolve for the IP address. But I managed to get the IP address displayed in plain search result with right keyword.

So, this tells me: you better to keep a list of backup DNS.

JavaScript map and parseInt

2012-02-08T15:02:00.000-08:00

I was bored and lurking at GitHub Explore Timeline, this Gist caught my eye, "Hey, javascript! Are you fucking kidding me?!"

> ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"].map(parseInt);
[0, NaN, 0, 0, 0, 0, 0, 0, 0, 0]
> ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"].map(function(item) { return parseInt(item); });
[0, 1, 2, 3, 4, 5, 6, 7, 0, 0]
> ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"].map(function(item) { return parseInt(parseFloat(item)); });
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

I found it's quite interesting to see a code fall into pitfall twice in one line of code. There is nothing wrong with map or parseInt I am afraid. JavaScript wasn't kidding with this Gist creator.

The mapped/callback function of map receives three arguments, the element, index, and the array. As you know, you don't have to list/supply all three when you are defining/invoking a function.

In the first line, the input arguments from map causes parseInt think you are asking different base when parsing. parseInt also accepts number base besides the string.

The second line still gets unexpected, although correct, answers. That is because 0# is generally considered as Octal number in programming languages, though not standardized in JavaScript. So, you can't really to expect it will be read as human does.

The last one, parseFloat is not the solution, it works because it's always base 10. In fact, using Math.floor instead of parseInt for second parsing looks little better to me, although it's still so bad. Or just drop the second parsing, they are all type Number and they does not contain any error during the parsing. It's unnecessary code.

One proper way to code this is

["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"].map(
    function(item){return parseInt(item, 10);});

This is rigorous and clear but, well, long.

Bubbling up your favicon with tinycon.js

2012-02-07T15:19:00.000-08:00

Tinycon is an interesting small JavaScript library for manipulating page’s favicon. Here is a quick example, click on the button below and look at my favicon!

Please be noted that I modified the original code for allowing non-number character to be rendered. General case and this library is for notifying the unread notification. Since it is for numbers, so the text renders a little be off and I don’t adjust it.

<script src="https://gist.github.com/raw/1762690/tinycon.js"></script>
<script>
function bubble_favicon(){
  // $('link[rel=icon]').attr('href', 'data:image/x-icon;base64,LONG_LONG_BASE64_DATA');
  TEXT = 'YJL --verbose';
  TEXT_idx = 0;
  setInterval(function(){
    Tinycon.drawFavicon(TEXT[TEXT_idx++]);
    TEXT_idx %= TEXT.length;
  }, 1000);
  $('#btn-bubble-favicon').remove();
}
</script>

There is another issue I encountered when I was writing this post. I couldn’t get the text rendered because the icon was at cross-domain, which caused Firefox raised a security exception when calling toDataURL on a canvas. If your page can be under same situation, you can update the favicon link element as shown above in commented code, so you wouldn’t have problem to use with Tinycon.

Why your Python library needs a separate version.py

2012-02-07T10:47:00.000-08:00

Remember I mentioned a Python library has version.py which essentially only contains one line like VERSION = 'x.y.z’?

After I posted it, I mailed the author and asked him about it. He told me it’s a common practice for packaging, you can see the get_version:

def get_version():
    basedir = os.path.dirname(__file__)
    with open(os.path.join(basedir, 'times/version.py')) as f:
        VERSION = None
        exec(f.read())
        return VERSION
    raise RuntimeError('No version info found.')

As you can see without thinking this is for package installation, you may improve it as:

def get_version():
    from times import __version__
    return __version__

I would do it, it’s clear and gets straight into the point.

However, the author received a bug report, which reminded him of why he made version information in separate file. The reason of doing so became apparant when this bug report came in.

The dependency is the issue. When you use pip or easy_install, they will handle the dependency for the user. Whatever dependency the library requires, as long as the packager list them all, they will be also be installed with the library.

If you don’t literally put the version number in setup script and you tries to extract the version information of the library by using direct import, it basically evaluates the library as if it’s being used and that becomes an issue if some depended libraries are not installed and are being used by the library.

In the case of bug report, pytz exposed the issue, you can also see the reporter tried to patch it by catching the ImportError exception. The handling wasn’t good, because the exception was bypass. It should end the program with error code, instead, because not everyone like using pip to install package. I don’t think it’s a good patch even as a workaround.

The library author reverted back to previous method of getting version information. They are actually some other ways to get the version or even others.

You can use regular expression to extract or to get variables like __foo_bar__ = ‘blah blah blah’. If you have many libraries, your setup.py can be more generalized, some package metadata can be store in __init__.py. You can also use path trick and do a normal import or manual import.

I don’t think there is a strict rule to bridge between setup script and library for package metadata. I would like to think it’s safe to say, your library should not know about the setup script and act upon it.

I want to point out why focus on version, it’s because it’s probably the only one gets updated every time for a new release. You don’t change authors, website, etc. very often. Being given own place can be a good way for release. You can then update it and add a log entry to Changelog, update the Readme. All of these are without touching the library code. I personally like having two type of maintenances, one is for actual coding, another is for documenting. Generally, I don’t like them to be in same commit especially for a release. Although, you certainly need to mix them most of time.

Any thoughts on this?

DOSBox fullscreen issue with DWM and SDL

2012-02-06T10:24:00.000-08:00

When I was trying to play TES: Arena in fullscreen, the screen didn't go as I expected. I saw the screen resolution changed from 1680x1050 (my native screen resolution), the game screen didn't show but a portion of X window from top-left corner.

There was a thread of discussion about this, the problem didn't exist in DWM v4.3, but that was very old version of DWM. Although there seemed to have some patch, but I didn't look into it. I didn't like to patch on my own.

I was using scaler of DOSBox at the time being in windowed mode, then I noticed there was an option fullresolution under the sdl section. The workaround is actually quite simple, you set it to your native screen resolution, so the screen resolution won't be changed after switching to fullscreen mode.

Problem solved.

You should have a default configuration file under ~/.dosbox after first-run of DOSBox, you can copy and modify it and use it with current directory as dosbox.conf when you run with dosbox .. It is documented very well, or you can read about the options here.

Note that some scaler doesn't re-scale to fill up the entire screen, you will see the picture centered at center of screen and leave a huge black border. normal2x/3x, advmame3x, and some re-scale to fill up the screen.

This may actually better than real screen mode change, by keeping the same resolution, the switching is faster than real screen mode change. You won't feel a pause during the switching.

Playing The Elder Scrolls: Arena in DOSBox

2012-02-06T09:42:00.000-08:00

After I had fun with Fus Ro Dah, I decided to try the first game in DOSBox, here is the commands I used to run it:

unzip Arena106Setup.zip
# file Arena106.exe
# Arena106.exe: PE32 executable (GUI) Intel 80386, for MS Windows, UPX compressed, RAR self-extracting archive
unrar e Arena106.exe
dosbox ARENA.BAT

You can download the full game for free on its website.

I have adjusted the configuration file of DOSBox, so I can have fullscreen in DWM, there seems to have bug in SDL or DWM. Save it as dosbox.conf and put it with game files, you will need to adjust it for your screen setting.

Before I changed the default normal2x scaler (you can also use command scaler to change), the game picture really reminded me of the old times. I have no idea how I could have played many games in that period of time. The text was almost unreadable for me before I changed to hq3q or advmame3x. Here are some screenshot of original pictures:

(I don't look like that in that picture at all, just random test :D)

I also had to change to CPU cycle, default was 3000, which was too slow when walking in the game.

The ZIP comes with a PDF file for instruction of using DOSBox, it also contains a list of password for copy protection, there is another Passwords.txt for easy lookup.

This certainly brought me back about two decades ago. After you bought a game, you opened the plastic wrapper, then took out a thick, well-designed, well-printed manual. You would hope there is more than just one manual, some posters or something.

You flipped over the pages, then a piece of colored plastic would fall out, it could be solid color, or two colors. You would put it on certain page which the text was printed in unreadable background colors.

But when you read through the colored plastic a number or a word would show up beneath. You then input that into a popup dialog, which showed up at random or at beginning of the game.

Meh, that was the time.

jQuery lifestream plugin

2012-02-05T13:37:00.000-08:00

I found this jquery-lifestream plugin on GitHub and it’s fairly easy to use, here is a quick example of my blog feed, GitHub, and Google Code updates:

It already has support for more 20 or 30 services (it’s a long list, didn’t count), and you can write your template for layout which fits in with your design. The following code is the setup, you can see I add blog post author name for the output:

$("#lifestream").lifestream({
  limit: 15,
  list: [
    {
      service: "blogger",
      user: "yjlv",
      template: {
        posted: '${author.name} posted <a href="${origLink}">${title}</a>'
      }
    },
    {
      service: "github",
      user: "livibetter"
    },
    {
      service: "gcode",
      user: "http://code.google.com/feeds/u/115422682039760465813/updates/user/basic"
    }
  ]
});
</script>

You can even add more services without adding to the original code. For example, it does not support Google Code but you can see I have the updates from my Google Code account listed above. The updates on Google Code uses Atom feed, but jquery-lifestream doesn’t support it. But that’s fine, because you can easily expand jquery-lifestream:

(function($) {
  $.fn.lifestream.feeds.gcode = function( config, callback ) {

    parseFeed = function( input ) {
      var output = [], list, i = 0, j;
      if(input.query && input.query.count && input.query.count > 0) {
        list = input.query.results.entry;
        j = list.length;
        for( ; i<j; i++) {
          var item = list[i];

          output.push({
            url: config.user,
            date: new Date( item.updated ),
            config: config,
            html: item.title.content
          });
        }
      }
      return output;
    };

    $.ajax({
      url: $.fn.lifestream.createYqlUrl('select * from atom where url="'
        + config.user + '"'),
      dataType: 'jsonp',
      success: function( data ) {
        callback(parseFeed(data));
      }
    });

  };
})(jQuery);

You can rewrite the parser, do some advanced tasks, such as filter or extraction of some data from feed. For example, you can use jQuery to parse the html and extract the image, so it can be used as thumbnail. If you know about JavaScript, you can enrich the results easily.

I think this can be used in many cases and it doesn’t have to be your contents. You can add some blogroll, photo collection of multiple Flickr account, or updates from all kinds of social networkings for a project. Or just a gadget for your blog, which gathers your photos, tweets, etc. It can keep your blog or webpage cleaner.

Fus Ro Dah!

2012-02-03T23:49:00.000-08:00

I don’t use Windows and don’t have any game consoles, but I do know about Skyrim. When it was released last year, I watched a lot of game playing on Justin.tv. I know how the main storyline goes.

After the release, I often saw some people shouting “FUS RO DAH!” in channel not even about gaming. Whoever was not familiar with that game couldn’t understand the meaning, then you see people started to ask about the meaning. It’s quite silly to shout something irreverent in other channel. If it was about gaming, I saw more the shourting and some even got deleted because it’s like snowball.

I had watched a couple of parody videos of Fus Ro Dah on YouTube, but I just found out there are plenty more after. No idea people are so into making fun of this. I put some I fell really funny in a playlist (skip first one, it’s the trailer, you will see it soon :):

The one with Chuck Norris can be skipped after his part ends. Some people made Fus Ro Dah videos but they have no idea what that actually means, although few are still quite funny, even they didn’t get the point.

Now let’s practice this dragon shout, shall we?

I also found some some nice music covers:

And the soundtrack:

Skyrim by Yu-Jie Lin on Grooveshark

At some point, I really wanted to play it, but I don’t think my computer can handle it and I would have to install Windows. That’s a No-no. Actually, you can download the first two games, Arena and Daggerfall, in the series on the website. They probably can be run in DOSBox, but it’s not Skyrim.

Traversing Python object by key path

2012-02-03T14:42:00.000-08:00

I am not the first one who tried to tackle this issue but I feel I need to write one on my own. To clearify what this is about, a simple example:

print o.attr1.key1

Where o is a normal object and o.attr1 is a dict. You should see you cannot access dictionary item via attribute without adding code to your own dict class. I believe a better way, without touching other’s code, is to do like:

print ot(o, 'attr1.key1')

The goal is to have a unified syntax to access information deep inside of an object. To be honesty, I don’t think it’s often you will need to have such functionality, but when you sure do, you will want something to use right away.

Here is my try (GitHub):

The output:

123
True
2
(1, 2, 3)
['number', 456, {'foo.bar': 'It is foobar!'}]
It is foobar!
s
r

It might not look pretty or magical but it works. Of course, you can wrapping class or object, make special class for inheriting, but often, you don’t have easy way to change. They could be in library and you may need to do some dirty coding. This simple function can do the job well.

You can supply your own key functions, they will be used in order. The key function returns found object or raise KeyError if it cannot find a match. You can also use number as index for list object and dot . for the key in dictionary, just remember to escape it. Also, you can even get a method and run it.

If dictionary key is not string or number, then my code can not access to them.

I LOL'd at Python documentation

2012-02-03T13:26:00.000-08:00

Garsh, I feel I am too geeky or nerdy. How could I laugh out loud like that?

I was looking for else in for loop. I can never be remembering when will else clause gets executed, so I gotta check up every time. And this is the quote I just read (bold for emphasis):

The for statement in Python differs a bit from what you may be used to in C or Pascal. blah blah blah in the order that they appear in the sequence. For example (no pun intended):

When I saw that bold text, I asked myself how on Earth an official programming language's documentation has that?

And the important thing is I didn't get it first time, but I laughed like an idiot then.

Python Intra-package import aka relative import

2012-02-02T15:51:00.000-08:00

I only know Intra-package import for a few hours after reading someone’s code:

from .version import VERSION

(By the way, the version.py is interesting. Wondering if there is any particular reason to put package version out of __init__.py)

This was first time I saw the syntax and I am pretty sure I never heard of Intra-package import or relative import before. Alright, maybe once or twice. It’s in the Python documentation, but I never had a chance to read about import. I started writing Python script before version 2.5 and never had a problem with importing, an excuse? Perhaps.

PEP 328 lists some proposed syntax, though the final do not include them, but it worth reading. Also read PEP 366.

Basically, you prefix one dot to indicate relative import. One more dot, go up one level. Simply as that.

In PEP 328, I found

from ...package import bar
from ...sys import path

do not work, they go beyond the package. The Python documentation does not mention that, so I think it’s not valid since it’s not intra-package.

I think relative import is helpeful, because I used to write a code in a package like

from package.subpackage import sibling_module

in a module. With this relative, it looks more clear:

from . import sibling_module

at least to me. Though the first one works well, but if you happen to be in need of change the package name, you know it will be some minutes task, depends on your shell scripting skill or how fast you can search-and-replace with your favorite editor.

I also found one thing I didn’t know before, you can from package import (module1, module2). Well, I don’t know if anyone ever import with that syntax. The only reasonable way I can think of is to format like this:

from package import (
    mod1, mod2,
    mod3, mod4)

Probably put modules into different lines for whatever reason.

Boolean in JavaScript

2012-02-02T09:51:00.000-08:00

Boolean is interesting in JavaScript, well, if you haven’t fallen into the pitfall.

true, false, and Boolean(something) (returning either of first two) are the Boolean primitive values and new Boolean(something) is the Boolean object.

When someone writes with new Boolean() in their JavaScript code and you don’t see any bugs, s/he might be

lucky,

having fantastic logic (kind way to say strange) in mind of coding, or

smart or showing off or like having unnecessary code.

For me, I have never seen any scenario which requires of using Boolean object. If you have seen it, please let me know, I would like to read the code.

Here is a quick quiz for you, which ones get executed?

if (true) ...;
if (Boolean(true)) ...;
if (Boolean("false")) ...;
if (new Boolean(false)) ...;

The answer is all of them. Take a quick look at MDN and read ToBoolean in ECMA-262.

You should have no problems with first two. Non-empty string results true and objects evaluates as true in expression. If you get third one wrong, then you probably will get wrong with

if ('true' == true) ...;
// but not next one, and it's just lucky if you does get first one wrong.
if ('1' == 1) ...;

First one is false, second is true. Only string and number will be converted automatically. (Hope I get this right :) This is a reason I don’t like language with such coercions, such as JavaScript or PHP, however I am not afraid of taking advantage of them. It’s just sometimes your brain has gone AWOL and you ends up with buggy code and they usually don’t expose at the moment of coding.

Moreover, this could result the abuse of === and !== usage. Either the coder is overcareful or s/he does not understand what type of the value is which just gets processed and assigned.

So, if you insist of using Boolean object, don’t forget the valueOf() method for primitive values. But hey, really?

Pushing to GitHub Pages gh-pages branch from only local master branch

2012-02-02T08:38:00.000-08:00

If you have used GitHub, you must have already been familiar with gh-pages branch.

I don't like have different code base from the pages branch, so in my projects, master == gh-pages, and many of projects are doing the same. If you have documents like library reference which is generated by source, then you probably will use different base.

For a very long time, I had to do with these commands as follow in order to update that branch:

git checkout gh-pages
git pull . gh-pages
git push
git checkout master

It was just plain silly of me. I did google for it, but not RTFM, I didn't get any useful results, probably used wrong keywords. I finally found the correct answer with correct search keywords, here is the answer:

git push origin master:gh-pages

Here is from manpage git-push:

<refspec>...
    The format of a <refspec> parameter is an optional plus +, followed by the source ref <src>, followed by a colon :,
    followed by the destination ref <dst>. It is used to specify with what <src> object the <dst> ref in the remote
    repository is to be updated.
    [...]
    The <dst> tells which ref on the remote side is updated with this push. Arbitrary expressions cannot be used here, an
    actual ref must be named. If :<dst> is omitted, the same ref as <src> will be updated.

Well, it's all in the manual and I was actually using a shorthand by omitting the <dst>. It's good to know.

So what if you try to omit <src> part? (I am glad I already know about this. Hehe, I am bad!)

git push origin :remote-branch

Using Google Analytics for website issue reporting

2012-01-31T14:16:00.000-08:00

I had this idea in the end of September 2010 when I was playing with Google Analytics' tracking code. I wrote some code for rating blog posts using the option value, the code did stay on my blog for a day or two before I took it down, it wasn't too useful for me. But a function allows visitor to report page issue could be very helpful if someone is willing to click on some buttons.

I have finished a simple code and it's at bottom of this blog:

Well, it doesn't look pretty. Here is the code in that HTML/JavaScript gadget:

<script src="https://gist.github.com/raw/1713067/ga-wr.js"></script>
<script>
function init_page() {
  var gawr_options = {
    target: 'ga-wr',
    UA: 'UA-XXXXXXXX-X',
    report_options: [
      {
        title: 'Image is not loaded'
      },
      {
        title: 'Link is broken'
      },
      {
        title: 'Other'
      }
      ]
    };
  new GAWR(gawr_options);
}
$(init_page);
</script>
<div id="ga-wr"></div>

For report of issues report, I can write my own program to get daily report using my current daily report as base. But I don't think I will trouble myself, not yet anyway. Right now, I can see the report with custom report in Google Analytics:

It works great for me for now. Note that, you need to use Alert/Total Events instead of Pageviews. It's event not page. The report does get updated very quick, probably a few minutes after reported. I will say that's instant almost.

Now a little technical background of this script. Basically, you should use different profile. It will track page when a report is being submit and the report is recorded as Event. Event action is the issue name and option label is the additional information as you seen in the image above.

Option value can only accept integer, custom value probably can do the trick, but I put the data in option label. There is another way to record is to rewrite the page URL when tracking the page, but I don't like that. But this could be a benefit, rewriting url to be /original-page-url/issue and still send the event. This way, if you watch Real-time tab, you can see there is a report just comes in if you don't use separate profile.

And remember when visitor reports, page URL is recorded by page tracking, also user's browser and system and everything Google Analytics collects by default is already in the data. Isn't this awesome and brilliant? I don't even need to code for collecting such data if I need to check visitor's browser, they are just there for me to read.

Google Analytics API can do more than just website access statistics, you can set up a poll or some thing more. Imagine you let people to vote and you use visitors metric or something to prevent some degree of voting spam.

Only the data isn't public without coding and they require process.

Importing arbitrary non-existing module attribute in Python

2012-01-31T06:54:00.000-08:00

I think I need to explain the title, not really sure how accurately title this post. Here it is a quick code:

from my_module import foobar

Where foobar is not defined in my_module module, but the code will not raise ImportError. So, it’s a module whose attributes can be imported and which does not exist within it.

I did not get this idea on my own and I don’t know who firstly got this interesting idea. I saw this in a project called pbs, a Python subprocess wrapper. (How abbreviated as pbs?) It is written by Andrew Moffat and licensed under the MIT License.

To be honest, I am not interested in what this project can do, I don’t feel writing Python script for easy command-line access would be more productive or easier than scripting in shell script. But that’s not the point of this post and that code has many to learn from even I don’t use.

I found this project via GitHub Explore, the part of being able to import any commands caught my eyes and I was thinking: this only main code pbs.py must be hell long like traffic in <INSERT YOUR CITY>. When I clicked in, it had only around 450 lines and most of them were comments. So, I took a close look at it.

To strip it down, it could be just like (for Python 3.x and 2.x)

#############
# main script
#############

from my_module import attr1
print('Value of attr1: %s' % attr1)
print('')

from my_module import attr2
print('Value of attr2: %s' % attr2)

##############
# my_module.py
##############

import sys

attr1 = 123

class SelfWrapper(object):

  def __init__(self, self_module):

    self.self_module = self_module

  def __getattr__(self, name):

    print('%s is being imported:' % name)
    if hasattr(self.self_module, name):
      print('  found in self_module')
      return getattr(self.self_module, name)
    elif name.startswith('__'):
      print('  starts with __ and not found, raising AttributeError')
      raise AttributeError
    print('  returns a generated string')
    return 'automatically generated ' + name

sys.modules[__name__] = SelfWrapper(sys.modules[__name__])

Where attr1 is defined, but attr2 is not. The output is

__path__ is being imported:
  starts with __ and not found, raising AttributeError
attr1 is being imported:
  found in self_module
Value of attr1: 123

__path__ is being imported:
  starts with __ and not found, raising AttributeError
attr2 is being imported:
  returns a generated string
Value of attr2: automatically generated attr2

If you don’t check for __xyz__, __path__ in this case, __getattr__ will be invoked twice for attr1 and attr2. I can not answer the behind scene of module import for this __path__ part, feel free to educate me in comments.

The project is great for this idea, however I would say it’s fancy but not really necessary. I see no much trouble of using like Cmd.curl, Cmd.wget, etc. But it’s awesome to use import like that. Cool, right?

Date.now in IE8 or before IE9

2012-01-30T07:08:00.000-08:00

This is the second time I tried to make my stuff work in IE. Too make it clear first, it's Code 735. IE always has to be different and unique from other major browsers if you put it in a way with utter kindness. (You have to be saint to think IE in that way)

Okay, long story short:

Date.now()

will not work because Date.now is undefined before IE9, it means it is not supported. (735!) A quick workaround is

// For IE8 and earlier version.
if (!Date.now) {
  Date.now = function() {
    return new Date().valueOf();
  }
}

You always have to give IE some special care while other browsers mostly can work with same code and render same output. 735! I don't know if Date.now is in ECMA standard or not, but IE likes non-standard and enjoying creating some stuff on its own I would say.

Another thing I have to mention here is the IE8 Developer Tools (I only have Windows XP, don't know about IE9). Since this is my second time of using, therefore exactly same issue I have still here. It always gives me not too accurate debug info, as the case above, it broke in jQuery code as IE told me. I had to manually set up breakpoints, so I finally found out the problematic code is with Date object. 735, again!

Oh, wait! There is one more thing, where can I change the fonts for Developer Tools? Variable-width font, really? Who a developer is gonna code in that kind of font? Hold on, I have seen someone coding PHP in that. Pheww... that's probably why I am not a fan of PHP, just kidding.

Maybe there is a <!--[if IEDEVTOOL]> or CSS hack for Developer Tools?

ON AIR light for Justin.tv

2012-01-29T10:35:00.000-08:00

Just made this ON AIR light for Justin.tv/Twitch.tv streamers. I don't stream, so this is probably no use for me.

The one on the left is the currently most popular live channel, retrieved via API. The one on the right is a channel does not exist.

I put the code on Gist. If you want to put this on your website with or without modification (more visible view count, thumbnail, etc.), you may send me an email (see About page) with your channel and website URLs if you don't know how to do. (Do not post your channel in comments, I will consider it's a spam).

This should be easy to extend to cover other streaming service providers. If you use other than JTV, shoot me an email, I may be able to help as long as there is API to use.

type, then file, or just file type?

2012-01-28T07:44:00.000-08:00

I used to run the following commands to find out if a command exists (besides using Bash auto-completion if it's executable in PATH) and what kind of the command is:

$ type which
which is /usr/bin/which
$ file /usr/bin/which
/usr/bin/which: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.9, stripped

And I am not kidding you, I manually typed /usr/bin/which in the second command to find out the file type. file requires a full path. I feel little embarrassed. :) But, it's nothing wrong with it.

However, the better ways can be:

$ file `type -p which`
$ file `which which`

Note that type is a Bash shell builtin command (can differ from your environment), which is a normal program. You can also use locate for file'd a list of matched files if you only have partial filename. All three commands can accept a number of filenames.

Bottom text fadeout with solid background color using CSS

2012-01-27T08:04:00.000-08:00

I was making a webpage and wanted to make bottom of a text fade, which is a small portion of a long text. It should indicate perfectly that there is more text as if saying “click to read more.”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui nunc, tempus vel ullamcorper ac, aliquet iaculis purus. Donec fermentum ipsum nec odio convallis et venenatis felis bibendum. Proin sed quam massa. Ut nibh mauris, tempor eget suscipit nec, tempus ac lectus. Proin sed augue ante, in fringilla nunc. Proin adipiscing orci molestie mi vehicula viverra. Aliquam erat volutpat. Proin tortor leo, tempor quis luctus vitae, pharetra non quam. Mauris et nisl sit amet arcu pharetra tempus in vel enim. Vestibulum lacinia porttitor sodales.

<style>
.fade-text-container {
  color: #aaa;
  background-color: #333;
  border-radius: 0.5em;
  padding: 0.5em;
}

.fade-text-container,
.text-container {
  line-height: 1.5em;
  width: 320px;
  /* 10 lines => 1.5em * 10 = 15em ***/
  height: 15em;
  overflow: hidden;
}

.fadeout {
  position: relative;
  /* 3 lines => 1.5em * 3 = 4.5em ***/
  height: 4.5em;
  top: -4.5em;
  background: -webkit-linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  background: -moz-linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  background: linear-gradient(
    rgba(51, 51, 51, 0) 0%,
    rgba(51, 51, 51, 1) 100%
    );
  z-index: 1;
}
</style>

<div class="fade-text-container">
  <div class="text-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui nunc, tempus vel ullamcorper ac, aliquet iaculis purus. Donec fermentum ipsum nec odio convallis et venenatis felis bibendum. Proin sed quam massa. Ut nibh mauris, tempor eget suscipit nec, tempus ac lectus. Proin sed augue ante, in fringilla nunc. Proin adipiscing orci molestie mi vehicula viverra. Aliquam erat volutpat. Proin tortor leo, tempor quis luctus vitae, pharetra non quam. Mauris et nisl sit amet arcu pharetra tempus in vel enim. Vestibulum lacinia porttitor sodales.</div>
  <div class="fadeout"></div>
</div>

It’s two-level container, top one .fade-text-container contains the text .text-container and the fadeout effect .fadeout. Because the need of calucating the position of .fadeout, so I made two-level and so .fadeout can be placed at exactly at bottom of text. Using this method, I can set how many exactly lines I want to fade out.

There is one issue I am aware of, because .fadeout is on top of text, therefore the text under it can not be selected. It shouldn’t be a big issue, because normally you want visitor actually to click and to go to another page. You can set up a click event on .fade-text-container and redirect user to other page.

This method only works with background is solid color.

Filtering links in Blogger/YouTube/etc API JSON

2012-01-26T08:42:00.000-08:00

If you have used Google/Blogger/YouTube/etc API with JSON format, you may have seen the link array like

entry =
{
  "link":
    [
      {
        "rel":   "replies",
        "type":  "application/atom+xml",
        "href":  "http://example.com/link1",
        "title": "Post Comments"
      },
      {
        "rel":   "replies",
        "type":  "text/html",
        "href":  "http://example.com/link2",
        "title": "Comments"
      },
      {
        "rel":   "edit",
        "type":  "application/atom+xml",
        "href":  "http://example.com/link3",
      },
      {
        "rel":   "self",
        "type":  "application/atom+xml",
        "href":  "http://example.com/link4",
      },
      {
        "rel":   "alternate",
        "type":  "text/html",
        "href":  "http://example.com/link5",
        "title": "Example Title"
      }
    ]
}

Usually, you want the one which type is text/html and a link to normal webpage. I used to write a for loop, every time I need to get that one. I do mean every time, who knows how much time I wasted in writing the same loop code.

I finally came up a quick and better way using jQuery:

var link = $($.grep(entry.link, function(link, idx) {return link.rel == 'alternate'})).prop('href');
// breakdown
var link = $(
             $.grep(entry.link,
                    function(link, idx) {
                      return link.rel == 'alternate'
                    })
            ).prop('href');

Even its reasonably little longer one-liner, its much more clear than a for loop, and could be same clear for who is not familiar with jQuery. The only drawback I could think of is: it could be slower than for loop, though I haven’t tested.

jQuery accepts objects not just DOM, you can have some methods though you don’t have selector-like to filter, but in this case, $.grep is good enough for processing. The result will be an array of objects and I use prop() to extract the href attribute after the results are turned into jQuery object.

Certainly, you can use just match_results[0].href, directly access object’s href attribute. But you can not guarantee that match_results is not an empty array. If it is, you will get a Type Error, because your code tries to get undefined.href.

Using prop(), it will fail silently by returning undefined and you can check it or just leave it in <a/> if you don’t care.

My Bash script template

2012-01-24T08:41:00.000-08:00

A few days ago, I read Bash Script Templates and I think this might be a good idea to start one of my own. I later found two more posts about it, it's not easy to find one. Either search engine was playing with me or I was too dumb to enter perfect search terms.

I read them and got some concepts from all three of them. Some I like, some I don't. I mingled them altogether with my own thoughts. I created a new repository: template.sh, it could be a good idea for it to have own repo, so you may contribute to it easily.

It's still a work-in-progress, but it already has 177 lines (159 sloc) for first version. I have been thinking that a library could be a better idea, especially when I was writing the parse_options function. It could be working like argument parsing in C or in Python with their libraries, and the code would be more clean.

I had also thought of creating user interface, you can click buttons or be asked questions to enable/disable features, then a template will be generated. But that's a lot of works, not sure if that's worth. I didn't go that way eventually, but a simple file.

Please be aware that I haven't used it yet, so I don't really know if it's practical enough. If you run into trouble, please open an issue. Any feedback is welcome, leave a comment.

Arithmetic Expansion and colon builtin command in Bash

2012-01-23T10:11:00.000-08:00

I just did a system update and got configuration diffs like

-               i=$(($i + 1))
+               : $(( i += 1 ))

If you don't know : builtin yet, read first entry of "SHELL BUILTIN COMMANDS." I have been using it quite often with infinite while loop, e.g.

while :; do
  do_something
done

I never thought of putting something behind it, and that diff is quite genius in my opinion. However I will just write

(( i++ ))

I don't see there is a reason for using Arithmetic Expansion, Evaluation is enough and clear. Expansion will returns the expanded string, which cause command execution if you don't prefix with :, and you will get "command not found" error.

There is a good use of :, putting it after last command of a function or last command of a script, if they have chances to return non-zero and you do not care if that command runs into problem. This way it will clear out the returned value.

log.sh - Bash logging library

2012-01-23T07:05:00.000-08:00

As I mentioned in previous post about Call Stack, the thing is ready on GitHub, log.sh. It's a library for easy logging, here is a quick screenshot of the examples:

As you can see, it's colorful, little too fancy, I hope it didn't blind you. It's new , so I hope someone can jump in and improve it. There are some in it I didn't like, e.g. the templating.

It's easy to use, just source log.sh, then you are good to go. Please read more on GitHub.

Printing out Call Stack in Bash

2012-01-22T14:43:00.000-08:00

Yes, there is such same thing called Call Stack in Bash as you see in C, Python, etc. The information is stored in BASH_SOURCE, BASH_LINENO, and FUNCNAME. They all are arrays with same length/depth. The last item represents main script, the first item is the current function (or main script) of where these arrays are accessed.

Here is some working code, the first file test.sh:

#!/bin/bash
# Copyright 2012 Yu-Jie Lin
# MIT License

# Log Call Stack
LSLOGSTACK () {
  local i=0
  local FRAMES=${#BASH_LINENO[@]}
  # FRAMES-2 skips main, the last one in arrays
  for ((i=FRAMES-2; i>=0; i--)); do
    echo '  File' \"${BASH_SOURCE[i+1]}\", line ${BASH_LINENO[i]}, in ${FUNCNAME[i+1]}
    # Grab the source code of the line
    sed -n "${BASH_LINENO[i]}{s/^/    /;p}" "${BASH_SOURCE[i+1]}"
  done
}

source src.sh
# LINE 18
func2 () {
  func3 foo bar
}
# LINE 22
func1 () {
  func2 a b c
}
# LINE 26
func1 1 2 3

This is extracted from something I am currently working on, which will be released under the MIT License, so this small code is with same license. The second file src.sh is for being sourced:

func3 () {
  LSLOGSTACK
}

And the output:

$ ./test.sh
  File "./test.sh", line 27, in main
    func1 1 2 3
  File "./test.sh", line 24, in func1
      func2 a b c
  File "./test.sh", line 20, in func2
      func3 foo bar
  File "src.sh", line 2, in func3
      LSLOGSTACK

It may look vaguely familiar to you if you are also a Python coder, the code mimics the output of Traceback module.

The explanation of those three arrays can be found in man bash. I am also planning to print out BASH_ARGV for each frame, but that will be in that library I am coding.

RFC for HTTP Status Code 7XX: Developer Errors

2012-01-22T12:18:00.000-08:00

Go check out first on GitHub.

At first glance of the title, even it's a bit of weird, I was kind of believing that was a valid document until I read the code 701. Then, I started laughing. Here is a list of my favorites:

72X - Edge Cases
- 720 - Unpossible
- 721 - Known Unknowns
- 722 - Unknown Unknowns
- 723 - Tricky
- 724 - This line should be unreachable
- 725 - It works on my machine
73X - Fucking
- 735 - Fucking IE
- 736 - Fucking Race Conditions
74X - Meme Driven
- 742 - A kitten dies
76X - Substance-Affected Developer
- 761 - Hungover
- 762 - Stoned
- 763 - Over-Caffienated
- 764 - Under-Caffienated
77X - Predictable Problems
- 777 - Coincidence
- 779 - Off By Too Many To Count Error
78X - Somebody Else's Problem
- 781 - Operations
- 782 - QA
- 783 - It was a customer request, honestly

Someone really needs to get this into standard. ;)