Artisan Numérique

/what-s-up/javascript/uml/cordova/material design/ what's up n°1

Comme tout développeur de base, je passe une bonne partie de mon temps à chercher les nouveautés, les astuces qui me font gagner du temps, ou les librairies sympa. Et souvent je trouve de belles perles.

Du coup je me suis dit qu'il serait peut-être utile de partager mes trouvailles. À vous de me dire si cela présente un intérêt et si je dois (ou pas ;-) renouveler l'expérience.

Cordova

CrossWalk

Pour ceux qui se demandent comment booster les performances de leurs applications hybrides sur Android, mais aussi (et surtout) comment avoir le même comportement sur toutes les plateformes 4 et plus, le nouveau webview CrossWalk est fait pour vous.

Ce petit bijou va vous permettre d'intégrer chromium dernière génération en lieu et place du vilain webview standard. Vous aurez donc un webview plus rapide,plus homogène d'une version à l'autre d'andoid, mais aussi de fonctionnalités supplémentaires (webRTC, Presentation API, WebGL, prise en charge complète du modèle FlexBox, etc.)

Crosswalk fonctionne en standalone, mais est aussi (et surtout ;-) pris en charge par la version 5.0 de Cordova (plugable web engines). Si vous utilisez Ionic, remplacer webview par Crosswalk est aussi simple que cela :

$ sudo npm update -g ionic
$ ionic browser add crosswalk

C'est une bonne nouvelle pour les applications hybrides Android, tout autant que l'arrivée de wkWebView dans dernier iOS 8.

Cordova HotPush

C'est le moment d'arrêter de lorgner sur les fonctionnalités HotPush de MeteorJS grâce au plugin... HotPush pour Cordova.

Ok, il n'est pas encore très sec mais il a le mérite d'être simple, en se basant principalement sur le plugin ContentSync pour synchroniser le code avec un serveur distant.

Et pour ceux qui pensent que le HotPush risque de les faire éjecter de l'AppStore, sachez qu'Apple a http://info.meteor.com/blog/Apple-hot-code-push-mobile pour rendre le hotPush possible POUR les applications hybrides.

HTML5

Can I use ?

Je croyais Can I use ultra-connu mais j'ai récemment rencontré un jeune développeur qui n'en avait jamais entendu parlé. Pourtant, il s'agit pour moi de l'une des plus utiles ressources pour les développeurs œuvrant dans le web (ne me parlez pas de développeur web, cette expression est ridicule :-).

Vous trouverez là un moteur de recherche donnant accès à une fiche dédiée à chacune des fonctionnalités d'HTML5, CSS ou SVG, avec à chaque fois un graphique indiquant les groupes et versions de navigateur les prenant en charge, ainsi que le niveau de prise en charge (prefixes proprio #toussa)

Et pour ceux qui font du CSS, la cerise sur le gâteau. Cette immense base de données est utilisable via autoprefixer, un outil qui vous permet de définir le profile navigateur que vous cherchez à atteindre (ex. IE 10+, FF 30+, etc.) et qui va automatiquement ajouter les prefixes vendeurs, ainsi qu'une poignée de hacks, pour vous...

$ npm install autoprefixer
$ cat mon-css-pure.css | autoprefixer > mon-css-compatible-multi-navigateurs.css

Que du bonheur...

Performances web

Un excellent article (en anglais) pour ceux qui veulent comprendre le fonctionnement des navigateurs, et plus particulièrement de leur moteur de rendu.

Javascript

Vanilla JS

plainJS est une indispensable base de données du "comment coder cela sans jQuery".

Scroll it up

La librairie wow permet réaliser très simplement les zolis effets révélés au scroll que vous voyez sur toutes les pages web bien tendances. Le tout sur 3kb de JS...

Vim

vimAwesome

VimAwesome - Un site très sympa qui regroupe le meilleur des plugins pour VIM. Le tout classé par catégories et popularité.

Diagrammes UML en texte

Je DETESTE les éditeurs graphiques, ce n'est pas un scoop. En revanche, j'aime beaucoup UML... Donc là, y'a comme un coinçage...

Fort heureusement, il existe (depuis longtemps maintenant) un projet permettant de faire de l'UML en texte !!! Il s'agit de plantUML.

Avec cela, vous pourrez éditer vos diagrammes avec VIM et les générer en SVG.

Cet outil en Java utilise la célèbre librairie GraphViz et donne des schémas de très bel facture (classes, activité, composants, séquences,etc.).

Material Design

Pour ceux qui se seraient endormis, Material Design est ensemble de bonnes pratiques, de composants, de dispositions ainsi que de ressources (palettes de couleur, polices, icônes, etc.) mis au point par Google et utilisé, notamment, sur Android 5 (Lolipop).

Depuis sont lancement par Google, les sites de design traitant du sujet fleurissent un peu partout sur le net. Cela va de Material Up ou http://materialdesignblog.com/10-material-design-concepts-of-captivating-data-visualization/ qui regroupent ressources et actualités sur le sujet, à des générateurs de palettes, en passant cette margnifique surcouche d'ionic..

Bref, tout ce qu'il faut pour permettre à un développeur pur jus comme moi de pondre des applis mobiles qui ait un peu d'allure :)