Tous les articles pour 2014

Utilisation optimisée de Framework CSS comme Bootstrap avec Less

Le 23 Décembre 2014 à 13h09

0 commentaire

J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité.

J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework.

Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design.

Lire la suite
Éviter les multiples $(document).ready() dans vos pages web

Le 22 Octobre 2014 à 15h40

0 commentaire

Une chose qui me gène avec la $(document).ready() de la librairie jQuery, c'est que c'est une magnifique porte ouverte aux mauvaises pratiques JavaScript. Elle empèche les développeurs web en herbe de se pauser les bonnes questions et pire encore, comme j'ai pu le constater récemment, aux développeurs à priori chevronnés d'en faire de même...

Oui, le $(document).ready() peut être utilisé plus d'une fois dans un ensemble de fichier et oui, il peut être placé n'importe où dans une page HTML mais non, ce n'est absolument pas vous rendre service que de faire cela ! Ce n'est pas parce que l'on peut, que l'on doit.

Mettre ces déclarations un peu partout rend plus difficile la relecture et le debug du code en empêchant de savoir qui s'exécute avant qui sans regarder l'ordre d'appel des fichiers. Effectivement, si cela semble simple et pratique quand 3 fichiers se battent en duel, cela peut rapidement devenir complexe. De plus, si une exception est levé dans l'un des $(document).ready(), aucun des autres n’exécutera plus rien du tout. Pour finir, le code est ralenti lors de l'appel de plusieurs $(document).ready() contre un seul, ou contre aucun d'ailleurs.

Don’t let jQuery’s $(document).ready() slow you down

Dans cet article nous allons voir l'une des dizaines de façon de vous passer de $(document).ready() dans vos pages web. Le maître mot ? Un seul point d'entré pour l'ensemble du code exécuté sur une page. Vous trouverez également un exemple de la méthode décrite dans cet article dans ce repository GitHub.

Lire la suite
Les Margins se comportent comme des Paddings avec les grilles Bootstrap

Le 17 Octobre 2014 à 10h36

0 commentaire
Voilà les petites bases qu'il faut rapidement se mettre en tête à propos de la différence entre les marges externes ou margins et marges internes ou paddings :
- Les margins d'un élément HTML se superposent avec les margins de leur voisin, avec les margins de leur parents, avec les margins des enfants des voisins, etc. Puisqu'elles se trouvent à l'extérieur des borders, elles ne sont pas affectées par les backgrounds.
- Les paddings d'un élément HTML s'additionnent ou se cumulent avec les paddings de leur voisins, avec les paddings de leur parents, avec les paddings des enfants des voisins etc. Puisqu'elles se trouvent à l'intérieur de border, elles sont affectées par les backgrounds.
Deux trois autres chose rapide sont à savoir : comme le fait qu'un élément inline ne gère pas les paddings ou qu'un margin négatif déplace les éléments contrairement au padding négatif qui ne fait rien, etc.

Mais saviez-vous que : Si les éléments deviennent flottants en continuant de prendre toute la largeur... les marges externes se comportent comme les marges internes !
Lire la suite
- CSS
- Astuces
- Front-end
- Bootstrap
- Spécifications
- Bonnes Pratiques
- HTML
Centrer verticalement n'importe quel élément en quelques lignes CSS

Le 14 Octobre 2014 à 10h00

0 commentaire
Une solution rapide et qui fonctionne sur tous les navigateurs à partir de IE9 est le centrage vertical avec la valeur CSS3 translateY de la propriété transform.

Pour mettre cela en place, trois simples propriétés :
1. On place l'élément en relatif pour le repositionner par rapport à son élément parent avec position: relative;.
2. On déplace l'élément de la moitié de la hauteur de l'élément parent avec top: 50%;, la référence de déplacement étant actuellement son bord haut.
3. On re-centre l'élément non plus à partir de son bord haut mais de son centre vertical avec transform: translateY(-50%);
Et voilà !
Lire la suite
Gérer sa cascade de grille et de composant avec Bootstrap

Le 10 Octobre 2014 à 14h37

0 commentaire
Afin d'apporter un cadre à l'équipe et parce que créer nos propres UI Kit n'est pas à l'ordre du jour, nous avons pris le partie d'utiliser Bootstrap 3 non sans chagrin.

L'idée finale derrière cette utilisation est de pouvoir créer facilement des composants et de pouvoir les déplacer n'importe ou dans un layout ou dans un composant lui-même.

Après avoir défendu l'idée que je n'avais pas besoin d'un quelconque Framework pour réaliser cela, je me suis atteler à Bootstrap.

Les remarques n'ont pas tardées à tomber sur la manière d'intégrer tout cela :
- « Ça ne sert à rien de mettre un “.col-xs-12” ici, ça revient au même de ne rien mettre »,
- « Pourquoi il n'y a pas un seul “.container” pour gérer toute la page comme dans la source de cette page »,
- « Il ne faut pas mettre les “.container” dans les composants mais à l'extérieur sinon en mettant les composants dans des petites colonnes on va dépasser la largeur de la grille. Regarde la source de cette page »,
- « T'as pas besoin de “.container” pour utiliser des “.row” », etc.
Le constat est clair, l'utilisation de Bootstrap pour réaliser des pages en imbriquant des composants est une chose, mais le faire correctement en est une autre !

Suivez le guide pour comprendre les guidelines que doivent suivre tout composant pour être « Drag and Droppable » n'importe où !
Lire la suite
Conserver un affichage Desktop sur mobile avec une version Responsive Web Design

Le 08 Octobre 2014 à 10h43

0 commentaire
Depuis que le Responsive Web Design a commencé son invasion, beaucoup de site ne possède plus qu'une unique version qui gère :
- un affichage complet pour écrans larges de type écran d'ordinateur (Desktop) et
- un affichage léger et partiellement complet pour les écrans de type mobiles/tablettes.
Cela revient souvent à inhiber des fonctionnements jugés peu utiles par les développeurs ou ergonomiquement trop instables pour être présentés sur les petits appareils et empêche alors :
- d'afficher la version Desktop sur les mobiles/tablettes ou
- d'afficher la version Desktop dans une fenêtre de navigateur rétréci.
Je vous propose, à travers des exemples CSS-Driven, de vous expliquer comment gérer deux versions d'affichage de vos pages avec comme toujours une seule structure HTML sémantique.
Lire la suite
- Développement Web
- Front-end
- Node.js
- CSS3
- Concept
- CSS
- Techniques de Dev
- NodeAtlas
- Astuces
Valider les formulaires simplement, et sans JavaScript

Le 07 Août 2014 à 15h04

0 commentaire
S'il y a bien une action redondante et qui nécessite de passer par la case JavaScript, c'est bien la validation des formulaires ! Mais sachez qu'il est possible de les valider sans utiliser une seule ligne de code ! J'avoue, je triche un peu quand je dis ça. En réalité il n'y a rien de magique et il faudra tout de même inclure trois scripts pour réaliser cela, mais il ne sera pas nécessaire que vous écriviez du JavaScript.

Voyons ici quel sont ces scripts et parcourons les différents cas de figure pour valider des champs vides, vérifier qu'un email est bien formé ou encore qu'une confirmation de mot de passe correspond bien au mot de passe initialement tapé. Par exemple, pour vérifier qu'un champ « Pseudo » est bien remplis et indiquer la place de son message d'erreur, il suffirait de le déclarer dans un formulaire comme ceci :
```
<label for="pseudo">Pseudo</label>
<input type="text" name="pseudo" id="pseudo" placeholder="MachinisteWeb"
       data-rule-required="true"
       data-msg-required="Le champ Pseudo est requis." />
<span data-valmsg-for="pseudo" data-valmsg-replace="true"></span>
```
C'est donc parti pour :
1. Trouver votre bonheur dans l'exemple complet suivant : http://codepen.io/MachinisteWeb/pen/AzJgF/
2. Ou/Et lire la suite de ce billet pour en apprendre un peu plus sur le jQuery Validation Unobstrusive Plugin.
Lire la suite
StackEdit.io, l'éditeur Markdown en ligne par excellence !

Le 28 Juin 2014 à 09h22

0 commentaire

Connaissez vous les langages Markdown ? Mais si, il est probable que vous en connaissiez sans même savoir qu'ils pouvaient être nommés. Vous avez déjà écrit un texte sur un Wiki ? Rédigé une carte sur Trello ? Rédigé un Readme sur GitHub ou sur BitBucket ? Un commentaire sur CodePen ? Vous les avez déjà croisés ces .md rarement reconnus de base par les bloc-notes.

Source : lh4.googleusercontent.com

Non ? Si cela ne vous parle pas, sachez que Markdown pourrait devenir votre meilleur ami pour écrire des spécifications précises ou vagues sur vos projets, seul ou avec vos collègues avec un minimum d'efforts grâce à StackEdit.io. Vous pourriez même au final écrire toutes sortes de choses facilement !

Lire la suite
Grille CSS Responsive et Sémantique sans Framework

Le 23 Juin 2014 à 13h35

0 commentaire

Il y a quelque temps, j'expliquais qu'il était difficile d'obtenir un travail Front-end de qualité avec des Frameworks CSS HTML-Driven. Le gros reproche que je fais à ces Frameworks est de prendre le contre pied de l'approche du W3C qui met tout en œuvre avec HTML5 et CSS3 pour complètement effacer toute trace de design dans l'architecture HTML et la rendre structurellement sémantique.

Un Framework CSS c'est vraiment pratique pour ne pas trop se mouiller et gagner du temps parait-il. On me dit d'ailleurs souvent que les systèmes de Grid c'est bien pratique. Ce que j'en pense pour ma part c'est qu'on ne peut jamais sortir des chemins battu d'un Framework lourd à moins de parfaitement connaître les mécanismes de celui-ci pour le contrer. Et dès lors qu'on est assez aguerrit pour comprendre des mécanismes menant à des « abstractions qui fuient », on est alors assez aguerrit pour s'en passer.

Sachez que l'on peut facilement se passer de Framework pour gérer une grille Responsive Web Design propre et maintenable en évitant ainsi d'horribles codes comme <div class="header col-xs-12 col-sm-6 col-sm-push-6 text-right-sm bg-info"> tout en restant maître de ce que l'on fait. Cette page CodePen en est un exemple.

Suivez-moi, je vais vous montrer !

Lire la suite
Maîtriser les requêtes au chargement d'une page web

Le 19 Juin 2014 à 11h30

0 commentaire

Quand une page web est chargée, les éléments externes à celle-ci sont appelés tout au long de son chargement pour permettre au navigateur d'afficher le résultat visuel final. Cela prend du temps, et certains chargements bloquent le rendu alors que d'autres non. D'autres encore sont ignorés tant qu'une action de la part de l'utilisateur n'a pas été effectuée.

Pour bien comprendre et manager ses chargements de page, je vous propose de comprendre une liste de comportement au chargement des ressources pour Chrome, Safari, Firefox, IE et Opera.

Lire la suite
Bootstrap est une régression pour un développement Front-end de qualité

Le 17 Mai 2014 à 17h40

0 commentaire

Pourquoi je n'utilise pas Bootstrap ? Cela peut sembler une « évolution » de nos méthodes de travail front-end, mais gare au loup et attention de ne pas tomber dans un travers que le W3C tente d'enrayer au fur et à mesure des évolutions HTML et CSS.

Commençons par le commencement. Qu'est-ce que Bootstrap ? Comme pleins d'autres « Bibliothèque » ou « Framework » CSS dans la même veine, Bootstrap est un outil permettant d'augmenter la productivité des développeurs front-end le maîtrisant, dans le but de fournir le plus rapidement possible un rendu visuel ergonomique et si possible responsive.

Mon problème ne vient pas tant de sa finalité qui est louable, mais bel et bien de la mise en œuvre technique qui permet d'atteindre cette finalité. Pour être concis avant de développer : l'utilisation faites de Bootstrap est une régression pour un travail front-end de qualité.

Je ne compte persuader personne, et à défaut de convaincre, je vais au moins vous expliquer mon point de vue.

Lire la suite
- xHTML
- HTML5
- Développement Web
- CSS
- Bootstrap
- Front-end
- Techniques de Dev
Utiliser Sublim Text avec Visual Studio

Le 15 Mai 2014 à 15h42

0 commentaire

Récemment, pour travailler avec mes collègues du Back-end C#, j'ai du « abandonner » Sublim Text 3, mes plugins tel que Hayaku ou Emmet et tout un tas de raccourcis me privant d'une productivité non négligeable.

J'ai bien cru que cela était fini quand je devais travailler sur leurs projets dans leurs environnements mais heureusement il n'en n'est rien ! Suivez-le guide, je vais vous expliquer.

Lire la suite
- Développement Web
- Outils
Alignement de texte Responsive avec Bootstrap

Le 14 Mai 2014 à 10h18

0 commentaire

J'ai évoqué pourquoi je n'utilisais pas Bootstrap. Cependant, l'un des pré-requis pour un nouveau projet est de l'utilisé aussi j'ai retroussé mes manches pour approfondir la philosophie et j'ai déjà commencé à me casser les dents !

Aligner un texte à gauche sur version mobile puis à droite sur version desktop est chose aisé en CSS avec les Media Queries. Gérer le fait que deux colonnes côte à côte sur version desktop passe l'une sous l'autre sur version mobile l'est également avec Bootstrap. Pourtant aligner un texte à gauche sur version mobile puis à droite sur version desktop aussi facilement que la gestion des colonnes n'est pas possible...

Je vais vous présenter un petit pan de code remédiant à cela.

Lire la suite
Différences entre async et defer en HTML5

Le 24 Avril 2014 à 10h30

0 commentaire

La balise HTML script permet de définir quand le code JavaScript dans votre page est exécuté. Les attributs HTML5 async et defer sont à présent supportés par Firefox, Chrome, Safari et Internet Explorer 10+ (sinon ils sont ignorés) et permettent de modifier le comportement de chargement des scripts. Voici de courtes explications sur les différences de chaque appel.

Lire la suite
Structurer le JavaScript de son site avec ou sans Framework

Le 16 Avril 2014 à 15h23

0 commentaire

On me demande souvent quelle est la structure JavaScript que j'utilise pour développer mes sites web. C'est une question à laquelle je ne sais jamais si un simple « jQuery » suffit ou si l'on s'attend à m'entendre répondre « Knockout », « AngularJS », « Vue.js », « React » ou encore, « RequireJS » ou je ne sais quelle autre composant/librairie/framework JavaScript Front-end extraordinaire !

Au delà du fait que l'utilisation de ses ressources précédemment citées dépend du fait que l'on souhaite réaliser un site web ou un outil web ou une application web etc. je finis toujours par expliquer que j'utilise ma propre architecture JavaScript à travers toutes les différentes pages d'un site web et qu'au cas par cas, je charge les JavasSript dont j'ai besoin (parfois il est plus judicieux de charger de manière asynchrone un ckeditor sur l'unique page ou il est utile que de ce le trimbaler partout sur le site !).

Je vais donc vous livrer à travers cet article une architecture JavaScript pas à pas, page par page. Il existe également une approche plutôt orienté composant que j'aborde ici.

Afin de la comprendre pas à pas, j'utiliserai comme fil conducteur la réalisation d'un site vitrine. Ma façon de structurer le JavaScript client n'est pas absolue mais elle vous permettra de comprendre la logique derrière certains de mes sites dont vous trouverez les sources sur GitHub (comme pour ce blog) ou même la logique du moteur de site Node.js : NodeAtlas.

Lire la suite