Blog
March 27th, 2007
Firefox 3.0a3 has just been released, including a number of changes and new features. A list of some of the major new features can be found on the Mozilla site.
However, there are a number of changes and additions that are particularly relevant to JavaScript developers, in particular, that I would like to take the opportunity to highlight.
(This reminds me, if you don't yet subscribe to The Burning Edge, I highly recommend it; it does weekly recaps of the changes that have gone into Firefox, highlighting important features or bug fixes.)
These two properties have long been a part of Internet Explorer and are now making their way into Firefox. This is to complement the clientHeight and clientWidth properties that already exist.
What these properties provide can be best described through a diagram; luckily, the Mozilla Developers Wiki already has some nice ones, so I'm just going to repost them here:
clientLeft
clientTop
While they're not terribly exciting properties to have, it's good to finally have a full set to work with.
This one might seem rather innocuous, at first, but is a huge win in the Cross-Site Scripting (XSS) war. More often, than not, the true reward for performing some form of XSS is snagging valuable session information from a user's cookies. This relies on the fact that client-side JavaScript is able to access all of the cookies set and sent by the server. However, this is no longer the case. An HttpOnly flag, proposed and implemented by Microsoft in Internet Explorer 6, is now available in Firefox 3.0. A server, when setting a new cookie, can include the HttpOnly flag and know that the JavaScript won't have access to it. Of course, this isn't completely effective until all browsers have this property implemented, but it's certainly a step in the right direction.
Example:
Set-Cookie: sessionid=1234567; domain=mozilla.org; HttpOnly
This is an interesting feature that doesn't, yet, have a specification-home (although, some suspect that it'll be adopted by the WHATWG). It provides the ability, for the user, to specify individual resources for special caching, should the browser move into offline mode.
In my personal tests, I was able to get it such that an XML file, specified exclusively as an "Offline Resource", was able to be retrieved, using an XMLHttpRequest, even while being disconnected from the Internet. You can view a demo here (Make sure that you're running, at least Firefox 3.0a3.) The relevant code, from the test page, is as follows:
...
<head>
<link rel="offline-resource" href="test.xml"/>
<title>Offline Resource Test
</title>
<script>
window.onload = function(){
var button = document.getElementById("button");
button.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open( "GET", "test.xml", true );
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
alert( xhr.responseXML
.documentElement.firstChild.textContent );
}
};
xhr.send( null );
};
};
</script>
</head>
...
The important line being:
<link rel="offline-resource" href="test.xml"/>
which allows you to make the browser pre-cache the test.xml file, for later use. This can be done with a number of resource files (CSS, Images, etc.) and is not just limited to pieces of data; which makes it immensely useful. Mark Finkle has some more details
on his blog.
This feature has trickled down to us from the upcoming ECMAScript 4 (JavaScript 2) specification. More information about /y can be found there. In a nutshell: It allows you to start a regular expression leaving off where the last match, of the last expression, ended. In Perl, this is similar to placing a \G at the beginning of your regular expression.
JavaScript: Remove the first instance of 'dog' after the first instance of 'cat'.
var str = "mouse dog mouse cat dog";
str.match(/cat/);
str = str.replace(/ dog/y, "");
>> str == "mouse dog mouse cat"
Perl:
my $str =
"mouse dog mouse cat dog";
$str =~ /cat/;
$str =~
s/\G dog//;
>> str eq
"mouse dog mouse cat"
A minor, but useful and important, feature addition to the built-in Firefox DOM Inspector. This new feature is perfect for performing additional testing on live pages, to see their effect. A quick demonstration of how it works:
There's a new menu option allowing you to insert a node in relation to the selected node:
Once selected, you can then insert an element (with namespace) or a text node:
Giving you a nice new result:
How to try all of this at home!
Mozilla provides full builds of the latest bleeding-edge installs. You can find them linked to the individual Burning Edge blog posts, or at the following URL:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
Tags: webdev, development, javascript, programming, web
12 Comments on 'JavaScript Updates in Firefox 3.0a3'
January 22nd, 2007
This past week I attended Mashup Camp here in Boston - and was frequently asked what tools I used in development. I was quick to mention Firebug (I mean, I was giving a presentation on it, after all) - but I then thought about the other tools that I use in development and decided to expand on my list.
Firebug - I know that this has been said a thousand times, but let this be number 1001 - Firebug is a fantastic web development tool. In addition to all the features that everyone knows about, I've been using it extensively for a number of tasks:
- Optimizing the speed of large JavaScript codebases using the profile tool.
- Finding the source of slow page loads using the Net tool.
- Hunting down weird CSS results by looking at the resulting styles in the CSS tab.
- Giving presentations on JavaScript/jQuery.
I plan on writing about each of those much more. The end result is a Firefox extension that's worth its virtual weight in gold.
Packer - The ultimate JavaScript compression tool. The next best thing to using GZip compression. I use this extensively in jQuery, so I know most of its ins-and-outs. Depending on the file, I frequently get files compressed down to 25-30% of their original size.
Rhino - I love Rhino. It's essentially a collection of Java code that compiles JavaScript into Java. We use this all over the place to build jQuery. It's great because we can take JavaScript code, like Packer, and run it on any server that has Java - all in the background, and all without ever opening a browser. Additionally, we get the benefit of only ever having to code in one programming language for the entire project.
Selenium IDE - This is the newest weapon in my arsenal. It's a Firefox Extension version of the popular Selenium test suite. It is glorious. You hit the record button, click around your web site, hit stop - then play back the results. Save the script and use it again later to do some automated testing. I've used this on a couple sites now - it's great for testing dynamic web applications. (Just add in some sort of a "reset the database" callback to your code, and you can run all the tests on your server, remotely.)
I plan on writing and demoing all of these tools some more within the upcoming weeks - they're immensely useful, and I couldn't live without them.
Tags: mashupcamp, web, development, tools, programming, javascript
7 Comments on 'JavaScript Development Tools'
May 1st, 2006
So, I decided to give my site a quick redesign for the May 1st CSS Reboot. It should be noted that I’m not a web designer, but just a geeky programmer with a thing for standards-based design. I hope you enjoy my entry and my work.
When planning out the redesign of my site, I wanted to emphasize my different interests, without having a typical ‘boring’ blog and/or link list.
To do this, I grouped together all of my blog posts and links, sorted by date, then figured out when I had ‘spurts’ of interest in something. For example, I might be interested in Ruby for a couple days – but then may not revisit it for a couple weeks (which I attempt to emphasize on my site).
I also saw this as a great opportunity to show the power of the Javscript-enhanced Canvas element to draw my main pie chart. So no, that isn’t a gif or flash, it’s Javascript.
I also wanted to really emphasize the projects that I’m working on. I did this by adding a piece of constant navigation (in the right-hand sidebar) which always points to them.
So, I hope you like the new design – I’m fairly pleased with it. Some of the fonts in the blog posts could use some work, but other than that – I think it’s fine.
Happy Rebooting!
Tags: css, design, web, xhtml, html, reboot, cssreboot
5 Comments on 'Reboot!'
July 1st, 2005
I had a chance to play with a fun new social application today called Dinnerbuzz. The premise is simple: It's a social network for people to find new places to eat - and to mark off the ones that they've already visited. I signed up and started testing it out. There's only a handful of users from around the country on the site, and none from my city, Rochester, NY. So, coupled with the efforts of my girlfriend Julia we set about entering a number of new places into the database.
Adding a new restaurant to the database isn't 'that bad'. There's a simple form, you provide the name of the restaurant, it's relative location (you can even be vague, which is nice), tags, and a description. All of this is powered by the Yahoo Local API, making sure that all restaurants entered are correctly identified and labeled. If a restaurant is not in the API is has to be approved by an admin, which seems kind of silly for a user-submitted web site.
Now, it's time for some complaints: The tags are certainly interesting, in this context, but I'm not really sure if they work for restaurants. Some tags are immediate 'chinese', 'italian', 'pizza', etc. But how should you tag price ranges, food quality, or experience - it becomes incredibly confusing from person-to-person and daunting to manage within a single account. Should you say 'expensive' or '$20' - if you say 'nice' are you referring to the food or the service? I've found myself using the tag 'moderate' - but does it mean moderate price or moderate quality? Who knows! This may be one application to which tagging, of this kind, is not ideally suited.
I should warn you, however, that there are still a couple bugs in the system, and the GUI isn't completely flushed out yet. For example, there's no way to delete an entry once you've submitted it. (Update: This feature has since been added. Thanks Justin!) I went through and provided ratings for every restaurant that I had been to, including national chain franchises. In retrospect, I'd like to delete the national chain entries, as they're so commonplace that another review seems redundant. I'm going to try and limit myself to local restaurants and local chains. Also, whenever tags are listed, they're listed as 'Recent Tags', which is rather useless (In my opinion) and should be a delicious-like 'Popular Tags'.
Additionally, there doesn't seem to be any sort of 'friends' or 'contacts' feature - I would definitely like to be able to see where my friends are eating and what they think of those places - the results of which I would use in the future.
I think there's a lot of potential for this service, there's RSS everywhere which is nice because I've been looking for some way to pull my latest dining experiences into a feed - and this may be it. Considering that the service is still in its, relative, infancy I'm looking forward to seeing other users join and provide their input. It would be very cool to see other services tied in too, such as Flickr, Upcoming.org, and 43Places. So, on that note - here's my profile, now go and contribute!
Tags: food, restaurants, dining, social, network, web, app, local, yahoo, dinnerbuzz
5 Comments on 'Dinnerbuzz Review'
June 23rd, 2005
43 Places is a new service from The Robot Co-Op (the makers of 43 Things). I received an inital invitation from Josh around the beginning of June and I immediately began playing with it. My first instinct was to blog about this new service, however they mentioned in their invitation, expressly, not to:
At this point, we'd appreciate if you'd help us keep our project "secret". We want to finish off some of the last bugs and get a bit more feedback about the site before we are ready to talk about it to the whole world.
I found this phrase to be really interesting, it's essentially saying "You're in a private alpha and we don't want you leaking our secrets - but we're not going to make you sign an NDA, because we're not lame like that." I think that this is something that other web application developers can learn from. The software (at that time) was still rather buggy, but as the days progressed, bugs dissapeared and new features sprang up in their place.
The basic premise for this site (which will come as no surprise to users of 43 Things) is that you can take a location and mark it as being Visited, or that you Want to Visit It. In addition to this, you can blog about your travels, tag locations, find other people how've visited similar places, coordinate travel plans, encourage people to visit places, and even provide travel recommendations. Just about everything mentioned was also a feature (albeit, renamed) in 43 Things, so it was a pretty smooth transition. So, if you're curious as to what this service 'feels like' and have never used 43 Things, I recommend that you do so now - that's about as close as you're going to get, until they open the beta more.
Now, in 43 Things, if you wanted to find a goal to complete, you'd have to search for it -
this goes the same for 43 Places and locations. Now, because you're going to be using the search feature of the site so frequently, it's essential that it performs well - and it does. The 'search' is broken down into two different aspects.
The first method of search, and the one everyone will notice once visiting the site, is a representation of the earth, done in Flash. You can click this little widget to navigate into the map, gaining more detail (such as States, Provinces, etc.). Once you click a State/Province/Country you are taking to the corresponding page - where you are presented with a number of Flickr pictures and any blog posts that people have made. From here you can mark this place as having been visited, or that you want to visit it.
The second method of search is through the physical search text field at the top of the page - and it's surprisingly good. Typing in 'Rochester', for example, brings up two locations:
1. United States > New York > Rochester
2. United Kingdom > England > Kent > Rochester upon Medway
and typing 'New' brings up quite a few more:
1. Australia/Oceania > New Zealand
2. United States > New York > New York
3. United States > New York/ NY
...
16. United States > Connecticut > New Haven
This particular search has many more results, but if you look at results 2 and 3, it definitely becomes confusing. My interpretation is that 2 represents New York City and 3 represents New York, the state. However, for number 3, the use of New York/NY doesn't help to ease the confusion.
One of the aspects that worried/confused me at first (and still does, a little bit) is the fact that someone can say (for example) "I've been to Italy", where someone else says "I've been to Rome" or even "I've been to the Vatican". Now, at first this bothered me because a person who has been to Rome has also been to Italy, albeit not all of Italy (so that distinction can be made). But then I got to using it more, and saw what other people were doing - they were adding specific tourist attractions, mueseums, restaurants, venues, etc. I am really intrigued by this use of the service.
Now, I'll be honest, I simply don't care for travelling as much as some people - which discouraged me from using 43 Places, at first. BUT one thing that I do enjoy is eating at really nice restaurants. A lot. So, one thing that I've started to do is mark down all the restaurants that I've been to - and possibly even write a mini-review using their blogging system. Their service is almost completely capable of running a food column web site (And with a good API, which I assume will be trivial to port over from 43 Things, this could happen with very little effort). The one downfall is that you can specify a specific location, but there's no area to enter an address or GPS coordinates - which could be rather important.
Additionally, something that the Robot Co-Op should consider is tying together the Venues from Upcoming.org such that you can mark them as having been visited (that could provide the users with some non-political locations for them to visit). Upcoming events are already listed in the Metros (which is a smart move, and borrowed from 43 Things).
This service is very sharp and has improved nicely over the course of the past month. I'm looking forward to its full release and seeing people really start to take over. I'll be sure to let everyone know when I get some invites, which should be soon. In the meantime, feel free to look at some of the screenshots that I've taken.
Tags: 43places, 43things, robotcoop, web, ajax, travel, review
23 Comments on '43 Places Review'
March 8th, 2005
I was reading an article yesterday discussing the problem of when people die (in real life) their virtual data is left to live (potentially forever) in the system. Now, according to a Metafilter post, a number of potential solutions have cropped up and seemingly died (no pun intended) off. Most of these applications are set up to send out an email to all of your friends or relatives after a period of time of no contact (usually by email). However, when thinking about it, I say that they don't go far enough.
Take into consideration the possibility of a data access API both for communication and for retreival. Let's break it down into those two steps:
- Communication: A vital aspect to this application is determining if someone is, in fact, still alive. So, the first part of the application would ask the user how long it should wait before it begins making preparations for the user having passed away. (One week, one month, one year?) After a specified time frame has been chosen, the user sets up a variety of contact options (and sample settings), for example: Instant Messenger - If I'm online, or message you, then I'm not dead, Email - If I email you, then I'm not dead, Phone - If I call you, or text message you, then I'm not dead, CVS - If I make a CVS commit... a message board post, usenet post, weblog update, journal update, etc. The potential for determining if someone is still 'active' is very feasible and even easily integratable with existing communication mediums. This whole extendable communication API would have to be the first step to making this work.
- Retreival: - These are the tasks that the user wants us to commit after they have died. I'd imagine that a user would want to perform different operations on different types of data (delete private data, save public data, send letters). Again, the importance of some sort of extendable API becomes apparent, example: Delete a file/folder from my server, Send a file/folder to my friend(s)/family, Upload some text to my web site, post a message to my favorite message board, etc. Being able to access data on a variety of mediums would be essential (ssh, vpn, ftp, smb), which would hopefully be transparent.
It's kind of hard to gauge a market for this sort of application, as there hasn't been any prior, successful, implementations. Although, that in itself could be the note that it simply wouldn't work in the current state of the Internet. I'd imagine that within the next 40 years, when the Internet generation begins to get old and thinking of the end times, that an application of this nature will be become much more popular and its usage much more widespread. Again, it's very hard to say right now, but I personally hope that something like this will exist as I really don't want those that I've met and communicated with to have to try and tie up my loose ends.
Tags: api, applications, death, internet, web
9 Comments on 'A Solution to Death on the Internet'
