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

Notes rapides sur la balise <dialog> et le JS .showModal(), .close()

On crée la boîte de dialogue en HTML/CSS

<dialog id="modal-dialog">
  <div class="dialog-content">
    <h3>Title</h3>
    <p>Question ?</p>
    <ul class="dialog-actions">
      <li><button type="button" data-action="confirm">Yes</button></li>
      <li><button type="button" data-action="cancel">Cancel</button></li>
    </ul>
  </div>
</dialog>

On crée le JS adapté

En gros on récupère le click sur l'objet document et on le traite en fonction de l'action prévue dans l'attribut data-action

const dialog = document.getElementById("modal-dialog"");    

document.addEventListener("click", ({ target }) => {
  // ... show logic
  // ... close logic

  if (target.matches('[data-action="confirm"]')) {
       // action si confirm
  }

  if (target.matches('[data-action="cancel"]')) {
       // action si cancel
      dialog.close();
  }

});

Je passe sur les circonstances qui m'amènent à changer mon lit pour passer à ce qui m'intéresse: faire un lit façon chalet...

Certains trouveront ça moche ou ouiche...

J'ai fait une structure toute en bois avec des pieds de 40cm afin d'avoir une assise haute: 40 cm de pieds + 5 cm de sommier à lattes + environ 17cm de matelas... on est bien, là.

J'y ai ajouté une tête de lit façon bloc étagère en incorporant des prises de courant et USB: hauteur 110 cm et profondeur 22cm.

Ensuite je me suis attaqué au pied de lit: une planche de pin de 60x200 que j'ai découpé façon chalet avec volutes et petits coeurs découpés (c'est la partie plutôt ouiche pour certains...)

Arrive la partie gravure

L'envie d'ajouter des motifs gravés au laser sur le pied de lit s'est imposée à moi.

J'ai opté pour des edelweiss sur les arrondis et une scène de ski que j'avais déjà utilisée sur un plateau entièrement fait à partir de chutes de bois (mais c'est une autre histoire)

Astuce #1

J'ai étrenné une astuce qui a vraiment bien fonctionné: afin d'éviter la brûlure des bords du motif gravé, qui offre un dégradé allant du marron au jaunâtre fumé du plus mauvais effet, j'ai recouvert la zone à graver de ruban à masquer.

Une fois la gravure terminée, on retire le ruban à masquer et le bois est bien préservé dessous.

Astuce #2

Le plus risqué est toujours de centrer correctement le motif sur le support. Mon truc, c'est d'arrêter de vouloir trouver le bon réglage des marges sur le logiciel de gravure et d'utiliser l'option «centrer le laser»

1. je marque le centre de la zone à graver au crayon,
2. je place la graveuse au doigt mouillé pour qu'elle soit alignée correctement horizontalement,
3. je clique sur «centrer le laser», je déplace la tête du laser à la main pour faire correspondre le spot avec le centre marqué au crayon,
4. je clique sur «corner» qui replace le laser au coin bas gauche du motif,
5. c'est parti...

ça marche à tous les coups.

Conclusion

Je vais pas vous péter le joufflu plus longtemps avec les détails, vous regarderez les photos . J'ai tout gravé dehors, sur la terrasse, avec des rallonges USB pour rester le cul bien au chaud derrière la baie vitrée...

Petit aparté...

Par contre, quand vous gravez, restez pas loin parce que des fois, ça prend feu...

Exemple, en passant devant pour la dixième fois, j'ai trouvé que ça fumait encore plus que d'habitude... normal vu que le cache avait choisi de se foutre à flamber...

Le laser est sans doute passé sur une partie de bois plus tendre ou un peu gondolée vers le haut... et au bout de deux heures... poufcétou.

Un petit résumé perso de cette page sur l'objet FormData en javascript.

Créer un objet FormData à partir d'un formulaire

let form = document.querySelector('form');
let data = new FormData(form);

Parcourir l'objet FormData

C'est un itérable, donc on le parcourt avec un for et on récupère des ['clé','valeur']

for (let entry of data) {
    console.log(entry);
}

ou

for (let [key, value] of data) {
    console.log(key);
    console.log(value);
}

parcourir les clés / les valeurs

for (let key of data.keys()) {
  console.log(key);
}

Get, set, update des valeurs

GET

Récupérer une valeur (sans rire ?!)

• S'il y a un seul champ au nom de la clé: let title = data.get('title')
• S'il y en a plusieurs : let titles = data.getAll('title');

SET

Ajouter une nouvelle valeur à l'objet FormData

data.set('date', '2022-12-25');

APPEND

Ajouter une valeur supplémentaire à une entrée existante (si l'entrée n'existe pas, elle est créée)

data.append('tags', 'vacations');

Divers

Tester si un champ existe

let hasID = data.has('id');

Récupérer un tableau

• des clés : let arr = Array.from(data.keys());
• des valeurs : let arr = Array.from(data.values());

Convertir un FormData en objet clés valeurs

Si votre FormData ne contient pas plusieurs champs ayant le même nom.

let serialized = Object.fromEntries(data);

Sinon, on paufine

let obj = {};
for (let [key, value] of data) {
    if (obj[key] !== undefined) {
        if (!Array.isArray(obj[key])) {
            obj[key] = [obj[key]];
        }
        obj[key].push(value);
    } else {
        obj[key] = value;
    }
}

Une fois converti en objet, on peut le transformer en JSON

let stringified = JSON.stringify(obj);

Tiens ? Je découvre l'attribut sandbox pour les iframe. C'est pas que j'en fasse usage en général mais bon...

Pour écouter un click hors d'un élément, on utilise l'event delegation: on vérifie si la target de l'event correspond ou pas à l'objet qu'on veut.

  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};
onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

Tiens, je ne savais pas qu'addEventListener acceptait des paramètres en option, en particulier un { once : true} qui permet de n'exécuter la fonction attachée à l'évènement qu'une seule fois...

const listenOnce = (el, evt, fn) =>
  el.addEventListener(evt, fn, { once: true });

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
); // 'Hello!' will only be logged on the first click

Salut les copaines !

Mon vieux nokia 7plus tombe en morceaux: écran pété, décollé, appareil photo devenu myope, ralentissements de ouf etc...

Du coup, je réfléchis à le changer pour noël.

Et là c'est le drame

Je regarde les smartphones dispo en ce moment mais j'ai vraiment du mal à m'orienter. Du coup, je me dis que je prendrais bien quelques conseils.

Mes critères:

• 🟢 bon en photo, y compris de nuit
• 🟢avec possibilité de mettre une carte SD
• 🟡 une version récente d'Android et des MAJ dans le futur
• 🟠 si possible pas de surcouche à la mords moi le noeud...
• pas trop cher: idéalement moins de 300€ et pas plus de 350. (très grand max)

Je ne joue pas avec: j'ai besoin de la photo, du navigateur, applis GPS, 9gag/reddit et consorts.

J'ai pensé à un Samsung galaxy A53 5g: plutôt bon en photo, SD mais surcouche.

(...)

Bon, c'est un fait, envoyer des fichiers sur toute machine de son réseau quel que soit son OS, c'est chiant... il y a bien KDE Connect et Warpinator... Mais c'est pas toujours foufou - et je suis un fervent adorateur de KDE Connect.

Déjà, c'est opensource et dispo sur Fdroid pour Android avec une version .deb/appimage... 👍

Localsend, qui se veut l'équivalent d'airdrop sur les machines à la pomme pour les poires (#payeTonTrollGratuit), semble une bonne alternative.

Stable Diffusion sur un RPI 2 ?! WUT ?!

/me ouvre le lien, /me lit le readme :

OnnxStream can run SDXL 1.0 in less than 300MB of RAM and therefore is able to run it comfortably on a RPI Zero 2, without adding more swap space and without writing anything to disk during inference. Generating a 10-steps image takes about 11 hours on my RPI Zero 2.

La génération d'une image 1024x1024 prend ... 11 heures.