Ian Hickson gave a great presentation at Google where he just sat down, opened up Emacs, and started to build demos on the fly that use HTML 5 features. His goal was to use browsers available today (albeit nightlies and such for some of them) to show progress.... so no future tense!
There are a substantial number of iPhone apps that tie into the builtin native components such as the camera.
Brad Lassey has been hacking on Fennec (the Mozilla mobile browser) as well as Firefox itself to integrate with camera phones and Webcams alike:
I wrapped a video tag, image and a few buttons in xbl and bound it to <input type=”camera” />. When a user hits a website using this tag, he or she currently will see a live video preview and a “take photo” button. When the user clicks the button, the photo is grabbed from the camera and shown to the user in the image element. The image element and video element are in a deck element so only one is shown at a time. After the photo is taken, there is a button that reads “Take another photo,” in case the user doesn’t like the one they just took. Once the user is satisfied, this element works like any other form element and the file can be uploaded to a web service.
After talking to a few people this should actually be bound to <input type=”file” accept=”image/png”/>. Also, it needs some UI design both for what it looks like in content and for a configuration dialog. Finally, we’ll need to think about security and make sure no one can snap a photo of you when you’re not looking your best.
I kinda like having an input type="camera" myself, to be more explicit. It would be cool if you can get access to the image as data (e.g. the value is data:......). I love it.
One of the nice performance features in Google Chrome is the DNS pre-resolving technique that asynchronously does DNS lookups to seed the cache, at appropriate times. For example, based on links in a page, search suggestions, your favourite end points at startup.
The article goes into the details, and this is a long running discussion.
This Simple Failover article (PDF) talks about how DNS servers cache lookups at the various levels. The Operating System itself does some caching, proxies can do more, and applications such as browsers also cache even more:
It has been suggested that some ISPs configure their DNS servers to cache all DNS records for a minimum period (such as 60 minutes) in an attempt to reduce DNS network traffic.
This may have been the case in the past, but this does not appear to be very common today, probably because more and more web sites and Internet services depend on quick updates to DNS records.
DNS network packets are extremely compact and take up very little bandwidth compared to everything else we send across the Internet, so this is not a good place to look for bandwidth savings anyway.
“www.cnn.com” is one example of a well-known larger web site, which depends on low TTL values to enable quick changes to their web site (they currently use DNS TTL values of 5 minutes). Also, many small web-sites today depend on low TTL values because they run on ADSL or cable connections with dynamic IP addresses, and therefore require frequent DNS updates (when their IP address changes)
Windows
Microsoft Windows 2000 and later includes a DNS cache - the “DNS Client” service. You can display the contents of this DNS cache by typing “IPCONFIG /displaydns” at a command prompt, or clear it by typing “IPCONFIG /flushdns”. This DNS cache honors TTLs as described earlier in this document, and so this does not cause any caching beyond the original TTL.
Browsers
Internet Explorer 4, 5, and 7 by default caches all DNS record for a period of 30 minutes no matter what the TTL value is. This means that there is up to a 30-minute delay before they will discover DNS
changes.
This of course only affects visitors who have visited the web site immediately before a DNS update. New visitors or return visitors who closed their browser or waited more than 30 minutes since their last visit are not affected.
It is possible to adjust the length of time I.E. caches DNS records by updating a registry setting on the client machine. But this is of course only practical in an intranet scenario.
Internet Explorer v. 6 does not cache DNS A-record responses. It only caches DNS CNAME-record responses. Simple Failover only uses DNS A-records. This means that this browser version practically discover DNS changes made by Simple Failover instantly.
All versions of the Firefox and Mozilla/Netscape browsers since mid 2004 by default cache all DNS records for 1 minute no matter what the TTL value is. This means that they will discover DNS changes within one minute. Earlier versions of Mozilla/Netscape browsers cache all DNS records for 15 minutes no matter what the TTL value is.
-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */
This function simply moves elements around by the specified offset. For example, a text element with -moz-transform: translate(100px); will appear 100 pixels downward and to the right of where it normally would have been displayed. Of course, there are more functions than just translate. For example, there’s rotate, which lets you rotate an element by a specified number of degrees; scale, which scales elements by arbitrary dimensions along each axis; skew, which performs skews along the X and Y axes; and matrix, for arbitrary matrix transformations. There are also simple versions of these like skewx and scaley which allow for simpler syntax in some cases.
It will be interesting to see what uses developers find for CSS transforms. Much of the functionality once reserved for plugins can now be directly integrated into CSS and Javascript, which hopefully will help web developers create more graphically exciting pages. We also look forward to rapid standardization of this property now that there are two implementations.
"Steve, have you done a performance analysis on Google Chrome?"
Steve Souders did one better. Rather than just running some tests, he wrote a UA Profiler that allowed him to point a browser and let it roll through the tests:
UA Profiler looks at browser characteristics that make pages load faster, such as downloading scripts without blocking, max number of open connections, and support for “data:” urls. The tests run automatically - all you have to do is navigate to the test page from any browser with JavaScript support. The results are available to everyone, regardless of whether you’ve run the tests. See the FAQ for a description of each test and my list of caveats (additional tests that are needed, limited browser detection, etc.). Here’s the overall scores for some popular browsers.
Browser
UA Profiler
Score
Chrome
8/11
Firefox 2
7/11
Firefox 3
8/11
IE 6,7
4/11
IE 8
7/11
Opera 9.5
5/11
Safari 526
8/11
Getting back to where I started, let’s look at Chrome’s performance profile. It’s nice to see that Chrome is at the top right out of the shoot, having 8 of the 11 performance attributes tested, tied with Firefox 3 and Safari 526. The three performance features Chrome is missing are loading scripts and other resources in parallel, not blocking downloads when a stylesheet is followed by an inline script, and support for prefetch links. Looking at the Chrome user agent string we can see it’s based on Safari 525. If Chrome incorporates Safari 526 improvements, it’ll fix the most important performance trait - loading scripts in parallel. The detailed results show that Chrome has one improvement over Safari: caching redirects that have an expiration date in the future.
Steve is keen to add more tests, so what would you like to see? I think that there is room to tests for non-performance related features too. For example, tests such as "does the browser support postMessage" would be nice to see. There are a bunch of "is there window.Foo" at the shallow level, and then going deeper. CSS and selector tests could be added too.
WebKit gets all of the love these days. It's the skinny little brother that gets all of the hot dates. It is easy to think that Gecko is complex, but there is nuance to the tale, and Ars brings that nuance.
After explaining the strengths of WebKit, and the history of Gecko, they move on to notice how much of Gecko has changed:
From a technical perspective, Gecko is now very solid and no longer lags behind WebKit. A testament to the rate at which Gecko has been improving is its newfound viability in the mobile space, where it was practically considered a nonstarter not too long ago. Mozilla clearly has the resources, developer expertise, and community support to take Gecko anywhere that WebKit can go.
We asked Mike Shaver, who is now Mozilla's VP of engineering, to comment on how he views the Gecko/WebKit dichotomy today and why he believes Gecko is still important.
"I have a lot of respect for the WebKit guys, and for the work they've done," he told us in an e-mail. "The web is better because they're around and pushing hard, and Mozilla itself is better from the competitive push as well as cooperation ranging from new web standards to plugin interfaces to the nerdiest of implementation discussions."
Although he respects the technical achievements of WebKit, he believes that the WebKit development model and fragmentation in the WebKit ecosystem would create serious challenges that make it unsuitable for Firefox.
"We're getting a ton of value out of a unified engine for all our projects, from desktop to device and xulrunner to Thunderbird. If you look at the WebKit landscape right now, you see a lot of different projects there and it's not clear how or if they'll converge," he wrote. "We'd obviously need to hack WebKit pretty hard to adapt it to our needs, and it's not likely that adding another fast-moving variant to that mix would be helpful to anyone, least of all WebKit! We learned about fork maintenance and integration the hard way (and had to learn it a couple of times, to be honest), so that's not trouble that we want to borrow."
I admit that I used to think it would be good for Mozilla to get behind WebKit, and port XUL on top of it. With Firefox 3 they proved that they can change code under the hood and be productive. Having the two systems enables competition, and can only be a good thing for the Web right now.
One example of Mozilla moving faster these days is the Firefox 3.1 alpha launch which has Gecko 1.9.1 and the following features:
There have been some clever tricks to create new custom tags in Internet Explorer, such as the createElement trick. However, I never realized that Internet Explorer itself provides a facility to define new tags in the markup and have them styled, since Internet Explorer 5!
Some details from the MSDN documentation on this feature, titled "Using Custom Tags In Internet Explorer". The trick lies in making sure you namespace things. For example, in the MSDN docs for this feature the example of creating a new JUSTIFY tag is given:
<HTML XMLNS:MY>
<MY:JUSTIFY>
This paragraph demonstrates sample
usage of the custom MY:JUSTIFY tag in a document.
By wrapping the paragraph in start and end
MY:JUSTIFY tags, the contained
text is justified within the specified width. Try
resizing the window to verify that the
content is justified within a 500-pixel width.
And don't forget to right-click anywhere on the
window and "View Source".
</MY:JUSTIFY>
The docs then go on to discuss applying an Internet Explorer 'behavior' to this custom element to give it expanded abilities:
Custom tags become much more interesting when applied with a DHTML behavior. Introduction to DHTML Behaviors (or behaviors) are applied to elements on a page, the same way styles are, using cascading style sheets (CSS) attributes. More specifically, the proposed CSS behavior attribute allows a Web author to specify the location of the behavior and apply that behavior to an element on a page.
Using DHTML in Internet Explorer 4.0.0, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. Beginning with Internet Explorer 5, this functionality can be encapsulated in a behavior, applied to a custom <InetSDK:FLY> tag, and wrapped around blocks of text on a page. This can be applied to cause text to fly from various directions.
I'm going to do more testing on this functionality today to see how deep it goes, but if true it makes it easier to create browser shims for Internet Explorer for things like SVG, MathML, etc., including HTML 5 (if we namespace the HTML 5 elements, required to get this to work).
The reason I'm looking for an alternative to the createElement trick is I've found that it doesn't work with nested custom tags, which limits its usefulness. For example, I've found the following to not enter the DOM correctly:
It is really exciting to see the level of pace that browsers have been setting recently, especially with respect to performance.
I have been able to keep in sync with Google Chrome the new browser, and Chromium, the open source code-base it comes from. There are a couple of innovations that have been great to see such as the multiple process model for tabs and windows, the unified tab and search functionality, and at the core, V8.
V8 is the super-speedy JavaScript VM by Lars Bak of Sun HotSpot fame. When you run JavaScript benchmarks on this puppy, you see very speedy responses indeed. The V8 part of the comic says it well:
The breakthrough of having hidden classes to look at structures and work out the shared information (e.g. object Foo looks like a Person). Once you have that data, you can optimize in the same way you would class systems. V8 improvements consist of:
Compiler: Instead of using interpretation, JavaScript gets compiled down to native code
Inline caching: Optimize for accessing, and function calling
Very efficient memory management system
What version of JavaScript? "V8 implements ECMAScript as specified in ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5 (Leopard), and Linux systems that use IA-32 or ARM processors."
Some of the core technology is also exciting to geeks. For example, as this code is operating system neutral we use the Skia Graphic Library (SGL) used by the Android team.
What about the process manager? John Resig has interesting thoughts on that with the rub: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."
This is all great to see. Not only is this just the beginning for Google Chrome, Chromium, and V8 (I am dying for a Mac version!), but the other browsers are keeping pace too. The end result is a better Web for users, and a higher quality of product for developers to build against!
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.
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:
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.
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.
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.
