Vishnu Gopal

blog.vishnugopal.com

Tag: web

March 8, 2008

An Orkut Application via a JSON API

I talked about delegating rendering in Symfony for creating a JSON API. Now here’s a consumer: an Orkut opensocial gadget:


MobshareOrkutAPI = {

	api_url: 'http://api.mobshare/api.php',
	cache_time: 0, //0 to disable

	makeCachedRequest: function(url, callback, params, refreshInterval) {
	  var ts = new Date().getTime();
	  var sep = "?";
	  if (refreshInterval && refreshInterval > 0) {
	    ts = Math.floor(ts / (refreshInterval * 1000));
	  }
	  if (url.indexOf("?") > -1) {
	    sep = "&";
	  }
	  url = [ url, sep, "nocache=", ts ].join("");
	  gadgets.io.makeRequest(url, callback, params);
	},

	call: function(module, action, params, callback) {
		var options = {};
		options[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
		this.makeCachedRequest(this.api_url + '/' + module + '/' + action + '?' + params, callback, options, this.cache_time);
	}

};

makeCachedRequest has been plaigarized from the Opensocial documentation and it’s very useful to bust the cache for requests. Also, notice this line for setting the content-type to JSON:


options[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;

This is how we access that API, a code fragment:


...
authenticate: function(alias, mobile_no, password) {
	MobshareOrkutAPI.call('user', 'authenticate',
		'alias=' + encodeURIComponent(alias) + '&mobile_no=' + encodeURIComponent(mobile_no) +
			'&password=' + encodeURIComponent(password),
 		MyOrkutApp.login
	);
}
...
login: function(orkut_response) {
	response = orkut_response.data;
	data_success = response['success'];
	data_error = response['error'];

	if(data_success) {
		html = '<h2>Login Successful!</h2>';
		html += '<p>Welcome: ' + data_success.name + '!</p>';
	} else if(data_error) {
		html = '<h2>Login Unsuccessful!</h2>';
		html += '<p>' + data_error + '!</p>';
	}

	document.getElementById('mobshare_login').innerHTML += html;
},
...

Note that orkut_response.data is automatically set by Orkut because you passed in the JSON content type; it parses the data received and creates a javascript object. Cool, ain’t it? It’s very easy to create a proper interactive Opensocial app this way.

Leave a comment
March 6, 2008

Delegate Rendering in Symfony

Warning: pretty advanced Symfony ahead: if you’re not familiar with the framework, this wouldn’t make sense.

I recently developed a bare-bones API for Mobshare (it’s not yet live), and to keep everything clean, I abstracted away the rendering bit from the controller to an external class. It ended up being a sweet solution, so here it is!

I wanted this to be a JSONP API (the major use case would be a JS client, and parsing XML etc. via JS is a pain. Besides JSON is much shorter over the wire). I didn’t want to rewrite a lot of code: checking for a callback parameter and wrapping the returned string around the JSON output was just begging to be refactored away. So here it is, a generic Symfony JSON API wrapper class:


<?php

class JSONPAPI {

	const CALLBACK_PARAMETER = 'callback';

	var $status;
	var $data;
	var $callback;


	public function __construct($status, $data) {
		$this->status = $status;
		$this->data = $data;

		$callback_parameter_value = $this->getCurrentAction()->getRequestParameter(self::CALLBACK_PARAMETER);
		if($callback_parameter_value)
			$this->callback = $callback_parameter_value;
	}

	public function render() {
		$render_text = json_encode(array($this->status => $this->data));

		if($this->callback)
			$render_text = $this->callback . '(' . $render_text . ');';

		$this->setJavascriptHeaders();
		return $this->getCurrentAction()->renderText($render_text);
	}

	//hack to get the current action
	private function getCurrentAction() {
		return sfContext::getInstance()->getActionStack()->getLastEntry()->getActionInstance();
	}

	private function setJavascriptHeaders() {
		sfContext::getInstance()->getResponse()->setParameter('Content-Type', 'application/javascript', 'symfony/response/http/headers');
	}
}

The bits of magic here are the getCurrentAction() function and the render() call. It works on one very simple idea: everything in Symfony can be accessed from the sfContext::getInstance() object, you just need to dig deep enough.

Once you write this boiler-plate code, using it is very elegant. First, subclass it for your API:


<?php

require_once('JSONPAPI.class.php');

class MobshareAPI extends JSONPAPI {


}

And then, use it like so within your controller:


<?php
class userActions extends sfActions
{

	public function executeAuthenticate() {
		$valid_user = UserPeer::authenticate($this->getRequestParameter('alias'),
			$this->getRequestParameter('mobile_no'), $this->getRequestParameter('password'));
		if($valid_user instanceOf User) {
			$success = new MobshareAPI('success', $valid_user->toArray());
			return $success->render();
		} else {
			$error = new MobshareAPI('error', 'Authentication failed: Alias, mobile number or password invalid.');
			return $error->render();
		}
	}

}

Note: the rendering has been delegated to the $success and $error MobshareAPI objects. This allows for a really maintainable API. Adding functionality is much simpler since you don’t have to worry about the boilerplate.

You end up calling the API like this:



http://api.mobshare/user/authenticate?alias=vish&password=xxx&callback=handler

and you get back data which looks like this:


handler({"success":{"alias":"vish","name":"Vishnu Gopal","photo_mini": ...);

Note that callback handling is done entirely by the API and the controller needn’t worry about this parameter at all!

4 comments
February 20, 2008

Mobshare in 25 Days

Mobshare in 25 Days. Cool stuff!

Leave a comment
January 27, 2008

Mouse Wheel Handling in Prototype/Javascript

Here’s how to handle mouse wheel events in prototype, code heavily borrowed from other places on the net, but brought together and made unobtrusive:


/* Mouse Wheel */

Object.extend(Event, {
	wheel:function (event){
		var delta = 0;
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120;
			if (window.opera) delta = -delta;
		} else if (event.detail) { delta = -event.detail/3;	}
		return Math.round(delta); //Safari Round
	}
});

SetupMouseWheel = {
	initialize: function() {
		Event.observe(document, 'dom:loaded', this.setup_mouse_wheel);
	},

	setup_mouse_wheel: function() {
		Event.observe($('element'), "mousewheel", function(e) { SetupMouseWheel.handleDiv(e) }, false);
		Event.observe($('element'), "DOMMouseScroll", function(e) { SetupMouseWheel.handleDiv(e) }, false); // Firefox
	},

	handleDiv: function(e) {
		direction = Event.wheel(e) < 0 ? leftSeek : rightSeek;
		console.log(direction); //handle scroll
		console.log(Event.wheel(e));
		direction(); //call leftSeek or rightSeek depending on direction.
	}
};

The problem with this code though, and the reason I haven’t found a productive use for this yet is that the browser always scrolls the viewport when it extends beyond screen dimensions. So you have your scroll handler and the browser’s scrolling viewport playing hanky-panky, and it’s not a good sight to see. For applications which always stays within the browser window though, this is useful code.

1 comment
January 12, 2008

Simple Javascript Validation

I hunted around for a good Javascript class to use for validation and finally clobbered together this from various sources on the net. This should be extremely useful for anyone doing client-side validation.


Validate = {
	forMinLength: function(whatYouTyped, length_min) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		if (txt.length >= length_min) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	forMaxLength: function(whatYouTyped, length_max) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		if (txt.length < = length_max) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	forLength: function(whatYouTyped, length) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		if (txt.length == length) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	asEmail: function(whatYouTyped) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	asNumber: function(whatYouTyped) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		if (/^\d+$/.test(txt)) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	asEqualTo: function(whatYouTyped, whatYouMatchWith) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		var expect = whatYouMatchWith.value;
		if (txt == expect && txt != "") {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	asNotEqualTovalue: function(whatYouTyped, whatYouMatchWith) {
		var fieldset = whatYouTyped.parentNode;
		var txt = whatYouTyped.value;
		var expect = whatYouMatchWith;
		if (txt != expect) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	},

	withRegex: function(whatYouTyped, regex) {
		var fieldset = whatYouTyped.parentNode;
		txt = whatYouTyped.value;
		if (regex.test(txt)) {
			fieldset.className = "valid";
		} else {
			fieldset.className = "invalid";
		}
	}

};

How do you use it? This is how:

HTML:


<form name="signup" id="signup">
<label for="alias">Alias <sup>*</sup></label>
<fieldset>
<input type="text" name="alias" id="alias" value="" />
</fieldset>
<br />
<label for="mobile_no">Mobile Number <sup>*</sup></label>
<fieldset>
<input type="text" name="mobile_no" id="mobile_no" />
</fieldset>
<br />
[..]
</form>

CSS (different images for fieldset.valid and fieldset.invalid):


fieldset.valid {
	background:transparent url(/images/bg-fieldset-valid.gif) no-repeat 194px 0px;
}

fieldset.invalid {
	background:transparent url(/images/bg-fieldset-invalid.gif) no-repeat 194px 0px;
}

And I hate onclick and onkeyup, so here’s some unobtrusive Javascript to tie it all in:


SignupValidation = {
	initialize: function() {
		Event.observe(document, "dom:loaded", this.setup_validation)
	},

	setup_validation: function() {
		if($('signup_body')) {
			Event.observe($('alias'), 'keyup', function() {
				Validate.withRegex($('alias'), /^[A-Za-z]+[A-Za-z0-9]{4,}$/);
			});
			Event.observe($('mobile_no'), 'keyup', function() {
				Validate.withRegex($('mobile_no'), /^9[0-9]{9,9}$/)
			});
		}
	}
};

SignupValidation.initialize();

That’s it. The idea (for those who can’t bother to grok code) is that a fieldset changes its class from valid to invalid depending on the status of the field, this is then reflected in the styling.

AsktheCSSGuy was of much help.

1 comment
January 12, 2008

Multiple DB connections in Rails/ActiveRecord

You might often want to connect to different databases using ActiveRecord. Here’s how you do it:


#DB definitions:

class DatabaseCurrent < ActiveRecord::Base
  self.abstract_class = true
  establish_connection settings['database']
end

class DatabaseOld < ActiveRecord::Base
  self.abstract_class = true
  establish_connection settings['database2']
end

#Model definitions (current):

class Video < DatabaseCurrent
  belongs_to :user

  set_table_name :videos
end

class Photo < DatabaseCurrent
  belongs_to :user

  set_table_name :photos
end

class User < DatabaseCurrent
  has_many :videos
  has_many :photos

  set_table_name :user
end

class Tag < DatabaseCurrent
  set_table_name :tag
end

#Model definitions (old):

class FileDB < DatabaseOld
  set_table_name :file
end

Pretty easy. The only thing to note is that you should set_table_name, otherwise, AR chokes up. Also, often you want to directly play directly with SQL. Unfortunately, ActiveRecord::Base.execute doesn’t work any longer (coz it doesn’t have a connection), but you can do it this way:


DatabaseCurrent.connection.execute("SQL")

That’s the tutorial for the day!

2 comments
November 29, 2007

VectorMagic

VectorMagic is simply awesome!

Leave a comment
November 14, 2007

Hint for OpenSocial Orkut Designers

A hint for developers on the Orkut Sandbox, download its two CSS files: here and here and use those classes to style your content. It feels much more a part of orkut that way. To figure out what styles to use, firebug the orkut page.

Leave a comment
November 14, 2007

OpenSocial and Facebook

A lot has been said about OpenSocial and Facebook, this is an attempt to say a bit more. As usual, a free-flowing list of observations:

  • Google uses Javascript as its base client-side language and extends gadgets with OpenSocial features. This I consider “good enough” but perhaps more importantly has a much lower barrier to adoption. The way a FB app is delivered (request-mapping, restricted FBML, fine-grained privilege control) feels much more professional, but at the same time a bit intimidating for newbies to the field. Libraries for almost all languages (esp. rfacebook) lower the barrier, but it’s never as simple as a .xml file which is mostly html and javascript (this is what a gadget is).
  • It’s currently not clear how OpenSocial apps communicate between each other across networks and how one app maps a user profile in one network to another. Without this, it’s mostly a single API which works across multiple containers in isolation. A single API that collates multiple containers is much more interesting.
  • Is there any set of UI guidelines? Is a gadget supposed to emulate the look and feel of its container or is it supposed to look the same across networks? Facebook provides extensive CSS classes and Javascript goodies (AJAX friend selector) to keep the experience uniform. I hope OpenSocial addresses this and soon.
Leave a comment
October 21, 2007

Web.py on MacOSX

I’m loving web.py for developing tiny web apps. Here’s how to get it going on a Mac:


sudo port -v install python2.4 py-setuptools mysql5
#coz macports insists on adding a '5' suffix to all mysql5 tools.
sudo ln -s /opt/local/bin/mysql_config5 /opt/local/bin/mysql_config
sudo easy_install web.py cheetah markdown MySQL-python DBUtils

Not the twenty odd steps that’s on the web.py page (that even includes installing and configuring postgresql – bizarre!).

What I love about web.py is that this small bit of code:


#code.py
import web

urls = (
'/', 'index')

class index:
    def GET(self):
        print "Hello, world!"

if __name__ == "__main__": web.run(urls, globals())

… and running python code.py in a terminal gets you a working dev environment. Even camping doesn’t feel this tiny.

Edit: the performance numbers for this simple action are also very impressive:


time httperf --client=0/1 --server=localhost --port=8080 --uri=/ --send-buffer=4096 --recv-buffer=16384 --num-conns=10000 --rate=500
httperf --client=0/1 --server=localhost --port=8080 --uri=/ --rate=500 --send-buffer=4096 --recv-buffer=16384 --num-conns=10000 --num-calls=1
Maximum connect burst length: 17

Total: connections 10000 requests 10000 replies 10000 test-duration 20.000 s

Connection rate: 500.0 conn/s (2.0 ms/conn, <=24 concurrent connections)
Connection time [ms]: min 0.1 avg 1.8 max 2987.4 median 0.5 stddev 42.2
Connection time [ms]: connect 0.7
Connection length [replies/conn]: 1.000

Request rate: 500.0 req/s (2.0 ms/req)
Request size [B]: 60.0

Reply rate [replies/s]: min 499.8 avg 500.0 max 500.0 stddev 0.1 (4 samples)
Reply time [ms]: response 1.0 transfer 0.0
Reply size [B]: header 108.0 content 14.0 footer 2.0 (total 124.0)
Reply status: 1xx=0 2xx=10000 3xx=0 4xx=0 5xx=0

CPU time [s]: user 3.75 system 9.17 (user 18.7% system 45.8% total 64.6%)
Net I/O: 88.9 KB/s (0.7*10^6 bps)

Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0
Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0
httperf --client=0/1 --server=localhost --port=8080 --uri=/ --send-buffer=409  3.75s user 9.17s system 64% cpu 20.028 total

That’s 10K connections and more than 500req/s in a 20 sec timeframe. Really good.

Leave a comment
September 4, 2007

orkut

The new orkut look is frankly amazing. It’s got the Google sense of simplicity finally and looks much less crowded than even Facebook! (if it hasn’t rolled into your account yet, it will).

6 comments
August 11, 2007

DRY CSS

When I first thought of writing this post, my ideas were more about describing a good CSS organization and using reusable stylesheets. There are two tips in this area that I still recommend:

An element can have multiple classes: It’s a pretty simple idea, but isolate out layout styles and presentation styles. Even fonts and coloring. Make reusable classes as much as possible. A design like this rocks, esp. if it includes a small description of the classes used at the top of the .css file. At any point you feel an urge to create a new class, resist the urge and try to recreate the functionality using already existing ones. Break older classes further if you have to.

For e.g.:

.warn {
  color: red;
}

.top {
  position: absolute;
  top: 5px;
}

And this html:

<p class="warn top">You cannot do that, it'll wreck havoc!</p>

… is way better than combining those tasks. Why? Because you can reuse those classes.

Keep your page-specific CSS structured by an ID on the body: Again, a pretty simple idea, the <body> tag can take an ID that can be an indicator of the page name. Use that to create special styles for that page alone.

Example: you want the warning on product pages to appear in blue instead of the usual red, and you want more padding on top:

#product-page .warn {
  color: blue;
}

#product-page .top {
  position: absolute;
  top: 10px;
}

with this HTML:

...
<body id="product-page">
...
<p class="warn top">You cannot do that, it'll wreck havoc!</p>
...
</body>

The advantage is that you don’t hack the CSS or add more styles. It just works.

I have more CSS organization tips, but the above two have worked wonders in 90% of the projects I’ve been involved in. Let’s move on to using tools to write better CSS.

Use a CSS generator: In the Ruby/Rails world where I mostly live nowadays, there’s an excellent plugin called cssdryer. Using this, the CSS above becomes much cleaner:

#product-page {
  .warn {
    color: blue;
  }

  .top {
    position: absolute;
    top: 10px;
  }
}

… which is lovely. Finally, nested tags! And variables, and all the power of ruby! [There's also Sass]

If you are not in ruby land, use a CSS pre-processor. This article uses the m4 macro processor to generate DRY CSS.

Now, here’s one more lovely tip. Use a CSS framework. The most appealing one (altho in beta) is blueprint, since it only does a sweet grid system and good typography. Yahoo’s Grids seem bloated.

4 comments
July 13, 2007

Kenney and Sajith Blogs

So both Sajith and Kenney have started blogging (and have been for a while it seems, it’s just recently that they told me). Go Torque :-)

1 comment
July 8, 2007

Adobe AIR: Calculator

If you’ve installed the AIR SDK (and it’s dead easy, just extract and copy it somewhere), you’ve got a lightweight cross-plaform VM to program apps in. Best of all, it works with HTML and Javascript.

In about an hour, I hitched up a calculator application. It’s very easy:

Calculator.xml:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M4"
	appId="in.vish.Calculator"
	version="1.0">
	<name>Calculator</name>
	<title>Calculator Installer</title>
	<description>Simple Calculator in HTML</description>
	<copyright></copyright>
	<rootContent systemChrome="standard" transparent="false" visible="true">
		Calculator.html
	</rootContent>
</application>

Calculator.html:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Calculator</title>
	<style>
		body, html { margin: 0; padding: 0; }
		body { background-color: black; color: #888; line-height: 1.5em;
			font-family: verdana, arial, sans-serif;
		}
		#wrap { margin: auto; width: 70%; }
		h1 { font-family: Tahoma, Arial, serif; font-size:2em; color: orange; }
		#sum_button { margin-top: 5px; }
	</style>
	<script>
		init = function() {
			runtime.trace("init function called");
		}
		calculate = function() {
			runtime.trace("calculate called!");
			value1 = document.getElementById('val1').value;
			value2 = document.getElementById('val2').value;
			sum_value = parseInt(value1) + parseInt(value2);
			if (isNaN(sum_value)) {
				document.getElementById('result').innerHTML = "You didn't enter valid numbers.";
			} else {
				document.getElementById('result').innerHTML = "The sum is " + sum_value + ".";
			}
		}
		resetForm = function() {
			runtime.trace("resetForm called!");
			document.getElementById('sum').reset();
		}
	</script>
</head>
<body onload="init()">
	<div id="wrap">
		<h1>Calculate a Sum!</h1>
		<form id="sum">
			<label for="val1">Value 1:
				<input type="text" name="val1" id="val1" size="4"/>
			</label>
			<label for="val2">Value 2:
				<input type="text" name="val2" id="val2" size="4"/>
			</label>
			<input type="button" value="Sum!" id="sum_button" onclick="calculate();">
			<input type="button" value="Reset" onclick="resetForm();">
			<p id="result"></p>
		</form>
	</div>
</body>
</html>

And voila, there you have it: a simple calculator:

There’s also a zip file with the code: calculator.zip and the AIR file for installation (to use that you need the AIR runtime)

3 comments
July 5, 2007

New picture

So the old mustache was getting to be a bit long in the tooth, so I have a new stainglass one. To go with it, a tightened sidebar too. What do you guys think?

3 comments
June 18, 2007

Tim Bray

Tim Bray likes/writes a lot of technical stuff but it’s pieces like this that make him more human and infinitely more readable.

1 comment
June 11, 2007

Hyperwriting

One element of good writing for the independent web[1] which is often overlooked is that your writing is part of a larger story which is not under your control. This is to an extent true for all writing which doesn’t stand alone: an article is part of a magazine just as much as a recipe is part of a cookery book. And like all such writing, it’s perceived as part of a larger whole.

What’s special about the online jungle is that you can’t even assume constant assumptions on the part of the reader. For example, NYT articles are democratic, CNN.com has propganda [;-)], and Fark.com is (adult) funny. If you write your articles in one of these media, and if you keep your average reader in mind (you’d do this is you want effective writing, which is what all this is about) then you’d tailor your articles to suit expectations. But in the larger miasma of the web, how do you decide what and how to read expectations? The web is connected, and the spiders that visit your frayed hideyhole might come on from thousands of different places, and there’s no guarantee of any continuity.

One simple answer is that you create your own universe and let your reader be immersed into it. People buy this oh very quickly. The hypothesis is that every page is special, and a click-through from an adult site is as likely to be impressed as one from a search engine.

As an aside, one technique which is underutilized to propogate this mass-hypnosis is clever linking. Hypertext is alive because it can send your user to other pages. Even though Google has perverted the medium with commercialization, people do like to click on links. Use that fact! Lead them on. Make a story within a story (it’s much better than enclosing an aside in parentheses), or even make them read a worthier one. You get to choose.

Getting back, is there a different way? Creating your universe is oh-very-well, but can you match zillions of varied expectations? A good way is to try to reduce it to a few common ones. A lot of sites use a technique where visitors coming in from a search engine get their words highlighted on the site automagically. Let’s say you come here searching for “porn king” (god forbid). To help you out, my site will highlight all instances of that term in your landing page. Is this good for the visitor? Undoubtedly. Does it match your interests, does it tell your story more effectively? Maybe. In this example, very much not, but it’s still a very user-friendly thing to do.

You probably can cook up a different version of a page for a user that comes in from:

  • a social networking site
  • your girlfriend’s site.
  • a mobile browser (device dependent).
  • a competitor’s website, etc.

Condensed, what I’m talking about is that referrals and clever referral management to rewrite your content could pay dividends. True?

[1] Blogs, pages, documentation, stuff which floats.

Leave a comment
February 9, 2007

Safari Web Inspector

Safari Web Inspector
I make my living as a web developer these days and a good “page inspector” tool is an absolute essential. For that reason, I switch to Firefox and the amazing Firebug tool when I write webdev code. I used a recent nightly of Webkit and was pleasantly surprised by its inbuilt Web Inspector. It lists the DOM, the CSS style computation, the box model and some bit of element properties. The interface is amazing, I love the HUD style effect, and it’s much less distracting when the element is shown as the parent in the hierarchy (see the top div in the image above) instead of it being placed in a pageful of tags.

What it still doesn’t do is display any kind of javascript information. The Webkit guys seem to have gone with a separate application called Drosera (which allows people to debug javascript, attach to any Webkit-ish app etc.) and it makes my browser hang badly when attached to it (and hence I couldn’t test and name a verdict).

So my personal feature request list for the Web Inspector would be:

  1. A Javascript console, watch/breakpoint functionality is not a must, but definitely must have a console.
  2. A Request/Response Inspector, especially those of XHR Requests.

If I get these two things I’ll switch to Webkit entirely. As it is, I love it’s Mac-iness, but like Firebug too much to let FF go.

(and yeah, what you see in the pic is the Web Inspector inspecting itself. Apparently, it’s written mostly in HTML and JS. Cool!)

Leave a comment
January 28, 2007

WordPress 2.1

Hey, I just updated to WordPress 2.1. Whatever said & done, WordPress is still the KING of blog usabilty.

Leave a comment
December 24, 2006

Barcamp Delhi Two: Quicker Web Applications

This is absurdly mixing up dates, but I thought I should put up my slides for my talk at Delhi here as well. It’s about caching, and how a simple solution can enable page caching (and its speeds) to be used in a lot of situations. You’ll need the audio of my talk as well. The title is inspired from Do Androids Dream of Electric Sheep?, a brilliant novella by Philip K. Dick. :-)

2 comments
Follow

Get every new post delivered to your Inbox.

Join 4,161 other followers