karlcow

Opening The Web one bug at a time

Subscribe to RSS feed

Vendor Extensions And Memories Shoebox

, , ,

The "memories shoebox" is the way we relate to our information in daily life. If you had the chance to have a long recorded family history, you will get a bunch of memories recorded in some artifacts such as photos kept in shoebox in the attics. Without going that far, we keep sometimes memories of our past. We put that box there in a corner of a room or on the top shelf of a closet. Dust accumulates. One day, we open the box and we enjoy again the memories.

The Web industry and the memory lane.



A while ago, in a previous job, I was interviewing a person for a Web agency. I asked that person to talk about the Web. It said something which surprised me and destabilized me.

The Web is something very ephemeral. It's good to use the things of the moment and then to pass on the next thing. Web standards are mostly meaningless.



It made me curious. I asked him to explain how was he working on a day to day basis on the Web, what kind of projects he was working on. He started to explain that in his agency. he was using

mostly Flash and/or HTML5 family technologies to create flyers, contest, product advertisement Web sites. All of these Web sites were "irrelevant" 3 to 6 months after their launch.



That was an interesting discussion which shows how some people in the industry relates to what they create online. Not everyone has a deep concern about the duration of information online. I personally think that these Web sites even promotion Web sites have historical and brand values on a long term, but that is the topic of another post. My point is that we all have very different opinions on what is our responsibility with regards to the content we create on the Web. It's why often Call To Arms to Web developers are often ineffective, because they usually only convinced the people who already friendly to your cause.

Most of the time, in Web agencies, the developers have no control at all on the way the product has been designed, its budgets, its targets. The Project Manager, the Marketing department, the clients have the control. When a site is in production, there is little chance that a developer will have the right to fix the CSS or the JS. He/She will be able to do it only and only if the project manager had the go from the client to be billed for doing it. This is the reality of our business. And it is what we often tend to forget in our Web standardista discussions.

That doesn't mean we should not evangelize the best practices to Web developers. We have a duty to do it. But we have to consider the full ecosystem when we are doing it and integrate into the discussions the business ties of it. The project manager, the client manager, etc. Without them, any ideas we come up with is doomed to fail against the giant wall of the client billing.

Opera Tools For Web Developers

, , , ...

During the lunch today, I was invited to give a Talk about Opera at my previous Work place, Phéromone, a Web agency from Montreal (Canada). The topic was very wide. I talked about a few things around what is Opera, the different products: Opera Desktop, Opera Mobile, Opera Mini and Opera TV.

I explained the diversity of market shares across countries.



But the interesting part for the Web developers is the big toolbox available for testing all kind of things. I have promised to Pheromone Web developers that I would send an email with the list of tools for helping them work. This can be useful for more people. So this blog post.

  • Dev.opera.com is the place for finding articles about the latest technologies and demos implemented in Opera and other browsers. It has also good articles for understanding peculiarities of Web development for Mobile, Opera Mini, Web TV, Web apps.
  • Opera Dragonfly is the one stop tool for debugging and developing Web on Mobile and Desktop. It has a remote debugging feature since 2008 (yes, no wire, really remote). You want to study the performances of your CSS, check the CSS Profiler? You can follow the development news about Dragonfly and participate to its development. Yeah Opensource!
  • Opera Mini simulator helps developer to understand how the Web site reacts in Opera Mini. This is a java applet on Opera Web site, but even better there is…
  • Opera Mobile Emulator that you can download on your desktop and test many predefined devices configurations or make your own custom one. No need to buy plenty of devices, just start the emulator. Remote debugging is working with the emulator, so you can inspect the DOM.
  • Opera Watir and Web Driver. These two gives what was missing to automate Web testing either through Ruby scripting or using the well known Selenium platform. The good thing about that is you can save money by removing some monkey testing and enlarge your consumer base by making the Web site more compatible across Web browsers. Both Opera Watir and Opera Web Driver is also opensource
  • Opera TV Emulator is a way to test the development of Web apps for Internet Connected TVs.


Finally another essential tool for understanding Opera platform is the Web specifications documentation on what is supported for all current and previous versions of the core engine across the products. There is a useful summary table.

Bon Courage.

Vendor extensions. Been There. Done That.

I have been reading again a few things this week:

Netscape provided extensions to HTML to please people who are used to desktop publishing software and expect similar capabilities from a browser.



Then a bit further.

These recommendations are given with the goal of producing documents that look as nice as possible in Netscape, while retaining their integrity in other browsers. Besides the obvious question of how other browsers will display the elements in question, how these elements effect the process of creating documents needs to be considered: i.e., do they make it easy to create documents that will do their job in other browsers, or do they encourage authors to create documents that will loose their headers in other documents.



and

If the goal is to create documents that won't have to be modified to be properly processed by future tools, then the answer is easy: don't use any of the NHTML extensions, and only use the most stable of the HTML3 features.



Where does it come from? From the past, exactly from 1995.

Video, Not There yet

, ,

I was reading the excellent article by Adam Curtis, WE'RE ALL IN THE SAME BOAT - AREN'T WE? giving hindsights on the cruise industry. I have removed flash from Opera a few months ago. The following is symptomatic of many Web sites you can stumble upon when you do not have flash on.




We are indeed in the same boat but the story of the video on the Web is not yet fully deployed. It will come hopefully one day, but we are not there yet.

PS: Not a reproach in any ways. Just a simple record of my user experience.

Web Conferences In French

, , ,

I'm trying to compile a list of French speaking Web conferences . You can help. Leave a comment

Je tente de compiler une liste des conférences Web utilisant le français. Laissez un commentaire.

Amérique du Nord


Canada (Québec)



Europe


Belgique



France


Voir aussi la carte des conférences Web

Suisse


Afrique


Algérie


Maroc


Sénégal


Tunisie



A working draft means experimental

, , ,

When Web developers insist on using very early implementations of Web technologies in their production site, they are confronted to possible specifications changes. IE and Mozilla are experimenting with early implementations of CSS3 features for fonts. That's very good.

Browser Support The font-feature-settings property is currently supported by Firefox 4+ and Internet Explorer 10, beginning with Preview 4. Note that because Firefox and IE implemented different versions of the draft the value syntax they accept is different. For example, enabling kerning in both browsers requires the following:

-ms-font-feature-settings: "kern" 1;  
-moz-font-feature-setting: "kern=1";



Testing and playing with them. That's very good too. Deploying them in production sites. Not yet. Flexbox is a recent example of the issues it creates when you run for interoperability and inclusive market shares.

tweetdeck for webkit… only

,

This kind of information is always infuriating for me. TweetDeck has been bought by twitter and now in their FAQ about the redesign, we can read.

On the web

You can sign up and log into TweetDeck at http://web.tweetdeck.com. The initial version is built for Webkit browsers, so Safari and Chrome are supported. Support for Firefox and IE will be added soon!



Design for the Web not for a brand. The open Web for everyone will be a lot better.



Responsive Images and Transparent Content Negotiation in HTTP

, , , ...

There are a lot of discussions around Responsive Web design. One of the issues is how to serve the most appropriate representation for a given resource. Let me clear that. For a long time we put that into our HTML.


<img src="http://example.org/pussycat" alt="Cute Cat"/>


Plenty of people are currently doing acrobatic moves to be able to deliver the right image to the right devices, screen sizes and/or bandwidth. The issue is that it is a wider discussion, which is summarized by:

What is the appropriate content I should send for this user depending on its usage context.

We tried to come up with many solutions (Bruce article is jaw-dropping) where we duplicate the number of resources we want to deal with. This issue has been solved a long time ago… It is called content-negociation. The ability to serve different representations depending on the headers sent by the client.

The issue which hindered the HTTP content-negociation for a long time is the discovery one. How do I know which are the resources available so that as a client (the user agent), I decide which one is the best for me and not only rely on what the server decides for me.

Enter the old (never implemented) Transparent Content Negotiation in HTTP which addresses exactly the discoverability issue. The specification is old and might need some love to adjust to the current Web, but the principles behind it are still clever.

It addresses the issue with



Olivier Théreaux mentioned it in the past on W3C QA blog. How does it work?

The Alternates header is a header sent by the server for this resource, I have these choices, which one do you want.

So when the user-agent requests:

<img src="http://example.org/pussycat" alt="Cute Cat"/>


The server can answer

Alternates: {"bigpussycat"  {size 1Mo} {dpi 300}},
            {"pussycat"  {size 100ko} {dpi 72}},
            {"tinypussycat" {size 10ko} {dpi 72}


The client can decide the one which is more appropriate depending on its technical circumstances: low bandwidth, small screen and/or the user choice: I want only tiny images because it is the way I like it.

For search engines and multilingual resources, it help index the Web in many languages, still keeping the site usable in a multicultural context.

Potential issues

  • HTTP Round Trip for the discoverability: Exactly like we do right now with background images for mediaqueries, we can send one the smaller images by default or having the client asking for the most optimal one through the initial headers. And then let people decide for the next ones.

Detect And Redirect Users For Mobile Development

, , , ...

I have read today this long list of tips for Mobile Development. The tip about Detect and Redirect Users is not given with enough care outlining the issues related to user agent sniffing. So I left a comment. And I thought it might be useful for more people and I need to keep some of the points I made in there for memories.

Quite a list of tips. In the section “Detect And Redirect Users”, you recommend to use WURFL. It’s a choice which seems to be easy but which is in fact hard to maintain. There is a corollary of devices databases (any of them): It will break in the future.

The reason is quite simple, it’s a hard coded database of values. Browsers implementer not only evolve their browser engines but there are ported on more and more type of devices. One day or the other, you meet something which is not in the database and the site falls apart. Basically it is very fragile and not future friendly. People behind WURFL and other dbs make a tremendous and laudable work to maintain these lists, until the day they do not. For example, one of the major issues, Opera browser has right now is because of a library which is not maintained anymore and which was used in many ASP.net powered Web sites.

So as a strategy, it is a lot better to use feature detections. Through JS APIs the Web developers can detect what is supported by the Web browser and then you send the appropriate interactions. This with a combination of mediaqueries will be a lot better.

Another point is the fallback. When developing the site, people should really have a readable fallback. Basically I encourage people to create a dumb user agent in their favorite browser and if the site fails with this dumb user agent, then there is an issue. Because it means one day or the other it will happen for a browser which was not planned.

Web sites are deployed put in production and sometimes never touched again. That would be bad to have them break because there were not planned for being future friendly.




a dirty Web of redirections

, , , ...

The Web is taking a wrong turn with all these redirections minifier tracking you along the way of your clicks. And sometimes it becomes quite insane. Following my twitter account as usual, I see a link which seemed interesting.



First issue, Twitter is using its own minifier to capture all clicks, and you do not have the choice to deactivate it. That is wrong. Let's see where do I go from there.

% curl -sI http://t.co/n3XZBLb0 

HTTP/1.1 301 Moved Permanently
Date: Thu, 01 Dec 2011 15:10:08 GMT
Server: hi
Location: http://zjb.go.ly
Cache-Control: private,max-age=300
Expires: Thu, 01 Dec 2011 15:15:08 GMT
Connection: close
Content-Type: text/html; charset=UTF-8


Ok I'm being redirected to: http://zjb.go.ly Let's check it.

curl -sI http://zjb.go.ly

HTTP/1.1 307 Temporary Redirect
Date: Thu, 01 Dec 2011 15:11:47 GMT
Server: Apache
Location: http://preview.go.ly?zjb
Cache-Control: max-age=259200
Expires: Sun, 04 Dec 2011 15:11:47 GMT
Vary: Accept-Encoding
Content-Type: text/html; charset=iso-8859-1
ACCEPT-RANGES: none


Huh yet another redirection, but notice that there is no Location header.

% curl -sI "http://preview.go.ly?zjb"
HTTP/1.1 200 OK
Date: Thu, 01 Dec 2011 15:35:59 GMT
Server: Apache
Cache-Control: max-age=259200, must-revalidate
Expires: Sun, 04 Dec 2011 15:35:59 GMT
X-DNS-Prefetch-Control: Off
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8
ACCEPT-RANGES: none


With Opera browser, I'm reaching this page which is not really encouraging for the user. Specifically the note at the bottom which says it failed.



And then in the Web page this time… It gives as the next URI, yet another URL minifier. sigh. Why so much hate?

Let's dig it!


% curl -sI http://mzl.la/rR6RFC

HTTP/1.1 301 Moved
Server: nginx
Date: Thu, 01 Dec 2011 15:10:42 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Set-Cookie: _bit=4ed798ee-002bc-02170-291cf10a;domain=.mzl.la;expires=Tue May 29 15:10:38 2012;path=/; HttpOnly
Cache-control: private; max-age=90
Location: http://hacks.mozilla.org/2011/12/state-of-the-web-apis-an-interview-with-john-hammink/
MIME-Version: 1.0
Content-Length: 178


Ah a location header which seems to make sense.

% curl -sI "http://hacks.mozilla.org/2011/12/state-of-the-web-apis-an-interview-with-john-hammink/"

HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: pm-app-generic02
Vary: Accept-Encoding
Cache-Control: max-age=60
Content-Type: text/html; charset=UTF-8
Date: Thu, 01 Dec 2011 15:39:02 GMT
X-Pingback: http://hacks.mozilla.org/xmlrpc.php
Link: <http://hacks.mozilla.org/?p=10390>; rel=shortlink
Expires: Thu, 01 Dec 2011 15:40:02 GMT
Transfer-Encoding: chunked
Connection: Keep-Alive
X-Powered-By: PHP/5.2.9
X-Cache-Info: caching



Alleluiah!

My question: Why do we put so much efforts into breaking the Web?