Des labels flottants en CSS pur #CodingPartyAtHome 💕🤣🤜🤛😎

Depuis que mon grand est en fac d'info, on a un nouveau sujet de conversation et j'ai ENFIN un interlocuteur dans le domaine à la maison !

Du coup, il arrive le weekend avec les TP qu'il a eus pendant la semaine et me pose des questions sur les difficultés qu'il a.

En ce moment, il commence PHP et CSS/HTML...

On me   nomme ?

Du coup, aujourd'hui, il travaillait sur la page de login pour le projet final, une todolist en PHP+HTML+CSS sans JS.

Il voulait faire des labels flottants parce qu'il avait vu que c'était joli... Comme il découvre le monde merveilleux du frontend, on s'y est mis à deux et on a improvisé un petit cours.

Il a appris les subtilités du ciblage, les pseudo éléments, l'usage de :not() et :has()...

Car OUI  on a réussi des labels flottants en pur CSS.png

TLDR;

Pour la page de démo: c'est par là.

Pour le code : c'est sur snippetvamp.

Petit résumé du problème

En gros, on veut que le label soit dans l'input, comme un placeholder, lorsque il est vide mais que le label reprenne une place normale lorsque l'utilisateur clique dans l'input pour le remplir.

Capture du 2024-03-17 15-15-33.png Capture du 2024-03-17 15-15-57.png
Pour ça, j'ai créé un label contenant un span avec le texte et l'input correspondant:
<label><span>Username</span>
    <input type="text" name="login" value="" placeholder=" " >
</label>

Ensuite, je déplace le span vers l'intérieur de l'input:

label span{
    position: relative;
    top:2em;
    left:24px;
    transition:all 500ms;/* et on fait une transition douce, merci*/
}

Puis on utilise :has() pour cibler le span du label contenant un input ayant le focus.

label:has(input:focus) span
{
    color:grey;
    top:0;
    left:0;
    transition:all 500ms;
}

À ce stade, quand l'utilisateur clique dans l'input, le label glisse vers le haut pour sortir de l'input.

Toutefois, le problème c'est que lorsque l'input perd le focus, le label revient à l'intérieur même si l'input a été complété... et les deux textes se chevauchent hideusement...

Et la,   c'est le drame

La logique voudrait qu'on cible alors le span du label contenant un input vide, genre avec input[value=""] ... sauf que ça ne marche pas car le fait de remplir un input ne modifie pas l'attribut value de la balise input...

Zut flute et   cacaboudin

Heureusement, on peut gruger...

Puisqu'on ne peut pas cibler un changement de l'attribut value, on peut cibler... le placeholder ! Enfin... styler en fonction de la visibilité du placeholder...

Ainsi, en utilisant :placeholder-shown, on peut ajouter une règle de ciblage au CSS précédent:

label:has(input:focus) span,
label:has(input:not(:placeholder-shown)) span
{
    color:grey;
    top:0;
    left:0;
    transition:all 500ms;
}

Et là, les plus observateurs d'entre-vous - qui se demandaient avec une angoisse et un mépris non dissimulés pourquoi j'avais collé un placeholder=" " dans mon HTML - comprennent l'astuce: si le placeholder est visible, c'est que l'input est vide...

Et ça marche, tout est supporté dans la plupart des navigateurs. En plus, c'est léger, ne demande pas une structure HTML alambiquée ou des règles CSS à la mords-moi le zboub...

Si ça peut servir, c'est cadeau

Planet Crafter [early access] : pourquoi c'est bien

J'ai pris du temps pour jouer un peu à planet crafter et je dois avouer que passé la première impression de béta version mal finie - essentiellement à cause de quelques bugs de collision (non bloquants) et d'un aspect graphique un peu daté et peu élaboré de prime abord - j'ai vraiment apprécié d'y jouer...

Et c'était pas gagné parce que  en dehors des Elder Scrolls,   les jeux vidéos m'ennuient  de plus en plus...

Du coup, pourquoi ?

1. c'est un monde ouvert à la première personne

Il y a un côté immersif indéniable... on se promène dans les limites de sa réserve d'O2, on découvre de nouveaux biomes dont la plupart ne sont pas bloqués. Certaines zones sont inaccessibles à cause de la glace qui doit fondre, mais globalement, pas de blocages artificiels des zones... Si tu te casses en mode full bûchette pour l'O2, tu peux aller loin assez vite.

J'ai trouvé certaines idées plutôt bonnes, comme le fait de n'obtenir une carte que lorsque tu es en mesure d'expédier des satellites GPS en orbite. Bonne trouvaille !

2. la difficulté est bien dosée

Contrairement à Breathedge où l'on stresse beaucoup et où le level design te pousse à retourner à un point d'o2 à la dernière seconde, on ne stresse pas vraiment dans Planet Crafter: pas d'urgences, pas de moments où on doit se mettre vraiment en danger pour obtenir une ressource... si on meurt, c'est vraiment qu'on a mal dosé... C'est un jeu qui détend vraiment.

3. c'est non violent

comme subnautica, pas de tchac tchac poum poum au menu... Normal puisque le but est de terraformer la planète, donc, niveau monstres à buter, c'est plutôt calme, faut reconnaître.

Donc, on fait son petit bonhomme de chemin avec un arbre technologique simple mais satisfaisant.

4. c'est écolo

Là où satisfactory te conduit à pourrir la planète à tour de bras et te récompense pour ça, Planet crafter se place résolument aux antipodes... Tu pars d'un monde hostile à la vie et tu dois y augmenter la température et la pression progressivement, créer une atmosphère, parvenir à y développer des formes de vie simple, puis de la végétation, des insectes et enfin des poissons et batraciens.

Au lieu de devenir de plus en plus laid à force d'industrialisation outrancière, grâce à toi, un monde de roche inerte prend peu à peu vie et s'embellit progressivement.

5. Ce n'est pas compliqué (ni même complexe)

La courbe d'apprentissage du jeu est très douce: l'interface est simple, les outils sont faciles à comprendre et même l'arbre technologique est linéaire... pas de prise de tête à mettre en place une stratégie de développement vu que les items se débloquent tout seuls à certains paliers de terraformation. Pour un gars sommaire et lent à piger comme moi, c'est le top... Par contre, si tu aimes le challenge et l'organisation dantesque à la rimworld...

Peu de surprises dans ce jeu: on retrouve les choses qu'on aime et on attend avec impatience de les obtenir (coucou le jet pack )

Le plaisir immédiat y gagne ce que l'originalité y perd. On s'amuse très vite.

6. on peut automatiser

À partir d'un certain niveau de développement, on obtient des outils d'automatisation: un autocrafter et des drones... Et ça donne un nouveau souffle au jeu en ajoutant une petite dimension satisfactory pile au moment où on commençait à en avoir marre du combo répétitif farm de ressources/craft... ça relance vraiment l'intérêt sans compliquer le jeu... et de façon assez naturelle...

Conclusion

Je suis parvenu à l'étape où l'on attend l'apparition des mammifères et on voit clairement qu'ils ne sont pas implémentés car la progression est devenue très très lente... C'est donc à regrets que je quitte un monde dans lequel je n'ai plus grand chose d'autre à faire que de planter des arbres...

Si tu veux un jeu calme pour te détendre et débrancher ton esprit des emmerdes quotidiennes sans t'ajouter de la charge mentale inutile, si tu as aimé subnautica et satisfactory, si tu as peu de temps devant toi pour tes sessions de jeu... alors, planet crafter est pour toi...

MAJ : Liste de liens de téléchargement [Mars 2024]

Certaines adresses peuvent être bloquées par les DNS, deux solutions simples s'offrent à vous: changer les DNS ou alors installer opera et utilser le VPN intégré.

🤩 Méthodes alternatives

Merci à :

aqua pour sa vigilance et ses ajouts !

Ouahouah et à sa liste perso : https://www.ouahouah.eu/links/shaare/1JdD5Q

Liste non exhaustive: N'hésitez pas à poster des alternatives (réelles) dans les commentaires.

Via https://fulldeals.fr/tirexo-quelle-adresse-officielle-site-streaming-gratuit/


Peugeot 1007 et portes sésame qui refusent de se fermer...

Il y a deux ans on avait acheté une petite Peugeot 1007 comme première voiture pour mes enfants qui passaient le permis... Une petite citadine facile à garer et à conduire.

Ces voitures ont des portières sésame : elles s'ouvrent latéralement en glissant sur le côté du véhicule...

Hier soir, appel paniqué de mes gamins parce que la portière passager refusait de se fermer: elle arrivait en bout de course de fermeture puis repartait dans l'autre sens directement. Même la fermeture à la main, en forçant comme un babouin, ne fonctionnait pas car la portière refusait de se verrouiller. Ils rentrent donc en tenant la portière et accompagné par le bip persistant d'une voiture scandalisée par le fait qu'ils roulaient la portière ouverte.

Après une recherche sur le net, j'ai pu constater que c'est un problème assez répandu sur ces voitures et qu'il y a plusieurs origines possibles au souci, à commencer par une baisse de tension de la batterie qui entraîne un genre de bug: il faut alors réinitialiser le système en débranchant la batterie et en refermant la porte à la main... Donc, un bug peut t'empêcher de fermer la portière de ta bagnole. J-O-I-E

Une fois la batterie rechargée et rebranchée, le souci persiste et la portière refuse même carrément de bouger quand on appuie sur le bouton de fermeture...

Origine réelle et solution

Comme je suis du genre têtu, je passe en mode y-connaît-pa-raoul et je vérifie tout ce qui me vient à l'esprit: fusibles, propreté des glissières, machins divers qui obstrueraient le passage... Rien.

Je me rends alors compte que les poignées côté passager sont toutes molles alors que du côté conducteur - où la porte fonctionne - il y a une tension normale et ferme.

PXL 20240224 080907474.webp

Je démonte les caches de poignée des deux côtés en faisant levier avec un tournevis et je découvre que d'un côté il y a une sorte de piston qui est resté enfoncé vers l'arrière. Je prends une pince, je le débloque et il reprend tout seul sa position normale qui est celle-ci ⬇

PXL 20240224 080730785.webp

La poignée est bien redevenue dure. Je referme la porte à la main et appuie d'un coup d'épaule pour la pousser contre la voiture et provoquer la fermeture... un bruit de moteur électrique verrouillant la porte me récompense immédiatement.

Quand j'appuie sur le bouton d'ouverture, la portière s'ouvre et se ferme normalement.

ConclusionS

  1. les peugeot 1007 ont des portières de merde
  2. mettre de la technologie et de l'électronique là où elle n'est pas indispensable s'avère contre-productif et fragile
  3. si vous avez le problème, vérifiez la dureté des poignées avant d'aller plus loin, vous gagnerez du temps
  4. utilisez les boutons et pas les poignées pour ouvrir et fermer les portières
  5. essayez de ne pas vous retrouver enfermé dedans avec les portières qui merdent.

Traduttore, traditore... il pousse le concept un petit peu loin.

Des fans de SF dans le coin ? Et de HardSF ? Ahhh, alors y en a-t-il dans le lot qui ont eu affaire à «la mission Encelade» de Brandon Q. Morris ? ou du moins à sa traduction ?!

Vous vous en souviendriez, il me semble.

Je n'ai jamais vu une aussi piètre traduction... C'est bien simple, on croirait que l'éditeur a jugé bon de confier le travail de traduction au stagiaire de troisième...

Dès les premières confusions entre l'infinitif et le participe passé, un doute s'est installé: toutefois, vaillant et blindé par des années d'enseignement, j'ai pris le parti de continuer ma lecture malgré cette faute agaçante mais de plus en plus répandue y compris dans la presse...

Mais là, le traducteur se balance de la langue au point que c'en devient du trapèze volant !

Outre les accords et le participe passé, la personne a également une vision toute personnelle de la correspondance des temps faisant se côtoyer le présent/passé composé et l'imparfait/passé simple quand elle n'invente tout simplement pas des conjugaisons qu'on trouverait plutôt dans une rédaction de collégien accro au portable ( il n'est pas rare de trouver un «se plaigna» .)

Mais la torture à laquelle se livre le coupable ne s'arrête pas là:

  • le style est pathétique et sans talent usant et abusant en particulier de répétitions du plus mauvais effet et pourtant facilement évitables :      «Jiaying avait positionner le dossier de sa chaise vers l'avant avant de s'asseoir» ➜ Jiaying avait positionné le dossier de sa chaise vers la proue avant de s'asseoir.
  • certaines fautes révèlent une méconnaissance grave de la valeur des mots et de la syntaxe (en mode si-ça-se-prononce-pareil-c'est-le-même-mot si cher à nos collégiens) :

    «trente minutes s'étaient écoulaient...»

  • une incapacité à trouver la traduction adéquate. Quand on traduit un texte, il faut trouver l'image dans la langue cible qui se rapprochera le plus de celle d'origine avec la priorité suivante : même sens contextuel > même structure de phrase > même champ lexical (si possible) ... ben ce traducteur-là s'en fout visiblement:
    • «une patate de canapé» pour «potato couch» n'aura de sens que si vous parlez anglais... «une vraie larve» aurait sans doute été plus judicieux par exemple, voire «une vraie larve de canapé» si on souhaitait conserver l'image...
    • «On va pour Encelade» pour «we're going for...» Dans le contexte, c'est plutôt le sens d'aller chercher qui aurait dû être retenu car à ce moment, il y a une tension pour savoir si la mission doit être abandonnée ou pas.
    • une méconnaissance grave du français lui-même, et c'est là que j'ai décidé d'abandonner la lecture: un «Mais nous y allons comme même ?» digne du forum jeuxvideos.com qui m'a littéralement fait manquer un battement de coeur.
  • Quand j'en parlais autour de moi, on m'a dit que c'était peut-être une traduction automatique... Je ne crois pas car ce ne sont pas des fautes du type de celles commises par google traduction et jamais une IA de traduction ne produirait un texte aussi médiocre: les IA d'aujourd'hui sont plutôt bonnes dans ce type de travail...

    Mode vieux con ON

    Plus ça va et moins j'en veux à nos collégiens (ou aux gens en général) pour leur orthographe parce que je me suis rendu compte de la relation pernicieuse que les français entretiennent avec elle et à quel point on a tendance à invalider le fond à cause de la forme.

    MAIS

    là il ne s'agit pas d'un quidam lambda mais d'un professionnel - ou de quelqu'un qui passera comme tel - et dont la langue et l'orthographe ont une fonction «modélisante» pour les lecteurs. Combien de fautes vont-elles être entérinées à cause de cet individu ?

    C'est un peu comme les jeunes collègues que je vois arriver depuis quelques années et qui font des fautes dans toutes leurs phrases... pas des fautes sur ces mots dont on ne sait jamais s'il faut deux N ou un seul mais bien des fautes qui témoignent de la même méconnaissance de la langue. On doit corriger tous les bulletins d'une de mes collègues de maths, prof principale de la classe, à chaque conseil de classe... Ils sont plusieurs dans ce cas... Et ils écrivent tous les jours au tableau des traces écrites que les élèves doivent recopier scrupuleusement...

    Et vous voulez savoir le pire ? Quand on fait la remarque à la collègue, elle se marre avec un «ben moi chus nulle en orthographe, haha...»

    Dramatique...

    Je vous laisse, je vais virer ce roman de ma liseuse...

    J’y ai joué en 2023... - Chez Sammy

    Atta atta... tu as TERMINÉ Planet crafter ?! Mais mais mais... comment ?! Comment ?!

    ...

    Comment tu fais pour avoir autant de temps !!!!! parce qu'en plus tu lis ! https://www.sammyfisherjr.net/blog/spip.php?article402

    Planet crafter

    Je te rejoins sur son côté calme, peu stressant et sans l'aspect flingues et destruction... C'était une bonne découverte malgré un aspect un peu... beta version.

    Jedi Fallen order...

    ... j'ai pas accroché du tout, rebuté par les mécaniques de jeu en mode pieuvre: genre une touche pour sauter, une touche pour s'accrocher ... ça m'a agacé et au bout de cinq chutes consécutives dans le vide, j'ai désinstallé

    Skyrim

    Je me suis donc bien amusé... à modder le jeu à mort pendant une dizaine d’heures. Une fois qu’il a été parfait, je n’ai plus eu envie d’y jouer. Normal.

    Haaa tout de même,  Je ne suis pas tout  seul dans ce cas !

    Tu passes des heures à choisir, t'informer, télécharger, installer, tester des mods... puis quand tu démarres, tu passes en mode «ha oui, c'est vrai qu'il faut se taper cette mission» et tu lâches.

    Heureusement qu'il y a Starfield pour rattraper ( lol )

    Baldur's Gate 3

      Je m'attends à une   shitstorm  ...    Méritée, j'en conviens.

    Alors, Baldur's Gate est visiblement un bon jeu, mais je l'ai désinstallé direct. Trop narratif et JE PEUX PAS BLAIRER LE TOUR PAR TOUR ! C'est comme la narration à la première personne dans un roman, ça me fait sortir du jeu.

    Du coup... je suis resté hermétique... Mais c'est clairement moi le problème.

    Cyberpunk 2077 & DLC

    Là, par contre, ça a été dur de terminer et de décrocher, j'en conviens. C'est un genre de fusion entre GTA et Fallout/Skyrim. Les MAJ ont apporté de bonnes améliorations. Je l'ai refait plusieurs fois... En plus, il reste beau et plutôt fluide même sur ma machine.

    Conclusion

    J'aimerais bien jouer avec toi copain !

    Fil RSS des articles