J'ai vite fait jeté un œil sur SASS autrefois mais je tiens trop à mon vieux CSS
Bah c’est du CSS en plus ergonomique
Et tu peux utiliser des variables c’est incroyablement pratique
Et tu peux utiliser des variables c’est incroyablement pratique
il y a 6 ans
Sponsorisé
Connectez-vous pour masquer les pubsBah c’est du CSS en plus ergonomique
Et tu peux utiliser des variables c’est incroyablement pratique
Et tu peux utiliser des variables c’est incroyablement pratique
Y a des variables en CSS aussi
Bon, je l'accorde c'est pas exactement le même genre de variables
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
Si oui, tu peux écrire avec tu ou avec vous
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
Bah c’est du CSS en plus ergonomique
Et tu peux utiliser des variables c’est incroyablement pratique
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
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
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
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.
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.
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
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
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
il y a 6 ans
Y a des variables en CSS aussi
Bon, je l'accorde c'est pas exactement le même genre de variables
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
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.
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
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
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
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
• Prénom va dans le centre commercial
• Je vais dans le centre commercial
Je préfère la première personne
il y a 6 ans
Sponsorisé
Connectez-vous pour masquer les pubsAh 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
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
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
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).
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).
Mais encore une fois, y a pas de pb avec le fait d'utiliser SASS, c'est un très bon outil.
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).
Mais encore une fois, y a pas de pb avec le fait d'utiliser SASS, c'est un très bon outil.
il y a 6 ans
J'ai fais une maquette à la va vite de l'index du site, la voici :
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
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
il y a 6 ans
Hé voilà !
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
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
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 :
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 »
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
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
Cordialement,
Un flemmard qui n'a jamais le temps et jamais d'idée
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 »
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
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
Cordialement,
Un flemmard qui n'a jamais le temps et jamais d'idée
il y a 6 ans


















