PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

Youtube lent en HTML5 avec Firefox 42+ ?

dimanche 3 janvier 2016 à 16:30
J’avais fait un tuto pour mettre Flash à jour, mais finalement je me suis totalement passé de Flash. Depuis j’utilise les vidéos web en HTML5, quitte à utiliser des codec proprio comme H264. Ça marchait bien… jusqu’à Firefox v42.

Depuis quelques semaines, le lecteur Youtube HTML5 est incroyablement lent dans Firefox : la vidéo marche bien, mais dès que je veux changer le son, mettre en pause, mettre en plein écran ou changer la résolution, alors ça laaague et c’est lent.

La solution :


Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/47.0.2526.73 Chrome/47.0.2526.73 Safari/537.36

Validez, allez sur Youtube et tout est de nouveau super fluide.

Super hein ?

Vous savez ce que fait la manip ci-dessus ?
Elle fait croire à Youtube que vous utilisez Chromium, le navigateur qui sert de base à Google Chrome (et qui est développé par Google aussi).
Pour le dire autrement, Youtube fonctionne bien dans n’importe quel navigateur. Si c’est si lent dans Firefox, c’est juste que Google veut que ce soit lent dans Firefox. Google : vous êtes des enfoirés.


Modifier l’User-Agent de Firefox fonctionne pour Youtube, mais ça risque néanmoins de provoquer des bugs sur d’autres sites. Je conseille donc d’utiliser une extension comme UA Control qui va pouvoir dire à Firefox de s’identifier comme Chrome(ium) uniquement sur Youtube et normalement partout ailleurs.
Pour vérifier votre User-Agent et voir si l’extension fonctionne, allez sur mon détecteur de navigateur.


ÉDIT : apparemment, je suis ne suis pas le seul chez qui cette manip fonctionne (le post date d’hier).

ÉDIT : je continue mes investigations. J’utilise aussi le module uBlock Origin, pour bloquer les pub et les scripts tiers. Chose intéressante : si je bloque tous les scripts du domaine "Google.com" sur la page youtube, alors ça marche. Plus besoin de changer l’UA.
Il s’agit de bloquer ce script en particulier :
https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.aCET_C1s-Ek.O/m=card,gapi_iframes/rt=j/sv=1/d=1/ed=1/am=AAQ/rs=AItRSTOKextu3QAZfV0s_SKuW3vYp-SZuA/cb=gapi.loaded_0
C’est ce script qui fait un test sur la chaîne "Gecko", "Webkit" et d’autres — autrement dit, la détection de navigateur. Bloquez ce script et Youtube marche nickel.

Youtube lent en HTML5 avec Firefox 42+ ?

dimanche 3 janvier 2016 à 16:30
J’avais fait un tuto pour mettre Flash à jour, mais finalement je me suis totalement passé de Flash. Depuis j’utilise les vidéos web en HTML5, quitte à utiliser des codec proprio comme H264. Ça marchait bien… jusqu’à Firefox v42.

Depuis quelques semaines, le lecteur Youtube HTML5 est incroyablement lent dans Firefox : la vidéo marche bien, mais dès que je veux changer le son, mettre en pause, mettre en plein écran ou changer la résolution, alors ça laaague et c’est lent.

La solution :


Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/47.0.2526.73 Chrome/47.0.2526.73 Safari/537.36

Validez, allez sur Youtube et tout est de nouveau super fluide.

Super hein ?

Vous savez ce que fait la manip ci-dessus ?
Elle fait croire à Youtube que vous utilisez Chromium, le navigateur qui sert de base à Google Chrome (et qui est développé par Google aussi).
Pour le dire autrement, Youtube fonctionne bien dans n’importe quel navigateur. Si c’est si lent dans Firefox, c’est juste que Google veut que ce soit lent dans Firefox. Google : vous êtes des enfoirés.


Modifier l’User-Agent de Firefox fonctionne pour Youtube, mais ça risque néanmoins de provoquer des bugs sur d’autres sites. Je conseille donc d’utiliser une extension comme UA Control qui va pouvoir dire à Firefox de s’identifier comme Chrome(ium) uniquement sur Youtube et normalement partout ailleurs.
Pour vérifier votre User-Agent et voir si l’extension fonctionne, allez sur mon détecteur de navigateur.


ÉDIT : apparemment, je suis ne suis pas le seul chez qui cette manip fonctionne (le post date d’hier).

ÉDIT : je continue mes investigations. J’utilise aussi le module uBlock Origin, pour bloquer les pub et les scripts tiers. Chose intéressante : si je bloque tous les scripts du domaine "Google.com" sur la page youtube, alors ça marche. Plus besoin de changer l’UA.
Il s’agit de bloquer ce script en particulier :
https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.aCET_C1s-Ek.O/m=card,gapi_iframes/rt=j/sv=1/d=1/ed=1/am=AAQ/rs=AItRSTOKextu3QAZfV0s_SKuW3vYp-SZuA/cb=gapi.loaded_0
C’est ce script qui fait un test sur la chaîne "Gecko", "Webkit" et d’autres — autrement dit, la détection de navigateur. Bloquez ce script et Youtube marche nickel.

[CSS] Utiliser des couleurs relatives

mardi 15 décembre 2015 à 16:53
Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

[CSS] Utiliser des couleurs relatives

mardi 15 décembre 2015 à 16:53
Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

Les risques du Wifi gratuit non-sécurisé

dimanche 6 décembre 2015 à 12:11
Il peut être pratique d’avoir un réseau Wifi ouvert à proximité. On en trouve d’ailleurs de plus en plus : gares, cafés, terrasses, centres commerciaux…
C’est cool…

… et risqué…
… sur plusieurs plans.


Déjà, qui dit « réseau Wifi ouvert » dit « réseau Wifi non sécurisé », et donc pas non plus chiffré : du coup, toutes vos données transitent en clair dans les air. Et croyez-moi, capter tout ce qui transite en Wifi est très simple : certains programmes, y compris sur mobile, le font automatiquement.
Une fois captées, les données peuvent être exploitées : on peut y rechercher les mots de passe, les adresses emails, les URL visités et même les photos partagées ou les fichiers téléchargés.

Heureusement, de plus en plus de sites web se mettent au HTTPS, c’est à dire qu’ils incluent un protocole de chiffrement directement entre le navigateur et le site. Ceci empêche une personne de lire vos mots de passes ou les URL visitées, même si le réseau Wifi n’est pas chiffré.

Sauf que j’ai dit que les sites web se mettaient au HTTPS. Pas forcément les applications : un grand nombre d’applications sont mal sécurisées et toutes les données sont toujours envoyées en clair. Dans le pire des cas, un pirate peut même modifier les requêtes qu’il capte et vous renvoyer une réponse également modifié. Vous pensez alors télécharger une mise à jour pour votre téléphone alors qu’en fait vous téléchargez une application malveillante.

Ceci est le premier problème des réseaux Wifi ouverts : la sécurité des données.


Ensuite, un autre problème c’est la gratuité : « si c’est gratuit, vous-êtes le produit », vous vous souvenez ?
Vous pensez peut-être que le centre commercial ou le restaurant qui met en place le réseau Wifi se fiche que vous visitiez telle ou telle URL, et bien détrompez-vous : aussi bien le site visité que le propriétaire de la borne Wifi trouvent leur comptes dans ces informations, qui sont très utiles pour les mesures d’audiences et de préférence.

N’oubliez pas que votre téléphone possède une adresse unique (adresse Mac) et que le propriétaire du routeur peut ainsi savoir exactement par quels réseaux Wifi vous êtes passés et donc savoir quels restaurants vous préférez et dans quels centre commerciaux vous faites vos courses.
Pour le propriétaire du routeur, qui peut aussi afficher de la publicité sur ses pages de connexion, ceci est une aubaine : la publicité fonctionnera très bien s’il affiche des promotions pour votre restaurant ou votre centre commercial en particulier. Alors oui, vous direz que ça vous fait des économies… Mais réfléchissez-y : avez-vous vraiment prévu d’aller dépenser 50€ au restau avant la date d’expiration du code promo ? Pas sûr. Au final vous dépensez d’avantage.
Et bien sachez que c’est de cette façon que fonctionne le business des réseaux Wifi gratuit et ouvert. L’avantage du réseau ouvert ici c’est que tous les téléphones qui passent à proximité se connectent automatiquement et ça fait donc d’autant plus de données captées sur d’autant plus de clients potentiels (un passant qui passe tous les jours devant un restaurant sera plus susceptible de s’y arrêter pour manger s’il se retrouvait avec un code promo trouvé sur un site web).

C’est là le second problème des réseaux Wifi ouverts : l’intrusion dans la vie privée des gens pour les besoins de la publicité.

Enfin, et beaucoup plus fourbe : certains magasins mettent des points d’accès Wifi un peu partout. C’est discret, ça semble utile pour vous mais ça permet de vous traquer quand même. Le magasin sait alors exactement où vous vous trouvez, devant quel produit vous hésitez et sait comment vous traversez le magasin. Dans un but d’optimisation des ventes et le placement des produits sur les rayons, c’est une aubaine. Et en plus vous les remerciez pour le Wifi.

Mais rassurez-vous, si le tracking par Wifi est une réalité, de plus en plus de magasins passent désormais par la reconnaissance faciale avec des caméras planqués dans les rayons, pour trouver qui achète quoi, quand et où.

Et ça, c’est le 3e problème des réseaux Wifi ouverts : le tracking des gens.


Il y a évidemment des solutions simples à tout ça.

Si vous voulez utiliser un réseau Wifi quand vous n’êtes pas chez vous, privilégiez les hotspot des FAI (comme FreeWifi pour les abonnés Free) : au moins ceux-ci sont chiffrés et vous protègent des intrusions.

Pour les données, les mots de passes qui transitent et vos liens visités qui fuitent, utilisez un VPN sur votre téléphone : de cette façon toutes les données sont chiffrées à partir de votre téléphone jusqu’au serveur VPN. Le propriétaire du réseau Wifi (ou un pirate) ne peut pas capter vos données.

Concernant le tracking et les données qui fuitent directement de votre téléphone sans l’aide d’une borne Wifi, il suffit de couper les communications quand vous ne vous en servez pas. De façon générale même, je vous conseille de couper le Wifi, le GPS et le Bluetooth quand vous ne vous en servez pas. En plus de protéger votre vie privée, ça sera bon pour l’autonomie de la batterie (très bon, même).

(Merci Nicolas, alias Ede42 pour l’idée d’article)