Le Hollandais Volant

Plein de liens pour le JS, HTML et des libs. Miam !

Ma version améliorée de http://whatcolourisit.scn9a.org/ :)

Enjoy.

(Je me demande s’il est possible d’en faire un écran de veille. Je trouve le concept tellement sympa.)

Une fonction qui tient en une seule ligne, pour savoir s’il faut mieux utiliser un texte noir ou un texte blanc, en fonction de la couleur de fond et dans un but d’obtenir le meilleur contraste.

J’en ai eu besoin quand j’ai voulu refaire le What color is it : tout en étalant les valeurs sur tout le domaine des couleurs, donc de 0 à 255 au lieu de 0 à 60.

Le résultat c’est que si le site original reste dans le sombre, mon script fait dans le sombre et le clair tout au long de la journée, et au bout d’un moment, un texte en blanc ne se voit plus (à 23h59:59, par exemple : la page est blanche et texte blanc est invisible).

Il me faut donc un calculateur de contraste.

La ligne de contracte "50%" calcul la clarté d’une couleur. L’autre fonction, dite YIQ est plus précise et tient compte de la particularité de l’œil à être plus sensible à certaines couleurs plutôt qu’à d’autres, et d’être plus sensible à la luminosité qu’à la couleur elle-même. YIQ est utilisé dans les téléviseurs.

Les liens magnet sont utilisés en P2P pour se passer des fichiers torrents. Une liste de trackers est directement incluse dans le lien.

Parfois cette liste est courte voire composée d’un seul tracker, et si ce tracker est mort (comme celui de TPB actuellement ou celui de OpenBitTorrent récemment), le torrent ne sera jamais téléchargé.

J’ai pondu ce script GreaseMonkey qui va chercher les liens "magnet" de la page et y ajouter une liste de trackers. Comme ça, vous n’aurez plus à le faire vous-même dans votre client bittorrent.

// ==UserScript==

// @name        Add all trackers on magnet links

// @namespace   Trackes

// @include     *

// @version     1

// @grant       none

// ==/UserScript==



var trackers = [

  "udp://tracker.openbittorrent.com:80/announce",

  "udp://tracker.publicbt.com:80/announce",

  "udp://open.demonii.com:1337/announce",

  "udp://tracker.istole.it:80/announce",

  "udp://tracker.prq.to/announce" 

];



var links = document.getElementsByTagName('a');

for (var i = 0, n = links.length; i < n; i++) {

  if (links[i].href.match(/^magnet:\?xt=/i) != null) {

    links[i].href = links[i].href+"&tr="+trackers.join("&tr=");

  }

}

Pour la liste des trackers, j’ai repris ce qu’il y avait ici : http://sebsauvage.net/links/?tLJ-fg

Oh, sympa, les astuces pour supprimer des éléments d’une page en HTML.

J’aime particulièrement celle-ci : http://jsbin.com/ezUnIFu/10/edit?html,css,js,output

Ce que ça fait, c’est que ça ajoute une classe CSS au nœud HTML à supprimer. Le CSS contient une animation. En JS on détecte l’événement "animationend" (avec les event-listeners) qui correspond à la fin de l’animation.
À la fin de l’animation, on supprime le nœud.

Ça éviter de voir le nœud se supprimer sans aucune transition. C’est remarquable.

Le planquer et l’exécuter…

Oops.

// ==UserScript==

// @name        Youtube Parameters Stripper

// @namespace   lehollandaisvolant.net

// @description Removes ?feature* parametes on Youtube

// @include     http://*.youtube.com/watch*

// @include     https://*.youtube.com/watch*

// @version     1

// ==/UserScript==



(function() {

		var sp = window.location.search.replace(/^\?/,'').split('&'), sk = [];



		for(var i =0; i < sp.length; i++) {

			if(!/^(?:feature|annotation_id|src_vid|NR)$/i.test(sp[i].split('=')[0])) {

				sk.push(sp[i]);

			}

		}



		var newurl = window.location.protocol + '//' + window.location.host

							+ window.location.pathname + (sk.length?'?'+sk.join('&'):'')

							+ window.location.hash;



		if(newurl != window.location.href) {

			(!!(window.history && window.history.pushState)

				?window.history.pushState(null,null, newurl)

				:window.location.replace(newurl)

			);

		}

})();

C’est un début~

Parce que bon : http://lehollandaisvolant.net/?d=2014/05/16/15/42/53-tout-ce-quil-est-possible-de-faire-en-jquery-et-pas-en-vanilla-javascript

(via)

jQuery est lent.

Bah, c’est pas pas une nouveauté, si ?

Btw, mon lecteur RSS fait tout dans le navigateur sans jQuery (ok, il ne fait pas autant que les interfaces style Gmail, mais pour traiter 200ko de Json en JS, je trouve le native vachement rapide et c’est pas si compliqué à faire)

Drôle d’idée…

voir ici : http://xeoncross.github.io/jr/about.html et le code source.

Ceci aurait pu être une très bonne astuce, mais ça marche pas !

Dans mon lecteur RSS lors de la mise à jour des flux, je veux que le navigateur regarde à quel flux il en est : j’ai 160 flux et la mise à jour, même en réduisant le timeout à 1 seconde (en PHP), ça prend alors 160 secondes, soit 2min40 : l’utilisateur doit savoir combien de temps ça va durer, sinon il risque de croire que la page a plantée, et il recharge la page et re-clique dessus et ça c’est mal au serveur…

Du coup, je fais une requête en Ajax pour récupérer uniquement le nombre de flux déjà traités, sous la forme « 42/160 », toutes les 5 secondes (le nombre est mis dans un fichier à part, pour éviter que PHP se mette en route avec des echo() ou des variables sessions très lourds).
Autrement dit, ça ne sont que 6 ou 7 octets qui m’intéressent.

Problème : le navigateur envoie des entêtes HTTP… qui sont lourde (referer, user-agent, accept-encoding…) le tout dépasse 1000 voire 2000 octets… C’est un peu bête.

Ajax permet de modifier les entêtes, mais certaines sont impossibles à réduire à une chaîne vide ou même à modifie (osef du user-agent sur ces requêtes Ajax !!)

Du coup tant pis pour les headers…

(Oui, je sais que le chargement d’une page n’est pas sale, mais si ça dure 5 minutes, l’utilisateur doit en être informé…)

Tiens, je ne connaissais pas ça (après, le JS c’est pas mon fort) : el.classList retourne les classes du nœud DOM "el".

Il permet d’en retirer un en particulier (el.classList.remove('classe')) ou d’en ajouter. Il y a aussi le .toogle('class'), qui ajoute la classe si elle n’y est pas ou la supprime si elle y est. C’est mieux que de passer par des regex dans le className.

Ceci dit, c’est pas officiel encore (même si ça marche partout à l’exception de quelques navigateurs mobile).

La semaine dernière j’avais dit que BT contiendra un lecteur RSS de mon cru.

Je suis en train expérimenter un truc pour diminuer les charges serveur (PHP / SQL / réseau). J’avais déjà ça dans la gestion des images, et c’est assez performant.
Il s’agit de mettre la data sur le serveur, mais de donner au navigateur le soin de trier les données.

La data est envoyée au client dans le code source (en JSON ici) et c’est le navigateur qui traite tout JS.
Si on dispose d’un serveur un peu faible, ça peut être un gros avantage : ça libère des ressources, pas seulement pour vous, mais pour *tous* les visiteurs : la puissance de calcul est alors prise chez le client, pas le serveur.

Et en plus, il n’y a pas de transfert réseau permanents (sur ma liste de flux, par exemple, que je liste les entrées RSS de tel ou tel flux, le tri se fera côté internaute et non pas côté serveur : plus de transferts et de chargement de page !).
Après, faudra que j’invente un truc pour les mise à jour et les articles lus/non lus, mais j’ai déjà des idées (comme des hit très légers, ou des caches listant les 10 dernières actions du client, qui sont envoyés par groupe au serveur).

Bien-sûr, ça a ses inconvénients, comme une page initiale plus chargée : toute la data est envoyée (mais si on utilise la compression Gzip, c’est finalement plus léger : plus de données = théoriquement meilleur ratio de compression), ou un affichage plus lent sur des smartphones (mais pas tant que ça : sur mon Cink Five, ça passe nickel).

Si je mets ça en place, c’est en voulant éviter des choses que je retrouve dans les autres lecteurs RSS en PHP, à savoir :
- les rechargement de pages à chaque action
- les accès réseau trop nombreux
- le serveur qui croule sur les calcul

Oh et ça marche aussi dans IE 8 !
Ah non, ça c’était une blague… Pardon.

Un bout de code pour avoir une fonction date crédible dans JavaScript, et par exemple pouvoir faire date.format('YmdHis', timestamp), au lieu d’avoir à traîner les getSeconds() getFullYear()…

Transformer un menu <ul> en menu déroulant pour petits écrans.

(il a besoin de jQuery par contre, mais le code fait 800 octet)