Tag Archives: JavaScript

JavaScript without which a page is dumb.

Javascript Docs – Here we come

A new campaign has started – Promoting JavaScript Documentation, Promote JS.

One of the things that echoed my thoughts about JavaScript were these

This is the first impression of JS by the general masses who are coming to this language and once you see this, you can see why people consider it a “toy language” and understand how so much bad code and disdain can exist for JS. We have hidden the better tutorials, learnings, and documentations away from ourselves AND more to the point, those trying to learn this language. New entrants struggle to learn JS, but eventually just adopt what they know from PHP, Java, Perl, Python and Ruby to a close approximation of runnable code that suffices. They then publish it back out, proud of what they have done, and continue to perpetuate this plague of improper JS coding.

http://hacks.mozilla.org/2010/10/promotejs-a-worldwide-call-for-improving-js-documentation-visibility/

The aim of the campaign is

  • Improve JavaScript Documentation
  • Add more back links to current MDN / MDC documentation. So that a search terms like “JavaScript” gets MDN’s link as #1 reference instead of Wikipedia

 

Google Browser, gBrowser or Google Chrome

It was there … hanging, if Google was getting into the Browser market, now its almost a reality with Google releasing features of its browser in a comic strip.

Google Chrome comic strip

Baptised as Google Chrome, It has some of these features

Google Chrome Features

  • Each tab is a process
  • Each plugin has its own addres space
  • New JavaScript Engine V8 (Virtualized)
  • Tab is the primary UI (so no tabs in browsers, but browsers in tabs)
  • better autocomplete in the Address bar !! (Firefox 3 ?)
  • Tab page (9 most visited pages, Opera has a similar feature of quick links)
  • A Privacy Tab ! (nothing saved back to browser, readonly)
  • Sanboxing of Tabs’ memory (no reading from other tabs’s process, forget writing)
  • Google Gears in-built

You can enjoy the comic strip here. Or read more.

Photography is like Javascript

A lovely quote from one of my favourite feeds, dustindiaz.com

Photography is like JavaScript
As if you didn’t know it was coming to this. But let me be the first to put it into words. Photography is like JavaScript, and JavaScript is like photography. They are both expressive and beautiful. They can be done bad or good … Both can detailed and complicated. Both can be simple. They are both object-oriented.

..more

A better $ function

U may remember the $ function from prototype.js and the famous Top 10 JavaScript Functions.

It was when it struck me, that the multiple arguments to the $ function returns an array, a numeric index based array. So to refer to the numeric indexes, u need to remember the order that u’d specified ur ids.

My new $ function is a little better, it returns an object with the id’s name as the member name.

function $() {
	var elements = {};
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements[arguments[i]] = element;
	}
	return elements;
}

So if u use multiple ids as this…

var myObjects = $('id1', 'id2');

// Now u can use the references as 
myObjects['id1'].setAttribute("class", "myclass1");
myObjects['id2'].setAttribute("class", "myclass2");

New HTML Version

In Tim Berners-Lee’s Blog entry, Reinventing HTML, It seems W3C failed to implement the new XHTML standard amongst the developers. Thanks to all easy-go browsers, which will not validate tags, attributes, etc…

456bereastreet.com suggests some of the changes required in the new HTML version, I’d say version 5.0. Some of the points mentioned are.

  • New attributes that will make forms easier to validate: required for input, textarea, and select elements, maxlength for textarea elements.
  • The reappearance of the start and value attributes for ol and li elements respectively.
  • Stricter, XHTML-like syntax: make lowercase required for all element and attribute names, make quoted attribute values required, require all end tags that are currently optional.

Changes required for HTML v 5.0

  • Browsers shouldn’t render anything if there is any major error in Document, or atleast give a warning
  • Direct Form validation support: no need of Javascript for trivial validations
  • A “TABLE” like tag that works as well as “TABLE” for layout and positioning, Developers are sick of making CSS work for all browsers

Web Accessibility: Anchor tags for Popup windows

Many a times, on your page, you need to have a JavaScript pop-up window for Slideshow, gallery, comment form, etc. But you also want to have your site WAI compatible. What do you do ?

The idea is to pop-up windows in Browsers that support JavaScript and provide actual href value to the Anchor tag a. But also provide an onclick event that pops up the window.

Consider I want to have a slideshow on a particular link, which actually should pop a 500 x 400 window keeping WAI in its place. This is the code that helps me solve the problem.

Code

...
<script type="text/javascript">
function popW(url) {
  window.open(url, 'newPop', 'width=500,height:400, directories=0');
}
</script>
...
<a href="/slide-show.html" onclick="popW('/slide-show.html');return false;">Slideshow</a>
..

Let us understand it..

  • The Slideshow page is spearate document/page
  • The anchor’ href attribute specifies the correct link to the page
  • The onclick handler pops the window, in browsers with JavaScript enabled
  • Notice return false; after the function call in onclick. This prevents JavaScript enabled browsers to load the href link on the current page

Search Engine Optimization Checklist

Got a site online? and want to make it really SEO Friendly?

Here is a checklist that you need to consider before you put your site live.

SEO Checklist

  • Find keywords and phrases, and try to include them in the title element.
  • Make sure the keywords and phrases occur in the page, But need not overdo its occurance
  • Use meta tags, to define keywords and description
  • Use keywords and phrases in heading elements like h1, h2, ..
  • Try structuring the content, using heading elements instead of changing font-sizes and colors, they can also be applied to headings
  • Do not keep a splash page, I hate it, so do Search Engines
  • The URL should ideally contain keywords related to that page, Apache URL Rewriting
  • Avoid GET parameters to change content of page
  • Avoid using javascript URLs, if you do, remember to add actual hrefs that lead you to that page or similar content
  • Make sure none of the links are created by JavaScript, they should be available in plain HTML
  • Adhering to semantic content, All menu links should ideally go into a list using li
  • Avoid writing CSS inline, keep them in files and call using link href="style.css" ... tag
  • Use semantic markup like em tags for italics and strong for bold text.
  • Try placing the actual content of the page at the begining…, Use CSS to change its position
  • The image tags should ideally have alt attribute that defines the image, inclusion of keywords in it will be helpful
  • The image filename should ideally describe the image