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
Fil RSS des articles