Les joies du code

Standard

Joies du code
Vous codez ? Vous passez plusieurs heures par jour à débuguer ? Vous avez envie d’exploser votre ordinateur quand votre projet ne compile pas ? Le “parse error” est votre religion ? Vous allez adorer lesjoiesducode.tumblr.com qui regroupe tous les ennuis qui rapprochent tous les développeurs. Notre quotidien, en images : nos moments de joie et nos pires cauchemars.

Créé par Nicolas Lecointre (@nlecointre), de nouvelles images sont régulièrement publiées ! Une adresse à ajouter dans ses bookmarks et un twittos à suivre.

Je partage avec vous quelques images, et je vous invite à lire l’intégralité du Tumblr ensuite !

Quand un client change le cahier des charges tous les jours

Les joies du code

Quand le binome m’annonce qu’il est prêt a coder ce truc horrible auquel je ne voulais pas toucher

Les joies du code

Quand je pense avoir trouvé une solution

Les joies du code

Quand je code sans musique

Les joies du code

Quand je vois du code mal indenté

Les joies du code

quand j’essaie de gérer les encodages de caractères spéciaux et que je regrette d’être français

Les joies du code

L’intégralité des images sur lesjoiesducode.tumblr.com.

Créer des raccourcis clavier sur son site

Standard

Keyboard
Les raccourcis clavier nous font gagner un temps précieux lorsque nous utilisons notre ordinateur. Pour aller vite, il faut être un fainéant intelligent. Les raccourcis clavier ont été créés dans cette optique. De nombreux sites les utilisent (Facebook ou Twitter par exemple) et ils facilitent grandement la navigation. Dès lors, pourquoi ne pas créer ses propres raccourcis sur son site web, pour faciliter la vie de vos utilisateurs habitués à les utiliser ?

Le processus de création est très simple, et je vais vous le détailler.

Javascript

J’ai trouvé l’astuce sur le site www.catswhocode.com/blog/ qui propose de nombreuses astuces en terme de développement web. On utilise bien évidemment du Javascript pour les raccourcis clavier, car c’est une action côté client. Des solutions proposées par ce blog, j’ai choisi d’utiliser la solution faisant appel à la bibliothèque jQuery, je pense qu’elle est largement utilisée sur vos sites (en tout cas, si vous ne le faites pas, vous ratez quelque chose !).

Avant de se lancer dans la rédaction du code, réfléchissons aux raccourcis clavier que nous allons mettre en place. La première idée serait d’utiliser une combinaison du type : “Ctrl + touche”, car c’est le type de raccourcis que nous utilisons le plus fréquemment. Comme ceci est fréquemment utilisé par votre système d’exploitation et votre navigateur, c’est donc une excellente raison de ne pas utiliser cette combinaison pour ne pas faire de confusions (ou prendre la place d’un raccourci déjà utilisé).

J’ai choisi de suivre les raccourcis mis en place par Twitter pour naviguer d’une page à une autre : “G + touche”. Le G symbolise “Go to” et on choisit l’initiale du nom de la page pour l’autre touche.
Deux avantages :

  • la touche G est située au milieu du clavier, ce qui permet de choisir n’importe quelle combinaison de touches.
  • Vous n’avez aucun risque de créer un raccourci déjà utilisé par vos logiciels.

On pensera à désactiver tous les raccourcis clavier quand l’utilisateur se trouve dans un input ou une textarea, pour éviter toute redirection non voulue lorsqu’il frappe au clavier.

Passons maintenant au code, je vous rappelle que vous devez avoir jQuery sur votre site et placer ce bout de code avant la fin de balise head :
Mais c’est quoi ces numéros que tu utilises ? Pas de panique à bord, voici les correspondances :

Key Keyboard code
Backspace 8
Tab 9
Enter 13
Shift 16
Ctrl 17
Alt 18
Pause 19
Capslock 20
Esc 27
Page up 33
Page down 34
End 35
Home 36
Left arrow 37
Up arrow 38
Right arrow 39
Down arrow 40
Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
0 (numpad) 96
1 (numpad) 97
2 (numpad) 98
3 (numpad) 99
4 (numpad) 100
5 (numpad) 101
6 (numpad) 102
7 (numpad) 103
8 (numpad) 104
9 (numpad) 105
* 106
+ 107
– 109
. 110
/ 111
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
= 187
Coma 188
Slash / 191
Backslash \ 220

Vous êtes maintenant armés pour créer vos raccourcis facilement. Notez que vous pouvez faire un tas d’autres actions que de la simple redirection vers une page, à vous d’être créatif !

Bonus : du CSS pour présenter les combinaisons de touches à vos utilisateurs

C’est bien beau d’avoir créé des raccourcis, encore faut-il informer vos utilisateurs de leur existence. Si comme moi vous ne pouvez pas réaliser quelque chose de potable sur un logiciel comme The Gimp ou Photoshop, je partage avec vous ce très joli bout de code de CSS qui vous permettra “d’imiter” les touches d’un clavier. Voici ce qu’on obtient :

Keyboard shortcuts Vous pouvez visualiser directement en ligne ici : teen-quotes.com/shortcuts. Et voici le code CSS, à appliquer sur une balise span :

Amusez-vous bien !

Création de CSS sprite : quelques icônes

Standard

CSS SpriteOn est souvent amenés lorsque l’on crée un site web à utiliser beaucoup d’icônes. A ce sujet, je vous conseille l’excellent site www.iconfinder.com où je suis sûr que vous trouverez votre bonheur. Pensez à rechercher en anglais !

Dans une optique d’optimisation, il est opportun de regrouper ses icônes dans un seul fichier à l’aide de la technique du CSS Sprite. J’avais déjà abordé cette technique dans un précédent article : les outils pour développeurs web. Grâce à cette technique, vous ne faites plus qu’une seule requête HTTP (sinon, ce sera une requête par fichier…) et vous possédez moins de fichiers. Il suffit alors de mettre en cache chez l’utilisateur cette image, et voilà une bonne partie de la bande passante économisée ! Une belle optimisation, facile à réaliser.

La création du CSS sprite

Pour mes icônes, que j’utilise sur la nouvelle version de mon site personnel (www.antoine-augusti.fr), j’ai choisi d’utiliser des images de dimension 24×24. J’ai redimensionné à ce format les icônes qui étaient plus grandes.

Une fois ceci fait, j’ai utilisé l’excellent site www.csssprites.com pour créer mon CSS Sprite. Il suffit d’ajouter toutes les images au bon format, de choisir dans les options de les aligner comme vous souhaitez, de réduire l’espace entre elles (1px est suffisant) et le site s’occupe de générer votre image et le code CSS associé à celle-ci ! Magique !

Résultat

J’obtiens donc l’image suivante :
CSS Sprite

Et j’ai créé le CSS suivant :
J’ai associé une simple fonction en PHP :

Que l’on utilise de la manière suivante :

Afin de générer de belles icônes associées aux bons liens, très facilement.

Bien évidemment, vous pouvez créer une autre fonction pour pouvoir utiliser ces icônes sans des liens, par exemple dans le corps de votre site, en complément du contenu !

Les bénéfices incroyables d’Apple

Standard

AppleVoici une excellente infographie détaillant le business (profits, croissances et diverses statistiques) d’ Apple. Je l’ai trouvée sur l’excellent site tenu par un ami (ici) que je tiens à partager avec vous.

Je traduis donc les diverses statistiques ici, pour les anglophobes. Je vous invite également à jeter un oeil à l’image, qui est très bien réalisée et que vous trouverez à la fin de l’article.

  • Apple a réalisé 29 000 000 000 $ de bénéfice au cours des 6 derniers mois, soit 7 000 000 $ par heure.
  • L’iPhone et l’iPad génèrent un bénéfice de 130 000 000 000 $ par an, soit 2 fois plus que le bénéfice de Microsoft.
  • Apple vend 645 000 iPhones ou iPads par jour. Soit 267 iPhones et 90 iPads par minute.
  • La croissance d’Apple est de 114 % par an en Asie.
  • Apple vend pour 5 626 $ d’appareils par mètre carré dans ses Apple Stores.
  • Au dernier trimestre, Apple a réalisé un chiffre d’affaires de 12 000 000 $ dans ses 363 Apple Stores.
  • Apple est l’entreprise valant la plus chère au monde.

Business of Apple

Les parodies du débat du 2nd tour des élections présidentielles 2012

Standard

Sarkozy Hollande
Peut-être faites vous parti des 17,8 millions de téléspectateurs qui ont suivi le débat qui opposait M. François Hollande à M. Nicolas Sarkozy. Le débat était arbitré par Laurence Ferrari pour TF1 et David Pujadas pour France 2.

Plutôt que de vous proposer une analyse politique qui serait d’une qualité médiocre (je vous invite à lire les journaux aujourd’hui pour une analyse pertinente), je vous propose de partager quelques parodies que les internautes ont confectionné à l’occasion de ce débat. On a entendu beaucoup de journalistes qualifier cette élection présidentielle 2012 d’une élection 2.0, où les réseaux sociaux, les sites de campagne et l’Internet en général occupent une place plus importante que lors des précédentes élections. Et s’il est vrai que l’Internet se passionne pour ces élections présidentielles, on regrettera (en tout cas je le regrette) que le numérique ne soit pas encore assez abordé par les candidats.

Le débat d’hier a été l’objet de nombreuses moqueries, de diverses railleries sur l’Internet. Je souhaitais donc vous en faire partager quelques-unes, qui vous feront aborder la politique sous un angle bien plus léger que d’ordinaire. @seriouscharly a monté un Tumblr rassemblant divers montages des candidats et des journalistes lors du débat sur son site : ledebat.tumblr.com. Je vous laisse y jeter un oeil, certains montages sont vraiment excellents !

Dans le même esprit, si vous aimez les montages humoristiques, je vous invite à consulter trollcadero.tumblr.com où vous retrouverez plusieurs montages tirés d’une image de M. Nicolas Sarkozy lors de son meeting au Trocadéro, le 1er Mai 2012.

Si vous avez d’autres montages politiques humoristiques à me faire partager, faites-le sur mon Twitter : @AntoineAugusti.

Instagram passe le cap des 50 millions d’utilisateurs

Standard

Instagram
L’application Instagram fait encore parler d’elle. Après son rachat pour la coquette somme d’un milliard de dollars par Facebook le 10 avril dernier, la petite entreprise aux 13 employés, fondée il y a 2 ans, vient de passer le cap des 50 millions d’utilisateurs. La barre symbolique des 40 millions d’utilisateurs avait été franchie le 13 avril dernier, ce qui indique une remarquable progression de 5 millions d’utilisateurs par semaine.

Une progression pour le moins fulgurante pour une application qui ne comptait “que” 15 millions d’utilisateurs au début de l’année 2012. Pour rappel, Instagram est disponible sur Android depuis le 4 avril dernier après n’avoir été présent que sur iOS pendant deux ans. L’application suite à sa sortie sur Android avait alors été téléchargée plus d’un million de fois en 12 heures. Même si Google ne communique pas le nombre précis de téléchargement sur sa plateforme Google Play, on sait que l’application a dépassé les 10 millions de téléchargement sur Android il y a deux jours.

Il est certain que le fait que l’application soit maintenant disponible sur iOS et Android a contribué de manière significative les inscriptions, et les chiffres parlent d’eux-mêmes ! Pour le moment, le rachat par Facebook de l’application n’a eu aucun impact sur les utilisateurs mais on peut facilement imaginer le bonheur des employés d’Instagram qui profitent de l’expérience des employés et de l’infrastructure de Facebook pour continuer leur folle évolution. Bref, suivons avec attention la fabuleuse évolution d’Instagram dans les semaines à venir.

Le site officiel d’Instagram : www.instagr.am.