Créer un compteSe connecter
J'ai vite fait jeté un œil sur SASS autrefois mais je tiens trop à mon vieux CSS
:risi_sad:
Bah c’est du CSS en plus ergonomique

Et tu peux utiliser des variables c’est incroyablement pratique
il y a 6 ans
Volutes
Volutes
6 ans
Bah c’est du CSS en plus ergonomique

Et tu peux utiliser des variables c’est incroyablement pratique
Y a des variables en CSS aussi
:illya_hihi:


Bon, je l'accorde c'est pas exactement le même genre de variables
il y a 6 ans
ça dépend, tu veux que les joueurs s'identifient au personnage principal ?
Si oui, tu peux écrire avec tu ou avec vous
:onche:
Ah j'avoue que j'avais pas penser à ça, je pense que oui je vais faire en sorte qu'ils s'identifient au personnage principal pour qu'ils soient bien plus dans l'histoire
il y a 6 ans
Volutes
Volutes
6 ans
Bah c’est du CSS en plus ergonomique

Et tu peux utiliser des variables c’est incroyablement pratique
Tu parles à quelqu'un qui est resté sur le PHP parce qu'il n'avait pas envie d'apprendre le nodeJS pour éviter de repartir sur de nouvelles base
:pillow:


Je suis pas assez dans le codage pour me remettre à la page mais je garde tout les langages dans ma tête au cas où l'envie me reprend de m'y intéresser d'avantage
:pepeLove:
il y a 6 ans
Perso en 2021 je recommande de go PostCSS plutôt que SASS, c'est bien plus extensible étant donné que ça traduit le CSS en un objet manipulable en js. Par exemple y a un plugin (postcss-font-magician) qui permet d'automatiquement détecter les fonts utilisées dans le css (dans des font-family) et de créer à la volée les @font-face accordées par exemple sur google fonts. Y a aussi un plugin (purge) qui permet de supprimer toutes les règles css inutilisées dans l'application (en récupérant statiquement les classes css dans le code source de l'app).

Je conseille aussi de se pencher sur tailwind, d'autant plus lorsqu'on utilise des composants HTML (natifs, react, vue ou autre). Tailwind c'est une library de css atomique très orienté configuration. Y a un tailwind.config.js dans lequel on peut spécifier les couleurs, les fonts, les espacements et des classes associées sont crées.

Par exemple on peut avoir défini une couleur "blue", "blue-lighter", "blue-brighter" et dans le HTML on pourra utiliser les classes bg-blue, text-blue-lighter, border-blue-brighter.

Ça gère aussi les états, on a des classes hover:text-blue etc.

À noter que, effectivement le CSS atomique ça fait peur au début puisque ça donne l'impression de tout styler dans un style="" ce qui est pas très recommandé (séparation du contenu et de la forme etc.), le truc c'est que c'est vraiment conçu avec un aspect "composant" en tête plutôt qu'un aspect monolithique. Et dans le cadre d'un composant justement ça fait sens de pas séparer forme et contenu.

Ça permet aussi d'avoir un CSS bien plus maintenable puisque les changements sont bien plus localisés. Typiquement si on décide de styliser deux composants de la même façon puis qu'on change d'avis, y a que le second composant à changer. Là où avec l'approche standard on aurait utilisé les mêmes classes pour les deux composants et on devrait alors créer des nouvelles classes pour séparer les deux.
il y a 6 ans
Perso en 2021 je recommande de go PostCSS plutôt que SASS, c'est bien plus extensible étant donné que ça traduit le CSS en un objet manipulable en js. Par exemple y a un plugin (postcss-font-magician) qui permet d'automatiquement détecter les fonts utilisées dans le css (dans des font-family) et de créer à la volée les @font-face accordées par exemple sur google fonts. Y a aussi un plugin (purge) qui permet de supprimer toutes les règles css inutilisées dans l'application (en récupérant statiquement les classes css dans le code source de l'app).

Je conseille aussi de se pencher sur tailwind, d'autant plus lorsqu'on utilise des composants HTML (natifs, react, vue ou autre). Tailwind c'est une library de css atomique très orienté configuration. Y a un tailwind.config.js dans lequel on peut spécifier les couleurs, les fonts, les espacements et des classes associées sont crées.

Par exemple on peut avoir défini une couleur "blue", "blue-lighter", "blue-brighter" et dans le HTML on pourra utiliser les classes bg-blue, text-blue-lighter, border-blue-brighter.

Ça gère aussi les états, on a des classes hover:text-blue etc.

À noter que, effectivement le CSS atomique ça fait peur au début puisque ça donne l'impression de tout styler dans un style="" ce qui est pas très recommandé (séparation du contenu et de la forme etc.), le truc c'est que c'est vraiment conçu avec un aspect "composant" en tête plutôt qu'un aspect monolithique. Et dans le cadre d'un composant justement ça fait sens de pas séparer forme et contenu.

Ça permet aussi d'avoir un CSS bien plus maintenable puisque les changements sont bien plus localisés. Typiquement si on décide de styliser deux composants de la même façon puis qu'on change d'avis, y a que le second composant à changer. Là où avec l'approche standard on aurait utilisé les mêmes classes pour les deux composants et on devrait alors créer des nouvelles classes pour séparer les deux.
Le codage ça a bel et bien changé depuis 2010 à 2014-2015 à ce que je vois

Je prend note de tout ce que tu as dis mais je pense que c'est pour les personnes qui ont un réel projet en tête et non pour les personnes comme moi qui décide de réaliser un petit projet sur un coup de tête en codant sur son temps libre en petite quantité par jour

Mais j'aime bien apprendre tout ça par le biais de vos messages, ça permet de me mettre à jour mentalement avant de le faire physiquement quand l'envie me vient, énormément de choses ce sont développés en dix ans, le problème est que je suis retombé dedans trop tard, je n'avais même pas conscience que le MySQL était passé en MySQLi par exemple
il y a 6 ans
Le codage ça a bel et bien changé depuis 2010 à 2014-2015 à ce que je vois

Je prend note de tout ce que tu as dis mais je pense que c'est pour les personnes qui ont un réel projet en tête et non pour les personnes comme moi qui décide de réaliser un petit projet sur un coup de tête en codant sur son temps libre en petite quantité par jour

Mais j'aime bien apprendre tout ça par le biais de vos messages, ça permet de me mettre à jour mentalement avant de le faire physiquement quand l'envie me vient, énormément de choses ce sont développés en dix ans, le problème est que je suis retombé dedans trop tard, je n'avais même pas conscience que le MySQL était passé en MySQLi par exemple
C'est des outils après, rien ne t'oblige à les utiliser mais c'est bien de savoir qu'ils existent
:illya_happy:
il y a 6 ans
Y a des variables en CSS aussi
:illya_hihi:


Bon, je l'accorde c'est pas exactement le même genre de variables
oui mais trop gitan

jcrois pas qu’il existe les trucs genre darken($color, 20%)

après j’ai pas trop suivi les nouveautés CSS ces derniers temps mais SASS est largement meilleur
il y a 6 ans
Perso en 2021 je recommande de go PostCSS plutôt que SASS, c'est bien plus extensible étant donné que ça traduit le CSS en un objet manipulable en js. Par exemple y a un plugin (postcss-font-magician) qui permet d'automatiquement détecter les fonts utilisées dans le css (dans des font-family) et de créer à la volée les @font-face accordées par exemple sur google fonts. Y a aussi un plugin (purge) qui permet de supprimer toutes les règles css inutilisées dans l'application (en récupérant statiquement les classes css dans le code source de l'app).

Je conseille aussi de se pencher sur tailwind, d'autant plus lorsqu'on utilise des composants HTML (natifs, react, vue ou autre). Tailwind c'est une library de css atomique très orienté configuration. Y a un tailwind.config.js dans lequel on peut spécifier les couleurs, les fonts, les espacements et des classes associées sont crées.

Par exemple on peut avoir défini une couleur "blue", "blue-lighter", "blue-brighter" et dans le HTML on pourra utiliser les classes bg-blue, text-blue-lighter, border-blue-brighter.

Ça gère aussi les états, on a des classes hover:text-blue etc.

À noter que, effectivement le CSS atomique ça fait peur au début puisque ça donne l'impression de tout styler dans un style="" ce qui est pas très recommandé (séparation du contenu et de la forme etc.), le truc c'est que c'est vraiment conçu avec un aspect "composant" en tête plutôt qu'un aspect monolithique. Et dans le cadre d'un composant justement ça fait sens de pas séparer forme et contenu.

Ça permet aussi d'avoir un CSS bien plus maintenable puisque les changements sont bien plus localisés. Typiquement si on décide de styliser deux composants de la même façon puis qu'on change d'avis, y a que le second composant à changer. Là où avec l'approche standard on aurait utilisé les mêmes classes pour les deux composants et on devrait alors créer des nouvelles classes pour séparer les deux.
Ah je connais pas, ça a l’air cool aussi

Après tout va trop vite, c’est en ça que le développement en front-end est aussi relou.

En 2021 t’as ça et 2022 t’auras un truc encore plus performant
:attardin:


Pour l’instant grâce a Skeno j’ai découvert SASS et je suis très à l’aise avec.

Après je pige pour tout ce qui est font c’est encore relou de devoir les installer etc
il y a 6 ans
Pour les professionnels de la littérature le mieux est d'écrire l'histoire à la première personne ou à la troisième personne ?

• Prénom va dans le centre commercial

• Je vais dans le centre commercial
Je préfère la première personne
:sodium_reup:
il y a 6 ans
Volutes
Volutes
6 ans
Ah je connais pas, ça a l’air cool aussi

Après tout va trop vite, c’est en ça que le développement en front-end est aussi relou.

En 2021 t’as ça et 2022 t’auras un truc encore plus performant
:attardin:


Pour l’instant grâce a Skeno j’ai découvert SASS et je suis très à l’aise avec.

Après je pige pour tout ce qui est font c’est encore relou de devoir les installer etc
C'est pas vraiment récent PostCSS, ça a été popularité y a bien 6-7 ans. C'est juste qu'aujourd'hui ça s'est vraiment standardisé pour des raisons d'extensibilité et de lenteur des alternatives (y a qu'à voir le temps que ça prend de faire un npm i node-sass putain).
:illya_hihi:


En fait dis-toi qu'avec PostCSS tu peux faire tout ce que tu peux faire avec SASS, c'est juste le backend qui change. Typiquement tu peux go la même syntaxe que SASS en installant les plugins adéquats (sachant que par défaut postcss ne fait strictement rien, c'est à toi de faire tes choix de plugins).
:illya_happy:


Mais encore une fois, y a pas de pb avec le fait d'utiliser SASS, c'est un très bon outil.
:illya_happy:
il y a 6 ans
L'odeur des devs front
:malade:
il y a 6 ans
J'ai fais une maquette à la va vite de l'index du site, la voici : image.noelshack.com https://image.noelshack.com[...]609955653-umphistoire.png

J'ai pas eu trop d'idée alors j'ai d'abord commencé par ça en attendant qu'elles arrivent au fur et à mesure, la police d'écriture n'est pas fixé, elle va changer par la suite

J'ai ajouté des ombres mais elles sont peu visible sur le screen, en espérant qu'avec le temps ça soit plus joli
:EtchebestSourire:
il y a 6 ans
Hé voilà !

umphistoire.000webhostapp.com https://umphistoire.000webhostapp.com

L'index du site a été fait, une page « home » aussi. Elle permettra d'afficher toutes les histoires du site quand elles seront écrites

Une version responsive a été ajouté au site pour les fans de téléphone

Les « 404 » ont une redirection vers l'accueil du site

Le code et le design n'est pas top top je l'avoue, j'ai fais au plus vite pour réaliser une maquette, si vous avez des avis ou conseils pour que la lisibilité et par la même occasion le design je suis preneur

Merci de m'avoir lu
:EtchebestSourire:
il y a 6 ans
Je vais aller me faire à manger, bonne appétit les clés et à tout de suite
:pyjama:
il y a 6 ans
C'est parfait le rendu est comme je le voulais, tout beau tout propre et bien centré que ce soit horizontalement ou verticalement : image.noelshack.com https://image.noelshack.com[...]6-img-20210106-212428.png

Je vais écrire petit à petit le début d'une histoire quand j'ai le temps et l'envie et je chercherai comment mettre en œuvre tout ça au niveau de la page « home »
:twistski:


Je compte déjà ajouter le header qui comportera juste le nom du site puis le footer, pour la suite ce sera un peu plus compliqué comme les idées ne sont pas réellement présente

J'ai eu l'idée d'ajouter plusieurs images et dès lors qu'on clique dessus ça nous dirige sur l'histoire en elle-même qui est en rapport avec l'image mais ça va faire pleins de petits carrés et je trouve honnêtement que ça ne va pas être génial

Après j'ai aussi eu l'idée de faire ça sous forme de slideshow avec des flèches de chaque côtés pour choisir l'histoire qu'on désire, mais c'est très très utilisé et je n'ai pas envie de le reproduire sur le site. Ce sera en dernier recours au cas où je n'ai d'idée
:twistski:


J'ai opté pour le côté sombre parce que je trouve ça nettement mieux qu'un côté clair, déjà pour les yeux et pour l'immersion

J'ai bien plus d'idées qui me viennent en tête par rapport aux histoires que pour le design, je vais devoir carburer au café pour qu'il fonctionne en supervitesse parce que sinon dans sept ans le restera sur deux pages
:twistski:


Cordialement,
Un flemmard qui n'a jamais le temps et jamais d'idée
il y a 6 ans