*clap clap*

Bon, pour les risques naturels, ça me semble justifié. Mais les gens ne regardent-ils plus la météo ? Meh.

Pour les alertes terroristes, en revanche : lol ?

Ça va faire 20 ans que la France est sous Plan Vigipirate, 10 ans qu’il est dans le rouge/écarlate. 1 an qu’il est en état d’alerte attentat « imminent ».
Ça fait plus de 3 mois qu’on est en état d’urgence (état policier), que cette dernière situation va durer encore 3 mois et sûrement indéfiniment après ça.

Et maintenant ils veulent un "service" supplémentaire pour soi-disant prévenir les gens ?

Déjà, ce « service » supplémentaire montre que les plans vigitruc ou état d’urgence ne servent plus à rien. À force des maintenir, ils font partie de la vie quotidienne et maintenant tout le monde s’en tape. La vigilance est retombée : l’urgence est devenue permanente.

Ce « service » va avoir le même effet : au début tout le monde va flipper et rester à l’intérieur de chez eux. Et puis ça va devenir quotidien. Quand on recevra des SMS toutes les 15 minutes 24/7, tout le monde s’en foutra.
C’est comme les alertes incendie : si il y en a 1 ou 2 dans l’année, tout le monde la respecte. Mais si il y a un problème avec le détecteur et que l’alarme retentit tous les jours, plus personne ne sort. Jusqu’au jour où y a vraiment un incendie.

Jusqu’au jour où il y a vraiment un attentat.
Et là ils, les politiciens à la con, seront tous là pour nous dire « on vous avait prévenu ! ». Ouais, c’est ça : alors pourquoi ne pas l’avoir empêché, hein, si vous êtes si malin ?

Avec l’État d’Urgence ou le plan Vigipirate : ça fait 10 ans qu’il est rouge. Sur 10 ans, il y a eu deux ou trois attentats terroristes réels et de grande ampleur. Peut-être qu’ils en ont déjoué, sûrement même (c’est ce qui leur manque : communiquer à propos de ça, au moins pour éviter qu’on pense qu’ils ne servent à rien et donner de l’espoir), mais était-ce réellement grâce au plan Vigipirate ? A-t-on vraiment besoin de faire peur à la population pour ça ? En gros, pourquoi utilisent-ils la terreur pour imposer l’ordre (définition du terrorisme, au fond)?

Ensuite, regardons :

  • le plan vigipirate demande aux citoyens d’être vigilant : signaler les colis suspects, signaler les bagages abandonnés, etc. Qui a déjà signalé un sac perdu, honnêtement ?
  • l’État d’Urgence donne à la police tout les droits : entrer chez les gens, détruire leur mobilier, saisir leur matériel (téléphone, ordinateur…) même pour des choses qui n’ont rien à voir avec le terrorisme. Combien de crimes ont été empêchés grâce à ça ? Sur les 3 400 perquisitions, on a eu 5 procès pour terrorisme et une seule mise en examen pour terrorisme.

Oui, c’est sûr : envoyez donc 1 SMS par jour à toute la population pendant 15 ans, c’est sûr qu’un jour vous auriez eu raison de le faire dans une ville de France (ils ne diront pas que les 5 478 autres jours, ils se seront trompés pour toute la France).

En attendant, Daech continue à nous acheter des armes et à nous vendre du pétrole.

Après mon premier article sur les astuces en CSS, puis le second, une autre astuce pour des menus responsives (incluse sur cette page), un autre post sur les choses à éviter ainsi que sur les préfixes devenues inutiles, quelques idées comme les couleurs relatives et quelques autres, voici le temps d’un autre article sur le sujet.

Cacher un élément avec une animation

Le but ici est d’avoir un élément HTML (un popup par exemple) et de le cacher après quelques instants en l’animant. Le principal problème étant que les propriétés « display: none » et « visibility: hidden » sont impossibles à animer, et il faut donc contourner tout ça. Mon astuce est inspirée de cette page.

On va se servir de l’opacité de l’élément. Le problème, c’est que si on n’utilise que ça, l’élément sera toujours là mais juste invisible : il occupera toujours de la place et masquera ce qui se trouve dessous (si c’est un formulaire ou un lien qui se trouve en dessous, ils seront inaccessible). On va donc réduire la hauteur de l’élément à zéro et masquer tout ce qui dépasse : l’élément ne mesurera plus rien.

L’élément à cacher est ici le « #popup ». Il se cachera après 3 secondes et l’animation durera 1 seconde.

Code CSS :

#popup {
    animation: disapear 1s 3s;
    animation-fill-mode: forwards;
    height: 100px;
    opacity: 1;
    overflow: hidden;
}

@keyframes disapear {  
    100% {
        height: 0;
        opacity: 0;
    }
}

Le fonctionnement des animations est simple : on dit qu’un élément HTML doit être animée avec une animation bien précise, et plus loin dans le code on va déclarer ladite animation : c’est le rôle du « @keyframes disapear », où on décrit l’avancement de l’animation. Ici, seul l’avancement à 100% est déclarée : l’état à 0% correspond au CSS déclaré « normalement », mais il est possible de déclarer des états intermédiaires pour chaque pourcentage.

La ligne « animation-fill-mode: forwards; » est très importante : sans elle, l’animation une fois terminée replacera l’élément dans son état initial. Ne pas mettre cette ligne permet de faire des animations dont les effets ne durent pas.

Les démos de codes sont ici :

Mettre une ligne de texte sur une seule ligne et masquer ce qui dépasse

Ici, on veut qu’une ligne de texte ne retourne pas à la ligne. On souhaite également masquer ce qui dépasse. Bien-sûr, on connaît la méthode classique avec seulement deux propriétés :

#element {
    white-space: nowrap;
    overflow: hidden;
}

Sauf que la coupure n’est pas belle. L’astuce ici est d’ajouter la propriété CSS3 « text-overflow », qui permet de choisir ce qui se passe à la coupure. Je choisis toujours « ellipsis », qui va ajouter des points de suspensions avant de couper la ligne.

Notez qu’il faut appliquer le « overflow: hidden » à un élément qui possède une taille définie (ici, je l’applique au bloc parent, dans lequel on met un bloc enfant).

On obtient alors :

#parent-block {
    overflow: hidden;
    text-overflow: ellipsis;
}

#block {
    white-space: nowrap;
}

Par ailleurs, pour que ça marche également sur les éléments <pre> et <code> et dans Firefox, ajoutez ceci : pre, code { white-space: pre-wrap; }.
Aussi, faites attention car cet effet masque du texte. Si c’est un résumé suivi d’un lien « lire la suite » ce n’est pas grave. Mais si c’est une ligne de code à copier, ça devient embêtant.

Ceci peut devenir très intéressant avec les flexbox, où les éléments ont une taille variable, et si l'on veut par exemple que les éléments (de liste par exemple) restent sur une seule ligne.

(source & liens)