Protofy – The art of Prototyping

WidgetPad describes itself as :

“collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript.”

This is a wonderful initiative to share and modify already built code. I hope they reach a level where all of these components can be bundled into a framework library like Dojo. You might say that there are libraries such as JQTouch which are already out there. But I found that the CSS based animations are aimed solely at the iPhone and iPod touch. Android devices such as G1 had much trouble rendering the swipe and slide animations.

Interestingly the 3D photo example using HTML5 and JavaScript makes the Iphone slower reminding that its not only plugins but embedded manufacturer supported technologies can also slow down when the limits are tested.  Only toggling the screen lock would un-freeze mobile safari out of its task in rendering the wall.

Looking for a Intel SSD, I thought I could just go to intel.com and click on the SSD link under their products/ hard drive section. One,  their SSD page is buried under products/netbooks/”Solid-State Drives and Caching” category and two this is what happened on my browser:

Update: Works in Firefox. Safari still has a 10% market share and should be supported or at least tested.

Intel, you lost my business as I got distracted writing this post rather than trying to buy a SSD from you.

I must confess, I am not a validation freak. Semantics and pixel perfection are my primary goals. Forgetting to specify a “type” on a javascript is not the biggest crime.

However I went ahead and validated the page I made for this telecom major. A social media campaign microsite which we created in five using restful calls and jquery in the front.

Back to validation, 11 validation errors awaited me, apart from the missing “type” attributes, I had custom attributes, ouch!

I was using those attributes among others for parameters, Ajax url’s. I knew the solution was a custom DTD, I remembered from a previous oroject where we had used adobe spry widgets, the software would drop a custom namespace on top of the header. Searching on the adobe site I figured that they had a tough time too and suggested having a entity tag in the header for the valufator and remove it when going to production.

Code samples in my case are in the next post.

Oh and other than that I had a custom live chat code that had reserved keywords and unescaped characters.

So what did I do? read my next post for the answer.

1
2
3
4
5
6
7
8
9
10
11
12

	if(navigator.appName.indexOf("Explorer")== -1)
	{
 
		// Simulates the click() event for gecko based browsers
 
		HTMLElement.prototype.click = function()
		 {
			var evt = this.ownerDocument.createEvent('MouseEvents');
			evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
			this.dispatchEvent(evt);
		 }
	}

Source : Unknown

Drop me a line and I will provide credit

Here is a simple snippet that enables OuterHTML in Firefox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

if (document.body.__defineGetter__) {
 
       if (HTMLElement) {
 
              var element = HTMLElement.prototype;
 
              if (element.__defineGetter__) {
 
                     element.__defineGetter__("outerHTML",
 
                           function () {
 
                                  var parent = this.parentNode;
 
                                  var el = document.createElement(parent.tagName);
 
                                  el.appendChild(this);
 
                                  var shtml = el.innerHTML;
 
                                  parent.appendChild(this);
 
                                  return shtml;
 
                           }
 
                     );
 
              }
 
       }
 
}

Originial Credit : Snipplr

I like comparisons and especially when a tool takes my input and produces 3 different

Step in Compressor Rater it takes the Dojo Shrinker, JSMin and YUI compressors for Javascript and produces a report as well as gives you an option to copy paste the resulting code.

More > http://compressorrater.thruhere.net/

Both Jquery and Mootools are great libraries, however one must win. Is it the Cow or the Dome, find out as I compare both these libraries feature by feature.

But why now?, Mootools has just released their 1.2 version which boasts of a HashMap for clientside objects.

Jquery has seen a 1.2.1 version ( sounds familiar?, look above) for a month now.

Why dont you subscribe to the feed to be the first one to hear about it.

This page is a XHTML 1.0 strict page and I wanted a new window to open on external pages on the previous post

Sadly XHTML 1.0 strict doctypes dont allow blank window’s. Enter good old hacks

Here’s how it is achieved, use the standard

< a href=" yourlink.html " rel="external" .... and use the following snippet to be called on all pages

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i   var anchor = anchors[i];i++) {
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;Code from the article at Sitepoint : New-Window Links in a Standards-Compliant World

You just have to be a dynamic HTML in your head or else you will be archived