MaisonBisson.com » javascript

JSNES: JavaScript Nintendo Emulator

Casey — Sun, 20 Sep 2009 16:21:51 +0000

Ben Fisherman’s JSNES runs entirely in the browser using nothing more intrusive than JavaScript. It apparently manages real-time performance within Chrome, but it works (if not playably) on an iPhone.

I wish the screen was resizable and that it supported iPhone compatible controls, but both of those assume that browser performance will improve enough to make it playable. Interestingly, though not surprisingly, the Safari JS engine is limited to consuming a single CPU (which it quickly does while playing JSNES).

WordPress 2.8 Script Handling

Casey — Sun, 31 May 2009 15:16:36 +0000

jQuery 1.3.2 is in WordPress 2.8, but the most exciting changes are in the automatic concatenation and compression of scripts via the script loader.

Andrew Ozz says “This feature can easily be extended to include scripts added by plugins and to use server side caching, however that would require some changes to the server settings (.htaccess on Apache).”

I have yet to figure out how to extend that feature to scripts in my plugins, but I’m working on it.

CSSHttpRequest: cross domain JavaScript solution

Casey — Mon, 27 Oct 2008 19:58:26 +0000

Who’d a thunk it: CSSHttpRequest is a way of doing cross-domain AJAX by using CSS’ @import method to fetch the data.

Browser-Based JSON Editors

Casey — Wed, 10 Sep 2008 11:49:22 +0000

JSONLint, a JSON validator, was the tool I needed a while ago to be able to play with JSON as format for exchanging data in some APIs I was working on a while ago. And now I like JSON well enough that I’m thinking of using it as an internal data format in one of my applications, especially because it’s relatively easy to work with in JavaScript. Or, at least that’s the promise.

What I’ll need is an easy way to manipulate the contents of a simple array, and these JSON editors may give me a start.

The Braincast JSON editor was the first I found, but it doesn’t allow creation/expansion of the JSON. Katamari’s JSON editor seems to work and has a lot of features and a post 2005-looking interface, but that doesn’t make it simple. Worse, I don’t think it’s available for me to re-use, modify, or extend in my projects. Thomas Frank’s JSON editor, on the other hand, does have the features I need and a GPL license. That’s the place to start.

Extra: a JSON diff.

Steve Souders On Website Performance

Casey Bisson — Sat, 16 Aug 2008 17:23:56 +0000

Steve Souders: 10% of the problem is server performance, 90% of problem is browser activity after the main html is downloaded. He wrote the book and developed YSlow, so he should know.

JavaScripts are downloaded serially and block other activity. Most JavaScript functions aren’t used at OnLoad. We could split the JS and only load essential functions up front, and load all the rest later. How much might that help? He says 25% to 50%. This quickly gets complex, but he’s got a simple plan that considers three questions:

Is the script URL on the same host as the main HTML?
Should the browser indicate it’s busy, or not?
Does script execution order mater?

And at that point things started to get too interesting to take publishable notes. I clearly need to pay more attention to this guy.

Stats he mentioned without being specific about the source:

Google: 200ms longer download time cut revenue by 20%
Yahoo: 100ms of latency costs … big.

Detecting Broken Images in JavaScript

Casey Bisson — Mon, 16 Jun 2008 14:45:49 +0000

We’ve become accustomed to link rot and broken images in nearly all corners of the web, but is there a way to keep things a bit cleaner?

K.T. Lam of Hong Kong University of Science and Technology came up with this sweet trick using jQuery and readyState to find and replace broken images:

jQuery('span#gbs_'+info.bib_key).parents('ul').find('img.bookjacket[@readyState*="uninitialized"]').replaceWith('+info.thumbnail_url+'" alt="'+strTitle+'" height="140" width="88" />');

And it works really well, but only in IE. Testing for img.complete or img.naturalWidth might be possibilities, but I’m much more interested in the onerror property of the img tag:

<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>

Or in JS:

var imgsrc = 'picture1.gif';
var img = new Image();
 
img.onerror = function (evt){
	alert(this.src + " can't be loaded.");
}
img.onload = function (evt){
	alert(this.src + " is loaded.");
}
 
img.src = imgsrc;

Or call a JS function when the browser detects a broken image:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function ImgError(source){
	source.src = "/images/noimage.gif";
	source.onerror = "";
	return true;
}
script>
head>
 
<body>
<div><img src="http://jquery.com/images/bibeault_cover150A.jpg"
border="1" height="100" alt="image" onerror="ImgError(this)" />div>
body>
html>

I haven’t tested any of this code, but it’s just a matter of time.

Sweet jQuery

Casey Bisson — Tue, 16 Jan 2007 17:00:30 +0000

Matty discovered jQuery at The Ajax Experience, and his enthusiasm has rubbed off on me.

jQuery makes coding JavaScript fun again. Well, at least it makes it possible to write code and content separately. And that means that sweet AJAXy pages can be made more easily, and it sort of forces designers to make them accessible from the start.

Resources:

ajax, javascript, jquery, matt batchelder

Ryan Eby’s Pursuit of Live-Search

Casey Bisson — Sun, 18 Dec 2005 23:34:55 +0000

Ryan Eby gets excited over LiveSearch. And who can blame him? I mention the preceding because it explains the following: two links leading to some good examples of livesearch in the wild.

Inquisitor is a livesearch plugin for OS X’s Safari web browser. It gives the top few hits, spelling suggestions where appropriate, and links to jump to other search engines.

Garrett Murray’s ManiacalRage is an interesting blog on its own, but he’s also doing some good AJAX on his search interfaces. Look first at the archive search. But also take some time to appreciate the new content search. Sure, you’ll have some complaints, but it’s his site and not yours and there are some ideas there that are pretty interesting and useful.

live, search, live search, livesearch, ajax, ahah, javascript, web, web applications, library, libraries

50+ Ways Good HTML Can Go Bad

Casey Bisson — Tue, 01 Nov 2005 13:00:02 +0000

Via Brad Neuberg: RSnake’s XSS (Cross Site Scripting) Cheatsheet: Esp: for filter evasion.

Limitations on cross site scripting (XSS hereafter) have been troubling me as I try to write enhancements to our library catalog, but the reasons for the prohibition are sound. Without them I could snort your browser cookies (RSnake lists: “cookie/credential stealing/replay/session riding” among the threats, but a well-planned attack could also fetch resources from internal webservers and deliver them to external data thieves).
It turns out you can insert JavaScript in tags (among many, many others) and obfuscate it with Unicode, hex, and other less-readable encodings or by inserting tab characters (“	”) or newlines (“
”). It would be impossible for me to list every possible attack vector, but RSnake takes a good stab at it.

If you allow users to insert HTML in comments, you should be aware of this….

tags: browser threats, cheatsheet, cross site javascript, cross site scripting, filter evasion, internet threats, javascript, scripting, threat, threats, web, web browser, xss

Plan C: Signed JavaScripts

Casey Bisson — Tue, 20 Sep 2005 16:17:09 +0000

The Mozilla docs on JavaScript security give a hint of hope that signed scripts will work around the cross-domain script exclusions that all good browsers enforce. But an item at DevArticles.com throws water on the idea:

Signed scripts are primarily useful in an intranet environment; they’re not so useful on the Web in general. To see why this is, consider that even though you can authenticate the origin of a signed script on the Web, there’s still no reason to trust the creator. If you encounter a script signed by your company’s IT department, you can probably trust it without much risk. However, you’d have no reason to think that a party you don’t know—for example, a random company on the Web—is at all trustworthy. So they signed their JavaScript—that doesn’t mean it doesn’t try to do something malicious! And if it did, most users would have no way of knowing.

In short, most browsers will pop up a scary looking security window asking the user what he or she want to do, and the chances of the user hitting the button marked “no, I don’t dare allow cross-domain XMLHTTPRequest calls” are at least 50-50. And, even if they weren’t, who would tolerate that message appearing regularly?

tags: cross domain, cross domain script exclusion, cross domain scripting, internet security, intranet environment, javascript, javascript security, mozilla, security, security components, signed script, signed scripts, web scripting, web security, xdomain, xmlhttprequest

Plan B: Remote Scripting With IFRAMEs

Casey Bisson — Mon, 19 Sep 2005 16:13:46 +0000

I have plans to apply AJAX to our library catalog but I’m running into a problem where I can’t do XMLHttpRequest events to servers other than the one I loaded the main webpage from. Mozilla calls it the “same origin policy,” everyone else calls it a cross-domain script exclusion, or something like that.

Some Mozilla folks are working on a standard to address the problem, but it could be quite a while before browser support is common enough to build for it.

So Plan A was to use simple AJAX with XMLHTTPRequest. Plan B comes from this crazy suggestion at Apple’s developer site: Remote Scripting with IFRAME. It looks like different functions are subject to different restrictions, so the theory is that a JavaSctript loaded in a page in a hidden IFRAME can call functions from the parent page and do pretty much everything we’ve come to expect of XMLHTTPRequest. Here’s an example they offer.

Crazy as it is it works, and it gets around some cross-domain script exclusions for some browsers, but it still gets trapped by Mozilla.

tags: ajax, apple, browser security, browsers, cross domain, cross domain script exclusion, frustration, iframe, javascript, mozilla, remote scripting, web application, web applications, xdomain, xmlhttprequest

Simple Bookmarklet Demo

Casey Bisson — Wed, 07 Sep 2005 19:28:21 +0000

Bookmarklets are interesting little bits of JavaScript stored as bookmarks. They’ve been around since about 1998 (earlier?), but I’ve never bothered to write one.

Here are a few examples:

tags: bookmark, bookmarklet, browser, javascript, web, web browser

Sweet Cheat Sheets

Casey Bisson — Tue, 02 Aug 2005 16:25:24 +0000

Colin over at Command-Tab alerted me to some great cheat sheets, including this one for JavaScript at ILoveJackDaniels.com.

tags: cheat sheet, cheat sheets, javascript, programming, web, web development