kumquats labs Veille technique et R&D sur les technologies HTML5 et Symfony - page 5

Les lightbox sont très pratiques mais il arrive souvent que le rendu sur mobile ne soit pas à la hauteur du rendu sur bureau.

Pour cette raison, un développeur et designer d’interface a créé une lightbox responsive dont vous trouverez les caractéristiques ici: http://dimsemenov.com/plugins/magnific-popup/

– performances : pré-chargement des images, utilisation des CSS pour le redimensionnement d’image, support des écrans rétina

– accessibilité : affichage conditionnel de la lightbox, navigation au clavier

– interface utilisateur : boutons et navigation

Le temps des sprites en CSS est révolu ! Ou tout du moins, il le sera peut-être prochainement grâce au SVG. Outre les avantages propres au format vectoriel qu’offrent SVG, ils ont aussi la particularité d’être empilables. Cela signifie qu’il peut posséder plusieurs couches contenant chacune une image pouvant être utilisée de manière totalement indépendante.

Comment cela fonctionne-t-il en pratique ? Chaque couche possède un identifiant qu’il faut renseigner lors de l’insertion de l’image, comme suit:

<img alt="" src="images/sprite.svg#identifiant-de-l-image" />

ou en CSS:

.icon.share {
background: url( 'images/sprite.svg#identifiant-de-l-image' );
}

Comment empile-t-on des SVG ? Deux manières possibles:
– Avec Illustrator comme l’explique cet article: http://hofmannsven.com/2013/laboratory/svg-stacking/
– Avec SVG Stacker (https://github.com/preciousforever/SVG-Stacker) un projet open source permettant d’empiler des SVG provenant de différentes sources.

Turbulenz a décidé de rendre public et open source son moteur de jeu.

Il ne s’agit pas du premier et certainement pas du dernier moteur de ce genre. C’est cependant l’un des rares créé par une société professionnelle et qui, vu les fonctionnalités qu’il propose, pourrait se hisser aisément au sommet des moteurs de jeu HTML5.

Au menu:
– de la 3D et de la 2D ( avec ou sans WebGL )
– de la physique
– du son ( son 3D, effet echo, reverb, etc. )
– du réseau ( websocket ou fallback )
– le support de différents controller ( manette, souris, clavier, volant, écran tactile… )

Plus d’infos sur leur GitHub. A noter que le projet dispose, en plus de tout ça, d’une excellente documentation !

Pour bien commencer la semaine, rien de vaut une lecture saine et en anglais sur l’un de nos frameworks JS de prédilection : Backbone.

Vous connaissez sans doute déjà le projet de démonstration TodoMVC, qui aide les développeurs à choisir le framework JavaScript le plus adapté à leurs besoins. Dans cet article, Sebastian Porto partage son retour d’expérience sur quatre frameworks et nous propose un comparatif argumenté autour de plusieurs critères.

Cet article nous donne un aperçu des possibilités offertes par Marionette (à ne pas confondre avec Puppet, nous y reviendrons sans doute d’ici quelques articles). On y apprend que Marionette est une compilation de composants et de bonnes pratiques : gestion des vues facilitée et meilleure structure de l’application, entre autres. Comme dans Backbone, vous n’utilisez que les composants dont vous avez besoin.

Depuis hier soir, Backbone.js est passé en version 1.0, après un an sur
la branche 0.9, voici quelques fonctionnalités :

– nouvelle méthode collection.set() pour mettre à jour le contenu d’une
collection avec une nouvelle liste de modèles
– ajout de la fonction listenTo dans le mixin Events, pour facilement
détacher les évènements quand les vues sont supprimées
– support des requêtes HTTP PATCH, envoyant seulement la différence
d’état du modèle au serveur plutôt que la représentation complète de
celui-ci
– ajout de nouvelles méthodes d’inspection des données et de filtrage,
comme par exemple where, pick et omit
– la mise à jour du code commenté : http://backbonejs.org/docs/backbone.html