Rachl.dev

BlogDev #0 : Pourquoi j'ai choisi GatsbyJS pour mon blog

Mon, 13 Jan 2020 00:00:00 GMT

Lorsque j’ai commencé le développement de ce blog, j’avais deux objectifs en tête : Découvrir des choses et être utile. Pour satisfaire cette première exigeance, j’ai choisi de le développer avec des technologies que je n’avais encore jamais utilisées en production, notamment GatsbyJS : un générateur de site statique basé sur React.

Gatsby fait l’objet d’une attention croissante depuis sa création en 2015. Il séduit par sa simplicité de mise en place (du moins pour les habitués du Javascript), ses excellentes performances et son adaptabilité. En effet, la communauté a déjà créé une quantité impressionnante de plugins et il est très simple de créer des composants personnalisés. Vous pouvez également y greffer de nombreux CMS (Wordpress, Netlify, Drupal, TinaCMS…) ou simplement éditer des articles en Markdown.

J’ai choisi pour le moment de travailler sans CMS et d’utiliser Gatsby Starter Blog, le starter thème le plus minimaliste et populaire pour Gatsby. Malheureusement, s’il permet effectivement de mettre en ligne un blog simple en très peu de temps, certaines bonnes pratiques ne sont pas respectées, et des procédés gagneraient à être optimisés (Une librairie javascript pour gérer la taille de police ? vraiment ?).

Dans cette série d’article, je vous parlerai donc des modifications que j’apporte au fur et à mesure à mon thème pour l’adapter à mes besoins et le rendre plus qualitatif (ou l’empirer, à vous d’en juger). Au programme : Se débarasser de Typography.js, utiliser SASS, ajouter des tags etc..

Stay tuned !

Smooth scrolling uniquement en CSS

Tue, 07 Jan 2020 00:00:00 GMT

Depuis de nombreuses années, nous nous sommes habitués aux boutons de retour vers le haut et aux liens internes qui adoptent le fameux comportement smooth scroll ou “défilement doux”.

S’il était autrefois nécessaire d’utiliser du javascript pour créer cette transition, il est désormais possible d’obtenir le même effet avec une seule ligne de CSS.

Scroll behavior

La propriété CSS scroll-behavior prend deux valeurs spécifiques :

auto : la valeur par défaut, sans transition.
smooth : le fameux comportement de défilement doux.

Concrètement, pour appliquer le smooth scrolling à l’entièreté de votre site il vous suffit de l’appliquer sur la balise html :

/* Smooth scrolling sur l'entièreté du site */
html {
	scroll-behavior: smooth;
}

Mais vous pouvez également choisir de l’appliquer à une section particulière :

/* Smooth scrolling dans l'élément some-section */
.some-section {
	scroll-behavior: smooth;
}

Accessibilité

Un des grands avantages de cette solution est la possibilité de s’adapter simplement aux préférences des utilisateurs, en particulier ceux qui ont paramétré leur navigateur avec une réduction d’animation et de mouvements.

Pour ce faire, il suffit d’ajouter une media query à notre premier code :

/* Smooth scrolling sur l'entièreté du site */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Support navigateur

à ce jour, le support navigateur pour cette propriété est d’aproximativement 70 %, elle est mise en place sur firefox, chrome et opera, mais pas sur safari, IE et edge (avant la version 76).

Le support à jour :

Cela peut paraitre peu, mais compte tenu du peu de valeur ajoutée apportée par cette propriété, on peut tout à fait considérer que cette fonctionnalité entre dans le cadre de l’amélioration progressive. Si vous souhaitez toutefois une alternative avec un support plus large, vous pouvez vous tourner vers le script Smooth Scroll de Chris Ferdinandi.

Cette astuce a été découverte sur le blog Go Make Things du même auteur – Une mine d’or pour ceux qui cherchent à faire du développement lean et du Javascript pur.

Comment synchroniser automatiquement votre navigateur avec Browsersync

Sat, 04 Jan 2020 00:00:00 GMT

Que vous soyez débutant, de la vieille école ou simplement sur un petit projet, vous n’avez pas forcément mis en place des solutions qui synchronisent automatiquement votre navigateur à chaque sauvegarde. Il existe pourtant un module npm qui peut se charger de cela à l’aide d’une seule ligne de commande : Browsersync.

Qu’est-ce que npm ?

Si npm est déjà installé sur votre ordinateur, vous pouvez passer directement à la partie suivante

npm, ou Node Package Manager est le gestionnaire de paquet officiel de node.js, la plateforme qui nous permet aujourd’hui d’exécuter du javascript côté serveur. npm permet de gérer très simplement les dépendances d’un site web et d’automatiser certaines tâches récurrentes, dont cette fameuse synchronisation de navigateur.

Pour utiliser Browsersync vous devez donc tout d’abord installer Node.js (disponible sur Windows, Mac et Linux), qui embarque automatiquement npm.

Installer Browsersync

Pour l’installation de Browsersync, deux options s’offrent à vous : l’installer globalement afin de pouvoir le lancer sur tous vos projets, ou localement pour un usage ponctuel.

J’ai personnellement choisi l’installation globale, pour simplifier le processus et éviter d’avoir à le télécharger à chaque fois (parce que la planète).

Pour ce faire, il vous faut donc ouvrir un terminal (ex : l’Invite de commandes sur windows) et exécuter la ligne de commande ci-dessous :

npm install -g browser-sync

Utiliser Browsersync sur un projet

Une des forces de Browsersync est qu’il peut être utilisé sur un site statique ou dynamique avec des changements mineurs sur la commande utilisée. Dans les deux cas, il vous suffit d’ouvrir un terminal dans le répertoire du projet que vous souhaitez surveiller et d’exécuter la commande appropriée :

Sur un site statique

Pour un site sans serveur dynamique (basé sur des fichiers .html), utilisez :

browser-sync start --server --files="**/*"

Browsersync lancera alors un petit serveur et surveillera les modifications de tous vos fichiers. Il est possible de changer certaines options, notamment la partie --files="**/*". Par exemple, si vous souhaitez surveiller uniquement le css, utilisez --files="css/*.css".

Voir toutes les options possibles dans la documentation

Sur un site dynamique

Pour un site qui tourne déjà sur un serveur dynamique local (php et autres), utilisez :

browser-sync start --proxy "[URL-LOCALE-DU-PROJET]" --files="**/*"

Browsersync entrera donc en mode proxy et se contentera de faire l’intermédiaire pour surveiller vos fichiers sans lancer de nouveau serveur. Comme pour les sites statiques, cette commande peut être personnalisée : Voir toutes les options possibles.

Récapitulatif

Pour résumer, voici les étapes nécessaires à la mise en place d’une synchronisation de navigateur avec Browsersync :

installer Node.js (si ce n’est pas déjà fait)
Ouvrir un terminal.
Installer Browsersync en exécutant la commande npm install -g browser-sync
Naviguer dans le répertoire de votre projet et lancer Browsersync avec l’une des commandes suivantes :
- Sur un site statique : browser-sync start --server --files="**/*"
- Sur un site dynamique : browser-sync start --proxy "[URL-LOCALE-DU-PROJET]" --files="**/*"

Une fois la synchronisation lancée, vous n’avez plus à vous soucier de recharger votre navigateur, il s’en chargera automatiquement à chaque fois que vous sauvegardez !

Il existe d’autres façons d’utiliser Browsersync, notamment avec Gulp ou Grunt, mais cette solution est à mon avis la plus simple et la plus rapide à mettre en place lorsque l’on ne cherche pas à mettre en place un workflow complexe.

Pour plus d’informations sur les autres possibilités d’installation et les options disponibles, visitez la documentation