Tous les articles pour Spécifications

  • Apprendre et comprendre JavaScript version ES6

    ES7 est déjà dans nos chaumières et, en plus d'être à peu près au point avec ES5, vous n'avez toujours pas digéré ES6 ! Il va être temps de nous y pencher de plus près sur ce blog pour aborder la suite de l'aventure JavaScript sereinement. Cet article à pour but, de vous en apprendre plus sur la version ES5 tout en la comparant à des équivalences ES6 : cela nous permettra de comprendre en quoi ses améliorations peuvent nous aider au quotidien. Nous allons éplucher les fonctionnalités dans un ordre logique d'apprentissage et explorer les mécaniques sous-jacentes. Ça risque d'être long alors, de la même manière que cet article va être publié en plusieurs mise à jour, n'hésitez pas à le lire en plusieurs fois.


  • Séparations et mise en application des rôles du HTML / CSS / JavaScript

    Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie frontale, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des Front-end Developers, des Back-end Developers ainsi que des Content Fillers (Pousseurs de Contenu). Ces techniques étant en constantes évolution, et les problématiques évoluant au fur et à mesure de mes itérations créatives, cet article est voué à se compléter et changer.


  • Des Easter Eggs sur vos sites avec le Konami Code JavaScript

    Connaissez-vous ce petit code de triche qu'est le Konami Code ? Ce code à entrer dans les jeux vidéos permet de débloquer des options secrètes. Je vous propose de l'implémenter sur vos sites web en JavaScript avec une petite API maison gérant le clavier et le tactile. Suivez le guide !

    Konami Code

    L'API présenté dans cet article lève un événement JavaScript quand vous entrez la célèbre séquence du Konami Code « Haut Haut Bas Bas Gauche Droite Gauche Droite B A » avec votre clavier. Cela marche également avec votre doigt en glissant « Haut Haut Bas Bas Gauche Droite Gauche Droite » puis en faisant « Tap Tap ».


  • Icon ou la balise sémantique HTML qui n'existait pas !

    Je l'ai encore croisée au détour d'un code ! J'y ai prêté attention pour la première fois sur le Framework CSS Semantic-UI car j'ai vu dans la source qu'il était impossible d'afficher une icône avec ce Framework sans utiliser la balise qui n'existe pas : la balise Icon !

    Je vous la présente sans plus de suspense avec cet exemple : <i class="icon settings"></i>. Et son rendu est une icône, représentant par exemple ici de quoi modifier les paramètres. Il n'y a pas de doute, l'intention première est d'afficher une icône, non pas avec la balise <img> estimée réservée à de l'affichage de contenu pure (au contraire d'une décoration), mais en remplacement de <span> qui, lui, est trop neutre.

    Balise i en HTML4
    La balise <i> en HTML4, miriamposner.com

    Quoi de mieux qu'une balise qui est inline, courte, dont la seule lettre représente le début du mot « icon » et qui passe même la validation W3C ? Je vous présente la balise <i> qui a vu le jour grâce à HTML4 et signifiait « le contenu affiché est italique » et qui tenterait de faire son coming-back en tant que nouvelle icône derrière le dos du W3C !

    Mais ça me pause un problème. Parlons en de cette fausse-vrai balise !


  • Utiliser la balise Link dans la balise Body

    Par convention, on a toujours utilisé la balise <link> dans la balise <head>. Cette balise est utilisée —entre autre— pour permettre aux navigateurs de lire et d'appliquer les instructions CSS depuis une feuille CSS.

    Par convention dis-je ? Pas réellement car :

    • Côté W3C, la balise <link> telle qu'elle a été créée n'est valide W3C en HTML4, xHTML ou HTML5 uniquement si elle est appelé dans la balise <head>.
    • Côté technique, une propriété CSS est appliquée sur un élément du DOM quand il est rendu sur la page uniquement si elle a été interprétée avant de rencontrer cet élément. Si une feuille CSS est lu en pied de page donc, c'est-à-dire après le rendu d'un élément, il y aura un phénomène de FOUC très dérangeant si la page est demandée depuis un réseau bas débit.

    Exemple : Ainsi le code suivant est valide :

    <head>
        ...
        <link rel="stylesheet" type="text/css" href="example/css.css" media="screen" />
        ...
    </head>
    

    mais

    Exemple : le code suivant est invalide :

    <body>
        ...
        <link rel="stylesheet" type="text/css" href="example/css.css" media="screen" />
        ...
    </body>
    

    Cependant, puisque l'affichage du contenu de la page est mis en attente tant que les fichiers href des <link> ne sont pas téléchargés et analysés par le navigateur, cela participe à ralentir l'affichage du contenu des pages aux yeux de l'utilisateur ce qui mène parfois les outils comme PageSpeed ou GTmetrix a demander de placer les feuilles CSS très lourdes après l'analyse du DOM.

    Mais puisque cela n'est pas valide, comment faire pour placer la balise <link> en pied de balise <body> ?


  • Utiliser les Media Queries CSS3 dans l'attribut style

    Autant vous annoncer la mauvaise nouvelle tout de suite, il n'est pas possible d'utiliser les Media Queries dans l'attribut des balises HTML style. Ainsi le code suivant ne fonctionnera pas...

    <div>
        <img 
            src="image/que/je/veux/decaller/seulement/quand/elle/flotte.png" 
            style="@media(min-width: 768px){float:left margin:-4px 16px 8px -24px;}">
        <p>J'aimerai faire flotter à gauche l'image ci-dessus uniquement sur 
        les grands écrans. Comme les valeurs de `margin` sont ajustées uniquement 
        aux propriétés de cette image (-4px 16px 8px -24px), il n'existe pas de
        classe  HTML-driven comme créer un `.float-left` (à l'avance) qui répondrait 
        exactement à mon besoin.</p>
    </div>
    

    ...c'est comme ça !

    Dans ce cas, comment faire pour gérer des propriétés CSS ponctuellement en utilisant les Media Queries ? Cela est très utile pour le remplissage de contenu pour ajuster des images ou encore manager des background-image.

    La solution n'est pas l'attribut style des balises HTML mais la balise <style> elle même !


  • Les Margins se comportent comme des Paddings avec les grilles Bootstrap

    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 !


  • StackEdit.io, l'éditeur Markdown en ligne par excellence !

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

    Responsive Web Design
    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 !


  • Maîtriser les requêtes au chargement d'une page web

    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.


  • Différences entre async et defer en HTML5

    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.


  • Les types en JavaScript : pour tout savoir !

    Mais le JavaScript n'est pas typé ? Mais si, il y en a 13 ! Ah non, il y en 7... Bah il me semble qu'il y a Object, Function, Array, Math, String, Number, Boolean. Et tu fais quoi de RegExp ? Attends, Function c'est pas un type, c'est un sous type mais Null c'est un type... ? Ho là là...

    Si vous faites du jQuery à vos heures ou même pas mal de JavaScript sur vos sites web, il est temps d'apprendre tout ce qu'il y a à savoir sur le typage implicite de JavaScript, car oui : contrairement à ce que certain vous ont dit, JavaScript manipule des éléments typés, on peut même dire que le JavaScript est faiblement typé et dynamiquement typé si vous voulez tout savoir. Les fonctions (et les instances) Object, Function, Array, Date, String, Number, Boolean, RegExp, Error ou encore les objets globaux, Math et JSON : tous sont d'un seul et même type, le type Object. Pourtant String, Number et Boolean sont eux-mêmes un type à par entière en plus des deux petits spéciaux les type Null et Undefined.

    Si vous deviez retenir quelques trucs rapidement à propos du JavaScript et des types ça serait que :

    • Le JavaScript n'a que 6 types : Object, Number, String, Boolean, Null et Undefined.
    • À part le type Object : les 5 autres types sont dit des types primitifs.
    • Les types Null et Undefined sont des types spéciaux.
    • La Function n'est qu'un type Object qui peut être exécuté et instancié avec « new ».
    • Array, Date et RegExp sont des types Object instanciables (Function).
    • Math et JSON sont simplement un type Object (ne s'instancie pas avec « new »).
    • Bien que Number, String et Boolean soient des types primitifs, il existe un équivalent de type Object instanciable (Function) pour chacun d'eux (à ne pas confondre).
    Les 6 types en JavaScript
    Les 6 types en JavaScript

    Je vais dans un premier temps vous proposer la traduction d'un article de Dmitry Baranovskiy —développeur JavaScript expérimenté— qui explique très bien les types en JavaScript. Je lèverai le doute sur le fameux sixième type (Null ou Function). Et je vous fournirai des lignes de code test pour mettre en évidence ce qui a été expliqué.

    Dans cet article les propos entre [ ... ] sont les miens ainsi que ceux qui ne sont pas entre « ... ».

    Pour finir, bien que l'auteur vous encourage à lire les spécifications officielles (pour les initiés), je vous encourage pour ma part à lire JavaScript Eloquent (disponible en français ici).