tabqwerty

SOPA Blackout

2012-01-18T00:00:00-08:00

Wikipedia is blacking out for 24 hours in protest of SOPA. The SOPA page is probably the only viewable page today.. Can’t live without Wikipedia? Try this in the JavaScript console:

document.styleSheets[1].insertRule("#mw-page-base, #mw-head-base, #content, #mw-head, #mw-panel, #footer {display: inherit !important;}", 0);
document.styleSheets[1].insertRule("#mw-sopaOverlay {display: none !important;}", 0);

Or sign the petition to say NO to SOPA!

Update: The Wikipedia blackout is driven by JavaScript. In the case of emergency, you can just disable JavaScript in your browser.

Mastery

2011-06-25T00:00:00-07:00

Likers Gonna Like

2010-07-27T00:00:00-07:00

Adding the Facebook Like Button to every post of your Jekyll blog is extremely easy. Here are the instructions on how to do it:

Specify your site url in _config.yml:

...
url: http://tabqwerty.com
...

Append the following code to your blog post template, i.e. _includes/post.html:

...
<iframe
  src="http://www.facebook.com/plugins/like.php?layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80&amp;href={{ site.url }}{{ post.url }}"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:450px; height:80px;"
  allowTransparency="true">
</iframe>

To make sure your webpage is “liked” correctly, enter the url into the Facebook URL Linter. This tool will tell you the metadata that will be extracted from your site and used to populate the ‘like’ stories that show up in the user’s feed. Enjoy!

Coming Soon - My Cooking Diary

2010-07-18T00:00:00-07:00

Mike Matas, Sharon Hwang, and I have been working on an amazing cooking blog. Here’s the wonderful teaser trailer of the website:

Colour Me Kubrick

2010-07-01T00:00:00-07:00

I was looking for a javascript color picker. In the MooTools land, there are a couple popular options: mooRainbow and ColorRoller. They would definitely get the job done, but I was looking for something even lighter and simpler. I really like the design and concept of a jQuery color picker called Farbtastic, so I decided to port it to MooTools. Here’s a cool demo of Kubrick:

Colour:

I hope you have fun changing the background color of my blog! Kubrick is an open source project. Feel free to use it or follow the project for improvements or bug fixes.

Rethink Animation

2010-06-11T00:00:00-07:00

I looked at how animations work in some of the most popular environments such as jQuery, MooTools, CSS3, and Cocoa. I noticed that there’s a common pattern — the effects are all bound by time. Those time-bound animations generally work well with simple motions. However, the static nature of these animations becomes a limitation since the predefined movement doesn’t adapt well to situations that require adjustment.

To address that issue, I implemented Fx.Spring — a custom animation effect that is modeled after the physics of a spring. The effect is not time-bound; instead, the effect duration is dynamic and is dictated by 2 constants: spring stiffness and friction. When friction is zero, you get a bouncy effect that goes on forever and greater spring stiffness means higher bounce frequency. When friction is present, the bounce will stop eventually and greater friction means that the bounce frequency decays faster over time. Not only does the spring animation render a realistic effect, it also adapts to varying situations more naturally as the movement is not predefined and is calculated dynamically. A demo of Fx.Spring here is probably worth a thousand words:

Transition:

Easing:

Duration(ms):

Stiffness:

Friction:

In an effort to show how the spring animation works, I made Fx.Spring an open source project on Github. I hope it helps you rethink about animation!

Playing with @Anywhere

2010-06-04T00:00:00-07:00

I have been meaning to check out the new Twitter @Anywhere Javascript API for a while. I decided to use it to build a simple Twitter client. Traditionally, if developers are using the Twitter REST API, they are required to set up some web service to handle authentication. However, I was able to complete the client without writing a single line of server code because @Anywhere pretty much takes care of authentication for you. @Anywhere also works well with Javascript frameworks such as jQuery and MooTools. I named my pure client-side Twitter client TabAnywhere and the source code is available on Github.

Like the Twitter REST API, @Anywhere is very simple and straightforward to deploy. My only complaints would be that 1) the documentation is not comprehensive and 2) the API does not seem to have a callback mechanism to report failures. Overall, I am very happy with the API and I think it has the potentials to revolutionize the industry like the REST API.

Oh, I would like to thank ded for his help.

Improved MooTools Slider

2010-04-21T00:00:00-07:00

MooTools has a pretty slick slider. It’s flexible and easy to use, but I notice the user interaction isn’t perfect. When I click on the slider track, the knob will move to where I click. Now when I hold the click and try to drag the knob, it won’t follow where I move.

To support the click and drag interaction, we would want the slider to listen to both mousemove and mouseup events when users click on the track. Mousemove is for notifying the slider about the drag. Mouseup is for notifying the slider when to stop following the mouse. Here’s how I did it by extending the current slider:

var SliderEx = new Class({
  Extends: Slider,

  // Binds does not support inheritance..
  // Therefore, we have to declare the new bindings
  // as well as the existing ones.
  Binds: ['clickedElement', 'draggedKnob', 'scrolledElement',
      'releasedElement'],

  releasedElement: function(event) {
    document.removeEvent('mousemove', this.clickedElement);
    document.removeEvent('mouseup', this.releasedElement);
  },

  clickedElement: function(event) {
    if (event.target != this.knob) {
      document.addEvent('mousemove', this.clickedElement);
      event.stop();
    }
    document.addEvent('mouseup', this.releasedElement);

    this.parent(event);
  }
});

The second part of the code is only there for suppressing the text-selection cursor when dragging. I wish CSS could just take care of that instead. Oh well, I keep the code above and some demos in github. Feel free to follow it for improvements or bug fixes.

Demo / Slider

Demo / SliderEx

Supporting Mouse Events on Mobile Safari

2010-04-08T00:00:00-07:00

Mobile Safari does a good job for making websites work seamlessly in a mouse-free environment. In general, it is pretty painless for both users and developers. For example, if you tap on something, the event would automatically be interpreted and handled as a mouse click. However, not everything is automatic; if the websites have any interactions involving mousedown, mousemove, and mouseup, they will not work well on Mobile Safari.

To support those interactions everywhere, developers need to take care of both touch and mouse events. One approach is to have additional event listeners for touch, but it gets tedious and ugly very quickly. A more elegant approach is to implement a global adapter that automatically map mouse events to touch events. Here’s how I did it with Scott’s help using MooTools:

(function() {
  try {
    document.createEvent("TouchEvent");
  } catch(e) {
    return;
  }

  ['touchstart', 'touchmove', 'touchend'].each(function(type){
      Element.NativeEvents[type] = 2;
  });

  var mapping = {
    'mousedown': 'touchstart',
    'mousemove': 'touchmove',
    'mouseup': 'touchend'
  };

  var condition = function(event) {
    var touch = event.event.changedTouches[0];
    event.page = {
      x: touch.pageX,
      y: touch.pageY
    };
    return true;
  };

  for (var e in mapping) {
    Element.Events[e] = {
      base: mapping[e],
      condition: condition
    };
  }
})();

The code above is kept at Github. You can follow it for improvements or bug fixes.

Touch is the new mouse! To fully embrace touch, you should definitely check out the Safari Web Content Guide and learn more about the new touch events.

Got RSS?

2010-04-06T00:00:00-07:00

RSS asks for a compact and structured version of a website, so users can easily subscribe and receive the latest updates. I heard a lot about RSS for years, but I never managed to adopt it. I guess I am happy with discovering content from social networks, where information is mostly ranked by human interest, not merely by time or artificial intelligence.

Anyway, I recently learned more about RSS from adding RSS support for Mike Matas’ website. If you are using blogging services like Blogger or WordPress, you probably get RSS support for free. For those who don’t, there are two steps:

Create a RSS feed. There are two popular RSS feed formats: RSS 2.0 and Atom 1.0. I decided to go with Atom, which is basically a XML document with self-explanatory tags:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>tabqwerty</title>
  <link href="http://tabqwerty.com/atom.xml" rel="self"
        type="application/atom+xml" />
  <link href="http://tabqwerty.com/" rel="alternate"
        type="text/html" />
  <id>http://tabqwerty.com/</id>
  <updated>2010-04-06T21:53:19-07:00</updated>
  <author>
    <name>Chi Wai Lau</name>
    <email>clau@tabqwerty.com</email>
  </author>
  <entry>
    <title>Hello World</title>
    <link href="http://tabqwerty.com/hello-world.html"/>
    <updated>2010-04-06T00:00:00-07:00</updated>
    <id>http://tabqwerty.com/hello-world.html</id>
    <content type="html">
      <p>Hello World!</p>
    </content>
  </entry>
  <entry>...</entry>
  <entry>...</entry>
</feed>

Reference the feed. Similar to how you would reference a CSS file in the html document, you would include the link of the RSS feed to the header:

<html>
  <head>
    ...
    <link rel="alternate" type="application/atom+xml"
          title="Recent Entries"
          href="http://tabqwerty.com/atom.xml" />
  </head>
  ...
</html>

That’s it! I was expecting some kind of notification step when the RSS feed was updated, but then I realized that RSS is a pull technology, which means that the readers get updates from pulling the feed periodically.

In the process of working with RSS, I discovered a Google product called FeedBurner. I was a bit skeptical about it because its website looked quite run-down. Nonetheless, it is useful for tracking your feed and generating an “adaptive” feed that supports both RSS 2.0 and Atom 1.0 readers. FeedBurner does the magic by adding a layer of indirection; instead of referencing your own feed in the header, you would create and reference a FeedBurner feed that references your feed. FeedBurner works, but I really hope that Google can just give it a facelift..