Archive for outils

Symfony Docker Edition

Symfony Docker Edition

Un développeur s’est amusé à créer sa propre distribution Symfony comportant la configuration nécessaire pour tourner avec Docker.
La distribution intègre évidemment Symfony 3.0 mais également les dépendances logicielles pour le faire tourner, à savoir:

  • Supervisord (Permet le monitoring des processus)
  • Nginx (Serveur web, équivelent Apache)
  • MariaDB (fork de MySQL)
  • Memcached
  • PHP 5.6.17 + PHP-FPM
  • Xdebug
  • Opcache (équivalent APC)

La configuration choisie ne correspond pas forcément à ce que nous utilisons habituellement puisque chez nous on utilise plutôt Apache et MySQL, mais ça pourrait être un point de départ pour créer notre propre conteneur Docker, plutôt que de partir complètement de zéro.

Pour plus d’infos: https://github.com/drgomesp/symfony-docker

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

Live démo Android

Live démo Android

Après l’excellent PhoneGap Day à Amsterdam (ahh souvenirs), on s’est posé la question de comment faire simplement une live démo sur PC/Mac de nos apps Android. Et voici.

La solution existe et s’appelle Android Screen Monitor. Cette application Java permet de visualiser l’écran de votre smartphone Android dans votre ordinateur. Fonctionnalité similaire à l’Apple AirPlay Mirroring.

Pour utiliser Android Screen Monitor il faut télécharger asm.jar et le lancer avec la commande suivante :

Une fenêtre s’ouvre et nous demande de choisir un périphérique
androidscreenmonitor1 androidscreenmonitor2

Lorsque vous avez sélectionné votre périphérique vous visualisez alors l’écran en live !

Tout n’est pas parfait, par exemple le framerate n’est pas extraordinaire mais ça rend déjà bien des services. A noter que pour enregistrer simplement une capture vidéo de l’écran pour une diffusion ultérieure, il est possible d’utiliser la ligne de commande adb pour enregistrer un fichier au format mp4.

 

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 ;)

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.

 

 

knacss, un framework CSS simple et léger

knacss, un framework CSS simple et léger

Nous le savons, en informatique, mieux vaut éviter de réinventer la roue à chaque occasion. C’est pourquoi nous vous présentons aujourd’hui une feuille de style de base bien pratique, proposée par Alsacréations. 

KNACSS (à prononcer « knakess ») est un « kick-start » pour bien commencer vos projets, minimaliste, reponsive, modulaire et basé sur un ensemble de bonnes pratiques.

Vous y trouverez – entres autres – ces fonctionnalités :

– un reset CSS
– des classes réutilisables
– des snippets CSS
– des aides au positionnement
– du positionnement avancé (FlexBox)
– un support navigateur allant jusqu’à IE6
– des grilles simples et des gouttières
– du Responsive webdesign
– des classes pour les tableaux
– des classes pour les formulaires
– une version LESS
– une version Sass

Plus d’infos sur :
http://www.knacss.com/ (en anglais)
http://www.knacss.com/knacss.html (quelques règles CSS, en anglais)
http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html (en français)

Ah oui ! Vous pouvez tester tout ça dans vos projets, mais c’est encore en version « beta » :)

 

PhoneGap on Steroids

PhoneGap on Steroids

Le dopage est à l’honneur de cet article… ou tout du moins, l’usage des stéroïdes pour PhoneGap. Ça commence avec un slogan assez simple :

« PhoneGap apps didn’t feel native. That’s why we built Steroids.« 

 

PhoneGap on Steroids est un framework basé sur PhoneGap qui permet d’utiliser des éléments d’interfaces natifs (Native UI: Multiple WebViews, Tabs, Modal windows, Navigation bar, Native animations, Drawer et Calendar) et comble certains manques de PhoneGap.

On y trouve aussi des outils en ligne de commande très utiles comme le développement multi-périphériques en simultané et le support de Sass et CoffeeScript, pour ne citer qu’eux.

Vous trouverez plus d’informations dans les tableaux comparant les frameworks.

 

Pour l’instant les prix de la beta semblent intéressants, à surveiller et à tester très prochainement !

 

 

Sprite ou icon fonts : avantages et inconvénients

Sprite ou icon fonts : avantages et inconvénients

A l’heure du mobile, les performances de nos sites web est une priorité. Alors, comment organiser nos images et nos icônes pour accélérer leur chargement ?

Deux solutions sortent du lot : les sprites d’images ou les polices d’icônes.

Voici un article intéressant sur les avantages et les inconvénients de ces deux techniques. En résumé, les polices d’icônes permettent d’améliorer les performances du site car elles donnent accès à un grand nombre de caractères depuis un seul fichier, appelé par l’instruction « @font-face ». En revanche, elles sont un peu moins personnalisables qu’un sprite CSS puisqu’une icône ne peut être que d’une seule couleur.

Vous trouverez sur le blog du web design une liste de 10 fonts ou générateur de fonts prêtes à l’emploi. A retenir : IcoMoon où on peut importer nos propres icônes au format SVG.

Hook.js : scroll & refresh

Hook.js : scroll & refresh

Hook.js est une toute petite librairie javascript qui permet de recharger une page web en la « tirant » vers le haut.
Simple et efficace, on scroll un peu vers le bas puis on remonte et la page est recharge !

http://usehook.com/

Outils en ligne pour les couleurs

Outils en ligne pour les couleurs

Petit rappel de différents outils à notre disposition pour travailler sur les couleurs :
http://line25.com/articles/10-time-saving-online-color-tools-for-web-designers

On y retrouve notamment ColourLovers, Kuler et Ultimate CSS Gradient Generator qui permet de générer des dégradés en CSS, SCSS (sass), etc.