LoïcG » javascript http://blog.loicg.net Carnet d'un développeur web Sat, 04 Feb 2012 17:31:19 +0000 fr hourly 1 http://wordpress.org/?v=3.3.1 La veille du week-end (dix-septième) http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dix-septieme/ http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dix-septieme/#comments Fri, 11 Feb 2011 07:01:18 +0000 Loïc http://blog.loicg.net/?p=1327 Une semaine encore agitée en Egypte, l’Ipad 2 serait en route et la loi Loppsy a été adoptée par nos chers députés …

Bienvenue dans cette dix-septième édition de la Veille du Week-End :)

Développement et performances :

SEO, SMO, SMA et leurs potes :

Intégration et Webdesign :

Divers :

Et pour les (quelques) autres liens, c’est toujours dispo grâce à TwitterFavs ;)

]]> http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dix-septieme/feed/ 0 La veille du week-end (quinzième) http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quinzieme/ http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quinzieme/#comments Sun, 30 Jan 2011 14:39:32 +0000 Loïc http://blog.loicg.net/?p=1263 Voici la veille du week-end, quinzième !

Pour cause de (bonne) grippe, je n’ai pas pu publier cette veille avant, veuillez m’en excuser.

Développement et performances :

SEO, SMO, SMA et compagnie :

Intégration et webdesign :

Divers et divertissement ;)

Comme d’habitude, l’ensemble de la veille se trouve ici.

Bonne lecture ;)

]]> http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quinzieme/feed/ 1 La veille du week-end (douzième) http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-douzieme/ http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-douzieme/#comments Sat, 08 Jan 2011 07:44:30 +0000 Loïc http://blog.loicg.net/?p=1251 Bonjour et bonne année à ceux à qui je ne l’ai pas encore souhaitée.

Voici la première veille du week-end de l’année :

Développement PHP :

SEO et tous ses potes :

Performances et expérience utilisateur :

Intégration, HTML, CSS et webdesign :

Javascript :

Divers :

Et comme d’habitude, le reste de mes favoris de la semaine sont ici !

]]> http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-douzieme/feed/ 2 La veille du week-end (dixième) http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dixieme/ http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dixieme/#comments Fri, 17 Dec 2010 09:13:22 +0000 Loïc http://blog.loicg.net/?p=1238 Une veille un peu plus maigre que les semaines précédentes, mais la lecture reste abondante et variée.
En même temps, vu qu’il n’y a que très peu de neige, vous n’aurez certainement pas beaucoup de temps pour lire :)

Photo par : Stefano Corso

Parmi les actus qui m’ont marqué cette semaine : LOPPSI est adoptée, l’état est donc libre de censurer le net (ça fait plaisir…). Delicious (service de bookmarking de Yahoo!) va fermer ses portes (enfin, ses serveurs …). Free a présenté sa nouvelle Freebox V6 (aka. Revolution), qu’elle a l’air bien (ou pas…).

Pour le reste, c’est par ici :

SEO et tous ces potes :

Développement web (PHP, MySQL…) :

Performance et expérience utilisateur :

Intégration, HTML5 et CSS3 :

Un peu de détente :

Pour les (quelques) autres favoris que j’ai fait cette semaine, c’est comme d’habitude sur twitter_favs !
Et accessoirement, vous avez le droit de me suivre sur twitter ^^

]]> http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dixieme/feed/ 1 La veille du week-end (quatrième) http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quatrieme/ http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quatrieme/#comments Fri, 05 Nov 2010 14:13:18 +0000 Loïc http://blog.loicg.net/?p=1094 La semaine a été riche d’actus, et ma récolte pour le week-end est plutôt conséquente.
Du coup, on se retrouve pour cette quatrième veille du week-end avec beaucoup de lecture (heureusement, la météo a prévu de la pluie ^^).

Au programme : pas mal de SEO/sémantique/UX, deux beaux plugins jQuery et Google qui fourni gratuitement (et en open-source) un module d’optimisation (pagespeed) pour Apache2.

En route !

De la technique

Du SEO, de la sémantique et de l’UX

De beaux plugins pour jQuery :

Et pour finir, un peu de détente avec une sélection de 20 jeux Android gratuits,dont l’excellentissime Angry Birds : via @chrislogiste

Si vous avez tout lu, et que vous avez fini les 20 jeux, je vous propose d’aller fouiller dans mes favoris twitter de la semaine.

]]> http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-quatrieme/feed/ 1 Veille du week-end (première) http://blog.loicg.net/autour-dun-cafe/veille-week-end-premiere/ http://blog.loicg.net/autour-dun-cafe/veille-week-end-premiere/#comments Fri, 08 Oct 2010 19:35:35 +0000 Loïc http://blog.loicg.net/?p=1042 Aujourd’hui j’entame ma première « veille du week-end ». Le but est de partager avec toi, lecteur, mes lectures du week-end.

Pour faire simple, tout au long de la semaine, je récupère des tweets qui me plaisent et les garde pour lire les articles pointés pendant le week-end.
J’ai décidé de faire profiter de ma veille à tous.

Un peu de Javascript :

Du PHP :

Quelques articles autour du SEO, l’ergonomie et Google Analytics :

La tournée du sysadmin (linux) :

Et pour les parents bricoleur, le blog d’un papa créatif qui fabrique lui-même les jouets de ses enfants : http://drp.ly/MKEz (proposé par @patricecassard)

Merci à tous ces twittos pour ces suggestions de lecture et bon week-end à tous :)

]]> http://blog.loicg.net/autour-dun-cafe/veille-week-end-premiere/feed/ 0 Passer le datepicker de jQuery UI en Français http://blog.loicg.net/webdev/jquery-datepicker-en-francais/ http://blog.loicg.net/webdev/jquery-datepicker-en-francais/#comments Sat, 07 Aug 2010 02:19:01 +0000 Loïc http://blog.loicg.net/?p=969 Je me sert assez fréquemment du datepicker fourni avec jQuery UI, mais, j’ai aussi très souvent besoin que les jours, les mois et le format de dates soient en Français.

Pour passer le datepicker en Français, je m’étais fait un petit snippet dans lequel j’avais placé les paramètres à appliquer lorsque je déclare le plugin jQuery pour lui fournir les informations nécessaires à la traduction…

Mais depuis peu, je me suis aperçu qu’il exite des fichiers tout prêts pour ça :

http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/

Il suffit de choisir la langue souhaitée, puis d’inclure (ou copier) le fichier correspondant juste après avoir inclus jQuery UI.
Et voilà ^^

]]> http://blog.loicg.net/webdev/jquery-datepicker-en-francais/feed/ 0 Cache du contenu statique en .htaccess http://blog.loicg.net/webdev/cache-contenu-statique-htaccess/ http://blog.loicg.net/webdev/cache-contenu-statique-htaccess/#comments Wed, 19 May 2010 15:37:36 +0000 Loïc http://blog.loicg.net/?p=928 Le temps de chargement des pages est (depuis longtemps) un point crucial dans le développement web. Il existe de nombreuses façons d’accélérer ce temps de chargement, dont une, la mise en cache par le navigateur des éléments statiques.

Le principe :

Sur votre site vous utilisez une feuille de style, des fichiers javascripts ainsi que des images qui sont les mêmes sur plusieurs de vos pages (voir sur toutes…). L’objectif est de ne les servir qu’une seule fois à chaque visiteur.
Pour cela, les navigateurs ont un cache (également appelés « fichiers temporaires »), qui lui permet de réutiliser des éléments qu’il a déjà chargé, pour peu que votre site lui ai indiqué de tenir ce comportement.

Gain estimé :

Les éléments statiques sont assez nombreux et volumineux, que ce soit les librairies javascript (jQuery, les lightbox, etc …) ou encore les images (une belle bannière en header du site, etc …), on accumule les kilo-octets…
Lorsque ces éléments sont mis en cache, le volume de données transférées se voit ainsi divisé par 6 ou 10.

Comment ?

Ce comportement peut être défini dans un fichier .htaccess, voici le code à insérer :

<ifModule mod_headers.c>
  <FilesMatch "\.(js|css|ico|jpg|jpeg|png|gif)$">
    Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
    Header unset ETag
    FileETag None
    Header unset Last-Modified
    Header set Cache-Control "max-age=864000, public"
  </FilesMatch>
</ifModule>

Il faut également activer le mod_headers sur le serveur Apache (par ex : « sudo a2enmod headers » sous debian/ubuntu)

Analyse du code :

  • « Header set Expires … » : indique au navigateur un date d’expiration dans un futur (assez) lointain
  • « Header unset ETag » : va nous permettre de débrayer le système de validation de contenu du navigateur, ainsi c’est notre Cache-Control qui va gérer la mise en cache.
  • « FileEtag None » : idem ci-dessus
  • « Header unset Last-Modified » : comme pour les Etag, nous ne voulons pas que ce soit le navigateur qui décide de rafraichir le contenu
  • « Header set Cache-Control … » : Nous indiquons au cache du navigateur que le contenu est valide pendant 10 jours (exprimé en secondes)

Conclusion :

Cette technique est assez simple à mettre en place, permet d’économiser de la bande passante et de servir ses pages plus rapidement à chaque visiteur (à partir de sa seconde page vue…).
Il y a donc tout à gagner en adoptant cette pratique.

]]> http://blog.loicg.net/webdev/cache-contenu-statique-htaccess/feed/ 4 Manipuler les checkbox avec jQuery sous IE http://blog.loicg.net/webdev/manipuler-checkbox-jquery-internet-explorer/ http://blog.loicg.net/webdev/manipuler-checkbox-jquery-internet-explorer/#comments Mon, 01 Mar 2010 21:23:58 +0000 Loïc http://blog.loicg.net/?p=804 Très récemment, IE m’a posé un léger problème avec sa gestion bien lourdingue des événements, et notamment le change.
J’ai eu besoin d’utiliser les événements sur des checkbox pour réaliser des filtres d’affichage pour Google Maps.
Pour faire simple, voici un bout de code qui fonctionnait parfaitement sur tous les navigateurs (sauf IE, bien entendu …) :

$('input[type=checkbox]').change(filtrer);

« filtrer » étant ma fonction de filtrage des points sur la carte.

Malheureusement, IE (6,7 et 8 ) avait du mal à réagir à cet événement.

Du coup, j’ai du l’y forcer :

$('input[type=checkbox]').click(function(e){
    if($.browser.msie){
        $(this).change();
    }
 });

Ainsi, je force IE à provoquer l’événement et ma fonction « filtrer » est bien appelée :)

En bonus, voici comment cocher et décocher des checkbox avec jQuery :

$('input[type=checkbox]').attr('checked','checked');//cochage
$('input[type=checkbox]').attr('checked','');//décochage

à modifier selon votre page et donc vos sélecteurs :)

]]> http://blog.loicg.net/webdev/manipuler-checkbox-jquery-internet-explorer/feed/ 7 Firefox 3.5 rc3 est disponible http://blog.loicg.net/tech/firefox-3point5-rc3/ http://blog.loicg.net/tech/firefox-3point5-rc3/#comments Thu, 25 Jun 2009 05:53:05 +0000 Loïc http://blog.loicg.net/?p=670 La team Mozilla travaillant sur le navigateur « star » de l’open-source a publié ce matin la version 3.5 rc3 de Firefox.

Pour rappel, Firefox 3.5 apporte de nombreuses améliorations portant principalement sur la rapidité d’exécution et de rendu des pages (nouveau moteur Gecko, traitement Javascript plus rapide, etc …) mais également (ou surtout) le support du HTML5.

HTML5 est un peu l’évolution que les développeurs attendaient. Anéfé (… tiens au fait, elle se barre \o/…) HTML5 va permettre notamment d’intégrer plus facilement des vidéos sur son site (balise <video>), de proposer la géolocalisation pour vous espionner proposer du contenu en relation avec votre position physique (c’est un peu ce que fait Google lorsqu’il vous propose la boulangerie ou le fleuriste en bas de chez vous), d’améliorer le support de canvas et permettre l’exécution simultanée de plusieurs fonctions Javascript grâce aux workers.

Mais Firefox 3.5 n’apportera pas uniquement le support du HTML5, mais il implémentera la gestion native du JSON et la navigation privée pour des sessions de navigations coquines privées.

Mozilla a encore une fois bien joué le jeu en proposant rapidement aux utilisateurs des versions de tests (alpha, beta puis rc) localisées et traduite en de nombreuses langues (plus de 70, dont le français ^^).

Il est vrai que Firefox 3.5 peut être testé depuis un bon moment (avec les version minefield, alpha puis beta et maintenant release candidate), mais les versions « de test » ne sont stables (à mon goût) que depuis la première rc, sortie.

Télécharger Firefox 3.5 RC3
(pour ceux ayant déjà installé la version RC ou RC2, vous pouvez faire une mise à jour automatiquement,
dans le menu « Aide »-> »Rechercher des mise à jour »)

]]> http://blog.loicg.net/tech/firefox-3point5-rc3/feed/ 0