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

ComposeKey - Community Help Wiki

Oui, j'avais posté il y a super longtemps un billet sur des astuces pour les accents espagnols sous ubuntu/int ( https://www.warriordudimanche.net/article691/59b41f3ca6ec8 ) puis je me suis rendu compte que la méthode la plus simple (mais VRAIMENT plus simple) est de trouver une disposition de clavier adéquate...

Pour les accents espagnols, le meilleur clavier azerty est le clavier Occitan:

  • il est AZERTY
  • il est compatible avec les claviers AZERTY les plus répandus
  • les caractères espagnols sont accessibles en pressant simplement la touche ATL en même temps: ALT+a = á etc.

Je n'utilise plus jamais le clavier français.

A Calendar in Three Lines of CSS

Intéressant et astucieux

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">Sat</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <!-- ... -->
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

Youtube - dismiss sign-in - GuiGui's Show

Je te rejoins complétement à la fois sur le constat et sur le sentiment... Je me suis trouvé face au même problème avec googol : je devait régulièrement reprendre le code pour lutter contre leurs modifications et leurs bannissements...

A force, on jette l'éponge parce que ce n'est plus tenable.

YouTube peut se permettre de faire de la merde à présent qu'il à éliminé toutes les alternatives RÉELLES : le contenu est là et pas ailleurs...

Je note ton idée de bookmarklet qui a l'avantage de prendre YouTube à son propre jeu... Pour le moment.


 javascript:(function(){document.location.href=document.location.href.replace("watch?v=",%20"embed/");})();

How to Add Text in Borders Using Basic HTML Elements | CSS-Tricks

Rigolo : comment mettre du texte dans les rebords d'un cadre ? Genre comme ça:

Capture du 2020-12-06 14-18-45.png

En utilisant des fieldsets et leur legend...

<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>


body{
  display: grid; 
  margin: auto; 
  margin-top: calc(50vh - 170px); 
  width: 300px; height: 300px; 
}
fieldset{
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 1; 
  padding: 20px; 
  width: inherit; 
}
fieldset:nth-of-type(1){ 
  background: content-box center/contain no-repeat url("photo-1588852065463-5de1411ea697?w=400"); 
}
fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
legend{
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; 
  padding: 0 4px; 
} 
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 

body {
  user-select: none;
  -webkit-user-select: none;
}

L’homme qui hululait à l’oreille des formulaires – 24 jours de web

En résumé

  • Contrôler la validité des champs avec trop d’enthousiasme : difficile de prendre en compte les spécificités de tout le monde...
  • Abuser de la validation côté client : éviter les situations bloquantes.
  • Imposer des contraintes fantaisistes sur les mots de passe : privilégier la longueur des mots de passe plutôt que leur complexité.
  • Obliger l’internaute à nettoyer lui-même ses données : privilégier le nettoyage côté serveur avant stockage.
  • Confondre les attributs labels et placeholder : label = nom du champ, placeholder = exemple de saisie
  • Recueillir des informations non-conformes : Moins on recueille d’informations sur l’utilisateur, mieux tout le monde se porte.
  • Obliger à utiliser la souris pour saisir des mots de passe
  • Ré-inventer des composants de formulaire : accessibilité ? compatibilité ? javascript bloqué ?
  • Reporter la complexité du processus sur l’utilisateur·ice : ex, les mini formulaires enchainés. Solution: proposer une alternative

SQLite as a document database

OMAGAD: SQlite peut gérer les données JSON ?!

Oufti !

The benefit here is you can start off with a table which could be as simple as just a single JSON column, and add columns and indexes as you find useful data in that JSON. For example this can work really well for webhooks, insert all the data you are sent straight into a table, then pull out the useful stuff later. Have fun.

Merci Seb !

Fil RSS des articles