praktikantenblog

Disclaimer: I don't want to persuade you to change your browser, just
give you some data to work your mind with...

Try this: http://v8.googlecode.com/svn/data/benchmarks/v6/run.html
in Firefox & Chromium.
My chromium gets a score of 3306, without hanging a bit, firefox showed
me 7 warnings already, that this script was slowing it down. Also it has
become complete unresponsive, that is all other windows & tabs are
unusable, they are not even refreshed correctly on expose events from X.
Final score from firefox: 159.

Another one: http://webkit.org/perf/sunspider/sunspider.html
Chromium: 452.7ms [1]
Firefox: 2634.7ms [2]

And, yet another one (this time from mozilla):
http://krakenbenchmark.mozilla.org/
Chromium: 21484.7ms [3]
Firefox: (I killed it after 15 minutes, as it was about to kill my
system)

Chromium version: 8.0.552.237 (70801) Ubuntu 10.10
Firefox version: 3.6.13 (Ubuntu 10.10, build3)

Also, firefox's compliance with http://acid3.acidtests.org/ is 94%,
where chromium has 100%.

[1] -
http://webkit.org/perf/sunspider-0.9.1/sunspider-0.9.1/results.html?...

[2] -
http://webkit.org/perf/sunspider-0.9.1/sunspider-0.9.1/results.html?...

[3] - http://krakenbenchmark.mozilla.org/kraken-1.0/results.html?...

If you set up a layout with blueprint (and compass) you’re usually amazed about how quick everything is set up, and how good your page looks with almost no effort. But once you go into detail, and start implementing a strict design (usually based on something like a corporate identity / styleguide), you will need to overwrite the default behavior compass displays. If you don’t know how to figure out where in compass a particular css-rule is defined, this can be pretty annoying.

Let’s have a look at a simple example: You want to overwrite the color of links.

First you will optimistically add something like

a {
  color: #3f4;
}

to one of your .scss partials. You open your browser, you see no change. As you will probably use firebug, chrome, or some other browser equipped with debugging tools, you will inspect the element, and see that your color definition is there, but crossed out. This means that a prior css rule is already active, and your’s get ignored.

Now you could simply add the !important flag to your rule, and it would work out, but in css-school they taught you, that you should avoid !important wherever possible. (Why? Later, when you have more specific types of links, it will come back to you and annoy you, promised!) Luckily, your dom-inspector makes it easy to see that there is a the following rule:

body a {
color: #009;
text-decoration: underline;
}

It also says that it is in screen.css and tells you in which line to find it. Dawm you say, i didn’t add it there, but as you know that it is a generated file, and that blueprint comes with default behaviour you open up your _page.scss partial, and see something like this:

// Import the non-default scaffolding module to help us get started.
@import "blueprint/scaffolding";

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction; }

// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
@include blueprint-scaffolding("body.bp");

body { @include blueprint; }

You see the @includes in the body.bp rule definition? Right, one of this must be the troublemaker, but which? Okay, i admit in this case it’s easy to guess, but the point is:

If you have a look in to your screen.scss there’s a comment, telling you from which file it is included. It even tells you where to find it on your file system. If you use chrome, you can directly click on the line number in the inspector, and it will take you directly to this line, and you… know everything.

Great, can save some time, but still: We need to think about our own default blueprint styles!

suung@q2:~$ pstree

init─┬─apache2───5*[apache2]

     ├─chrome─┬─chrome

     │        └─23*[{chrome}]

     ├─chrome───3*[chrome───{chrome}]

     ├─cron

     ├─cupsd

     ├─2*[dbus-daemon]

     ├─dbus-launch

     ├─dnsmasq

     ├─emacs

     ├─evinced

     ├─gconfd-2

     ├─gdm───gdm─┬─Xorg

     │           └─awesome───ssh-agent

     ├─6*[getty]

     ├─gmpc

     ├─gnome-terminal─┬─2*[bash]

     │                ├─bash───pstree

     │                ├─gnome-pty-helpe

     │                └─{gnome-terminal}

     ├─gvfs-afc-volume───{gvfs-afc-volum}

     ├─gvfs-gdu-volume

     ├─gvfs-gphoto2-vo

     ├─gvfsd

     ├─gvfsd-metadata

     ├─hald─┬─hald-runner─┬─hald-addon-acpi

     │      │             ├─hald-addon-inpu

     │      │             └─2*[hald-addon-stor]

     │      └─{hald}

     ├─libvirtd───6*[{libvirtd}]

     ├─mysqld_safe─┬─logger

     │             └─mysqld───10*[{mysqld}]

     ├─ntpd

     ├─openvpn

     ├─rsyslogd───3*[{rsyslogd}]

     ├─soffice.bin───4*[{soffice.bin}]

     ├─sshd

     ├─udevd───2*[udevd]

     ├─udisks-daemon─┬─udisks-daemon

     │               └─{udisks-daemon}

     ├─xchat───{xchat}

     └─xdg-open───run-mailcap───sh───evince───{evince}