A thousand on del.icio.us & Stumble

Today i crossed 1000 bookmarsk on del.icio.us and stumble
On del.icio.us :
On Stumble:

My del.icio.us page
My StumblePage
My collection of del.icio.us tags
Firefox Extension created by me : My Del.icio.us Toolbar 2.0 Provide your feedback.
Try Del.icio.us Searcher

February 11, 2007 | Filed Under offbeat, web2.0 | Leave a Comment

Play with html using javascript

Javascipt can be very fruitful and flexible when it comes to modifying webapges dynamically (though client side). Javascript can be helpful in creating response to browser events like mouseup, mouseover etc, veryfying of form values prior to submitting them, changing style and value of html elements dynamically.
Examples i disscuss here are being user by me in developing Paint Chat !! So here I go..
You can write javascript functions and code in section as:

<script type="text/javascript">function test(){alert("test javascript");}</script>

Action on events:

Example of events can be mouseclick, keystroke, submitting form etc.
With onload()

 <body onload="init()">

Now init() function will be called when this html page is being loaded.
For links, javascript function can be evoked when clicking, mouseover over links like

 <a href="javascript:replay()" mce_href="javascript:replay()">Refresh ! </a>

Now function replay() will be called when Refresh! is clicked. For input text box

<input type="text" size="30" id="search" onchange="suggest()">;

Now whenever content of textbox changes the function suggest() will be called. It can be useful when feature like google suggest has to be implemented or so.

On submitting forms:

<form method="post" action="some.php" onsubmit="return checkForm()">

So whenever this form is being submitted checkForm() function will be called and can be helpful in verifying values of form elements.

onMouseOver and onMouseOut:

<a href="http://www.aburad.com/blog" mce_href="http://www.aburad.com/blog" onmouseover="fade()"><img src="image.gif" mce_src="image.gif"> </a>

Now when mouse is over image fade() function will be called and can be used for animate and styling purposes.

Registering of events

A simple way can be:
Conside the html code : <div id="sample"> ..... some... html..text.. </div>
Now using javascript you can register event for this div by:

 var div_sample = document.getElementById('sample');div_sample.onmousedown=sampleMouseDown ;

Now whenever mouseover ocours over this div html element sampleMouseDown() function will be called. Events can also be registered using addEventListener() . Find more information baout it here:Advanced event registration models

Modify Style and values for html elements

Within some javascript function, you can first get the element object by getElementByID() getElementsByName() for example conside the javascript code:

document.getElementById("colorcode").innerHTML = "#000000"; document.getElementById("bgtest").style.backgroundColor= "green";

The first line find the html element with id colorcode and then set its value to “#000000″ using innerHTML. In second line, it sets the background of html element with id “bgtest” to green.

Some other tweaks which were useful :

Calling some function repeatedly with some time interval, consider javascript code:

var intervalID = setInterval(drawCurve, 100);

So the drawCurve() function will be called repeatedly after 100ms. You can cancel this process( removing repeatedly calling) by clearInterval(intervalID);

You can use setTimeout(drawCurve,100) function to delay drawCurve() execution for a specified time period(100ms).

Calling a php function inside javascript:

var testImg = new Image(); testImg.src="form.php?name=form_value" mce_src="form.php?name=form_value";

Now here in form.php you can fetch value of variable name using $_GET and can perform appropriate action.

Some links:

February 11, 2007 | Filed Under programming, tutorial, web2.0, webdev | 4 Comments

Microsoft Clippy, RIP: 1997 – 2007

Microsoft finally axed the most annoying aspect of Office has decided to leave “Clippy” behind in Office 2007.

One of comments from Digg:

“Clippy, it looks like you’re going to your grave. Do you need help with this?”

Rubiks Cube with flashy lights and voice

from Engadget

New “Rubik’s Revolution,” a supposed “sequel” to the original Rubik’s Cube. The new cube keeps that 3 x 3 configuration and the iconic colored sides, but adds in electronic games including Light Speed, Rapid Recharge, Pattern Panic, Cube Catcher, Code Cracker and Multiplayer Madness.

Paint Chat !!

Now chat using a paint brush !!.

I had made this app which uses paint brush to express yourself and share with others. This uses HTML:Canvas for drawing graphics using javascript, so no sluggish java applet and flash. It uses XMLHttprequest to synchronize paint screen with server. You can share this url with your friends to have a chat with paint brush and use Refresh !! to update your paint screen with that of your friend.
Read about Paint chat.
Try It out : Paint Chat

Updated: I have added feature for filling up whole background with color and also the transparency feature.

Twisty Puzzles

I’m a fan of Rubik’s Cube…though i’m not very fast but i can solve it in around 90 sec or so..
i stumbledupon this page having collection(pics) of wide variety of derivatives of rubik cube and similar puzzles.Then i searched for more such links..and i found this Huge Rubik’s Cube Collection.

Visit:
Magic Polyhedra and Other Sequential Movement Puzzles,
Knuttz.net: Rubik’s Cube Collection

February 8, 2007 | Filed Under gaming | 4 Comments

Online Music & Photo Editing

Techcrunch covered web2.0 startups relating to photo editing and Social music. Some of them really cool like pandora, last-fm for music which i use very often. I also have used picnik. So here are links for more such web applications.

Social Music Overview
Online Photo Editing Overview

February 7, 2007 | Filed Under image, listing, music, web2.0 | Leave a Comment

2000 Blogger list

Tino Buntic is trying to compile a list 2000 bloggers with linked mugshots. I’m in there somewhere too. You can try and get on the list too….

Some useful command line tricks

SEOmoz.org has listing of linux commnad that may be useful in web development but they are uerful otherwise too.
Some of them are here:

ln -s /some/destination name_of_link
ctrl+z and bg
scp : scp user@example.com:~/dir /destination

Read More : Web Developers: 13 Command Line Tricks
Some other Miscellaneous Tricks:

ls -lSr List files (sorted by size)

df -h Show available disk space in human-readable format

du -sh /some/dir Show how much space /some/dir is taking up

February 6, 2007 | Filed Under linux, listing | Leave a Comment

Web 2.0 … The Machine is Us/ing Us

I found this awesome video through digg . It explains how web has evolved making it more interactive, flexible and useful through videos, photos, map, search and much more…
Web is becoming more powerful with technologies like Ajax, XML etc
It was created by Michael Wesch, an Assistant Professor of Cultural Anthropology at Kansas State University.