Open Data and Licenses

To really promote open data, it is necessary to use the appropriate licence. Glen Newton looked at the licenses of different data sets published by canadian cities. The terms of the licenses are too restrictive. It is important to ensure that people will be able to use the data freely. There are many ways of achieving that. One of them is using creative commons licenses. It enables people to reuse the data in many circumstances keeping the attribution credits.

Open Data in Canada

What about Canada? Not that bad. Many initiatives push in the right direction. Governments (federal and local), cities as well as civic organizations are publishing data. Often the licenses are not the right ones, but that can be fixed.

• Info Source Canada Gov
• Open Data Edmonton
• Open Data Nanaimo
• Open Data Ottawa See also Ottawa Data – open data ottawa blog – opendata apps directory
• Open Data Toronto
• Open Data Vancouver
• Open Data Links Canada
• Open Ottawa (Civic Organization)
• Canadian Gov data by citizens
• CivicAccess

Montréal ?

And Montréal. There are whispers of interests. But I do not know of any concrete initiatives yet. Have you heard something? How do we encourage Montreal city to share the data?

Montréal has data, a lot of data. The access could be improved (RESTful API, data format) and licenses clarified.

The Story

Nicole Sullivan (@stubbornella) recently outlined the Top 5 Mistakes of Massive CSS. After a survey, Nicolle Sullivan found out that

• 42% Don’t GZIP CSS
• 44% Have more than 2 CSS external files
• 56% Serve CSS with cookies (yummy to eat, bad for static content)
• 62% Don’t minify (check out the YUI Compressor!)
• 21% Have greater than 100K of CSS

We then decided to create a service that would help Web developers fix these 5 items only. We believe in small steps.

Service and Source Code

The code is under MIT License. You are welcome to use, fork, improve, twist it. The service is online (bugs included). Any contributions to create a CSS and a design for it would be more than welcome. Do not shoot the messenger and make it better.

Banal sur le principe, cet exercice trouve sa singularité si je vous avoue qu’il est pour moi une première en matière de développement Javascript.

Fort d’une bonne demie douzaine d’années d’expertise dans le développement flash et l’utilisation de l’ActionScript, me voilà parachuté dans l’univers prototypale du JavaScript. Univers occulté par la puissance et fléxibilité de l’AS3, j’ai commencé par me procurer l’ouvrage, JavasScript : The Good Parts des éditions O’REILLY, puis décortiquer les scripts de la référence en matière de dhtml : www.dhteumeuleu.com. Remise à niveau au combien salutaire.

Ma crainte majeure, dans l’optique de l’animation, fut de disposer de l’indépendance que l’on trouve avec les MovieClip et l’ActionScript pour les balises html. Crainte très vite estompée par l’application appropriée de css.

La logique est identique à celle d’un développement flash (requête Twitter, manipulation des données, routine propre à l’application, ect …), les animations utilisent Javascript Motion Tween de Philippe Maegerman ainsi que la librairie JQuery, les css font le reste.

Il est donc facile de conclure ce billet par une note favorable, dire que le développement Javascript est accessible aux flasheurs semble un euphémisme.

Je prépare un prochain billet sur quelques travaux avec la librairie Raphael.js
Au plaisir de vous lire .

Notice anything unusual? What fascinates me is how the top third of the page mentioned locations in no less than three countries. How? Why?

Near the top-left of the page, I can see an icon depicting a Canadian flag, along with a link to the Canada-specific Yahoo! portal. What this means is that the Yahoo! system knows that I am browsing from Canada (I have been, therefore, geolocated). If you view the site from another country, chances are you will be getting a different flag and a different link. And if you view it from Spain? I do not know. When I do follow the hyperlink to Yahoo! Canada, I get a similar link to Yahoo! Quebec, and when I go to Yahoo! Quebec, I get a link to Yahoo! Canada.

Interestingly enough, one of the most common elements of personalised user experience is missing here: language selection. There is no way I can read the news from Spain in English – or indeed, in Català or Gallego. Neither do I get a « Français » link on Yahoo! Canada, or « English » on Yahoo! Quebec.

Knowing where I am, the system could assume I necessarily want to view local content in my local language and therefore redirect me to the Canadian/English portal. Fortunately, it does not, and lets me browse news from Spain as much as I like, and limits the effect of geolocation to a subtle but clear hint that local content is also available.

How do they do it? Most likely, the IP address of the machine I used to access the site was compared against a GeoIP database such as this one or that one. Note that, unlike in many mobile applications, the IP-to-location translation is done automatically, without ever prompting the user for her agreement.

Next in our exploration of the personalisation elements is the page-wide bar of text links, calls for action and teaser questions serving a single purpose: convert the visitor into a user, either by registering, or by logging into an existing account.

Notice how the bar employs about about every trick know to web designers to entice us to log in: give regular users a quick link to their well-known personal space; showcase some of the added value gained through registration (preview of my inbox, directly in my news portal); comfort the potentially puzzled new visitor (New here?) and tease the social fiber (What are you doing? – obviously a go at copying the now-abandoned twitter tagline?).

The most surprising element comes last. How come, given that I am not logged into Yahoo!’s system, I am shown a weather widget for the city of Tokyo, Japan? I could have understood if it were Madrid (local to the portal, with an educated guess about which city I may be interested in) or Montréal (through geolocation) – but Why Tokyo? And how?

How do they do it? I quickly validated my initial hunch: Yahoo achieved this through the use of cookies – although other client storage options such as the localstorage in html5 would have been just as valid. My problem here, however, is that:

• The cookies are opaque – even with a cookie browser (most browsers with developer extension offers one) I would hardly be able to know which cookie was telling Yahoo! thay my preferred location was Tokyo. I had to delete cookies, one by one, until the weather widget changed to a geolocated default of Montreal.
• I cannot tell how and when this cookie was set in my system. Sure, I could set my browser to have me validate any cookie sites want to store, but given how cookies are entirely opaque, how would I know the meaning and consequences of allowing Yahoo (of flickr, or any site in the Yahoo ecosystem) to store a cookie that sets key T to …CAuNRMqKiCOsvekk….

And there’s more… All these modes of personalisation have been enabled without me even logging into the system. Imagine the many personalised features that can be implemented for recurrent, identified users: social filtering (content that my friends like, for instance), content adapted to my choices or patterns of use (recommendations for you), and much more. Has any content-heavy site ever tried to recommend their users items that they are unlikely to « like », or at least that they are likely to be surprised or challenged by?

Cookies in webkit

For RDS, we had an issue with cookies on webkit. I went on a quest to understand why. Webkit has an issue with “,” character in cookies. It strips everything after the comma in the value. There is a new specification in the process of redifining cookies. You can expect that some implementations to be fixed, and then creating interoperability issues.

Mailing-list

We are using mailing-list for projects archived on the Web. An interesting question has been raised on when creating a new list. So far, we tried to limit the creation of new list when we were getting new clients and not for each project. People participating can decided to subscribe or unsubscribe from each list. The person asking the question was afraid I guess of too many people involved around the project and having useless forks in the dicussions. This is indeed a possibility, but it is a reasonable risk to accept for the huge benefits:

• free archiving of the project
• people who are not directly involved in the current project can act as expert or raise a flag on something they have experimented in the past
• Searchability on one client. Some projects might have influence on other projects for the same client.

People working in Web agencies are not permanent. They just pass, but the client has a longer duration and then focusing the archiving around the client is usually better than creating tens of small mailing-lists for short period of time.

Discussions and scope

Some discussions, if not well managed by the person who initiated it, can wildly drift from their initial goal. We had an example this week on a simple idea which was posted and the threads had a few forks raising issues. The mail is a good place for discussing but not for building up the knowledge of this discussion. In this case a wiki is a lot more effective.

1. Send a message on the list with your scope and expectations
2. Discuss it on the list (asynchronous wins here)
3. Compile step by step the results of the discussions on a wiki

Careful: The people on the list have to be aware of this practice. If not, you create a misunderstanding on how to handle it. This starts with the fact you should make it clear that people except if they are in the To: or Cc: have the freedom to not read the messages.

Wiki refactoring and Techno Manifesto

One of our working tool inside Pheromone is a wiki. It helps us document certain things such as technologies, minutes of meetings, definition of employee roles, and sometimes draft client proposals. This week, I was writing the Technology Manifesto to give a reference for developers and the rest of the Team what are the main orientations of Pheromone.

En coordination avec la mission de Pheromone, le manifeste technologique définit les grandes orientations de l’agence. Le porteur du Manifesto est le CTO de l’agence. Le directeur du développement

• Technologies OpenSource
• Respect des normes Web et ouvertes
• Promouvoir les données ouvertes tout en considérant les règles de vie privée des utilisateurs de nos services.
• Respect de l’accès pour tous
• Services et APIs respectant HTTP REST
• Services multiplateformes (mobile, desktop, etc.)

Directeur/Directrice du développement

We have a job proposal for a development director at Pheromone. I encourage specifically women to apply. Note that the preference will be given to the best candidate, man or woman. But I found it quite hard to recruit women in the technological area. I would love for example to recruit a very good Web API (REST) woman developper.

W3C Workshop on Privacy for Advanced Web APIs

Last week I was participating to the W3C Workshop on Privacy for Advanced Web APIs. You can read the rough minutes of the Workshop for Monday 12 July and Tuesday 13 July. A report will be published in the future. I will probably write an article later on about some findings of the workshop.

Research on Portals

In the last two weeks, we surveyed Web portals through the world across languages and cultures. It helped us to figure out very interesting findings and some very specific elements depending on culture, techniques, etc. Basically, they all look the same and give a strong feeling of “Déjà Vu”, but there exists a few of them with very interesting features.

You love the Web? & you want to take over my job. Be the Dev Director at @AgencePheromone http://bit.ly/dtl7Pd #job #montreal

Juste après Jonathan Bélisle a réagi en posant une bonne question que l’annonce ne donne pas.

What are the challenges / innovation opportunities ?

Clarification : Je ne quitte pas Phéromone. Mon rôle évolue pour travailler en coopération avec Olivier Théreaux sur le pôle technologique des projets en amont de la réalisation.

J’ai commencé chez Pheromone en mars 2009 avec comme objectif de créer une dynamique d’équipe entre les développeurs. Comme toute agence riche en relations humaines, les interactions font évoluer la mission initiale. Gérer une équipe de 20/25 personnes est difficile à réaliser en même temps que de définir la vision technologique de l’entreprise. Je préfère me concentrer sur la seconde partie où j’ai plus de plaisir que la gestion. L’équipe de développement se structure en petits équipes, mais cela pourrait être appelé à évoluer en fonction de la personne recrutée. Les technologies qui sont utilisées chez Pheromone sont PHP, Ruby et C++. Le C++ fait partie de systèmes développés pour nos anciens projets. Nous ne faisons plus de nouveaux développements en C++, sauf pour améliorer les anciens programmes toujours utilisés dans le cadre des enjeux de performance.

Les performances sont un des enjeux majeurs pour deux de nos clients : ViaRail et RDS (site RDS et Grand Club). Ces deux sites Web sont extrêmement populaires avec des pics de trafic immenses mettant à rude épreuve l’architecture technologique logicielle et Web. Parfois une décision UX peut avoir un impact énorme sur la performance du site. Comprendre les enjeux de développement pour être le relai des enjeux des développeurs est alors important. Une excellente connaissance de l’architecture Web permet d’orienter les développeurs à travers les enjeux de cache, de proxys, les défauts des implémentations.

L’accessibilité Web est une partie intégrante de plus en plus de projets Web que nous réalisons. Elle est un requis pour certains clients. Elle est essentielle dans les stratégies d’accès multi-plateformes.

Olivier en coopération avec le reste de l’équipe a initié un virage de l’agence vers le mobile. Cela ne veut pas dire que nous réalisons des applications seulement sur Mobile mais des applications qui sont utilisables sur Mobile en même temps que Desktop. Cela a des conséquences pour les types de technologies qu’un développeur doit posséder dans son bagage. HTML5 (toujours en cours de développement) et CSS deviennent des parties fondamentales de cette orientation.

L’open Source est une pierre angulaire des systèmes avec lesquels nous travaillons que ce soit Ruby On Rails pour le Grand Club, Elgg pour le Fil, PhoneGap pour les applications mobile, etc. Nous poussons aussi dans nos projet l’open data, mais j’en parlerai plus longuement prochainement.

Bien sûr s’il y a des questions plus précises, j’y répondrais.

Another issue is that these agencies are small. It’s a lot easier to write a summary with a human touch. Pheromone has around 60 employees. This blog has been opened to talk about what matters to individual people in Pheromone, not a place for PR speak (which I have a tad difficulty with). I encourage Pherotizens to write their own. So I’ll try to keep it close to what happened around me last week in the agency and being careful about things which are confidential. Let’s start with So Last Week in memory of Celine who’s doing cool UX stuff in Montreal.

• Sharing data is a growing question in Pheromone. Pheromone is working for clients. Then the agency is not working with its own data. There is a fear of sharing data very similar to the fear of sharing information at the beginning of the Web. Having a good business case for sharing data is something, I start to think about.
• RDS has created Le Grand Club, a social network around sport (mostly hockey). Each member has a profile page which gives information about its community. RDS asked us to expose these data in a more machine processable way. FOAF is exactly the right way of doing that. Rounds of implementations and small fixes were done, but nothing is better than going through #swig channel to test it. I received feedbacks from Dan Brickley and Toby Inkster.
• Big coordination work on in-house mobile app for Montrealers which you should be getting news this week. Stay tuned.
• The week was short because of Canada Day. Less people at the agency on Friday, and it was easier to work on some stuff.
• My paper on Opacity has been accepted at the W3C Workshop on Privacy for Advanced Web APIs in London, UK. I have prepared my trip to go there. I still have to write a blog post about it to give more details. But in the meantime, I discovered a talk closely related to my own notion of opacity: The Real Life Social Network by Paul Adams. It is a must read.
• I have been doing an accessibility review of one of our client sites and I relate strongly with what Elie Sloïm explained in his OpenWeb article about l’accessibilité agile. Accessibility reviews are usually too late and gives a lot of frustration to the project manager, the developers, and most of the time the client. It is a lot better to think with UX and designers accessibility upfront at the beginning of the project but this requires a full control of the project at the beginning or that the work being done on concepts and designs are « accessibility proofed », in the case for example of work between agencies with a client.

Ok, let’s call it a try. We will see what happens for this week if I continue the So Last Week.

Linked Data is part of the process of publishing data in a way that it will be useful for anyone else. It is all about creating awesome stuff. Often, the task seems daunting for organizations or individuals, when it is just a question of baby steps. In the Linked Data page, there are 5 steps for starting publishing data in a way that would be useful for everyone else.

• ★     make your stuff available on the web (whatever format)
• ★★    make it available as structured data (e.g. excel instead of image scan of a table)
• ★★★   non-proprietary format (e.g. csv instead of excel)
• ★★★★  use URLs to identify things, so that people can point at your stuff
• ★★★★★ link your data to other people’s data to provide context

One of the big benefits of digital assets is that the cost of putting online data and modifying them is lower than in the material world (an online phonebook can be updated in real time and then evolve). One of the big benefits of Linked Data is URIs for piece of data or concepts on this data. Extensibility comes for free because data are expressed with a graph (not like relational databases).

Small steps are cool and full of awesome. Sharing gives you plenty of love.

L’audit approfondi est une étape fréquente dans la démarche d’amélioration de l’accessibilité d’un site. Une telle démarche débute fréquemment par la recherche d’un état des lieux. Hélas, la production d’un rapport d’audit approfondi de l’accessibilité prend du temps et coûte de l’argent. Dans certains cas, cette approche se justifie parfaitement, mais dans d’autres que nous aborderons dans cet article, ce n’est pas toujours la meilleure solution. Il est peut-être temps d’inventer de nouvelles méthodes pour améliorer l’accessibilité des sites Internet.

L’accessibilité peut éventuellement se traiter en bout de chaîne du processus sur un site simple, mais malheureusement bien trop souvent c’est trop tard. Développer un site Web accessible peut demander des modifications du choix du CMS, définir des choix de design particulier et des expériences UX particulières. L’article de Elie s’inscrit dans le domaine plus large de la compréhension du Web. Il y a, au moins, deux enjeux principaux pour les agences Web à résoudre :

• L’éducation du client sur les enjeux du Web
• L’éducation de l’équipe de conception/UX (création) du site.

L’équipe de développement a rarement le contrôle sur cette partie du site, si ce n’est d’implémenter les choix des concepteurs du site. Si les concepts sont corrects du point de vue de l’architecture Web, de la stratégie de contenu, de l’accessibilité, de la diversité des plateformes, le développeur aura moins d’enjeux pour trouver les solutions adéquates. C’est trop rarement le cas.

Une de mes grandes réalisations cette année est que toute évangélisation à propos du Web est vaine si elle ne prend pas en considération les décideurs d’affaires ainsi que les départements créatifs.

disclaimers

Note 1 : je participe comme rédacteur à l’équipe de OpenWeb et j’ai publié un article sur RDFa.

Note 2 : Pheromone a commandé un rapport d’accessibilité pour un client à la société Temesis de Elie Sloïm.

1. Le développement d’un projet créatif qui présentera les capacités créatives de Phéromone
2. L’agrégation de la créativité des individus qui composent l’équipe

Le premier point est une idée (I have an idea – Florin) qui doit trouver son écho dans un projet (I have a solution – cguy) pour réellement voir le jour. Je me propose donc de structurer l’idée et en faire un projet. Levez la main!

Le deuxième est un sentiment que je veux partager. Je trouve absolument désolant, triste, que la créativité des individus passe souvent inaperçue au sein de l’équipe. Tout le monde ici est créatif, à différents degrés.

Je partage personnellement une passion dilettante pour la photographie avec mes confrères Phil Essing et, jusqu’à récemment, Martin V. Je sais qu’Olivier et Karl font leurs propres expériences en photographie; Olivier, notamment, avec des équipements antiques et – hérésie moderne! – de la pellicule. Nous avons eu le bonheur de constater les talents de Florin à différentes occasions. Et les autres?

Mais saviez-vous que Tom (et Louis T.) fait des montages fantastiques avec des Lego et que ses animations en StopMotion rivalisent en qualité avec beaucoup de projets que j’ai vus sur le Net? Que Jon peut improviser un rap en moins de temps qu’il faut pour dire give me the f*** mic! Que nous avons une masse impressionnante de musiciens? Que j’ai lu des textes d’autres confrères qui m’ont arraché des larmes ou fait rire aux éclats, comme pour les talents de conteur d’Alexandre?

Nous avons tout ce qu’il faut pour être une véritable pépinière créative. Mais l’arbre sait-il qu’il est forêt avec le concours de ses voisins? Sait-il encore qu’il peut devenir violon ou charpente entre des mains habiles?

Moi, pour ma part, je fais comme Paul Piché:

Moi je raconte des histoires
Des histoires que vous m’avez contées
Je les reconte à ma manière
Mais tout seul, je ne peux pas les inventer.

Alors, afin d’agréger les talents de tous, je propose un répertoire des créations personnelles de tous. Photos, textes, peintures, musique, idées, créations multimédia…

Si vous n’avez pas de support numérique pour vos créations, le Lab est un bon endroit pour commencer. Si vous n’avez pas votre accès au blog, Karl est la personne-ressource.

On trouve déjà dans le wiki de l’agence une page qui fait office de répertoire (dans la section ‘La plage’).

Si vous avez besoin d’aide avec le wiki, je suis la personne-ressource. Karl et Olivier peuvent prendre la relève en mon absence.

Si vous avez besoin d’aide dans un projet, la liste ‘équipe’ peut servir à semer l’idée, mais le Lab demeure le meilleur endroit pour consigner tous les projets.

Au plaisir de vous redécouvrir.

cguy

J’ai eu la chance de travailler avec Marc-Aurèle depuis octobre 2008 en tant que son chef d’équipe.

Mon premier entretien avec Marc-Aurèle s’agissait d’une entrevue pour le poste en administration des systèmes chez Phéromone.

Dès la première rencontre, j’ai noté que Marc-Aurèle apporterait beaucoup à notre équipe.  Il était très talentueux et les connaissances qu’il avait cumulées étaient fort impressionnantes pour un jeune de 24 ans.
Marc-Aurèle était apprécié par tous les employé(e)s.  Dans son travail, il devait souvent interagir avec les autres pour leur apporter du support technique, mais aussi du support moral dans certains cas.  Il aimait son travail et le faisait bien.

Lorsque la maladie s’est accaparée de lui, Marc-Aurèle a fait rayonner des qualités supplémentaires fortes impressionnantes;  Après une longue et dure convalescence, il est revenu travailler avec nous et  nous avons tous témoigné sa persévérance son courage et son désir de vivre.  Il est resté positif tout au long de sa bataille.

Voici quelques anecdotes que nous voulons partager avec vous en mémoire de Marc-Aurèle :

• Lors la fête de Noël du bureau, nous avons effectué un gala Phérostar afin de remettre des prix amusant à certains employé(e)s.  Marc-Aurèle a reçu le prix du « Pirate de l’année » et je crois que ce soir là, il a vraiment senti l’appui et le support chaleureux que tous ses collègues avaient pour lui.  On peut percevoir Marc-Aurèle recevant le trophé sur la photo suivante:

• Yves m’a raconté que lorsque Marc-Aurèle faisait de la physiothérapie, il travaillait surtout à renfoncer son bras droit qui était plus fort étant donné que son côté gauche l’était moins.  Cela lui a servi un jour lorsqu’il a manqué d’équilibre dans la cuisine : Il a pu prévenir sa chute en s’agrippant sur le comptoir avec son bras droite.  Ça été fort impressionnant et c’est remarquable comment Marc-Aurèle se connaissait bien.

• Lors d’un entretien avec un collègue (Chrystian), Marc-Aurèle lui a confié comment il était heureux; il a fait une steppette avec sa canne et a dit avec un sourire: « Check mon cguy, t’es pas capable d’en faire une pareille! » et mon collègue lui a répondu en boutade: « Non Marc-Aurèle, il y a bien des affaires que je ne suis pas capable de faire comme toi… »

• Nous avons confié plusieurs projets à Marc-Aurèle pour lesquels il n’avait qu’une seule main et qu’un œil pour les exécuter.  L’un d’entre eux nécessitait de saisir plus de 500 courriels dans un système de liste de distributions.  Nous ne nous attendions pas à ce qu’il fasse la saisie des données, mais à notre grande surprise, il l’a fait sans même nous demander de l’aide.  Malgré sa maladie, Marc-Aurèle était très lucide et je sais qu’il faisait des efforts pour se surpasser quand il était parmi nous.

Merci à ses parents, son frère Alexandre, sa conjointe Sophie et tous les autres qui l’ont accompagnés dans ses moments difficiles.  Marc-Aurèle est et sera à tout jamais une source d’inspiration pour nous tous.  Nous sommes reconnaissants d’avoir partagé une partie de sa vie avec lui.

The web is not print, however, and the embedding of nice typography seems to come with a few other issues: the first few site prototypes on which we worked with @font-face tended to be plagued with performance problems – a really big deal in our case, given that we manage high-traffic sites. The User experience of the pages we had tested was sub-par: slow loading times, blocks of text “jumping” after the actual font gets loaded, etc.

And yet, webfont services are popping like mushrooms and seem rather popular. I decided to give four of them a look, to see how good – and how fast – their service was.

My test page, based on fontsquirrel’s webfont comparison page loads the fonts from the 4 providers (unfortunately, fontdeck does not seem to offer the Cantarell fount, a common denominator between all other three services, hence the difference). The rest of my testing consists mostly of analysis of speed, HTTP headers and other tinkering through firebug.

Google Font Directory

Google’s webfont solution is « view source » friendly: one can copy-paste from another site and get the fonts working immediately. Their offering is still rather limited, but their site is no-nonsense, immediately usable, and does not require any signup, payment – indeed all the fonts provided are Open Source (distributed under Open Font License).

Google’s service is also pretty good with caching – their servers appropriately respond with a 304 not modified open a request, and they send proper Expires: and Last-Modified: HTTP Headers.

Font Deck

Setup with Fontdeck is relatively easy: one needs to register on their site, choose a few fonts, and get a piece of HTML and CSS code to use. While I ran into a silly UX issue and couldn’t find the code samples at some points (a case of bad whitespace and beyond-the-fold design), using the font deck web site is rather pleasant.

However, after setting up my test page by following all their instructions, I never managed to get the fonts to appear: the URIs given to me in the sample systematically resulted in “403 forbidden” responses. I could not test the performance of this solution yet.

Font squirrel

Font Squirrel is clearly different from the rest. Similar to the many foundry catalogs available for designers, it includes a really simple wizard to create a font-face kit from any (downloaded) font. Very geek friendly. This is also the only service that caters to site admins who want to host their fonts themselves, and it does not provide a hosted font-face service.

Typekit

One of the first service of the genre, Typekit also requires you to register yourself and your site. Javascript-based. Really similar to font-deck (which I believe it predates), Typekit will let you browse fonts for your site, and will provide a javascript snippet to add to pages to embed the fonts.

However, after setting up my test page by following all their instructions, I had trouble getting the fonts to appear: the URIs given to me in the sample systematically resulted in a “404 Not Found” response. It took me a while to understand (DOH!) that I had to choose fonts, add them to my site’s collection THEN publish in order for the system to work. My bad, their UX is really decent and I should really have understood this faster.

This solution is actually quite nice, as it allows me to choose which weight and style I want to include in my kit – which can be a big win for file weight, and thus performance.

Caching-wise, Typekit also behaves nicely, with the same combination of “304 Not Modified” response, Expires: and Cache-Control: HTTP Headers seen in Google’s service.

Their caching policy is much less aggressive than Google’s, however: while Google sends a cache directive for 14 days (Cache-Control: private, max-age=1209600), Typekit sends one for 300 seconds. I assume the reason for this difference is that with Google, you link to each individual font (which change very rarely), while with Typekit you link to your kit, which you may tinker with a lot. In any case, a cache policy of 300 seconds (5 minutes) is rather likely to cover the average visit, so this short timeout should hopefully not have too much of an impact on your visitor’s experience.

One thing I’m not a big fan of: the script Typekit gives you doesn’t just lets you embed fonts, it also adds a little Typekit logo on all your pages. Not cool. I assume that paid customers don’t get the pesky logo, but regardless, if a service is going to advertise itself on my site, I’d like to know in advance…

Anything Else?

Any other service you would like to see tested here? Any other indicator of performance or cost-effectiveness you would like to see in the table? Tell us in the comments and we’ll try to keep this page up to date.

Vous pouvez pourtant créer des groupes intelligents en fonction de catégories précises du carnet d’adresses (la société, le nom, les pays, etc.)

Les fiches contiennent une section libre appelée Remarques. Dans cette section, vous pouvez entrer du texte. Imaginez que vous réserviez cette section pour des mots clés. Par exemple, nous avons Paul Dupont et John Smith, deux développeurs dans notre carnet d’adresses, l’un développe en ruby mais les deux développent en python.

Je crée un filtre qui sélectionne toutes les fiches dont le champs remarques contient le mot clé python.

Une fois le filtre créé un nouveau groupe intelligent « python » apparaît dans la colonne de gauche et permet de retrouver les personnes facilement.

Mieux que cela dans Mail.app, vous pouvez maintenant, taper python et vous obtiendrez automatiquement la liste des personnes qui font du python. Vous pouvez ainsi gérer de nombreux mots clés, le service commercial, les compétences technologiques, les clients sur lesquels les personnes travaillent, etc. Attention cependant à votre nomenclature pour être sûr d’avoir les bonnes personnes dans la liste d’envoi.

I got a pickle of a problem the other day with group memberships, turns out, everytime a member was leaving a group, it would take several seconds for the action to complete. Good thing, we have a NewRelic Gold membership, and with it’s transaction traces, we were able to pin it down to a specifc method.

Each user has a page that lists the groups the user belongs to, and each group entry displays the number of members in the group. Of course these pages are cached and in the act of leaving or joining the group, the cached pages where deleted. When there are a lot of members in a group, it can take several seconds to delete the cache of each member pages, which is overall a bad user experience.

To solve this problem, I had 2 options available. First, have all fragments cached with an expiry time of, say, 1 hour and delete only the acting user’s cache when he’s joining or leaving the group. That is the easy solution. but what’s the fun in that.

The second approach is to delete the acting user’s cache immediatly, but and have Delayed Jobs handle the deletion of the other members’ caches. This is the approach I’ll explain here.

First, I need to declare the sweeper in my controller class

class GroupsMembershipsController < ApplicationController
   ...
   cache_sweeper :groups_memberships_sweeper, :only=>[:create, :update, :destroy]
   ...
end

Then I create the sweeper class which contains the delayed jobs code.

class GroupsMembershipsSweeper < ActionController::Caching::Sweeper
  observe GroupMembership

  def after_update(model)
    expire model  unless self.controller.blank?
  end

  def after_destroy(model)
    expire(model) unless self.controller.blank?
  end

  def after_create(model)
    expire(model) unless self.controller.blank?
  end

  protected
  def expire(model)
    # queueing our cache clearing in delayed jobs
    Delayed::Job.enqueue(DelayedGroupMembersSweeper.new(model.group_id)) unless model.group_id.blank?
    expire_group_membership model
  end

  def expire_group_membership(model)
    #... other stuff  ...
  end

  # The class that will be invoked when Delayed jobs performs it's task
  class DelayedGroupMembersSweeper < Struct.new(:group_id)
     include CacheKeys  # helper module that declares functions for creating caching keys
     def perform
       ac = ApplicationController.new
       members = GroupMembership.all(:conditions=>["group_id = ? and status != 'invited'", group_id])
       members.each do |member|
          ac.expire_fragment get_profils_cache_key('modules_groupes',member.profile_id)
      end
    end
  end

end

There are two important informations here.

1. The queueing of the task we want to perform. When the enqueue function is called, delayed jobs will serialize the class in YAML and store the data in the database to be revived later by the jobs queue process later. I store the group’s ID, and I’ll fetch the members belonging to that group in the actual job.

  def expire(model)
    ...
    Delayed::Job.enqueue(DelayedGroupMembersSweeper.new(model.group_id)) unless model.group_id.blank?
    ...
  end

1. Declaring the class that will perform the task. This class needs to be serializable. inheriting from Struct ensures that it is. Since the code is invoked from a different process, I needed to instantiate the ActionController class for the expire_fragment method to become available. after that, it’s only a question of iterating through all the members in the group and expiring each of their fragments.

  class DelayedGroupMembersSweeper < Struct.new(:group_id)
     include CacheKeys  # helper module that declares functions for creating caching keys
     def perform
       action_controller = ApplicationController.new
       members = GroupMembership.all(:conditions=>["group_id = ? and status != 'invited'", group_id])
       members.each do |member|
          action_controller.expire_fragment get_profiles_cache_key('modules_groupes',member.profile_id)
      end
    end
  end

And there it is, Delaying the clearing of the cache with Delayed Jobs.

Pour commencer, je devais savoir ce qui n’était plus supporté dans la nouvelle version.  L’équipe de développement de Rails a publié un plugin qui permet de détecter ce qui n’est plus supporté.  Toutefois, ils ont aussi construit un plugin pour faciliter la transition qui permet l’utilisation de certaines fonctions non-incluses dans la version 3.  J’ai installé le premier plugin pour connaitre les changements à faire et j’ai ensuite installé le deuxième plugin.  Voici un résumé des changements principaux :

• API de ActiveRecord : http://guides.rails.info/3_0_release_notes.html#active-record
• API de ActionMailer : http://guides.rails.info/3_0_release_notes.html#action-mailer
• API des routes : http://guides.rails.info/3_0_release_notes.html#action-dispatch
• API des générateurs : http://guides.rails.info/3_0_release_notes.html#railties-restrung
• Changements des constantes de Rails.  Exemple : RAILS_ROOT => Rails.root, RAILS_DEFAULT_LOGGER => Rails.logger
• Utilisation de Bundler et d’un Gemfile au lieu de config.gem : http://guides.rails.info/3_0_release_notes.html#railties-restrung
• Plusieurs appels aux helpers ne sont plus disponibles.  Plusieurs sont disponibles en ajouter le plugin prototype_legacy_helper Exemple: link_to_remote : http://guides.rails.info/3_0_release_notes.html#action-view

Comme embûches, j’ai dû mettre à jour ma version installée de Ruby.  Un excellent outil sous Ubuntu facilite l’utilisation de plusieurs version en même temps et c’est « rvm« .  Pour isoler mes tests à la transition vers Rails 3, j’ai préféré Ruby 1.8.7 à 1.9 pour ne pas avoir les problèmes d’encodage possibles dûs à l’utlisation de Ruby 1.9.  J’ai ensuite installé les gem nécessaire à l’application en plus de Rails 3.0.0.beta.  L’ajout de ces gem dans le fichier Gemfile est la nouvelle façon de faire.  J’étais maintenant prêt à migrer l’application.  Voici mes prochaines étapes :

• Construire une application Rails par-dessus l’application existante ce qui a eu pour effet de créer les nouveaux fichiers nécessaires qui n’existait pas encore.  Pour ce, il faut seulement appeler « rails <app> » comme auparavant.
• Créer le fichier « app/controllers/application_controller.rb » qui remplace maintenant « app/controllers/application.rb ».
• Modifier les fichiers d’environnement (environment.rb, development.rb, etc) pour répondre à la nouvelle structure
• Ajuster les routes selon le nouvel API
• Remplacer ou supprimer les plugins de l’application.  Pour will_paginate, j’ai utilisé la branche « rails3 » du répertoire sur github.  J’ai dû enlevé « exception_logger » qui n’est plus supporté
• Depuis la version Rails 2.3.4, il n’est plus possible d’avoir un clé primaire dans les tables de jointure des relations « has_and_belongs_to_many ».  J’ai donc enlevé ces clés pour ne garder que celles de la liaison.  Il suffisait d’ajouter « :id => false » comme option du « create table » de la migration

Pour terminer, la migration d’une application Rails vers Rails 3 est une tâche faisable mais non sans embûche.  Il faut bien se renseigner sur les changements à Rails 3 pour bien identifer ce qui cause le problème.  Tout au long de la migration, j’ai dû effectuer des ajustements ici et là dans les controlleurs et les vues pour suivre les nouvelles façons de faire.  Or, la migration vers Rails 3 n’est pas isolé à seulement un niveau, mais presque partout (controlleurs, routes, vues, dépendances, configuration, etc).  De ce fait, il faut être vigilant et s’assurer de tester tous les chemins possibles.  Ici, si on a créé et maintenu nos tests unitaires et fonctionnels, nous sommes heureux de les avoir sous la main.  Voilà un excellent sujet pour une prochaine publication sur Le Lab …

Liens utiles:

• Ruby on Rails 3.0 Release Notes
• The Path to Rails 3 : Approaching the upgrade

Oui, et non.

Le web comme ecosystème d’information n’est pas en danger.

Les technologies du web ne sont pas en danger (au contraire – le même Steve Jobs par exemple se gargarise des technologies ouvertes du W3C comme HTML5 ou CSS).

Par contre, le paradigme du « site » web, comme espace où l’on se déplace, lui, est je crois moribond. C’est un changement important qui voit son origine, entre autres, dans l’apparition des mobiles.

Note: an english version of this post is also available: The Web Site: a moribund metaphor.

Avant l’arrivée de l’internet mobile (laptops, smartphones, netbooks, tablettes), notre perception est que l’ordinateur nous transportait vers l’internet. D’ou la métaphore: site, navigateur, « aller sur yahoo ». Métaphore qui existait aussi avec les premiers systèmes de réalité virtuelle. Métaphore qui nous a donné geocities: souvenez vous! geocities etait plein de quartiers virtuels…

Avec l’arrivée du wi-fi, de la connectivité fiable sur les réseaux téléphoniques cellulaires, c’est tout le contraire.

Nous sommes tout le temps en déplacement, donc nous n’allons plus sur le web, c’est le web qui se déplace avec nous. Et comme le web et ses informations sont disponibles tout le temps, les personnes veulent des réponses immédiates (ici et maintenant) à leur besoin.

D’où l’émergence d’une nouvelle métaphore et une nouvelle économie autour:

Exit geocities et le « site » web. Entrent en scène les services ubiquitaires, adaptés à des besoins précis. Pour l’instant sous la forme d’applis et/ou de widgets, mais la forme n’est pas fixée. L’avenir nous dira si Apple réussira son pari de dominance, ou si la fragmentation du marché des « app stores » tuera ce modèle, comme semble le croire des gens comme PPK. Mon pari, par contre, c’est que le « changement de paradigme » (buzzword alert!) du site Web au service web est durable.

Le developpement d’applications natives via Adobe CS5 est simple, accèssible, et demande un temps d’apprentissage assez court. Une fois obtenue les incontournables certificats Apple, la routine de compilation s’acquiert facilement. Il suffit de suivre ensuite les recommandations dispensées par Adobe, au sujet de l’optimisation de votre code pour produire des applications relativement fluides  .

Pour le reste, mon enthousiasme juvénile, s’est buté aux restrictions de la version actuelle ( beta ) qui ne permet pas de recevoir les alertes natives via le server de notifications Apple . Un lacune non négligeable qui exclue automatiquement un nombre considérable de scénario.

Vous trouverez ci-dessous une vidéo du prototype, simulation d’un match des Canadiens ( Montréal oblige ), avec affichage des buts et pénalités,
un récapitulatif succinct du match précédent et celui à venir . Ma contrainte étant de ne pas avoir de limites, j’utilise l’alpha, ENTER_FRAME et l’image de fond sans scrupules. Appréciable .

Je prépare quelques billets au sujet de mes autres expérimentations, webcam, chat, red5.

• Amazon is using a device to sell books.
• Apple is using books to sell a device.

It’s two different markets.

The strategy of Apple has always been the same: What can I do to sell more devices?

1. create a device that will seduce people.
2. propose content on this device
3. seduce publishers by offering an ecosystem where they can sell copyrighted (DRM) content.
4. once they have a significant market share, twist the publishers arm to make the content without DRMs and satisfy consumers.

Apple did it with music: music / iPod / iTunes Store, they will do it again with books: books / Ipad / iBooks.

Amazon is using devices and software to sell more content. Apple has often an evil twist by selling products that consumers own. It is like a pet, a longterm relationship. Content is not. People loves book-object, not book-content. Book-content is something which is entertainment, a few days to a few weeks (except for dictionaries, references books which are services).

Google in another fashion wants the content free, and create an ecosystem without barriers for accessing content. So they push opensource, free content or more permissive licenses, etc. The more the content is open, the more they are able to index it for selling ads.

The summary is

• Content for Apple is a mere commodity for selling devices.
• Content for Google is a mere commodity for selling ads.
• Content for Amazon is their core business.

ps: note that all of that do not please me in any ways.

1. People use the Web anywhere. It has nothing to do with mobile. It has to do with making actions on data… now. These actions need to be local when you need to do them, therefore mobile is a way of achieving it.
2. Data traffic is more important than data. But is it because the volume is a lot more important, because people use less phone calls, or because there is a new generation of mobile users. Maybe a bit of the 3. In Japan, many people have usb keys tied to an operator, so people can continue to work on their notebook anywhere.
3. The price structure will change. The companies will focus on plans which are taking into account data, moving away from minutes to data. It will then leverage for more local actions on data.

Exciting time ahead.