#JavaScript

Ciao WordPress, Hello JAMstack

Pour ceux qui l’ignorent, JAMstack est l’acronyme de JavaScript, APIs et Markup. Cela veut dire que contrairement à un CMS comme WordPress, le serveur web ne fait que livrer des fichiers statiques pré-compilés. Cependant, cela ne veut pas forcement dire que le site est statique, il y a du JavaScript et ce dernier est en mesure d’interagir avec des API (donc récupérer des données etc). Voyons les raisons de mon choix et le dessous des cartes techniques !

L'après jQuery: API DOM native et alternatives

Ça ne vous a surement pas échappé, on utilise aujourd’hui de moins en moins jQuery dans les nouveaux projets. Les navigateurs récents supportent en effet très bien les nouvelles API du DOM. Il est ainsi possible d’avoir un code qui fonctionne pour tous les navigateurs en se conformant aux standards. On se libère d’une dépendance mais on hérite d’une API native pas toujours super sexy… Voyons ce que l’on peut faire.

WordPress starter theme pour les développeurs JS

On ne présente plus WordPress. CMS open source ultra populaire, je le perçois comme une sorte de framework. Je peux ainsi me concentrer sur l’expérience utilisateur : créer un thème sur-mesure de A à Z. Cependant, il me manquait une solution pour accélérer la création de thème. J’ai donc créé un “blank theme” assorti d’un workflow orienté devops. Voyons à quel besoin répond ce thème open source et quelles solutions il apporte.

Programmation fonctionnelle en JavaScript

Bien que la programmation fonctionnelle ne date pas d’hier, on en entend de plus en plus parler. Souvent entourée de termes obscurs et de notions mathématiques complexes, on se dit qu’on se penchera sur ce nouveaux paradigme de programmation un peu plus tard… Et si ce plus tard était maintenant ? Tentons d’aborder le FP de manière concrète et pragmatique.

Rollup, l'outil pour les bundler tous !

Rollup est un bundler JavaScript. C’est à dire qu’il lit votre code et bundle l’ensemble des modules importés (via import ou require) en un fichier unique. Il est capable d’exporer ce module dans les principaux formats de modules (CJS, ESM, AMD, IIFE) correspondant à tous les cas d’usage. En outre, via quelques plugins bien utiles, il se chargera aussi de transpiler et de minifier le code. Que demande le peuple ?

npm for everything™

npm était à l’origine le package manager pour Node.js. Cependant, son rôle s’est aujourd’hui élargit pour devenir le package manager du JavaScript tout court. Aussi bien en front qu’en back, de plus en plus de modules et bibliothèques utilisent aujourd’hui npm. On en fait même un task manager grâce aux scripts qu’il permet d’exécuter. Cela permet d’avoir un seul outil pour l’ensemble de nos process.

Compresser les images dans le navigateur

Uploader une image de profil, vous avez sûrement déjà vécu cette situation. Cette petite image qui ne fera au mieux que 250px 250px. Mettez vous dans la peau de mamie du cantal, est-ce que vous croyez qu’elle va redimensionner sa petite image avant upload ? Redimensio-quoi ? Ok, notre bon utilisateur qui balance une image de 8000px 6000px va devoir patienter un bon moment le temps d’envoyer tout ça avant que, enfin, le serveur optimise cette dernière.

Mais pourquoi ne pas faire tout ça directement dans le navigateur ?! On y gagne en tous points. L’utilisateur ne perd pas son temps à uploader xMb pour rien, vous économisez de la puissance serveur, vous ne frustrez pas celui qui sait (mais qui a la flemme d’ouvrir son Photoshop), et puis vous œuvrez pour la planète ! 5 bonnes raisons de faire ça dans le browser. On y va ?

Javascript asynchrone, les Promises à la rescousse

Tout est dans le titre. L’ES6 a apporté beaucoup de nouveautés, entre hype et réelle utilité, beaucoup
d’encre a coulée. Les Promises ont été à l’honneur car elles sont un ajout notable au langage et pemettraient,
apparemment, de nous affranchir du callback hell. Voyons dans cet article comment les utiliser pour une meilleure
gestion du flux.

Télécharger des fichiers depuis le web en Node.js

Quelle que soit l’application sur laquelle on travaille, il arrive forcement un moment ou cette
dernière doit automatiquement télécharger des ressources web. Des images de profil téléchargées
depuis Gravatar ou Twitter par exemple. Voyons comment créer rapidement une fonction de téléchargement.

Programmation orientée objet en JavaScript

Le JavaScript est un des langages les plus utilisés et aussi un des plus populaires du moment. Côté client, côté serveur, il est omniprésent sur le web. Malgré cela, le JS demeure mal compris par un grand nombre de développeurs. Pourtant, à mesure que son usage s’intensifie et qu’il est le cœur d’applications de plus en plus complexes, il convient de bien appréhender son modèle objet. En route pour le royaume des objets !