publié le vendredi 25 avril 2014

Git est un outil qui facilite le développement de groupe, en offrant de la gestion de version de code hors site. C'est à dire que les développeurs peuvent cloner un dépôt de code, le modifier et soumettre leurs modifications. Je vous invite à consulter ce petit article (uniquement en anglais malheureusement) pour comprendre le fonctionnement du flux de travail lorsqu'on utilise git.

Hébergeurs GIT

Il existe deux principaux hébergeurs GIT qui se complètent bien et qui sont gratuit.

  • Github: Permet d'héberger un nombre illimité de projets publics avec un nombre illimité de développeurs. C'est la références pour pas mal tout les logiciels gratuits à code ouvert (FOSS). C'est également le plus populaire car le protocol GIT a été basé sur ce site, qui est fondé par le père de Linux, Linus Torvald. Les dépôts privés sont payant par contre.
  • Bitbucket: Contrairement à Github, Bitbucket permet d'avoir gratuitement un nombre illimité de dépôts privés avec un maximum de 5 collaborateurs chacun. C'est parfait pour les projets solo, et pour faire des sauvegardes de votre page personnelle, de votre petite base de données, etc. C'est l'hébergeur que j'ai choisis pour faire la sauvegarde de mon code. L'espace alloué est infini, tant que vous n'abusez pas. Ce n'est pas un endroit pour héberger votre collection complète de MP3, ni pour partager des films avec vos amis.

 

Comment ça marche?

Lorsque vous vous êtes fait un compte sur bitbucket, vous n'avez qu'à cliquer sur "Repositories" (dépôts) > Create repository.

Ensuite, il faut aller configurer votre projet pour qu'il se synchronise avec bitbucket:

# on se positionne dans le bon répertoire
cd /chemin/vers/mon/project
# initialisation du dépôt 
git init
# config de base globale
git config --global user.name "PRÉNOM NOM"
git config --global user.email "MY_NAME@example.com"  
git config --global core.editor vim
git config --global color.ui true
git config --global help.autocorrect 1
# on pointe notre dépôt chez bitbucket
git remote add origin git@bitbucket.org:valleed/valleedelisle-website.git

Lorsque vous apporterez des changements à votre projet, vous devez ajouter le fichier dans la liste des fichier à surveiller (s'il ne l'est pas déjà):

echo "# Mon fichier README" >> README.md
git add README.md

Et finalement, on commet les changements et on les pousse vers bitbucket:

git commit -m "Premier commit. Ajout du README."
git push -u origin master

Si vous voulez ajouter tout un répertoire, sans avoir à ajouter chacun des fichiers, vous pouvez faire comme suit:

cd /chemin/vers/mon/project
git add .
# encore une fois, on commit et on push 
git commit -m "Ajout de ce répertoire"
git push -u origin master 

Conclusion

Bien sur, ce n'est qu'une façon (probablement la plus simple) parmis tant d'autre d'utiliser GIT. Si vous avez des questions, ou bien si vous voulez que j'aborde le sujet plus en détails, veuillez m'en faire part.

publié le mercredi 23 avril 2014

Votre nouveau site web est maintenant complété. Tout est placé où ça devrait être et vous êtes prêt au grand voyage. L'êtes-vous vraiment? Quelques fois, des détails importants vous échappent et peuvent ruiner votre chef d'oeuvre.

Lancer un site web est une tâche ardue, peu importe le nombre de fois que vous l'avez fait. Plusieurs chose peuvent mal tourné, peu importe le nombre de site que vous avez mis en ligne et la liste des oupelayest directement proportionnelle à la complexité du projet. Cet article est une checklist des tâche normale qui doivent être ocmplétées avant d'appuyer sur le bouton "GO". Un peu de préparation ne fait pas de tort et peut vous sauver beaucoup de maux de tête et de pertes après le lancement de votre site web.

Utilisez un "Favicon"

Le "favicon" est un icône qui apparaît à la gauche du titre de la page dans l'entête du navigateur, et vos usagers vont tout de suite le remarquer si votre site web n'en a pas un. Il donne de la crédibilité à votre site web, affiche votre marque de commerce et aide l'utilisateur à repérer votre site à travers touts ces tabs et favoris. L'utilisation du "favicon" est probablement la tâche la plus facile mais trop souvent négligée.

1. Créer une image

Les favicons sont bien souvent une variante du logo de votre organisation. Si vous êtes du type "créatif", vous pouvez en confectionner un vous même à l'aide d'un logiciel tel que Photoshop ou GIMP. Assurez vous que les dimensions de votre image sont de 16x16 pixels (ou bien 32x32 si vous voulez supporter les affichage "Retina") et si vous avez de la transparence, vous devez l'exporter en .png.

2. Convertir en .ico

Les "favicons" sont des fichiers .ico. Si votre logiciel de création ne vous offre pas la possibilité d'exporter en tant qu'.ico (*tousse* Photoshop *tousse*), ne vous inquiétez pas, voici quelques outils en ligne qui vont s'en charger pour vous:

favicon.cc – Un petit site qui vous permet de créer ou télécharger votre propre icon pour l'exporter (ne supporte pas les "retina").

favicon-generator.org – Un autre site, un peu comme le précédent, mais qui vous permet d'envoyer votre image seulement. Pour activer le mode "retina", assurez vous que "Maintain Image Dimensions” est cochée et envoyez votre image 32x32.

3. Envoyer

Connectez vous sur votre serveur web, naviguez le répertoire principal de votre site web en envoyez le fichier nommé favicon.ico.

Optionel: <link /> 

La plupart des navigateur vont rechercher le favicon.ico, mais vous pouvez également spécifier l'emplacement vous même en copiant la ligne suivante dans la section <head> de votre site web:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Titres et tags meta

Chaque page de votre site doit avoir un <titre> pertinent. C'est très important pour l'utilisation et le SEO que ce titre reflète bien le contenu de la page.

<title>Ceci est pertinent | Ma Compagnie </title>
 
Le tag  <meta name=”description” /> n'est pas très important pour le SEO, mais est très important pour les engins de recherche. Voici un exemple:
<meta name="description" content="Ceci décrit très bien mon site web pour l'affichage par les engins de recherche" />

Validation du code

C'est quelque chose que vous devez avoir vérifier tout au long du processus de développement, mais si vous croyez en la loi de Murphy, alors c'est probablement quelque chose que vous allez devoir faire avant le lancement, et après chacune des mise-à-jour du site web. Le Validateur W3 est un outil gratuit de l'organisme W3C qui va vous aider à standardiser votre code selong les dernières spécifications.

Liens brisés

C'est une bonne chose de relire le contenu de votre site, mais faites vous une faveur (et à vos utilisateurs), et assurez vous que les liens ne sont pas brisés. Encore une fois, le W3C a un excellent outil qui s'appelle le W3 Link Checker. Ce service va essayer tout les liens de votre site web et rapporté ceux qui sont brisés.

Analyse des visiteurs

L'installation d'un outil d'analyse comme Google Analytics est cruciale pour enregistrer et mesurer les performances de votre site web. Si vous êtes dans le processus de construire un site web qui remplace un autre site web, assurez-vous de ne pas polluer les données en installant le code dans votre nouveau site web pendant la phase de développement. Dans ce cas, assurez-vous de remettre le code lorsque c'est le temps du lancement!

Voici quelques plateformes d'analyse qui pourraient vous interresser:

Redirection de Pages

Si vous êtes dans un processus de remplacement d'un site web, c'est possible que certaines pages sur l'ancien site web n'existent plus sur le nouveau site web, ou vice-versa. Parfois, c'est tout simplement la nomenclature des liens qui est différente. Peu importe, c'est important d'être rigoureux. 

http://example.com/a-propos n'est pas la même chose que http://example.com/a_propos.

1. Indexer

Ouvrez le classeur Excel suivant. Il vous aidera à comparer votre vieux site et votre nouveau site.

Sur chaque ligne, donnez un nom à chaque page (pour faciliter les références). Ensuite, faites une liste de toutes les vieille page et tentez de les grouper par catégorie. Finalement, allez sur votre nouveau site et tentez d'associer les nouvelles pages aux anciennes.

Si une page sur le nouveau site web a une adresse URL différente de l'ancien site, surlignez la en jaune pour faciliter le repérage.

2. Rediriger

Lorsque vous aurez finit l'indexation, ouvrez le fichier .htaccess dans la racine du répertoire de votre site web.

Since you’ve already indexed your site using the spreadsheet, simply locate your highlighted rows and use one of the following redirection rules (one per line):

Étant donné que vous déjà indexer votre site web dans le classeur, localisez tout simplement les lignes qui sont en jaune et créez une rêgle de redirection pour chacune d'entre elle.

301 Redirects

Utilisez une redirection 301 lorsque vous voulez rediriger de façon permanente la vieille page vers la nouvelle page. Par exemple:

Redirect 301 http://www.example.com/a-propos/ http://www.example.com/a_propos/

302 Redirects

Utilisez une redirection 302 lorsque vous voulez redirigez de façon temporaire vers une nouvelle page. Par exemple:

Redirect http://www.example.com/a-propos/ http://www.example.com/a_propos/

Sitemap

Lorsque vous ajoutez un fichier sitemap.xml au répertoire racine de votre site web, ça aide les robots à indexer et naviguer votre site web. Vous pouvez utiliser un outil gratuit comme XML Sitemaps pour générer un sitemap pour vous. Si vous avez fait un classeur comme expliquer dans la section précédente, vous pouvez en construire un vous même. 

Si vous utilisez un framework comme Yii, certaines extensions vous permettent d'en générer facilement.

Lorsque vous êtes satisfait de votre sitemap, utilisez Google Webmaster Tools pour informer les robots de la mise-à-jour.

Test de performance

Les performances d'un site web sont absoluement critiques pour l'expérience des utilisateurs, surtout depuis l'avénement des site web mobiles et sensible (responsive).

C'est le genre de chose que vous devez faire tout au long du processus de développement, mais il n'est jamais trop tard pour commencer. Les performances peuvent être améliorées en faisant des changements parfois simple mais qui peuvent avoir un gros impact. Vous trouverez ici quelques trucs pour optimiser jQuery.

Voici quelques outils utiles pour vous aider:

Fil RSS

Si votre site web a une section Blog ou Nouvelles, assurez vous d'inclure un lien RSS dans la section <head> de votre code. Un icône RSS aparaîtra dans la barre d'adresse du navigateur des utilisateurs.

Voici le code que vous aurez de besoin:

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="http://example.com/link-to-feed" />

Sauvegarde

Tout les administrateur de système vous diront qu'une stratégie de sauvegarde régulière et automatisée vaut son pesant d'or. Rien n'est pire qu'une perte catastrophique de données, alors prenez le temps de faire une sauvegarde de votre siteweb et de votre base de données.

Si vous utilisez WordPress, vous pouvez utiliser le plugin “BackUpWordPress”. Les interfaces comme Webmin, CPanel et Plesk ont des fonctions intégrées. Si vous avez un VPS chez DigitalOcean ou Linode, vous pouvez vous prévaloir du service de sauvegarde qui prend une image de votre serveur.

Conclusion

En espèrant que ces petits trucs ont été utile, n'hésitez pas à me contacter si vous avez des questions ou des commentaires.

Inspiration: The Pixel Lab

publié le mercredi 23 avril 2014

Je viens de lire un excellent article sur la commande strace de Linux. Cette commande vous permet de dépanner plusieurs types de problèmes. C'est un utilitaire qui peut être utilisé pour tracer l'interaction entre un programme et le noyeau (kernel) de Linux. Il affiche les "system calls" du début de l'exécution d'une application jusqu'à la fin.

Voici la syntaxe:

strace [programme ou commande] [arguments]

Exemple de base

$ sudo strace ls
execve("/bin/ls", ["ls"], [/* 18 vars */]) = 0
brk(0)                                  = 0x8c8f000
access("/etc/ld.so.nohwcap", F_OK)      = -1 ENOENT (No such file or directory)
mmap2(NULL, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_ANONYMOUS, -1, 0) = 0xb775f000
access("/etc/ld.so.preload", R_OK)      = -1 ENOENT (No such file or directory)
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
fstat64(3, {st_mode=S_IFREG|0644, st_size=71704, ...}) = 0
mmap2(NULL, 71704, PROT_READ, MAP_PRIVATE, 3, 0) = 0xb774d000
close(3)                                = 0
access("/etc/ld.so.nohwcap", F_OK)      = -1 ENOENT (No such file or directory)
open("/lib/i386-linux-gnu/libselinux.so.1", O_RDONLY|O_CLOEXEC) = 3
read(3, "\177ELF\1\1\1\0\0\0\0\0\0\0\0\0\3\0\3\0\1\0\0\0@A\0\0004\0\0\0"..., 512) = 512
fstat64(3, {st_mode=S_IFREG|0644, st_size=120748, ...}) = 0
mmap2(NULL, 125852, PROT_READ|PROT_EXEC, MAP_PRIVATE|MAP_DENYWRITE, 3, 0) = 0xb772e000
mmap2(0xb774b000, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_FIXED|MAP_DENYWRITE, 3, 0x1c) = 0xb774b000
close(3)                                = 0
access("/etc/ld.so.nohwcap", F_OK)      = -1 ENOENT (No such file or directory)
open("/lib/i386-linux-gnu/librt.so.1", O_RDONLY|O_CLOEXEC) = 3
read(3, "\177ELF\1\1\1\0\0\0\0\0\0\0\0\0\3\0\3\0\1\0\0\0\320\30\0\0004\0\0\0"..., 512) = 512
fstat64(3, {st_mode=S_IFREG|0644, st_size=30684, ...}) = 0
mmap2(NULL, 33360, PROT_READ|PROT_EXEC, MAP_PRIVATE|MAP_DENYWRITE, 3, 0) = 0xb7725000
mmap2(0xb772c000, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_FIXED|MAP_DENYWRITE, 3, 0x6) = 0xb772c000
...

Dans l'exécution juste au dessus, vous pouvez voir les appels au noyeau et ce qu'ils ont retourné. Par exemple, on constate que la commande a retourné une erreur "No such file or directory". Malgré que cette erreur n'ait pas un gros impact sur l'exécution de la commande, on peut vite comprendre comment strace peut s'avèrer un outil de dépannage essentiel aux administrateurs de systèmes et aux programmeurs.

Rapport d'utilisation

Vous pouvez également exécuter strace avec l'option -c qui compte le nombre d'appels et d'erreur pour chaque type d'appels système et affiche un rapport à la fin. Par exemple:

$ strace -c ls
Desktop  Documents  Downloads  examples.desktop  grof  groff.txt  Music  Pictures  practice  Public  Templates  Ubuntu One  Videos
% time     seconds  usecs/call     calls    errors syscall
------ ----------- ----------- --------- --------- ----------------
  -nan    0.000000           0         9           read
  -nan    0.000000           0         1           write
  -nan    0.000000           0        10           open
  -nan    0.000000           0        13           close
  -nan    0.000000           0         1           execve
  -nan    0.000000           0         9         9 access
  -nan    0.000000           0         3           brk
  -nan    0.000000           0         2           ioctl
  -nan    0.000000           0         3           munmap
  -nan    0.000000           0         1           uname
  -nan    0.000000           0        10           mprotect
  -nan    0.000000           0         2           rt_sigaction
  -nan    0.000000           0         1           rt_sigprocmask
  -nan    0.000000           0         1           getrlimit
  -nan    0.000000           0        25           mmap2
  -nan    0.000000           0        11           fstat64
  -nan    0.000000           0         2           getdents64
  -nan    0.000000           0         1         1 futex
  -nan    0.000000           0         1           set_thread_area
  -nan    0.000000           0         1           set_tid_address
  -nan    0.000000           0         1           statfs64
  -nan    0.000000           0         1           openat
  -nan    0.000000           0         1           set_robust_list
------ ----------- ----------- --------- --------- ----------------
100.00    0.000000                   110        10 total

Préfixer chaque ligne avec l'heure du jour

L'option -t affiche l'heure du jour. C'est parfait pour faire des tests de performances et de timing. Par exemple, si le temps d'exécution d'un programme ou d'un script est anormalement long, vous pouvez voir ou ça bloque.

$ strace -t ls
14:05:49 execve("/bin/ls", ["ls"], [/* 38 vars */]) = 0
14:05:49 brk(0)                         = 0x8b91000
14:05:49 access("/etc/ld.so.nohwcap", F_OK) = -1 ENOENT (No such file or directory)
14:05:49 mmap2(NULL, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_ANONYMOUS, -1, 0) = 0xb76f4000
14:05:49 access("/etc/ld.so.preload", R_OK) = -1 ENOENT (No such file or directory)
14:05:49 open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
14:05:49 fstat64(3, {st_mode=S_IFREG|0644, st_size=71704, ...}) = 0
14:05:49 mmap2(NULL, 71704, PROT_READ, MAP_PRIVATE, 3, 0) = 0xb76e2000
14:05:49 close(3)                       = 0
14:05:49 access("/etc/ld.so.nohwcap", F_OK) = -1 ENOENT (No such file or directory)
14:05:49 open("/lib/i386-linux-gnu/libselinux.so.1", O_RDONLY|O_CLOEXEC) = 3
14:05:49 read(3, "\177ELF\1\1\1\0\0\0\0\0\0\0\0\0\3\0\3\0\1\0\0\0@A\0\0004\0\0\0"..., 512) = 512
14:05:49 fstat64(3, {st_mode=S_IFREG|0644, st_size=120748, ...}) = 0
14:05:49 mmap2(NULL, 125852, PROT_READ|PROT_EXEC, MAP_PRIVATE|MAP_DENYWRITE, 3, 0) = 0xb76c3000
14:05:49 mmap2(0xb76e0000, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_FIXED|MAP_DENYWRITE, 3, 0x1c) = 0xb76e0000
14:05:49 close(3)                       = 0
14:05:49 access("/etc/ld.so.nohwcap", F_OK) = -1 ENOENT (No such file or directory)
14:05:49 open("/lib/i386-linux-gnu/librt.so.1", O_RDONLY|O_CLOEXEC) = 3
14:05:49 read(3, "\177ELF\1\1\1\0\0\0\0\0\0\0\0\0\3\0\3\0\1\0\0\0\320\30\0\0004\0\0\0"..., 512) = 512
14:05:49 fstat64(3, {st_mode=S_IFREG|0644, st_size=30684, ...}) = 0
14:05:49 mmap2(NULL, 33360, PROT_READ|PROT_EXEC, MAP_PRIVATE|MAP_DENYWRITE, 3, 0) = 0xb76ba000
14:05:49 mmap2(0xb76c1000, 8192, PROT_READ|PROT_WRITE, MAP_PRIVATE|MAP_FIXED|MAP_DENYWRITE, 3, 0x6) = 0xb76c1000
14:05:49 close(3)

Vous pouvez utiliser -tt et -ttt pour avoir l'heure plus précise.

 

Source: MyLinuxBook

publié le mardi 18 septembre 2012

Trucs pour optimiser les sélecteurs:

1. Toujours descendre d'un #id

C'est la rêgle d'or de jQuery, toujours utiliser les #id autant que possible.

$('#content').hide();

ou bien sélectionner plusieurs éléments sous un item:

$('#content p').hide();

2. Utiliser le selecteur de tags avant d'utiliser celui des classes

Le deuxième sélecteur le plus rapide de jQuery est celui pour les tags (par exemple $('head')) parce qu'il se connecte à une méthode javascript native, getElementsByTagName(). La meilleure façon de préfixer une classe est avec un nom de tag ou bien de descendre d'un #id.

var receiveNewsletter = $('#nslForm input.on');

Le sélecteur par classe est le plus lent; dans Internet Explorer, il passe au travers le DOM au complet. Évitez le autant que possible. Ne jamais préfixer un #id avec un nom de tag. Par exemple, ceci est très lent car jQuery va faire le tour de tout les éléments <div> avant de chercher l'id 'content':

var content = $('div#content'); // très lent, à éviter!

Aussi, ne descendez pas plusieurs #id en même temps:

var traffic_light = $('#content #traffic_light'); // très lent, à éviter!

3. Utiliser des sous-requêtes

Faites une copie de l'objet parents et faites vos requêtes sur celui-ci par après.

var header = $('#header');

var menu = header.find('.menu');
// ou
var menu = $('.menu', header);

4. Optimiser les selecteurs pour le model 'droit à gauche'

Depuis la version 1.3, jQuery utilise la librairie Javascript Sizzle  qui fonctionne différemment de l'engin utilisé auparavant. La méthode est "droit à gauche" au lieu de "gauche à droit". Assurez-vous que le sélecteur de droit est plus spécifique que le sélecteur de gauche, qui lui devrait être plus large:

var linkContacts = $('.contact-links div.side-wrapper');

au lieu de:

var linkContacts = $('a.contact-links .side-wrapper');

5. Utilisez find()

Semblerait-il que la fonction find() est très rapide, mais ça dépend si votre page contient beaucoup d'éléments DOM:

var divs = $('.testdiv', '#pageBody'); // 2353 sur Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 sur Firebug 3.6 - Le meilleur temps
var divs = $('#pageBody .testdiv'); // 2469 sur Firebug 3.6

6. Maîtrisez le pouvoir de faire des chaînes

C'est plus rapide de faire des chaîne au lieu de sauvegarder le sélecteur, par exemple:

$('li.menu-item').click(function () {alert('test click');})
                     .css('display', 'block')
                     .css('color', 'red')
                     fadeTo(2, 0.7);

7. Codez vos propres sélecteurs

Si vous avez des sélecteurs que vous utilisez fréquemment dans votre script, élargissez l'object jQuery $.expr[':'] et développez votre propre sélecteur. Dans le prochain exemple, on a créer un sélecteur qui retourne les éléments qui ne sont psa visible:

$.extend($.expr[':'], {
    abovethefold: function(el) {
        return $(el).offset().top < $(window).scrollTop() + $(window).height();
    }
});
var nonVisibleElements = $('div:abovethefold'); // Select the elements

Trucs pour optimiser la manipulation du DOM:

8. Copiez les objet jQuery

Faites une copies des éléments que vous utilisez souvent:

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

9. Compilez tout dans un seul éléments quand vous voulez insérer quelque chose dans le DOM

La manipulation du DOM est très lente, modifiez votre structure HTML le moins possible:

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);

// Au lieu de faire:

$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
    $('#menu').append('<li>' + i + '</li>');
}

10. Détecter si un objet est présent, même si jQuery ne retourne aucune erreur

C'est très bien que jQuery ne retourne pas d'erreur lorsqu'un objet est inexistant, mais ça ne veut pas dire qu'il faut arrêter de faire des validations de bases. Même si jQuery ne retourne pas d'erreur, il fait quand même une tonne de vérifications avant de déterminer qu'un objet n'existe pas. Il est donc recommandé de valider la présence d'un objet avant d'appeller une méthode sur celui-ci.

11. Utiliser des fonction directement au lieu des raccourcis

Pour obtenir une meilleure performance, vous devriez utiliser des fonctions directes comme $.ajax() au lieu de $.get(), $.getJSON(), $.post(), car ces dernières sont des fonctions raccourcies qui appellent $.ajax().

12. Sauvegarder les résultats

Normalement, vous devriez avoir un objet application général "App" qui devrait contenir vos objets jQuery pour un usage fréquent.

App.hiddenDivs = $('div.hidden');
// plus tard dans votre application
App.hiddenDivs.find('span');

13. La méthode data() est parfaite pour conserver un état

N'oubliez pas d'utiliser la fonction .data() pour conserver des données pour vos éléments

$('#head').data('name', 'value');
// plus tard dans votre application
$('#head').data('name');

14. les fonctions utilitaires de jQuery

N'oubliez pas qu'il existe des fonctions utilitaires jQuery qui peuvent s'avérer bien utile. Les plus courantes sont $.isFunction(), $.isArray() et $.each().

15. Ajouter une classe JS à l'élément HTML

Dès que jQuery est chargé, vous devriez ajouter une classe JS à votre élément HTML comme ceci:

$('HTML').addClass('JS');

Ça signifie que cette classe ne sera active que si le javascript est activé. Vous pouvez ensuite faire apparaitre un élément div qui contient un avertissement de javascript que si la classe JS n'est pas chargée, par exemple:

/* dans vos css*/
.JS #myDiv{display:none;}

Plus d'informations

Trucs pour optimiser les évènements:

16. Considérer $(window).load

Parfois, c'est plus rapide d'utiliser $(window).load() au lieu de $(document).ready() car ce dernier n'est exécuter que lorsques tout les éléments DOM sont téléchargés. Vous devriez le tester avant de l'utiliser.

17. Délégation d'évènements (aka Bubbling)

Lorsque vous avez beaucoup d'éléments dans un conteneur et que vous voulez assigner des évènement sur chacun d'entre eux, vous devez utiliser la délégation. La délégation permet de connecter un évènement à un élément parent et ensuite de définir sur quel enfant l'évènement doit agir. C'est pratique si vous avez une grosse table avec beaucoup de données et que vous voulez créer un évènement sur chacune des cases (TD).

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

Plus d'informations

18. Raccourci pour l'évènement "ready"

Si vous voulez sauver des bits en compressant votre plugin, remplacez l'évènement $(document).onready():

// Au lieu de 
$(document).ready(function (){
    // votre code
});

// vous pouvez faire

$(function (){
    // votre code
});

Tester jQuery:

19. jQuery Unit Testing

La meilleure façon de tester le code Javascript, c'est avec un humain. Mais, vous pouvez toujours utiliser des outils automatiques comme Selenium, Funcunit, QUnit et QMock pour tester votre code (surtout les plugins).

20. Évaluer votre code

Il faut toujours évaluer votre code (benchmark, banc d'essaie) pour voir ce qui est lent et le remplacer. Vous pouver utiliser la console "Firebug". Voici un reccueil de fonctions pour vous faciliter la tâche.

// Raccourci pour envoyer des données dans la console Firebug
$.l($('div'));

// L'heure en format unix
$.time();

// Trouver le temps d'exécution d'un bloque JS dans Firebug
$.lt();
$('div');
$.lt();

// Exécuter un bloque de code dans une loop pour tester le temps d'exécution
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6

Truc pour optimiser jQuery en général:

21. Utiliser la dernière version de jQuery

La version la plus récente est habituellement la meilleure. N'oubliez jamais de tester votre page après avoir mis-à-jour jQuery, certaines fonctions ne sont pas compatibles avec les version précédentes.

22. Utiliser HTML 5

Les nouveaux standards HTML 5 prônent une structure DOM plus légère, ce qui veut dire que ça fait moins d'éléments à traverser pour jQuery, donc une meilleure performance. Utilisez ces standards autant que possible.

23. Ajouter un tag "style" dans le header de la page quand vous stylisez plus de 15 éléments

Lorsque vous stylisez quelques éléments, c'est plus simple d'utiliser la fonction css() de jQuery, par contre, lorsque vous voulez styliser plus de 15 éléments, vous devriez ajouter une section <style> à votre <head>:

$('<style type="text/css"> div.class { color: red; } </style>')
.appendTo('head');

24. Ne chargez pas du code inutilement

C'est une bonne pratique de sectionner votre code Javascript en plusieurs fichiers et de les charger individuellement au besoin. Vous ne chargerez donc pas du code ou des sélecteurs inutilement. C'est plus facile aussi ensuite de gèrer votre code.

25. Diminuer le temps de chargement au minimum en compressant (minified) les fichiers JS

Après avoir décidé quel fichier Javascript chargé, compressez les et collez les dans un seul fichier. Ceci peut être fait automatiquement avec des outils commeMinify intégré dans votre code sur le serveur, ou bien avec des outils en ligne comme JSCompressor , YUI Compressor ou Dean Edwards JS packer. JSCompressor est le plus apprécier.

26. Combiner jQuery avec du Javascript pure au besoin

C'est bien de travailler avec jQuery, mais il ne faut pas oublier que c'est juste un framework pour le Javascript. Rien ne vous empêche de passer entre jQuery et Javascript pour trouver la solution la plus performante.

27. Charger jQuery de Google Code

Si vous chargez jQuery de Google Code dans votre application de prodution, le script sera chargé à partir du serveur cache de Google le plus près de l'utilisateur. Grâce à ça, vous évitez une requête de moins sur votre serveur, et le client chargera le fichier instantanément de son cache de navigateur s'il a visiter un site qui a chargé le fichier auparavant.

// Un lien vers une version bien spécifique, compressée
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

28. Chargenent parresseux pour la vitesse et les bénéfices SEO

Chargez des parties de votre site en Ajax pour couper les temps de chargement sur le serveur, par exemple, les widgets.

Merci spécial à Paul Irish, Addy Osmani, Jon Hobbs-Smith et Dave Artz pour avoir fourni les informations de performances.

Source: Dumitru Glavan

publié le lundi 1 octobre 2012

Je viens de terminer le tableau des résultats des élections de 2012 au Québec. J'ai fait ce tableau grâce au plugin jQuery Isotope. Ça permet d'afficher, de trier et de filtrer dynamiquement des données, avec une allure des plus moderne. Vous retrouverez ce tableau dans la section Statistiques de mon site.

 

publié le lundi 17 septembre 2012

À l'ère des mobiles, des tablettes, des PC, des macs, des écrans larges, des écrans plats, des télévisions numériques, et j'en passe, c'est essentiel que votre site web puisse être affiché adéquatement sur tout les types de médias, sans avoir à en développer plusieurs copies. Voici donc des trucs simples, en CSS, qui vous permettent d'afficher votre site parfaitement sur tout les types de médias possibles.

 

  • Vidéo Sensible

    Ce truc prend un objet vidéo d'une page et l'étend jusqu'au maximum possible par la résolution du périphérique client.

    .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video iframe,  
    .video object,  
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
  • Min et Max Width

    La propriété max-width permet de définir la largeur maximale d'un élément. Le but est d'empêcher cet élément de dépasser la limite de ses frontières.

    Contenant

    Ici, on définit une largeur de 800 pixels pour un contenant mais on ne veut pas qu'il dépasse 90% de sa frontière.
    .container {
        width: 800px;
        max-width: 90%;
    }
    

    Image sensible

    Vous pouvez faire qu'une image s'ajuste automatiquement à 100% de son contenant en sécifiant le code suivant:
    img {
        max-width: 100%;
        height: auto;
    }
    

    Min-Width

    Cette propriété empêche un élément de devenir plus petit que ce qu'on définit, même si l'écran est plus petit que cet élément.
  • Word-break

    Cet attribut vous permet de prévenir qu'un texte ne dépasse son contenant lorsqu'il est trop long. Il sautera à la ligne suivante.
    .break-word {
            word-wrap: break-word;
    }
    
    Un texte ici qui devrait dépasser même s'il contient des mots-qui-sont-très-long
    Un texte ici qui NE devrait PAS dépasser même s'il contient des mots-qui-sont-très-long
  • Relativité

    La relativité vous permet de définir une taile relativement à son parent, donc ça vous permet de garder un ratio entre les deux. Au lieu de définir une taille en pixel, vous la définissez en pourcentage, tout simplement. Voici un exemple avec une marge à gauche (margin-left). Si on définit une taille en pixel, ça risque de trop décaler sur un périphérique mobile, par contre, en spécifiant une taille en pourcentage, ça devrait bien sortir sur tout les périphériques. C'est la même chose pour la taille des caractères (font-size).
    .commentlist ul {
        padding: 0;
        margin-top: 20px;
        margin-left: 11%; /* valeur relative */
    }
    .commentlist cite {
        font-size: 140%; /* valeur relative */
        font-weight: bold;
    }
    
    Liste de commentaires avec ajustement relatif vs non-relatif, vue sur un mobile

 

Source: WebDesignerWall

publié le lundi 17 septembre 2012

L'avantage d'un framework est de rendre accessible des fonctions utilisées fréquemment à l'ensemble de votre application. Dans le cas de Yii, vous pouvez étendre votre contrôlleur ou n'importe quelle autre composante et y ajouter des fonctions aisément. Voici un exemple d'extend de contrôlleur que vous pouvez sauvegarder dans le fichier protected/components/DController.php:

class DController extends Controller {
    public $layout='//layouts/column2';
    public function setFlash($key, $value, $defaultValue = null) {
     Yii::app()->user->setFlash($key, $value, $defaultValue);
    }
    public function setFlashSuccess($value, $defaultValue = null) {
        $this->setFlash('success', 'Good! ' . $value, $defaultValue);
    }
    public function setFlashError($value, $defaultValue = null) {
        $this->setFlash('error', 'Oups!' . $value, $defaultValue);
    }
    public function err404($msg = null) {
      if (!$msg) $msg = "La page demandée est inexistante.";
      throw new CHttpException(404,$msg);
    }
    public function err403($msg = null) {
      if (!$msg) $msg = "Accès interdit.";
      throw new CHttpException(403,$msg);
    }
    public function printr($ar) {
      print "<pre>";
      print_r($ar);
      print "</pre>";
    }
}

Ensuite, lorsque vous appellez vos contrôlleurs, vous n'avez qu'a extend à partir de DController pour avoir accès à setFlashError, err404, err403, etc. Par exemple, voici un extrait de SiteController.php:

class SiteController extends DController {
        public $layout='column1';
...
        public function actionContact() {
         $model=new ContactForm;
         if(isset($_POST['ContactForm'])) {
          $model->attributes=$_POST['ContactForm'];
          if($model->validate()) {
           $headers="From: {$model->email}\r\nReply-To: {$model->email}";
           mail(Yii::app()->params['adminEmail'],$model->subject,$model->body,$headers);
           $this->setFlashSuccess('Merci pour votre intérêt, je vais vous répondre dès que possible.');
           $this->refresh();
          }
         }
         $this->render('contact',array('model'=>$model));
        }
        public function actionInfo() {
         if (Yii::app()->user->isAdmin()) {
            $this->render('info');
         } else {
           $this->err403();
         }
        }
}

Comme vous pouvez voir, on appelle des fonctions de DController comme setFlashSuccess et err403. Pour que le FlashSuccess fonctionne, on doit par contre avoir le code nécessaire dans la vue. Un autre raccourci peut être utilisé dans ce cas. On n'a qu'a créer un fichier protected/views/layouts/flash.php comme suit:

<?php if (Yii::app()->user->hasFlash('success')) {
$this->widget('bootstrap.widgets.TbAlert', array(
        'block'=>true,
        'closeText'=>'×',
    );
} else if (Yii::app()->user->hasFlash('error')) { ?>
<div class="flash-error">
        <?php echo Yii::app()->user->getFlash('error'); ?>
</div>
<?php } else if (Yii::app()->user->hasFlash('info')) { ?>
<div class="flash-info">
        <?php echo Yii::app()->user->getFlash('info'); ?>
</div>
<?php }

Et finalement, dans la vue que vous voulez inclure les messages flash, vous n'avez qu'à charger la vue partielle flash.php comme ceci:

$this->renderPartial('//layouts/flash');

Et voilà, ceci complète mon premier texte de truc pour le framework Yii PHP. En espèrant que ça vous a été utile.

publié le lundi 17 septembre 2012

Voici plusieurs outils pour personnaliser votre bootstrap et l'amiliorer pour le rendre moins bootstrap:

  • Bootthemes: Ce site facilite le changement des couleurs de votre bootstrap avec une belle interface graphique. Combinez ça avec le site de ColorSchemeDesigner et vous avez un nouveau look en peu de temps.
  • JetStrap: Cet outil vous permet de faire une interface bootstrap aisément.
  • StyleBootstrap: Un autre outil pour générer des thèmes de bootstrap.
  • BootStrap Image Gallery: C'est une extension pour faire une galerie d'images.
  • KickStrap: Il s'agit d'un outil qui génère un bootstrap clé-en-main avec plusieurs plugins (modernizr, jGrowl, ScrollType, etc).
  • WrapBootStrap: Un site qui vend des thèmes de bootstrap.
  • Bootswatch: Un site qui offre des thèmes de bootstrap gratuitement.
  • Builtwithbootstrap: Répertoire de sites qui ont été fait avec Bootstrap, pour votre inspiration.

Si vous en connaissez d'autres, envoyez moi un courriel pour que je les ajoutes.

Source: AntJanus