Astuce : Les template strings en JavaScript

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


C'est con, j'ai ri 4

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 )

(...)

What Web Can Do Today

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


5 exciting new HTML and CSS features to look forward to in 2018

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 */
  }
}

“Stop Using CSS Selectors for Non-CSS”

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>

Bozon: mais non ce n'est pas mort...

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

(...)

Go ! - un raccourcisseur d'URL

Il y a quelques jours, j'ai eu à filer un lien vers un travail à mes élèves, j'avais donné un qrcode mais, bien entendu, la plupart ne savait même pas de quoi il s'agissait et ne disposaient de toutes façons pas de l'appli; les voilà donc partis pour taper l'url dans le navigateur, pour ceux qui savaient ce que c'était, ou dans la recherche google pour les autres ...

Or, facteur aggravant, l'URL était longue et alambiquée ce qui, pour des mômes qui ont la capacité de rétention d'un bulot cuit, constituait déjà un challenge qui aurait à lui seul pu subir une évaluation notée.

GrosJean comme devant, je me promets in petto de coder à l'arrache un raccourcisseur d'url perso, histoire de ne plus perdre 22 minutes à attendre que tout le monde ait tapé les bons caractères dans le bon ordre et dans la bonne case...

Donc, voilà, c'est fait.

capture

C'est très minimaliste, fait à l'arrache, mais ça fonctionne: la page d'accueil contient une case pour taper l'url à raccourcir et une autre si vous voulez spécifier un code particulier (sinon, il génère au hasard): si vous précisez un code qui existe déjà, il écrasera l'ancien.

Voir la démo Télécharger le zip

C'est publié sous licence faisCeQueTuVeuxMaGueule (n'hésitez pas à virer le lien du footer si vous voulez )

Les codeurs comprendront...

Un dump spécial codeurs...

Quand chaque recherche d'un bug conduit à la découverte d'un nouveau


une analogie pour comprendre ce qu'est une page web











Mon clavier StackOverflow est arrivé \o/






Quand on demande à un codeur de passer un coup de balai




Quand tu apprends un nouveau langage







BigAscii [js]

Dans la catégorie «script à la con» voici une page qui permet de transformer un texte en gros titre ascii. J'en ai eu besoin pour que la répartition de mon code pour Bozon se voie même dans la minimap de SublimeText.

(faut dire que la classe post/get à elle seule contient 1700 lignes environ... )

En vous rendant sur la page en question, vous pouvez taper un texte et sélectionner différents paramètres. Pour l'instant, elle ne gère que les caractères alphanumériques (je n'avais besoin que de ça)...

Le script est simplissime et facilement modifiable... faites-vous plaisir et partagez vos versions

La démo | Le zip

Firefox et le drag/drop de fichier, ça fait chier...

RHAAAAAAA CON DE FIREFOX ! J'arrive pas à récupérer les fichiers déposés pour les ajouter dans un input[file]... pourtant ça marche nickel sous Chromium !

document.getElementById('selector_0').files=event.dataTransfer.files;

La console me prouve que event.datatransfert.files est correct mais impossible de transférer sa valeur à l'input !

Pourtant, même StackOverflow dit que (ça marche sous Firefox)[https://stackoverflow.com/a/38968948] !

J'en suis à mon 3ème gigaoctet de doc consultée, je commence à voir flou... 'Tain, chez Mozilla, faites un effort, on se croirait à la glorieuse époque d'IE6

Une idée, les copains ?

function stopPropagation(event){
    if(event.preventDefault) { event.preventDefault(); }
    if(event.stopPropagation) { event.stopPropagation(); }
}

dropzone.addEventListener("drop", function(event){
    stopPropagation(event);
    document.getElementById('selector_0').files=event.dataTransfer.files;
    console.log(event.dataTransfer.files,document.getElementById('selector_0').files);
    return false;
}, false);

(...)

Café des blogueurs: Stéphanou

Stéphanou
@notabene

NB : je ne code pas mais je crois que la codocratie n'est pas la seule alternative dans l'OSS. L'open source a besoin de gens qui sont simples utilisateurs, de gens qui font des tickets UX, acessibilité, etc.

Les projets qui ne le comprennent pas sont condamnés à ne jamais être grand public.

Je reposte ici ma réaction:

@notabene
Je suis tout-à-fait d'accord: un codeur ne peut pas tester correctement son appli, il est trop impliqué et il la connait trop bien.

On a BESOIN des usagers qui sauront remonter leur opinion, leurs idées et surtout les bugs qu'ils ont rencontrés en utilisant "mal" l'appli: ça permet au codeur d'améliorer considérablement son travail.

MERCI à tous ceux qui prennent le temps de tester et de remonter leurs conclusions !

Suivi de commentaires par mail pour pluXML

Il y a quelques temps, j'avais bricolé un plugin pour Cyrille afin de permettre aux usagers du site de s'abonner par mail aux commentaires d'un article. Comme il s'est trouvé quelqu'un d'autre que ça semblait intéresser, je pose là le bouzin

Pour faire simple, le plugin ajoute une case permettant de s'abonner dans le formulaire de commentaire.

Quand un commentaire est posté et validé, l'abonné reçoit un email contenant le commentaire ainsi que des liens vers l'article, le commentaire et le désabonnement.

L'auteur de l'article peut, lui aussi, recevoir un mail pour tout commentaire posté (voir la page de config du plugin)

Comme toujours, c'est fait un peu à l'arrache, entre deux perturbations familiales... (j'ai compté une fois: en deux heures, les boulets m'on interrompu près de 40 fois: j'ai fait la liste sur un des postits, optimiste que j'étais)

N'hésitez pas à proposer des améliorations

Télécharger le zip

(...)

Fil RSS des articles