There is a sickening, maddening, frustrating, irritating trend in the web for the last year or so. People are overusing “lightboxes”.

A lightbox is that effect when the screen goes kind of dark and you can only see one thing centered in the middle. It’s a modern (web 2.0?) form of modal input.

In other words, it stops you from doing what you want, in order to force you to do what the web site wants. And that, my friends, is a fundamentally evil behavior.

This particular behavior is especially overused in internet marketing: you’re trying to read a blog and then suddenly you can’t do anything until you sign up for their email list; you’re trying to read some song lyrics but suddenly your screen is hijacked by an ad for ringtones; you click a link to read an article on a news site, but before you can read it you have to sit through a commercial for Swiffer or some other bullshit.

Well fuck that. I made a browser plugin to shut off those lightboxes. Click for Firefox. Click for Chrome.

Unfortunately, because this is a non-standard behavior, there are limitless ways to create new lightbox popups and my plugin can never stop all of them, but I’m happy just to stop the most used ones, if that means an improved browsing experience for some people.

Meanwhile, if you use my plugin and you see a site with lightbox popus that aren’t blocked, please tweet me or email me or comment here and I’ll happily add support to block it in the future.

The most requested feature of my Add Linked Images To Gallery plugin has been a function to process all past posts.

I’ve finally found the time to add this feature, and published it as version 1.3. I hope this will make everyone happy. Merry Christmas.

I’ve been receiving comments lately from people asking me to update my Crossposterous plugin to use additional features from Posterous, particularly those added by version 2 of their API.

And I would love to do that.

Unfortunately, Posterous has published an incomplete API, and what they call documentation is what I call a joke.

And to add insult to injury, they’ve also removed (or hidden) all the documentation from the V1 API that I am currently using, and seems to work (most of the time).

I’ve worked in startups that were constantly rushing bad code out to production and then fixing it later, and I understand the mentality of deliver-and-iterate. If you’re going to deliver a little now and add to it later, that’s fine. It makes sense. But don’t remove something that’s working just for the sake of adding something that’s not.

And moreover, we’re talking about an API here. This isn’t a UI change that might take a moment for people to get used to later… it’s a change in functionality that requires developers to re-write and re-release software. It’s frustrating and irresponsible.

Impressed with the availability of free 3G wireless on Kindle, I decided to buy one. And within the first few minutes of playing with it, I found myself on the Twitter web site, cringing while I loaded their heavy UI from this device.

So I did the only logical thing I could think of. I created a Kindle-friendly client for Twitter. KindleTwit.

I wrote the whole thing in the last few hours, so I’m sure there are some designn details I should work out. And in time, I will. But the important thing is that it works.

Go try it out!

An interesting thought just occurred to me… It seems quite reasonable to implement the Twitter API as a bug-tracking tool.

A software team could implement a Twitter account for bug tracking, and include the API into their projects within various try-catch blocks around potential points of failure. Then, all the members of that team would just follow that twitter account. For more critical applications, they could turn on device updates. It seems like a more available version of the old developer’s standby of programmatically emailing bug reports.

For sensitive applications, the tweets could be “protected”… but for less critical uses, the visibility of the public timeline would seem to be an added incentive for developers to fix bugs quickly.

It’s an interesting thought.

Today, I was asked by a C# developer if Javascript has any string formatting functions comparable to the String.Format() method in C#.

I thought about it for a few minutes, going over the possibilities of regular expressions in my head, but finally settled on giving him a simple extension to Javascript’s String object.

String.prototype.format = function () {
	var str = this.toString();
	if (arguments.length == 0) return str;
	for (var i=0; i<arguments.length; i++) {
		str = str.replace('{'+i+'}', arguments[i]);
	}
	return str;
}

This simple function gives your Javascript strings the exact same formatting ability they would have in C#.

Test it out for yourself:

var s = 'Hello, {0}, I am {1}, and I am {2} to meet you.';
alert (s.format('foo','bar','baz'));

The secret to user-friendly forms in web apps is to draw attention to errors before submitting the form, and to do so without accosting the user with irritating Javscript popups.

After filling in half a dozen (or more) form fields and then pressing the submit button, the user has mentally moved on. Suddenly hearing a “clunk” sound and getting a popup that says “invalid ssn” is jarring to say they least… but it also means the user must now read through all the form labels looking for something that sounds like “invalid ssn”.

My solution is to flash the form field drawing the user’s attention to exactly what information needs to be fixed. And for that, I have created Blinker.js.

Just include Blinker.js into your page. Then, during validation, when a field is not valid, just call Blinker:

1

Blinker.blink('element-id', 'error-classname');

Blinker uses the supplied CSS classname to do the blinking, so you can use any effect you want: change the text color, change the background, underline, add a border, whatever floats your boat. Just declare the desired style in your CSS and then use that class name in your call, along with the DOM ID of the element to flash.

The scrollTo option allows Blinker to scroll a field into the viewport if it’s not visible. The onDelay and offDelay allow you to customize the rate of blinking, and cycle determines the number of times to flash.

This is the C# version of the script I posted earlier. It’s also available as a VB.net version.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

using System;
using System.Collections;
using System.IO;
using System.Web;
 
public partial class javascript : System.Web.UI.Page
{
	private Stack files;
 
	protected void Page_Load(object sender, EventArgs e)
    {
		files = new Stack();
		Response.ContentType = "application/x-javascript";
		Response.Write(GetFile("js/Contacts.js"));
	}
 
	private string GetFile(string path)
	{
		string result = "";
		string filespec = HttpContext.Current.Request.PhysicalApplicationPath +
						 path.Replace("/", "\\");
 
		filespec = Path.GetFullPath(filespec);
 
		//if the file is already loaded, then exit
		if(files.Contains(filespec))
			return "";
 
		//add this file to the loaded list
		files.Push(filespec);
 
		//load the file
		string s = "";
		bool b = false;
		try {
			StreamReader sr = File.OpenText(filespec);
			do {
				b = true;
				s = sr.ReadLine() + "\n";
				if(s.IndexOf("//LIBRARY:") == 0)
					b = false;
 
				if(s.IndexOf("//REQUIRES:") == 0) {
					b = false;
					s = s.Replace("//REQUIRES:", "").Trim();
					result = result + GetFile(".." + s);
					s = "";
				}
				result = result + s;
			} while (sr.Peek() != -1 && !b);
			result = result + sr.ReadToEnd() + "\n";
			sr.Close();
		} catch {
			result = "\n/* Error loading file: " + filespec + " */\n"
		}
		return result;
    }
}

One thing that tends to seriously limit the “best practices” when it comes to enterprise development and code reuse for Javascript is a lack of INCLUDE or REQUIRE functionality.

Code reuse and portability requires various functionality to be compartmentalized into individual .js files containing only related functionality, but on the web, including several files means making lots of unnecessary roundtrips, which can add up to a huge performance cost in the load time of your pages.

Good compartmentalized code also necessitates some sort of REQUIRE mechanism, which allows one unit of code (ie, script file) to specify when it won’t run properly without another unit of code.

Thus, while working on a VB.Net project, I created this simple Javascript loader, which looks at the name of the directory in which an app resides, and then looks for a javascript file by that name and loads it. Directives can be placed in that Javascript file (and in any subsequent file) requiring the inclusion of additional script files.

Not only does this allow for easier inclusion of libraries as needed, but it also makes it easier to strip out unused code if/when it is no longer needed by an app.

This source code is also available in a C# version.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

Imports System.IO
 
Partial Class javascript
	Inherits System.Web.UI.Page
 
	Private files As Stack
 
	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
		files = New Stack()
		Response.ContentType = "application/x-javascript"
		Response.Write(GetFile("js/Contacts.js"))
	End Sub
 
	Private Function GetFile(ByVal path As String) As String
		Dim result As String = ""
		Dim filespec As String = HttpContext.Current.Request.PhysicalApplicationPath & path.Replace("/", "\")
 
		filespec = IO.Path.GetFullPath(filespec)
 
		'if the file is already loaded, then exit
		If files.Contains(filespec) Then Return ""
 
		'add this file to the loaded list
		files.Push(filespec)
 
		'load the file
		Dim s As String = ""
		Dim b As Boolean = False
		Try
			Dim sr As StreamReader = File.OpenText(filespec)
			Do
				b = True
				s = sr.ReadLine() & vbCrLf
				If s.IndexOf("//LIBRARY:") = 0 Then
					b = False
				End If
				If s.IndexOf("//REQUIRES:") = 0 Then
					b = False
					s = s.Replace("//REQUIRES:", "").Trim()
					result = result & GetFile(".." & s)
					s = ""
				End If
				result = result & s
			Loop While sr.Peek() <> -1 And Not b
			result = result & sr.ReadToEnd() & vbCrLf
			sr.Close()
		Catch ex As Exception
			result = vbCrLf & "/* Error loading file: " & filespec & " */" & vbCrLf
		End Try
 
		Return result
	End Function
 
End Class

This could be easily updated to work for CSS files as well.

While several features of Microsoft’s DOMDocument object are not supported by standards, it’s hard to deny that many of them are quite useful, and probably should be standardized.

When writing AJAX web apps, you need easy access to XML nodes. And more than anything, you need it to be cross-browser capable. To that end, I often include the following script in my AJAX apps.

/**
 * XML functions
 */
if (window.ActiveXObject) {
	/* Functions for IE */
	domLoadXml=function(xml){
		var doc=new ActiveXObject('MSXML2.DOMDocument');
		doc.async=false;
		doc.loadXML(xml);
		return doc;
	}
}else{
	/* Functions for non-IE browsers */
	domLoadXml=function(xml){
		var parser=new DOMParser();
		return parser.parseFromString(xml,'text/xml');
	}
	//fill in the missing convenience methods for Firefox
	Element.prototype.selectSingleNode=function(xpath){
		var xpe=new XPathEvaluator();
		var n=xpe.evaluate(xpath,this,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
		if(n!=null) return n.singleNodeValue;
		else return null;
	}
	Element.prototype.selectNodes=function(xpath){
		var xpe=new XPathEvaluator();
		var xpr=xpe.evaluate(xpath,this,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
		var nodes=new Array();
		if(xpr!=null){
			var el=xpr.iterateNext();
			while(el){
				nodes.push(el);
				el=xpr.iterateNext();
			}
		}
		return nodes;
	}
	if(typeof HTMLElement.prototype.__defineGetter__ != 'undefined'){
		Element.prototype.__defineGetter__('xml', function() {return XMLSerializer().serializeToString(this);} );
		Element.prototype.__defineGetter__('text', function() {return this.textContent;} );
		Element.prototype.__defineSetter__('text', function(s) {this.textContent=s;} );
		//Element.prototype.__defineSetter__('xml', function(s) {} );
	}
}