YJL

A week ago, I removed all packages relating to Java from my system. I thought I had absolutely no need of them until I tried to minify CSS, via Makefile, using YUI Compressor which is written in Java. The same situation would have happened when I need to minify JavaScript files, I use Google Closure Compiler, same, written in Java.

Oh, right, thats why I still kept the Java runtime environment, the open source one, IcedTea, I thought to myself.

At this point, you can bet that I want to get rid of Java for real. For IcedTea binary package, its about 30+ MB plus near 9 MB of YUI Compressor and Google Closure Compiler. To be fair, they dont use a lot of space, but I just dont like to have Java on my system since there are only two programs need it. Besides, in order to have IcedTea installed, it pulls two virtual packages and two more packages for configurations.

So, my choice was to use online ones as I already know Google hosted one at http://closure-compiler.appspot.com/ and there is also a popular Online YUI Compressor hosted by Mike Horn.

Its only a matter of commands for achieving Java-less, using curl, first one is for YUI Compressor, second one is for Google Closure Compiler:

curl -L -F type=CSS -F redirect=1 -F 'compressfile[]=input.css; filename=input.css' -o output.min.css http://refresh-sf.com/yui/
curl --data output_info=compiled_code --data-urlencode js_codeinput.js http://closure-compiler.appspot.com/compile > output.min.js

Replace the input and output filenames for yours. If you need to pipe, then use - instead of inputfile, - indicates the content comes from standard input.

Although YUI Compressor can also minify JavaScript, however I found Google Closure Compiler does better job by only a little. If you use YUI Compressor for JavaScript as well, simply change to type=JS.

Both (Online) YUI Compressor and Google Closure Compiler have some options, you can simply add to the command. It shouldnt be hard since you have a command template to work from. I only use the default compression options, they are good enough for me.

if ($w.scrollTop() + $w.height() >= $t.offset().top - $w.height()) {
    inview = true;
}

Generated tree

Grow a Tree

1. Post title,
2. First heading level in the post, and
3. Second heading level.

Updated on 2012-05-21T09:40:04Z

Right now, every place should be after April 1 in their local time. On March 31, I decided to create my own April Fools Day join and here is a screencast of what would happen when you visit my blog on April 1 local time in case you missed it:

Within 24 hours, the code will be removed. You may still be able to see this if you reset the date to 1st.

I even posted a fake post for luring feed readers in because I know they wouldnt see anything in their favorite reader. Also a post on Google+, just did my best to spread the fun.

I dont know if I should paint some eggs next.

A recent engage with a reader reminded me of a long existing issue with threaded comments.

I like threaded more than flat. They both have advantages and disadvantages. In threaded comments, as the depth increasing, you can lose in the discussion as you may have in flat comments.

One reason, I prefer threaded is because flat is very easy to get confused when read someones reply to another comment, which could be posted a few ahead. An experienced commenter would include the comment # or the commenters name, but its very problematic.

Another good reason to use threaded comments is some comments are asking for help, with threaded comments, I can reply/answer to the question specifically. The asker can clearly know which comment is my answer to his or her question. This is not something, you can work around with flat comments easily.

Threaded could easy resolve such confusion, but it has own issues. As discussion grows, it can still get complicated as flat comments do.

But another issue has bothered me more than the issue mentioned above, the layout. The comments section is a fixed width design, when there is too many levels of replies, the widths of deeper comments get smaller and smaller. Eventually, it becomes too narrow as you can see the comments in this post.

In Disqus, you can switch to flat or limit the maximal depth of comments. But I dont want to use flat or to have limit of depth.

Right now, there is a new option on top-left corner to switch between variable width and fixed width. It is not meant to resolve, but simply a workaround. I dont really have any good idea for a brilliant layout for threaded comments.

I took the chance to add a notice just before the comments, it says:

Please keep your comments relevant to this post and try not to comment something like only Thanks in entire comment, use the Like button of Disqus, instead. You can use some HTML tags if you like.

This was something I had wanted to do a year ago, finally, I added it. This blog is created with fixed width at 640px, I have to break it, which I dont like, but I dont have better way to deal with.

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

ItchApe is a simple solution which enables you showing off your apes current itch to the world. You scratch your ape and its itch can be read.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://lilbtn.appspot.com/itchape/itchape.js"></script>
<script>get_itch('<YOUR_APE_ID>', 'itchdiv')</script>
<div>My ItchApe: <span id="itchdiv"></span></div>

My ItchApe: This is my itch (3 minutes ago)

<span class="itch">The description of itch.</span> <span class="itch_timesince">(3 mintues ago)</span>

{
"ape_says": "...",
"itch": "...",
"scratched_at": 123456789.123
}

You probably have noticed (really, you have already?) that if you click using any mouse button or using Enter, then the link will be highlighted with a blue background.

The idea came from YouTubes new designed homepage, I noticed the link feature when its still experimental. I feel its a nice idea, especially you are watching video from a list selectively in new tab. You will know the position of the one you just finish watching, then you can move on.

I stole the idea but not the code, I didnt even use tool to read the code, JavaScript or CSS, its simple stuff. You only need to have I get an idea! And thats what I didnt have.

The code I made you can read the diffs, JavaScript diff and CSS diff. If you know them code, its simple code as I said. The only special thing I want to mention is margin compensates the extra space, which padding uses. The reason of adding padding is the edge of text will be touching the edge of the blue box if you dont use it.

Here are sample link styles with padding and without padding.

Since its possible to open a link using mouse or keyboard, so two events need to be handle.

My originally modified idea is having an indicator flying to new link where user just clicks. Indicator takes off from previous click, then flies to new link, but that seems to be too much and overdo. How about a simple background color fade in and out? Using CSS transition?

Try to press right mouse button with any link, like it?

I have a project called BRPS, which has an old client script brps.js. Whenever this client request data from BRPS server, the server will increase the requests count and it has a statistics page for showing the count. Recently, a new client is implemented, gas.js. This new client doesnt communicate with BRPS server, I need to find a way to get a statistic number about how many requests it has been made. I dont want to write more code on my server to log those requests. So, Google Analytics is the best option for me.

function _track() {
  try {
    var pageTracker = _gat._getTracker("UA-#######-#");
    pageTracker._setDomainName("none");
    pageTracker._setAllowLinker(true);
    pageTracker._trackPageview();
    }
  catch(err) {
    }
  }
if (window._gat) {
  _track();
  }
else {
  $.getScript(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', function(){
      _track();
      });
  }

2   Filters

I created a new profile and two more based on the first one. The last two are using filter each. The first filter is

Custom filter	Advanced
FieldA	Hostname	(.*)
FieldB	Request URI	(.*)
Output	Request URI	$A1$B1

The profile with this filter can see results like example.com/foobar. A sample output:

The second one is

Custom filter	Advanced
FieldA	Hostname	(.*)
FieldB	unused
Output	Request URI	$A1

The profile with this filter can see results like example.com, I would like to know which websites are top users. A sample output:

function _track() {
  var _gaq = window._gaq || [];
  _gaq.push(['_setAccount', 'UA-#######-#']);
  _gaq.push(['_setDomainName', 'none']);
  _gaq.push(['_setAllowLinker', 'true']);
  _gaq.push(['_trackPageview']);
  if (!window._gaq)
    window._gaq = _gaq;
  }

A standard asynchronous Google Analytics tracking code would look like:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-#######-#']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

I didnt like how they look, so I decided to re-write with jQuery:

if (window._gat) {
  _gat._getTracker("UA-#######-#")._trackPageview();
  }
else {
  $.ajaxSetup({cache: true});
  $.getScript(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js', function () {
      _gat._getTracker("UA-#######-#")._trackPageview();
      });
  $.ajaxSetup({cache: false});
  }

It checks if there already is a Google Analytics script included. The script is the same and reusable, some websites might have multiple tracking code being executed. There is no need to create many <script>. If the script isnt included, then it loads it using jQuerys getScript(). Within the callback, it logs the pageview. You might also want to put _gat... into a try {} catch.... The older non-asynchronous tracking code does that.

You can also see it uses $.ajaxSetup() to set up cache use. By default, jQuery appends a timestamp like _=1234567890 as a query parameter after the URL of the script you want to load, that timestamp is called cachebuster, which causes web server sends same content to client even the content isnt modified. I discovered this behavior when I was adding new code on this blog.

In normal request, your web browser will check with server. If server returns 304, then browser will use the ga.js it already has in hand. With cachebuster, that wont happen, browser receives same content again and again. Using ajaxSetup() is to ensure cache is in use.

The only part I dont like in my code is how it decides the script link, it doesnt look pretty to me.

It's slow, looks like Ishihara color test but it's not wise to use it as a medical examination, color blindness. The code is a mess, don't read it, it's like a cheap movie on this IMDb list. The best and fastest generation is on Chromium. Firefox is kind of slow, but it's not its fault, you can blame on my code.

Oh! the font is Comic Sans MS!

I seem to find more feature of Firefox 4 every time I use it. I was wandering through the menu, believe me, I have done that when I just installed it. Somehow, I didnt notice there were two new things: Inspect and Web Console. You can activate them by pressing Ctrl+Shift+I and Ctrl+Shift+K.

The Inspect (the top windows on the left, right, and bottom) is really something called very pre-alpha feature, I got crash once by just hovering my cursor around. If you try to compare it with Firebug¹ or Developer Tools in WebKit-based browsers, you will be so disappointed at it. It just shows you the values, nothing fancy, you can not edit or tweak your HTML on the fly. FFs Inspect is like a blackboard updated by hand, others are like a 60 HD plasma TV updated by automatic intelligent programs.

The Web Console (the frame above Mozilla webpage) seems to be more mature and it supports console.log(). And dont forget that JavaScript Console (Ctrl+Shift+J), its the place to read error occurrences in JavaScript, Web Console is not for that purpose. I think Firefox would have integrated developer tools someday, Firebug is great but I would like to have built-in.

After 40 posts, I decided to add my own BRPS¹ (Blogger Related Posts Service) gadget to this blog. I modified the current brps.js and embedded it into source, it uses jQuery 1.3 and it would cause some problem in this blog.

Here is the code:

<div id='related_posts'></div>
<script>
// GPL'ed, verson 3 or later
function BRPS_watchdog() {
  if (window.brps_start == undefined)
    return
  diff = (new Date()).valueOf() - brps_start;
  if (diff >= 30 * 1000) {
    $('#related_posts').empty();
    $('#related_posts').append('<p style="color:#f00">Something went wrong with BRPS server!</p>');
    window.brps_start = undefined;
    }
  else
    window.setTimeout('BRPS_watchdog()', 5000);
  }

function BRPS_get() {
  var key = '%%%%% YOUR BRPS KEY %%%%%';
  var blog_id = '%%%%% YOUR BLOGGER BLOG ID %%%%%';

  // Get Post ID
  var links = $("link[rel='alternate']");
  var post_id = '';
  for (var i=0; i<links.length; i++) {
    m = /.*\/feeds\/(\d+)\/comments\/default/.exec($(links[i]).attr('href'));
    if (m != null && m.length == 2) {
      post_id = m[1];
      break;
      };
    }
  var $rps = $('#related_posts');
  if (blog_id != '' && post_id != '') {
    if (window.brps_start == undefined)
      window.setTimeout('BRPS_watchdog()', 5000);
    window.brps_start = (new Date()).valueOf();
    $rps.empty();
    $('<i>Loading...</i>').appendTo($rps);
    $.getJSON("http://brps.appspot.com/get?blog=" + blog_id + "&post=" + post_id + "&key=" + key + "&callback=?",
        function(data){
          window.brps_start = undefined;
          $rps.empty();
          if (data.error) {
            $('<p>' + data.error + '</p>').appendTo($rps);
            if (data.code == 3)
              // Need to retry in 5 seconds
              window.setTimeout('BRPS_get()', 5000);
            }
          else {
            if (data.entry.length > 0) {
              var $rps_ul = $('<ul></ul>').appendTo($rps).hide();
              $.each(data.entry, function(i, entry){
                $('<li/>')
                  .append($('<a/>').attr('href', entry.link).attr('title', 'Score: ' + entry.score.toString()).text(entry.title))
                  .appendTo($rps_ul)
                  ;
                });
              $rps_ul.slideDown('slow').fadeIn('slow');
              }
            else {
              $('<p>No related posts found.</p>').appendTo($rps);
              }
            }
        });
    }
  else {
    $('<p>Only available in single post.</p>').appendTo($rps);
    }
  }
$(BRPS_get);
</script>

Since my blog always requires jQuery, therefore I didnt put the embedding code in the code above. You might need the following code to be before the code above:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

A few changes:

• The Blog ID² and Key¹ are hand coded in script.
• Remove the BRPS options, because I know what I want.
• No longer rendering the title and if the page is not a single post page, then it will show a message instead of emptying gadget to show nothing.
• The list will be sliding down and fading in.

Generally, it should run faster, though you wouldnt feel that.

When I was a kid (around 10, almost 20 years ago, 90s), one day my father brought a IBM 5550. It had a program, which I totally have no idea whats the command name. You can draw a line on a plane, then it will generate a 3D image as follows.

I didnt know English at the moment, I doubt I could even spell English correctly. I wrote a similar version using JavaScript + HTML5 Canvas, I am not sure if its the same result, but it should be pretty close.