Archive for css3

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

Les nouveautés de Cordova 5.0.0

Les nouveautés de Cordova 5.0.0

Le 21 avril est sortie la version 5.0.0 de Apache Cordova, et cette nouvelle version majeure apporte un nombre important de nouveautés et de changements dans l’écosystème.

Tout d’abord les plugins ont été renommés, les identifiants du type org.apache.cordova.* sont devenus cordova-plugin-*. Ce changement résulte du fait que les plugins sont désormais publiés sur npmjs.org.

Pour trouver de nouveau plugins il suffit d’utiliser la commande suivante qui liste tous les plugins cordova disponibles :

La classique commande cordova :

évolue aussi pour prendre en compte ce nouveau repository. D’ailleurs l’ancienne adresse http://plugins.cordova.io a vocation à fermer dans les prochains mois, le temps que la transition se fasse vers npm.

Concernant les plugins, autre changement : il est désormais nécessaire d’installer le plugin cordova-plugin-splashscreen pour Android si l’on souhaite ajouter un écran de chargement à notre application (qui n’est donc plus une fonction disponible par défaut).
De même le plugin cordova-plugin-whitelist est obligatoire pour Android afin d’autoriser le chargement de ressources externes.

Cordova 5.0.0 s’accompagne également de la version 4.0.0 de Cordova Android avec elle aussi son lot de nouveautés.
La plus importante (pour ne pas dire révolutionnaire) est qu’il est désormais possible d’utiliser d’autres WebViews que celle fournies de base par Android 4.* et 5.*
Grace au projet Android Crosswalk (développé par Intel) on peut maintenant s’assurer d’utiliser une WebView récente, identique sur tous les terminaux android, avec les dernières API JavaScript, le support de syntaxes et de propriétés CSS supplémentaires, et bien évidemment des outils de débogage avancés comme le remote debugging réservé jusqu’ici de base aux terminaux avec Android kitkat minimum.

Les autres plateformes Cordova ont elles aussi été mises à jour, les version actuelles sont les suivantes :
Cordova Amazon-FireOS: 3.6.3
Cordova Android: 4.0.0
Cordova BlackBerry10: 3.7.0
Cordova Browser: 3.6.0
Cordova FirefoxOS: 3.6.3
Cordova iOS: 3.8.0
Cordova Ubuntu: 4.0.0
Cordova Windows: 3.8.1
Cordova WP8: 3.8.0

Vous trouverez tous les détails sur les autres changements dans les articles officiels de Cordova :

Podcast web

Podcast web

Les technologies du web évoluent constamment. Chaque jour, des nouveaux outils, des nouveaux frameworks, des nouvelles tendances font leur apparition si bien que, chez Kumquats, on fait de la veille tous les jours pour se tenir informé.Et quand on n’a pas le temps de lire ce qu’écrivent les blogueurs sur le développement web, on peut aussi les écouter. Voici une petite sélection de podcast francophone à écouter en faisant la vaisselle (quoi, vous avez un lave-vaisselle ?). 

La première émission se nomme la DebugRoom et nous parle de développement Web et mobile. Ce jeune podcast (4 épisodes pour l’instant) aborde des sujets aussi diversifiés que la sécurité sur WordPress, Phonegap ou le cloud pour les développeurs. Il se divise en 4 parties :
La section Veille avec les dernières infos du web
Le dossier où ils abordent le sujet principal avec régulièrement des invités experts.
La Zone 404pour la détente avec des liens rigolos
La Toolbox qui présente des outils à tester dans nos développements
Un lundi sur deux / DebugRoom

Autre podcast orienté développement : NipDev. Une équipe de passionné se réunit toutes les 2 semaines pour nous parler de web à travers différents sujets comme par exemple les API REST, les « single page application », les tests unitaires ou encore le développement pour les mobiles.
Un mercredi sur deux / NipDev

Pour les férus de design, retrouvez chaque mois les zombies de the Walking Web pour suivre l’actualité du web design et de l’actualité numérique. Au programme : des objets connectés, de l’expérience utilisateur ou comment rendre son site plaisant et facile à utiliser, du design mobile, des conférences, de l’inspiration et pleins d’autres choses encore. Animés par 6 chroniqueurs travaillant tous dans le design, le podcast se déroule comme suit:
Previously on TWW : le résumé de l’épisode précédent
Je like / Je like pas : les avis de chacun sur les dernières nouveautés
Les lectures de Francis : la présentation d’un livre
Le GROS sujet : le sujet principal de l’émission
The Web Quizz : un quizz entre les membres de l’équipe posant des questions techniques, pratiques, artistiques…
Le WTF : pour finir l’émission sur une note d’humour
Chaque mois / The Walking Web 

Et pour terminer, je vous propose de suivre les soirées *di*/zaïn qui se déroulent à la Gaité Lyrique à Paris. Le concept : réunir 10 designers qui ont 10 minutes pour présenter leurs projets, le tout autour d’un thème global (le dernier était « Enchantements » avec des projets pleins de poésie). On aborde ici le design au sens large, aussi bien design interactif, design industriel ou encore l’architecture. On peut suivre les soirées en direct et réagir via twitter.
Chaque mois / les soirées *di*/zaïn

Ouvrez grand vos oreilles pour rester informé !

 

 

Uniformiser le rendu des typos web

Uniformiser le rendu des typos web

Vous êtes-vous déjà rendu compte que les typos web n’étaient pas affichées de la même manière suivant les navigateurs ?

 

Avec Type Rendering Mix, une librairie javascript, vous pouvez jouer avec les rendus des typos pour obtenir un affichage identique (ou pas loin) sur les différents navigateurs ou OS.

Cet outil est à réserver aux adeptes du pixel perfect car tout se gère manuellement !

 

 

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.
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 » :)

 

Rappel sur les unités en CSS

Rappel sur les unités en CSS

En CSS, on dispose d’un florilège d’unités de mesure à ne plus savoir quoi en faire.

 

Cet article listant les différentes unités que nous avons à disposition explique également dans quelles situations elles sont le plus adaptées et dans lesquelles elles ne le sont pas.

 

On apprend, par exemple, que les « px » sont idéals pour les design fixes mais, qu’en revanche, ils sont effectivement déconseillés pour définir les breakpoint des media queries.
On apprend également qu’il existe certains cas ou les valeurs brutes (sans unité) sont à privilégier. C’est par exemple le cas pour les propriétés « line-height » et « border-image ».

Source : http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

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.
 

 

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 !

 

Design de boutons

Design de boutons

Creative Button Styles

Un peu de design aujourd’hui avec ce pack de boutons assez sympa qui intègre des animations au rollover ou au clic. Par exemple dans la partie verte, les animations correspondent à l’action du bouton, comme la poubelle qui se vide.
Les animations sont réalisées en CSS3 et donc compatibles avec tous les navigateurs modernes (oubliez IE7, IE8, IE9 ! )
kumquats-labs-creativebuttons 

Ladda button

Un autre pack de boutons de Hakim El Hattab, le créateur de slid.es, qui intègre des loaders directement dans les boutons d’action. Les animations sont aussi en CSS3 donc pas d’IE7/IE8.
kumquats-labs-ladda