Articles

Si comme moi vous aimez avoir une console propre et sans erreurs, il se peut que vous ayez déjà été titillé par ce message intempestif remonté sur Google Chrome : [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Traduis en français, ce warning nous signale qu'un listener ajouté à un événement de scroll n'est pas passif, c'est à dire qu'il peut appeler la fon...

// Before any third party import that causes issues
import { passiveSupport } from 'passive-events-support/src/utils';

passiveSupport({
  events: 'touchstart', // or any other event tyoes
});

Lors du déploiement d'un projet Drupal avec une pipeline de déploiement continu, il est souvent nécessaire de reconstruire le cache Drupal afin qu'il prenne en compte les dernières modifications de fichiers. Problème : même si la reconstruction du cache permet de s'assurer d'avoir les dernières modifications côté serveur, il peut entraîner une lenteur supplémentaire au premier chargement des pa...

      - name: Warm cache
        run: ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_HOST }} "cd /var/www/html && vendor/bin/drush warmer:enqueue entity,sitemap && vendor/bin/drush queue-run warmer"

Supportée par plus de 97% des navigateurs, la propriété CSS line-clamp fait le bonheur des développeurs (et des designers) en permettant de limiter le nombre de lignes d'un paragraphe sans avoir recours à des méthodes approximatives telles que la troncature arbitraire du texte basée sur un nombre de lettres ou de mots. Sans surprise, TailwindCSS permet l'utilisation de cette propriété via la cl...

<!-- 🚫 Not working -->
<p class="line-clamp-3 hidden md:block">Lorem ipsum dolor sit amet [...].</p>

https://www.drupal.org/project/gin/issues/3219020

diff --git a/src/GinContentFormHelper.php b/src/GinContentFormHelper.php
index 8e39cd0..3b6b262 100644
--- a/src/GinContentFormHelper.php
+++ b/src/GinContentFormHelper.php
@@ -164,7 +164,7 @@ ...

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Au moment d'écrire cette article, cela fait 10 ans 14 ans déjà que j'ai écrit du code pour la première fois. Je me rappelle encore de la joie que j'ai ressentie lorsque, après des heures de recherche, le petit programme que je venais d'écrire fon...

@echo off
:debut
cls
set /p lol=Quel est ta couleur prefere ?
if "%lol%"=="noir" goto noir
if "%lol%"=="bleu" goto bleu
if "%lol%"=="vert" goto vert
if "%lol%"=="marron" goto marron
if "%lo...

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Lorsque je fais de nouvelles connaissances et que je leur dis que je suis un développeur, j'obtiens souvent ce type de réponse : Oh, super ! J'ai justement un projet d'application. Est-ce que tu pourrais me montrer comment faire ? Tout d'abord, j...

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCou...

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Imaginons que vous ayez du markup ressemblant à ceci : et que les classes bg-dark et bg-white représentent un fond noir et blanc respectivement. Afin d'appliquer un style de police différent à nos boutons selon le fond sur lequel ils se trouvent,...

<div class="bg-white">
  <button class="button">Je suis un bouton sur fond blanc</button>
</div>

<div class="bg-dark">
  <button class="button">Je suis un bouton sur fond noir</button>
</div>

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Pour qui travaille régulièrement sur des applications web, un type de layout apparaît de manière récurrente : un écran avec une barre de menu en haut, une barre d'actions en bas et un menu sur un côté de l'écran. Avec les modèles css Flex ou Grid...

.main-layout {
  overflow-y: auto;

  /* Ajouter cette propriété à la zone problématique */
  -webkit-overflow-scrolling: touch;
}

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Une des critique récurrente du développement frontend moderne est l'abondance d'outils à maîtriser pour créer une simple application web avec quelques fonctionnalités. En effet, si vous souhaitez développer une application web qui tienne la route...

<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X...

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Si vous faites du développement Web depuis un certain temps, il vous est certainement déjà arrivé une de ces situations : Peu importe la classe que vous ajoutez à votre titre, un des mots dépasse de son container Des mots sont collés en front alo...

Le solde de votre compte est de 10 000
€

ou

Le solde de votre compte est de 10
000 €

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Créer un nouveau fichier nommé pre-commit dans le dossier caché .git/hooks et saisissez-y ce contenu : Ensuite rendez-le exécutable avec : Ceci aura pour effet d'empêcher tout commit fait directement sur la branche master. Les merge seront, eux, ...

#!/bin/sh

branch="$(git rev-parse --abbrev-ref HEAD)"

if [ "$branch" = "master" ]; then
  echo "Commit impossible sur la branche master"
  exit 1
fi

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. Il est souvent utile de positionner une image de fond relativement à la droite d'un élément HTML. Exemple, positionner un chevron dans un dropdown, une loupe dans un champ recherche, etc. La solution consiste à se servir de la propriété backgroun...

input {
  background-position: right 8px center;
}

Cet article est une archive de mon ancien blog. Les informations y étant présentées peuvent être datées et ne plus refléter mes points de vue actuels. S'il vous arrive de vouloir accéder à des variables définies dans un fichier .scss depuis votre javascript, sachez que c'est tout à fait possible en utilisant webpack. Il suffit de les exporter comme-suit : ...puis de les récupérer : Quelle utili...

$primary: rgb(255, 0, 0);

:export {
  primary: $primary;
}