Dive the web

I’ve been working in the Web industry for about 12 years. During these years, I started to read about best practices in web development. I found a lot of them useful, both to ensure a better quality to my work, but also to make it easier - and sometimes quicker. I’m not claiming to have the best solutions to everything, the following tips are just a few of the things I try to do when coding. Some apply to (X)HTML or CSS, others are more appropriate to PHP or even JavaScript. Some are valid when working in a team, others when working alone.

• Follow conventions.

  This is valid both for team and solo work. When working on your personal projects, pick a style and stick to it. When working with a team, either agree with a coding style with the team or, if one is already chose, use it - even if it’s different than yours. It will make it easier for both you and your team members to understand your code.

• Validate HTML and use semantically correct markup.

  HTML tags have a meaning. A <p> indicates a paragraph. A <ul> indicates a list. Valid HTML has meaning, both to humans and machines.

  Validating HTML may help you find errors in your code. Not just markup errors, but also display errors. Something that may look great in a browser may look terrible in another. And most of the time, you have to support more than one browser.

• Comment your code

  This one will never be repeated enough. Commenting helps you and team members. In six month, you may not remember what you did today. Comment! Comment! Comment!

• Don’t commit incomplete or buggy code

  Except on rare occasions, it’s better to never commit incomplete or buggy code when using a source control tool. Stuff that goes into the common repository is supposed to work.

• Keep team members informed

  Communication is important. You refactoring code, you need to let team members know. Email is useful. Documentation is better. When you create a new library, let team members know about it. If they don’t know about it, they may create something that does pretty much the same thing. Time wasted.

• Be consistent when indenting.

  This is good for whatever language you use. Consistency in indentation helps finding your way around your code. By indenting, you can quickly see blocks of code or remove unused blocks.

• White space is your friend

  Yes, this goes with the consistency in indentation. But white space also means inserting white lines between statements or functions. But don’t overuse it. There’s no need to put 10 carriage returns between blocks of code.

• Google too

  Yep, Google is your friend. Your best friend. If you have a problem, chances are, you’re not the first one. It’s probably documented on mailing lists or Stack Overflow. Google knows, Google remembers!

• IRC channels

  It’s amazing who you may run into on an IRC. Lots of people hang around on those channels and may help you. If you ask nicely and respect the channel’s rules.

• Use available tools: good IDE, debugger, Firefox addons.

  A good IDE will help you in may ways: auto-complete built-in functions, sometimes a built in debugger or direct access to your version control tools.

  Firefox has great addons such as Firebug, the web developer tool bar or the regular expression tester that could save you lots of headaches.

• Check logs

  Logs may indicate problems. Apache logs, PHP logs… The information you may find in these logs may prove useful. But you need to learn how to read them!

• PHP Errors

  In a development environment, set your php.ini’s error reporting to E_ALL and display_errors to ON. This can help tracking errors and solving problems. But make sure you change this when going online.

What are your tips? What techniques do you use to ensure the quality of your code?

Twitter This

Usuario: Password:

J’ai beaucoup négligé mon blog ces derniers temps. Pour plein de raisons… Mais c’est aussi en partie parce que je travaille sur un petit “trip” personnel.

Et oui, toujours ma passion pour SMIL. Voici la toute première version de mon portofolio en SMIL. Avant de cliquer sur le lien, soyez avertis : ce portoflio est expérimental et utilise un doctype de XHTML+SMIL. Ce qui signifie que pour le moment, je ne garanti le fonctionnement qu’avec IE6 (ou IE7 beta ou encore l’extension IE Tab pour Firefox) (voir ici pourquoi).

Il reste encore beaucoup de travail à faire dessus. Pour le moment, ce qui fonctionne : le tout est généré par PHP. Chaque image est dans un array avec les informations spécifiques à celle-ci. Les transitions, les effets d’animation et les changements de couleur sont aussi générés alléatoirement par le script.

C’est encore très simple, mais la version 1 devrait arriver bientôt : intégration avec une base de données MySQL, utilisation plus efficace de PHP et détection de navigateur pour offrir une version différente (et plus accessible).

Pour la version 2, je prévois intégrer des éléments Ajax pour permettre à l’usager de contrôler la vitesse de la présentation… et peut-être un peu de travail sur le design. Ce qui n’est pas mon point fort ;P Ensuite, j’aimerais offrir une troisième version qui serait réellement accessible.

Enfin, tout ça pour vous dire que je m’amuse comme une petite folle en ce moment!

J’ai même terminé un livre de Terri Pratchett dont je n’ai pas pris la peine de parler (il était excellent)!

Twitter This

Usuario: Password:

Ah ah ah ! Excellente !

Twitter This

Usuario: Password:

Le W3C vient de publier un document en version de travail intitulée The XMLHttpRequest Object. Comme vous le savez certainement, l’objet XMLHttpRequest est essentiel pour monter une application en Ajax.

J’avoue être très heureuse que le W3C s’implique là dedans. Pour le moment, il me semble que le problème majeur d’Ajax c’est son innaccessibilité - toutefois, peut-être qu’avec le consortium, des solutions seront trouvées assez rapidement pour rendre toutes ces belles applications accessibles

Twitter This

Usuario: Password:

L’article Balise <img> ou feuille de style ? publié par Raphaël sur Alsacréations (avec un S!!!) vaut le détour. En effet, ce n’est pas toujours évident de savoir si une image est porteuse de contenu (et doit donc être insérée dans le HTML) ou est uniquement décorative.

Dans un monde idéal, les rédacteurs devraient fournir aux intégrateurs les ALT et les descriptions longues des images quand ces dernières sont porteuses de sens. évidement, dans le vrai monde, ce n’est pas toujours le cas - dans l’agence où je travaille, on nous a dit que c’était aux intégrateurs de rédiger ces textes. D’accord quand il s’agit d’un bouton sur lequel on peu voir en belles lettres blanches le mot “recherche”. Mais dans la plupart des cas, ça peut devenir un réel problème. Imaginez un site web pour une compagnie de camionnage ayant une flotte de camions de la marque X. Personnellement, je n’y connais rien. Pour moi, un camion, c’est un camion. Si je dois mettre la marque du camion dans le ALT, il y a beaucoup de chances pour que je fasse de la publicité pour la marque Y.

Le métier est encore jeune, il y a beaucoup à faire pour avoir une méthode de travail vraiment efficace. Une équipe complète en agence devrait toujours avoir un rédacteur web (j’insiste sur le web).

Twitter This

Usuario: Password:

La version de travail de Cascading Style sheets, level 2 revision 1 est publiée.

Twitter This

Usuario: Password:

Vous le savez déjà, j’adore le SMIL. Il y a peu de temps (j’avoue, je suis en retard, ça date de 2002), j’ai découvert le XHTML+SMIL. Il s’agit d’un module SMIL ajouté au XHTML permettant d’insérer dans un document XHTML la notion de temps (et de synchronisation) de SMIL. Génial!

Insérez le doctype suivant :

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN"
"http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">

utilisez le bon "namespace" :

xmlns:smil="http://www.w3.org/2001/SMIL20">


et le tour est joué. Vous avez à votre disposition presque tout les modules disponibles avec le SMIL.

Petit bémol : le support n’est pas encore absolument impressionnant. Pour le moment, seul IE6 et IE7 peut-être semblent supporter correctement ce doctype. Faut dire que Microsoft faisait partie du groupe qui, en 1998, a proposé au W3C le HTML+Time.

Twitter This

Usuario: Password:

XForms est maintenant une recommandation du W3C.

Ces derniers pourront être intégrés dans divers languages basés sur XML et, bien entendu, le contenu est le contenant est séparé avec XForms.

À lire aussi : XForms for HTML authors (part 1) et XForms for HTML authors (part 2)

Twitter This

Usuario: Password:

Le W3C lance le Incubator Activity. Qu’est-ce que ça mange en hiver, me direz vous…

Il s’agit de rechercher rapidement (moins d’un an) de nouveaux concepts web. Qu’il s’agisse de spécifications, d’applications ou de ligne directrices le début du travail est plus rapide sous l’égide du “Incubator Activity” car une évaluation d’un comité (”Advisory Committee“) n’est pas nécessaire.

Il faut bien entendu être membre du W3C pour former un groupe (XG).

Twitter This

Usuario: Password:

Le Synchronized Multimedia Integration Language (SMIL 2.1) est une recommandation du W3C depuis aujourd’hui (le 13 décembre 2006).

Twitter This

Usuario: Password: