DEV Community: jean-smaug

WordPress Has a DX Problem, and Developers Are Paying for It

jean-smaug — Wed, 15 Jul 2026 17:34:49 +0000

Cross-posted from the Loopress docs
Loopress is a toolset to make WordPress reproducible and reviewable via Git. Versioned snippets, Composer without SSH, and more coming...

Check Loopress

WordPress is remarkable. It powers well over 40% of all websites, according to W3Techs. Your clients love it. Their non-technical staff can update content without calling you. The plugin ecosystem is enormous.

But if you're a developer, the moment you sit down to build with WordPress, something feels off.

You're editing files directly on the server. You're copy-pasting snippets from the admin panel. You're hoping you remember what you changed last week. You're sending a colleague a zip file with the "latest version" of some PHP function.

None of this is how modern software is built. And yet, it's the default WordPress workflow. This is the gap Loopress exists to close, and it's worth understanding exactly where the friction comes from before looking at how to fix it.

What is developer experience?

Developer experience (DX) refers to how smooth (or painful) it is to work with a tool as a developer. Good DX means: fast feedback loops, predictable environments, version-controlled code, and reproducible deployments.

Think of how you work with a modern JavaScript project:

Code lives in Git
Dependencies are declared in package.json and locked in package-lock.json
You run npm install and the project works
Staging and production match because the environment is defined in code

Now think about a typical WordPress project:

Snippets are stored in a database, edited through a UI
PHP packages require SSH access to install
"Deploying" means FTP or a database export
Staging and production drift apart over time because changes happen manually in both

This isn't a criticism of WordPress as a product; it was built for a different audience. But developers using it to build things deserve better.

What can go wrong

Here's a real scenario: you add a PHP snippet to your WordPress site using the Code Snippets plugin. It works. Three months later, a junior dev edits it and introduces a bug that takes checkout down for an hour. You have no idea what changed, when, or why. There's no diff, no history, no rollback button. You dig through admin logs hoping to find something, then end up rewriting the snippet from memory.

Or: a client wants a PDF export feature. You need to pull in a Packagist package. You SSH into the server, install Composer, run composer require, and pray nothing breaks in production. It worked, but it was thirty minutes of friction that shouldn't exist.

These aren't edge cases. They're the everyday reality of WordPress development.

What a better workflow looks like

Imagine instead:

# Pull your snippets down as files
lps snippet pull

# Edit them locally, in your editor, with Git tracking changes
git add snippets/my-function.php
git commit -m "fix: correct tax calculation logic"

# Push back to WordPress
lps snippet push

Your snippet is now version-controlled. You have a diff. You can roll back. You can review the change in a PR. This is how software is supposed to work, and it's exactly what Loopress brings to WordPress: a CLI that treats your snippets and Composer dependencies as files, plus a plugin that lets you manage PHP dependencies from the admin panel without server access.

WordPress stays WordPress. Your clients can still use it the way they love. You just work with it like a developer.

What's next

The rest of this blog will cover specific workflows in detail: version-controlling Code Snippets with Git, installing Composer packages without SSH, syncing menus and styles between environments, and managing multiple client sites as code. Those posts are coming soon; this one lays the groundwork for why they matter.

Why I Built Loopress

jean-smaug — Sat, 04 Jul 2026 14:11:46 +0000

Cross-posted from the Loopress docs
Loopress is a toolset to make WordPress reproducible and reviewable via Git. Versioned snippets, Composer without SSH, and more coming...

Check Loopress

I'm a frontend developer who's spent the last few years working in environments where everything is versioned, deployments are automated, and "it works on my machine" isn't an acceptable answer.

One of the jobs that shaped how I think about this was Bedrock Streaming, a streaming platform where every developer owned their infrastructure, frontend included, and the tool we used was Terraform. I remember something clicking when I started using it: your infra is just a file, which means it gets versioned, reviewed, and rolled back like any other piece of code. That idea stuck with me well past that job.

A site for my sister

My sister runs an online French tutoring business (nativefrenchteacher.com). She's not technical, and she needed to manage her own content without calling me every time. WordPress made sense.

And honestly, it worked great for her. Whatever I needed (bookings, SEO, forms, caching) there was a plugin. The ecosystem is massive.

Building with it as a developer was another thing entirely.

I used the Code Snippets plugin constantly. And every time I touched a snippet, the same thought: if something breaks, I have no history. No diff. Just hope it doesn't break.

The real moment was when I needed to manipulate PDFs and wanted to pull in a Packagist package. So I SSH'd into the server, installed Composer manually, ran the install, crossed my fingers. It worked. But it felt wrong. This is a solved problem everywhere else.

The gap

I came from a world where code lives in Git and environments are reproducible. WordPress assumes you click things in the admin, upload files via FTP, and remember what you changed. Production is always slightly different from local.

That's not a knock on WordPress. It's built for a different audience. But the developer building on top of it is left to figure things out alone.

What I built

I started building Loopress: a CLI to version-control code snippets in Git and sync them to any WordPress instance, and a plugin that brings Composer dependency management into the admin panel, no SSH needed.

The goal was to bring the same idea I took away from Terraform into WordPress: your snippets, your dependencies, your configuration, all of it living in a repo, reviewable, deployable, not scattered across admin panels and SSH sessions you'll never remember.

Still building. If any of this sounds familiar, I built it for you.

How to fix the 'Received "true" for a non-boolean attribute' error

jean-smaug — Mon, 23 Nov 2020 21:09:16 +0000

If you use styled-components, you maybe encountered the following error.

Warning: Received "true" for a non-boolean attribute

There is an official solution that you can find here. I'll present an alternative to this solution.

The trick is to use the unary plus operator to convert boolean to number.

// Convert boolean to numbers
+true; // 1
+false; // 0

// Conditions are still valid using 0 and 1
0 ? "jean" : "smaug"; // smaug
1 ? "jean" : "smaug"; // jean

In order to make a real world example, we'll style the Link component from react-router.

import styled from "styled-components";
import { Link } from "react-router";

const StyledLink = styled(Link)`
  color: ${({ inverted }) => (inverted ? "white" : "chartreuse")};
`;

function Navbar() {
  return (
    <nav>
      {# Bad #}
      <StyledLink inverted={true}>Home</StyledLink>

      {# Good #}
      <StyledLink inverted={+true}>About</StyledLink>
    </nav>
  );
}

Fixing this error is very simple. You just need to add + before your booleans values. According to MDN unary operator is the preferred way for number conversion.

You can find the banner image here.

Thanks for reading.

File upload in Javascript using fetch

jean-smaug — Mon, 26 Oct 2020 07:17:26 +0000

In this article we'll see how to upload a file using the fetch API. We'll take a PHP example and update it, in order to improve user experience.

The code is available here

jean-smaug / demo-file-upload

📖 This is a translation from this article. So there is some French in code in order to keep consistency with demonstrations GIFs

Upload in PHP

Let's take the following example :

After the form submission, we see that the URL is changing to upload.php. This page store the uploaded file and display a success message. Finally the user is redirected to the first page. The example work but it require three pages loads.

Let's see the code.

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="background" />
      <button type="submit">Envoyer</button>
    </form>
  </body>
</html>

The HTML code is very common. We only have to pay attention to the enctype attribute. The value must be multipart/form-data in order to do a file upload.

<?php
    header("Access-Control-Allow-Origin: *");

    /* The superglobal variable $_FILES gives us the ability to access
    all files that were uploaded using an HTML form. The background key
    makes reference to the value of the name attribute in
    <input name="background" /> */
    $file = $_FILES["background"];
    $isFileUploaded = move_uploaded_file($file["tmp_name"], __DIR__ . "/../storage/" . $file["name"]);

    if($isFileUploaded === false) {
        http_response_code(500);
        echo "Problème serveur";
    }
    else {
        http_response_code(201);
        readfile('success.html');
    }

    // Redirection on index.html after 2 seconds
    header("Refresh:2; url=index.html", true, 303);

The server side retrieve the file and move it into the storage folder. When processing is over, we display a success message and we redirect him to the index.html page after two secondes. The main point is that the name given to the input element is important, because it's this name that the server is using to retrieve the file.

Web APIs

We'll need two web API to perform the Upload in Javascript : FormData and Fetch.

FormData

FormData is well supported by browsers.

This API gives us the ability to represent a form in Javscript. This form will have a multipart/form-data encoding, so it's not necessary to precise it in the HTML. As already mentioned, this encoding is necessary when you're uploading a file.

Fetch

Surprisingly, we have compatibilities problems with Internet Explorer.
There are two solution to avoid this :

Use a polyfill
The trick I'm will use later in the article

The fetch API is the modern way to perform HTTP requests. It's based on promise. There are various syntaxes for using promises, here we'll use the
On peut utiliser les promesses avec plusieurs syntaxe, ici on utilisera async/await.

/* The async keyword means that the await keyword
will be used inside the function. */
async function getLucky() {
  /* The await keyword means that we're wating the results of a
   function, here somethingThatTakesTime. We don't know when the
   function will return a value, so we're awaiting the end of the
   process before executing next instructions. */
  const luck = await somethingThatTakesTime()

  return luck
}

I explained it in a short way, because it's not the main subjects. You'll be able able to easily find articles that are talking about promises and async/await.

In Javascript

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <form id="form">
      <input type="file" name="background" />
      <button type="submit">Envoyer</button>
    </form>
    <p id="message"></p>
    <script src="./app.js"></script>
  </body>
</html>

The HTML part is mainly the same. Previous form's attributes have been replaced by an id. And we're adding a paragraph where we'll display the success or failure message. And finally we load our script.

/* We get form and message elements */
const form = document.getElementById("form")
const message = document.getElementById("message")

/* We're listing for the form submission and
we're preventing the default behaviour */
form.addEventListener("submit", async function (e) {
  e.preventDefault()

  /* If your not using a polyfill for fetch, the trick for IE is to
  suggest the user to use an other browser. */
  if (!window.fetch || !window.FormData) {
    alert("R u fucking kidding me ??? Use another browser right now !")
    return
  }

  /* When we're instanciating FormData, we can pass it a form element.
  FormData will be able to detect all inputs of the form and their
  values. */
  const formData = new FormData(form)

  try {
    /* fetch() is taking two parameters, the first is URL and
    the second are options. Here we're telling fetch that we'll
    make a POST request and the body of the request, the data
    we're sending will be our formData */
    await fetch("http://localhost:4000/upload.php", {
      method: "POST",
      body: formData,
    })

    // We display a success or failure message.
    message.innerText = "Fichier uploadé avec succès \\o/"
  } catch (error) {
    message.innerText = "Il y a eu un problème /o\\"
  }

  // We clean the form
  form.reset()

  // We're removing the message after two seconds
  setTimeout(() => {
    message.innerText = ""
  }, 2000)
})

With this code, we get this result.

The last step is server optimization. You can remove these lines.

<?php
    header("Access-Control-Allow-Origin: *");

    $file = $_FILES["background"];
    $isFileUploaded = move_uploaded_file($file["tmp_name"], __DIR__ . "/../storage/" . $file["name"]);

    if($isFileUploaded === false) {
        http_response_code(500);
-       echo "Server issue";
    }
    else {
        http_response_code(201);
-       readfile('success.html');
    }
-
-   header("Refresh:2; url=index.html", true, 303);

Conclusion

Combination of FormData and fetch APIs are making file upload really easy. We're avoiding pages reload in order to improve user experience.

To perform HTTP requests, it's possible, like in this post, to use fetch. But you should consider :

Axios, XMLHttpRequest based library. XMLHttpRequest is the old way to perform HTTP request, so it's compatible with IE.
Ky, a wrapper for fetch which add some features. Ky compared to axios by Ky's creator.

Finally, it's possible to use these principles with libraries such as React or Vue.js. You'll just have to use references in order to access form element.

Thanks for reading.

An issue with a lib? Create yours!

jean-smaug — Tue, 06 Oct 2020 19:39:48 +0000

I'm working on a Node.js project that is using Koa. I wanted to use Twig as template engine in order to render views. I encountered some issues, and I want to relate how I dealt with.

Many libs and one problem

The usual way to render HTML with Koa is by using koa-views, which is using consolidate under the hood. consolidate require to add and configure manually the template engine we want to use.
There are many libs that are dependent (koa-views → consolidate → twig). This is not bad, but this requires each lib to communicate correctly with others.

I encountered a problem when I wanted to include or extend other twig files. Let's take the following code as example.

{# template.twig #}

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <main>{% block main %}{% endblock %}</main>
  </body>
</html>

{# home.twig #}

{% extends "template.html" %}

{% block main %}
<div>Home</div>
{% endblock %}

This code leads to the following error. Even if add some specific configuration as explained in this issue.

Error parsing twig template undefined: 
TwigException: Cannot extend an inline template.

By reading issues, it looked like there was some interferences between these libs, so I decided to reduce their numbers and make the link between Koa and Twig by myself.

The koa-twig lib

The goal of koa-twig is to enhance the Koa Context with a render function. It's heavily inspired of koa-views.

I'll present to you the first version of the code. I improved it, and I'm still improving it in order to offer the same feature as the others template engines bindings for Koa (koa-ejs, koa-hbs...).

const twig = require("twig");
const util = require("util");

// Use Promise instead of callback syntax.
const renderFile = util.promisify(twig.renderFile);

/**
 * Give the ability to use Twig template engine in Koa
 * @param {object} config
 * @param {string} config.views - the views folder path
 * @param {object} config.data - the data to pass to each view
 * @param {object} config.extension - the data to pass to each view
 */
const twigMiddleware = (config) => async (ctx, next) => {
  function render(file, data) {
    return renderFile(`${config.views}/${file}.${config.extension || "twig"}`, {
      ...config.data,
      ...data,
    });
  }

  /* `render` function will be accessible
  on ctx and on ctx.response */
  ctx.response.render = render;
  ctx.render = render;

  await next();
};

module.exports = twigMiddleware;

Here a basic use case.

const Koa = require("koa");
const koaTwig = require("koa-twig");

const app = new Koa();

// Configuration of the middleware
app.use(
  koaTwig({
    views: `${__dirname}/views`
  })
);

app.use(async (ctx) => {
  // Calling `render` will render `./views/home.twig`
  ctx.body = await ctx.render("home");
});

app.listen(8080);

So it wasn't that hard to reach a quick win. I can now develop with less intermediate. This is also something that made me remember that you don't need a lib for all of your problems!

Bonus

All the PRs I made for this little lib counted for the Hacktoberfest 🎉

Another reason to create and share what you're doing !

Conclusion

If there is an obstacle on the road and you can't go to right, try the left. If it's closed, try to go up. If it's blocked, dig under! Don't wait for someone to clean the road for you.

I still have some work to do in order to have the same features as the others Koa template engines bindings, but it's a first step I'm satisfied of!

The short version : DIY and KISS.

Thanks for reading.

Créer un bot Telegram avec Elixir

jean-smaug — Mon, 04 May 2020 10:48:17 +0000

En ces périodes de confinement, il est important de continuer de générer du lead. C'est pour cela que nous allons voir comment créer un bot Telegram pour ~~nous assister dans nos taches du quotidien~~ ne rien faire de productif.

Les sources sont disponibles ici.

jean-smaug / demo-elixir-telegram-bot

Initialisation

Côté Telegram

On commence par s'adresser au daron de tous les bots, j'ai nommé @botfather. On lui demande de créer un nouveau bot avec la commande /newbot, puis en répondant aux questions.

Une fois que le bot est créé, botfather nous affiche un token. Nous nous en servirons par la suite.

Côté code

On initialise un projet Elixir avec la commande suivante.

mix new macron_bot --sup

Nous allons utiliser la librairie ex_gram. Cette librairie est une couche d'abstraction autour des API Telegram.

Il faut ajouter cette dépendance ainsi que d'autres qui sont requises pour son bon fonctionnement.

# mix.exs

defmodule MacronBot.MixProject do
  # ...

  defp deps do
    [
      {:ex_gram, "~> 0.12"},
      {:tesla, "~> 1.2"},
      {:hackney, "~> 1.12"},
      {:jason, ">= 1.0.0"}
    ]
  end
end

On installe les dépendances.

mix deps.get

Nous allons ensuite créer un fichier de configuration. (Qui n'est plus généré automatiquement depuis la version 1.9.0 d'Elixir).

mkdir config && touch config/config.exs

Dans le fichier créer il faut ajouter les lignes suivantes en remplaçant le token par celui fourni par Botfather.

# config/config.exs

use Mix.Config

config :tesla, adapter: Tesla.Adapter.Hackney

# Remplacez ce token avec celui fourni par Botfather
config :ex_gram,
  token: "1287038449:AAHvSU4cGipZUH6i2Pbbhiz9akkE7_wP4YQ",
  adapter: ExGram.Adapter.Tesla,
  json_engine: Jason

Enfin on configure le module application.

# lib/macron_bot/application.ex

defmodule MacronBot.Application do
  use Application

  def start(_type, _args) do
    # Importe le token depuis la config
    token = ExGram.Config.get(:ex_gram, :token)

    children = [
      ExGram,
      # Lance le module MacronBot
      {MacronBot, [method: :polling, token: token]}
    ]

    # Si l'application rencontre un problème elle sera redémarrée
    opts = [strategy: :one_for_one, name: MacronBot.Supervisor]
    Supervisor.start_link(children, opts)
  end
end

L'initialisation peut sembler longue, mais par la suite, on modifie très peu ces fichiers.

Création du bot

Afin d'explorer les possibilités techniques qui sont à notre disposition notre bot aura les fonctionnalités suivantes :

Une commande slash /parle qui affichera une citation au hasard (une commande slash est un "message qui commence par le signe /").
Lorsqu'on lui pose une question le bot affichera des boutons pour permettre à l'utilisateur de répondre

# lib/macron_bot.ex

defmodule MacronBot do
  @bot :Macron_Bot

  # Si on raisonne en Orienté Objet, on peut voir
  # le use comme "un héritage".
  # Le name serait un paramètre que l'on passe
  # au constructeur parent.
  use ExGram.Bot,
    name: @bot

  # Requis si vous ajoutez votre bot à un groupe
  middleware(ExGram.Middleware.IgnoreUsername)

  # Comme nous utilisons le module ExGram.Bot,
  # il est nécessaire d'implémenter une fonction
  # nommée handle pour que le bot puisse fonctionner.
  #
  # Le premier paramètre est un tuple dont les valeurs
  # changent suivant les cas.
  #
  # Le second paramètre est le context,
  # il contient des informations sur le message reçu
  def handle(_, context) do

    # La fonction answer nous permet d'envoyer un message
    # Telgram en tant que bot
    answer(context, "J'appelle à la responsabilité")
  end
end

Désormais on peut lancer le bot avec la commande.

iex -S mix

Le bot répondera "J'appelle à la responsabilité" à chacun de nos messages.

Les commandes slash

La commande slash parle affichera au hasard, des citations que j'ai piquée, sans vergogne, sur le site du Parisien.

J'ai selectionné les phrases les plus croquignolesques mais bien sûr, adaptez selon vos envies.

# lib/macron_bot.ex

defmodule MacronBot do
  # Si l'on veut detecter une commande, le tuple
  # contiendra un atom :command à l'index 0.
  # Le nom de la commande à l'index 1.
  # Et le "message" à l'index 2,
  # c'est a dire le texte suivant la commande.
  def handle({:command, "parle", _msg}, context) do
    answers = [
      "Si j'étais chômeur, je n'attendrais pas tout de l'autre, j'essaierais de me battre d'abord.",
      "Je suis maoïste, [...] un bon programme c'est ce qui marche.",
      "Le libéralisme est une valeur de gauche.",
      "Il y a dans cette société une majorité de femmes. Il y en a qui sont, pour beaucoup, illettrées.",
      "Les Tontons Flingueurs, c'est un de mes films préférés. \"On n'est pas venus pour beurrer les sandwichs\" : ma réplique préférée.",
      "Make our planet great again !",
      "Vous n'allez pas me faire peur avec votre t-shirt, la meilleure façon de se payer un costard c'est de travailler.",
      "Je ne vais pas interdire Uber et les VTC, ce serait les renvoyer vendre de la drogue à Stains.",
      "Vu la situation économique, ne plus payer les heures supplémentaires c'est une nécessité.",
      "La tranche d'impôt de Hollande à 75 % ? C'est Cuba sans le soleil.",
      "Quand des pays ont encore sept à huit enfants par femmes, vous pouvez décider d'y dépenser des milliards d'euros, vous ne stabiliserez rien.",
      "Le kwassa-kwassa pêche peu. Il amène du Comorien.",
      "Lorsque la politique n'est plus une mission mais une profession, les politiciens deviennent plus égoïstes que les fonctionnaires.",
      "Ne laissez pas la critique de l'UE à ceux qui le détestent.",
      "L'audiovisuel public est la honte de la République.",
      "La politique sociale, regardez : on met un pognon de dingue dans des minimas sociaux, les gens sont quand même pauvres.",
      "Chaque pays a sa propre diplomatie. Faire partie de l'Europe ne signifie pas renoncer à son indépendance ou ne plus pouvoir prendre l'initiative.",
      "Je me bats sur le plan international pour qu'on arrive à faire baisser le prix du pétrole.",
      "Parce que c'est notre PROJEEEEET !!!"
    ]

    # On répond avec une phrase au hasard
    random_answer = answers |> Enum.random()

    answer(context, random_answer)
  end
end

Après avoir créé cette fonction, il faudra, au choix :

Couper le terminal et relancer iex -S mix
Taper recompile dans le terminal interactif précédemment ouvert

Question-réponse

Le mécanisme de question-réponse permet d'aborder plusieurs notions :

La détection de la question, détecter que la phrase se termine par un ?. On utilisera une REGEX.
Envoyer un message contenant des boutons
Détecter sur quel bouton l'utilisateur à cliqué

Pour parvenir à ce comportement, notre code implémentera deux nouvelles méthode handle.

# lib/macron_bot.ex

defmodule MacronBot do
  # ...

  # On alias les models nécessaire pour construire
  # des messages contenant des boutons.
  alias Exgram.Model.{InlineKeyboardMarkup, InlineKeyboardButton}

  # Appelé lorsque l'on envoit un message textuel.
  def handle({:text, text, msg}, context) do

    # On teste si la phrase se termine
    # par un point d'interrogation.
    if String.match?(text, ~r/\?$/) do

      # On supprime le message que l'on vient d'envoyer.
      # Dans la pratique cela est optionnel,
      # mais on découvre une autre fonctionnalité 👍
      ExGram.delete_message(msg.chat.id, msg.message_id)

      # La fonction answer peut prendre un troisième paramètre
      # permettant d'enrichir le message. Des boutons ici.
      answer(context, text,
        reply_markup: %InlineKeyboardMarkup{
          inline_keyboard: [
            [
              %InlineKeyboardButton{
                text: "Oui",
                callback_data: "Oui"
              }
            ],
            [
              %InlineKeyboardButton{
                text: "Non",
                callback_data: "Non"
              }
            ]
          ]
        }
      )
    end
  end


  # Appelé lorsque l'on clique sur le bouton
  def handle({:callback_query, callback_query}, context) do
    # La valeur que l'on récupère via callback_query.data
    # est celle défini dans les callback_data ci-dessus
    answer(context, "#{callback_query.data}, mais en même temps")
  end
end

Bonus

Je vous donne le code pour créer une commande slash /covid. C'est cadeau, c'est pour moi. Emballé, c'est pesé !

# lib/macron_bot.ex

defmodule Macron do
  # ...

  def handle({:command, "covid", _msg}, context) do
    {:ok, covid_summary} = Tesla.get("https://api.covid19api.com/summary")

    json = covid_summary.body |> Jason.decode!()
    global = json |> Map.get("Global")

    france =
      json
      |> Map.get("Countries")
      |> Enum.find(fn country -> country["Slug"] == "france" end)

    covid_answer = ~s"""
    🌍
    Nouveaux cas : #{global["NewConfirmed"]}
    Nouvelles morts : #{global["NewDeaths"]}
    Cas totaux : #{global["TotalConfirmed"]}
    Morts totales : #{global["TotalDeaths"]}

    🇫🇷
    Nouveaux cas : #{france["NewConfirmed"]}
    Nouvelles morts : #{france["NewDeaths"]}
    Cas totaux : #{france["TotalConfirmed"]}
    Morts totales : #{france["TotalDeaths"]}
    """

    answer(context, covid_answer)
  end
end

Conclusion

A travers cet article j'espère avoir pu vous éclairer sur le fonctionnement de la librairie ex_gram. A titre personnel j'ai eu quelques difficultés a mettre en place certaines fonctionnalités, les réponses aux boutons par exemple. La documentation manque d'exemples à mon goût.

Néanmoins, la librairie reste bien conçue et une fois que l'on a compris la philosophie, on peut développer un bot très rapidement.

Je vous invite aussi à consulter la documentation Telegram afin de mieux comprendre d'ou viennent les structures utilisées.

Merci de m'avoir lu.

Liens

Le hoisting au service des composants React

jean-smaug — Fri, 03 Apr 2020 15:03:48 +0000

À première vue, le titre est un peu barbare. Pas d'inquiétude, nous allons commencer par découvrir ce qu'est le hoisting et dans un deuxième temps nous verrons quel peut être son intérêt pour les composants React.

Hissez haut ! Santiano 🎵

Pour découvrir le hoisting, ou "hissage" en français, nous allons partir du code suivant.

print("Il s'agirait de grandir")

function print(log) {
  console.log(log)
}

// Ce code affiche : "Il s'agirait de grandir"

Même si la fonction print est déclarée après avoir été appelée ce code fonctionne.

Cela vient du fait que Javascript va "remonter" les déclarations de fonctions en haut du code. Dans la réalité, le code reste à sa place, mais est stocké en mémoire afin de pouvoir être appelé partout.

Explication issue de la MDN.

Conceptuellement, par exemple, une définition stricte du hissage suggère que les déclarations de variables et de fonctions sont déplacées physiquement en haut de votre code, mais ce n'est pas ce qui se passe en fait. A la place, les déclarations de variables et de fonctions sont mises en mémoire pendant la phase de compilation, mais restent exactement là où vous les avez tapées dans votre code.

Transformons le code précédent en utilisant une fonction fléchée.

print("Il s'agirait de grandir")

const print = (log) => {
  console.log(log)
}

// Ce code affiche : "Uncaught ReferenceError: Cannot access 'print' before initialization"

Avec const et let la remonté a lieu mais pas l'initialisation. En d'autres termes appeler print ne générera pas une erreur du type print is not defined. En revanche, print n'a pas été initialisé, donc il correspond à rien.

Au sein de React

Je me suis longtemps demandé quelle syntaxe privilégier pour les composants fonctionnels.

const Button = ({ value, onClick }) => {
  return <button onClick={onClick}>{value}</button>
}

// ou

function Button({ value, onClick }) {
  return <button onClick={onClick}>{value}</button>
}

Étant donné que l'on a parlé du hoisting juste avant, vous vous doutez que la seconde forme a un avantage sur la première.
On peut trouver un intérêt dans la déclaration des propTypes et des defaultProps.

Avec une fonction fléchée.

import React from "react"
import PropTypes from "prop-types"

const Button = ({ value, onClick }) => {
  return <button onClick={onClick}>{value}</button>
}

// Nécéssairement en dessous du composant

Button.propTypes = {
  value: PropTypes.string,
  onClick: PropTypes.func.isRequired,
}

Button.defaultProps = {
  value: "",
}

export default Button

Avec une fonction "normale".

import React from "react"
import PropTypes from "prop-types"

// Peut être déplacé au dessus du composant

Button.propTypes = {
  value: PropTypes.string,
  onClick: PropTypes.func.isRequired,
}

Button.defaultProps = {
  value: "",
}

function Button({ value, onClick }) {
  return <button onClick={onClick}>{value}</button>
}

export default Button

Les fonctions nous laissent le choix et nous permettent ainsi de réorganiser notre code en plaçant la signature du composant au début du fichier.

Conclusion

Il y a une chose à ne pas oublier lorsque l'on utilise React : "C'est juste du JS". Tous les concepts que l'on connait sont valides et tous ceux que l'on découvrira le seront.

Grace au hoisting on peut arranger notre code de façon à avoir directement accès à la signature de notre composant. Cela évite de devoir scroller en bas de fichier pour savoir quelles sont les props que l'on peut utiliser.

Une question demeure : faut-il utiliser cette astuce ?

Faites en fonction de vos préférences.

Personnellement je l'utilise mais ce n'est en rien une règle absolue.

Merci de m'avoir lu.

Liens

The git remaster command

jean-smaug — Wed, 18 Mar 2020 16:09:24 +0000

OK, OK. This command doesn't exist. It's one of the aliases that I'm using.

TL;DR

Execute this command once only.

git config --global alias.remaster '!git fetch && git clean -d -f && git reset --hard origin/master'

When you totally fucked up your local repository and you want an atomic cleaning, use this one.

git remaster

Your current branch will be in the same state as the remote master (the one which is on Gitlab, Github...)

The long version

I'm writing this article because I saw this tweet from Emma Bostian. I was doing the same until I've found a solution. Btw, you should follow her.

// Detect dark theme var iframe = document.getElementById('tweet-1232412585397571584-712'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1232412585397571584&theme=dark" }

In this part I will explain in detail the meaning of this command.

git config --global alias.remaster '!git fetch && git clean -d -f && git reset --hard origin/master'

I will explain first how to configure alias (this part git config --global alias.remaster) and secondary the meaning of the created alias (the part between quotes).

The alias

Alias is just "a shorter name for something that is normally long to write". For example in maths you're using the = sign instead of writing is equal to.

The first part of the command is git config --global alias.remaster '...'. It tells Git : "Dear Git, please create an alias named remaster in the global config. After that, everytime I type git remaster I want the command between quotes to be executed." Learn more about git configuration (it's in french 🥖🍷🇫🇷).

The commands

Let's now focus on the commands between quotes

I will use the following schema to explain what's happening.

remote repository : the git repo which is on Gitlab, Github...
local repository : the git repo which is on your machine, containing your branches, your commits... Everything that has a meaning for git
working directory : where you work, basically, it's the files and directory that you're seeing
staging area : where your modifications go when you do a git add

Before presenting the underlying effects, do you know what is origin/master ? It's a branch ! It's a copy of the remote master branch. It's updated if there are new commits appearing when you do a git fetch or a git pull. This means that the origin/master branch is safe and that we can trust it.

That's why my sensei is saying that you can delete your master branch because you already have origin/master which is the "always clean master".

Antoine Caron

Jul 25 '19

Git TIP - Why you should not keep a local master branch ?

#git #learn #beginners #tip

1 min read

git fetch we update origin/master, the copy of the remote master branch
git clean -f -d : it removes untracked files. In other terms it removes files that have never been added to the staging area
git reset --hard origin/master we want, our files (the working copy) to be in the same state as the origin/master branch

There's one thing that could remain strange : the ! at the beginning.
The ! is necessary because I'm aliasing a bash command. It's not required if you want to alias a git command. For example you can write git config alias.co = checkout without !. More informations here

One small thing

If your main branch isn't master but develop, for example.

You can use.

git config --global alias.nuke '!git fetch && git clean -d -f && git reset --hard origin/develop'

The two parts that can change are the ALIAS_NAME and the MAIN_BRANCH.

git config --global alias.ALIAS_NAME '!git fetch && git clean -d -f && git reset --hard origin/MAIN_BRANCH'

It's maybe trivial but I prefere to point it out. 😉

Conclusion

The git remaster command is just an alias. It brings all the modifications from the remote repository into your local repository.
After that, you need to bring these modifications into your working directory.

You can run this command everytime you screw a branch and you want to get back to a clean state.

Don't forget, time is too precious to reclone a repo. Hope it will be useful.

Thanks to Marvin and Émilie who've helped me with the english translation.

Thanks for reading.

Ça part en prod maintenant

jean-smaug — Wed, 11 Mar 2020 18:07:48 +0000

On va parler de Now, c'est pour cela que "Ça part en prod maintenant".
⇒ :rire:

Now est une plateforme d'hébergement proposée par Zeit. Les créateurs de Socket.io, Next.js, du terminal Hyper et de beaucoup d'autres. À cette solution d'hébergement, vient s'ajouter un outil en ligne de commande pour déployer son application super facilement.

À titre personnel c'est la solution que j'ai choisie pour héberger mon site. Les concepts que je présente sont ceux que j'utilise et qui j'espère, vous seront utiles.

Le code utilisé dans cet article est disponible ici :

jean-smaug / demo-now-deployment

Tarifs

L'offre gratuite sera suffisante dans le cadre de cet article, mais de manière plus générale pour une utilisation personnelle.

N'ayant pas essayé les offres payantes, je me garderai de faire des commentaires.

Configuration

Pour commencer, il faut créer un compte. Il est possible de s'inscrire via Github, Gitlab, Bitbucket ou par Email.

Ensuite, on installe de CLI Now.

yarn global add now
# OU
npm install -g now

Enfin, il faut aussi se connecter via le CLI

now login adressemail@smaug.fr

Un mail te sera envoyé à l'adresse saisie, il faudra juste cliquer sur le lien afin d'être authentifié.
Petite digression, ce mode de connexion est dit "passwordless".

Tout est en place, on peut déployer un site.

Création d'un site basique

Dans un premier temps, nous allons voir comment déployer un site statique.

<!-- index.html -->

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Démo now</title>
    <style>
      body {
        background: whitesmoke;
      }

      main {
        display: flex;
        justify-content: center;
        margin-top: 1em;
        font-size: 2em;
        height: 100vh;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <main>
      Avant j'étais moche dans la tess,<br />
      aujourd'hui je plais à Eva Mendes
    </main>
  </body>
</html>

En prenant le html ci-dessus, il suffit de se placer dans le répertoire correspondant et de lancer la commande now.
5 questions vous seront posées afin de configurer le nom du projet, son propriétaire, le dossier à uploader...
Appuyez sur "⏎" pour chacune d'entre-elles afin d'utiliser la configuration par défaut.
Et... c'est tout.

La console nous indique que notre site a été déployé sur la production, accessible depuis https://demo-now-deployment.now.sh dans mon cas. À l'avenir, il faudra lancer la commande now --prod pour déployer de nouveau en production. La commande now déploiera sur un espace de "preview".

On a pu déployer notre site statique en 30 secondes, maintenant on va voir que Now propose aussi de faire du backend

API JSON avec les Serverless Functions

Déjà, le serverless c'est quoi ? Malgré son nom, il n'est pas question de supprimer les serveurs, mais de ne plus s'occuper de leur gestion. Cette gestion est déléguée aux acteurs du cloud, AWS, GCP... et Now.

Dans la pratique, nous allons créer un dossier api dans lequel nous allons venir placer notre code serveur. Dans l'exemple ci-dessous le fichier api/kitchens.js ira lire le contenu du dossier images afin de renvoyer l'url permettant d'accéder aux photos de cuisines.

// api/kitchens.js

const fs = require("fs")

// Récupération de la liste des fichiers du dossier images
const files = fs.readdirSync(__dirname + "/../images")

/* Votre code doit respecter un certain formalisme afin d'être compris
par Now. Dans le cadre du Javascript vous devez exporter une fonction.
Cette fonction à un paramètre requête et un paramètre réponse.
NB : la fonction doit nécessairement renvoyer des données. */
module.exports = (req, res) => {
  const data = files.map(fileName => ({
    name: fileName,
    url: `https://${req.headers.host}/images/${fileName}`,
  }))

  // On retourne les données au format json
  res.json(data)
}

Pour déployer, même principe que tout à l'heure : now --prod.
Nos fonctions serverless peuvent être appelé via URL_PROJET/api/NOM_FICHIER. Dans notre cas https://demo-now-deployment.now.sh/api/kitchens.

Rendu HTML avec les Serverless Functions

Maintenant que notre API nous retourne les bonnes données, on pourrait l'appeler en Javascript avec fetch pour ensuite ajouter des éléments au DOM. Cependant, afin de faciliter le travail des moteurs de recherche, il est judicieux de retourner du HTML.

Notre arborescence de fichiers ressemblera à cela. Le fichier index.html est devenu templates/index.art et un fichier now.json est apparu.

art-template est un moteur de template Javascript, au même titre que Handlebars, Pug, EJS...

<!-- templates/index.art -->

<!DOCTYPE html>
<html lang="fr">
  <head>
    ...
  </head>
  <body>
    <main>
      <ul class="List">
        <!-- On boucle sur chacune des cuisines
        afin d'en afficher le contenu -->
        {{each kitchens}}
        <li class="Item">
          <span>{{ $value.name }}</span>
          <img width="350" height="200" src="{{ $value.url }}" />
        </li>
        {{/each}}
      </ul>
    </main>
  </body>
</html>

const fs = require("fs")
const artTemplate = require("art-template")

const files = fs.readdirSync(__dirname + "/../images")
const template = fs.readFileSync(`${__dirname}/../templates/index.art`, "utf8")
// Pré-compiler le template permet de gagner en performances
const render = artTemplate.compile(template)

module.exports = (req, res) => {
  const data = files.map(fileName => ({
    name: fileName,
    url: `https://${req.headers.host}/images/${fileName}`,
  }))

  // Obtention du markup final
  const markup = render({ kitchens: data })

  // res.json est devenu res.send
  res.send(markup)
}

Enfin, le fichier now.json va nous permettre d'ajuster le comportement de notre serveur.
Pour un utilisateur, il serait bizarre d'avoir une URL contenant /api. Ainsi, la configuration permet de rediriger la racine de notre site vers notre cloud function.

{
  "routes": [{ "src": "/", "dest": "/api/kitchens.js" }]
}

On re-déploie avec now --prod

Et on à accès à nos photos de cuisines !

Conclusion

Now c'est quand même vachement bien. Actuellement en V2, je regrette juste le fait de ne plus pouvoir déployer de conteneurs Docker.

Une chose que je peux affirmer, est que pour un projet personnel, vous pouvez déployer votre application en 30 secondes sans prise de tête. Que votre application soit constituée de fichiers statiques, d'une API JSON ou de pages dynamiques.

Dans la présentation que j'ai faite, je n'ai pas utilisé de frameworks. Si tel est votre souhait, sachez que Now se chargera de builder votre application pour vous. Que vous utilisiez React, Vue, Angular (ou leur dérivés Gatsby, Gridsom...).
Plus d'info par ici.

À travers cette présentation nous avons pu voir certains cas d'utilisations. Bien entendu, je vous invite à expérimenter par vous-même afin de voir l'étendu complète des possibilités de cet outil !

Cimer au valeureux Captain Tatane pour la relecture.

Merci de m'avoir lu.

Liens

Image en banière

Utiliser Tailwind avec Parcel

jean-smaug — Mon, 03 Feb 2020 14:14:55 +0000

Nous allons voir comment intégrer le framework CSS Tailwind au sein d'un projet utilisant Parcel pour bundler ses sources.

yarn add --exact tailwindcss
yarn add --dev --exact parcel-bundler autoprefixer postcss

Une fois les dépendances installées, nous allons devoir configurer Postcss afin de pouvoir utiliser toutes les fonctionnalités de Tailwind.

// postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}

Il faut maintenant créer un fichier de style et utiliser les directives @tailwind afin d'importer les différentes briques du framework.

/* style.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Dans le fichier index.html, il faut référencer le fichier style.css.

<!-- index.html -->

<!DOCTYPE html>

<html lang="fr">
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <h1 class="text-3xl">Jean Smaug</h1>
  </body>
</html>

Il ne nous reste plus qu'a créer les scripts.

{
  ...
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  ...
}

On peut désormais générer une version de production de notre application avec un yarn build.

Amélioration

Notre configuration fonctionne mais il y a un bémol. Notre application importe l'intégralité du CSS de Tailwind même si nous n'utilisons que quelques classes.

Le plugin parcel-plugin-purgecss permet de nettoyer notre code.
Il repose sur PurgeCSS, un outil capable de supprimer du fichier CSS les classes inutilisées dans le HTML.

yarn add --dev --exact parcel-plugin-purgecss

Après l'installation on créé un fichier de configuration pour PurgeCSS

// purgecss.config.js

module.exports = {
  content: ["**/*.html"],
}

Si on build de nouveau notre application, le fichier style.css ne fait désormais plus que ~2kb contre ~666kb précédemment.

Conclusion

Parcel, c'est génial. Tailwind, c'est énorme. Alors immaginez les deux ensembles !
Si en plus de cela, nos fichiers CSS peuvent subir une cure amincissante digne de régime Dukan, alors on est au top.

Merci de m'avoir lu.

Jestip, clear mocks automatically

jean-smaug — Fri, 24 Jan 2020 08:59:51 +0000

Let's take the following code as example.

function functionYouNeedToMock(a, b) {
  return a + b
}

beforeEach(() => {
  jest.clearAllMocks()
})

functionYouNeedToMock = jest.fn()

it("should call function", () => {
  functionYouNeedToMock()
  expect(functionYouNeedToMock).toBeCalledTimes(1)
})

it("should call function", () => {
  functionYouNeedToMock()
  expect(functionYouNeedToMock).toBeCalledTimes(1)
})

It considers that you mocked a function and you want your tests to be independent. So you're using the jest.clearAllMocks() function to avoid undesired behaviours.

Did you know that you can activate the clearMocks option in the config in order to avoid calling jest.clearAllMocks() in each test suite ?

// jest.config.js

module.exports = {
  clearMocks: true,
}

Now you can write

function functionYouNeedToMock(a, b) {
  return a + b
}

functionYouNeedToMock = jest.fn()

it("should call function", () => {
  functionYouNeedToMock()
  expect(functionYouNeedToMock).toBeCalledTimes(1)
})

it("should call function", () => {
  functionYouNeedToMock()
  expect(functionYouNeedToMock).toBeCalledTimes(1)
})

Thanks for reading

Un graphique mis à jour avec les server-sent events

jean-smaug — Thu, 23 Jan 2020 10:55:09 +0000

Aujourd'hui, on va parler des Server-sent events, une technologie permettant de recevoir des messages de la part du serveur.

Le code utilisé est disponible ici :

generous-folks / demo-dashboard-server-sent-events

Nous allons découvrir ce que sont les SSE en construisant un graphique mis à jour toutes les secondes.

Fonctionnement

Les SSE fonctionnent de la manière suivante :

Le client demande au serveur d'écouter une route
Le serveur répond qu'il est d'accord pour que le client écoute
Lorsque le serveur le souhaite il envoie des informations au client. Ce dernier reçoit un message qu'il peut traiter comme il le souhaite.
Lorsque l'on ne veut plus recevoir de données le client ou le serveur peuvent interrompre la connexion

Support navigateur

Est-il vraiment nécessaire que je parle du navigateur dont on ne doit pas prononcer le nom ?

Quoi qu'il en soit, on peut utiliser un polyfill en cas de besoin.

Code

// server.js

const http = require("http")
const PORT = 5000

http
  .createServer((req, res) => {
    /* Il est nécessaire d'indiquer au navigateur qu'il va
    recevoir des données de type "text/event-stream" */
    res.writeHead(200, {
      "Content-Type": "text/event-stream",
      "Access-Control-Allow-Origin": "*",
    })

    setInterval(() => {
      const data = {
        value: Math.round(Math.random() * 100),
      }

      /* Les données envoyées doivent suivre un format précis.
      Une chaine de caractères étant "data: mydata", suivi d'un "\n\n".
      Si vous voulez transmettre du JSON il faudra le transformer en
      chaine de caractère comme ci-dessous. */
      res.write(`data: ${JSON.stringify(data)}`)
      res.write("\n\n")
    }, 1000)
  })
  .listen(PORT, () => console.log(`http://localhost:${PORT}`))

// client.js

import c3 from "c3"

/* L'objet EventSource nous permet d'écouter les événements
envoyés depuis le serveur. On l'instancie en lui passant l'URL
d'où proviendront les événements */
const evtSource = new EventSource("http://localhost:5000")

// Initialisation du graphique
const data = [30, 20, 10, 40, 15, 25]
const chart = c3.generate({
  bindto: "#chart",
  data: {
    type: "area",
    columns: [["Random", ...data]],
  },
  bar: {},
  axis: {
    y: {
      max: 200,
      min: 0,
    },
  },
})

/* On effectue un traitement uniquementlorsque
le serveur décide d'envoyer un message */
evtSource.onmessage = function(e) {
  /* Le code ci-dessous est lié à C3.js, mais concrètement,
  on souhaite afficher maximum 10 valeurs sur ce graphique */
  if (data.length === 10) data.shift()

  data.push(JSON.parse(e.data).value)

  chart.load({
    columns: [["Random", ...data]],
  })
}

/* En plus des messages, il est possible d'écouter lorsque
la communication commence et lorsqu'il y a une erreur */
evtSource.onopen = function() {
  console.log("Ah bogaaaas")
}

evtSource.onerror = function() {
  // Je suis certain que vous aussi vous débugguez comme ça
  console.error("Et merde !")
}

Websocket en moins bien ?

C'est pas moins bien, c'est différent !

Avantage des SSE sur les Websockets:

Transport via HTTP plutôt que part un protocole spécifique
Compatibilité avec les vieux navigateurs grâce aux polyfill
Reprise de connexion native
Pas de problèmes avec les pare-feux d'entreprises

Avantages des Websockets sur les SSE:

Communication bi-directionnelle
Supporte le transfert de données binaires
"Pas de limites" de connexions

Sur ce dernier point, il faut savoir que l'on peut avoir maximum 6 connexions ouvertes par navigateur concernant les SSE.

Conclusion

Les SSE font parti de ces technologies dont on entend peu parler. Pourtant, ils sont peu coûteux à mettre en place, 1 header, 1 format de données et le tour est joué.

En terme de cas d'utilisation, les notifications, un flux d'information ou encore la gestion de stock sont parfaitement envisageables.

Les usages possibles sont multiples, mais il faut garder à l'esprit les limitations d'une telle technologie. 6 connexions par navigateur et pas de transfert de données binaires.

Websocket ou SSE, maintenant vous avez le choix pour votre communication serveur → client

Merci de m'avoir lu.

DEV Community: jean-smaug

WordPress Has a DX Problem, and Developers Are Paying for It

What is developer experience?

What can go wrong

What a better workflow looks like

What's next

Why I Built Loopress

A site for my sister

The gap

What I built

How to fix the 'Received "true" for a non-boolean attribute' error

File upload in Javascript using fetch

jean-smaug / demo-file-upload

Upload in PHP

Web APIs

FormData

Fetch

In Javascript

Conclusion

Links

An issue with a lib? Create yours!

Many libs and one problem

The koa-twig lib

Bonus

Conclusion

Links

Créer un bot Telegram avec Elixir

jean-smaug / demo-elixir-telegram-bot

Initialisation

Côté Telegram

Côté code

Création du bot

Les commandes slash

Question-réponse

Bonus

Conclusion

Liens

Le hoisting au service des composants React

Hissez haut ! Santiano 🎵

Au sein de React

Conclusion

Liens

The git remaster command

TL;DR

The long version

The alias

The commands

Git TIP - Why you should not keep a local master branch ?

One small thing

Conclusion

Links

Ça part en prod maintenant

jean-smaug / demo-now-deployment

Tarifs

Configuration

Création d'un site basique

API JSON avec les Serverless Functions

Rendu HTML avec les Serverless Functions

Conclusion

Liens

Utiliser Tailwind avec Parcel

Amélioration

Conclusion

Jestip, clear mocks automatically

Un graphique mis à jour avec les server-sent events

generous-folks / demo-dashboard-server-sent-events

Fonctionnement

Support navigateur

Code

Websocket en moins bien ?

Conclusion

Liens