Archive for the 'Browsers' Category

[geeknotes] Panning Navigator with jQuery, Html 5 Canvas

Seems that I happen to like coding several stuff when it comes to the end of the year. As such, I’ll decide to delicate this piece of script/code/site to my all my fellow photo enthusiasts and geeky friends as a late Christmas but an early new year’s gift.


Panning Navigator - jQuery + Canvas by Zz85

I decided to implement a Panning Navigator in Canvas while experimenting with various UI navigation working on my notation project (like the navigator in Sibelius). This panning navigator is what one might usually see in Adobe Photoshop, Illustrator, etc, and it seems few have implemented this, perhaps a handful implementations with flash, but none I came across with javascript. As for its name, I was not even sure what’s the name but seem this site seem to suggest this ui pattern as a panning navigator for dealing with large canvases with a draggable viewport.

So without further to do, check out the demo here. http://jabtunes.com/notation/panning_navigator.html

Here are some of the features
+ Drag the viewport in the navigator to view around
+ Mouse wheel can control the zoooming
+ Fill, Fit to screen for quickly zooming out, 1:1 for actual size and 3:1 for zooming in.
+ Fullscreen photos and navigator response to browser resizes
+ Features some photos from my early photography
+ Canvas used for drawing the navigator and creating the “thumbnailed” image.
+ Css for aligning navigator, resizing and repositioning image
+ Seems useful with large photos and panoramas
+ Should run iphone and android browsers although experience may be improved
+ Oh also released as do what every you like to do with the source license, but remember to let me know your comments.
(Warning: Some images are huge, please be patient while waiting)

Comments are welcomed. Maybe, when its polished up, bug free and extensible, I might release this as a jquery plugin.

Goodbye 2009 and an early happy new year to all!

p.s. One might check out the jQuery supersized plugin for where the fullscreen photos were partly inspired by.

p.p.s. For source code: use your browser “View Source”.

RSS Feeds Aggregator

RSS issn’t the new kid on the block (5 years since I heard of it), but its time to review what I know about it. RSS, Really Simple Syndication, or is a combination of XML and Web Services ideologies. A small subset, yet huge in its practicality.
“Feeds” if used like a noun seems to be a synonym to RSS and if thought
as a verb describes webpages feeding your computer with information. An
aggregator or a reader pulls or get “feeds” with data, organise and
present them to the user.

Here’s four reasons why you should use RSS.

1. Check sites for updates (or not).

2. Information Quickly.
3. Get Content without the Clutter
4. Organisation!

1, RSS allows you to see check your favorite sites for updates without all the manual clicking. 2, You can see new(/old) subjects and perhaps extract at a glance. You get information quickly because all information is consolidated. 3, You read the contents in a consistent manner, and avoid the different fonts, layout, bad designs, and links getting to their pages. Maybe RSS is an alternative to your web browsing. 4, You organise information in a meaningful way, in a task oriented, or just the way you want it to be.

In short, time savings and productivity!

Here’s some type of content you might use RSS with.
1. Blogs
2. News
3. Updates

My observation: Before social networking boom like Facebook, blogs were the majority procrastinators paradise. Anyway, lots of time would be spent just going through your list of friend’s online diary. RSS can help you cut down the time on that. News feeds update you with the most current affairs. RSS’s a good way to check updates on communities you are interested.

Where you can use RSS.

1. Browsers - IE . FF . Opera, Maxthon,
2. Widgets/Plugins/…
3. Client software
4. Mail Readers
5. Web-based

Over time has RSS applications evolve while others adapts. 1. Almost all modern browser (and their wrappers, addons) supports RSS whether with a reading pane, or just as improved bookmarks. 2. Desktop widgets, web plugins (for Wordpress or Facebook maybe) supports them. Web desktops like iGoogle, myYahoo, live would support feeds. 3. If you prefer a dedicated software try the free, multi-platform RSSOwl or look at some of the huge lists around. 4. Mail clients being the perhaps the no.1 work software, would now include RSS support as a way of “working”. 5. A method of solving the problem of reading your feeds everywhere is to implement it online. Here an review on some of the best web rss clients. Knowingly or not, web sites are using RSS behind the scenes eg. Google News.

Now to get started, lets use Google Reader, the web based RSS reader. Much improvements since I first used it, here are their powerful features and some useful tips:

1. Adding sites
Their quick add button allows you to throw any site URL, and Google reader works behind the scenes to find the feed, extract the RSS and add it to your collection. Most blogs nowadays have would have RSS, in case Google don’t find feed on some blogspot sites are perhaps because they set their privacy for Google to ignore. just add /feeds/posts/default
and the feed is added. eg. hello.blogspot.com/feeds/posts/default

2. Add tags/folders
Group your sites. Example blogs, news, games so on… You could click on a category to show you all stories from the sites in that group, just like each reply in a Gmail conversation.

3. Import/export your feeds.
Dump all your sites into GReader or dump them into a file if you wish to switch to another application.

4. Personalise your feeds.
It easy to add large lists quickly and loose interest soon because of information overloading. Go slow but steady. Add pages which are interesting but not your site hangouts into a separate group so important sites to you won’t get
And lots more!

Get read-feeding!

Threaded/Nested Comments History and Beta 1

When I first saw it(can’t remember on some forums or wordpress), the threaded comment idea got stuck to me.

When I wanted to install that for my blog, it seems that I couldnt even decide which webpage to visit and even more complex for to to decide what to install.

Anyway at least I knew later 3 important names were involved.

Dodo.
Mark.
Brian.

It was difficult for me to know whats going on, because the installation instructions does not seem to be easy and for no reason I still cannot visit Brain’s blog (I managed to get the code looking at the source, and from wiki/). So as far as I could make out the history, the story goes something like this.

Dodo, running her on blog using the b2 engine,  created the earilest threaded comments hacks or plugin I could find.

Mark,  came to "translate or port" the script for wordpress 1.2. Although it supports non-javascript browsers, everytime you click on a comment  to reply it, it redirects you to another page to post your comment.

Dodo have since moved over to wordpress. She finds that  its troublesome to open another page just to submit a comment. She add javascript and a hidden field to mark’s script  so a visitor can post a thread reply in the same page.

Dodo then switch to 1.5, and has upgraded her scripts. She also has plugins for notifying visitors who made comments through email called Threaded Comments Notification.

The latest advancements for the plugin was made by Brian. More javascript and DOM was involved, css, and option page was also there. Brian’s threads could be expanded and hidden, giving the wandering effect. Clicking the reply to comment would move the commentbox into the thread, compared to previous version where the page just scrolled to the bottom to make a comment.

Then came along I, who wanted to make things even similar. I didnt want to modify the database or edit the comment.php file. So I used javascript, "injecting" fields into the comment page, using DOM to do the reordering of comment boxes. Much work was based from Brain’s version. If someone do no have javascript enabled, he would see the normal layout.

Of course its far from perfect, and it has alot of issues. Anyone who can help is great. Esp. it does not work with IE.

Goto the plugin page.

webhop URL

I got myself a redirectional or webhop url and which is easier to remember and quite meaningful one too..

Means you can access my blog thru this url http://zz85.is.dreaming.org/

IE users, you can add me to favorites here

Firefox/Mozilla users, see the RSS icon on the bottom right? LiveBookmark Use this to add a Live Bookmark for my Site.

Session Saver Extension

For Firefox/Mozilla fans, this plugin named SessionSaver has a feature many users want…

Its saves all the tabs and the state you have before it crashes or closes. Something from Opera and Maxthon I wanted in Firefox.

I like to say many “power features” usually do not come with a good but simple software but with its plugins. Other extensions for firefox I’m currently using.

FlashGot
Mouse Gestures
Tabbrowser
Web Developer
Javascript Debugger
View Cookies
Tweak Network
Adblock
Greasemonkey
Menu Editor
Dictionary Search
Google Suggest
Google Toolbar for Firefox
Live HTTP Headers