Archive for veille technique - page 3

CSS3, « it’s gonna be legen… -wait for it- …dary ! »

CSS3, « it’s gonna be legen… -wait for it- …dary ! »

Bonjour à tous. Ce matin, on commence la journée avec deux articles au sujet des CSS3 :


12 Awesome CSS3 Features That You Can Finally Start Using : car oui il y a des règles CSS3 que nous pouvons utiliser dès maintenant. Comme par exemple les animations et transitions, les méthodes permettant de calculer les largeurs et hauteurs, comme width: calc(100% - 40px); Il y en a d’autres, je vous laisse les découvrir.

 

Ensuite voici un article pouvant s’intituler Flexbox et Float sont sur un bateau, mais en vrai il s’intitule After: float. Il donne une astuce nous permettant de nous passer des div, ou span type <span class="clearfix"></span> vous savez ce sont ces div qui permettent d’avoir un élément flottant étant entouré complètement par son élément parent. À l’aide du pseudo selecteur ::after nous n’aurons plus besoin de polluer notre DOM avec des éléments vides.
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 !

 

 

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 !

 

 

BackboneJS, modales et théorie

BackboneJS, modales et théorie

En ce matin de septembre j’aimerais partager avec vous un petit peu de ressources à propos de BackboneJS :

  1. Backbone.Modal un plugin pour BackboneJS simplifiant la création et l’utilisation de modals, c’est à tester !
  2. Une petit peu de lecture au sujet des applications de grande ampleur créées avec BackboneJS car ça ne fait pas de mal un peu de théorie

 

 

 

Bootstrap 3 est disponible

Bootstrap 3 est disponible

Nous attendions avec une certaine impatience l’arrivée de Bootstrap 3 et il est maintenant disponible.
En quelques mots, voici quelques uns des changements de cette version :
– le framework est mobile first; les périphériques mobiles sont gérés en premier
– toujours responsive
– nouveau système de grille
– des couleurs d’interface dans les tons pastels et des icônes façon « flat design »
Pour plus d’information, il faut visiter getbootstrap.com qui propose, entre autres, un guide de migration de Bootstrap 2 vers Bootstrap 3.
 

 

J’ai testé pour vous CocoonJS !

J’ai testé pour vous CocoonJS !

Comme nous avons pu le constater au travers de notre R&D, l’utilisation de l’API canvas apportée par le HTML5 au sein d’un application mobile donne des résultat plutôt mitigés en terme de performance.

Après quelques recherches sur la toile, il s’agit effectivement d’un problème général sur la majorité des terminaux mobile dont la puissance moyenne ne suffit toujours pas à faire tourner des applications canvas un minimum complexes.

Ceci est sans compter sur CocoonJS (http://ludei.com/tech/cocoonjs), un service dans le cloud permettant de compiler une application HTML5 en application iOS/Android (et même « Pokki » dont je ne connaissais pas l’existence).

Je vous entends déjà vous interroger: « Mais on a pas déjà PhoneGap pour ça ?« . Tout à fait ! mais là où se démarque CocoonJS  c’est qu’il apporte une optimisation de l’API canvas pour la rendre plus performante. Le résultat est bel est bien au rendez-vous puisque après avoir porté une petite application de « Shooter » sur CocoonJS j’ai bel et bien pu remarquer une nette amélioration.

L’un des inconvénients est que la compilation se fait exclusivement en ligne, il ne semble pas y avoir d’outils pour compiler sur sa propre machine. Il existe bien une application iOS et Androïd appelée « CocoonJS Launcher » permettant de tester l’application en fournissant un zip des sources HTML et JS mais ça reste tout de même un peu léger.
Un autre inconvénient est que nous n’avons pas à disposition toute l’API que peut fournir PhoneGap mais, en contrepartie, CocoonJS fournit des extensions plutôt intéressantes tel que la capture du flux vidéo, la gestion des notifications locales, le support de la librairie physique Box2D en natif, etc…

En conclusion, CocoonJS est une alternative très intéressante à PhoneGap tant que l’on reste dans le domaine du jeu mobile et est donc à surveiller de très près !

 

Popin & transitions JS/CSS

Popin & transitions JS/CSS

Découvrez Alertify, une petite librairie JavaScript permettant de créer simplement des popins. Cela peut être utile pour présenter du contenu informatif de façon élégante.

 

Et pour animer les sites,  je vous suggère Effeckt.css, même si cette librairie est en cours de développement, elle promet d’être intéressante : « Performant CSS transitions & animations ». À surveiller attentivement !

 

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)

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.

Page 3 of 4 1 2 3 4