IcoMoon App - Icon Font, SVG, PDF & PNG Generator

#16407

Éditer des polices (ajouter, modifier, supprimer des caractères).

C’est utile quand on fait des webfonts avec des icônes.
Il suffit d’importer les PNG ou SVG, de choisir celles qu’on veut dans notre fichier de police et il va pondre les fichiers de polices : Woff, Woff2, SVG, etc.

De façon générale, quand vous faites une webfont, je conseille de n’inclure que les icônes dont vous avez besoin.

Par exemple pour les icônes du material design de Google, il y en a des milliers. Tous les inclure ferait une police bien trop lourde à charger.

(ah et l’avantage des polices web sur les PNG par exemple, c’est la gestion des couleurs et des tailles : on peut afficher une icône et lui ajouter couleur, taille, ombre… en CSS comme on ferait avec du texte normal. C’est donc très maléable, et aujourd’hui c’est aussi bien largement supporté dans les navigateurs)

Réinjecter tout le SWAP en RAM sous Linux !

#16386

Ceci est utile quand le système swape alors qu’il y a de la mémoire vive de libre et que vous n’avez pas envie d’attendre.

Ou bien quand on vient de sortir de veille prolongée et que n’est remise en mémoire que les composants utilisés (et pas le cache par exemple), ce qui ralentit le système dès qu’on ré-ouvre un programme ouvert avant la veille prolongée.

Perso je n’utilise plus de swap du tout, donc je m’en fous un peu, mais je m’en servais avant.

Je maintiens toujours ces deux remarques sur la ram :
– le système gère la mémoire vive très bien tout seul (c’est son job, en fait). Il n’a pas besoin de vous, ni de logiciels tiers pour vider la mémoire.
– une mémoire vive vide (ou au plus bas) ne sert à rien. Si vous ne voulez pas que votre système consomme vos 8 Go de ram, ben mettez une barrette de 1 Go, que voulez vous que je dise ? D’ailleurs, si votre OS indique utiliser 80% de la ram alors que tous les programmes sont fermés, c’est bien souvent des vieux fichiers qui y sont encore. Au mieux, ceci accélère la réouverture de ces fichiers, au pire, ça ne change rien et ces fichiers seront écrasés quand un autre viendra le remplacer en mémoire. Je répète donc que les logiciel pour vider la ram, ça ne sert à rien.

https://www.linuxtricks.fr/news/10-logiciels-libres/334-reinjecter-tout-le-swap-en-ram-sous-linux/

Lecture automatique des vidéos Flash/HTML5 et des GIF : comment s'en passer ?

#16325

<3

J’utilise celle pour les vidéos (dans Firefox). Un clic et ça lance la vidéo.
Par contre, cela ne marche pas chez Vimeo. Ce con ne lance alors plus du tout la vidéo. Il suffit de modifier la clé dans about:config (même en gardant ouvert l’onglet, c’est à chaud) et ça marche.

Comme ça reste un peu chiant, il y a une extension pour faire ça : autoplay-toogle.

Après il reste le problème du Gif animé. On peur les bloquer, mais pas les relancer manuellement.

C’est d’ailleurs pour ça que les sites passent maintenant plutôt à des miniclips en vidéo HTML5 : c’est d’avantage contrôlable, mais surtout la qualité est bien meilleure et le fichier moins lourd à charger. Twitter, Tumbler et (feu) Vine faisaient ça.

ÉDIT : pour toggle les gifs il y a ce module : https://addons.mozilla.org/fr/firefox/addon/toggle-animated-gifs/
(merci Romaric)

https://www.nextinpact.com/news/103346-lecture-automatique-videos-flashhtml5-et-gif-comment-sen-passer.htm

Telnet Commands for a Thomson Router - Le Hollandais Volant

#16299

Ah oui, c’est vrai : sur les routeurs Thomson, on ne peut pas changer les serveurs DNS sans passer par Telnet -_-.

Sauf que le lien "tuto" ne marche plus (site mort).
Il est cependant encore disponible sur WayBack Machine :
http://web.archive.org/web/20160731201914/http://npr.me.uk/telnet.html

Et je l’ai gardé ici aussi :
https://lehollandaisvolant.net/tout/BAK/telnet/

Les DNS que je veux mettre sont ceux d’OpenDNS. Ils ont aussi les IPv6, qui sont ici.

https://lehollandaisvolant.net/?mode=links&id=20150708002631

The Best Keyboard Shortcuts for Bash (aka the Linux and macOS Terminal)

#16293

:O

Y en a tout un tas !

Petite remarque concernant Alt+T, qui est censé inverser les deux derniers mots : sous Mate/Gnome, il faut faire Alt+Shift+T, car Alt est réservé à l’accès au menu (pas seulement dans le terminal, et pas seulement sous Linux hein, Windows aussi).

https://www.howtogeek.com/howto/ubuntu/keyboard-shortcuts-for-bash-command-shell-for-ubuntu-debian-suse-redhat-linux-etc/

image - 720x1280px

#16282

Ah oui : je remarque aujourd’hui que le Wiko Ridge 4G est non seulement compatible GPS et Glonass, mais aussi Beidou.

Les satellites sont représentés par les ronds (GPS), des triangles (Glonass) et des étoiles à 4 branches (Beidou).

Cette application (GPS Test Plus) est programmée pour détecter plein d’autres types de satellites, mais je n’avais jamais constaté que mon téléphone repérait aussi Beidou (sans doute que Beidou est compatible Glonass ou GPS et fonctionne sur la même « bande »).

How to animate "box-shadow" with silky smooth performance | Tobias Ahlin

#16281

Les animations CSS sont cool, mais parfois gourmandes en ressources. Ici une astuce pour améliorer les performances quand on veut animer une box-shadow sur un bloc au :hover.

Au lieu de faire

#box {
    box-shadow: 4px 4px 4px transparent;
    transition: box-shadow 1s ease;
}

#box:hover {
    box-shadow: 4px 4px 4px silver;
}

Préférez d’ajouter un ::after sur le block, avec une ombre fixe.
Ensuite, mettez la transition sur l’opacité du ::after.

Le truc c’est que les moteurs de rendus ne calculent que l’opacité du ::after, et non l’ombre qui est bien plus lourde à produire et donc à animer (car elle dépend de plein de choses, dont les dimensions du bloc.

#box {
    position: relative;
}
#box::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0;
    box-shadow: 4px 4px 4px silver;
    opacity: 0;
    transition: box-shadow 1s ease;
}

#box::after:hover {
    opacity: 1;
}

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Do responsive sites have to be so tall on mobile? | Viget

#16269

Je suis d’accord : un truc que le responsive design fait, c’est qu’il réorganise à la vertical les éléments d’une page, faisant en sorte que la page est super longue, y compris simplement un article (juste par le fait des éléments qu’il contient).

Pour modifier ça, et mettre comme il propose, certains élements spéficique en ligne et d’autres en dessous en colonne, il faut utiliser du JS (pour déplacer physiquement les éléments au sein du HTML).

Une autre solution peut être le CSS avec Flex et Grid.
Le premier est largement supporté, mais le déplacement des éléments reste (selon moi) une fonctionnalité relativement secondaire des Flexbox (qui permet avant tout de faire des boîtes flexibles). Grid commence tout juste à pointer le bout de son nez, il n’est pas encore bien implémenté partout.

https://www.viget.com/articles/do-responsive-sites-have-to-be-so-tall-on-mobile

Tricher grâce à l'UX quand il n'y plus de code optimisable - Confoo 2017 - Stéphanie Walter : design et mobile, UX et UI

#16265

Parfois on peut utiliser l’UI pour donner l’impression que les actions prennent moins de temps qu’en vrai, mais dans d’autres cas, il faut ajouter des délais artificiels : une action lourde qui se fait super rapidement donne l’impression que quelque chose s’est mal passé.

https://blog.stephaniewalter.fr/tricher-grace-a-lux-ny-plus-de-code-optimisable/

Simple Table-Of-Contents in JavaScript (enhanced)

#16262

J’ai publié ce pen avec du JS pour faire un sommaire (TOC) dans une page. Le TOC est totalement automatique.

Ici j’ai aussi ajouté mon astuce pour ajouter des numéros (le « 2.1 » sur le sous titre 1 du titre 2 de la page), à la fois dans le TOC et dans les h1, h2…
Ces numéros sont entièrement en CSS (avec la propriété counter — ancienne mais peu utilisée), c’est pour ça qu’ils ne sont pas sélectionnables.

J’utilise tout ça sur la plupart de mes pages depuis longtemps :
https://lehollandaisvolant.net/tuto/gpg/
https://lehollandaisvolant.net/linux/checklist/
https://lehollandaisvolant.net/tuto/tor/
https://lehollandaisvolant.net/tuto/pagespd/
https://lehollandaisvolant.net/tuto/bin/
etc.