Firebug : web development evolved

I found firebug very useful while developing my Paint Chat (which is not a big code as such but still), so here it goes in admiration of firebug:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug is firefox addon that helps you in webdevelopment with
its powerful feature such as javascript debugger, Inspect and edit HTML, Tweak CSS to perfection, Monitor network activity, Explore the DOM and many more. Feature I like most is its quickly diagnosing problem, it allows you set break points and checking intermediate values of variable for javascript thus making a great javascript debugger. Many times you are stuck at where did the code went wrong so in way its a lot useful in saving time.

I also like is its inspecting html and modifying html and css on fly and see the results with helpful tooltips. It also help in positioning of divs, images with its nice feature of visuallizing css metrics with ruler and box model coloring(HTML inspecting).

It other great feature is its interface which is comes with browser window split in two halves one for your website and one is extension interface (though it also can be detached from it). I am also a fan of Web developer toolbar extension but what it lacks is a java debugger and this great interface but both are a must of a web developer.

If you want to develop firefox extension..

February 12, 2007 | Filed Under programming, tips, web2.0, webdev | 1 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

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.

Hide data in files with easy steganography tools

Earlier I wrote about Steganography, also how data/messages can be hidden in image files in these posts :
How to hide files in JPEG’s
Steganography app hides a messages in plain sight
today i find this article on lifehacker, It discusses some windows tools ( Hide in Picture ) that can be used to hide data in images.

Other free Windows tools offer more filetype support. wbStego can encode and decode files in PDF’s, HTML files or bitmaps. mp3stego embeds text inside MP3 files (command line and GUI interface available.) Here are more Windows stego software options [via Webby's World].

funky javascript

Just paste the JavaScript given in you address bar after visiting any website.
Copy this to location bar & press enter.
——————————————————————————————–
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(“img”); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+”px”; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+”px”}R++}setInterval(‘A()’,5); void(0);
———————————————————————————————
This is what you get when you try it on search result from google images:

Source : Digg.com

October 8, 2006 | Filed Under programming | Leave a Comment

Blogger in beta

Try it at : beta.blogger.com
With the beta you can:

Categorize your posts with labels
Control who can read your blog
Change the appearance and content of your blog with your mouse instead of HTML

Read more : Techcrunch
buzz.blogger
Source : Techcrunch

August 15, 2006 | Filed Under blog, news, web | Leave a Comment

Rendr : CSS-HTML rendering tool

Rendr is a live CSS and HTML rendering tool. It displays what the page would look like as you type, making it great for rapid testing of page designs .
You can also install it as firefox extension using greasemonkey . Here is the script.
Read More here : http://gregtaff.com/rendar2.html

June 14, 2006 | Filed Under Uncategorized | Leave a Comment

Google Spreadsheet

Another week, another Google product launches. Or almost launches in this case. Google hasn’t opened up Google Spreadsheets, an Ajax spreadsheet, to the general public yet but they have published a tour of what the product will look like once it actually does launch, and you can request an invitation to try it out.

Files can be imported in CSV or XLS formats, so excel documents and other spreadsheet files should work in Google Spreadsheets. Files can be saved in CSV, XLS and HTML formats.

Phishing

Now a days, phishing cases had increased so here is brief writeup to give insight a about phishing . Read Wikipedia to know about phising examples.
Phishing is a technique used to gain personal information for purposes of identity theft, using fraudulent e-mail, instant messages that appear to come from legitimate site. These authentic-looking messages are designed to fool recipients into divulging personal data such as account numbers and passwords, credit card numbers and Social Security numbers.

why phishing works :

Lack of knowledge
Visulal deception : Phishers use visual deception tricks to mimic legitimate text, images and windows.

Visually deceptive text.: Users may be fooled by the syntax of a domain name in “typejacking” attacks, which substitute letters that may go unnoticed (e.g. www.paypai.com uses a lowercase “i” which looks similar to the letter “l”, and www.paypa1.com substitutes the number “1” for the letter “l”). Phishers have also taken advantage of non-printing characters [25] and non-ASCII Unicode characters [26] in domain names.
Images masking underlying text. One common technique used by phishers is to use an image of a legitimate hyperlink. The image itself serves as a hyperlink to a different, rogue site.

Bounded attention

Lack of attention to security indicators: When users are focused on their
primary tasks, they may not notice security indicators or read warning messages. The image-hyperlink spoof would ve thwarted if user noticed the URL in the status bar did not match the hyperlink image, but this requires a high degree of attention.

Techniques used within Phishing emails:

Official looking and sounding emails
Copies of legitimate corporate emails with minor URL changes
HTML based email used to obfuscate target URL information
Standard virus/worm attachments to emails
A plethora of anti spam-detection inclusions
Crafting of “personalised” or unique email messages
Fake postings to popular message boards and mailing lists

Preventing Phising :

If you get an email that warns you, with little or no notice, that an account of yours will be shut down unless you reconfirm billing information, do not reply or click on the link in the email. Instead, contact the company cited in the email using a telephone number or Web site address you know to be genuine.
Never respond to HTML email with embedded submission forms. Any information submitted via the email (even if it is legitimate) will be sent in clear text and could be observed.
Avoid emailing personal and financial information. Before submitting financial information through a Web site, look for the “lock” icon on the browser’s status bar. It signals that your information is secure during transmission.
Before signing to a page check for URL(make sure it is valid page, there may be some deceptive text there,like i in place of l). Or yo can try first enteing wrong password so a nonvalid page (if it is accessing information and is redirecting to legimate page to avoid being caught) will redirect you to correct page.
Switc your browser: use one with anti-phising agent (like firefox)

April 7, 2006 | Filed Under web | Leave a Comment

Little tweaks with javascript : Bookmarklets.

A bookmarklet is a snippet of Javascript that can be bookmarked (or saved as a favorite) inside your web browser. Bookmarklets can enhance web pages, add special functionality using javascript which is supported by most browsers today and make your browsing experience a lot more efficient by offering one-click access. I will first start with basics.
Consider a simple javascript :

javascript:alert(‘You clicked on the page’);

When you type this in browsers location bar then it will show a message box with “you clicked on the page” message. Now change this slightly :

javascript:function ab(){alert(“hello”) ;};void(setInterval(ab,1));

Now this will repeatedly pop-up the message box in every 1-sec interval. Though this is of no use i’m just telling this to explain basics of javascript.

Now filling form with javascript :

javascript:function ab() {document.forms[0].login_username.value=”someText” ; } ab() ;

Now this javascript will fill the value “someText” in field login_username of form in html page.
And lets try to take some user-input :

javascript:function ab() {q=document.getSelection(); if(!q) {void(q=prompt(‘Text :’,”))} else alert(q)} ab();

Now this javascript will first check if some text is selected on page. If no text is selected it will prompt user for text else will show an message box with selected text. Now we can put this script to some good use : like

javascript:function ab(){q=document.getSelection(); if(!q){void(q=prompt(‘Search Text at My Blog: ‘,”))} location.href=”http://www.technorati.com/search/ “+q+” linux?from=http://burad.blogspot.com “; }; ab();

Now this will search the selected text on my blog or if text is not selected than prompt user for text.

An equivalent script for searching on wikipedia is :

javascript:(function(){q=document.getSelection(); if(!q){void(q=prompt(‘Wikipedia keywords:’,”))}; if(q) location.href= ‘http://en.wikipedia.org/w/wiki.phtml?search=’+escape(q)})()

Now you can bookmark this script in toolbar so every tim you click on button in toolbar it will execute javascript. For example Drag this to your firefox bookmark toolbar :

Search Wikipedia

Some more bookmarklets :
Scale Images

Sort Table

Transpose Table

Show Password

So in a way they are different from bookmarks and provides extra functionality through power of javascript. Here are some more javascript bookmarklet
You can view source for each bookmarklet by viewing page source .
You can find more bookmarklets at : http://www.squarefree.com/bookmarklets/

See this helpful screencast on bookmarklets.

Some More Example at Wisdombay

Updated : For changing documenet backgrounds :
Change to Red
Change to green
Change to blue
This may not work with pages using css

March 23, 2006 | Filed Under programming | 7 Comments

← Previous Page — Next Page →