5 extraits CSS que tout développeur front-end devrait connaître en 2024

Il y a de ces trucs en CSS quand même...

Quelques notes perso ici...

:has()

styler le parent en fonction du nombre d'enfants

Pour modifier une grid par exemple...

main:has(> :nth-child(5)) {…}

styler un élément selon l'état d'une checkbox

Pour appliquer un darkmode

html:has(#dark-mode:checked) {…}

styler un form dont au moins un des items est invalide

form:has(:user-invalid) .error {
  display: block;
}

L'imbrication CSS

Et moi qui pensais que ce n'était réservé qu'à des sass & consorts !

Voilà qui permettra de mieux organiser le code et le rendre plus lisible...

/*AVANT*/
.nesting {
  color: hotpink;
}
.nesting > .is {
  color: rebeccapurple;
}
.nesting > .is > .awesome {
  color: deeppink;
}
/* MAINTENANT*/
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

[EDIT] Par contre, ce n'est pas forcément supporté par les navigateurs pas à jour... https://caniuse.com/css-nesting

text-wrap:balance

en gros, pour rendre plus homogène un texte sur plusieurs lignes... Attention, pas pour un texte de plus de 10 lignes apparemment.

via https://bookmarks.ecyseo.net/?DunHiA

Astuces & liens pour HTML, JS et toussa

Petite liste tirée des RSS que je suis en ce moment.

Réflexions sur l'Abaya : Un point de vue d'un Tunisien : r/france

J'ai retrouvé le post Reddit d'origine de ce texte copié collé sur la river et que l'on peut rapprocher de la vidéo de Kahina Balhoul (femme Imam) , trouvée sur masto (https://piaille.fr/@petaramesh/111000388869533671 ) https://www.youtube.com/watch?v=aBZpiAyifr0

Les deux opinions me paraissent intéressantes car proposées par des gens concernés et légitimes: ils savent de quoi ils parlent et ne peuvent être soupçonnés d'être antimusulman...

En effet, j'ai souvent l'impression qu'on est arrivé à une telle radicalisation des positions à ce sujet qu'il ne peut plus y avoir de réflexion un peu objective sans qu'on soit immédiatement noyé dans un brouhaha d'accusations... Pourtant, le sujet n'est pas simple à trancher ou à résoudre...

En tant que Tunisien, je tiens à souligner que le mot "Abaya" est totalement étranger à notre culture en Tunisie (et au Maghreb tout entier à ce que je sache). Ce vêtement, l'abaya, est spécifique à l'Arabie Saoudite et au pays du Golf et reflète l'influence du wahhabisme et de l'islamisme radical en France. En tant que Tunisien, j'ai une compréhension approfondie des aspects religieux et historiques de l'islam, et je peux affirmer avec certitude que nos ancêtres n'ont jamais porté ce type de vêtement, et encore moins le voile.

Le port du voile est devenu une question politique, notamment grâce aux Frères musulmans, qui ont promu cette pratique. Il est intéressant de noter que même à Al-Azhar en Égypte, une institution enseignant la théologie musulmane, les étudiantes ne portaient pas de voile dans les années 60 et avant. Le voile est donc une tendance relativement récente, propagée à travers les médias depuis la défaite de 1967 et l'essor de l'islamisme, consécutif au déclin du nationalisme arabe laïque et l'enrichissement des pays du Golf.

Il est important de noter que le Maghreb n'avait aucune tradition de voile ou d'abaya avant ces événements. Il est donc regrettable de voir que certains Maghrébins islamistes (y en a aucune doute pour moi) utilisent ces vêtements saoudiens, qui n'ont aucun lien avec notre culture, pour exprimer leurs opinions politiques en France. Cette stratégie est superficielle et déplorable, car elle utilise les enfants comme instruments politiques.

En ce qui concerne la France, il est évident que les gouvernements incompétents, comme beaucoup de l'élite politique mondiale aujourd'hui, tentent de diviser pour mieux régner. Ces questions détournent l'attention des problèmes réels en France. Nous avons des liens historiques étroits avec la France et nous savons qu'elle fait face à de véritables défis (comme les coups d'État en Afrique, qui sont un symptôme réel, la réforme des retraites on n'en parle plus..je veux pas parler d'autres points la pour ne pas m'accuser de se mêler de la politique interne de la France même si j'y réside mais bon..je veux que l'idée soit claire).

Il est triste de constater que la plupart des gens tombent facilement dans ce piège, ce qui pourrait conduire à des divisions internes et à des conflits. Malheureusement, comprendre ces problèmes nécessite un effort d'étude de l'histoire et des enjeux complexes. La montée de l'islamisme est liée au pétrole du Golfe, et il est important de rappeler que l'islam est une religion vieille de 1500 ans, la tendance habit islamique ça date de 1967..La révolution islamique en Iran à rendu les choses encore pire. Le judaïsme et le christianisme ont évolué au fil du temps pour s'adapter à la laïcité, et c'est le résultat d'années de luttes acharnées en France contre le clergé pour séparer l'église de l'état et garantir la liberté de conscience, et ceci est en rapport étroit avec la devise nationale liberté égalité fraternité. C'est un pilier de la république. Malheureusement la plupart des immigrés ne connaissaient pas l'histoire de ce pays, je connais même des français qui ne connaissent pas cette Histoire. La laïcité en France c'est le fruit de luttes historiques. Quant à l'islam, il n'a pas encore connu cette transformation, en grande partie en raison de la légitimité que certains dirigeants moyenâgeux tirent de la religion pour maintenir leur pouvoir (Iran, Arabie Saoudite...).

Ces dirigeants financent des mouvements radicaux et des mosquées en France pour propager une vision extrémiste de l'islam. De plus, certaines puissances mondiales continuent de soutenir ces régimes moyenâgeux en raison de leurs intérêts pétroliers. Tant que la situation au Moyen-Orient ne changera pas, les tensions en France risquent de perdurer, et les gouvernements incompétents en tiront toujours profite.

https://www.reddit.com/r/france/comments/16cujs0/r%C3%A9flexions_sur_labaya_un_point_de_vue_dun_tunisien/

GitHub - system-fonts/modern-font-stacks: System font stack CSS organized by typeface classification for every modern operating system

Il y a quelques années (2013 ) j'avais vu passer des font stacks que j'avais mises de côté dans SnippetVamp ( http://snippetvamp.warriordudimanche.net/index.php?snippet=3A34B87D-684C-49B0-B2B8-39750029AED7 )


font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;```

Un complément ?

De côté pour lecture: une appli simple Android sans Studio – Christophe Cerisara

Je me mets de côté cet article qui explique pas à pas le minimum des bases de la création d'une appli sans usine à gaz.

J'ai essayé de le lire plusieurs fois, mais faudra que j'attende d'être tout seul

What I wish I knew about React

Une lecture à faire avant de se lancer dans une formation React. ( https://www.youtube.com/watch?v=SMgQlTSoXf0&list=PLjwdMgw5TTLWom67YfZuha-1iYzIirwJR )

Quelques notes:

  • React est une bibliothèque, pas un framework.
  • React est une lib UI: elle sert à designer et rendre réactive des interfaces utilisateur. Si ce que tu veux faire ne s'affiche pas à l'écran, React s'en bat les steaks.
  • AngularJS change ta manière de coder en JS mais pas tes pratiques en HTML/CSS alors que React fait le contraire: peu de changement côté JS (hors le code spécifique de ton UI) mais modifie ta façon de créer en HTML/CSS.
  • Les composants React sont toujours des composants UI

Make Beautifully Resilient Apps With Progressive Enhancement

Notes perso de lecture rapide et en diagonale.

rien d'essentiel ne doit dépendre de javascript, en particulier les formulaires.

  • JS peut être désactivé
  • le navigateur peut être obsolète (oui, windows, c'est de toi que je parle)
  • des extensions peuvent bloquer le script
  • le client a peut être une connexion lente qui va timeout
  • le client a peut être une connexion intermittente (genre le train)
  • il peut y avoir un firewall qui bloque certaines choses.
  • etc

En gros, JS devrait être réservé à des choses qu'on ne peut pas faire autrement et/ou non essentielles.

Pour les formulaires, on peut partir d'un formulaire normal fonctionnant normalement et l'améliorer via JS: capturer l'événement onsubmit et gérer l'envoi au serveur via des promises et fetch, traiter les erreurs etc.

Si JS ne fonctionne pas, le formulaire continuera de faire son job avec le comportement par défaut de submit mais de façon moins sexy, c'est tout.

Et si les envois et retours se font en JSON et tout le merdier ?

Problème de type de retour et de format de réception

L'auteur propose d'utiliser le header côté serveur pour identifier qui de JS ou de HTML est à l'origine de la requête (avec Sec-Fetch-Mode par exemple ) et ainsi adapter le comportement du serveur (traitement des données et composition de la réponse)

En gros:

  • si ça vient de JS ➜ gère le JSON et renvoie du JSON pour que JS gère la réponse
  • si ça vient de HTML ➜ gère le formulaire normalement et renvoie une nouvelle page HTML composée côté serveur.

Cory Doctorow : On ne peut pas prédire l’avenir, mais on peut l’influencer...

J'ai VRAIMENT TRES envie de lire Walk away...

un roman de science-fiction encore méconnu en France et même non-traduit, mais qui parvient à redonner espoir dans l’avenir et imaginer une sortie par le haut de toutes ces crises qui nous menacent. Cette fleur dans le désert post-apocalyptique se nomme “Walk Away” et on doit ce roman paru en 2017 à Cory Doctorow, journaliste et blogueur canadien connu pour son activisme en faveur des licences Creative Commons. Inspirés par celles-ci, et leurs valeurs de gratuité et de don, ses héros choisissent de faire sécession de la société “par défaut” et de construire la leur. Chez les Walk Aways tout est offert car imprimé en 3D à partir de déchets recyclés, quitte à pirater quelques brevets ou formules pharmaceutiques au passage. La vie dans le désert en devient une fête digne du Burning Man, où le potentiel de chacun peut s’exprimer, au point qu’il est possible de rénover des Zeppelins avec ses amis pour parcourir le ciel, en bricolant avec les restes abandonnés de la start-up nation.

"La science-fiction est une littérature du présent, pas de l’avenir."



Fil RSS des articles