Developer Tools secrets that shouldn’t be secrets | Christian Heilmann

Donc, pour résumer:

  • pour avoir le nom des variables avec leur valeur, utiliser { }: console.log({var})
  • console.warn(), console.error() et console.info() pour différencier l'aspect du message.
  • console.assert(condition,retour) pour éviter un if (condition){console.log(retour)
  • console.trace() pour remonter la pile d'appels
  • console.group('nom'), console.groupCollapsed('nom') et console.groupEnd('nom') pour regrouper des console log()
  • console.table(array) pour présenter les données sous forme de tableau
  • $(selecteur) est équivalent à document.querySelector(selecteur)
  • $$(selecteur) est équivalent à document.querySelectorAll(selecteur)
Via https://lehollandaisvolant.net/?mode=links

10 Balises HTML5 intéressantes [MAJ 2021]

Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.

<details>

L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.

L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.


<style>
    details{font-style:italic;cursor:pointer}
    details:after summary{content:"▶"}
    details[open]:after summary{content:"▼"}
    details p{margin-left: 25px}
</style>
<details>
  <summary>Ligne de résumé.</summary>
  <p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.

Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...

en savoir plus - compatibilité 92% et pas sur edge

<dialog>

Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture

en savoir plus - compatibilité 75%, c'est peu...

<data>

La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.

<p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

en savoir plus - compatibilité 99%

L'attribut poster de la balise <video>

On peut spécifier une image qui s'affiche pendant le chargement de la vidéo en faisant <video poster="chemin/vers/image.jpg">

en savoir plus - compatibilité 82%

L'attribut spellcheck de la balise <input> (ou tout contenteditable)

On peut autoriser ou interdire la vérification orthographique avec cet attribut <input type="text" spellcheck="false">

en savoir plus - compatibilité 99%

<base>

Fournit l'url de base et le target pour tous les liens relatifs de la page.

Astuce: en faisant <base target="_blank"> tous les liens s'ouvriront dans une nouvelle page...

en savoir plus - compatibilité 98%

<meter>

Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)


<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 95%

<progress>

Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)


<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 98%

<mark>

Qui sert simplement à mettre en surbrillance un passage de façon plus sémantique.

en savoir plus - compatibilité 50%

<optgoup>

pour regrouper les options d'un select <optgoup label="groupe1">

en savoir plus - compatibilité 77%

image

Note : optimisation PHP - Le Hollandais Volant

Pas bête du tout ça: quand on met en place un cache en PHP, on crée le contenu s'il n'existe pas ou on le lit puis le renvoie s'il existe.

Grâce à un .htaccess bien placé, on peut servir directement le fichier s'il existe et on renvoie vers la page php censée le générer s'il n'existe pas (erreur 404)

Du coup, on n'exécute du PHP que si le contenu n'existe pas.

Pas con du tout !

Les 7 meilleures façons de renommer des fichiers par lots sous Linux

Wow, renommer des fichiers en remplaçant une chaîne par une autre simplement sous linux ? rename.ul

rename.ul png jpg *.png

Über fast !

EDIT: Et pour rendre ça récursif dans les sous-dossiers; find -name *.SPHP -exec rename.ul 'jpg' 'png' {} ;

Sortie du mode S dans Windows 10

«Windows 10 en mode S est conçu avant tout pour la sécurité et les performances, en exécutant exclusivement des applications du Microsoft Store.»

T'as raison mon con...  C'est pour NOTRE SECURITAY  que tu empêches tout ce qui   ne vient pas du windows store  de fonctionner...
Là, on pourrait penser qu'à première vue, il suffit de décocher une case avec confirmation... Et ben non:

Sur votre PC exécutant Windows 10 en mode S, ouvrez Paramètres > Mise à jour et sécurité > Activation.

Dans la section Basculer vers Windows 10 Famille ou Basculer vers Windows 10 Professionnel, sélectionnez Accéder au Store. (Si vous voyez également une section « Mettre à niveau votre édition de Windows », veillez à ne pas cliquer sur le lien « Accéder au Store » qui s'affiche.)

Dans la page Sortir du mode S (ou intitulé similaire) qui s'affiche dans le Microsoft Store, sélectionnez le bouton Télécharger. Après qu'un message de confirmation sera affiché dans la page, vous serez en mesure d’installer des applications depuis l'extérieur du Microsoft Store.

autre astuce:

Pour éviter la création d'un compte micro$oft lors du démarrage, il suffit de ... couper la connexion internet et de choisir créer un compte, ce qui créera un compte LOCAL. (quelle merde, ce windaube) Par contre, l'astuce ci-dessus requiert le téléchargement via le windows store et donc... un compte crosoft.

Au passage, wink à Liandri que je   remercie pour :  1- l'astuce ci-dessus  2- l'ordinateur qui fonctionne impec !  3- les SSD que mon grand a   revendiqué direct pour son PC !

ASTUCE: Body qui apparait après chargement en 2 lignes

Un truc que je teste sur ma page de générateur de comics pour masquer le chargement de la page...

Minimaliste...


/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}
/* balise body */
<body onload="document.body.style.opacity=1" >

- HTML (HyperText Markup Language) | MDN

Le jour où tu t'aperçois comme un abruti que l'input de type range prévoit la possibilité d'ajouter des repères et même des repères avec des labels !

Genre:

<input type="range" list="tickmarks">
<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
Est-ce que je deviens trop   vieux pour tout ça ?!

EDIT: Ha mais c'est pas standardisé, tous les navigateurs ne l'utilisent pas... firefox par exemple...

OUF !  C'est pas moi le problème !

Hardware boot selection switch | Hackaday.io

Excellente idée... il existe même des switches tout prêts dans le commerce: j'en avais un avec 4 interrupteurs, un par HD.

Les gros avantages:

  1. ça IMPOSE le choix à windows, même s'il fait chier
  2. ça CLOISONNE les systèmes entre-eux: si une saloperie chopée sous win veut te poutrer les HD -> dans son cul.
  3. ça SOULAGE l'alim (la mienne a l'air de donner des signes de fatigue, je sens que ça va être ma prochaine galère)
Via https://shaar.libox.fr/?y56PlA

How to Fix 0x80070424 Windows 10 Update Error [2020] - YouTube

Depuis un bon moment, j'avais un souci de mises à jour bloquées sous win...

Comme je ne m'en sers que pour jouer, je ne m'en faisais pas trop. Mais quand ta fille vient te voir, les larmes aux yeux en te disant que le PC «y n'arrête pas de planter» quand elle joue... tu retrousses tes manches.

Bref: si vous avez une erreur de windows update sous win 10 [0x80070424], il faut:

  • installer la clé de registre du fichier suivant: w10-wuauserv.reg
  • redémarrer
  • aller dans le gestionnaire des tâches>onglet services>lien ouvrir les services en bas, chercher windows update et le mettre en démarrage auto (et le démarrer si nécessaire)
  • redémarrer la bécane
  • aller dans windows update et relancer le bouzin

Normalement, ça doit remarcher.



CSS Tips - Marko Denic - Web Developer

Je suis fan de ces astuces minimalistes...

  • filter:drop-shadow(2px 4px 8px #585858); pour faire une ombre sur des images à fond transparent.
  • scroll-behavior: smooth; pour activer le smooth scroll
  • .center { display: flex; align-items: center; justify-content: center; } pour centrer horizontalement et verticalement
  • white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pour tronquer un texte
  • caret-color:red pour changer la couleur du curseur de texte

Ou encore la fenêtre modale SANS javascript:


/* If you like this, be sure to ❤️ it. */
.wrapper {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End center */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}
Via https://sebsauvage.net/links/

1 LOC | Favorite JavaScript utilities in single line of code [Edit]

OMAGAD j'adore ce genre de sites d'astuces et de snippets ultra condensés ! MERCI COPAIN ! o/

[EDIT] La vache ! Pour certaines astuces, l'auteur propose plusieurs possibilités. En bon nerd, je me dis que j'aimerais bien savoir s'il y a des différences de perfs... Spoiler: y'en a.

Pour la deuxième astuce, le clonage de tableaux, le site propose:

// `arr` is an array
const clone = arr => arr.slice(0);

// Or
const clone = arr => [...arr];

// Or
const clone = arr => Array.from(arr);

// Or
const clone = arr => arr.map(x => x);

// Or
const clone = arr => JSON.parse(JSON.stringify(arr));

// Or
const clone = arr => arr.concat([]);

Du coup, je bricole un petit test vite fait, genre ça:

function repeat(funct,nb){
        let t=Date.now();
        let arr=[1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9];
        for (let i=0;i<=nb;i++){
            let a=funct(arr);
        }
        return Date.now()-t;
    }
    let nb=100000;
    console.log("arr.slice(0) x "+nb+": "+repeat(function(arr){return arr.slice(0);},nb) );
    console.log("[...arr] x "+nb+": "+repeat(function(arr){return [...arr];},nb) );
    console.log("Array.from(arr) x "+nb+": "+repeat(function(arr){return Array.from(arr);},nb) );
    console.log("arr.map(x => x) x "+nb+": "+repeat(function(arr){return arr.map(x => x);},nb) );
    console.log("JSON.parse(JSON.stringify(arr)) x "+nb+": "+repeat(function(arr){return JSON.parse(JSON.stringify(arr));},nb) );

Histoire de voir ce que chaque méthode donne en vitesse ...

Le résultat est sans appel...

Capture du 2021-03-29 18-55-29.png BIM!

Donc arr.slice(0) est 10x plus rapide que [...arr] et carrément 33 fois plus rapide que le recours à JSON (la non surprise est totale)

J'aime bien faire ce genre de tests

via https://bookmarks.ecyseo.net/?lkEG0w

Fil RSS des articles