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, that’s 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, it’s about 30+ MB plus near 9 MB of YUI Compressor and Google Closure Compiler. To be fair, they don’t use a lot of space, but I just don’t 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.

It’s 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_code@input.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 shouldn’t 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 Fool’s 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 wouldn’t see anything in their favorite reader. Also a post on Google+, just did my best to spread the fun.

I don’t 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 someone’s reply to another comment, which could be posted a few ahead. An experienced commenter would include the comment # or the commenter’s name, but it’s 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 don’t 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 don’t 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 don’t like, but I don’t 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 ape’s 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 YouTube’s new designed homepage, I noticed the link feature when it’s still experimental. I feel it’s 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 didn’t even use tool to read the code, JavaScript or CSS, it’s simple stuff. You only need to have “I get an idea!” And that’s what I didn’t have.

The code I made you can read the diffs, JavaScript diff and CSS diff. If you know them code, it’s 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 don’t use it.

Here are sample link styles with padding and without padding.

Since it’s 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 doesn’t communicate with BRPS server, I need to find a way to get a statistic number about how many requests it has been made. I don’t 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 didn’t 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 isn’t included, then it loads it using jQuery’s 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 isn’t 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 won’t happen, browser receives same content again and again. Using ajaxSetup() is to ensure cache is in use.

The only part I don’t like in my code is how it decides the script link, it doesn’t 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 didn’t 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. FF’s 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 don’t forget that JavaScript Console (Ctrl+Shift+J), it’s 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 didn’t 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 wouldn’t 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 what’s the command name. You can draw a line on a plane, then it will generate a 3D image as follows.

I didn’t 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 it’s the same result, but it should be pretty close.