Programatori.info

web programming blog

Archive for category Browsers

YUI 3.2.0 preview release 1 – touch events support, transitions and browser-specific loading

Jul 27

Posted by Chris Heilmann in Browsers, CSS, Front Page, JavaScript, Library, WEB 2.0, YUI, Yahoo!, preview | No Comments

Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious:

So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:

The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.

There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.

Firefox 4 with lots of speed improvements and inline SVG

Jul 1

Posted by Chris Heilmann in Browsers, Firefox, Front Page, Mozilla, SVG, WEB 2.0, css3, html5 | No Comments

Mozilla went to London, England yesterday night to give a workshop about Mozilla Add-Ons and show some of the cool new stuff coming in Firefox 4.

Probably the most impressive thing (next to the new Add-Ons Builder based on Bespin) was the upcoming Features of Firefox 4:

  • HTML5 Video display
  • Painting with Canvas
  • Image manipulation with Canvas – pixel testing, face detection with opencivitas
  • Green screen technologies in images and video by detecting pixel colours.
  • HTML5 embedded inside SVG (yes!)
  • SVG as an IMG
  • SVG as a CSS background
  • SVG filter/mask/clip
  • SVG animations
  • Inline SVG inside HTML5
  • CSS3 (selectors, @font-face, 2D Transforms, Transitions, Shadow, Gradients ,calculations – calc(2em-10px) )
  • APIs: Geolocation, Offline (IndexDB, localStorage, AppCache, FileAPI – binary content of a file input, file drag and drop, web workers, websockets)
  • Websockets controller running the presentation from the mobile.
  • WebGL

They proved some of the points with demos:

CSS3 filters and SVG masking on HTML5 Video:

Highly interactive video interface with SVG masking and transitions:

WebGL in Firefox 4 and on Android:

After this, Tristan Nitot covered some of the other features of Firefox 4, especially the upcoming speed improvements:

As to upcoming features to the core of Firefox, we heard about:

  • TraceMonkey (a new Javascript engine)
  • Lazy Frame Construction
  • Reducing I/O from the main thread
  • Improved startup Time
  • Hardware accelleration
  • GPU text/graphics/video rendering
  • Using GPU for text rendering
  • JavaScript JIT (JaegerMonkey)
  • HTML5 parser running own thread
  • slicker interface
  • no more modal dialogs
  • no startup interuptions
  • updates in the background

For an in-depth report on all the things shown, check out this live blog post.

The death of the pixel as we know it; The new DPI web

Jun 30

Posted by Dion Almaer in Browsers, Front Page, WEB 2.0 | No Comments

The Web used to be so simple. Browser request goes to server, where you do some work, and return some HTML. Then we got Ajax and finally web apps could have some semblance of UI responsiveness. Now we have richer HTML5 technologies to change expectations of our users once again.

The Web is getting some new DPI love, and the new iPhone 4 display personifies this fact. The new display is fantastic for the consumer, and an opportunity for the design enlightened to build truly beautiful web sites. There is a big difference:

However, how do we as developers deal with this new world?

Aral Balkan has a nice post that goes into detail on the new opportunity and shares samples and ideas.

As with so many things on the Web, some of this has been thought of a loooong time ago. Dave Hyatt wrote about this back in 2006.

Walt Dickinson put together a guide to the retina display and using CSS3 media queries:

PLAIN TEXT
CSS:
<link rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>
 

Aral explains that "in the Retina-specific CSS, he loads in 32x32 icons as background images and specifies their dimensions in CSS pixels as 16x16 using the background-size CSS property."

It is interesting to see a device pixel ratio used rather than specifying a DPI itself.

What else can be done to help folks in this new world?

Aral talks about how the browser could natively help via convention:

I'd like to suggest that browsers adopt the same naming convention that Cocoa Touch uses to find and load high-DPI versions of image and video assets. That is, if I embed an image using the following code…

PLAIN TEXT
HTML:
<img src="flower.jpg" alt="A beautiful rose"/>
 

… it should load in flower.jpg when the device-pixel-ratio is 1 but it should attempt to find an image called flower@2x.jpg at the same relative path if device-pixel-ratio is 2 (and so on, for higher pixel-ratios), falling back to the original graphic if it can't find a high-resolution version.

(And the same convention could be used to load video assets.)

Maybe there are server side techniques that could be put in place to automatically serve up the most optimized image for a given DPI. This would stop a bunch of 404s, but requires more work on the part of the server monkey.

This is good news for SVG and libraries like Raphael, who are well suited for scaling. When playing with an iPhone 4 it was amazing how quickly you noticed the bitmaps that were too low res... they stick out like a sore thumb. Expectations have changed.

What else can we do?

IE9: Big leap forward, and how we can help the Microsoft momentum

Jun 29

Posted by Dion Almaer in Browsers, Front Page, IE, WEB 2.0 | 1 Comment

Microsoft continues to impress with its developer preview releases for IE9. They went from a laggard in both performance and Web standards, to regrouping and doing some fantastic work in both regards.

The honourable PPK has detailed the leap forward with CSS (in between watching his Dutch team do well in the World Cup. Not that I am friggin jealous ;)

The sea of green on the CSS compat tables is fantastic news for the Web:

More on IE9 and CSS from PPK:

IE9 promises to be an excellent browser. Its CSS support is now at par with that of the other browsers — although each browser still has its specific areas where it performs less. But we cannot in good faith say that IE is behind the others any more.

There are only a very few declarations in my test that IE9 does not support. CSS columns, gradients, text-shadow, resize, and text-stroke are the only ones, and the latter two are WebKit-only.

Even better news: Microsoft’s filters seem to have just disappeared from IE9. It supports normal opacity; no more filters required. Also, the gradient filter is gone, leaving IE (temporarily?) not supporting it.

Another golden oldie that got dropped is cursor: hand, the MS proprietary alternative to cursor: pointer. That’s not really important in practice (IE6 already supported both syntaxes), but it’s a powerful symbol of the changes that the IE team has wrought.

With so much excellence around I was almost glad when I found one single bug: IE9 doesn’t handle white-space: pre-line right. This bug will be fixed, though. It’s typically a minor point that crops up in a beta and is removed from the final product.

And, it isn't just CSS that is turning green. Kangax does a fantastic job at looking at JScript and the DOM. Not only does he show the good, but also the areas that still need improvement such as:

Unfortunately, the entire host objects infrastructure still looks very similar to the one from IE8. Host objects don’t inherit from Object.prototype, don’t report proper typeof, and don’t even have basic properties like “length” or “prototype”, which all function objects must have.

Kangax is doing a lot of good here. The more tests and call outs on what IE needs to do to be standards compliant the better. With the new rate of progress from the IE team, it isn't like the old days where you thought you were talking to deaf ears. Microsoft is listening, and even better than that, they are doing. Now is the time to give them as much info as we can.

What would you like to see?

IE9 supports Canvas…. hardware accelerated!

Jun 24

Posted by Dion Almaer in Browsers, Canvas, Front Page, IE, WEB 2.0 | No Comments

Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release:

With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with where we see the web heading. Many web developers have asked us to support this part of HTML5 and we definitely took this feedback into account as we prioritized our work.

Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. Hardware accelerated canvas support in IE9 illustrates the power of native HTML5 in a browser. We’ve rebuilt the browser to use the power of your whole PC to browse the web. These extensive changes to IE9 mean websites can now take advantage of all the hardware innovation in the PC industry.

Preview 3 completes the media landscape for modern websites with hardware accelerated video, audio, and canvas. Developers now have a comprehensive platform to build hardware accelerated HTML5 applications. This is the first browser that uses hardware acceleration for everything on the web page, on by default, available today for developers to start using for their modern site development.

The third platform preview continues to support more of DOM and CSS3 standards that developers want. Examples here include DOM Traversal, full DOM L2 and L3 events, getComputedStyle from DOM Style, CSS3 Values and Units, and CSS3 multiple backgrounds.

Also included in the third platform preview is support for using the Web Open Font Format (WOFF) through CSS3 font face.

Oh, and Acid3 is coming along too..... as well as a lot of performance improvements.

Congrats to the IE team.

IE9 supports Canvas…. hardware accelerated!

Jun 24

Posted by Dion Almaer in Browsers, Canvas, Front Page, IE, WEB 2.0 | No Comments

Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release:

With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with where we see the web heading. Many web developers have asked us to support this part of HTML5 and we definitely took this feedback into account as we prioritized our work.

Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. Hardware accelerated canvas support in IE9 illustrates the power of native HTML5 in a browser. We’ve rebuilt the browser to use the power of your whole PC to browse the web. These extensive changes to IE9 mean websites can now take advantage of all the hardware innovation in the PC industry.

Preview 3 completes the media landscape for modern websites with hardware accelerated video, audio, and canvas. Developers now have a comprehensive platform to build hardware accelerated HTML5 applications. This is the first browser that uses hardware acceleration for everything on the web page, on by default, available today for developers to start using for their modern site development.

The third platform preview continues to support more of DOM and CSS3 standards that developers want. Examples here include DOM Traversal, full DOM L2 and L3 events, getComputedStyle from DOM Style, CSS3 Values and Units, and CSS3 multiple backgrounds.

Also included in the third platform preview is support for using the Web Open Font Format (WOFF) through CSS3 font face.

Oh, and Acid3 is coming along too….. as well as a lot of performance improvements.

Congrats to the IE team.

HTML5Rocks.com: Google DevRel shares the love

Jun 22

Posted by Dion Almaer in Browsers, CSS, Front Page, HTML, WEB 2.0 | No Comments

The Chrome and HTML DevRel team at Google have released a new portal, HTML5 Rocks, that packages together some of the great resources available on HTML5 and the renaissance of browsers.

Whether it be references on what you can do, to readiness to shims to get use features now.

Beyond the resources, there is the killer HTML5 Slide Presentation and interactive playground.

A lot of nice stuff, all in one place. This is the first release, and we are sure to see a lot of additions coming soon. What would you like to see?

Studying perceived performance of Firefox and Chrome

Jun 21

Posted by Dion Almaer in Browsers, Front Page, Usability, WEB 2.0 | No Comments

“A man's got to do what a man's got to do.” said the cowboy John Wayne. Mozilla's new intern with the same name knows that Mozilla needs to do... and it needs to do performance. It isn't just about JavaScript performance though, the battle for the hearts and minds is perceived performance. This is a tough game for Mozilla as the average user giving Chrome a shot is doing so on a fresh browser with no history, bookmarks, or add-ons. If you download a fresh Firefox nightly you may be surprised at how fast it is!

John has been doing some analysis comparing the perceived performance compared to Chrome:

and came up with some recommended actions for the team:

  • With just a few changes in the Firefox start-up process, we could greatly enhance the feeling of Firefox’s speed. The changes listed below are recommendations to help better the overall Firefox experience.
  • Draw the OS spinner icon as little as possible, but one solid break isn’t bad and might be better than one really long spinner.
  • Draw the browser chrome while the window is being animated (drawn) to size. So that most of the drawing happens simultaneously rather than sequentially.
  • Make a new ‘website loading’ icon with less visual weight that animates faster but is slightly larger (would allow a user to ‘see’ the faster animation).
  • ‘Lazy’ load tabs that are being restored (already being talked about).
  • Load upgrades and add-on updates upon browser close, not browser start.
  • Delay loading the website’s title until the website is ready for interaction.

Google Chrome Frame Gets Beta Love

Jun 9

Posted by admin in Browsers, Chrome Frame, Front Page, Google, WEB 2.0 | Comments off

*thump*. That is the sound of Google Chrome Frame getting a beta tag on it with a new version that comes up to Chrome 5 levels:

Instead of adding new bells and whistles, we've fixed more than 200 bugs to make integration with Internet Explorer seamless while improving security, stability, and performance. For example, we’ve improved our handling of Internet Explorer’s InPrivate browsing, cache clearing, and cookie blocking. All of the enhancements and features of Google Chrome 5.0 are available in Google Chrome Frame too, including HTML5 audio and video, canvas, geolocation, workers, and databases.

As we've worked on these improvements, we’ve been excited to see sites adopting Google Chrome Frame, including Meebo and all the blogs hosted by WordPress. In addition to our launch partner Google Wave, some other Google properties, including Orkut and YouTube are also relying on Google Chrome Frame to deliver HTML5 experiences to millions of users.

For those of you who want to develop HTML5 applications and deploy them broadly, we encourage you to give Google Chrome Frame a try. Existing users will be auto-updated to the beta, so if you downloaded Google Chrome Frame before, you’ll automatically get the new version. We’re also creating a new dev channel release, where you can try out the cutting-edge features we’re developing. For information on getting started with Google Chrome Frame, our project documentation is the place to start.

Alex gave a talk on how you can sprinkle in the Chrome Frame love, and start using the HTML5 goodness of video, svg, canvas, etc today!

We hear cries of the end is near!, and now you have a new push. Take a breath and spend the IE6 cycles on building amazing Web applications. So, CFInstall.check({..}) away! :)

Alex has a post on the beta itself:

In some ways it’s a strange product; it’s working best when you notice it least. As a developer, you shouldn’t have to think much harder about it than either to include the header or meta tag or to include a couple of lines of script to prompt users to install the plugin — a process which notably doesn’t require a restart and doesn’t even take users off of your site. There’s no new tool to learn, no new language you have to wrap your head around…in fact, the hardest part might just be putting down all the habits we’ve collected for catering to legacy browsers.

As I’ve begun to build exclusively to modern browsers, the experience of concerted un-learning of hacks and the ability to write directly to the platform again, sans toolkit, has been eye opening. Yes, there’s still a lot that can be improved in DOM, CSS, and HTML, but things are moving, and the tools we need now aren’t the tools we have today. Better yet, there’s every indication that things are progressing fast enough that instead of building tools to bring up the rear, we’ll be building them to shield ourselves from the ferocious pace of improvement should we need them at all.

If you’re starting a new project today, I encourage you to prototype to HTML5 and modern features and then think hard about what you’re building and for whom. Do these apps really need to run on legacy browsers? Why not just use GCF to make that pain and expense go away. Once you’ve experienced how good modern web development can be — how rich and fast the apps you can deliver are — I’m convinced that you’ll find it hard to go back. The rich, open, interoperable web is the platform of the future, and I couldn’t be happier that GCF is going to help deliver that future.

Safari 5: Features, Performance, Standards

Jun 8

Posted by admin in Browsers, Front Page, WEB 2.0, WebKit | Comments off

Safari 5 got out of the gate a touch early as the PR team shot their new release out before anything else was out there:

“Safari continues to lead the pack in performance, innovation and standards support,” said Philip Schiller, Apple’s senior vice president of Worldwide Product Marketing. “Safari now runs on over 200 million devices worldwide and its open source WebKit engine runs on over 500 million devices.”

Safari Reader makes it easy to read single and multipage articles on the web by presenting them in a new, scrollable view without any additional content or clutter. When Safari 5 detects an article, users can click on the Reader icon in the Smart Address Field to display the entire article for clear, uninterrupted reading with options to enlarge, print or send via email.

Powered by the Nitro JavaScript engine, Safari 5 on the Mac runs JavaScript 30 percent faster than Safari 4, three percent faster than Chrome 5.0, and over twice as fast as Firefox 3.6.* Safari 5 loads new webpages faster using Domain Name System (DNS) prefetching, and improves the caching of previously viewed pages to return to them more quickly.

Safari 5 adds more than a dozen powerful HTML5 features that allow web developers to create media-rich experiences, including full screen playback and closed captions for HTML5 video. Other new HTML5 features in Safari 5 include HTML5 Geolocation, HTML5 sectioning elements, HTML5 draggable attribute, HTML5 forms validation, HTML5 Ruby, HTML5 AJAX History, EventSource and WebSocket.

The new, free Safari Developer Program allows developers to customize and enhance Safari 5 with extensions based on standard web technologies like HTML5, CSS3 and JavaScript. The Extension Builder, new in Safari 5, simplifies the development, installation and packaging of extensions. For enhanced security and stability, Safari Extensions are sandboxed, signed with a digital certificate from Apple and run solely in the browser.

Some great features in there. Let's get into some details:

Performance

Sam Pullara quickly ran Sun Spider on Chrome 6.0.422.0 and Safari 5 and the result is very close to a dead heat:

Safari 5 Total:         279.2ms +/- 1.9%     | Chrome 6 Total:      274.6ms +/- 6.2%
-------------------------------------------- | --------------------------------------------
  3d:                    36.0ms +/- 2.4%     |   3d:                   43.6ms +/- 18.0%
    cube:                12.8ms +/- 4.3%     |     cube:               16.0ms +/- 11.0%
    morph:               10.6ms +/- 6.4%     |     morph:              14.6ms +/- 32.2%
    raytrace:            12.6ms +/- 5.4%     |     raytrace:           13.0ms +/- 11.7%
                                             |
  access:                32.2ms +/- 5.0%     |   access:               30.6ms +/- 11.0%
    binary-trees:         5.4ms +/- 12.6%    |     binary-trees:        1.4ms +/- 48.6%
    fannkuch:            12.8ms +/- 4.3%     |     fannkuch:           12.2ms +/- 4.6%
    nbody:                8.6ms +/- 7.9%     |     nbody:              13.8ms +/- 17.3%
    nsieve:               5.4ms +/- 20.6%    |     nsieve:              3.2ms +/- 17.4%
                                             |
  bitops:                17.6ms +/- 13.8%    |   bitops:               22.6ms +/- 6.3%
    3bit-bits-in-byte:    2.4ms +/- 28.4%    |     3bit-bits-in-byte:   1.6ms +/- 42.6%
    bits-in-byte:         5.2ms +/- 10.7%    |     bits-in-byte:        5.8ms +/- 9.6%
    bitwise-and:          4.0ms +/- 69.5%    |     bitwise-and:         7.0ms +/- 0.0%
    nsieve-bits:          6.0ms +/- 0.0%     |     nsieve-bits:         8.2ms +/- 6.8%
                                             |
  controlflow:            2.8ms +/- 19.9%    |   controlflow:           2.4ms +/- 28.4%
    recursive:            2.8ms +/- 19.9%    |     recursive:           2.4ms +/- 28.4%
                                             |
  crypto:                16.6ms +/- 4.1%     |   crypto:               19.0ms +/- 9.3%
    aes:                  9.6ms +/- 7.1%     |     aes:                 7.6ms +/- 14.6%
    md5:                  4.0ms +/- 0.0%     |     md5:                 5.6ms +/- 12.2%
    sha1:                 3.0ms +/- 0.0%     |     sha1:                5.8ms +/- 9.6%
                                             |
  date:                  34.6ms +/- 2.0%     |   date:                 28.2ms +/- 7.2%
    format-tofte:        20.0ms +/- 0.0%     |     format-tofte:       13.4ms +/- 8.3%
    format-xparb:        14.6ms +/- 4.7%     |     format-xparb:       14.8ms +/- 7.0%
                                             |
  math:                  26.2ms +/- 4.0%     |   math:                 29.4ms +/- 8.8%
    cordic:               7.6ms +/- 9.0%     |     cordic:              9.4ms +/- 25.8%
    partial-sums:        13.0ms +/- 0.0%     |     partial-sums:       15.2ms +/- 10.7%
    spectral-norm:        5.6ms +/- 12.2%    |     spectral-norm:       4.8ms +/- 11.6%
                                             |
  regexp:                12.8ms +/- 4.3%     |   regexp:               16.0ms +/- 0.0%
    dna:                 12.8ms +/- 4.3%     |     dna:                16.0ms +/- 0.0%
                                             |
  string:               100.4ms +/- 1.4%     |   string:               82.8ms +/- 2.0%
    base64:              11.6ms +/- 5.9%     |     base64:              6.6ms +/- 10.3%
    fasta:               14.0ms +/- 0.0%     |     fasta:              12.0ms +/- 0.0%
    tagcloud:            23.0ms +/- 0.0%     |     tagcloud:           23.8ms +/- 5.7%
    unpack-code:         35.2ms +/- 3.0%     |     unpack-code:        29.0ms +/- 0.0%
    validate-input:      16.6ms +/- 4.1%     |     validate-input:     11.4ms +/- 6.0%

Standards

Now, lets look at how they size up in BrowserScope:

Topic Chrome Safari
Security 12/13 10/13
Rich Text 129/149 129/149
Selectors API 99.3% 99.3%
Network 9/16 10/16
Acid3 100/100 100/100

Incredibly close. Not that it should be a shock, since both parties are using WebKit under the hood (although the JS engines are totally different, and many other differences!)

Extensions

Panic were up on stage showing off Code Notes, a nice example of extensions for Safari:

The Coda Notes extension is built entirely in JavaScript, HTML, and CSS; the extension bar is basically an HTML file, and the page-flip effect is accomplished using a CSS transform. We draw on a transparent canvas element injected over the target page. Live text editing is done by setting the contentEditable attribute on the body of the page, thus turning Safari into an editor.

Great to see the new extension mechanisms on the Web are all of the Web (Chrome, Safari, Jetpack). Very cool indeed.