Patterns for Practical CSS Custom Properties Use | CSS-Tricks

Un article très intéressant sur l'utilisation des variables en css. Je note ici quelques aspects qui ont attiré mon attention.

Définir des valeurs par défaut

var() permet de spécifier des valeurs si la variable css n'en a pas, par exemple:


.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

Ainsi, on peut adapter finement le contenu des variables en fonction de sélecteurs un peu custom tout en gardant un aspect par défaut:


[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

Ce qui permet par exemple d'avoir un style à fort contraste pour un profil particulier sans redéfinir toutes les balises, simplement en affectant de nouvelles valeurs aux variables.

Définir des valeurs spécifiques à une classe

On peut également, dans le même esprit, définir les valeurs au sein d'une classe toujours dans l'idée d'éviter une réécriture et de rendre la feuille de style plus lisible et claire.

les variables inline

Un autre truc auquel je n'aurais pas pensé, c'est de redéfinir les variables css inline ! (attention, idée de génie, je trouve):

1- on définit la classe grid avec une variable par défaut.


.grid {
  --columns: auto-fit;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
  1. on change la valeur de cette variable de façon ponctuelle et contextuelle via l'attribut style de la balise:

<div class="grid" style="--columns: 3;">
  ...
</div>

c'est juste beau

Burning Out and Finding Stability - Destroy Today - HowTommy | Liens et actu en vrac

«Un taf, qu'il soit une passion ou non, doit rester limité dans le temps. Si vous dépassez les 40h par semaine de dev, vous vous ferez juste du mal.»

«N'oubliez jamais une chose : si vous décédez du jour au lendemain, votre patron vous remplacera juste.»

Pas mieux... Le travail n'EST PAS la vie...

Merci pour ce post ;-)

How to Create a Simple PHP Templating Function - Daggerhart

Mouais... le templating, au départ, c'est plutôt pour séparer le code PHP du HTML (l'objectif étant de permettre de bosser à plusieurs avec chacun sa spécialité sans se parasiter, déjà)

Du coup, je vois pas trop en quoi c'est du templating: ce sont des fichiers php avec des bouts de php dedans.

Pour y avoir réfléchi pas mal afin d'améliorer mon code, notamment dans mon «framework» perso, l'idée du templating est d'avoir des fichiers HTML que le PHP vient compléter selon une certaine logique, qui varie en fonction des frameworks.

Pour ma part, j'ai opté pour des fichiers HTML contenant des «balises» entre double accolades dont le contenu sera interprété selon certaines règles par la classe template:

  • {{$variable}} ou {{CONSTANTE}} : affiche le contenu de la variable ou de la constante
  • {{"texte"}} : affiche le texte si possible traduit (en fonction de la configuration de langue d'une autre classe si elle existe dans le projet)
  • {{objet->methode(parametres)}} : fait appel à la méthode en question si celle-ci est publique et que l'objet fait partie des dépendances injectées via une variable de contexte.

On peut également transmettre des données ponctuelles servant à «remplir» le template via un array passé en paramètre selon le principe "string_à_remplacer"=>"valeur".

... et c'est tout.

ça donne des fichiers tpl du genre:



header.html


<!DOCTYPE html>
<html>
<head>
<title>{{APP_NAME}} - {{CURRENT_PAGE}}</title>
<link rel="stylesheet" type="text/css"       href="http://warriordudimanche.net/{{APP_CSS}}style.css">
<link rel="icon" type="image/svg"            href="http://warriordudimanche.net/{{APP_IMG}}favicon.svg">
<link rel="favicon" type="image/svg"         href="http://warriordudimanche.net/{{APP_IMG}}favicon.svg">


</head>


<body class="{{CURRENT_PAGE}} {{app->isMultiple()}}" id="top">
{{this->render('menu')}}
<main>


menu.html


<nav class="classe{{CURRENT_PAGE}}">
<li><a href="http://warriordudimanche.net/?p=home">{{"Accueil"}}</a></li>
<li><a href="http://warriordudimanche.net/?p=5eme">5eme</a></li>
<li><a href="http://warriordudimanche.net/?p=4eme">4eme</a></li>
<li><a href="http://warriordudimanche.net/?p=3eme">3eme</a></li> 
<li><a href="http://warriordudimanche.net/?p=fiches">{{"Fiches"}}</a></li>

<li><a href="#" id="fullscreen" >Plein écran</a></li>

</nav>

on voit que le template header.html appelle à son tour le template menu, ce qui permet d'avoir des templates imbriqués et donc une grande «réusabilité» de chaque élément.

Le templating permet également d'éviter la dispersion du code PHP: quand on place des bouts de trucs et de machins partout ça devient vite illisible (et j'en sais quelque-chose). Le templating te force à organiser l'ensemble selon une logique qui te permet de t'y retrouver (et de retrouver où ça couille quand ça couille) (et ça couille toujours) (en fait, ça couille de source)( gag)

Souvent mon code est devenu tellement illisible à force de patcher à la scie sauteuse entre deux portes que je préfère tout reprendre du début .jpg

Répéter couille plusieurs fois d affilée gratuitement check .jpg

Je ne m'étends pas davantage dessus vu qu'on peut trouver plein de ressources sur le templating en PHP et que pour en dire plus, il faudrait que je m'étende davantage sur mon «framework»

Via https://nicolas-delsaux.hd.free.fr/Shaarli/?_D5cZQ

Impression3D: outil centreur

Un petit outil de mon cru qui combine un trusquin simpliste et un «centreur» dont j'ai vu des exemples sur pinterest: Il permet de tracer un trait pile au centre d'un chevron par exemple sans faire de mesure; on coince la pièce entre les roulements et on déplace le bouzin tout le long du chevron: le crayon reste bien centré au milieu.

Pour tracer des traits à 5,10,15 ou 20mm du bord, il suffit de placer la pointe du crayon dans l'encoche correspondante et de glisser le long du bord.

Capture du 2019-10-08 14-51-37.png

IMG 20191008 144749.jpg

IMG 20191008 144756.jpg

IMG 20191008 144855.jpg

IMG 20191008 145012.jpg

Je fais pas plus long vu que je fais faire la lecture à mon gamin en même temps et que j'ai du mal à me concentrer.

𝙰𝚜𝚖𝚘𝚍𝚎𝚎 sur Twitter : "En français il y a quelqu’un qui a demandé à la prof pourquoi on ne peut plus dire "mademoiselle" et elle a répondu quelque chose de tellement beau "Car une fille n’a pas besoin d’être mariée pour être une femme." Cette prof est géniale moi j’vous le dis"

Superbe, court, concis, imparable.

bookmarklets

J'ai fait une petite page rapide pour regrouper des bookmarklets que j'utilise régulièrement. Par exemple, je dois acheter un nouveau matériel (tel/ordi etc...) et je me balade sur un site marchand: je sélectionne la référence du matos, je clique sur mon bookmarklet «rechercher sur les numériques.com» et hop, j'ai le test qui correspond.

Je mettrai à jour au cas où...



Source image

Blasphemy Day -

Blasphemy Day, also known as International Blasphemy Day or International Blasphemy Rights Day, educates individuals and groups about blasphemy laws and defends freedom of expression, especially the open criticism of religion which is criminalized in many countries.

Un petit Rowan Atkinson ?

Ds-b96sXQAAqMJz.jpg

Des croyants qui s engueulent pour leur religion c est un peu comme des gamins qui se disputeraient pour savoir qui a le meilleur ami imaginaire .jpg

bible-warning-fr.png

blasphemy_thumb[1].jpg

cafards.jpg

croyant-blesse.jpg

dieu-psy.jpg

et-dieu-crea-l-araignee.jpg

god-impotent-evil-imaginary.jpg

guerres-de-religion.jpg

homosexualite-contre-nature.jpg

religions-partiarcat.jpg

via SebSauvage (Merci pour cette découverte （ ^^）o自自o（^^ ） )

Fil RSS des articles de cette catégorie