cursor - CSS : Feuilles de style en cascade | MDN

#17671

Un truc tout bête qui aide beaucoup dans l’UI et l’UX : les curseurs en CSS.

Plutôt que d’ajouter un spinner en JS ou un GIF qui prend lui-même pas mal de ressources, pour dire « attendez ça charge », mettez plutôt un "cursor: progress" sur la page.

Plutôt que mettre un popup « déplacez le curseur de gauche à droite », ajoutez un simple "cursor: col-resize" ou "cursor: ew-resize".

https://developer.mozilla.org/fr/docs/Web/CSS/cursor

Note : PHP, curl_multi et barre de progression

#17662

Ok… donc en PHP dans mon lecteur RSS qui doit récupérer en parallèle 170 URL, j’affiche un petit compteur.

Le truc, c’est que c’est forcément dans une boucle while, et que cette boucle se fait aussi rapidement que le CPU le peu.

Donc si PHP envoie au navigateur un « +1 » à chaque fois qu’un flux est récupéré, il l’envoie quelques millions de fois par seconde : impensable, donc, ce qui fera des dizaines de Mo de données juste pour ça.

Du coup, j’avais mis un usleep(100000) dans la boucle… ça marchait. Par contre, ça bloquait également la récupération des flux ! Certains flux posaient donc problème…

Du coup j’ai remplacé ça par un test sur microtime(). Par contre, je maintiens un tout petit usleep() : la différence est flagrante : le sleep est assez faible pour pas que cURL coupe la requête, mais assez long pour éviter que le CPU ne fasse 1 milliard de tests par seconde :


	$running = 0;
	$utime = microtime(true);

	do {
		curl_multi_exec($master, $running);
		usleep(500);

		// echoes the nb of feeds remaining
		if ($utime + 1 < microtime(true)) {
			echo ($total_feed-$running).'/'.$total_feed.' '; ob_flush(); flush();
			$utime = microtime(true);
		}
	} while ($running > 0);

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

6 idées originales de QR code à utiliser dans la vie de tous les jours

#17614

Je ne comprends pas pourquoi les QR-Code ne sont pas plus présents ici. En Hollande on les voit un petit peu plus (sur certains produits, ou sur les devantures de magasins, pour retrouver directement le site : y en a plein à Amsterdam), mais ça n’est pas encore exploité beaucoup plus que ça…

J’utilise déjà l’astuce du Wifi depuis longtemps.
Je me demande si je vais pas ajouter celui du porte clé.

Par contre ça peut devenir dangereux : votre numéro de téléphone n’est pas plus privée si vous l’avez lié à vos comptes en ligne (FB, Google, Amazon…) : faire une recherche d’un numéro de tél dans Facebook permet de retrouver les gens. Si vous avez publié votre adresse sur FB, la personne aura votre adresse + vos clés. C’est pas très malin.

Une idée serait de mettre le numéro de tél d’un proche (qui n’habite pas chez vous, ni à proximité). Ce proche de vous contacter alors pour demander si c’est vrai.

http://www.pexiweb.be/6-idees-de-qr-code-original-a-utiliser/?utm_campaign=Feed%3A+Pexiweb+(Pexiweb)

Installer Compiz et le cube de bureau sous Linux - lehollandaisvolant.net

#17561

J’ai mis un peu cette page à jour.

Si l’engouement pour la 3D sous Linux semble être un peu disparu, Compiz est toujours là et je l’adore toujours autant.

À une époque (Linux Mint 16, 17) c’était clairement la galère à mettre en place (plantages, mise en place d’un script au démarrage, etc.), depuis LM18 et 19 c’est très simple : une case à changer et ça marche.

Pour le reste, CCSM n’a pas beaucoup changé.

Comment nettoyer son ordinateur portable ? - Le Hollandais Volant

#17537

Je viens de nettoyer mon ordi portable : comme d’hab, les ventillos étaient encrassés de poussière… Un bon coup de soufflette et maintenant il devrait beaucoup moins souffler comme une turbine.

Avec ce temps, n’oubliez pas de le faire.

Je le fais une fois par an.

Quand le PC s’y prête, ça se fait en 10 minutes et le matériel vous en remercie.

https://lehollandaisvolant.net/?d=2012/10/10/13/00/26-comment-nettoyer-son-ordinateur-portable

Des milliers d'anecdotes pour briller en soirée

#17507

Putain, ça m’énerve : le flux RSS de ce site est cassé 80% du temps !

La raison ? Parce qu’ils "coupent" les anecdotes (raison légitime : ils veulent qu’on vienne sur leur site pour lire).

Sauf que… ils coupent l’anecdote après un certain nombre de caractères. Comme si je coupais la chaîne « bonjour comment ça va ? » après 10 caractères, ce qui donnerait « bonjour co… ».

Le problème, c’est qu’on fait ça normalement en comptant les octets : Le 10e caractère débute après le 10e octet. Or, certains caractères, en particulier tout ce qui n’est pas ASCII, et en UTF-8, se codent sur plusieurs octets. C’est le cas de tous les caractères diacritiques (éàçèâê, etc.), qui sont codés en utilisant entre 2 et 4 octets.

Du coup, quand le 10e caractère est un diacritique, et qu’on coupe à 10 octet, on se retrouve en plein milieu d’un caractère et on se retrouve avec une erreur, le fameux « � ».

Et donc, les parseurs XML (du lecteur RSS) renvoient une erreur.

À la louche, je dirais que 1 caractère sur 20~25 est un diacritique en Français. Dit autrement, le N-ième caractère dans une anecdote a 1 chance sur 20 d’être un diacritique et de poser problème. Si le flux RSS contient 20 entrées, on a à peu près sûr que le flux est cassé la totalité du temps.

Il y a une solution à ça : juste dire que l’on ne doit pas couper au N-ième octet, mais au N-ième caractère, en disant au programme qui coupe les anecdotes « attention, certains caractères font plusieurs octets ».
En PHP, on fait ça en utilisant « mb_string » (où MB signifie « multibyte »).

J’en parle là : https://lehollandaisvolant.net/?id=20140424175730
Et pour le SQL : https://lehollandaisvolant.net/?id=20140504183832

La solution est SIMPLE : juste à remplacer une fonction par une autre et c’est bon.

Pourquoi ça m’énerve ?
Parce que ça fait plusieurs fois que je signal ça au site, et rien n’est fait. C’est pas le seul site qui tronque ses posts, mais c’est le seul qui pose problème comme ça.

Encore une fois, ça va être à moi (l’utilisateur) de devoir faire le boulot des webmaster. Y en a marre des incompétences ! Quand c’est pas ça, c’est une erreur d’encondage, ou un problème de format, ou de compression GZip, ou d’URL mal redirigée…

Au final, une simple fonction « récupérer une page web » c’est 5 lignes de code fonctionnelles, auquel on ajoute 5000 lignes pour corriger les erreurs parce que l’éditeur du site est un incompétent.

Dans le même gens, lisez ça : http://sebsauvage.net/wiki/doku.php?id=csv

ÉDIT : bon, finalement je résous ça avec ceci :

$string = iconv("UTF-8", "UTF-8//IGNORE", $string)

Ça prend la chaîne reçue (de la requête) en entrée et tente de la convertir en UTF-8. Si la fonction rencontre des caractères invalides, elle les supprime. La chaîne retournée est donc toujours du UTF-8 valide.

Par contre, visiblement, il y a un problème dans l’implémentation des bibliothèques UTF-8 depuis presque 10 ans et tout le monde s’en bat les steaks : http://php.net/manual/fr/function.iconv.php#108643
Ils conseillent de faire ça, en PHP :

  ini_set('mbstring.substitute_character', "none");
 $text= mb_convert_encoding($text, 'UTF-8', 'UTF-8'); 

Ça convertit de UTF-8 en UTF-8, mais en remplaçant tout ce qui est invalide par une chaîne vide (le "NONE").

Dans les deux cas, ça suggère que l’on possède déjà en entrée une chaîne en UTF-8, même cassée. Pour le moment, sur 165 flux RSS je ne vois pas d’erreurs, mais ça pourrait en poser. Je propose donc ceci :

  ini_set('mbstring.substitute_character', "none");
 $text= mb_convert_encoding($text, 'UTF-8'); 

Comme ça essaye de trouver le bon encodage dans une liste interne au serveur (définissable soi-même avec mb_detect_order()), puis de traduire ça en UTF-8.

Note : conseil lors d’un cambriolage

#17492

Récemment, j’ai aidé des amis (hollandais, proprio d’une maison de vacance en France) qui étaient victime d’un cambriolage en France. Ils ne parle pas bien français, donc c’est moi qui ait fait office d’interprète auprès de la Gendarmerie.

J’ai donc suivi un peu l’affaire et j’ai noté quelques « astuces ».

Déjà, dès que vous constatez ou que vous vous rendez compte qu’un cambriolage a eu lieu : prévenez les forces de l’ordre. Ils vont venir, prendre des photos, relever des empreintes, etc. Ne faites pas comme mes amis, c’est à dire attendre 3 jours et faire le ménage dans la maison…

Ensuite, si vous avez une liste d’objets qui manquent, on vous demandera la marque, le modèle et si vous avez, le numéro de série des objets.
Le numéro de série est la donnée ultime qui permet de savoir si un objet est à vous ou pas. Si les gendarmes font une perquisition chez des bandits, ils récupèrent les objets et ils notent alors les marques / modèle / numéro de série dans un fichier. Si vous faites une déposition, et qu’il trouvent un objet qui correspond, ils vous appellent et savent que c’est à vous (vous ne repartirez pas tout de suite avec vos biens pour autant, car ce sont es pièces à convictions, mais ça sera pour plus tard).

Les numéros de série sont importants, mais personne ne les note… Un conseil : faites le.

Dans le cas de mes amis, ils ont fait une liste, et tout. Un des objets a été identifié grâce à une photo de famille où l’appareil apparaissait, le « made in holland » ayant aussi aidé, mais un numéro de série aurait permis d’être sûr à 100% directement.

Aussi, le cambriolage (en pleine campagne, où il a été volé surtout des appareils en métal, ainsi que TV, lecteur BR, etc.) a été fait par des gens qui avaient rendu visite à mes amis quand ils étaient France en vacances.
Mon amis, n’ayant pas trop confiance, a eu la présence d’esprit de prendre le véhicule des gens en photo et donc leur plaque.

Ce simple geste a permis en 10 minutes à trouver le cambrioleur (déjà très connu des gendarmes) et à identifier une partie des objets : une perquisition avait déjà été fait chez eux et des objets à mes amis étaient alors sous scellés à la Gendarmerie.

Juste cette plaque a donc permis de retrouver des objets volés en moins de 24 heures (déclaration de vol le soir, le lendemain matin ils nous ont appelé et invité à identifier des objets).

***

Pourquoi je raconte tout ça ?
Simplement pour dire que parfois ça ne tient pas à grand chose : noter une plaque prend 10 secondes, mais permet de gagner des mois de travail, d’enquête, d’attente, etc.

Notez aussi les numéros de série des trucs de valeur (ordis, TV, …). Certes, tout ça n’est que du matos et peut être racheté, mais c’est toujours ça de gagné.

Quant aux données (photos, films de vacances…) faites de sauvegardes, par exemple sur des disques durs externe. Et je dis bien DES disques durs. Gardez alors un des disques ailleurs que chez vous : chez vos proches, au bureau…

Aussi, imaginez ce qui arriverait si votre PC (ou votre téléphone) soit volé maintenant, là, tout de suite.
Le voleur peut-il :
– accéder à vos mails ? vos SMS ? vos photos (et ceux de vos amis/famille) ?
– accéder à votre Facebook ?
– accéder à votre compte en banque ?
– savoir où vous habitez ? (s’il a accès à vos emails, et que vous commandez souvent en ligne, il peut lire les emails de conformation de commande et trouver votre adresse, hein !)

Si oui, c’est que ce n’est pas sécurisé.
Sachez que Google (Android) et Appel (iOS) permettent de faire un reset à distance de votre téléphone. D’autres applications le peuvent aussi (s’ils sont paramétrés correctement).

***

Enfin, il n’y a pas que les cambrioleurs. Il peut aussi arriver que la maison brûle (si votre voisin picole un peu durant son barbecue, ça peut dégénérer…), qu’elle soit innondée, etc.

J’insiste sur le fait que l’assurance couvrira probablement le matériel, mais pas l’immatériel : vos photos de vacances, par exemple. Ça prend 15 minutes une fois par mois pour mettre à jour votre backup manuellement et apporter une des sauvegarde au boulot. N’espérez pas gagner 15 minutes quand on peut perdre 5 ans de fichiers…

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

Note : selecteur d’attribut CSS et ::after/::before

#17431

J’en ai peut-être déjà parlé, mais je trouve qu’on n’exploite pas assez certaines perles en CSS.

Par exemple, dans mon lecteur RSS en JS, quand j’ouvre un post, il est marqué comme lu automatiquement.
Dans ma liste de flux, chaque flux est suivi par un bouton qui affiche le nombre d’éléments non lus pour ce site. Chaque flux, dans une liste <li> a un attribut « data-nb-unread » qui contient donc le nombre de posts non lus.
Quand un flux est ouvert, le JS décrémente ce nombre et c’est comme ça qu’un flux est marqué comme lu (il n’y a pas de boucle qui recompte à chaque fois le nombre de posts : le gain de perfs est énorme).

Pour afficher le bouton, plutôt d’ajouter un <span> qui contient le nombre, qu’il faut donc également décrémenter, j’utilise désormais ça :

li[data-nbunread]::after {
    content: attr[data-nb-unread];
}

Ce que ce CSS fait, c’est ajouter un ::after sur chaque <li> (donc pour chaque site) et y placer le contenu de l’attribut « data-nb-unread » du même <li>. Très pratique : le ::after est directement mis à jour par le navigateur quand l’attribut changer.

On peut faire mieux.

Par soucis de clarté, je n’affiche le nombre de flux QUE sur les lignes où ce nombre est différent de 0. Les flux qui n’ont pas de posts non-lus n’ont donc pas de bouton avec « 0 ».

Le code devient :

li:not([data-nb-unread="0"])::after {
	content: '('attr(data-nbrun)')';
}

Ça permet donc d’afficher le bouton sur tous les flux où l’attribut « data-nb-unread » n’est pas égal à 0.

Le sélecteur d’attribut est très puissant et fonctionne un peu comme les regex.
Par exemple, si un lien est en anglais, il peut posséder un attribut « lang » :

<a href="//site.com/page_en_allemand.html" lang="de-de">lien</a>

En CSS, on peut ajouter un petit drapeau allemand :

li:[lang="^=de"])::after {
    content: "";
    background: src(drapeau/allemagne.jpg) no-repeat;
}

Ici le « ^= » signifie « qui débute par … », mais il y en a d’autres (que l’ont peut tous combiner avec le :not() si l’on souhaite.

https://developer.mozilla.org/fr/docs/Web/CSS/attr
https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut

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