Articles

[Archive] Coder une application mobile depuis zéro en 2020 Publié le

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...
Continuer la lecture
[Archive] Utiliser @at-root pour les variations de style Publié le

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>
Continuer la lecture
[Archive] Améliorer le comportement du scroll des appareils iOS Publié le

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;
}
Continuer la lecture
[Archive] Développer plus rapidement avec Parcel Publié le

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...
Continuer la lecture
[Archive] Maîtriser les espaces insécables Publié le

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 €
Continuer la lecture
[Archive] Git Hooks : Empêcher un commit dans une branche Publié le

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
Continuer la lecture
[Archive] Positionner une background-image par rapport à la droite en css Publié le

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;
}
Continuer la lecture
[Archive] Partager des variables entre SASS et JavaScript avec webpack Publié le

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;
}
Continuer la lecture