Posts taggés Intégration

Que nous réserve Bootstrap 4 ?

0

bootstrap

 

Les occasions de spoiler sur un framework CSS étant beaucoup plus rares et moins culpabilisantes que pour une série tv ou pour un film, il était impossible de ne pas succomber à l’envie de vous dévoiler les nouveautés les plus importantes de cette version qui bien que non définitive comporte l’essentiel des changements.

Quelles innovations va donc apporter Bootstrap 4 (actuellement en version V4.0.0-alpha.2), et quelles seront les déceptions éventuelles qui pourraient découler de ces évolutions ?

 

Commençons par les points négatifs..

Qui n’ont pour la plupart de négatif qu’un aspect restreint suivant les utilisations désirées de chacun.
Il fallait presque s’y attendre, Bootstrap 4 a fait le choix de ne plus supporter IE8. Ainsi, c’en est fini du HTML5 shiv et du respond.js, place est faite à l’utilisation pleine des technologies CSS3 (animations, transitions, JavaScript ES6, Media Queries).
Evidemment, pour certain ayant toujours besoin du support d’IE8 dans leurs projets, il restera comme solution la possibilité de rester avec Bootstrap 3 qui rassurez-vous, ne va pas disparaître du jour au lendemain.

Un autre point important, est celui du passage de l’utilisation des préprocesseurs CSS Less et Sass dans Bootstrap 3 à l’utilisation unique de Sass dans Bootstrap 4. Certes les partisans et habitués de Less seront déçus mais ce changement fera aussi le bonheur des nombreux utilisateurs de Sass car contrairement à Bootstrap 3 pour lequel l’implémentation de Sass n’était qu’un portage, dans Bootstrap 4 toute la structure a été pensée pour une utilisation optimale de Sass. Sass étant plus populaire et offrant plus de possibilités, ce choix semble à juste titre être le bon.

Impossible d’y échapper : pour les réfractaires, il va falloir s’y mettre !

On notera au passage la discrète disparition des Glyphicons, qui laissent la place entière à FontAwesome. Rien de très perturbant.

 

Passons plutôt aux bonnes nouvelles..

Avec Bootstrap 4 un nouveau palier vient à notre plus grande satisfaction s’insérer dans la grille qui passe de 4 paliers avec Bootstrap 3 à 5 paliers avec Bootstrap 4. Ce nouveau palier va permettre de s’adapter plus finement aux plus faibles résolutions, celles dont le viewport est inférieur à un width de 544px. Qui a parlé d’iPhone 4 ? 😉

Paliers du système de grille dans Bootstrap 3 :

3

Paliers du système de grille dans Bootstrap 4 :

b4

 

L’abandon du support d’IE 8 a ouvert la voie aux unités relatives. Ainsi les REMs et les EMs seront de la partie dans Bootstrap 4 et cette implémentation a pour conséquence d’avoir la Typographie Responsive au programme. Ceux pour qui ces termes n’évoquent qu’un fin brouillard, sachez qu’en réalité l’utilisation de la Typographie Responsive est simple.

Un font-size est spécifié à la racine (rem pour root em), sur la balise <html>. Toutes les autres tailles de polices utilisées dans la page sont en rem. Si on modifie le font-size de la balise <html>, la magie opère et toutes les font-size de la page changent de manière proportionnelle.
C’est un atout et gain de temps incontestable pour optimiser le support de tout type d’écran.

Un autre changement visible est celui de la disparition des composants wells, thumbnails et panels, qui en réalité sont épurés en fusionnant pour donner « cards ».
Cards agit comme un content manager, il conservera beaucoup d’éléments de ses prédécesseurs en plus de promettre d’être plus flexible. De plus les cards sont une des tendances de l’année 2016 concernant le design des sites, il est donc guère étonnant de les retrouver dans cette nouvelle version.

 

Bootstrap 4 passe désormais de l’incontournable fichier de reset qu’est Normalize.css à Reboot.
En un seul fichier Sass, on retrouve dans Reboot tous le CSS des sélecteurs génériques complétés par un reset des styles, le tout dans le but d’avoir plus de flexibilité dans la réinitialisation.

En y regardant de plus près, on y trouve entre autre l’utilisation du box-sizing:border-box, ainsi que des réglages de marges affinés.

D’une manière générale, Bootstrap 4 applique le « single direction of margin », qui n’est pas une nouvelle philosophie de vie mais qui consiste à avoir un margin-top à zéro et une valeur de margin-bottom en rem sur les éléments pour éviter le problème de fusion des marges qui peut survenir.

94

 

Parler de Bootstrap 4 et omettre l’innovation majeure que représente le support de flexbox serait impardonnable..

Avec flexbox c’en est fini des blocks, des inlines et des floats pour la disposition des éléments. Flexbox est un nouveau modèle de boite qui efface les tracas des développeurs front.

Avec flexbox l’alignement vertical des cellules (top, bottom, middle) se fait avec une facilité déconcertante. Flexbox possède beaucoup d’autres avantages dont la possibilité de réordonner chacun des éléments avec la propriété ‘order’.

Malheureusement, nombreux seront ceux qui passeront à coté de cette évolution fantastique, car IE 9 ne prenant pas en charge flexbox, Bootstrap a jugé bon de ne pas activer la grille flexbox par défaut. Pour en profiter pleinement, il suffit simplement de passer à true la variable $enable-flex dans le fichier _variable.scss puis de recompiler.

44

 

Une autre amélioration est l’intégration de la librairie Theter aux tooltips (infobulles) et popovers, pour un meilleur positionnement. Evidemment, il ne faut pas oublier d’inclure theter.js à la page, si on veut utiliser tooltips et popovers.

Bootstrap 4 donne naissance à de nouvelles classes d’espace (nommées spacing utilities) pour positionner des éléments.

La forme générale sera la suivante :
[ margin ou padding ] – [ direction ] – [ taille ]

Voici un exemple : <div class= »col-sm-4  m-b-lg « >

m : margin
b : bottom
lg : large

 

L’autre avantage que présente l’abandon du support d’IE 8 est que maintenant l’utilisation de jQuery 2.0 peut se faire sans crainte. jQuery 2.0 est plus compact, plus rapide et possède plus de fonctionnalités. Pourquoi s’en priver ?

 

À l’heure actuelle, il n’est mentionné aucune date de sortie de la version finale.

On retrouve dans leur plan de développement que plusieurs versions alpha, deux versions bêta, ainsi que deux versions Release Candidat sont prévues avant de voir la version finale. Donc patience !

Bootstrap 4 s’annonce d’ores et déjà comme une excellente mouture incluant de belles évolutions (qui ne se sont pas faites sans sacrifice, on pense à l’arrêt du support d’IE8), si toutefois on ne passe pas à côté du système de grille flex qui à lui seul représente la plus belle évolution de Bootstrap 4, mais qui est désactivé par défaut.
N’attendez pas la sortie finale pour y jeter un œil.

La version alpha est disponible ici : http://v4-alpha.getbootstrap.com 

Pour connaître les dernières évolutions c’est par ici : http://blog.getbootstrap.com 

 

sublimeBracketsAtom_2

SUBLIME TEXT vs BRACKETS vs ATOM : 3 IDE pour les intégrateurs passés au crible

4

 

En matière d’outils pour le développement web, un large choix d’éditeurs de texte s’offre aux intégrateurs. Faisons ici un petit comparatif de trois IDE qui méritent d’être connus, si ce n’est pas encore le cas, par les intégrateurs.

 

Ces trois IDE ont communément des fonctionnalités de base telles que la coloration syntaxique, l’auto-complétion et la numérotation des lignes, toutes utiles pour faciliter tout travail d’intégration. Voyons maintenant ce qui les différencie.

Sublime Text

Sublime Text a acquis progressivement une renommée significative et est l’un des éditeurs les plus populaires depuis sa sortie en 2008.

Sublime Text est développé avec le langage de programmation Python.

Rapide et stable, il se lance en un rien de temps et ne ralentit pas, même avec  une installation importante d’extensions ou encore avec l’ouverture de plusieurs fichiers.

L’outil se caractérise également par une interface sobre et élégante.

Il est disponible sur tous les systèmes d’exploitation (OS, Linux et Windows), ce qui permet de le standardiser dans une équipe multiplateforme.

 

Principaux avantages

  • La navigation/recherche au travers d’un ensemble de fichiers (ex : trouver un morceau de code)
  • Sélection multiple (ex : faire plusieurs modifications en une fois)
  • Mode d’affichage multiple
  • Une colonne à droite permettant  de se repérer sur la page
  • Choix et création d’une multitude de raccourcis
  • Un nombre très important de plugins et une belle sélection de thèmes
  • Une palette de commande permettant d’accéder à de nombreuses fonctionnalités, snippets (configurer les préférences, insérer des portions ou des structures de code)
  • Une API bien documentée pour les développeurs de plugins

 

Inconvénients

  • Il n’est pas gratuit. On peut toutefois l’utiliser sans licence avec l’affichage régulier d’une popup de notification demandant de passer à la version payante.

 

sublimetext1

Palette de commandes composée d’une liste importante d’outils intéressants 

(insertion de snippets, renommer un fichier, configurer les préférences, etc.)

 

sublimetext2

Sélection multiple

 

sublimetext3

Navigation entre les fichiers d’un projet

 

sublimetext4

Proposition d’attributs CSS

 

Quelques plugins pratiques 

  • Package Control : indispensable, il s’agit d’une extension permettant d’installer des plugins. Une fois installée, il suffit d’ouvrir le panneau de commande et de sélectionner « install package » pour avoir accès à la liste de la majorité des plugins de Sublime Text.
  • Emmet : l’ancien Zen coding, assure un gain de temps dans l’écriture du HTML
  • CSSLint : signale les erreurs CSS
  • SCSS : permet de gérer les fichiers SCSS
  • Color Highlighter : au clic sur le code hexadécimal, la couleur correspondante apparait
  • ColorPicker
  • Live Reload : rafraichit le navigateur dès que l’on modifie un fichier
  • JavaScriptNext : permet d’obtenir une meilleure coloration syntaxique du Javascript
  • JsHint : permet de détecter des problèmes ou des erreurs potentielles en Javascript

 

Brackets

Créé par Adobe, Brackets est un éditeur écrit en HTML, CSS et Javascript qui a la particularité d’intégrer des outils visuels directement dans son interface (on peut y importer le PSD d’une maquette). Brackets est spécialement pensé pour le développement web, particulièrement le front. L’interface reste dans la lignée des autres logiciels d’Adobe.

 

Principaux avantages

  • Édition rapide : Brackets permet d’éditer les styles directement dans le fichier HTML, évitant ainsi d’ouvrir plusieurs fichiers liés et de passer continuellement des uns aux autres.
  • Aperçu en direct : cette fonctionnalité ouvre un aperçu du fichier HTML dans le navigateur puis le met à jour instantanément dès que l’on modifie le code (HTML ou CSS).
  • Les fichiers JS par contre sont en revanche automatiquement chargés après enregistrement.
  • Aide sur les attributs CSS avec la proposition des différentes valeurs possibles
  • Support des préprocesseurs Less et Sass
  • Intégration native de JSHint : A l’ouverture d’un fichier JS, un petit panneau s’affiche juste en-dessous avec les erreurs Javascript associées.
  • Grande sélection de thèmes et de plugins
  • Prévisualiseur natif d’images et de couleurs
  • Colorpicker natif
  • Éditeur de courbes de Bézier pour configurer une animation
  • Intégration d’Adobe Extract (outil permettant d’ouvrir un PSD en ligne) : des informations CSS sont fournies sur les éléments graphiques
  • API bien documentée
  • Multiple choix de langues

 

Les mises à jour et l’ajout de nouvelles extensions se font toutes les 3/4 semaines.

 

Inconvénients

  • L’aperçu en direct ne fonctionne qu’avec Chrome. Le plugin LiveReload permet toutefois d’obtenir l’équivalent sur Firefox ou Safari.

 

brackets1

Edition rapide du CSS  directement dans le fichier HTML

 

brackets2

Prévisualiseur/éditeur de couleur intégré

 

brackets3

Intégration d’un PSD dans Brackets avec des informations sur certains styles CSS correspondants

 

Quelques plugins pratiques

  • Le très pratique Emmet : génère du code HTML et CSS en utilisant seulement des abréviations
  • LiveReload (vu précédemment)
  • Beautify : propose une indentation du code utile pour une meilleure lisibilité
  • Image Dimension Extractor : renseigne sur la taille des images dans le CSS
  • Todo : outil qui permet d’ajouter des notes ou commentaires pour soi ou pour les autres

 

Atom

Atom, sorti en 2014, est un produit open source créé par l’équipe de Github. Atom est construit à partir de technologies Web telles que le HTML, le CSS et le JavaScript.

Il ressemble beaucoup à Sublime Text tant visuellement que fonctionnellement, mais se veut être un éditeur totalement flexible et personnalisable.

 

Principaux avantages 

  • Éditeur multiplateforme
  • Mode d’affichage multiple
  • Sélection multiple
  • Librairie de nombreux outils (thèmes, plugins) à disposition
  • LiveReload natif
  • Aperçu en direct du résultat du HTML (mais pas du CSS)
  • Intégration de Git et GitHub
  • Utilisation d’une grande partie des raccourcis de Sublime Text
  • Documentation très fournie

 

Inconvénients

  • Actuellement, l’équipe Github n’a pas comme projet de mettre à disposition d’autres logiciels de gestion de versions sur Atom. De plus, la configuration d’Atom permet difficilement de pouvoir développer des plugins à cet effet.

 

atom1

Aperçu en direct du HTML

 

atom2

La palette de commande façon Atom

 

atom3

Mode d’affichage multiple. Librairie d’outils native pratique.

 

Quelques plugins pratiques

  • Emmet : génère du code HTML et CSS en utilisant seulement des abréviations
  • CSSLint : signale les erreurs CSS
  • ColorPicker
  • JSHint : permet de détecter des problèmes ou des erreurs potentielles en Javascript

 

Synthèse

Le célèbre Sublime Text reste l’IDE le plus mature et garde sa position de leader en terme de stabilité, de rapidité, mais également grâce à sa plus large sélection de fonctionnalités et de plugins.
Atom pour sa part, ressemble beaucoup à Sublime Text, mais se différencie néanmoins avec sa complémentarité avec Git/Github. Ce grand plus, qui rappelez-vous vient du même constructeur, pourrait intéresser ceux qui travaillent en équipe ou tout simplement ceux qui apprécient de garder une trace de leurs différentes modifications.
Cependant, Brackets apporte sa touche révolutionnaire en proposant de nouvelles fonctionnalités tout à fait pratiques comme l’édition rapide de fichiers ou encore la mise à disposition d’Extract. Il faut admettre que ces nouvelles fonctionnalités sont très intéressantes pour un profil d’intégrateur car tout est pensé pour lui assurer un gain de temps. Il est d’ailleurs étonnant que d’autres éditeurs n’y aient pas pensé avant.

D’un point de vue ergonomique, Brackets me semble l’éditeur le plus sympathique.
Quand on sait que les éléments graphiques sont incontournables dans le travail d’un intégrateur, on se dit également que Brackets a l’avantage car il réunit nativement tous les outils nécessaires, notamment avec sa complémentarité avec Extract. On ne peut le nier, c’est un éditeur qui concentre toute son attention sur les besoins des développeurs front. Pour tous ces éléments évoqués précédemment, et surtout en tant qu’intégrateur, Brackets serait l’éditeur idéal et cela ne serait pas étonnant s’il détrônait prochainement le grand SublimeText.
Dernière chose, Brackets et Atom, sont tous deux développés en HTML, CSS et Javascript, ce qui facilite la tâche de beaucoup de développeurs pour le développement de plugins.

Vous avez maintenant tous les éléments en main pour décider par vous-même !

 

  TABLEAU COMPARATIF 
Sublime text Brackets Atom
Rapidité/Stabilité/Performance Leader En constante amélioration En constante amélioration
Open Source ✔️ ✔️
Prix 70$
Peut s’utiliser en version d’évaluation sans limite de durée
✔️
Gratuit
✔️
Gratuit
Multiplateforme
(OS, Linux & Windows)
✔️ ✔️ ✔️
Bien documenté ✔️ ✔️ ✔️
Personnalisable ✔️ ✔️ ✔️
Sélection multiple ✔️ ✔️ ✔️
Edition rapide du CSS dans un fichier HTML ✔️
Mode d’affichage multiple ✔️ Moins significatif que les autres ✔️
Gestionnaire de version intégré Pas natif
(exige des plugins tels que Git ou Sublime Version)
Actuellement, aucune évolution à ce niveau ✔️
(Git/Github)
Aperçu en direct ✔️
(Structure et mise en forme)
✔️
(Structure uniquement)
Mises à jour Actuellement, en version 3 bêta Toutes les 3/4 semaines Très régulières
Site de téléchargement http://www.sublimetext.com http://brackets.io/ https://atom.io