DEV Community: Mattèo Gauthier

Mettre à jour Flipper debugger dans un projet react native

Mattèo Gauthier — Wed, 04 Jan 2023 11:24:49 +0000

Introduction

J’ai eu envie de mettre à jour le Package flipper, car une erreur, apparaissez dans le logiciel (RSockets are being deprecated at Flipper. Please, use the latest Flipper client in your app to migrate to WebSockets.). La version avec laquelle j'étais était là 0.125.0. J'ai donc essayé de chercher sur Internet comment mettre à jour Flipper dans un Projets React Native, je n'ai rien trouvé. Avec un peu de galères, j’ai pu trouver comment mettre à jour Flipper, voici la solution.

⚠️ Ce tutoriel porte uniquement sur les version de React Native supérieure ou égale à la version 0.69.0 (=> 0.69.0)

Sommaire

Tutoriels étapes par étapes

1. Identifier la version du logiciel Flipper

Tout d’abord, vous devrez vérifier la version du logiciel Flipper installé sur votre Mac.

La version du logiciel Flipper

2. Modifier la version de Flipper pour Android

2.1 Changement de la version

Rendez-vous sur le fichier android/gradle.properties pour éditer la configuration de Gradle, l’outil qui build votre application android.

Trouver la propriété ci-dessous

# Avec la version actuel de Flipper (ex. 0.125.0)
FLIPPER_VERSION=0.125.0

Modifier la valeur en 0.176.1 (la version de Flipper que vous avez choisis)

FLIPPER_VERSION=0.176.1

2.2 Vérifications

Ouvrez un terminal et nous allons effectuer un clean du build Android pour vérifier que tout fonctionne coté Android.

cd android && ./gradlew clean

3. Modifier la version de Flipper pour iOS

3.1 Changement de la version

Pour changer la version de Flipper coté iOS, rendez-vous sur le fichier ios/Podfile

Trouver la propriété :flipper_configuration et modifier la valeur comme ceci

# Valeur initial
# :flipper_configuration => FlipperConfiguration.enabled,
:flipper_configuration => FlipperConfiguration.enabled(["Debug"], { 'Flipper' => '
0.176.1' }),

3.2 Vérifications

Ouvrez un terminal est déplacer vous dans le dossier ios pour mettre à jour les dépendances Cocoapods. Voici la commande a exécuté :

pod install --repo-update

Si l’installation se passe sans encombre (erreurs), vous avez fini, bravo ! 🎉

Ce qui n’était pas mon cas 😅

Résolutions les problèmes d’installations sur IOS

Incompatibilité du processeur

Voici un extrait de l’erreur pod qui est survenue et comment la fixer.

LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle, 0x0009): tried: '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have (x86_64), need (arm64e))) - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.fra
...

Ici, c'est l’architecture du processeur qui pose un problème, je travaille effectivement sur un Mac Apple Silicon, ce qui signifie que l’architecture du processeur correspond à arm64. Par sécurité, je décide de réinstaller CocoaPods proprement (la réponse StackOverflow qui m’a aidé)

# Uninstall the local cocoapods gem
sudo gem uninstall cocoapods

# Reinstall cocoapods via Homebrew
brew install cocoapods

Une fois cela fait, j’ai ré-exécuté la commande pour mettre à jour les dépendances de CocoaPods.

# in /ios
pod install --repo-update

Erreur de dépendances cocoapods

Et là une nouvelle erreur 😢 (après avoir exécuté pod install --repo-update)

[!] CocoaPods could not find compatible versions for pod "FlipperKit/FlipperKitUserDefaultsPlugin":
  In Podfile:
    FlipperKit/FlipperKitUserDefaultsPlugin (= 0.176.1)

None of your spec sources contain a spec satisfying the dependency: `FlipperKit/FlipperKitUserDefaultsPlugin (= 0.176.1)`. # FlipperKit don't have a 0.176.1 version

Ici, c'est donc la dépendance FlipperKit qui est incompatible avec la version 0.176.1🙄.

Pour vérifier cela, rdv sur l’outil de recherche de package CocoaPods cocoapods.org/pods/FlipperKit

Le package actuel n’est peut-être pas celui qui vous pose un problème, rechercher sur le site cocoapods.org/pods le pod qui pose un problème afin de vérifier la version.

En effet, il n’existe pas de version 0.176.1 comme notifier dans l’erreur.

Pour résoudre ce soucis, il vous suffit de modifier la version de Flipper en une version compatible avec les dépendances (en l’occurrence 0.175.0 pour mon cas). Pour vérifier que la nouvelle version choisie fonctionne, nous allons mettre à jour les dépendances, toujours avec la même commande.

pod install --repo-update

Dans mon cas cela a fonctionné ! 🎉

Conclusion

Vérifier bien que Flipper fonctionne bien sur les deux plateformes (Android et iOS) avant de déployer vos modifications. J’espère que ce tutoriel vous aura aidé, bonne journée à vous !

Pourquoi TailwindCSS est le meilleur moyen de styliser une page web ?

Mattèo Gauthier — Wed, 04 Aug 2021 21:45:11 +0000

Pourquoi TailwindCSS est un le meilleur moyen de styliser le HTML ?

TailwindCSS est un framework CSS orienté utility-first créer par Adam Watham un designer / développeur en 2017. Ce framework n'utilise pas la sémantique classique imposé par la documentation officielle w3c, c'est en 2019 que Tailwind a commencé révolutionné l'intégration web, en accélérant ce processus.

Quels sont les avantages de TailwindCSS :

1. Un gain de temps grâce aux class génériques

Lorsque vous intégrez une page web classique vous écrivez votre HTML et votre CSS, peu importe l'outil que vous utilisez il y a toujours une étape d'écriture de la sémantique. Depuis que j'utilise TailwindCSS je ne quitte pas la syntaxe HTML lors de la création d'un page web. Tout simplement, TailwindCSS apporte au développeur des classes css générique utilisable directement dans la propriété class d'un élément HTML.

Voici un composant rendu en html :

Et ensuite voici le html & css écrit pour ce composant.

Mais avec Tailwind le code est beaucoup plus court :D

Le système de classes tailwindcss sont un avantage sur plusieurs points :
- Pas besoins d'inventer des noms de class bancales
- Les changements du style ce sont directement sur le composant ce qui évite les conflits html & css
- Tailwind permet d'intégrer un site complétement sans toucher au css

2. Des performances optimales

Le framework a été créé dans l'objectif d'être intégrer avec un compiler, cela pourrait repousser certain utilisateur, c'est pourquoi il existe une version cdn.
PostCSS permet d'optimiser le bundle final, notamment l'utilisation de purgecss native au framework à configurer dans le fichier tailwind.config.js, c'est pourquoi la plupart des projets tailwind délivre en moyenne 10kb de CSS. En addition avec la compression du site statique en gzip ou brotli vous pouvez être assuré que votre navigateur réalisera le rendu du css en un temps record.

3. Le support de méthodes avancés

Tailwind a été créé pour supporter la plupart des méthodes css comme les pseudos elements, les media queries, etc…

Par exemple vous souhaitez utiliser le dark mode sur votre production, voici un exemple de son utilisation :

<h1 class="text-white border dark:text-black dark:border-gray-300">
  Hello Tailwind
</h1>

Utiliser Tailwind sur un projet :

Tailwind fonctionne avec la plupart des frameworks web les plus populaires actuellement. Intégrer à un projet tailwindcss, reviens à utiliser un plugin postcss.


Next.js	Vue	Laravel
Nuxt.js	Create React App	Gatsby

Installer TailwindCSS avec Vue.js

Tailwind CSS requiert Node.js 12.13.0 ou une version supérieur.

Installer les packages

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Générer les fichiers de configuration

Ici vous allez générer le fichier tailwind.config.js utile à la configuration des paramètres de Tailwind. La commande que vous allez exécuter va aussi créer un fichier postcss.config.js qui sera utile au fonctionnement de TailwindCSS (cela ajoute aussi un l'utilitaire autoprefixer qui permet de rendre le css compatible avec des navigateurs anciens).

npx tailwindcss init -p

Si vous souhaitez réduire la taille du bundle final, TailwindCSS intègre une option purge dans son fichier de configuration tailwind.config.js. Pour l'activer il suffit d'ajouter la propriété :

// tailwind.config.js
module.exports = {
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"] // Config
};

Ajouter Tailwind au CSS

Dans un nouveau fichier que vous allez créer index.css vous allez placer les directives utile à l'importation de Tailwind.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Ensuite, il faut importer le fichier css que vous venez de créer.

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./index.css"; // Le nouveau fichier
createApp(App).mount("#app");

Et voilà, Tailwind est ajouté à votre projet 🎉

Conclusion

Vous allez découvrir durant votre utilisation le gain de temps conséquent que Tailwind va apporter.

How to use all TailwindCSS colors in your project

Mattèo Gauthier — Fri, 19 Feb 2021 02:39:11 +0000

Hey if you wanted to use the brand new TailwindCSS color palette :

How to add the brand new palettes

Step 1/2

Add the full-palette dependencies

yarn add full-palette --dev

Step 2/2

Open the tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  presets: [require('full-palette')], // The line to add :D
  plugins: [],
}

And add the require('full-palette') to the presets properties in the tailwind config.

And that's it, thanks for reading this post :D