Design & Développement web - Le topic des canards qui mangent des cookies

**Dross** · 28/03/2022, 22h03

C'est comme tout, tu pourra toujours faire autrement en programmation et t'en sortir.

De mon coté je l'ai testé sur un projet perso et l'ai adopté, y'a un coté structurant / foolproof qu'on n'a pas avec la simple cascade. Pour les jeunes/débutants aussi c'est intéressant : quand tu relis du code ça permet de détecter les conneries/copier collés malheureux plus rapidement.

**mellifico** · 29/03/2022, 16h35

J'utilise Tailwindcss et je suis très très content.

**Etheon** · 29/03/2022, 16h45

Pareil de mon côté pour TailwindCSS, j'ai eu du mal à démarrer au début, j'ai même abandonné sur le premier projet, mais au final je peux plus m'en passer.

**Awake** · 30/03/2022, 21h49

Je ne pratique pas Tailwind mais via bootstrap j'utilise les classes utilities par moment, qui reviennent un peu au même. Mais de moins en moins, je trouve que ça rend le HTML lourd et que souvent ce n'est pas plus compliqué d'écrire le CSS qui va bien.

Par contre j'admets que le coup du fichier CSS généré uniquement en fonction des classes utilisées dans les templates, c'est vraiment cool.

**Whiskey** · 31/03/2022, 11h25

TailwindCSS est très sympa, je l'utilise parfois, en alternance avec bootstrap (qui effectivement peut etre lourd, mais permet de faire une interface assez rapidement).

**Etheon** · 31/03/2022, 11h41

J'avais commencé mon apprentissage du webdev avec des outils comme Bootstrap / Material UI / Chakra UI, mais très vite je me sentais limité dès que je voulais faire un truc un peu custom.

Depuis je suis passé à Tailwind avec une librairie de composants (https://daisyui.com/) et depuis j'ai plus aucun soucis, vélocité au max pour faire une interface rapidement et custom si besoin.

**raaaahman** · 31/03/2022, 16h06

Du coup, quel est selon toi l'avantage de DaisyUI par rapport à Bootstrap?

**Etheon** · 01/04/2022, 09h17

Je dirais la possibilité de se détacher de DaisyUI et de custom beaucoup plus facilement si nécessaire. Après c'est une impression qui est basé sur des souvenirs de Bootstrap utilisé au début de mon apprentissage ^^ Mais j'avais l'impression d'être bloqué dans un système très "opinionated" (c'est quoi le terme en français? :D).
Maintenant c'était avant la sortie de la version 5 qui m'avait l'air au moment de sa sortie ultra intéressante, mais pas eu le temps de tester.

**raaaahman** · 03/04/2022, 14h59

J'avoue que je ne suis jamais rentré en profondeur dans Bootstrap, mais j'ai aussi le souvenir d'un design "clé en main" assez peu pratique à personnaliser. La possibilité de créer un "thème" existe toutefois depuis longtemps, c'est probablement la manière désginée pour personnaliser l'aspect visuel mais... est-ce que cela vaut vraiment la peine aujourd'hui?

Avec la tendance montante des "Design System", est-ce que le développeur Front-end/d'appli mobile n'a pas tout intérêt à reprendre une bibliothèque de composant tout faits (exemple Ant ou Mantine pour React) et les utiliser tels quels. Quitte à changer de bibliothèque pour chaque projet?

**Whiskey** · 05/04/2022, 13h30

Hello

Introduction

J'ai un petit problème avec TailwindCSS ou plus précisément avec l'outil de développement sur Chrome (celui qui apparait en appuyant sur la touche F12 ou Ctrl+Shift+I.
Pour expliquer mon problème au mieux je vais y aller pas à pas, mais avant de commencer, je précise que je suis loin d'être un pro avec la technologie TailwindCSS, mais j'arrive à me débrouiller avec.

Pourquoi et comment ?

A la base, j'utilisait directement TailwindCSS via mon éditeur de code (PHPStorm, Sublime Text ou VSCode selon mon humeur du jour), j'appliquais les règles dans le fichier .html, ainsi que dans le fichier tailwind.css (avec les @tailwind base, @tailwind components, … etc ).

Cela marchait plutôt bien, mais dernièrement j'ai découvert un petit plugin pour Chrome: InspectFlow ( https://www.inspectflow.io/ ). Ce petit plugin, malheureusement payant (mais pas non plus hors de prix) est plutôt sympa, il permet d'ajouter des class en live et en gros me permettais de voir visuellement la construction des divers composants de ma page, et une fois fini, copier les class utilisé pour les mettre en dur dans mon code.
Le plugin est en test de mon coté, je le maitrise pas encore. De plus, ce qu'il fait on peut le faire directement via l'outil de développement de Chrome. C'est juste que le plugin permet de gagner du temps, ce qui est déjà pas mal.

Le soucis ?

Le soucis viens pas du plugin, il fait son boulot, il rajoute bien les class aux élément que je veux, mais de l'outil de développement de Chrome. Sur le source, je vois bien le changement, les class sont rajouté, mais au niveau de la visualisation, ben cela ne marche pas, rien de change. Bien sûr, je peut pas rafraichir la page (ni le cache) car dans ce cas je perds mes changement que j'ai fait à chaud.

Le projet Test

Pour expliquer ce problème je suis partit sur un projet simple basé sur une monopage en html. Pour créer ce projet, voici ce que j'ai fait :

- Création d'un dossier vide et initialisation d'un projet NodeJS (npm/yarn)

La rien de bien méchant j'ai juste créé un dossier vide et initialisation avec yarn pour avoir le fichier package.json.

Code:

mkdir tooldev
cd tooldev
tooldev> yarn init -y

A titre d'information, le fichier package.json ressemble à cela :

Code:

{
  "name": "tooldev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

- Création du dossier src et public dans le dossier tooldev

Simplement par la commande :

Code:

mkdir src,public

(Je suis en powershell)

- Installation des outils nécessaires

Dans le dossier racine du projet (tooldev), j'ai rajouter :

• http-server (un script permettant, comme son nom l'indique, de créer un serveur http via node)
• tailwindcss
• autoprefixer
• postcss-cli (oui je passe par postcss, même si ce n'est pas une obligation)

J'utilise donc la commande à la racine du projet :

Code:

yarn add --dev http-server tailwindcss autoprefixer postcss-cli

Pour la version test, je ne gère pas les version, la version courante sera très bien.
Yarn m'installe le tout sans aucun soucis et me transforme le fichier package.json en :

Code:

{
  "name": "tooldev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "http-server": "^14.1.0",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.0.23"
  }
}

- Création des fichiers de configuration pour TailwindCSS et PostCSS

Ensuite, je créé les 2 fichiers de configuration via la commande (toujours à la racine du projet) :

Code:

npx tailwindcss init -p

Et j'obtient ces 2 fichiers :

postcss.config.js

Code:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

Code:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

- Configuration de TailwindCSS

Je configure TailwindCSS pour le projet :

Code:

module.exports = {
  content: [
      "./public/**/*.html",
      "./public/**/*js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Pour le moment, je configure pas la purge, ce n'est pas franchement utile pour ce test, ce n'est pas de la prod.

- Création du fichier public/index.html et src/tailwind.config.css

Maintenant, je créer les 2 fichiers :

public/index.html

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="tailwind.css">
    <title>Test TailwindCSS</title>
</head>
<body>
    <div class="container mx-auto">
        <h1>Lorem ipsum dolor sit</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis labore odio recusandae voluptates. Ab
            alias aspernatur corporis distinctio ducimus facilis fugiat harum libero modi molestias nihil nulla optio
            quae quasi, quis sequi sint sunt! Culpa dicta dignissimos, dolor dolore et ipsam laudantium molestiae nemo
            nisi, nulla repellendus similique, sit!</p>
        <p>Beatae commodi cumque doloremque doloribus in, ipsa iusto neque odit officiis ratione recusandae soluta velit
            vitae. Accusamus ad asperiores assumenda consequatur ducimus eligendi, excepturi harum iusto labore maiores,
            nam nihil numquam officia perspiciatis porro praesentium provident quae quas qui quod sit tempore totam
            velit veritatis voluptatibus. Enim eveniet reiciendis sequi.</p>
        <p>Aliquam asperiores autem corporis cum cumque dolore dolorem esse eveniet fugit hic illo inventore iste
            laboriosam, nesciunt nobis odio quasi quos rerum sapiente sed sit tempore temporibus ullam vitae voluptas.
            Dicta dignissimos et explicabo, id mollitia possimus reiciendis tempora totam ut veniam veritatis, voluptas?
            Beatae consectetur facere quos reiciendis similique!</p>
    </div>
</body>
</html>

src/tailwind.config.css

Code:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

}

@layer components {

}

- Ajout des scripts dans le fichier package.json

Afin de faciliter la compilation et divers commande, je rajoute cela au fichier package.json :

Code:

{
  "name": "tooldev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "http-server": "^14.1.0",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.0.23"
  },
  "scripts": {
    "build:css": "postcss ./src/tailwind.config.css -o ./public/tailwind.css",
    "watch" : "postcss -w ./src/tailwind.config.css -o ./public/tailwind.css",
    "serve": "http-server public"
  }
}

Il faut voir la section scripts.

- Compilation de TailwindCSS

Je le fait par la commande :

Code:

yarn build:css

A partir de là, il me créer le css final, cad public/tailwind.css.

Le problème est la

Le site est fonctionnel j'ai une page avec mon contenu sans mise en page hormis la container qui est centré. Le soucis est que si je change en live (ou en ajoutant) une class via le plugin ou par l'outil de développement de Chrome, il me change bien dans le code source (afficher dans l'outil) mais le navigateur en lui-même, rien de change. Pourtant l'outil et le plugin, voit la class.

Par exemple, si je pointe la balise h1 que je rajoute la class font-bold ou text-red-400, il me met bien la class dans le source mais aucun changement visuelle sur la page.

J'ai tester sur le site du plugin (auquel je suis sur qu'ils utilisent TailwindCSS) et la ca marche parfaitement.

Mes questions et observations

• Aurais-je louper un truc avec TailwindCSS ?
• Le plugin marche, vu que le prolème est aussi présent si je passe directement par l'outil de dev.
• J'ai testé avec http-server et sans (en mode local - html et F5 ^^). Cela ne change rien…
• Quelqu'un aurait des idées pour expliquer ce problème et comment je peut le résoudre afin de pouvoir voir les changement en live ?
• Coté extention j'ai juste l'extention pour React, je pense pas que cela joue car ca marche sur le site du plugin. Donc je pense pas qu'il y a un soucis particulier de ce coté…

Excuses et remerciement

Je sais que ce genre de problème, même si ce n'est pas forcement vital, est assez long à expliquer, donc pardon pour le pavé, mais j'ai voulu être au plus clair possible. Si jamais y a des questions hésitez pas.

Merci d'avance.

**Etheon** · 05/04/2022, 15h17

C'est bizarre ton problème effectivement. on peut déjà sortir le plugin du problème vu que ça marche pas non plus en passant par l'outil de dev.

Je viens de tester sur mes deux sites persos qui utilisent tailwind, en rajoutant un text-red-500 ça se met bien à jour.

Par le plus grand des hasards, tu pourrais tester sur Firefox sans aucun plugin ? Je ne vois pas dans tes remarques que tu ais potentiellement testé ça.

Edit : Par contre je vois un petit truc chelou, ta dépendance c'est pas postcss mais postcss-cli. Sur mes projets dans le package.json j'ai postcss tout court

**Whiskey** · 05/04/2022, 15h27

Envoyé par Etheon

C'est bizarre ton problème effectivement. on peut déjà sortir le plugin du problème vu que ça marche pas non plus en passant par l'outil de dev.

Je viens de tester sur mes deux sites persos qui utilisent tailwind, en rajoutant un text-red-500 ça se met bien à jour.

Par le plus grand des hasards, tu pourrais tester sur Firefox sans aucun plugin ? Je ne vois pas dans tes remarques que tu ais potentiellement testé ça.

Effectivement, j'ai pas tester sur un autre navigateur, un oubli de ma part

Je viens de tester sur firefox avec aucun plugin installé, sur l'outil et pareil, la class est bien dans le source mais rien ne change sur l'affichage

. Ce qui concolu que ce n'est pas chrome et encore moins les extensions installé le soucis

Me demande si y a pas un soucis avec la compilation de TailwindCSS, si je met dans mon ide class="font-bold" dans la balise h1, si je rafraichit la page (apres sauvegarde) il y a rien, malgré que c'est dans le source. Par contre, il faut que je recompile le fichier de configuration pour voir les changement.

**Etheon** · 05/04/2022, 15h35

J'ai mis mon edit après que tu ais vu mon message je pense mais check postcss (et pas postcss-cli dans ton package.json).

Et sinon essaie de voir les autres méthodes d'intégration de tailwind ici : https://tailwindcss.com/docs/installation

Peut être déjà tester une installation très simple avec le CDN. J'ai l'impression qu'effectivement ça compile pas chez toi ^^

**Whiskey** · 05/04/2022, 15h48

Envoyé par Etheon

J'ai mis mon edit après que tu ais vu mon message je pense mais check postcss (et pas postcss-cli dans ton package.json).

Et sinon essaie de voir les autres méthodes d'intégration de tailwind ici : https://tailwindcss.com/docs/installation

Peut être déjà tester une installation très simple avec le CDN. J'ai l'impression qu'effectivement ça compile pas chez toi ^^

Bon j'ai tester avec postcss (sans le cli) et pareil ca veut pas.

J'ai tester avec le CDN, et la cela passe. Ce qui confirme que le problème viens bien de la configuration/compilation. La compilation marche, j'obtiens bien le css et comme dit plus haut le fichier compiler change bien le design de la page, mais pas a chaud.

Par contre, question noob, pourquoi le CDN est passé par du javascript (script) et non par un css comme via compilation ?

PS: En enlevant postcss-cli, je suis obliger de passer par la command tailwindcss build -i source -o dest pour compiler. (postcss existe plus en commande)

Ceci dit je peut toujours passer par le CDN pour faire mes tests avant de le passer en mode compile

Dans tout les cas, merci pour ton aide.

**Etheon** · 05/04/2022, 18h02

Si c'est au niveau du hot reload c'est peut être juste un problème avec http-server, peut être tester autre chose ?

J'avoue que j'ai toujours fait des installations avec au minimum React/Next.js et donc avec des systemes live/hot reload intégré.

**Whiskey** · 05/04/2022, 18h24

Envoyé par Etheon

Si c'est au niveau du hot reload c'est peut être juste un problème avec http-server, peut être tester autre chose ?

J'avoue que j'ai toujours fait des installations avec au minimum React/Next.js et donc avec des systemes live/hot reload intégré.

Je pense pas car meme si j'ouvre le fichier html directement dans le navigateur, ca ne passe pas non plus. Les serveur du type http-server ou live-server sont le premier truc que j'ai vérifer.

**Etheon** · 05/04/2022, 18h56

Ok j'ai compris (enfin je crois ^^), j'ai remis en place ton projet de mon côté pour comprendre le truc.

Déjà pour l'explication de comment ça fonctionne, Tailwind quand tu vas lui dire de compiler, il va aller regarder ton index.html par exemple (et tout ce que tu lui as indiqué dans le tailwind.config.js) et va ajouter à la volée les éléments dont il a besoin.
Par exemple : "Ok, je vois que tu as utilisé text-blue-700 dans ton index.html, pas de soucis je te le rajoute dans ton public/tailwind.css".

C'est pour ça que ça marche quand tu compiles.

Ensuite le problème du live... En fait si tu te dis pendant le dev "ah en fait j'ai pas besoin de text-blue-700, mais plutôt de text-red-500", si Tailwind ne "watch" pas les modifs, il risque pas de te rajouter le truc.

Dans ton package.json j'ai vu que tu as un watch, tu l'as lancé en même temps que ton serveur http? De mon côté si je lance dans un powershell le live server, et dans un autre le watch (via npm run watch), si je modifies des trucs dans mon IDE (par exemple changer la couleur du texte), ça sera bien pris en compte côté browser !

Edit parce que j'ai pas répondu à ton problème de base en fait...

Le truc c'est qu'avec ce setup, tu vas avoir le strict minimum de tailwind en fonction de ce que tu as dans ton index par exemple (purge auto).
Pourquoi ça marche avec le CDN ? Parce qu'il va taper dans tout dans le doute.

**Whiskey** · 05/04/2022, 19h28

Envoyé par Etheon

Ok j'ai compris (enfin je crois ^^), j'ai remis en place ton projet de mon côté pour comprendre le truc.

Déjà pour l'explication de comment ça fonctionne, Tailwind quand tu vas lui dire de compiler, il va aller regarder ton index.html par exemple (et tout ce que tu lui as indiqué dans le tailwind.config.js) et va ajouter à la volée les éléments dont il a besoin.
Par exemple : "Ok, je vois que tu as utilisé text-blue-700 dans ton index.html, pas de soucis je te le rajoute dans ton public/tailwind.css".

C'est pour ça que ça marche quand tu compiles.

Ensuite le problème du live... En fait si tu te dis pendant le dev "ah en fait j'ai pas besoin de text-blue-700, mais plutôt de text-red-500", si Tailwind ne "watch" pas les modifs, il risque pas de te rajouter le truc.

Dans ton package.json j'ai vu que tu as un watch, tu l'as lancé en même temps que ton serveur http? De mon côté si je lance dans un powershell le live server, et dans un autre le watch (via npm run watch), si je modifies des trucs dans mon IDE (par exemple changer la couleur du texte), ça sera bien pris en compte côté browser !

Edit parce que j'ai pas répondu à ton problème de base en fait...

Le truc c'est qu'avec ce setup, tu vas avoir le strict minimum de tailwind en fonction de ce que tu as dans ton index par exemple (purge auto).
Pourquoi ça marche avec le CDN ? Parce qu'il va taper dans tout dans le doute.

Pour les tests du probleme je passe par un simple build, le watch je l'utilise en général quand je developpe le projet (ca m'evite de relancer tout les 5s la commande de build ^^). Je l'ai mis surtout par habitude. Ca marche, il met bien a jour dès que je modifie le source dans l'IDE. Mais ne change rien en live, sans doute que la version live passe par la mémoire et pas par les fichiers tel quel. En tout cas le live ne passe pas meme avec le watch et le server http lancé.

Justement, le fait que le fichier css généré est plutot léger, j'imagine que il construit seulement avec ce qu'il a besoin. Cela ma aussi tildé. Cependant, que je met dans la config les fichier a scanner ou non, la taille du fichier ou le nombre de ligne ne change pas. Y a t'il un moyen de compiler tailwindcss en mettant tout le contenu en omettant ce que j'utilise dans les sources ? Je n'ai mis aucune option de purge dans le projet.

PS: J'utilise tailwind dans sa version 3.

**Etheon** · 05/04/2022, 20h01

Je suis pas sur mon poste je peux pas tester la, mais la doc propose une install de ce type : npx tailwindcss init --full
https://tailwindcss.com/docs/configuration

A tester ?

**Whiskey** · 05/04/2022, 20h14

Envoyé par Etheon

Je suis pas sur mon poste je peux pas tester la, mais la doc propose une install de ce type : npx tailwindcss init --full
https://tailwindcss.com/docs/configuration

A tester ?

Il me remplis bien le fichier tailwind.config.js avec la configuration de tailwind par default, mais a la compilation :

- Avec le content remplit , me créer le CSS (meme taille), tailwind fonctionne sur le navigateur, pas l'edition en live.
- Sans le content remplit, me créer le CSS un peu moins grand, tailwind ne marche pas ou du moins, les class donné dans le html ne marche pas, le live non plus ne marche pas. J'imagine que dans ce cas il met un truc standard et pas forcément adapté a ce que j'ai dans le source html

Je vais arreter la pour ce soir et reprendre demain, je serais plus frais. Si jamais tu as d'autres idées je suis preneur. Encore une fois, merci pour ton aide.

**Etheon** · 05/04/2022, 21h06

Bon en fait je viens de tester sur mes 2 sites, et ça marche jamais dans le browser si ça a pas été compilé à un moment (logique tu vas me dire). Et j'ai pas trouvé de solution simple pour dire "met tout dedans osef!"

Sur le site de ton plugin, c'est des malins, ils ont purgé que dalle et leur bundle CSS fait 56kb minifié alors que t'as une landing page... à côté le miens en fait 12.

Pour ton environnement de dev si tu veux j'ai une solution crade mais qui a l'air de fonctionner:

* Récupère la version complète du CSS du site du plugin ici : https://www.inspectflow.io/_next/sta...cc25fba027.css
* Utilise ce site pour l'unminify https://www.unminify2.com/
* Copie tout ça dans ton public/tailwind.css

Et quand tu es en dev, tu t'occupes pas de générer un bundle tu utilises ce gros css de 600kb

Quand t'es satisfait de tes modifs, tu pourras alors générer ton css clean.

Fun fact donc, si on ne purge pas Tailwind, le fichier CSS fait 37692 lignes. PROPRE. (Bon, plus ou moins, parce que ya des class custom du site Inspect Flow, mais quand même).

**Whiskey** · 05/04/2022, 22h01

Envoyé par Etheon

Bon en fait je viens de tester sur mes 2 sites, et ça marche jamais dans le browser si ça a pas été compilé à un moment (logique tu vas me dire). Et j'ai pas trouvé de solution simple pour dire "met tout dedans osef!"

Sur le site de ton plugin, c'est des malins, ils ont purgé que dalle et leur bundle CSS fait 56kb minifié alors que t'as une landing page... à côté le miens en fait 12.

Pour ton environnement de dev si tu veux j'ai une solution crade mais qui a l'air de fonctionner:

* Récupère la version complète du CSS du site du plugin ici : https://www.inspectflow.io/_next/sta...cc25fba027.css
* Utilise ce site pour l'unminify https://www.unminify2.com/
* Copie tout ça dans ton public/tailwind.css

Et quand tu es en dev, tu t'occupes pas de générer un bundle tu utilises ce gros css de 600kb

Quand t'es satisfait de tes modifs, tu pourras alors générer ton css clean.

Fun fact donc, si on ne purge pas Tailwind, le fichier CSS fait 37692 lignes. PROPRE. (Bon, plus ou moins, parce que ya des class custom du site Inspect Flow, mais quand même).

Je vois, pour ta solution je testerais, sinon je partirais le CDN (le live marche avec lui) et je me ferais une page sandbox pour réaliser mes tests. Je peut toujours coller le résultat dans la version à compiler.

Merci pour ton aide.

**Etheon** · 05/04/2022, 22h05

Le CDN c'est effectivement un peu plus propre ^^ et pas de soucis !

**acdctabs** · 05/04/2022, 22h40

Envoyé par acdctabs

Ben en gros j'essaie de comprendre comment ça marche quand tu ne veux plus de "deprecated" pour monter en version.
J'ai été catapulté sur un projet qui utilise des vieilles versions.
J'ai un config.json qui répertorie les librairies que j'utilise, quand je veux mettre à jour, je change le numéro de version dans le fichier, je fais un composer update -W (pour les dépendances) et roule ma poule (avec les messages en cas de conflit qui à défaut d'être parfait m'aident quand même pour bien choisir mes versions).
Sauf que c'est en local le dépot (donc j'ai envie de dire ouais du type artifactory), donc je vais sur packagist.org répérer les versions avec leurs dépendances, je fais une liste et donne ça à un mec.

Mais comment ça fonctionne vraiment tout ça je ne sais pas trop, je suis en train d'apprendre justement.
Je pars de très loin. Je sais programmer en objet et j'ai fait du PHP il y a 10 ans ... je ne connais ni l'IDE ni Symfony.

Le problème c'est où je bosse les gens ne font que du java, on a récupéré un projet mais j'ai pas de collègues pour m'aiguiller correctement.

Enfin voilà, sur youtube il y a des trucs mais si quelqu'un avait un bon site ou un bonne chaine je suis preneur.

(et là je ne suis que dans la config, je n'ai même pas encore regardé le code du projet)

Je viens de lire ça :
https://scotch.io/tutorials/a-beginn...de-to-composer
(mais faut que je monte en compétence sur tellement de chose ...)
Ça explique bien l'intérêt de composer.

Bon après ma petite barre Symfony, je verrais la semaine prochaine si j'arrive à faire baisser le nombre de deprecated (je suis en Symfony 3.4.48 de mémoire, le but c'est dans un premier temps de passer en Symfony 4). J'étais proche des 1500...

J'ai des librairies qui sont "discontinued" dans le projet, là ça va être compliqué car va falloir que je rentre dans le code.

J'attaque ça :
https://symfonycasts.com/screencast/...4-deprecations

Nexus c'est ça sinon :
https://fr.sonatype.com/nexus/repository-pro

Bon ben ça a pris pas mal de temps (pour plein de raisons comme l'ajout d'énormément de fonctionnalité, le remplacement de libraires...) mais bref, je suis bien monté en compétence et tout tourne en PROD correctement

Vraiment une expérience intéressante !

**Whiskey** · 06/04/2022, 11h48

Envoyé par Etheon

Le CDN c'est effectivement un peu plus propre ^^ et pas de soucis !

Pour revenir sur mon problème, de plusieurs recherches et a titre d'info, le mode JIT (https://v2.tailwindcss.com/docs/just-in-time-mode) a été introduit dans la version 2, en gros le mode permet de purger automatiquement les class non utilisé ou ajouter ce qu'on utilise si activé. La mauvaise nouvelle est que dans la version 3, le purge en lui même n'existe apparement plus (remplacé par content dans le fichier config) car il est - avec JIT installé par défaut. Ce qui veut dire que si on compile, se sera forcement purgé, et cela quel que soit la configuration.

J'ai vu pendant mes recherches sur le sujet que beaucoup on essayer de désactivé ce mode JIT dans la version 3 mais pas trouvé de réponse viable à ce sujet, ce serait apparemment pas prévu. La version 2 pouvait désactivé le JIT via le fichier de config.

Le site du plugin a du prendre la version CDN pour l'avoir en complet sans doute.

Je peut me tromper bien sur.

**Etheon** · 06/04/2022, 12h44

Ouais je me suis douté qu'il y avait un truc de ce côté, un de mes sites avait encore le mode "jit" dans le fichier config et effectivement j'avais du faire le changement purge-> content.

Dans un sens c'est pertinent, parce que même en mode dev tu veux pas forcément que ton CSS pèse une tonne, mais dans ton cas précis, ben ça t'aide pas.

et gg acdctabs, c'est en forgeant qu'on devient forgeron

**Whiskey** · 06/04/2022, 12h51

Envoyé par Etheon

Ouais je me suis douté qu'il y avait un truc de ce côté, un de mes sites avait encore le mode "jit" dans le fichier config et effectivement j'avais du faire le changement purge-> content.

Dans un sens c'est pertinent, parce que même en mode dev tu veux pas forcément que ton CSS pèse une tonne, mais dans ton cas précis, ben ça t'aide pas.

et gg acdctabs, c'est en forgeant qu'on devient forgeron

Effectivement dans mon cas, et par défaut faudra que je passe par le CDN - et par la version compilé pour la prod

**MrBeaner** · 12/04/2022, 11h25

Hello les canards ! Depuis mes débuts en programmation en 2020 (data science d'abord, puis web dev), je suis heureux de partager avec vous que j'ai obtenus mes premiers contrats en 2021 en tant que consultant développeur et que je vais ces prochains mois développer une app entière pour un client et quelques milliers d'utilisateurs

J'espère que je pourrai développer mon activité stablement par la suite, mais je ne me fais pas trop de souci vu comment j'ai pris le virus et que je trouve très fun de trouver des solutions pour mes clients à l'aide du numérique. Et coder reste très plaisant pour moi, parce que la phase d'apprentissage est continue.

Je voulais développer l'application en Django REST + React à l'époque, mais je penche pour Remix vu que le cahier des charges n'est pas restrictif et que ça me dit bien de bosser avec Typescript et prisma.

Voilà voilà. J'aimerais également reprendre un Mooc à l'occasion, comme CS50, mais actuellement j'ai rien trouvé de plus intéressant que de construire des trucs avec des ressources à gauche à droite.

D'ailleurs, je vais probablement utiliser Tailwindcss, que j'ai abhoré d'abord et que j'aime maintenant. Et probablement que je n'aimerais plus un jour

J'utilise Vite aussi préférentiellement pour construire mes projets. Et je dois également faire mon site web perso que je procrastine comme jamais

EDIT : ah et j'écrivais tout ça justement pour vous remercier pour vos messages encourageant à mes débuts <3

**tenshu** · 12/04/2022, 11h31

Que des bonnes nouvelles en effet !

Tu es freelance du coup ou consultant genre dans une ESN/SSII ?

**MrBeaner** · 12/04/2022, 11h45

Envoyé par tenshu

Que des bonnes nouvelles en effet !

Tu es freelance du coup ou consultant genre dans une ESN/SSII ?

Freelance à mon compte. Comme j'avais des mandats de consultant en management/analytics avant, j'ai pu décrocher mes premiers contrats rapidement.

J'aimerais bien intégrer une équipe à temps partiel pour expérimenter le travail de groupe cela dit, mais ce sera à voir selon les opportunités. J'aime bien travailler en solo, mais j'aimerais bien apprendre avec des devs plus expérimentés que moi.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages