karlcow

Opening The Web one bug at a time

Archive: August 2011

What about the next lot?

Wednesday, August 24, 2011 4:19:07 PM

, , , ...

On the theme of "Do not put your flags on a shared land", Mark Nottingham makes great point about shared extensibility.

Most recently, HTML5 has defined a “web+” URI prefix to sandbox off a set of identifiers for Web applications. Again, it’s great for them, but what about for the next lot that want to put some semantic sauce into their URIs?

No comments

Optimize Favicon, Save Bandwidth

Thursday, August 11, 2011 8:08:04 PM

, , , ...

A few days ago, I tested what it meant to not have a favicon. Here are a few rules, that you should follow with regards to your favicon.

give it a URI

A file and a URI are too different things. So give your favicon a generic URI.You will be able to change the format of the file at will. Let’s say your Web site domain name is example.org and you decide to call your favicon whiz. The URI will be:

http://example.org/whiz

Then on the server side you can associate this to a specific content, be a file or a call in a DB. For example

% curl -sI http://example.org/whiz

HTTP/1.1 200 OK
Date: Thu, 11 Aug 2011 19:29:57 GMT
Server: Apache
Content-Location: favicon.png
Last-Modified: Sun, 29 Mar 2009 01:02:08 GMT
Accept-Ranges: bytes
Content-Length: 658
Content-Type: image/png

Nothing forces you to use the magical name favicon.ico for the name of your icons. You can use anything. Really. You just have to name it in your template.

<link rel="shortcut icon" href="/whiz" />

You do not want to create a favicon icon

It’s fine, you do not have to, but you absolutely need to have something return for the URI you created and send 0 bytes for it. You can for example in your filesystem, create a 0 bytes favicon file with the unix command:

touch favicon.ico

Do not forget to define the link in your template. Or you might want to configure Apache with

Redirect 404 /favicon.ico
<Location /favicon.ico>
    ErrorDocument 404 ""
</Location>

Minimize the size of your favicon

Did you try to save your favicon file as a PNG or JPG file instead of the traditional ICO. Optimize it. Even if your file is 2Ko, maybe you can get it down to 600 bytes. Just try. You will save a bit of bandwidth

Expiration date in the future

Often the server will send an Expires HTTP header, that says to the browser try again to download this resource at this date because there might be a fresher document. Well I bet you change your favicon… like never. Give it an expiry date far in the future do not be afraid to give it one or more years. We are setting it to 10 years here.

<Location /favicon.ico>
    ExpiresDefault "access plus 10 years"
</Location>

2 comments

Full Screen Mode and CSS

Wednesday, August 10, 2011 9:07:22 PM

, , ,

These last two days, I forced myself to use Opera in Full Screen mode. I want to get a precise idea of what is accessible or not when the browser chrome is not visible. I wondered then what would it mean to have a different layout if Full Screen is activated. But was that even possible?

Fortunately CSS has a specification called View Mode. It was mainly done for handling widgets or Web apps if you prefer that name. But would that work in the desktop browser?

I tried the following code in a very simple HTML page and… it worked!

.fullscreen {display: none;}    

@media screen and (view-mode: fullscreen) {
    .fullscreen {
        text-align:center;
        width: 5em;
        font-size: 3em;
        margin: 1em;
        padding: 2em;
        background-color: #F9C;
        display:block;}
}


It works on Mac OS X with Opera 11.50
It doesn't work on Safari 5 and Firefox 6

3 comments

favicon testing and HTTP 404 missing page

Monday, August 8, 2011 4:13:59 PM

, , ,

Surprised by a comment from Pascale about an article about favicon creating more traffic on web sites by downloading the 404 resource answer, when it is not defined, I wanted to test. To do that, I have decided to test it locally on my own laptop. It is quite easy and it helps to really control all aspects of the experiment. I have created a local Web server with the favicon.test.site domain name for testing a few things about favicons and browsers.

Setup

Create a directory favicon

mkdir -p ~/Sites/favicon
cd ~/Sites/favicon

Edit the serveur configuration. We put a Error 404 directive and an index file. 

mate /private/etc/apache2/extra/httpd-vhosts.conf

Note that the path is dependent of my system here. 

<VirtualHost *:80>
    DocumentRoot "/Users/karl/Sites/favicon"
    ServerName favicon.test.site
    ErrorLog "/Users/karl/Sites/favicon/favicon-error_log"
    CustomLog "/Users/karl/Sites/favicon/favicon-access_log" combined
    ErrorDocument 404 /missing.html
    DirectoryIndex index.html
</VirtualHost>

We need to add the domain name for resolving locally.

mate /etc/hosts

127.0.0.1   favicon.test.site

We can start the Apache server

% sudo apachectl start
Password:

if your server was already running, you can do 

% sudo apachectl graceful
Password:


% ls -l .
total 0
-rw-r--r--  1 root  karl     0B  8 aoû 10:55:52 2011 favicon-access_log
-rw-r--r--  1 root  karl     0B  8 aoû 10:55:52 2011 favicon-error_log

We can create a simple index file

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>A simple page</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Testing Access to favicons

Let’s access the http://favicon.test.site/ with Opera Next 12.00 pre-alpha Révision 1020. We got in the logs

Access

127.0.0.1 - - [08/Aug/2011:11:33:36 -0400] "GET / HTTP/1.1" 200 140 "-" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"
127.0.0.1 - - [08/Aug/2011:11:33:36 -0400] "GET /favicon.ico HTTP/1.1" 404 - "http://favicon.test.site/" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"

Error

[Mon Aug 08 11:33:36 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/favicon.ico, referer: http://favicon.test.site/
[Mon Aug 08 11:33:36 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html, referer: http://favicon.test.site/

In between each test, I erase the log files and restart the server

% sudo apachectl stop
% rm -rf favicon*log
% sudo apachectl start

With Safari (WebKit) Version 5.0.5 (6533.21.1)

Access 

127.0.0.1 - - [08/Aug/2011:11:14:31 -0400] "GET / HTTP/1.1" 200 900 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
127.0.0.1 - - [08/Aug/2011:11:14:32 -0400] "GET /favicon.ico HTTP/1.1" 404 - "http://favicon.test.site/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"

Error

[Mon Aug 08 11:14:32 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/favicon.ico, referer: http://favicon.test.site/
[Mon Aug 08 11:14:32 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html, referer: http://favicon.test.site/

With firefox 4.0.1

Access

127.0.0.1 - - [08/Aug/2011:11:20:15 -0400] "GET / HTTP/1.1" 200 900 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1"

Error

No error - no request of favicon

It means that IE, WebKit and Opera will create an automatic request for your server. If the favicon doesn’t exist, it will then redirect the request to your configured 404 page. If this page is heavy, for any requests on your Web site you will pay a favicon tax.

Let’s add a favicon link in the markup with a different name ugly

<link rel="icon" href="/ugly">

This time Firefox is trying to get the favicon as we can see in the access log.

127.0.0.1 - - [08/Aug/2011:11:55:37 -0400] "GET /ugly HTTP/1.1" 404 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

And generates obviously a request to the 404 resource.

[Mon Aug 08 11:55:37 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/ugly
[Mon Aug 08 11:55:37 2011] [error] [client 127.0.0.1] File does not exist: /Users/karl/Sites/favicon/missing.html

All browsers now behave the same. Let’s try to create a 0 byte ugly favicon.

% touch ugly
% ls -l ugly 
-rw-r--r--  1 karl  karl     0B  8 aoû 11:58:54 2011 ugly

Opera 

127.0.0.1 - - [08/Aug/2011:12:01:06 -0400] "GET / HTTP/1.1" 200 175 "-" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"
127.0.0.1 - - [08/Aug/2011:12:01:06 -0400] "GET /ugly HTTP/1.1" 200 - "http://favicon.test.site/" "Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; Edition Next; fr) Presto/2.9.181 Version/12.00"

Safari

127.0.0.1 - - [08/Aug/2011:12:01:46 -0400] "GET / HTTP/1.1" 200 175 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
127.0.0.1 - - [08/Aug/2011:12:01:46 -0400] "GET /ugly HTTP/1.1" 200 - "http://favicon.test.site/" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; fr-fr) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"

Firefox

127.0.0.1 - - [08/Aug/2011:12:03:40 -0400] "GET / HTTP/1.1" 200 175 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"
127.0.0.1 - - [08/Aug/2011:12:03:40 -0400] "GET /ugly HTTP/1.1" 200 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

HTTP headers et Caching

% curl -sI http://favicon.test.site/
HTTP/1.1 200 OK
Date: Mon, 08 Aug 2011 16:04:28 GMT
Server: Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8r DAV/2
Last-Modified: Mon, 08 Aug 2011 15:55:20 GMT
ETag: "ccd9fb-af-4aa0079618a00"
Accept-Ranges: bytes
Content-Length: 175
Content-Type: text/html

% curl -sI http://favicon.test.site/ugly
HTTP/1.1 200 OK
Date: Mon, 08 Aug 2011 16:05:02 GMT
Server: Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8r DAV/2
Last-Modified: Mon, 08 Aug 2011 15:58:54 GMT
ETag: "ccda9f-0-4aa008622eb80"
Accept-Ranges: bytes
Content-Type: text/plain

I made sure the ETAG and the dates were not changing at all.

Safari and Opera on a manual reload (toolbar icon) are reloading the two resources URIs and favicon with a 200. (That is bad)

Firefox just tries the index and the server replies with the right information. 304 Not Modified. Firefox doesn’t even try to request the favicon again.

127.0.0.1 - - [08/Aug/2011:12:07:31 -0400] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:5.0) Gecko/20100101 Firefox/5.0"

Conclusions

If you do not want a favicon for your Web site, you are better to create a 0 byte file or to configure your server in a way that will send back minimal HTTP headers.

I haven’t tried to see what would do browsers in face of 410 Gone for this resource. To test in the future.

No comments

Using CORS (Cross-Origin Resource Sharing) on the Web

Thursday, August 4, 2011 7:33:07 PM

, , , ...

CORS has been created for controlling access policies to resources across Web sites domains. CORS defines how browsers and servers communicate when accessing sources across origins using HTTP headers to allow both the browser and the server to know enough about each other to determine if the request or response should succeed or fail.

Two questions

  • do you use CORS on your Web site? (shoot the URI and why you are using it)
  • If you can't use it (when you need it), tell us why


Update 23 novembere 2011: CORS is coming.

11 comments

10Ko of not interoperable technologies

Thursday, August 4, 2011 12:25:48 PM

,

An Event Apart has a contest for creating a Web site which must be under 10Ko. This might help feature good ideas. There is one thing which bothers me though. The FAQ says:

Cross-browser Standards
Entries need to work equally well in IE10's latest platform preview, and latest versions of Firefox and a Webkit browser of your choice (Chrome or Safari).



It doesn't bother me that much there is not Opera in the list. Opera is yet another specific browser. Nope. It bothers me that they do not encourage full plain interoperability. I would have been appealed with:


Only use technologies implemented everywhere in browser released versions check caniuse.com/


This indeed will exclude a lot of shiny things including some of Opera, but they will be a closer of a Web developer reality.

No comments

Git Workflow with branches

Wednesday, August 3, 2011 9:54:01 PM

, ,

Mike shared a good recommendation for working together with git. Posting it here for not forgetting.


Create a new branch, and work inside of it:
$ git checkout -b new_branch


Do some work, make a handful of commits
$ git commit -am 'commit 1'
$ git commit file.whatever -m 'commit 2'


I'm done with this feature now, back to master
$ git checkout master


Merge in my branch's work--but squashing all commits from new_branch into one
$ git merge new_branch --squash


Commit all that work as a single public commit
$ git commit -am 'adding feature X, blah blah'

4 comments

3 rules of thumb for Web development

Tuesday, August 2, 2011 1:34:23 PM

, , , ...

Three simple rules of thumb for Web developers, UX people, designers:

  1. Can I bookmark this information? (stable URIs)
  2. Can I go from here to there with a click? (hyperlinks)
  3. Can I save the content locally? (open accessible formats)

With this in mind, you will avoid a lot of the main issues, we meet in "modern" Web sites.

PS: Your questions are also welcome on Web architecture for everyone

3 comments