Comprendre le virtualDom en en créant un de toutes pièces ? ça a l'air intéressant...

Les slashpages sont les pages normalisées qu'on trouve sur les blogs... /about, /contact etc.

J'en connaissais quelques unes mais y'en a plein !

Bon, l'avantage de la video, c'est que je peux l'écouter en faisant la cuisine... ou le ménage... ou les courses... et merde.

• ☑ https://grafikart.fr/tutoriels/securite-injections-sql-59
  • pour aller plus loin : requêtes préparées
• ☑ https://grafikart.fr/tutoriels/hashing-security-2212
  • à noter : password_hash / password_verify
• ☑ https://grafikart.fr/tutoriels/secure-donnee-site-web-2209
• ☑ https://grafikart.fr/formations/securite-application-web
• ☑ https://grafikart.fr/tutoriels/securite-failles-xss-60
• ☑ https://grafikart.fr/tutoriels/faille-csrf-155
  • cookies same site ➜ strict
  • token CSRF dans le formulaire
• envoi de fichiers malicieux https://www.youtube.com/watch?v=dIcPQAzF9VA
  • toujours vérifier les extensions
  • on peut mettre du php dans du png
  • modifier le .htaccess pour empêcher l'exécution de php dans le dossier d'upload

<FilesMatch "\.php *$">
     Order allow,deny
    Deny from all
</FilesMatch>

(...)

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

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

• un tuto pour apprendre à manipuler la webcam afin de générer une carte de noel. ➜ https://12daysofweb.dev/2021/capturing-user-media-streams/
• un menu drop-down accessible en CSS pur ➜: https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/
• utiliser le data-icon pour styler le list-style-image #astuce #pasCon ➜ https://moderncss.dev/totally-custom-list-styles/
• une galerie responsive avec des labels animés et des effets pour les images ➜ https://moderncss.dev/responsive-image-gallery-with-animated-captions/
• deux façons d'avoir des images responsives et full width en CSS pur ➜ https://moderncss.dev/css-only-full-width-responsive-images-2-ways/
• garder le footer en pied de page: flexbox vs grid ➜ https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/
• avoir des éléments de hauteur égale: flexbox vs grid ➜ https://moderncss.dev/equal-height-elements-flexbox-vs-grid/
• faire défiler la fenêtre jusqu'à un élément scrollIntoView() ➜ https://www.alsacreations.com/astuce/lire/1883-Le-scroll-maitrise-avec-scrollIntoView.html

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.

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 ?

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

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

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.

Bon, fô qu'jeul lis... un jour

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."

Riditleteur

"Quiconque a déjà travaillé dans une grande entreprise (ou, plus simplement, prêté attention à l’administration publique) sait à quel point c’est une vaste blague." Mouarf !

Bon, je lis ça ce soir...

Peut-être.