Archive for trucs et astuces

Developers Tools Google Chrome

Developers Tools Google Chrome

Ce matin je souhaite partager avec vous un article d’Addy Osmani (excellent, forcément) qui présente les Developers Tools Google Chrome aux utilisateurs de Sublime Text (càd NOUS !).

DevTools Tips For Sublime Text Users liste ainsi quelques raccourcis similaire à ceux de Sublime Text. Comme pare exemple le « Goto Anything » Ctrl/Cmd + P permettant de naviguer dans un fichier en fonction des méthodes, ou règles CSS. On se sent vite comme à la maison, avec même la possibilité d’avoir du multi-caret !

La liste complète des raccourcis se trouve ici : https://developer.chrome.com/devtools/docs/shortcuts.

Deuxième fonctionnalité intéressante : la possibilité d’éditer ses fichiers directement avec les DevTools. Cela se fait en ajoutant des Workspaces afin de pouvoir persister les modifications faites sur nos fichiers. Utile pour ne pas avoir à repasser dans Sublime Text pour modifier le nom d’une variable ou une condition avant de tester notre nouveau code.

Enfin comme dans Sublime Text il est possible d’installer des thèmes, comme par exemple pour avoir une interface sombre pour reposer nos yeux. C’est encore expérimental mais on a tout de même testé ZeroDarkMatrix.

Bonne lecture et amusez-vous bien avec ces nouveaux raccourcis !

L’article complet : DevTools Tips For Sublime Text Users : https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8#.7dxwgvg54

Cmder : la ligne de commande windows sort de l’age de pierre

Cmder : la ligne de commande windows sort de l’age de pierre

Pour les développeurs web et mobile les outils s’utilisant en ligne de commande se sont multipliés ces dernières années, que ce soit pour la compilation des fichiers sass, pour lancer son environnement de travail sous Vagrant, pour lancer ses tests unitaires ou encore pour compiler son application PhoneGap/Cordova par exemple.

Sur Mac OSX et Linux, le terminal, très puissant, est bien adapté à ces nouveaux usages. En revanche, sur Windows, les lignes de commande s’exécutent via le programme CMD. Son apparence peu accueillante (c’est peu de le dire) et ses fonctionnalités très limitées en font un très mauvais concurrent par rapport au Terminal Unix. Son problème majeur est son fonctionnement basé sur Powershell, un langage bien en dessous des lignes de commandes utilisées habituellement sous Unix. Si l’on ajoute à cela une ergonomie catastrophique (impossible de redimensionner la fenêtre simplement sans masquer une partie du contenu, aucune coloration syntaxique, copier/coller cauchemardesques, etc.) on comprend que les développeurs sous environnement Windows se sentaient à la traine (et la guerre au troll ici, à Kumquats, faisait rage).

C’est la qu’intervient Cmder !

Cette console portable se présente comme une véritable alternative à CMD.

Tout d’abord, ce qui saute aux yeux, c’est le thème graphique Monokai présent par défaut qui permet d’avoir une véritable coloration syntaxique, ce qui en soi est déjà un point non négligeable en cas d’utilisation intensive du terminal. Toute une palette de thèmes sont disponibles comme les classiques Zenburn, Solarized, etc.
Ensuite, Cmdr donne la possibilité de travailler avec plusieurs consoles grâce aux onglets. Vraiment pratique.
Enfin, l’intégration de Msysgit permet de combler les lacunes de Powershell en rendant disponibles des commandes UNIX comme « ls », « mkdir » ou bien « cat » par exemple. Utile lorsqu’on bascule régulièrement d’un environnement Unix (vagrant, serveur distant) à son poste local.
A noter que Cmder est une fusion d’autres projets comme Msysgit donc mais aussi Conemu et Clink.

cmder-vs-cmd-2014-12-10

Avis donc aux utilisateurs Windows, voici une chance de ne plus être la risée des devs Mac OS : l’installation se télécharge là : https://bliker.github.io/cmder/. Petit détail : contrairement à ce qui est indiqué sur la page du logiciel, Cmder se lance via Cmder.exe et non Cmder.bat ;)

Keypress : Gérer les entrées clavier facilement en JavaScript.

Keypress : Gérer les entrées clavier facilement en JavaScript.

Petit article aujourd’hui pour parler de « Keypress », une librairie JavaScript pour gérer facilement les entrées clavier.
Premier avantage de cette libraire, elle permet nous abstraire de ces « keyCode » censés représenter les touches du clavier mais qui sont une horreur en terme de lisibilité. Si l’on veut détecter l’appui sur la touche ‘a’ on écrit ‘a’, si l’on veut détecter l’appui sur la touche ‘shift’, on écrit ‘shift’, etc.

Ensuite, Keypress permet de gérer trois types d’entrée clavier :

  • Les « Simple combo » : il s’agit là d’une simple combinaison de touche. Lorsque les touches renseignées sont appuyées au même moment, l’événement est déclenché. Pratique pour gérer des raccourcis clavier dans ses applications.
  • Les « Counting combo » : Il fonctionne comme le précédent, à la différence qu’il est possible de connaitre le nombre de fois que la combinaison a été effectuée.
  • Les « Sequence combo » : Il s’agit ici de détecter une séquence de touche. Lorsque les touches renseignées ont été rentrées les unes à la suite des autres alors l’événement est déclenché. Utile pour créer un easter egg à base Konami code sur son site !

Bref, c’est par là :  http://dmauro.github.io/Keypress/

Uniformiser le rendu des typos web

Uniformiser le rendu des typos web

Vous êtes-vous déjà rendu compte que les typos web n’étaient pas affichées de la même manière suivant les navigateurs ?

 

Avec Type Rendering Mix, une librairie javascript, vous pouvez jouer avec les rendus des typos pour obtenir un affichage identique (ou pas loin) sur les différents navigateurs ou OS.

Cet outil est à réserver aux adeptes du pixel perfect car tout se gère manuellement !

 

 

HTML, CSS : automatisations et frameworks

HTML, CSS : automatisations et frameworks

Les bons développeurs sont souvent ceux qui ménagent leur cerveau. Voici deux techniques qui devraient vous plaire :
On commence par l’automatisation avec Addy Osmani dans cette présentation intitulée The Landscape Of Front-end Development Automation
Il y a de bons exemples à suivre, notamment au sujet de l’utilisation de GruntJS, pour l’optimisation des images par exemple. On retient :
grunt-responsive-images : permet de générer des images de différentes dimensions
grunt-imageoptim : permet d’automatiser l’optimisation des images
 

On poursuit en éliminant des tâches répétitives avec un framework CSS : CSS frontend frameworks. Celui-ci permet de comparer et choisir un framework en fonction de nos besoins. Utilisation d’un pré-processeur CSS, responsivité, support des différents navigateurs.

 

 

Aviator, le navigateur en toute discrétion

Aviator, le navigateur en toute discrétion

Ce matin j’aimerais vous présenter un nouveau venu dans la famille des navigateurs web : Aviator
Comme l’indique cet article de developpez.com Il s’agit d’un navigateur basé sur Chrome créé par des experts en sécurité web. Il bloque par défaut les cookies tiers, les fenêtres de pubs, vide son cache à chaque fermeture et son moteur de recherche est DuckDuckGo. Pour le moment il n’est disponible que pour Mac OS (je ne sais pas s’il est compatible avec Mavericks). À tester pour celles et ceux qui veulent protéger leur vie privée.

Rappel sur les unités en CSS

Rappel sur les unités en CSS

En CSS, on dispose d’un florilège d’unités de mesure à ne plus savoir quoi en faire.

 

Cet article listant les différentes unités que nous avons à disposition explique également dans quelles situations elles sont le plus adaptées et dans lesquelles elles ne le sont pas.

 

On apprend, par exemple, que les « px » sont idéals pour les design fixes mais, qu’en revanche, ils sont effectivement déconseillés pour définir les breakpoint des media queries.
On apprend également qu’il existe certains cas ou les valeurs brutes (sans unité) sont à privilégier. C’est par exemple le cas pour les propriétés « line-height » et « border-image ».

Source : http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

Retrouver son dossier « Library » (Mac OS X)

Retrouver son dossier « Library » (Mac OS X)

Un petit truc pour bien commencer la semaine : retrouver son dossier Library sous Mac OS X !
Le comportement par défaut de Mac OS X 10.7 et 10.8 est de masquer le dossier « Bibliothèque ». Si vous non plus, vous n’êtes pas un utilisateur lambda, voici la solution : 

Show User ~/Library in OS X Lion & Mountain Lion

Launch Terminal and enter the following command to show or hide the directory:
chflags nohidden ~/Library/


Hide User ~/Library in OS X Lion (default setting)

This returns to the default setting of hiding the user Library directory:
chflags hidden ~/Library

Bonne journée à tous !

 

 

Petit rappel sur l’attribut box-sizing

Petit rappel sur l’attribut box-sizing

Une petite piqûre de rappel sur l’attribut CSS box-sizing dans cet article de Graphikart qui peut s’avérer très utile, notamment dans les design fluides où toutes les dimensions sont en pourcentage. 

Avec un « box-sizing » égal à « border-box », on peut donner une largeur de 100% à un élément et lui ajouter du padding et des bordures sans que ceux-ci s’ajoutent et fassent dépasser l’élément de son parent. C’est là tout le principe : par défaut, les navigateurs modernes ajoutent le padding et les bordures aux dimensions de vos éléments, ils utilisent donc border-sizing: content-box. Avec « border-box », les marges internes et les bordures sont déduites des dimensions, ce qui simplifie grandement le travail d’intégration.

L’auteur de l’article nous informe aussi de l’utilisation de cet attribut par certains frameworks CSS.

Un grand coup de :

*,
*:before,
*:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}

et les calculs sur le padding ne seront plus qu’un mauvais souvenir.

 

Un petit tour sur caniuse.com pour vérifier la compatibilité et on se rend compte qu’il n’y a que IE7 qui ne supporte pas cet attribut (la plupart des navigateurs ont un support partiel mais cela signifie qu’ils ne supportent que les valeurs « content-box » et « border-box » pour cet attribut donc pas de soucis dans notre cas). Mais il existe un polyfill pour palier au problème.

 

 

N’oubliez pas la balise viewport

N’oubliez pas la balise viewport

Cette petite balise peut faire toute la différence ! Confortée par un article de Ian Yates paru hier sur Tuts+, voici un petit résumé des impacts de cette balise méta.

Tout d’abord, cette balise a été introduite par Apple, puis implémenté par les navigateurs de tout bord. De façon générale, on utilisera le code suivant pour que le contenu soit affiché lisiblement sur tous les périphériques et que le niveau de zoom par défaut soit bien égal 1 :

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Cela dit, il faut savoir que cette balise n’est pas un standard et n’a jamais été reprise dans les spécifications du W3C. C’est Microsoft qui a pointé ce fait du doigt lors que la société a choisi d’ignorer ce metatag dans IE10 dans certains cas. A la place, ils ont opté pour l’utilisation de CSS Device Adaptation, solution préconisée par le W3C.
Cela consiste à utiliser la règle CSS @viewport :

@viewport {
    width: device-width;
}

 



Étant donné que ce travail est en développement, il faut utiliser la version préfixée pour qu’elle soit reconnue par IE10 :

@-ms-viewport {
    width: device-width;
}

 

L’utilisation de la balise méta viewport n’est donc pas pérenne et vous pouvez devriez déjà inclure la règle CSS @viewport dans vos feuilles de style en attendant qu’elle soit implémentée partout.

Source : http://hub.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972 (en anglais)

Page 1 of 2 1 2