Archive for veille technique - page 4

Le mode strict de JavaScript

Le mode strict de JavaScript

Comme vous le savez certainement, le JavaScript est un langage extrêmement permissif.
Si ceci a pour avantage de le rendre particulièrement souple on peut, en revanche, très rapidement faire n’importe quoi et se retrouver avec des bugs très difficiles à identifier et à corriger.

Si vous avez déjà fouiné un minimum dans certaines librairies JavaScript, vous avez peut être déjà aperçu la directive « use strict« . Cette directive permet en fait d’activer le mode strict de l’interpréteur JavaScript afin de rendre le langage moins permissif en soulevant des exceptions aux endroits sensibles de votre code.

Cet article de John Resig vous apprendra quelles sont les conséquences et les bénéfices de l’utilisation du mode strict, dont voici quelques extraits :

les variables et propriétés : essayer d’assigner foo = « bar »; alors que ‘foo’ n’a pas été défini avant échouera. Sans le mode strict, la valeur « bar » aurait été affecté à l’objet global window.foo

eval : pratiquement toute tentative d’utilisation du nom ‘eval’ est interdite, tout comme la possibilité d’assigner la fonction ‘eval’ à une variable ou à la propriété d’un objet. De même, l’introduction de nouvelles variables au travers d’un ‘eval’ n’est pas possible.

Retrouvez toutes les informations concernant les fonctions dans la suite de l’article.

5 APIs HTML5 JavaScript

5 APIs HTML5 JavaScript

Comme vous le savez, HTML5 introduit de nouvelles API. Nous vous proposons un point rapide sur les dernières APIs JavaScript grâce à cet article, dont voici notre résumé rapide :

Battery Status API

Pour permettre à une page web d’inspecter le niveau de la batterie du périphérique grâce à JavaScript. Il faut prévoir quelques lignes de code supplémentaires pour obtenir un résultat cross-browser.

Gamepad API

Permettra d’utiliser une manette de sa console de jeux préférée pour l’utiliser avec des jeux HTML5, directement dans le navigateur.

Device Orientation API

Si le périphérique dispose d’un gyroscope, cette API permet d’en détecter l’orientation et de récupérer des informations concernant son mouvement.

Geolocation API

Déjà largement supportée, cette API permet de partager sa position avec les sites web.

Page Visibility API

Permet de déterminer si la page est visible ou pas et donc de mettre automatiquement un jeu en pause lorsqu’on réduit la fenêtre. Cette API n’est pas encore implémentée partout mais son support commence à être plutôt bon : http://caniuse.com/pagevisibility

Magnific Popup : lightbox responsive

Magnific Popup : lightbox responsive

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/

Pour les plus curieux, il explique également comment il s’y est pris dans cet article, en trois grandes parties :

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

 

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.

SVG empilés, successeurs du sprite ?

SVG empilés, successeurs du sprite ?

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:

ou en CSS:

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, encore un moteur de jeu ? Oui, mais…

Turbulenz, encore un moteur de jeu ? Oui, mais…

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 !

On trinque, on est ami !

On trinque, on est ami !

Budweiser a lancé un gobelet qui ajoute des amis sur Facebook en trinquant !
Le paramétrage est très simple : il suffit de flasher le QR Code sous le gobelet pour lier son compte Facebook à la puce RFID. Ces puces s’activent dès qu’elles sont proches l’une de l’autre et votre liste d’amis s’allongera automatiquement au fur et à mesure de vos rencontres. 

Buddy-Cup-01

Source : http://golem13.fr/budweiser-buddy-cup/

L’Epitech délivre une application Android d’alerte au cambriolage

L’Epitech délivre une application Android d’alerte au cambriolage

Les étudiants d’Epitech Monpellier viennent de publier une application alertant les autorités les plus proches en cas de cambriolage. L’application, déjà disponible sur Google Play, simplifie aussi la transmission du formulaire OTV (Opération Tranquillité Vacances), signalant votre absence à la gendarmerie qui assurera des patrouilles pendant votre absence.

 

Chart.js : les beaux graphiques

Chart.js : les beaux graphiques

Dans la catégorie visualisation de données, voici Chart.js, une librairie js qui permet de créer des graphiques presque aussi simplement que ça :


site : http://www.chartjs.org/
docs : http://www.chartjs.org/docs/

Backbone.js 1.0

Backbone.js 1.0

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

 

Page 4 of 5 1 2 3 4 5