ajaxian
Internet Explorer 8 Beta 2 and Web Standards
Internet Explorer 8 Beta 2 was released today. There are several cool UI enhancements that this beta brings to the table that I won't cover in this post, but you can learn more about them on the IEBlog. Instead, I want to talk about how beta 2 affects IE's relationship to web standards.
First, CSS Expressions are no longer supported in Standards Mode:
Also known as 'Dynamic Properties', CSS expressions are a proprietary extension to CSS with a high performance cost. As of Internet Explorer 8 Beta 2, CSS expressions are not supported in IE8 standards mode. They are still supported in IE7 Strict mode and Quirks mode for backward compatibility.
In case you don't know, CSS expressions were actual bits of JavaScript that you could run from CSS rules; this was commonly used to simulate the CSS max-width property for IE:
CSS:
-
-
div.someClass {
-
/* Internet Explorer */
-
width: expression(document.body.clientWidth> 600) ? "600px" : "auto";
-
/* Standards-compliant browsers */
-
max-width: 600px;
-
}
-
IE 8 beta 2 also now supports alternate style sheets:
Internet Explorer 8 now supports alternative style sheets as specified by HTML4 and CSS2.1. The alternative styles that are defined by the Web page author is available through the Style menu under the Page menu. The styles are also available through the Style menu under the View menu. The No Style option on either menu can be used to disable all authors styling.
In terms of the Known Issues with IE 8 Beta 2, the first is related to Ajax bookmarking and back button support and using window.location.hash to do cross-domain communication:
Internet Explorer 8 create entries in the travel log and back button for each instance of window.location.hash that is set. This is part of the behavior for Internet Explorer 8 AJAX Navigation. If you use this technique to communicate between documents, we recommend that you switch to the Internet Explorer 8 Cross Document Messaging feature that is based on Section 6.4 of the HTML 5.0 specification.
Finally, there are some issues with the onload event for IE's XDomainRequest object that helps with cross-domain communication:
The onload event may not fire reliably. We recommend you use the onprogress events which continues to fire as the data is received.
Unfortunately this is it for this release. You can see the full Beta 2 release notes, or download it yourself.
On a related note, IE 8 Beta 2 includes cross-site scripting attack (XSS) protection:
The XSS Filter operates as an IE8 component with visibility into all requests / responses flowing through the browser. When the filter discovers likely XSS in a cross-site request, it identifies and neuters the attack if it is replayed in the server's response. Users are not presented with questions they are unable to answer " IE simply blocks the malicious script from executing.
Finally, PPK has also published a post on IE 8 Beta 2 and its changes.
by Brad Neuberg at August 27, 2008 10:59 PM
QuirksMode
IE8b2 released
IE8 beta 2 has been released. Go get it; let's see what works and what doesn't. See also the release notes. I'm currently downloading it; more news when I have it. Update: CSS compatibility table updated. I'm especially enthousiastic about...
August 27, 2008 08:03 PM
Microsoft - IEBlog
Internet Explorer 8 Beta 2 Now Available
We're excited to release IE8 Beta 2 today for public download. You can find it at http://www.microsoft.com/ie8. Please try it out!
You'll find versions for 32- and 64-bit editions of Windows Vista, Windows XP, Windows Server 2003, and Windows Server 2008. In addition to English, IE8 Beta 2 is available in Japanese, Chinese (Simplified), and German. Additional languages will be available soon.
While Beta 1 was for developers, we think that anyone who browses or works on the web will enjoy IE8 Beta 2. Before the team blogs about our Beta 2 in detail, here's an overview of what you'll find in IE8.
We focused our work around three themes: everyday browsing (the things that real people do all the time), safety (the term most people use for what we've called "trustworthy' in previous posts), and the platform (the focus of Beta 1, how developers around the world will build the next billion web pages and the next waves of great services).
Everyday Browsing
We looked very hard at how people really browse the web. We looked at a lot of data about how people browse and tried a lot of different designs in front of many kinds of people, not just technologists. As tempting as it is to list here all the changes both big and small in IE8, we'll take a more holistic approach. That's how we built the product and how we'd like to talk about it.
From our customer research, we saw that the bulk of user activity outside of web pages involved tabs and "navigation" " the act of getting to the site the user wants to get to. We also knew that adding features has an impact only if they're "in the flow" of how people actually use the product. Another menu item might matter in a checklist on a blog somewhere, but won't matter to real people browsing. That's why IE8's New Tab experience is so remarkable: it's obvious " after you see it:

IE8 makes bringing back tabs (and entire IE sessions) users have closed a lot easier; it's in the natural flow of how users work. IE8 also takes into account that there are often relationships between new tabs that users open, and the browser can make it a lot easier to figure out which tabs go with which. Below, the tabs that came from the links in the search results page are grouped together and colored differently from the headlines the user followed off another page, which are different from links the user followed off other pages:

Navigation " or getting to where you want to " is a lot faster and easier too. Typing in the Smart Address Bar not only searches across Favorites, History, and RSS feeds, but provides a great experience:

We put a lot of different designs in front of users in order to find one that was this effective. It's easy to scan, with the different sections marked off and one line for each item, and the highlighting is easy on the eye. Deleting typos (or other unwanted suggestions) from this list is also easy " notice the red "x" above appears when a user places his mouse over an item.
Beyond tabs and navigation, people use services all the time. When you have an address but want a map, or want to just select some text and make a blog post out of it, IE8's Accelerators (formerly known as "Activities') are handy. For Beta 2, we've worked with a lot of great partners to deliver a bunch of choices for users. They're much faster and easier than the "select, copy, new tab, navigate, paste, repeat" process in today's other browsers. We think users will enjoy the consistent experience they'll get from service to service, and appreciate being in complete control of which are installed and are the default. We hope that websites (and enthusiasts!) write more of them and give us feedback. Staying up to date with the latest information is a lot easier with Web Slices, that put information directly in your Favorites bar where you can get at it quickly.
This is a good moment to talk about performance. We think about two kinds of performance: real world and lab. In a lab, we measure performance in milliseconds. That's important work, and we did a lot of it since Beta 1. You'll find IE8 is a lot faster than IE7 on many sites. We can go through and detail, for example, exactly which Gmail operations are faster in IE8 than other browsers and vice versa.
Real world performance is about how people get their tasks done, and that's something you don't measure in milliseconds. We think you'll enjoy the impact of IE8's new tabs, Smart Address Bar, Favorites bar, Search box, Accelerators, and Web Slices on your daily browsing.
Visual Search in IE8 speaks for itself. Websites can offer rich search results as you type in the Search box:


After installing IE8, try out Visual Search from the New York Times, Wikipedia, Amazon, or eBay. (Many other sites offer regular text suggestions as well.)
Safety
Safety isn't about technologies and features, but two words: in control. We think users should be in control" of their settings, their information, what code runs on their machine, of their browser overall.
Previous posts have described what you'll find in IE8 Beta 2 with respect to the SmartScreen Filter and protection from phishing and malware as well as many other defenses. The XSS Filter is particularly exciting because it offers real people a real defense from a real threat, by default and out of the box. We've blogged about InPrivate previously as well. Taken together, these features do a great job putting the user in control of their information.
The reliability improvements in IE8 Beta 2 are big. Crash recovery is nice, but not crashing is even better. Because in IE8 Loosely-Coupled IE (LCIE) separates the frame (the address bar, back button, etc.) from the tabs, and the tabs (mostly) from each other, crashes are more contained and affect fewer tabs than before. We think users will also appreciate having close boxes on all their toolbars so that disabling ones they don't want " while leaving the ones they do " is easier.
Platform
IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user's daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.
After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we've been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have " but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.
Some Important Details
Anyone interested in customizing and redistributing IE8 (the way others have IE7) can find information about the IEAK here. (We'll have a more detailed post about IEAK and group policy soon.) One important aspect of a beta release is getting feedback; we're using the same channels as described in this Beta 1 post (for example, this IE Beta newsgroup).
Read more about guidelines for upgrading to IE8 Beta 2 today. Also, If you are currently using IE8 Beta 1 on Windows XP or Windows Server 2003 with Automatic Updates turned on, you will receive IE8 Beta 2 through Windows Update.
Download IE8 Beta 2, use it " the browser itself, the developer tools, writing an Accelerator, marking part of your page as a Web Slice " and let us know what you think.
Thank you,
Dean Hachamovitch
General Manager
by ieblog at August 27, 2008 07:13 PM
Introducing Compatibility View
At the start of the Internet Explorer 8 project we made a commitment to great website compatibility. It's worth noting that this commitment hasn't changed, even given the short-term impact of our announcement to better align with Microsoft's interoperability principles. In other words, compatibility has been and continues to be a very important part of the Internet Explorer 8 feature set.
With Beta 2 we're announcing a brand new feature known as Compatibility View. In a nutshell, Compatibility View allows content designed for older web browsers to still work well in Internet Explorer 8.
Compatibility View and End Users
When a web site says that it supports modern web standards, Internet Explorer 8 respects that and displays the site using its most standards compliant mechanism. In the majority of cases, this works out just fine. However, every once in a while, a page that says "display me using modern standards" really means "display me like Internet Explorer 7 used to display modern standards pages". This is where Compatibility View comes in.
There are a bunch of changes under the hood, but the main points to know are "
- Sites on the public internet still display in IE8 Standards Mode by default.
- Switching in and out of Compatibility View (between IE7 and IE8 modes) happens on the fly without a browser restart.
- Compatibility View is domain specific.
A new UI button located in the navigation bar just to the right of the address bar (next to the refresh button) controls the Compatibility View feature and replaces the Emulate IE7 button from Beta 1.

IE only displays this button when toggling into Compatibility View makes sense, such as when viewing Standards mode pages. In all other cases, such as when viewing Quirks mode pages or viewing intranet sites (they're already being displayed in Compatibility View as discussed later in this post), IE hides the button.
Depending on the speed of your machine, you may see the page refresh when the Compatibility View button is selected. In any case, a balloon tip lets you know that the site is now running in Compatibility View. Additionally, the Compatibility View icon shows a "pressed" state so that you can know what view you're running in after the balloon tip disappears.

The "scope" of emulation is limited to the domain you are viewing when you press the button, not some other mechanism like the life of the process or the tab. And, Internet Explorer remembers your preference by storing the domain in a client-side list so that the next time you visit the site you don't have to press the button again.
Compatibility View and the Enterprise
A large number of line-of-business websites are Internet Explorer 7 capable today. In order to preserve compatibility, Internet Explorer 8 ships with smart defaults based on zone evaluation. In the default state, all sites on the public internet display in Internet Explorer 8 Standards mode (Compatibility View off) and all intranet websites display in Internet Explorer 7 Standards mode (Compatibility View on).
Let's look at some examples.
If you navigate to sites on the Internet like www.msn.com and www.live.com, Compatibility View is off by default. Internet Explorer 8 identifies itself with a User Agent string of "8', Version Vector of "8' and displays webpages that trigger standards mode in Internet Explorer 8 Standards mode. The same is also true if you navigate by IP address, such as http://192.168.0.1. As Internet Explorer can't tell offhand whether the IP address is internal or external, it assumes the latter. Use Compatibility View to fix problems with websites in this category just like you used to use the Emulate IE7 button.
If you navigate to sites on your local intranet like http://myPortal and http://sharepoint/sites/mySite, Internet Explorer 8 identifies itself with a User Agent string of "7', Version Vector of "7', and displays webpages that trigger standards mode in Internet Explorer 7 Standards mode. This combination allows webpages that worked correctly in Internet Explorer 7 to continue to do so in IE8.
Just for completeness, it's also worth noting that local pages such as "C:\Temp\MyWebPage.htm' display in Internet Explorer 8 mode (Compatibility View off) by default.
A new entry in the "Tools' menu allows for advanced configuration of the feature.


You can configure all intranet sites to display in Internet Explorer 8 mode. You can also configure policy such that every site is viewed in Internet Explorer 7 Compatibility View (identical to the behavior from Internet Explorer 8 Beta 1 when the Emulate IE7 button was pressed). Lastly, you can pre-populate a list of sites that should always be viewed in Compatibility View and / or edit the current entries that are populated via Compatibility View button press. This is especially handy if you encounter a Quirks mode site that is blocking Internet Explorer 8 due to incorrect User Agent String detection " you can add the site in question to the compatibility list and be on your way.
The entire feature is Group Policy enabled, giving you the most granular level control over the various knobs and switches. Most settings can also be configured using the IEAK.
Compatibility View and Web Developers
If you develop pages according to modern web standards and use the DOCTYPE directive to indicate layout mode, Internet Explorer behaves just as you would expect " Quirks DOCTYPEs map to Quirks mode and Standards DOCTYPEs map to IE8 Standards mode. And, just as in Beta 1, you can opt-out of IE8 Standards mode via <META> tag / HTTP header.
The best way to ensure users have a great experience with your website, and thus don't have to use the Compatibility View feature at all, is to test your site using Internet Explorer 8 and update it as necessary. In the event that a user selects Compatibility View for your site, you can "bring them back" to your desired layout mode via use of the version targeting <META> tag / HTTP header. A new content value, "IE=EmulateIE8', rounds out the list of supported values and assists in this particular scenario.
|
Content Value |
Details |
|
IE=EmulateIE8 |
Display Standards DOCTYPEs in IE8 Standards mode; Display Quirks DOCTYPEs in Quirks mode. Use this tag to override compatibility view on client machines and force Standards to IE8 Standards. |
The presence of the <META> tag / header serves as an indication that the site has been updated to support IE8 and its value "wins" over whatever mode Compatibility View on the client would have resulted in. The presence of the tag / header also has some other side effects. For one, it triggers clean-up of the user list entry, ensuring that long-term the client's user list gets pruned and you don't have to keep the <META> tag / header in place forever. (BTW, the user list also gets pruned when you choose to delete browser history). For another, presence of the tag / header causes the top-level command bar icon for Compatibility View to not be displayed, effectively preventing most users from adding your site to the Compatibility View list.
A new tag in the User Agent string allows for detection of clients viewing your site in Compatibility View. This tag is also present in the "normal" Internet Explorer 8 User Agent string.
- Compatibility View:
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; Media Center PC 5.0; .NET CLR 3.5.21022)
- Updated IE8 UA String:
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; Media Center PC 5.0; .NET CLR 3.5.21022)
Finally, an update to the Developer Toolbar completes the feature set. The new "Browser Mode' menu lets you modify how Internet Explorer behaves as well as how it reports its version to servers and websites. This lets you use Internet Explorer 8 to see what your site looks like in IE8 (the default), what your site looks like in IE7, and what your site looks like for users in IE8 who are running in Compatibility View.

The "Document Mode' menu continues to exist independently of "Browser Mode' to let you see what your site would look like if you changed the layout mode by using a different DOCTYPE or the <META> tag.
Summary
We hope you find the new Compatibility View feature a noticeable improvement over the Emulate IE7 button experience.
If you encounter problems with a specific website that Compatibility View doesn't resolve, we'd like to know about it. The Report a Webpage Problem tool will help you submit a report.
Scott Dickens
Lead Program Manager
edit: updated ALT text for images
by ieblog at August 27, 2008 07:11 PM
Upgrading to Internet Explorer 8 Beta 2
I am here to tell you how to upgrade to IE8 Beta 2. IE8 Beta 2 system requirements are the same as IE8 Beta 1 and it's currently available in English, Chinese Simplified, German and Japanese. Stay tuned for more localized IE8 Beta 2 versions to be available shortly.
Windows XP or Windows Server 2003
Getting Ready
Before you start IE8 Beta 2 installation, there are a couple of things to keep in mind:
If you have Internet Explorer 8 Beta 1 installed, the IE8 installer will automatically uninstall any earlier versions and then install the latest version of IE8 Beta2 for you. You will be prompted to reboot twice. The first reboot is to remove IE8 Beta 1 from your machine and the second one to complete the IE8 Beta 2 installation. When you launch Internet Explorer, you can open the Help->About Internet Explorer dialog to see the version number 8.0.6001.18241.
- Getting required updates for IE8 Beta 2
There is 1 update required when running IE8 Beta 2 on multi-core XPSP2 x86 computers:
Knowledge Base Article 932823 or Knowledge Base Article 946501 - This update resolves a problem in which an access violation occurs when an application exists on a Windows XP SP2-based multi-core computer. It will be installed automatically if you select "Install the latest updates" option in Setup Wizard.
Windows XP Service Pack 3(SP3) users only
The only time we encourage you to manually uninstall Internet Explorer 8 Beta 1 prior to upgrading to IE8 Beta 2 for Windows XP users is if you happened to install Windows XP SP3 after installing IE8 Beta 1.
To see if you need to manually uninstall IE8 Beta 1, check these things:
- Is your computer running Windows XP SP3?
Click on the Start Menu and then right click on My Computer and then click Properties
On the General Tab under System it'll say Microsoft Windows XP Service Pack 3
- Is the remove option for IE8 Beta1 grayed out?
From the Start menu, open Control Panel and click Add or Remove Programs
Select Windows Internet Explorer 8 Beta 1 and you are unable to click on the Remove button.
If you answered yes to both questions, you will be able to install Internet Explorer 8 Beta2, but once installed, you will not be able to uninstall either IE8 or Windows XP SP3 later. The Setup Wizard will warn you prior to installation:
If you chose to continue, Windows XP SP3 and IE8 Beta2 will become permanent. You will still be able to upgrade to later IE8 builds as they become available, but you won't be able to uninstall them.
To avoid getting into this situation, we strongly encourage you to follow these steps before installing Internet Explorer Beta 2:
- Uninstall Windows XP SP3
- Uninstall IE8 Beta1
- Re- install Windows XP SP3
- Install IE8 Beta2
See my earlier blog post on Internet Explorer and Windows XP SP3 for more information.
Windows Update
Internet Explorer Beta 2 will be offered to those Windows XP and Windows Server 2003 systems that have IE8 Beta 1 installed and have Automatic Updates turned on. A prompt in your Windows task bar will alert you when IE8 Beta 2 is ready for installation. The language version of IE8 Beta 2 offered is based on the your Windows Operating System Language version. For example, if your computer is running a Chinese Simplified or German version of Windows, you will be offered IE8 Beta 2 in Chinese Simplified or German respectively. For any other Windows languages, Internet Explorer 8 will be offered to you in English. Again, this only applies to those systems that have IE8 Beta 1 installed.
Localized Versions
When installing localized versions of Internet Explorer 8 Beta 2 on XP or Windows Server 2003 please remember that the base language of the operating system must match the IE8 language you are trying to install; otherwise the Setup Wizard will display an error.
More information about installing localized versions of IE8 Beta 2 can be found in the release notes.
Uninstalling IE8 Beta 2
- From the Start menu, open Control Panel and click Add or Remove Programs
- Click Windows Internet Explorer 8 Beta 2 and then click Remove.
- Your computer will be reverted to Internet Explorer 6 + previous IE6 security updates or Internet Explorer 7 + previous IE7 security updates depending on what you had before the upgrade.
- You can confirm that by clicking Help, then About Internet Explorer next time you launch Internet Explorer.
- Be sure to check for any new security updates.
Windows Vista or Windows Server 2008
Getting ready
Before you start installing Internet Explorer 8 beta2, there are a couple of things you need to do to prepare your computer:
- Uninstall Internet Explorer 8 Beta1
You need to manually uninstall earlier builds of IE8 before installing IE8 Beta 2.
- Open Control Panel and click Programs.
- Click Programs and Features, and click View installed updates.
- Wait for the full list to be populated and then select Windows Internet Explorer 8.
- Click Uninstall this update.
After uninstall is complete, restart the computer. Your computer will be reverted to Internet Explorer 7 + previous IE7 security updates.
- Getting required updates for IE8 Beta 2
Knowledge Base Article 937287 - This update helps improve reliability and performance when you install or remove Internet Explorer 8 and future individual updates from Microsoft. Without this update, IE8 setup will be blocked: "Setup cannot continue because one or more updates required to install Windows Internet Explorer 8 are not present."
Knowledge Base Article 943302 " This update addresses known application compatibility issues in Windows Vista. It will be installed automatically if you select "Install the latest updates" option in the Setup Wizard.
Knowledge Base Article 957055 " This update addresses a known compatibility issue between RealNetworks RealPlayer 11 and Window Vista Service Pack 1. It will be installed automatically if you select "Install the latest updates" option in the Setup Wizard.
You are now ready to install IE8 Beta 2. After IE8 Beta 2installation is complete, the final screen of the Install Wizard indicates that Internet Explorer installation completed successfully.
After you restart your computer and launch Internet Explorer, you can open the Help->About Internet Explorer dialog to see the version number 8.0.6001.18241.
Localized versions
In Windows Vista and Windows Server 2008, we significantly improved the installation experience for localized versions of Internet Explorer 8 beta 2. Unlike Windows XP and Windows Server 2003, the base language of Windows does not need to match the Internet Explorer 8 language version in order for a successful install. When your user active language matches the Internet Explorer 8 language you installed, then IE8 will appear in the desired language. You will still be able to use IE8 in all other scenarios, but it will appear in English as a fall back version.
More information about installing localized versions of IE8 Beta2 can be found in the release notes.
Uninstalling IE8 Beta 2
- From the Start menu, open Control Panel and click Programs
- Click Programs and Features and click View Installed Updates (located in the left side menu
- Select Windows Internet Explorer 8 and Uninstall
- Your machine will be reverted to IE7 + previous IE7 security updates
- You can confirm that by clicking Help, then clicking About Internet Explorer next time you launch Internet Explorer.
- Be sure to check for any new security updates.
What do I do when I run into issues installing IE8?
Check out the knowledge base article on Troubleshooting IE8 installation. If after trying the recommended workarounds you still can't install IE8, go to the IE Beta Newsgroup to see if there are any known solutions available. Microsoft MVPs and IE Team members are monitoring this newsgroup and they will help address your issues.
Thank you,
Jane Maliouta
Program Manager
by ieblog at August 27, 2008 06:58 PM
ajaxian
YouTube Uploader now using Gears, and what people missed in Gears 0.4

While we posted about the Gears 0.4 features a lot of the press only really talked about the Geolocation piece.
I think that is important, and posted on that too, but Brad's piece discussed the full gamut including the Blob API, resummable HTTP, and Desktop API improvements to allow controlled file system access. The example that Brad built was the upload movie tool which ties this all together.
Check out the source code and you will see the parts and pieces in action:
Geolocation
JAVASCRIPT:
-
-
MovieTool.prototype.getLocation = function(callback) {
-
var geolocation = google.gears.factory.create('beta.geolocation');
-
if (!geolocation.getPermission('Upload Movie Tool', '',
-
'This sample can use your '
-
+ 'geographic coordinates in order to tag '
-
+ 'uploaded videos with your location')) {
-
document.getElementById('location').innerHTML = 'Permission denied';
-
callback();
-
return;
-
}
-
-
var self = this;
-
geolocation.getCurrentPosition(
-
function(p) {
-
var addr = p.gearsAddress;
-
var address = addr.city + ', ' + addr.region + ', ' + addr.country;
-
var latitude = p.latitude;
-
var longitude = p.longitude;
-
self.geoAddress_ = address + ' (' + latitude + ', ' + longitude + ')';
-
document.getElementById('location').innerHTML = self.geoAddress_;
-
callback();
-
},
-
-
function(err) {
-
var msg = 'Error retrieving your location: ' + err.message;
-
document.getElementById('location').innerHTML = msg;
-
callback();
-
},
-
-
{
-
enableHighAccuracy: true,
-
gearsRequestAddress: true,
-
gearsLocationProviderUrls: ['http://www.google.com/loc/json']
-
}
-
);
-
}
-
HTTPRequest
JAVASCRIPT:
-
-
var req = google.gears.factory.create('beta.httprequest');
-
req.open('GET', '/list');
-
var self = this;
-
req.onreadystatechange = function() {
-
if (req.readyState == 4) {
-
if (req.status == 200) {
-
var loadingMsg = document.getElementById('loadingFilesMsg');
-
loadingMsg.parentNode.removeChild(loadingMsg);
-
self.movieList_ = eval(req.responseText);
-
for (var i = 0; i <self.movieList_.length; i++) {
-
var entry = self.movieList_[i];
-
// associative entry for fast lookup based on filename
-
self.movieList_['_' + entry.filename] = entry;
-
var status = 'Uploaded'
-
var percent = '100%';
-
-
// was this movie partially uploaded during an earlier browser
-
// session?
-
if (entry.uploaded == false && entry.blob == null) {
-
status = 'Partially uploaded; re-select file to continue uploading';
-
percent = Math.round((entry.bytesUploaded / entry.length) * 100) + '%';
-
}
-
-
// is this movie too large?
-
if (entry.uploaded == false && entry.length> self.MAX_FILE_SIZE) {
-
status = 'File too large';
-
percent = 'N/A';
-
}
-
-
self.drawRow(entry.filename, entry.geoAddress, status, percent);
-
}
-
}
-
-
callback();
-
}
-
}
-
-
req.send();
-
}
-
-
....
-
-
// sending a piece
-
req.open('POST', uploadURL);
-
-
req.setRequestHeader('Content-Disposition',
-
'attachment; filename="' + fileName + '"');
-
req.setRequestHeader('Content-Type', 'application/octet-stream');
-
req.setRequestHeader('Content-Range', 'bytes ' + byteRange);
-
-
Desktop API
JAVASCRIPT:
-
-
MovieTool.prototype.selectFiles = function() {
-
var desktop = google.gears.factory.create('beta.desktop');
-
var self = this;
-
desktop.openFiles(
-
function(files) {
-
for (var i = 0; i <files.length; i++) {
-
var entry = {filename: files[i].name, uploaded: false,
-
length: files[i].blob.length,
-
blob: files[i].blob, bytesUploaded: 0,
-
geoAddress: self.geoAddress_, uploadRetries: 0};
-
if (self.movieList_['_' + entry.filename]) {
-
// was previously uploaded at an earlier browser session
-
var oldEntry = self.movieList_['_' + entry.filename];
-
if (!oldEntry.uploaded) { // partial upload
-
oldEntry.length = entry.length;
-
oldEntry.blob = entry.blob;
-
var percent = Math.round((oldEntry.bytesUploaded / oldEntry.length) * 100);
-
self.updateStatus(oldEntry.filename, 'Not uploaded', percent + '%');
-
} else {
-
self.updateStatus(oldEntry.filename, 'Uploaded', '100%');
-
}
-
} else { // new file
-
// associative entry for fast lookup based on filename
-
self.movieList_['_' + entry.filename] = entry;
-
self.movieList_.push(entry);
-
-
var status = 'Not uploaded';
-
var percent = '0%';
-
// is this movie too large?
-
if (entry.length> self.MAX_FILE_SIZE) {
-
status = 'File too large';
-
percent = 'N/A';
-
}
-
-
self.drawRow(files[i].name, self.geoAddress_, status, percent);
-
}
-
}
-
-
document.getElementById('movieUpload').disabled = false;
-
document.getElementById('clearMovies').disabled = false;
-
},
-
-
{ filter: ['video/quicktime', '.wmv', 'video/avi'] }
-
);
-
}
-
It turns out that YouTube has implemented a multifile upload using Gears which puts this into practice. As someone who uses YouTube a lot to upload files this is very welcome indeed, and I can't wait to see more sites use it now the building blocks are there in a different way (can always use Flash / other controls in the past).
by Dion Almaer at August 27, 2008 02:20 PM
design.Principles
How To Create An Amazing jQuery Style Switcher
There’s a well documented article/tutorial at NETTUTS that outlines the step-by-step process of creating a pretty slick style switcher with CSS and jQuery. It’s definitely something to keep in mind for that next Web project.
by reh3 at August 27, 2008 11:13 AM
ajaxian
Proxy issues with querystrings in path names
You have seen this before: /path/to/something.js?v=2, or maybe it used a date or a version control id or some such. The notion of putting the version into the URL so you can aggressively cache and yet quickly push new versions.
There has long been issues with using the querystring as the version. At some point I seem to remember Safari not going a good job caching that scenario and thinking that it was different.
Steve "Neo" Souders has posted about this issue especially as it relates to proxy servers and default configurations:
There's a section in my book called Revving Filenames. It contains an example of adding a version number to the filename. That's prompted several emails where people have asked me about tradeoffs around using a querystring versus embedding something in the filename. I wasn't aware of any performance difference, but in a meeting this week a co-worker, Jacob Hoffman-Andrews, mentioned that Squid, a popular proxy, doesn't cache resources with a querystring. This hurts performance when multiple users behind a proxy cache request the same file - rather than using the cached version everybody would have to send a request to the origin server.
I tested this by creating two resources, mylogo.1.2.gif and mylogo.gif?v=1.2. Both have a far future Expires date. I configured my browser to go through a Squid proxy. I made one request to mylogo.1.2.gif, cleared my cache (to simulate another user making the request), and fetched mylogo.1.2.gif again. This produces the following HTTP headers:
>> GET http://stevesouders.com/mylogo.1.2.gif HTTP/1.1
<< HTTP/1.0 200 OK
<< Date: Sat, 23 Aug 2008 00:17:22 GMT
<< Expires: Tue, 21 Aug 2018 00:17:22 GMT
<< X-Cache: MISS from someserver.com
<< X-Cache-Lookup: MISS from someserver.com
>> GET http://stevesouders.com/mylogo.1.2.gif HTTP/1.1
<< HTTP/1.0 200 OK
<< Date: Sat, 23 Aug 2008 00:17:22 GMT
<< Expires: Tue, 21 Aug 2018 00:17:22 GMT
<< X-Cache: HIT from someserver.com
<< X-Cache-Lookup: HIT from someserver.com
Notice that the second response shows a HIT in the X-Cache and X-Cache-Lookup headers. This shows it was served by the Squid proxy. More evidence of this is the fact that the Date and Expires response headers have the same values, even though I made these requests 10 seconds apart. For conclusive evidence, only one hit shows up in the stevesouders.com access log.
Loading mylogo.gif?v=1.2 twice (clearing the cache in between) results in these headers:
>> GET http://stevesouders.com/mylogo.gif?v=1.2 HTTP/1.1
<< HTTP/1.0 200 OK
<< Date: Sat, 23 Aug 2008 00:19:34 GMT
<< Expires: Tue, 21 Aug 2018 00:19:34 GMT
<< X-Cache: MISS from someserver.com
<< X-Cache-Lookup: MISS from someserver.com
>> GET http://stevesouders.com/mylogo.gif?v=1.2 HTTP/1.1
<< HTTP/1.0 200 OK
<< Date: Sat, 23 Aug 2008 00:19:47 GMT
<< Expires: Tue, 21 Aug 2018 00:19:47 GMT
<< X-Cache: MISS from someserver.com
<< X-Cache-Lookup: MISS from someserver.com
Here it's clear the second response was not served by the proxy: the caching response headers say MISS, the Date and Expires values change, and tailing the stevesouders.com access log shows two hits.
Proxy administrators can change the configuration to support caching resources with a querystring, when the caching headers indicate that is appropriate. But the default configuration is what web developers should expect to encounter most frequently. Another interesting note about these tests: notice how the proxy downgrades the responses to HTTP/1.0. This is going to alter browser behavior in terms of the number of connections that are opened. When I'm doing performance analysis I make sure to avoid being connected through a proxy.
by Dion Almaer at August 27, 2008 11:06 AM
Towards Using Custom Fonts
A little while ago, we talked about the two competing custom font technologies for the Web: linking and "embedding" (aka EOT). With Firefox about to implement support for linking à la Safari, John Allsopp has a summary of the state of font technologies and an illustration of just how easy it is to use these in stylesheets.
Once you define a font-face using both linking and EOT thusly:
CSS:
-
@font-face {
-
font-family:"Fenwick";
-
src: url(fenwick.eot);
-
}
CSS:
-
@font-face {
-
font-family: "Matrix";
-
src: url(http://www.westciv.com/CSS3Tests/matrix.ttf) ;
-
}
You can use a single CSS attribute to reference whichever is supported on the currently browser and gracefully degrade on browsers that don't support either technology:
CSS:
-
p {
-
font-family: Fenwick, Matrix, san-serif;
-
}
Soon-to-be ubiquitous <canvas> (somehow, we'll get there), faster JavaScript, and custom fonts. Man, this is exciting...
by Ben Galbraith at August 27, 2008 11:00 AM
design.Principles
Mozilla Labs Launches Ubiquity
Yesterday marked a potential fundamental change in how people use the Internet. Mozilla Labs launched (in alpha) their Ubiquity prototype — “…experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily.”
I’m not sure [...]
by reh3 at August 27, 2008 10:55 AM
ajaxian
Ubiquity: Quicksilver of the Firefox browser

Aza Raskin and the Mozilla Labs team have launched Ubiquity the command line tool that they have been talking about for awhile.
Ubiquity is "experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily."
The overall goals of Ubiquity are to explore how best to:
- Empower users to control the web browser with language-based instructions. (With search, users type what they want to find. With Ubiquity, they type what they want to do.)
- Enable on-demand, user-generated mashups with existing open Web APIs. (In other words, allowing everyone"not just Web developers"to remix the Web so it fits their needs, no matter what page they are on, or what they are doing.)
- Use Trust networks and social constructs to balance security with ease of extensibility.
- Extend the browser functionality easily.
The screencast explains more:
What is cool about the system, is that it is a platform. If you fancy adding a new command, it is as easy as the following 'date' command:
JAVASCRIPT:
-
-
CmdUtils.CreateCommand({
-
name: "date",
-
-
_date: function(){
-
var date = new Date();
-
return date.toLocaleDateString();
-
},
-
-
preview: function( pblock ) {
-
var msg = 'Inserts todays date: "<i>${date}</i>"';
-
pblock.innerHTML = CmdUtils.renderTemplate( msg, {date: this._date()} );
-
},
-
-
execute: function() {
-
CmdUtils.setSelection( this._date() );
-
}
-
})
-
Fancy a go? Download Ubiquity 0.1.
by Dion Almaer at August 27, 2008 08:00 AM
Using CSS to do the print watermark technique
Andy Pemberton has put together a simple solution to get the watermark technique to work nicely with print CSS.
Check out the sample and pull up a print preview. He details the good, bad, and ugly:
The Good
The first step to getting a printable watermark is to use an inline ![]()
tag, rather than background-images. In most browsers, background-images won't be printed unless the user selects an additional browser option to enable it.
From here, we need to place the watermark image so that it is repeated on each page. It looks like the W3C thought of this ahead of time in the positioning module. The position property's fixed value should ensure that a watermark is printed on each page. Some browsers, like FireFox and Internet Explorer 7, apply this rule correctly.
The Bad
Not all browsers play nicely with position:fixed and we haven't yet considered using z-indexing to ensure the watermark displays behind all the regular page content. For IE and FireFox 3+, simply applying z-index:-1 to the watermark will do the trick.
Though, it turns out that earlier versions of FireFox (and other Gecko-based browsers) don't play nicely with negative z-indexing. So, my current approach uses a few Gecko-specific hacks to degrade the watermark approach for FireFox 2. For FireFox 2, the watermark will display over the content, but still display on every page. Unfortunately, this means the CSS for my approach doesn't validate.
The Ugly
But of course, position:fixed isn't supported at all in IE6; it appears to ignore the rule altogether and display the image inline. So, I use conditional comments to filter just a *few* IE6-specific hacks:
Absolute positioning and an additional 100% height on the watermark and printable content are the keys to getting this working for IE6:
div.watermark{
position:absolute;
overflow:hidden;
}
div.content{
height:100%;
}
by Dion Almaer at August 27, 2008 07:14 AM
molly.com
When You Met Nick Drake
BY THE TIME I’d “met” Nick Drake he was already long dead.
I believe it was after the “Pink Moon” Volkswagen commercial that aired in the United States. It’s possible I’d heard him before but I’m pretty sure I’d remember.
I’ve been listening to Nick Drake now nearly 10 years. What about you?
When did you see/hear/learn about Nick Drake?
Perfection has no stopwatch.
by Molly at August 27, 2008 04:09 AM
Microsoft - IEBlog
IE8 Performance
Hi! I'm Christian Stockwell, and I'm helping to improve Internet Explorer performance.
In the past few months, each of the browser makers has made very similar claims around their performance: "Superior speed and performance", "The fastest and most powerful Web browser available", and "The fastest web browser on any platform." In some fundamental way, I think the likeness of these statements is a by-product of the complexity inherent in performance measurement and analysis.
Rather than join the chorus and trumpet IE as the fastest browser in the universe, this post is my attempt to demystify the performance work that is being delivered as part of IE8 so that you can understand how we are making you more productive.
Best of all, you don't need to take my word for it. As Dean mentioned back at MIX08, Google has commented on our IE8 Beta 1 improvements (emphasis mine), and we've made IE8 even faster since then:
"Some of the tests we have done show pure JScript performance improvements up to 2.5 times. We also measured the performance gains on common Gmail operations, like loading the inbox (34%), opening a conversation (45%) and opening a thread (27%) compared to IE7."
Before I delve too far into the body of this post I am going to first take a step back to explain how the IE team thinks about performance. I will then discuss some of the performance work that has gone into IE8 and how it will make IE8 a better browser for user and developers. Lastly, I will touch on some of the great IE8 features that give web developers the right tools they need to be more productive and to build the next generation of great sites.
The Big Picture: Performance and Productivity
"Every language has an optimization operator. In C++ that operator is "//'"
- Overheard at the O'Reilly's Velocity Conference, June 2008
To describe the effort we are undertaking with IE8 we first need to take a step back to consider the relationship between performance and productivity. Most importantly, recognize that browser performance is a means to an end. The end goal is to build a platform that makes users and developers more productive. If we ignore that target the task of building a fast product is suddenly much easier: do precisely nothing.
For IE8, the recognition that users want to accomplish a set of actions when they browse the web has manifested itself in many of the features we have disclosed to date in IE8. A clear example that improves user productivity is Web Slices. Consider, for example, how Web Slices delegate the browser to check for updated content on behalf of users.
Both of these features present new productivity options for both users and developers. For users, the benefit of having common actions distilled into two quick button presses is obvious. Developers, for their part, can consider the benefits of quickly introducing new lightweight Web Slices instead of investing hundreds of developer hours tuning site loading speed for the hordes of users compulsively refreshing their pages in the pursuit of updates.
Beyond these two manifestations of our focus on productivity, IE8 includes many key improvements. In the first section below I describe in greater detail the work we've done to date to improve your productivity. The last section of this article discusses some of the great developer features we've built that will give site developers the right foundation they need to efficiently build faster sites in Internet Explorer.
Great Performance: How to build a faster browser
As we started planning what we wanted to accomplish with IE8, we made a conscious decision to improve how people use Internet Explorer to browse the web. Broadly stated, some of the areas we pinpointed for improvement include browser startup, navigation, and user interactions (including AJAX-style interactions within a webpage).
Part of that focus has translated into our investment into new features like Web Slices, because in some cases the fastest browser is the one that does not need to load a webpage at all. Beyond these efforts, we have also concentrated on improving IE as a web platform.
When we took a hard look at our goals and considered what we could do to build the best browser we were presented with a quandary. On the one hand, we could focus very narrowly on scripting performance, trusting that our investment would noticeably improve our users' browsing experience. Alternatively, we could invest more broadly in realistic scenarios, measuring heavily-used subsystems and investing our optimization effort accordingly. We opted for the latter approach.
After some analysis, what we found was that investing the entirety of our effort on improving JScript would not substantially improve our users' browsing experience in most cases. For a sample of the type of data we used in our analysis, I've included below a breakdown of the CPU cycles consumed by some of our key subsystems when navigating to the top 100 sites in IE8 Beta 1:
| Layout |
Rendering |
HTML Parsing |
Marshalling |
CSS Formatting |
DOM |
JScript |
Other |
| 43.16% |
27.25% |
2.81% |
7.34% |
8.66% |
5.05% |
3.23% |
2.49% |
Notice that when navigating to the top 100 sites the systems exercised in typical JScript/DOM benchmarks (e.g. SunSpider) account for less than 10% of the total time. Furthermore, we analyzed several common AJAX applications and performed similar analyses, with similarly surprising results:
| Layout |
Rendering |
HTML Parsing |
Marshalling |
CSS Formatting |
DOM |
JScript |
Other |
| 8.87% |
8.68% |
1.48% |
7.40% |
36.72% |
11.72% |
13.59% |
11.54% |
Even on a typical AJAX site (these numbers are for a leading webmail sites) it is telling that the JScript and DOM subsystems contribute less than a third of the total time.
Based on this data and other analyses we performed it was clear that to significantly improve browsing in IE8 we needed to make improvements to several areas of our code beyond JScript. In addition to discussing our improvements to the JScript engine I cover three of those areas below.
Performance benchmarking suites like SunSpider are still an important part of how we analyze our progress. They are a certainly valuable as a means to measure progress and to analyze some aspects of browsing performance in a laboratory environment. They are most useful when we understand how they fit into the larger scenarios we are trying to improve.
In particular, our analysis of IE subsystems has helped us understand where improvements to benchmarks translate into improvements to overall browsing speed. Ultimately though, performance benchmarking suites do not provide complete coverage for browsing performance and how well they represent your particular browsing habits may vary.
Scripting Improvements
As part of our broader effort to improve performance in IE8, we did make large investments in JScript performance to make pages faster and to help developers be more productive.
The JScript engine included with IE8 speeds up many common user scenarios. We have made huge improvements to widely-used JScript functionality including faster string, array, and lookup operations. We have also made changes to our core architecture to drastically reduce the cost of functions calls, object creation, and lookup patterns for variables scoped to the window or this objects.
Some of those improvements have been driven by existing bottlenecks in our code. Two longstanding developer pain points, String and Array operations, are in some cases now faster by several orders of magnitude compared to their previous incarnations. These improvements mean that developers no longer need to expend time and effort developing arcane workarounds to avoid slow areas of IE's JScript implementation (no more array push-joins to avoid string concatenation!). Moreover, these changes have contributed to improve IE8's performance on the SunSpider benchmarking suite by 400% compared to IE7.
Since most users do not use their browser solely to run JScript benchmarking suites, what's even more important is that we've made many sites measurably faster. Our work to improve IE's JScript engine has been instrumental in earning us positive feedback like that from Google.
Memory Management Improvements
The second area in which we are invested heavily in IE8 is in improvements to our memory usage. To date we have fixed just under 400 separate memory leaks in Internet Explorer. We have also worked hard to improve our heap fragmentation and memory usage on AJAX pages. For users, these changes reduce the amount of memory consumed by IE, improve our startup times, speed up navigating between pages, and help IE remain stable for longer periods of time. Besides these great benefits to end users, our work in this area should take a significant burden off of developers.
Specifically, we have worked hard to mitigate some common causes of leaks between our JScript and DOM. In previous versions of IE the JScript garbage collector (GC) managed the lifetime of JScript objects but not that of DOM objects. As a result the GC was unable to break circular references between DOM and JScript objects, resulting in memory leaks unless site authors took it upon themselves to carefully manage their memory footprint. In complex AJAX sites this is a daunting task and can easily consume lots of developer time.
In IE7 we made some improvements to this area by breaking those circular references when users navigate away from leaking pages. That mitigation, however, is not a long term solution for the complex interactive pages that users expect today.
With IE8 we have significantly augmented the garbage collector so that it can break many circular references over the lifetime of a site, reducing the burden on developers. Due to that work developers can spend more of their time focusing on building world class user websites and less on the minutiae of memory management.
Networking Improvements
As we started building IE8 it was clear that we could do more to take advantage of the increasing prevalence of high bandwidth connections. Two key improvements we made with IE8 were to unblock downloads in the presence of external scripts and to increase the number of parallel connections per server that we support.
Early in the inception of IE8 we recognized that blocking on external scripts was suboptimal given the modern reality of relatively inexpensive CPU cycles and the important role network latency plays in the performance of many websites. When IE8 encounters an external script we continue parsing on a second thread to ensure that we continue downloading page elements as fast as possible. In many cases that change will users' favorite pages will download faster and developer will no longer need to spend time ensuring that scripts do not serialize their downloads.
In IE8 Beta 1 we also increased our per-server connection limit from 2 to 6. What this means is that in IE7 and below pages could only download 2 elements from a given server at any one time. Increasing that limit to 6 allows sites to download 3 times as much content in parallel, which should translate into faster page download times when bandwidth is available.
Rendering Engine Improvements
The last large area of I am going to cover in this post are the improvements we have made to layout and rendering in our new standards mode engine.
For those of you following IE8's development, it should come as no surprise that we are building a new CSS 2.1 compliant rendering engine. As you may have guessed from the subsystem data I presented earlier in this post, we have also recognized that rendering and layout performance is a large component of overall browsing speed.
To ensure that developers and users are more productive in IE8, it is therefore clear that we need to deliver a great engine that does not introduce any performance penalty vis-à-vis the browser as it exists today.
In Beta 1 our standards mode engine was much slower than our IE7 engine. Over the last few months we have been making improvements by leaps and bounds. By our upcoming Beta 2 we expect our standards mode engine to be at parity with our previous implementation for many sites. Going forward we will continue to invest in this area with the goal that when IE ships, developers do not have to make any difficult decisions: developing for our new engine will produce sites that work better across browsers and as an added bonus they will be faster too!
The combination of the performance improvements I've outlined above mean that many sites will be faster in IE8, allowing our users to be more productive than ever before. At the same time we have also eliminated numerous rough patches so that web developers can build great sites in less time.
Best yet, with IE8 Beta 2, developers can see further improvements to our developer tools that will make them more productive developing lighting fast sites.
New Developer Features
Beyond the various enhancements we've made to IE8 to make you more productive when browsing the web or creating new sites, we've also added support for several key new technologies that you can harness to make your websites faster. In the remainder of this post I will briefly discuss three of my favorite IE8 developer features.
Data URI
Are you tired of spending time writing code to use CSS spriting to minimize network overhead of using many small images on your site? If so, the first of my favorite features may be just for you. With IE8 we add support for RFC 2397's Data URIs. Instead of using a URL to point to an image file (and incurring additional round trip costs to transfer that file to the browser), you can use Data URIs to encode the data directly.
For instance, here is a Data URI representing a 10x10 blue dot (base64 encoded):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAANQTFRFALfvPEv6TAAAAAtJREFUCB1jYMAHAAAeAAEBGNlaAAAAAElFTkSuQmCC
You should note, however, that Data URIs should be used sparingly because they incur some client processing overhead due to their base64 encoding and because they cannot be cached in the same as images retrieved over the network. Since Data URIs are embedded directly into a document, script, or stylesheet you should try to embed them within one such element that is in turn cacheable.
Selectors API
In addition to our support for Data URIs, IE8 also supports the Selector APIs querySelector and querySelectorAll to let you lookup selectors from JScript orders of magnitude faster than you would previously using implementations included in frameworks. In informal tests against our recent builds I've seen some tests improve from several seconds to mere milliseconds when comparing our native implementation against the alternatives offered by common frameworks. For more detail regarding our implementation of the selectors API please refer to our Selectors API whitepaper.
JSON
The last of my three favorite IE8 developer features is our support for JSON, announced in an earlier post on this blog.
Developers on AJAX websites often use JavaScript Object Notation (JSON) to pass data between components of their site. In previous versions of IE developers were often forced to use JSON insecurely by using JScript's eval method to revive JSON strings back into JScript objects. More secure sites typically used a more secure JSON parser to sanitize their JSON objects"often at the price of significant performance penalties. In both cases user and developer productivity was severely compromised.
To make everyone's life easier with IE8 Beta 2 our JScript engine implements the ECMAScript 3.1 JSON proposal's JSON.stringify and JSON.parse methods, providing a speedy and secure solution to a common developer problem.
Other great features
Those are my three favorite features that developers can harness to build better sites in IE8. Of course, your favorites may vary because beyond those three features we have great collection of developer features that you can take advantage of to build faster sites.
Our support for DOM storage (10mb of local storage per site!), XDomainRequest (secure cross-domain communication without a server-side proxy), and Connectivity Events (script can now tell if a user is connected to the internet) are all very powerful features that developers can harness to build faster websites.
Moreover, I am confident that our investment in tools and features for developers ensures that building fast sites in IE8 will be an easier and more transparent process than in any previous version of our browser.
I hope that this article has helped you understand a little better how our performance work fits into the Internet Explorer team's goal of making us all more productive. Although it is often tempting to obsess about particular performance benchmarking suites I have always found it valuable to take a step back and look at the bigger picture for a moment to put everything in perspective.
With that in mind, I do recognize that your expectations are pretty high. We have lots more performance work planned for IE8 and I encourage you to keep following our progress as we release our upcoming Beta.
Christian Stockwell
Program Manager & Performance Geek
by ieblog at August 26, 2008 11:19 PM
ajaxian
jParallax Turns Elements into a Viewport
In the "oh wow, I didn't know JavaScript could do that" category, I just came across a cool new jQuery plugin called jParallax which implements a parallax effect on selected elements. Now, I'm not ashamed to admit not knowing what "parallax" meant so I looked it up on Wikipedia which totally added closure to the concept being implemented. Till then, I just thought that was a really cool effect!
Parallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.



jParallax includes several options for controlling the effect including setting the animation timing and layer positioning control. The demos can be viewed here.
We also covered Brett Taylor's implementation of a parallax effect last year where he showed how to build parallax backgrounds.
Update: I've added straight links to the demos
Demo Links
by Rey Bango at August 26, 2008 02:36 PM
navigator.geolocation: Using the W3C Geolocation API today
Last week I wrote a simple WhereAreYou? application that used the Google Ajax APIs ClientLocation API to access your location via your IP address.
At the same time, we announced support for the Gears Geolocation API that can calculate your address using a GPS device, WiFi info, cell tower ids, and IP address lookups.
Add to all of that, the W3C Geolocation API that Andrei Popescu of the Gears team is editing. You will notice that it looks similar to the Gears API, with subtle differences. The ClientLocation API is quite different.
To make life easier, I decided to put together a shim called GeoMeta that give you the W3C Geolocation API, and happens to use the other APIs under the hood.
If you have the Geolocation API native in your browser (no one does yet, future proof!) that will be used. If you have Gears, that API will be used, and finally, with nothing the ClientLocation API will be used behind the scenes.
To you the API will look similar:
// navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
navigator.geolocation.getCurrentPosition(function(position) {
var location = [position.address.city, position.address.region, position.address.country].join(', ');
createMap(position.latitude, position.longitude, location);
}, function() {
document.getElementById('cantfindyou').innerHTML = "Crap, I don't know. Good hiding!";
});
At least, that is what I would like. Unfortunately, there are a few little differences that leak through.
- The W3C API only seems to give you a lat / long, so you have to do the geocoding to get address info
- The Gears API gives you an additional
gearsAddress object attached to the resulting position object. This can contain a lot of information on the resulting area (street address to city to ...) however for certain providers the API returns that as null, the same as the W3C standard
- That
gearsAddress object has slightly different information from the address data that the ClientLocation API returns. NOTE: I would love to see this just called 'address' to help the shim.
To give you control when you need it, you can ask the navigator.geolocation object what type it is. navigator.geolocation.type will be null if it is native, but 'Gears' or 'ClientLocation' if a shim kicks in. You can also check navigator.geolocation.shim to see if it is augmented code.
Implementation
There is some fun implementation code in there if you poke around. For example, for the ClientLocation API, when you make a call, it will be added to a queue if the Google Loader hasn't fully loaded yet, and it will kick off that call when finished. Dealing with dynamically creating <script src> as a loading mechanism sure is fun!
I like the idea of jumping straight to the W3C standard and updating the shim as the APIs change. That way, when browsers catch up, the code will still work using the native APIs and you don't have to change a thing.
I also hope that we get general reverse geocoding in place, which would enable me to even take the native "standard" and strap on useful address info to the bare bones lat/long.

by Dion Almaer at August 26, 2008 02:14 PM
Firebug 1.2: The final release is out there

John has announced the Firebug 1.2 final release. As well as just supporting Firefox 3, there are some quality improvements:
The Script panel (the JavaScript debugger), the Net panel (network monitoring), and Console panel have all seen considerable updates. They're all much more performant and have a huge number of bug fixes.
Specifically the Console panel has seen a number of security improvements. We'll be discussing the specific nature of these changes once everyone has had enough time to upgrade to Firebug 1.2.
A list of all the bug fixes can be found in the full release notes.
Who enabled me?
Taking in to consideration the above performance points (namely the fact that enabling the Console, Script, or Net panels have the potential to incur a global overhead on all browser tabs) a feature was added to help you minimize your use of the panels in errant tabs.
If you position your mouse over the Firebug icon, in the Firefox tray, a tooltip will pop up telling you two things: The version of Firebug that you're using and which tabs have some Firebug panels enabled in them.
It should be noted that the Firebug will be a gray color if no tabs currently have a Firebug panel enabled at all.
Using the above tooltip you can now go in and selectively disable any panel usage that you are no longer utilizing.
Suspend/Resume Firebug.
Of course, when using the above tooltip (or seeing that the Firebug icon is lit up), you'll just want to suspend all use of Firebug panels straight out without having to poke-around each individual tab.
A new Suspend/Resume menu option has been added that will suspend/resume all active panels. This is a one-click way to keep Firebug in check.
Suspend/Resume Firebug.
by Dion Almaer at August 26, 2008 01:11 PM
Understanding context in your New Tab
Aza Raskin and the Mozilla Labs team looks like they are having a lot of fun. They have been putting up proposals for new UIs and the latest involves a smarter new tab screen.
Aza discusses how opening a blank screen doesn't really help you. Opera already allows you to have a quick dial screen show up there, but what else can be done?
Often a new tab is opened to do a search, so they can put a search bar right there, and it can be smart enough to search across your own tools and providers (e.g. delicious). I personally don't do this, as I use Apple-K to jump to the search bar in the browser and have the search results open in a new tab.
What I found even more interesting was the context specific smartness. How often do you do this:
- Find an address
- Select and copy the address
- Open a new tab
- Go to maps.google.com
- Paste in the new address
Instead, the new tab selector can be smart and automatically show you the map option. NOTE: there are of course other options such as plugins that find the addresses and give you links to the map.
by Dion Almaer at August 26, 2008 12:52 PM
design.Principles
CSS Sprites2 - It’s JavaScript Time
In the latest issue of A List Apart, Dave Shea revisits his influential CSS Sprites technique for navigation treatment. This time around, however, the technique leans less on CSS as a sole driver and more on JavaScript, particularly the jQuery library.
As evident by this very site, I’ve been delving more into jQuery, Moo, Prototype [...]
by reh3 at August 26, 2008 02:24 AM
Microsoft - IEBlog
IE8 and Privacy
As others have written here before, users should be in control of their information. That's at the core of privacy. Privacy has two aspects: disclosure and choice. Disclosure means informing users in plain language about the data collected about them and how it's used. Choice means putting users in control of their data and giving them tools to protect it.
Have you ever wanted to take your web browsing "off the record"? Perhaps you're using someone else's computer and you don't want them to know which sites you visited. Maybe you need to buy a gift for a loved one without ruining the surprise. Maybe you're at an Internet kiosk and don't want the next person using it to know at which website you bank.
What if you want to delete your browsing history after the fact, but you don't want to lose your preferences at websites that you use frequently?
When we began planning IE8, we took a hard look at our customers' concerns about privacy on the web. As evidenced by some of the comments on this blog during the IE7 days, many users are concerned about so-called "over-the-shoulder privacy", or the ability to control what their spouses, friends, kids, and co-workers might see.
What about your privacy as you browse the web? As Dean outlined is his post earlier today, there is so-called "3rd-party" content on websites, some of which can gather data about how you browse the web. How do you know what that is, or how to control it?
With respect to privacy, IE8 gives users more choice about controlling what information they keep and exchange. In the first part of this post I'll describe two Internet Explorer 8 features that help you control your history, cookies, and other information that Internet Explorer stores on your behalf. In the latter part, I'll describe two more features that can help you control how your browsing history is shared by websites. By default, IE8 browses the web the same way IE7 does.
- InPrivate™ Browsing lets you control whether or not IE saves your browsing history, cookies, and other data
- Delete Browsing History helps you control your browsing history after you've visited websites.
- InPrivate™ Blocking informs you about content that is in a position to observe your browsing history, and allows you to block it
- InPrivate Subscriptions allow you to augment the capability of InPrivate Blocking by subscribing to lists of websites to block or allow.
InPrivate Browsing
If you are using a shared PC, a borrowed laptop from a friend, or a public PC, sometimes you don't want other people to know where you've been on the web. Internet Explorer 8's InPrivate Browsing makes that "over the shoulder" privacy easy by not storing history, cookies, temporary Internet files, or other data.
Using InPrivate Browsing is as easy as launching a new InPrivate Browsing window. When you're done, just close the window and IE will take care of the rest.

While InPrivate Browsing is active, the following takes place:
- New cookies are not stored
- All new cookies become "session" cookies
- Existing cookies can still be read
- The new DOM storage feature behaves the same way
- New history entries will not be recorded
- New temporary Internet files will be deleted after the Private Browsing window is closed
- Form data is not stored
- Passwords are not stored
- Addresses typed into the address bar are not stored
- Queries entered into the search box are not stored
- Visited links will not be stored
Delete Browsing History
In Internet Explorer 7, we added a feature called Delete Browsing History that lets you delete in one click all of the information that IE saves. This is a necessary tool that is a standard feature in all modern web browsers. If there are things in your web browsing past that you want to erase, you can do that easily.
The problem is that usually you don't want to delete everything! Cookies, in particular, are really useful for storing preferences on websites that you use frequently. Many sites have a "remember me" option, which stores a cookie on your PC and identifies your user account. Other sites, particularly financial websites, will store a cookie on each computer that you use to eliminate extra challenge questions (i.e. "What was your high school mascot?").
IE8 solves this problem by adding an option that lets you keep cookies and temporary Internet files from websites saved in your Favorites list:

To avoid having your favorite sites "forget you", simply add them to your Favorites, and make sure the "Preserve Favorites website data" checkbox is selected. IE will preserve any cookies or cache files that were created by websites in your favorites.
Oh " and by the way " we heard your feedback about checkboxes! Now Delete Browsing History will remember your preferences. We also added a "Delete Browsing History on Exit" feature if you really want to keep your history squeaky-clean! To do so, click Tools->Internet Options:

In his post earlier today, Dean outlined some of the privacy issues surrounding third-party content, which powers some of the rich experiences you get on the web today, such as interactive maps and social networking shortcuts ("add to Digg").
Some third-party content is shared by multiple websites. If you happen to browse to sites that refer to the same third-party resource, i.e. a script, image, stylesheet, information is sent to that third-party. Over time, the third-party can create a profile of which websites you go to, what links you click on, etc. It's hard to know exactly how your data will be used and with whom it will be shared without reading and understanding the privacy policy of each third-party site providing content to the website you visit,.
Consider this hypothetical example. You walk into a shopping mall. In the middle of the shopping mall, there is someone in front of a kiosk who asks you if he can record what stores you visit while you're there as part of a survey. In order to do so, he writes down a description of what you look like " not your name " but what you're wearing, your height, etc. In several of the stores throughout the mall, there are people who identify you based on this data, and record whether or not you visit a particular store. When the mall closes, the surveyors in the store report their tallies back to the kiosk. What the surveyor ends up with is a list of some of the stores you visit while you're at the mall.
This is analogous to how some third-party content works on the web today. Again, without reading specific privacy policies, it's hard to say in general what third-parties do with the data (or whether or not they record it at all).
The first difference between this mall example and the real world is that the mall survey is hypothetical. Again, different third-party sites do different things with the data they can collect, and the best way to understand what they actually do is reading their privacy policy. The other major difference between this example and the web is how explicitly users are presented with a choice about sharing their information. Clearly there are benefits to sharing your information, starting with richer experiences. Many web sites rely on third-parties to provide content and services like interactive maps and financial data, or analytics and advertising in order to operate effectively. These third-party services often collect information in order to do their jobs. There are also potential drawbacks, such as privacy risks (who has what information?) and increased exposure to malicious content. Put simply, the web relies on a trade, or value exchange, between users and sites. Information goes back and forth: in exchange for "free" services and content, users "pay" with information, not money. There is nothing wrong with such a trade, as long as users are informed and are in control of the choice.
InPrivate Blocking
InPrivate Blocking is a feature designed to help give you information about third-party content that has a line of sight into your web browsing, and gives you a choice about what information you share with these sites. As Dean mentioned in his post, it's possible for sites to track users without cookies. The only way to ensure that your data is not disclosed is to block content and prevent communication to sites.
While you browse the web, your IE keeps a local record of which third-party items your browser accesses, and where they were accessed from. For example, if you visit http://www.contoso.com/index.html, which contains the following snippet:
<html>
<head> <title> Contoso.com Homepage </head>
"
<script src=http://www.woodgrove-int.com/tracking.js>
"
</html>
and then visit http://www.wingtiptoys.com/, which contains the same snippet:
<html>
<head> <title> Great deals at Wingtiptoys.com </head>
"
<script src=http://www.woodgrove-int.com/tracking.js>
"
</html>
Woodgrove-int.com is now in a position to know that you've been to both contoso.com and wingtiptoys.com.
InPrivate Blocking keeps a record of third-party items like the one above as you browse. When you choose to browse with InPrivate, IE automatically blocks sites that have "seen" you across more than ten sites.
You can also manually choose items to block or allow, or obtain information about the third-party content directly from the site by clicking the "More information from this website" link. Note that Internet Explorer will only record data for InPrivate Blocking when you are in "regular" browsing mode, as no browsing history is retained while browsing InPrivate. An easy way to think of it is that your normal browsing determines which items to block when you browse InPrivate.

InPrivate Subscriptions
Users can augment the capability of InPrivate Blocking with InPrivate Subscriptions. Some users want to protect their privacy, but don't want to make granular decisions about content to block or allow. Users can delegate these decisions to publishers of InPrivate Subscriptions. Users can subscribe to a list the same way they add an Accelerator, Web Slice, or search provider to IE: by clicking a link on a web page and confirming that they want this functionality:

Under the covers, InPrivate Subscriptions are simply RSS feeds of Regular Expressions that specify sub-downloads to block or allow. Anyone can publish an InPrivate Subscription on their website, just as they can offer an Accelerator or Web Slice on their website. We'll post details about the file format as part of the updated IE8 Developer's Guide with Beta 2.
Conclusion
IE8 helps put you in control of your data, both on your PC and on the Web. IE8 Beta 2 is coming soon, and I encourage you to download it and give us feedback.
Andy Zeigler
Program Manager
P.S. Check out Dean and Andy talking about IE8 and Privacy on Channel 9.
Edit: Added a P.S.
by ieblog at August 25, 2008 07:02 PM
Privacy Beyond Blocking Cookies: Bringing Awareness to Third-Party Content
Previous posts have covered trustworthy principles in general and some product specifics as well. Privacy is an important part of trustworthy computing. This post discusses one aspect of privacy on the web: third-party content.
When most people browse the web, they think what they see in the address bar and the site they are visiting are the same thing. However, web sites today typically incorporate content from many different web sites. For the sake of clear terminology, the site the user browses to directly (seen in the address bar) is the first-party site; the other sites that the first-party site incorporates in its site experience (but that the user hasn't navigated to directly) are third-party