by edvakf

Here is a demo I made today.

http://atsushi-takayama.com/junk/ripple/



I tested it on Safari, Opera, Firefox. But Opera 9.64 has a bug about transparency of the canvas, so the color is worng. Opera 10 alpha works fine.


You can also copy the JavaScript source (link below) and paste it in the address bar to run as a bookmarklet, on any page you like.

http://gist.github.com/105217

Yesterday, I saw a cool demo of <canvas>

Opera canvas sand


Opera has 'opera-2dgame' context for <canvas>. One of the things you can do with it is that you can manipulate the canvas pixel by pixel (link below). It's using that to get the animation effect looking as if the image is blown away by a wind.

The 'Opera-2dgame' Canvas Context - By Web Applications

Nice, isn't it?

I wrote a post (link below) about 3 month ago about a Hit-a-Hint bookmarklet.

Improvement to Hit-a-Hint bookmarklet for Opera

Today I made it even nicer with integrated ability to focus on text areas, select buttons, click javascript-executing links.

I also made a page where you can customize your own keybind.

Here it is Hit-a-Hint Generator for Opera

Feel free to tell me if you found a bug. Most of the time when hints are not drawn, it comes from Opera's bug with getClientRects...

The Hit-a-Hint bookmarklet created by Blazeix is absolutely fabulous.
Vimperator for Opera - Blazeix's Blog - by Blazeix

I made a change to the original script so that I can have any letters I want for hints.

Here it is.

javascript:(function(){var hintkeys='asdfghjkl';var maxdigit=4;function createText(m){var ret='';var l=hintkeys.length;var d=maxdigit*l;while(m>=0){while(m-l*d<0){d--;}ret=hintkeys.charAt(m-l*d)+ret;m=d-1;}return ret;}function retrieveNumber(w){var ret=0;var wlen=w.length;for(var i=0;i<wlen;i++){var fix=(i==0)?0:1;var t=w.charAt(wlen-i-1);ret+=(hintkeys.indexOf(t)+fix)*Math.pow(hintkeys.length,i);}return ret;}var bgcolor = '#FF0';var bghighlight = '#0F0';var color = '#000';var hintlist = new Array();var hintedlinks = new Array();var map = new Array();var choices = new Array();var mapindex = 0;var choice = '';var keycodemapping = {'13':'Enter','27':'Esc','8':'Bkspc','44':','};for(var i=0;i<hintkeys.length;i++){var ithkey=hintkeys[i];keycodemapping[ithkey.charCodeAt(0)]=ithkey;}var originalTitle = document.title;function drawHints(){document.addEventListener('keypress',interpretKeyStroke,true);document.title+=' - ';var allLinks = document.getElementsByTagName('a');var viewportStart = window.pageYOffset - 5;var viewportEnd = viewportStart + window.innerHeight + 10;for (var i = 0;i<allLinks.length;i++){linkYcoord = getAbsoluteY(allLinks[i]);if(linkYcoord > viewportStart && linkYcoord < viewportEnd && allLinks[i].href != '') {hintedlinks.push(allLinks[i]);}}for (var i = 0;i<allLinks.length;i++){var hint = document.createElement('span');hintlist.push(hint);hint.style.backgroundColor=bgcolor;hint.style.color=color;hint.style.position='absolute';hint.innerHTML = createText(mapindex);map[createText(mapindex)]=hintedlinks[i].href;mapindex++;hintedlinks[i].appendChild(hint,hintedlinks[i]);}}function getAbsoluteY(element){var y = 0;while (element) {y += element.offsetTop;element = element.offsetParent;}return y;}function removeHints(){for (var i=0;i<hintedlinks.length;i++){hintedlinks[i].removeChild(hintlist[i],hintedlinks[i]);}choice='';document.title=originalTitle;document.removeEventListener('keypress',interpretKeyStroke,true);delete map;delete hintlist;delete hintedlinks;delete choices;}function interpretKeyStroke(e){e.preventDefault();var key=keycodemapping[(typeof event!='undefined')?window.event.keyCode:e.keyCode];if(key=='Enter'){choices.push(choice);for (var i=0;i<choices.length;i++) {if(map[choices[i]]!=undefined){window.open(map[choices[i]]);}}removeHints();}else if(key==','){if(choice!=''){choices.push(choice);hintlist[retrieveNumber(choice)].style.backgroundColor=bghighlight;choice = '';document.title+=',';}}else if(key=='Esc'){removeHints();}else if(key=='Bkspc'){if(choices.length){if(choice!=''){choice='';}else{hintlist[retrieveNumber(choices.pop())].style.backgroundColor=bgcolor;document.title=originalTitle+' - '+choices.join(',');}}}else if(key == undefined){removeHints();}else{choice+=key;var choicestring = (choices.length) ? choices.join(',')+','+choice : choice;document.title=originalTitle+' - '+choicestring;}}drawHints();})();

It's only for the extended hints mode (see Blazeix's post).
It doesn't work on firefox (Hints disappear when you start typing them in).

You can set any hint letters by changing

var hintkeys='asdfghjkl';

The following

var maxdigit=4;

is the maximum number of hints it can deal with. If you have too few letters for hints, you'd better change this. By default it's capable of showing (9 letters)^(4 digits)=6561 hints.

The main change is the next two functions.

function createText(m){var ret='';var l=hintkeys.length;var d=maxdigit*l;while(m>=0){while(m-l*d<0){d--;}ret=hintkeys.charAt(m-l*d)+ret;m=d-1;}return ret;}
function retrieveNumber(w){var ret=0;var wlen=w.length;for(var i=0;i<wlen;i++){var fix=(i==0)?0:1;var t=w.charAt(wlen-i-1);ret+=(hintkeys.indexOf(t)+fix)*Math.pow(hintkeys.length,i);}return ret;}

The first one is to convert the a number (1,2,3,...) to a hint (a,s,d,...aa,as,ad,...), and the second one does exactly the opposite. I inserted them in the code.

Then I changed keycode mapping as the following so that your added letters will be reflected.

var keycodemapping = {'13':'Enter','27':'Esc','8':'Bkspc','44':','};for(var i=0;i<hintkeys.length;i++){var ithkey=hintkeys[i];keycodemapping[ithkey.charCodeAt(0)]=ithkey;}

That's it. Enjoy!


[Update 2008-10-21]

I made a new version, which is almost complete rewrite from this one.

Improved Hit-a-Hint Bookmarklet With Your Keybind

Fastladder is an online RSS reader that come with a very powerful prefetching function. Its interface is well designed so that users rarely feel any delay. The feeling speed is almost incredible compared to Google Reader or Bloglines, especially if you have a large number of subscribed feeds.

The service sells itself with the copy "1000 feeds in your sight", by which they are trying to say "No matter how many feeds you subscribe, it will never slow down." In fact the developper of this service claims that he is reading 7000 feeds, and Fastladder is made for those people like him. At the moment, I'm reading only 164 feeds--of which about 10 are newspapers, 20 are online magazines, and the rest are blogs--but if I export them to Google Reader, it is already quite stressful to use.

It's free, of course. You just need to go to Fastladder.com and sign up or use OpenID/Yahoo ID to sign in. If you are migrating from another feed reader, you can import the OPML file. There is a bookmarklet to subscribe for an atom/RSS as well. In Opera, I use a keyboard shortcut for subscription,

Go to page, "javascript:location.href='http://fastladder.com/subscribe/'+location.href"

How it works is that you look through your feeds with the keyboard shortcuts. As you go down ('j'/'k' for up/down items, 's'/'a' for next/previous feeds), it prefetches the feeds ahead. If you want to open an article, you can either open by 'v' or pin it by 'p' and open all the pinned items later by pressing 'o'. These shortcuts makes news reading superfast. You can still use Fastladder with a mouse, but in that case you have to use a user JavaScript to turn on the prefetching function (I saw this script somewhere and I'm looking for it). By this pinning, I sometimes open over 100 tabs. What Opera is nice about, unlike Firefox, is that there is no speed loss even if you have that many tabs open. I think Opera IS the browser to use Fastladder.


So that's about Fastladder online. Yesterday I saw quite a stunning news. Fastladder now made an open source version which you can install in your local machine. It acts as a local server that you can open in your browser, and has most of the functions of Fastladder online version.

For windows, there is a one-click installer. How to install is described in their blog. On Mac OS X and Linux, installation is a bit harder. You need to have Ruby 1.8.6 and RubyGems (and FreeImage library for Linux) installed. According to the blogs of people who already tried it, the installation is straightforward, a few lines of command.


As I wrote above, the online Fastladder is (or feels, at least) as fast as many of the local RSS readers already. You might want to install it if you wnat to use it even faster (no time lag even using a mouse), or if you need to read non-public feeds in an intranet, for example.

The open source Fastladder is aiming to work on group sharing functions, full text search, etc, which Fastladder is currently lagging behind Google Reader.


See also
Videos
http://www.youtube.com/watch?v=6C0BRHj0_5o
http://www.youtube.com/watch?v=VV7qASlEmtw
(Fastladder is originally released as Livedoor Reader in Japan)

Introduction on Life Hacker
http://lifehacker.com/software/newsreader/organize-and-search-your-feeds-with-fastladder-274833.php

User's blogs
http://www.insideview.ie/irisheyes/2007/08/fastladder-spee.html
http://garbledzombie.wordpress.com/2007/10/11/switch-to-fastladder/