YJL

" ==========================================================================
" HTML Encode/Decode
" ==========================================================================
" ref: http://vim.wikia.com/wiki/HTML_entities#Perl_HTML::Entities
function! HTMLEncode()
perl << EOF
 use HTML::Entities;
 @pos = $curwin->Cursor();
 $line = $curbuf->Get($pos[0]);
 $encvalue = encode_entities($line);
 $curbuf->Set($pos[0],$encvalue)
EOF
endfunction

function! HTMLDecode()
perl << EOF
 use HTML::Entities;
 @pos = $curwin->Cursor();
 $line = $curbuf->Get($pos[0]);
 $encvalue = decode_entities($line);
 $curbuf->Set($pos[0],$encvalue)
EOF
endfunction

vmap <Leader>h :call HTMLEncode()<CR>
vmap <Leader>H :call HTMLDecode()<CR>

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.

This is how I wasted my time. 100% hand-coded.

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
}

I was reading UTF-8 and Unicode FAQ for Unix/Linux, I found many links are dead. Thats the beginning of why I wrote this scrip, linkckr.sh.

Give it a filename or a URL:

./linkckr.sh test.html
./linkckr.sh http://example.com

It does rest for you. You might want to tee, because there is no user interface, it prints results. If a page has many links, you may flood the scrollback buffer. The script is simple, actually, it does too much for me. (Ha, who needs coloring.)

I dont grep the links from HTML source, there always is a missing point in regular expression or the regular expression looks like Hulk. I decided to see if I could use xmllint to get valid links. It means only from normal <a/>, not those hidden somewhere or using JavaScript to open, nor URLs in HTML when you read it plainly with interpreting as HTML. It only takes /HTTPS?/ URLs to check.

The checking is using cURL and only used HEAD request, so you might get 405 and this script does not re-check with normal GET request. Also, those return 000, which might mean timeout after 10 seconds waiting for response. If a URL is redirected with 3xx, then cURL is instructed to follow up, and the last URL is shown to you.

There are few interesting points while I wrote this script. Firstly, I learned xmllint can select nodes with XPath:

xmllint --shell --html "$1" <<<"cat //a[starts-with(href,'http')]"

And standard input will be seen as command input in xmllints shell.

Secondly, cURL supports output format using -w:

curl -s -I -L -m 10 -w '%{http_code} %{url_effective}\n' "$url"

Note that even you specify a format, the headers of requests are still printed out. The output with the format is appended at last. The script retrieves the last line using sed '$q;d', if you are not familiar with such syntax, you should learn it. sed is quite interesting. Then it parses with built-in read, another interesting I have learned by myself long ago. Using cut is not necessary and its not so good, though read would have problem with additional spaces if those have significant meaning.

The rest is boring Bash. There is a bug I have noticed, the HTML entity in link, that would cause issue.

In this blog, a CSS class .wrapper is used for limiting the maximal width of post content, set to 640 pixel. I make sure every image will be resized to 640 pixel if either larger or smaller than 640 pixel in width using JavaScript. For YouTube videos, I always choose embedding code for 640px. I do these to have a better visual presentation, having a clear edges, stuff wouldnt poke out like a mess.

But I wonder, though I am not planning using the result I would have, if its possible that I could unwrap the wrapper?

Basically, I use jQuery to (re)calculate margins for each element with .unwrapper, so those element would be located and increased the width by only using margins.

Got unwrapped yet?

localStorage is a feature of HTML5s Web Storage. You can store or retrieve as the followings:

localStorage[key] = value;
value = localStorage[key];
delete localStorage[key];

localStorage.setItem(key, value);
value = localStorage.getItem(key);
localStorage.removeItem(key);

localStorage.key = value;
value = localStorage.key;
delete localStorage.key;

You can list:

for (key in localStorage)
  console.log(key, localStorage[key]);

You can clean up at once:

localStorage.clear();

You can put every thing in but you might not get what you put in, because

The setItem(key, value) method must first create a structured clone of the given value. If this raises an exception, then the exception must be thrown and the list associated with the object is left unchanged. If constructing the structured clone would involve constructing a new ImageData object, then throw a NOT_SUPPORTED_ERR exception instead.

No, this is not about using position: fixed by default. Take a look at this page as example, scroll down, and see the top-left. Notice the issue metadata stick on top? As far as I know there is no pure CSS for this task, it uses onscroll to do the job.

Here is the source code and you can play with jsFiddle, try the auto-scroll button.

I didnt invent this, the original code is from an answer¹ on Stack Overflow, and that seems to be from Stack Overflows code, but with a few of my own modifications. The code requires jQuery.

The #sticky-anchor is the most important part, it does two things:

Half a day ago, I suddenly had a very strong feeling while showering, so I tweeted this:

How I Code HTML on Seasons:<em>Spring</em> <big>Summer</big> <strong>Autumn</strong> <div style="visibility:hidden"><del>Winter</del></div>.

Now I came up with this (wait for 10 seconds, or reload page to see it again):

<div id="seasons" style="background-color:#444;border:2px solid #888;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;">Four Seasons: <em style="color:#4c4">Spring</em>, <big style="color:#f00">Summer</big>, <strong style="color:#ea4">Autumn</strong>, <span style="color:#cee">Winter</span>.</div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1');
function kill_slowly() {
        var t = $('#seasons span del').text();
        if (t.length > 0)
                $('#seasons span del').text(t.substring(0, t.length - 1));
        if ($('#seasons span del').text())
                setTimeout(kill_slowly, 1000)
        else {
                $('#seasons span').remove();
                $('#seasons').html($('#seasons').html()
                        .replace(/Four/, '<em>Three</em>')
                        .replace(/Spring/, 'Spring (Something new!)')
                        .replace(/Summer/, 'Summer (Hot, Beach, Bikinis! XD)')
                        .replace(/Autumn/, 'Autumn (Falling leaves, beautiful!)')
                        .replace(/, \./, '. <span style="color:#f00;font-style:italic;">Awesome!</span>'));
                }
        }
google.setOnLoadCallback(function(){
        setTimeout(function() {
                $('#seasons span').wrapInner('<del></del>').append(' (Freaking f**king cold!)');
                setTimeout(function() {
                        $('#seasons span').fadeOut(6000);
                        kill_slowly();
                        }, 1000);
                }, 10000);
        });
</script>

Really dont like Winter much.

<!doctype html>
<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <p>Hello World!</p>
    <input type="text" value="Text Input"/>
    <input type="button" value="Click on me!"/>
    <select>
      <option>This is always shorter and I hate that!</option>
      <option>Option2</option>
    </select>
  </body>
</html>

<a name="Damn">Blogger Drives Me Crazy!</a>
blah...
blah...
<a href="Damn">Go to Blogger Drives Me Crazy</a>
blah...
blah...

1. Edit your document in Google Docs
   
2. Copy HTML code from Edit/Edit HTML
3. Use a editor can support regular expression replacement. I use Vim. After the HTML in VIm, type :%s_"File_"http://docs.google.com/File_g
4. Paste the modified code to Blogger's editor. Don't switch to Compose mode.