On June 7th, Apple released an update to their web browser, Safari 5. It includes a plethora of new features for web developers, including a faster JavaScript engine, better HTML5 support, extension support, and a great Web Inspector update. We will explore what these new features mean for web developers.
1. Improved Web Inspector
A good web inspector is extremely important to most web developers. Many people still prefer Firebug, which is an extension for Firefox, but the Webkit inspector has improved dramatically in the last few years.
CSS Inspector
In Safari 5, the web inspector has an improved CSS inspector panel, which lets you jump directly to a rule definition in the source file.
DOM Inspector
The DOM inspector is much improved, now allowing you to add attributes to DOM nodes in your document, remove nodes, and edit nodes as HTML, which lets you edit the entire tag as if it was a source file.
Resource Panel
The Resources panel is also improved, letting you see all HTTP redirects, along with full header information, including the HTTP status code.
JavaScript Inspector
The JavaScript inspector now lets you disable all breakpoints with a single click, and if you hover over an element while on a breakpoint, you can see the actual object values of what you are hovering over. This will be extremely useful for debugging purposes!
Timeline Panel
Safari 5 now has a new Timeline Panel, which provides information about everything that the browser is doing while you browse. This includes loading data, parsing it, laying it out on screen, and rendering it. Very cool for working on the performance of your website or application.
Audits Panel
Another added panel is the Audits panel, which much like the popular YSlow and Google Page Speed extensions for Firebug, suggests ways for you to improve the performance and compatibility of your site.
Console
The last change to the Web Inspector is that a separate panel for the JavaScript console has been created. This is nice because it allows the console to take up the entire height of the Web Inspector rather that the small part that it used to. It is still available in the old location, however, for convienent access while looking at another panel. For more information about the updates to the Web Inspector, check out this post on the Webkit blog.
2. Better HTML5 Support
Apple touts seventeen new HTML5 features in Safari 5, and you might have heard of their HTML5 showcase that they launched last week (it really contains more CSS3 than anything else, but that seems to be getting lumped under HTML5 as well!). Apple really seems to be pushing HTML5, and Safari 5 now has a score of 136 on html5test.com which is up from 113 in the previous release. Some of the new HTML5 features contained in Safari 5 include:
- support for fullscreen video with closed captioning
- geolocation
- HTML5 AJAX History
- drag and drop
- nearly all of the HTML5 input types
- official support for the new HTML5 elements such as <article>, <header> and <footer>.
Check out the complete list below.
Features For Realtime Webapps
Safari 5 includes two new HTML5 features for realtime webapps, like Friendfeed and Twitter. WebSocket is the first, and EventSource is the second. Now that three of the major browsers, Firefox, Chrome and Safari have implemented the WebSocket spec, writing realtime webapps using something like Node.js for a backend is becoming much more feasable.
WebSocket is essentially a two-way communication channel between your webapp in the browser and the server.
Since it is two way, you could write something like a Twitter client using it, and have new Twitter messages automatically appear as they are pushed from the server, and also push new tweets up as they are written. EventSource is a one way communication mechanism which allows the server to send events to the client but not the other way around. If you want to learn more about EventSource, check out this tutorial.
3. Extension Support
Because it is written using these technologies, it will be possible for someone to write a cross platform extension development library that works across Firefox (Jetpack), Chrome, and Safari 5.
There is now extension support in Safari, and, thanks to a new tool called Extension Builder in the already useful Develop menu, you can write your own. The extensions are written using standard web technologies, including HTML, CSS, and JavaScript and the Extensions API provided by Apple. Because it is written using these technologies, it will be possible for someone to write a cross platform extension development library that works across Firefox (Jetpack), Chrome, and Safari 5. All of them use web technologies to build extensions for their browsers. For security, all extensions for Safari 5 must be cryptographically signed by Apple through their Safari Dev Center.
Later this summer, Apple will open the Safari Extensions Gallery which will give users an easy place to find an install extensions. Panic is already showing off their extension called Code Notes, which, when it comes out, will allow you to add annotations to web pages by drawing and writing text notes directly on the site. The extension will then allow you to share your annotations via email. A very cool example of what the Safari 5 extensions API is capable of.
4. Faster JavaScript Engine
It wouldn’t be a complete browser upgrade if Apple didn’t tout their 30% faster JavaScript Engine. In the SunSpider JavaScript performance test, Safari ranks similarly to Google Chrome, and is still far ahead of the latest version of Firefox. While JavaScript performance is important, the real performance bottlenecks for web applications do not lie in the raw JavaScript language performance, but in the DOM API, which is notoriously slow in all browsers. I hope more attention is payed to DOM performance in the future.
5. Safari Reader
While not specifically a web developer feature, I’m sure you read a lot of articles like this one around the web. Safari Reader is essentally a way to get all of the destractions out of your way while you read just the article. Much like the Readability bookmarklet, Safari Reader auctomatically recognizes pages with an article in them, and presents a button in the toolbar that extracts the text and images from just the article section of the page and displays them in a nice readable font. It is also very nice that you can easily email and print just the article while you are looking at the Reader view. I’m sure that I will use this a lot!
While not a major release in terms of user features, Safari 5 is a very nice release for developers. With much better HTML5 support, increased JavaScript performance, and a better Web Inspector, Safari is now my development browser of choice. What about you?