Tuesday, June 30th, 2009
Category: Browsers
, Firefox
It is great to feel the good vibes at Mozilla HQ today as we launch Firefox 3.5! It is always an interesting ride to see a browser develop, and realize how complex and large the work is.
Congrats to the browser developers out there who are working hard to make the Web better. With final versions of Firefox 3.5, Safari 4, and Chrome 2 out in the wild…. things are picking up nicely.
The Firefox 3.5 release is exciting for me because it really benefits the developers. We get Open Video, @font-face, cross site XHR, Geo Location APIs, CSS Media Queries, Native JSON, Offline support, Web Workers, and so much more.
And, the world keeps moving. I have seen some very cool things in the nightly tree, and look forward to beign around as the team works on the next great Firefox.
Updates
Steve Souders has posted on Firefox 3.5 getting 10 out of 11 in his UA Profiler tests.
Watch the downloads come in with this cool download tracker that uses Canvas and SVG, all thanks to Justin Scott. The stats so far show that if the current rate trends hold we will beat the Firefox 3.0 download day, which is a surprise to all.
Sean Martell has created a nice wallpaper and persona to commemorate!
Monday, June 29th, 2009
Category: Browsers, IE, Performance
Developers tend to tease MySpace for its look, but the insiders are incredibly impressed by some of the engineering behind the scenes (e.g. their internal monitoring tools are said to be second to none).
They have surprised us again with their new tool MSFast which is “a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages.”
The IE 8 tools are getting better, but in general no one has been able to touch Firebug (and the new WebKit Inspector improvements) but this tool is actually plugin for IE! It captures a lot:
- Measure the CPU hit and memory footprint of your pages as they render on the client’s browser
- Review screen shots of the page while it renders
- Review the rendered HTML on each point of the page’s lifecycle
- Measure and show estimates of the time it takes to render each section of the page in different connection speeds
- Validate the content of your page against a set of proven “best practice” rules of web development
Review downloaded files and show download time estimation on different bandwidths
That is some impressive data, and great to be able to test on IE where it has been SO hard to do so in the past.
Friday, June 19th, 2009
Category: Browsers
As a follow on from the recent post on Microsoft marketing for the week, a few people have given great feedback on what we actually expect from browser marketing. This is a key point that was missing in the post as it gives those watching something to understand that could make things better. This is not about Microsoft, but about all vendors. If we keep seeing claims like this then no user will be able to take anything said from vendor seriously. If everyone claims to be the “fastest browser in the world” then that claim becomes meaningless for example.
We expect that when claims are made there is a detailed rubric on the methods. You can’t just say “we are faster” for example. Right now the claims made on the IE 8 piece are so subjective that if you were in marketing you would think that you are being sneaky “we aren’t teeechnically lying!” That isn’t good enough though.
With the rubric we (developers) should be able to run the tests ourselves to make comparisons. When future browsers come out we should be able to rerun them.
Benchmarks can be gamed, but it is still hugely different that I can take something like SunSpider and run it on my SAME machine for the various browsers. The numbers won’t be the same as on your computer, but it gives me ball park and more importantly comparisons. We can argue if SunSpider actually means anything in the grand scheme of things…. but that is another story.
As a wise man said: “Tests that aren’t repeatable and claims that aren’t testable (or explained) are just lies, no matter who’s telling them.”
What would you like to see in a Bill of Browser Vendor Ethics? :)
Thursday, June 18th, 2009
Category: Browsers, IE, Microsoft
There are some good engineers working to make IE a better browser. I don’t want to belittle their work, but I couldn’t let go the recent work of various marketing groups this week.
First up, we had the the chaps from down under try to buy downloads with 10 grand, ripping into other browsers along the way…. as they use all images and no type in their lovely page. I have found Aussies to be a hilarious bunch, but not so much this time? I can see how the idea would seem good in a meeting room…..
Michael Yoshitaka Erlewine quickly realised that tengrandisburiedthere.com wasn’t taken so built his fun retort for the Mozilla community.
Then we had the new “get the facts” campaign that showed an angry “we don’t suck like you think” angle:
Lately, there’s been a lot of talk about Internet Explorer’s speed, security, and adaptability. But many of the claims are comparing older versions of Internet Explorer to competitors’ newest releases.
These pages somehow manage to claim that IE is more secure, is the only browser with privacy features, is the easiest browser to use, has great Web standards support, fantastic developer tools, is more reliable, and customizable, and on and on. They even use their monopoly baggage to claim that all of those annoying “built for IE” pages of the past make IE more “compatible”. Oh, and obviously the performance of IE 8 is vastly superior to other browsers. Sure the “benchmarks” don’t tell that story, but that isn’t what matters. Of course, anyone who has USED THE DARN BROWSERS can get a decent feeling on performance.
IE 8 is a decent browser, much better than IE 7 and before it. However, it drives me nuts to see the marketing spin and bare-faced lies that come across here. It denigrates the work that the engineers are doing.
To finish up, I feel like I have to end with the third piece on IE this week:
Tuesday, June 16th, 2009
Category: Browsers, Opera
Opera has been leading us on to a bit product launch, and it came today in the form of Opera Unite a product which extends the Opera browser to contain a Web server inside allowing you to talk P2P between browsers (via a proxy at operaunite.com).
On the one hand, skeptics have argued that this has been done before. We have things like the Plain Old Web server and P2P extensions. However, it is nice to see it packaged cleanly, and we have the advantage of more standard APIs (HTML5 APIs, Widget APIs, etc). At Mozilla (disclaimer: remember I work there ;), we also have something that overlaps with this work in Weave.
If you check out the developer primer you will quickly learn that to create a service you simply whip up some JavaScript, XML, and call it good. It is definitely interesting that the “web server” is a server side JavaScript implementation too!
John Resig noticed that from looking at the examples you miss a decent storage API:
Reading the Opera Unite primer. Opera really needs client-side SQL
I believe that there is room for the browser to do more, and to truly be your “User Agent”, thus I agree with some of the core tenants of what Opera is trying to do here. That being said, I worry that for all the talk of freedom, are we locked into Opera? :) It would be great to get this out to the community and work on getting multiple implementations and clear licensing of the protocols behind this.
What do you think?
Wednesday, June 3rd, 2009
Category: Adobe, Browsers, Debugging
We were excited to see the sneak preview of what was called Meer Meer, at the last Adobe MAX.
Today Adobe has released a preview of the newly branded Adobe BrowserLab:
BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web. Also, Adobe Dreamweaver® CS4 software users have access to additional functionality such as testing local and active content.
Once into the browser lab you put in the URL for the site that you want to check, and then you can see it loaded up on the server on various browsers:
This is a great tool. Being able to point my application and view how it looks in various browser in a nice UI is great. Doing onion peal analysis is great. A lot faster than other browser shot sites up there.
The team will be adding to the list of current browsers supported (OS: XP or OS X, Firefox 2/3, IE 6/7), for example adding IE 8, Chrome, etc. There is also a lot of room for other great features.
Here is my wish list:
- I would love to setup alerts and have the browser lab be watching over my site. Tell me when something goes wrong (e.g. difference in browsers in the onion peal of more than X pixels?)
- Open API: I would love to have Bespin able to send up its projects to BrowserLab. Opening a new window would work, and inline would be even cooler. They have integrated Dreamweaver so that it can do more than you can on the website. For example, you can interact with the pages and see the differences due to the live WebKit magic they have. I would love to see this on the website itself.
- Dreamweaver features online. Dreamweaver has a bunch of cool analytics that it runs on the codebase. I would love to see those available in BrowserLab, so it could tell me “hey, the CSS that you are using with this HTML structure causes a problem in IE 6″. Gold!
Really glad to see BrowserLab out there, and can’t wait to see progress. What would you like to see?
Tuesday, June 2nd, 2009
Category: Browsers
Asa has an updated look at the current browser stats and trends and what is probably most interesting is the image above showing the rise of IE 8. This is something to dance about, as we see the decline in IE 6.
Notice how IE 7, the browser with the most share in these stats is in the 30’s. Firefox in the 20’s. WebKit browsers in the 10’s. We are at an interesting point where everyone matters and no one rules the roost. Here’s to browser innovation in the near future, and to developers creating fantastic Web applications.
Friday, May 8th, 2009
Category: Browsers
Reposted from my personal blog
I was incredibly excited to see Dan Mills of the Weave team show off OpenID in the browser thanks to Weave. I have wanted this from long before joining Mozilla and Dan has done a great job and doing something smart to make it happen.
The key to this all is the notion of “logging into the browser.” With the Weave project this is exactly what you do. Although the first service that Weave offered was the ability to sync bookmarks, all along it has been setup for much much more, and this is a perfect example of what the integration of a browser with a service backend can mean. One thing to note is that the Weave team really cares about privacy. The way the Weave system works right now is that the server has encrypted bits that it can never look at and understand. Instead, the client itself has the private keys that it needs to do the real work of holding the data, thus the browser, which is a natural extension to yourself the user, has full control. Think about how that differs from many services up in the cloud that make a lot of money off of your data (not that making money is bad!)
Back to the point at hand. Dan shows us how, once you are logged into Weave (and thus the browser) it will watch out for input’s that match the openid spec (openid_identifier, openid_url) and replaces it with a simple button that tells you that you can just log in! With a click on the button you get logged in automatically via Weave and you are on your way. Now Ben will be able to login to the Web 2.0 Expo site with one click instead of a series of nightmare steps. I think this is a pretty big deal.
Here it is in action:
In one fell swoop we get:
- A usable login procedure that is trivial!
- We don’t have to give trust to some third party site that we are giving the keys to the treasure too. Imagine if you used OpenID to login to your bank… would you trust your OpenID provider enough for that?
- It is important to note that they also integrated the Firefox password manager into the mix. This means that you can set auto login right from the URL bar widget (with your password, as well as with OpenID!)
Of course, this is early days, as Dan says in his post
Keep in mind that this is just a prototype that we hacked together in a few of days, so there are some very rough edges. But we’re super excited about the possibilities already. When demoing it to people, they said things like “whoa! how did you do that?” and “I want this! How do I get it?”
The answer is, “soon”, or if you’re brave enough you can try it out right now by installing the latest Weave development snapshot. Please let us know what you think by posting on the Weave forum!
People and Places
Now we are getting the notion of “people” and Identity in the browser, and we also have “location” too, we are really getting somewhere. A great week!
Wednesday, April 22nd, 2009
Category: Browsers, PHP
Being able to use data: URIs to do interesting things such as inline images is incredibly useful.
IE 8 added support for data URIs but what about older versions of IE (which are still far too prevalent)?
This nice PHP script shows how you can send back data URIs for those who support it, and for older IE, use the message/rfc822 mime type that email clients often use to encode images:
PHP:
-
-
header('Content-type:message/rfc822');
-
-
MIME-Version: 1.0
-
Content-Type: multipart/related; boundary="NEXT_MHTML_DATA_PART"
-
-
--NEXT_MHTML_DATA_PART
-
Content-Location:
-
Content-Transfer-Encoding: quoted-printable
-
Content-Type: text/html; charset="utf-8"
-
-
<!-- put the HTML in here including a for loop displaying: -->
-
<div class="img" style="background-image:url(MHTML_IMG<?php echo $index?>)"></div>
-
-
--NEXT_MHTML_DATA_PART
-
Content-Location: MHTML_IMG<?php
echo $index?> <!--
for each index -->
-
Content-Transfer-Encoding: base64
-
Content-Type: image/png
-
-
<!-- the image data here -->
-
-
--NEXT_MHTML_DATA_PART
-
Content-Location: END_OF_MHTML_FILE
-
Content-Transfer-Encoding: base64
-
Content-Type: image/png
-
IE_NEED_THIS_TO_END_DATA
-
Very nice, via (@simonw) :)
Category: Browsers
(The following is repost from my personal blog).
Ian Hickson: "I expect I’ll be reverse-engineering SQLite and speccing that, if nothing better is picked first. As it is, people are starting to use the database feature in actual Web apps (e.g. mobile GMail, iirc)."
When I read that comment to Vlad's post on HTML 5 Web Storage I gulped. This would basically make SQLite the HTML 5 for storage in the browser. You would have to be a little crazy to re-write the exact semantics (including bugs) of SQLite and its dialect. What if you couldn't use the public domain code?
Gears lead out strong with making a relational database part of the toolbox for developers. It embedded its own SQLite, in fact one that was customized to have the very cool full text search ability. However, this brings up the point of "which SQLite do you standardize on?"
The beauty of using SQL and SQLite is that many developers already know it. RDBMS has been mainstream for donkey's years; we have tools to manage SQL, to view the model, and to tweak for performance. It has gone through the test of time.
However, SQL has always been at odds with many developers. Ted Neward brought up ORM as the vietnam of computer science (which is going a touch far ;). I was just lamenting with a friend at Microsoft on how developers spend 90% of their time munging data. Our life is one of transformations, and that is why I am interested in a world of JavaScript on client and server AND database. We aren't there yet, but hopefully we can make progress.
One of Vlad's main questions is "Is SQL the right API for Web developers?" and it is a valid one. I quickly found that for most of my tasks with the DB I just wanted to deal with JSON and hence created a wrapper GearsDB to let me insert/update/select/delete the database with a JSON view of the world. You probably wouldn't want to do this on large production applications for performance reasons, but it works well for me.
Now a days, we have interesting APIs such as JSONQuery which Persevere (and other databases) use. I would love to see Firefox and other browsers support something like this and let us live in JSON throughout the stack. It feels so much more Webby, and also, some of the reasons that made us stay with SQL don't matter as much in the client side world. For example, when OODBMS took off in some Enterprises, I remember having all of these Versant to Oracle exports just so people could report on the darn data. On the client the database is used for a very different reason (local storage) so lets use JSON!
That being said, at this point there are applications such as Gmail, MySpace search, Zoho, and many iPhone Web applications that use the SQL storage in browsers. In fact, if we had the API in Firefox I would have Bespin using it right now! We had a version of this that abstracted on top of stores, but it was a pain. I would love to just use HTML 5 storage and be done.
So, I think that Firefox should actually support this for practical reasons (and we have SQLite right there!) but should push JSON APIs and let developers decide. I hope that JSON wins, you? I also hope that Hixie doesn't have to spec SQLite :/
Related
It was also interesting to just read this post Abusing Web Storage via Sam Ruby:
Alberto Trivero: The aim of this white paper is to analyze security implications of the new HTML 5 client-side storage technology, showing how different attacks can be conduct in order to steal storage data in the client’s machine.
Friday, April 10th, 2009
Category: Browsers
Asa Dotzler of Mozilla has tried to compile data from a bunch of resources to create the chart above, a view of the Web over time from a browser perspective.
The first thing that really jumps out at me is that Netscape, for all its early success, was used by relatively few people. The pie was just a lot smaller at the end of the last century.
The second thing that jumps out is that the blue IE shape kinda looks like the Twitter Fail Whale :-) We just need a year or so of them actually losing users in absolute terms.
Asa quickly points out that the data may not be 100% correct, and hopefully we will see more and more stats opened up so we can clarify things, but still.... an interesting visualization.
Monday, March 30th, 2009
Category: Browsers, CSS, Performance
Nicole Sullivan has a very detailed post on reflow and repaints and how they affect performance (and also how to potentially avoid them).
What are they again?
A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color. According to Opera, repaint is expensive because the browser must verify the visibility of all other nodes in the DOM tree. A reflow is even more critical to performance because it involves changes that affect the layout of a portion of the page (or the whole page). Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.
And what are they, and how can you avoid them?
So, if they’re so awful for performance, what causes a reflow?
Unfortunately, lots of things. Among them some which are particularly relevant when writing CSS:
- Resizing the window
- Changing the font
- Adding or removing a stylesheet
- Content changes, such as a user typing text in
an input box
- Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
- Manipulating the class attribute
- A script manipulating the DOM
- Calculating offsetWidth and offsetHeight
- Setting a property of the style attribute
Mozilla article about reflows that outlines causes and when they could be reduced.
How to avoid reflows or at least minimize their impact on performance?
Note: I’m limiting myself to discussing the CSS impact of reflows, if you are a JavaScripter I’d definitely recommend reading my reflow links, there is some really good stuff there that isn’t directly related to CSS.
- Change classes on the element you wish to style (as low in the dom tree as possible)
- Avoid setting multiple inline styles
- Apply animations to elements that are position fixed or absolute
- Trade smoothness for speed
- Avoid tables for layout
- Avoid JavaScript expressions in the CSS (IE only)
Another guru that we know and love has been doing some very interesting work looking at the actual data behind all of this, and it may have some surprises. I hope to be able to post about that soon!
Wednesday, March 25th, 2009
Category: Browsers, JavaScript, Testing
John Resig is working on a new tool that tries to help us scale our JavaScript testing. When building an Ajax application, how nice would it be to have a system running tests across multiple browsers and platforms? This is necessary for anything more than a toy, especially since we have some flexible software that allows us to shoot our feet very easily indeed. We need to fix this:
All of this leads up to a new project that I'm working on: TestSwarm. Its construction is very simple. It's a dumb JavaScript client that continually pings a central server looking for more tests to run. The server collects test suites and sends them out to the respective clients.
All the test suites are collected. For example, 1 "commit" can have 10 test suites associated with it (and be distributed to a selection of browsers).
The nice thing about this construction is that it's able to work in a fault-tolerant manner. Clients can come-and-go. At any given time there might be no Firefox 2s connected, at another time there could be thirty. The jobs are queued and divvied out as the load requires it. Additionally, the client is simple enough to be able to run on mobile devices (while being completely test framework agnostic).
Here's how I envision TestSwarm working out: Open Source JavaScript libraries submit their test suite batches to the central server and users join up to help out. Library users can feel like they're participating and helping the project (which they are!) simply by keeping a couple extra browser windows open during their normal day-to-day activity.
The libraries can also push manual tests out to the users. A user will be notified when new manual tests arrive (maybe via an audible cue?) which they can then quickly run through.
All of this help from the users wouldn't be for nothing, though: There'd be high score boards keeping track of the users who participate the most and libraries could award the top participants with prizes (t-shirts, mugs, books, etc.).
The framework developers get the benefit of near-instantaneous test feedback from a seemingly-unlimited number of machines and the users get prizes, recognition, and a sense of accomplishment.
If this interests you then please sign up for the alpha.
Tuesday, March 24th, 2009
Category: Browsers, CSS, Firefox
James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.
Usage?
CSS:
-
-
background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);
-
background-repeat: repeat-y;
-
background-position: top left, top right;
-
Friday, March 20th, 2009
Category: Browsers, CSS
There are a couple of camps out there that like to argue between "let me change anything I want" and "don't give developers power as they will build crappy things."
In today's context, that would be "have you seen the crappy Flash scrollbars that are SO hard to use?"
After having to deal with this in Bespin, I am very happy to see that Dave Hyatt and co have added the ability to style scrollbars via CSS:
The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS.
CSS:
-
-
::-webkit-scrollbar {
-
width: 13px;
-
height: 13px;
-
}
-
The width and height properties on the scrollbar element indicate the width of the vertical scrollbar and the height of the horizontal scrollbar. Percentages can be specified for these values as well, in which case the scrollbar will consume that percentage of the viewport area.
A scrollbar consists of scrollbar buttons and a track. The track itself is further subdivided into track pieces and a thumb. The track pieces represent the areas above and below the thumb.
In addition the scrollbar corner can now be styled, as well as the resizer used by resizable textareas.
Here is a complete list of all the new pseudo-elements. All of these pseudo-elements must be prefixed with -webkit-.
scrollbar
scrollbar-button
scrollbar-track
scrollbar-track-piece
scrollbar-thumb
scrollbar-corner
resizer
Each of these objects can be styled with borders, shadows, background images, and so on to create completely custom scrollbars that will still honor the settings of the operating system as far as button placement and click behavior.
James Roe (in a comment) pointed to the various hacky ways in which we have had to do this in the past:
Creating out own scrollbars and messing with positioning divs begone! I can think of a couple of places that I can use this in Bespin off the top of my head.
Next Page »
