Superbe, simple, ergonomique...

OMAGAD ! je ne connaissais pas, faut que je regarde ! Merci copain !

Un web component destiné à embed une vidéo youtube plus efficacement et de façon plus légère que l'iframe bourré de merdes auquel on a droit. Il semble de plus optimisé et l'auteur annonce des gains de perf de l'ordre de 224x... à tester.

En tout cas, ça n'a pas l'air dur à utiliser: on link les css/le webcomponente et on utilise la nouvelle balise <lite-youtube videoid="ogfYd705cRs"></lite-youtube>

Un web component tout prêt fait par Grafikart qui remplace le input file par une dropzone plus élaborée. Ça a l'air bien foutu, je me le mets de côté.

le github est par là

(...)

Je ne connaissais pas l'astuce (alors que ça m'a fait chmir aussi!)

Il faut ajouter \u000A.

C'est pourtant très intuitif.

Si ça intéresse quelqu'un, voici un plugin dont le but est de reposter automatiquement les billets de pluxml vers un compte mastodon.

pluxml2mastodon utilise le chapô ou le contenu (si le chapô est vide) comme corps de message en le retaillant si nécessaire.

Dans les options, il faudra compléter l'url de votre instance et le jeton de sécurité; vous pouvez également ajouter un message d'en-tête et de pied, si vous le souhaitez.

(...)

L'usage de base consiste à imbriquer des variables dans les chaînes, entre ${ et }. Elles se verront "remplacées" par leur valeur au moment de l'exécution.

var kiwis = 3;

const message = `J'ai ${kiwis} kiwis dans mon panier`;

// Résultat : J'ai 3 kiwis dans mon panier

On retrouve ici le même concept qu'en PHP avec les chaînes de texte entre guillemets doubles qui interprètent les variables :

echo "Ma variable : $kiwis";

Pour celles et ceux qui en ont marre de leur semaine, de la météo, de la politique, des affaires, des gens qui tuent leurs conjoints alors qu'ils faisaient genre «chuis trop inquiet sur la vie de ma reum», du code du travail, des inondations, qu'on leur parle de la Seine ou des nichons de la famille Kardachiants, voici un Dump du Dredi: attention, c'est con (mais j'ai ri )

(...)

Pas mal ça: un site sur les API disponibles dans les navigateurs. Très bien foutu.

par exemple, page visibility:

• document.hidden: Returns true if the page is currently hidden.
  
• document.visibilityState: Returns current visibility state: visible, hidden, prerender or unloaded.
  
• document.addEventListener('visibilitychange')
  
  sympa !
  Via Korben
  
  
  
  Source image

Les nouveautés du HTML 5.2...

Native Dialog element

Un élément pour faire des dialogbox facilement

<dialog>  
  <h2>Your title</h2>
  <p>Your content...</p>
</dialog>

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

CSS scroll snap points

Des points d'arrêts lors d'un défilement

CSS Variables

On connaissait déjà, mais bon, c'est chouette quand même \o/

Support queries

Créer des règles css en fonction de leur support sur le navigateur

@supports (mix-blend-mode: overlay) {
  .example {
    mix-blend-mode: overlay;
  }
}

@supports not(mix-blend-mode: overlay) {
  .example {
    /* alternative styles here */
  }
}

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de

<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

Voilà un moment que je ne donne aucune nouvelle de Bozon. Le projet n'est pas mort mais après un an à récrire le code, JerryWham a attiré mon attention sur le fait que l'ensemble devait être amélioré et optimisé: malheureusement, après moultes tentatives en ce sens (de nous deux, on a pas mal bossé), il s'avère qu'une restructuration est encore nécessaire.

C'est donc à cette tâche que je m'attelle en ce moment: restructurer afin de respecter certaines règles de programmation, quitte à me racler la soupière encore un moment

Du coup, je suis en train de déplacer et récrire des portions de code pour rendre le tout plus élégant et efficient afin de produire une version de travail commune pour coder à quatre mains.

En plus, comme le mentionne Cyrille, c'est pas mon temps libre qui me permet d'avancer...

«Faire et défaire, c'est apprendre à travailler» Proverbe familial

(...)

C'est juste... beau.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

PHP library which will retrieve a thumbnail for any given URL, if available.

Arthur is alive \o/
welcome back Bro' (ﾉʘヮʘ)ﾉ*:･ﾟ✧

Une lib pour faire des checkboxes en pur css. C'est bôôôôô