nyroBlog
Bannière NyroBlog, par Nyro
Image par Nyro - ?

Tag : Ajax


Howto update a website to reload the page through Ajax

I deployed in a website an Ajax reload for every pages. This website use a small audio player and the sound was stopped each time a new page was requested. That wasn't so graceful. The result now is exactly the same website reloading the pages through Ajax, without changing accessibility: I didn't modify ehe HTML source.

I did it quickly bu using jQuery. As this method could be useful for others, I will describe step by step how I made it.
The website which I worked on was pretty small: Amandine Café. Nothing better to train himself in a small example and then apply it in big projects

Current Website Analysis

The first thing to do is to navigate in the whole website to deduct the fixed zone and dynamic zone to reload. You have to identify which links will reload which zones, and what will be happen regarding the reloaded page. For instance you have to worry about the possible javascript control which could be a problem. Write down them and we'll take care of that at the end.
This part was pretty fast for me as the website don't use sub navigation and contains only 5 pages. I found 2 zones delimited by 3 div identified with the id header, page, and footer. Only the div#page vary regarding the pages. That will be only this content that I will update with Ajax.

PHP Side Preparation

Before dealing with the javascript code, we'll update the PHP code of our pages. When an Ajax load is made, we won't reload the full page, but only the content to update. For more simplicity and flexibility, we'll use the same URL than the real links. That's mean we have to be able to provide only the requested content in PHP, without the head page, or the fixed div. If you don't want –can't– do that, take a look to the little bonus at the bottom of this post...
The easiest way to do that is to put the fix part in separate files, named randomly header.php and footer.php. These files will be include in every pages; that's may already the case, using the include function. The thing is now to don't show these parts when the request is an Ajax request. Pretty easy, we'll write a PHP function: isAjax. The file includes will occur only if isAjax is false. In others words:
if (!isAjax())
    inlcude('header.php');

The isAjax function is, as you can see, very very hard:
function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
Actually jQuery –also Prototype, I don't know about the others– add a HTTP_X_REQUESTED_WITH element in the request that you can retrieve in the $_SERVER global variable.
We're done with the PHP preparation pages, which are now able to provide light version of your pages especially for the Ajax request.

Javascript Integration

We're moving now on the real Ajax request programmation. To keep the website totally accessible, which will works exactly in the same way without Javascript, We won't modify any current HTML sources. We'll just include jQuery in all the pages and one other javascript file containing the upcoming code.
The script schema will be:
  1. On the page load, intercept all links pointed to .php pages
  2. Add an onclick function to make the Ajax request and stop the page change
  3. On the click, call the page through Ajax with the same URL and then integrate the result where we want.
  4. Stop the click propagation
With jQuery, we're writing that very simply:
$(function() {
    $('a[href*=.php]').click(function() {
       $('#page').load(this.href);
return false;
    });
});
Very short, isn't it?
Of course this code won't work perfectly in every case. In my example I have to update the body id according to the requested page; that's mean the navigation bar link will going brown as expected by the graphic designer. To do so we can use the third parameter of the load function which will be called once the Ajax load is done. Here is how looks like my function:
$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
        $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
return false;
    });
});
If you read the code in the live site, that's not at all like that because I occured other problems.

Little Bonus

If you can't–don't want– deploy the PHP cutting for the Ajax request, don't stop right now! Firstly it could be possible to reload the whole page. This solution will be very sad and you'll probably occurs many others problems.
jQuery will help. Indeed, in the URL provided to the load function, you can specifiy a HTML selector to filter the result and show only the part you want to.
In my example the call could become simply:
$('#page').load(this.href+' #page');

I dissuade to use this technique as that's mean you will reload the whole page. So we loose the Ajax utility to reduce data transfer between clients and server.

If it's not that simple?

Give proof of imagination!
As I already thought about this question, I'll give you some example soon. This post is yet consistent and you can start to enjoy. Finally I hope you won't wait me to do that... Or if you have a website where do you want deploy this kind of solution, let me know and I will use it as my example.

Express Yourself!

How did you find this post? Interesting, boring, totally useless, can do better?
Do you have some questions? Suggestions?
Did you read some English mistakes?
Use the comments!

Version française de ce billet

Chips, Twix et Mix

Des news d'ici et d'ailleurs :

  • Prism sort en version 0.9
  • Si vous chercher l'extension ultime pour rechercher vos messages dans Thunderbird, Seek est votre ami
  • Firefox sort en beta 4. Encore une beta 5 avant laversion finale. A noter les améliorations de mémoire.
  • IE8 sort en beta
  • Les résultats des navigateurs en beta à l'acid test 3
  • Vous travaillez sur une version mobile d'un site ? Lisez ceci pour connaitre les bonnes pratiques
  • jQuery organise un worldwide sprint ce week-end spécialement pour jQuery UI
  • On parle de plus en plus de Piwik
  • TinyMCE sort en version 3.0.5
  • Netvibes évolue vers le réseau social, sous le nom de Ginger. Ma page est ici, et devrait se remplir ce week-end.
  • Marre de créer vos htaccess à la main ? La solution en ligne.
  • Après l'Air Guitar, Canal Plus lance l'Air Fuck : filmez-vous et gagner un scooter (wahou, un scooter, j'en ai toujours rêver...)
  • Les LoKataires, amis et artistes que j'adore, ont maintenant leur clip, simplement nommé le LoKaclip (Bravo à Pitch pour le montage !)

Tutoriel : transformer un site pour recharger les pages en Ajax

Aujourd'hui, j'ai implanté sur un site un chargement des pages en Ajax parce que le site intégre un petit lecteur son et couper le son à chaque fois et quelque chose qui n'est pas des plus agréable. Le résultat est le même site avec un rechargement des pages en Ajax, sans pour autant perdre en accessibilité, puisque la source HTML n'a été en aucun cas modifié.

J'ai fait ça rapidement en utilisant notamment grâce à jQuery. Comme la méthode utilisée peut servir à d'autres, je vais vous décrire étape par étape comment j'ai procédé.
Le site sur lequel j'ai réalisé ça était très petit est très simple : Amandine Café. Mais rien de mieux que de s'exercer sur un petit exemple pour ensuite l'appliquer à des projets plus conséquents.

L'étude du site actuel

La première chose à faire est de naviguer sur le site de fond en comble pour en déduire les zones fixes et les zones à recharger. Il faudra identifier quels liens vont recharger quelles zones, et tout ce que cela va engendrer au niveau de la page qui ne sera pas rechargé comme elle l'ai actuellement. On pense ici aux éventuels contrôles javascript qui peuvent ne pas fonctionner correctement. Il faut les noter pour les corriger au dernier moment.
Le tour du propriétaire s'est fait très vite pour moi puisque le site n'intègre pas de sous navigations et ne contient que 5 pages. On peut identifier 3 zones délimiter par des div avec les identifiants header, page et footer. Seule la div#page change selon les pages. C'est donc uniquement ce contenu que nous allons recharger en Ajax.

La préparation du côté PHP

Avant de s'attaquer au javascript, nous allons modifier les fichiers PHP de nos pages. Lors du chargement Ajax de nos pages, nous n'allons pas recharger la page complète, mais uniquement le contenu à modifier. Et pour plus de simplicité et de flexibilité du site, nous allons utiliser les mêmes URL que les liens réels. Il faut donc être capable du côté de PHP de n'afficher que le contenu demandé, sans les parties head de la page, ou les div fixes. Si vous ne pouvez –voulez– pas réaliser ceci, regarder du côté du petit bonus un peu plus bas...
Le plus simple pour réaliser ceci est de mettre les parties fixes dans des fichiers séparés, nommés au hasard header.php et footer.php. Ces fichiers sont inclus dans toutes les pages; ce qui est d'aileurs peut-être déjà le cas, grâce à include. Il va donc s'agir de n'afficher ses parties que lorsqu'on est pas dans une requête Ajax. Rien de plus simple, nous allons écrire une fonction PHP isAjax. L'inclusion des fichiers header.php et footer.php se fera donc à la seule condition que isAjax est faux. Autrement dit:
if (!isAjax())
    inlcude('header.php');

La fonction isAjax est, comme vous allez le voir, très très compliqué :
function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
En effet, jQueryPrototype aussi, je ne sais pas pour les autres– ajoute un élément HTTP_X_REQUESTED_WITH dans la requête que l'on peut récupérer avec la variable globale $_SERVER.
Nous en avons donc terminé avec la préparation des pages PHP, qui vont être capable de fournir des versions light des pages spécialement pour les requêtes Ajax.

L'installation du Javascript

Nous en arrivons donc à la programmation véritable des requêtes Ajax. Pour garder un site totalement accessible, qui fonctionnera exactement de la même façon sans Javascript, nous n'allons en aucun cas modifier les sources HTML des pages actuelles. Nous allons plutôt inclure jQuery dans toues les pages, et un autre fichier javascript contenant le code qui va arriver.
Le schéma du script sera le suivant :
  1. Au chargement de la page, intercepter tous les liens qui pointent vers des pages .php
  2. A ces liens, leur appliquer une fonction sur le click pour procéder à la requête Ajax plutôt qu'au changement de page
  3. Lors du click, appelez en Ajax la page demandée (avec la même url) et intégrer le résultat là où on le désire.
  4. Arrêter la propagation du click
Pour jQuery, on écrira ceci d'une façon très simple :
$(function() {
    $('a[href*=.php]').click(function() {
       $('#page').load(this.href);
return false;
    });
});
Très court, n'est-ce pas ?
Bien sûr, cet exemple ne fonctionnera pas dans tous les cas. Dans mon cas par exemple, je dois modifier l'identifiant du body en fonction de la page demandée pour changer le lien en marron du menu. Pour ce faire, on peut utiliser le 3ème paramètre de la fonction load qui sera appelé une fois le chargement ajax terminé. Voilà à quoi ressemble ma fonction :
$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
        $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
return false;
    });
});
Bon dans la réalité, ce n'est pas du tout ça, mais c'est car vraiment spécifique au site.

Petit Bonus

Si vous ne pouvez –voulez– pas mettre en place le découpage du fichier spécifique en PHP pour les reqêtes Ajax, ne jetez pas l'éponge tout de suite ! Il serait tout d'abord possible de mettre à jour la page complète, mais cela ne serait pas très propre et engendrai sûrement beaucoup d'autres problèmes.
Mais jQuery est là pour nous aidé. En effet, dans l'URL de la fonction load, il est possible de spécifier un sélecteur HTML pour filtrer le résultat et ainsi n'afficher que ce qui nous intéresse.
Dans mon exemple, l'appel à la fonction load deviendrait simplement :
$('#page').load(this.href+' #page');

Je ne vous conseille pas cette technique, puisque cela veut dire que vous allez recharger la page complète, donc on perd un peu l'utilité de l'Ajax qui est de réduire les transferts de données entre le client et le serveur.

Et si c'est plus compliqué ?

A vous de faire preuve d'imagination !
Comme j'ai déjà beaucoup réfléchi à la question, je vous donnerai plusieurs pistes d'ici une semaine au deux. Ce billet est déjà bien conséquent et vous pouvez déjà vous amuser. Enfin, j'espère que vous ne m'attendiez pas pour ça... Ou bien si vous avez un site sur lequel vous aimeriez implémenter une telle solution, demandez-moi et je ferai mon exemple dessus.

La parole est à vous !

Comment trouvez-vous ce billet ? Intéressant, totalement inutile, peut mieux faire ?
Avez-vous des questions par rapport à ça ? des suggestions ?
Utilisez les commentaires !

English Version of this post

Pantacourt et T-shirt

Un peu de nouvelles de Los Angeles, brut de pomme :

  • Fluidesign a déménagé depuis le début d'année. Nouvelle adresse, suivez le lien. Vue sur l'océan depuis la salle de réunion, grande classe pour commencer la semaine. Dans le même immeuble, deux étages plus bas, on trouve le fameux Habbo
  • J'en ai profité pour déménager pour ne pas me taper une heure ou plus de bus le soir... 10 minutes de bus pour aller au boulot, un peu moins pour la plage.
  • Fluidesign a ouvert son blog au grand public. Pas trop d'activité dessus, mais il est là quand même. Je n'aime pas du tout le graphisme, le précédent était plus sympa. Damned Designer!
  • Stage terminé depuis une semaine, je rempile pour 6 mois de plus chez Fluidesign avec énormément de boulot en ce moment.
  • le DUT SRC de Montbéliard fêtait ses 10 ans aujourd'hui à l'occasion de la journée des anciens, dommage que je sois à l'autre bout du monde. Rendez-vous pour les 15 ans !
  • Aujourd'hui peut-être promenade de 3 heures le long de la plage comme au premier jour. Pantacourt et T-shirt était de rigueur (d'où le titre du billet, juste pour narguer les lecteurs français qui sont dans le froid et que je vais rejoindre)
  • Retour en France pour 2 semaines vendredi prochain. Au programme : gala de gym dès l'arrivée, rendez-vous à l'ambassade pour obtenir un nouveau visa, soirées avec les amis, repas avec la famille, soutenance de stage, et encore plein d'autres choses.

Un peu de news logiciels, web, brut de pomme aussi :

  • jQuery sort en version 1.2.2; au menu 300% plus rapide pour la sélection d'éléments, fonctions au chargement de la page se font après le chargement des CSS, possibilité d'indiqué quel Mime-Type on veut lors d'une requête ajax, le scroll de la souris est maintenant gérer très facilement par un tout nouveau plugin. A quand des nouveautés dans jQuery UI ?
  • TinyMce sort sa version 3 en Release Candidate 2. Sortie prévue de la finale à la fin du mois. A mon avis elle n'arrivera qu'à la mi-février
  • Filezilla ajoute quelques fonctionnalités demandés : éditer les fichiers locaux par un clic droit > editer le fichier. Une nouvelle fonctionnalité absoluement démentiel a fait son apparition : la synchronisation entre les dossiers locaux et distants, avec retour visuel pour savoir si les fichiers ne sont présents que d'un côtés ou différent. Vous entrez dans un dossier d'un côté, l'autre se met à jour automatiquement. Un gain de temps énorme. Il me manque toujours une fonction indispensable pour moi : la configuration du double-clic. Après demande sur le forum, le développeur, botg, ne veut pas l'implanté car il considère que Filezilla n'est pas un explorateur de fichiers... Si vous voulez testez, pensez à mon convertisseur automatique et cmplet de config.
  • Veille info, mais je n'en avais pas parlé, et cela me tiens à coeur : Prism est un dernier né des labos de Mozilla et permet de mettre vos applis web dans une petite appli, différent de Firefox. Il utilise le moteur de Firefox 3, et est toujours en version beta. D'après ce que j'ai lu ici et là, la prochaine version ne saurait tardé. Je vois en Prism un moyen facile pour faire utiliser le moteur de Firefox à ses clients, et pourquoi pas proposer des administrations en XUL ?
  • Encore une vieille info : Android, la plateforme de l'open handset alliance issue du travail de google et open-source. 1er téléphone prévue pour la mi 2008, vraissemblablent un HTC.
  • Apple a sorti son MacBook Air : écran 13' qui rentre dans une enveloppe. Ok c'est super, tout petit et beau comme les autres produits Apple, mais c'est bien trop cher selon moi : 1699€. Autant s'acheter un macBook Pro pour 200€ de plus...

Petit bilan après 2 mois à LA

Histoire de ma vie de tous les jours à Los Angeles pendant mon stage.

Voilà maintenant 2 mois et demi que je suis à Los Angeles. Petit bilan de ce que j'ai appris, ce que je fais chez Fluidesign, et comment se passe ma vie de tous les jours ici.

Le travail
Arrivée tous les jours vers les 8h30 pour commencer à 9h00. Ca me permet de lire mes mails et mes RSS tranquillement le matin. Je suis très souvent le premier au bureau, me demandant même des fois si à 9h et quelques, alors que personne n'est là, si ce n'est pas un jour férié ou si ce n'est pas dimanche. Je travaille sur mon portable, et ça m'arrange bien pour justement rester sur MSN et lire mes mails tout au long de la journée. Pas forcément le meilleur moyen pour être productif...

On me donne du travail par AIM (c'est le standard en messagerie instantanée ici) ou par mail, on me demande combien de temps il me faudrait pour faire telles ou telles choses sur un site. J'avoue que c'est un peu dur de donne précisément, surtout que ce n'est pas souvent sur du PHP pur et dur, mais souvent sur des modifs HTML/CSS, quelques fois du JavaScript. D'autant plus que j'ai l'impression que je suis moins productif ici que lorsque je travaille chez moi. J'ai l'impression de mettre 10 ans pour faire un truc tout simple.

Durant les 2 dernières semaines, je ne faisais pas grand chose, il n'y avais pas de travail pour moi. C'est pour cela que j'ai pu me culturer sur le PHP et les design pattern.

Les projets
On me l'a indiqué plusieurs fois, l'entreprise signe des closes de confidentialité avec le client. C'est pourquoi je ne vous parlerai pas des projets sur lesquels je travaille actuellement, mais sur ceux qui sont en ligne, et donc visible par tout le monde.

GameWorks
Gameworks a été l'un des premiers projets sur lequel on m'a laissé travaillé seul pour des modifs HTML/CSS sur différentes pages du site. Je n'ai jamais bien compris ce qu'était réellement GameWorks. Si j'ai bien compris, ils organisent des repas/jeux/party pour des amis entreprises. Le tout est en lien étroit avec Sega. Les pages en particulier. J'ai fait aussi quelques petits changements minimes dans l'administration et je travaille encore dessus pour l'ajout de nouvelles pages événementielles.

Kayne
Kayne est un autre site sur lequel j'ai fait et je ferai encore des modifications HTML. Le client émet des rapports au format PDF, avec de jolis graphiques parlant de la bourse. Le soucis, c'est qu'il y a parfois des graphiques à modifier sous Illustrator/Photoshop, et que le client est très exigeant. Alors comme ce n'est pas ma tasse de thé, j'ai mis beaucoup de temps pour faire ma 1ère page. Mais une fois qu'on a pris la main, ça va vite. Et avant de publier une page, il faut d'abord la faire valider par quelqu'un d'autre de la boîte, puis par le client, et seulement si tout est ok elle passe en ligne...

First Annoucement
First Annoucement a été le premier projet où j'ai vraiment fait de la programmation PHP et où j'ai pu m'amuser avec du javascript. Le site permet aux futurs parents de préparer leur faire-part électronique en choisissant un thème, renseignant les destinataires depuis leur Outlook, Messagerie (AIM, MSN, Google ou Yahoo!) fichier CSV ou simplement par un champ texte. On peu aussi préparé le nom des parents et celui du bébé pour gagner du temps. Une fois le bébé arrivé, les parents renseignent la date et l'heure de naissance, le poids, la taille, ajouter des photos, peuvent modifier leur message et répandre la bonne nouvelle : Spread the news.
Là où je suis intervenu (car le site existait déjà) a été pour modifier la navigation, remanier les vérifications javascript pour faire de belles erreurs dans un div et non une alerte javascript. Mais le plus intéressant (et le plus long...) a été le fonction de Crop des images. j'ai utilisé ce script basé sur scriptaculous qui fonctionnent très bien. J'ai du mettre le nez dans le code pour modifier quelques petites choses : l'affichage des outils de resize différents et uniquement dans les coins. Et puis j'avais un autre problème lorsqu'on rechargeait une nouvelle image. J'y ai passé beaucoup de temps pour au final avoir un outil qui fonctionne bien. Une fois les nouveaux parents content de leur crop, ils enregistrent la nouvelle image. Là je passe par une petite requête AJAX pour envoyer les coordonnées du crop, et mon script PHP fait le reste. Bref, un site sympa, qui m'a demandé beaucoup de temps car de nombreux problèmes sont apparus pour la compatibilité avec Safari ou IE (6 ou 7...)

Voilà, 3 sites sur lesquels j'ai travaillé. Il y en a d'autres, mais non significatifs ou encore moins intéressant (Kayne est à la limite d'ailleurs...).

Mes progrès
Je suis à Los Angeles. Les gens ici parlent anglais. Etonnant, non ? Ce qui induis donc que je dois parler et comprendre l'anglais. Là où ça se corse, c'est quand on sait le piètre niveau que j'avais. Que j'avais. Car en 2 mois, j'ai progressé. Pas de la façon dont je pensais, mais j'ai progressé.

Comme je l'ai dit plus haut, j'échange énormément avec mes collègues par mail ou AIM. Il m'arrive de contacter mon voisin de bureau par AIM... Mon anglais écrit et mon écriture ont donc très largement progressé. J'avoue que j'ai toujours mon petit dictionnaire MédiaDico de lancer pour les petits mots dont je ne saisi pas exactement le sens et qui me paraissent important. Mais plusieurs personnes me l'ont dit, mon anglais écrit est bon. Je mets en signature de chaque mail interne un petit mot pour me demander de me corriger. Ce que les gens font quelques fois. Il ne faut d'ailleurs surtout pas hésiter à demander une telle correction : je pense que c'est le meilleur moyen de progresser rapidement et efficacement.

L'anglais parlé maintenant. Au niveau de l'oreille anglais, j'ai là aussi énormément progressé. Le collègue avec qui j'échange principalement parle extrêmement vite (même les autres collègues le disent) et parfois un peu dans sa barbe. La première fois que j'ai échangé avec lui a été très difficile à comprendre. J'ai dû lui demander de répéter plusieurs fois, lui faisant un effort de prononciation et de reformulation. Mais ce fait m'est très bénéfique. Mon oreille s'améliore, et je distingue maintenant beaucoup mieux les mots dans les phrases, entendant ces petits bouts de mots non accentués que nous autres français avont tant de mal à détecter la présence. Je m'en suis rendu compte en écoutant ma musique. Avant, je ne comprenais que les refrains car ils revenaient souvent et j'avais donc le temps de les assimilé. Maintenant, je comprends beaucoup plus de mots. Pour la compréhension du sens, c'est encore autre chose. Je comprends le sens des phrases beaucoup plus facilement qu'avant sans pour autant comprendre le sens de chaque mot. Ce qui fait que par un mécanisme de rétroaction, je comprends le sens des mots que je ne comprenais pas avant, et donc je progresse encore d'avantage (vous suivez là ?). Bref, je progresse.

Mon expression orale maintenant. c'est là que je n'ai pas progressé autant que je ne l'espérais. Au travail, je ne parle pas beaucoup. Lorsque je dois m'exprimer, je ne le fait pas en tout aisance et je cherche encore mes mots, trop souvent. Les structures des phrases, les petites erreurs scolaires qu'on fait souvent s'amenuisent de jours en jours, mais je ne parle pas assez pour que cela soit absolument significatif. Je parle plus avec mes collocs, qui ont eux des accents (l'un d'origine portoricaine, l'autre indonésien).

Mes progrès sont là, je les ressens. Ils ne vont pas s'arrêter là, j'en suis sûr. Ce petit bilan personnel m'aide d'ailleurs à m'en rendre compte un peu plus.

La vie de tous les jours
Tout simplement une journée type de travail :
Levé vers 7h30/7h45, douche, 2/3 cookies si la faim se fait ressentir, départ de l'appartement. C'est parti pour 10/15 minutes de marche pour rejoindre Wilshire Boulevard et mon arrêt de bus. Parfois je prends des rollers prêtés par mon colloc pour aller plus vite. C'est un faux plat descendant, donc ça va tout seul.
Le bus que j'utilise n'est pas le plus rapide. Il y en a un autre un peu plus cher qui s'arrête moins. L'avantage en temps n'étant que très minime, je continue de prendre cette compagnie. De plus, les bus ne sont pas bondés comparés à l'autre.
Arrivé au bureau vers 8h30 (ou plus tard selon le bus), installation de mon ordi, remplissage du 1er vers d'eau à la fontaine. Les collègues arrivent doucement. Certains jours je vais à la boulangerie française Amandine (c'est le nom de la boulangerie, pas de la boulangère...) tenu par des asiatiques qui font de bons croissants. Un petit croissant au chocolat par ci, un autre aux amandes ET chocolat par là et tout se passe bien. Et c'est gratuit ! Ceci car fluidesign est en train de faire leur site. Je ne sais pas trop quel marché ils ont, mais on ne va pas s'en plaindre !
La journée commence après lecture de mes mails et RSS (un heure, voir plus...). Je continue le travail inachevé de la veille ou bien regarde ce qu'il y a à faire, demande si quelqu'un a du travail pour moi etc... Et je fais mon travail, comme tout stagiaire qui se respecte. Si j'ai besoin je demande à mon collègue qui est une bête en HTML / CSS.
Le midi, c'est repas sur place préparé la veille ou Fast food avec les collègues, selon les envies. L'avantage ici c'est qu'il y a 10 000 sortes de fast food différents. J'essaie d'en tester un maximum.
La journée passe vite, voyant défilé beaucoup de ligne HTML, CSS, JavaScript ou PHP, toujours avec de la musique dans les oreilles issues de webradios diverses.
Arrivée vers les 18h00, je commence à fermer mes applications une à une, pour souvent partir vers les 18h15 et prendre le bus pour rentrer. Il arrive souvent que Wilshire soit blindé à cette heure là, merci mon téléphone et la musique pour me faire patienter. Arrivée à mon arrêt, c'est reparti pour les 10/15 minutes de marche.
Rentré dans l'appart, un des collocs est là à faire son heure de vélo ou porté de poids. Repas du soir devant la télé, puis la soirée sera faite d'ordi ou de télé.
Couché vers les 23h00.

Demain sera pareil qu'aujourd'hui, en différent...