Performances Web — David Larlet

#13466

Je suis d’accord : le temps de génération de la page est d’une importance toute relative devant le temps de chargement et d’affichage (rendu) de la page.
(BTW, notez comment le site du lien charge vite : https://larlet.fr/david/stream/2015/ )

Firefox a cette superbe icône de chargement en 2 phases :
– une phase où l’icône de chargement est grise et signifie que Firefox a lancé (ou est en train) la requête
– une phase où l’icône de chargement est orange et signifie que Firefox reçoit actuellement la réponse.

Combien de fois n’est-on pas devant une page web où la page commence à s’afficher et que ça bouge encore dans tous les sens parce qu’il y a des scripts, iframes, feuilles de style ou images qui arrivent derrière ?

Conseil :
– réduisez le nombre de domaines que le navigateur doit contacter afin d’afficher la page (hébergez jQuery et les polices d’écriture chez vous).
– placez le JS et le CSS au bon endroit dans la page (parce que)
– modérez le poids de vos ressources (une police de 400 ko, non ; une image ultra-hd sans compression, non ; des lib JS qui servent à rien, non : chargez-les quand vous les utilisez, pas par défaut).

Avec ça, même si votre page met 1s à être généré (ce qui est énorme), elle s’affichera en un clin d’œil après ça : d’un point de vue utilisateur c’est beaucoup mieux que de recevoir des miettes de pages toutes les 0,3 secondes, mais durant 40 secondes.

Oubliez les chiffres brut un instant et mettez-vous à la place de l’internaute.

Autre ressource : Accélérer vos pages web et celle donnée dans le liens Ludicrously Fast Page Loads - A Guide for Full-Stack Devs.

Select2 VS Datalist

#12865

Usage des Datalists en HTML5.

C’est très utile. Dans BT, je l’utilise notamment pour les tags d’un article/lien : le datalist est généré en PHP lors de la génération de la page : donc pas besoin d’appels Ajax.

J’y ajoute un peu de JS pour ajouter un tag à la liste par la touche entrée. Dans le nouveau thème, ça sera encore plus joli, avec le champ de saisie qui se réduit au fur et à mesure qu’on ajoute des tags. Longtemps que je souhaite faire ça, maintenant cay fait avec CSS3 : http://lehollandaisvolant.net/img/a0/tags.png

Making SVGs Responsive with CSS - Marquetapages Shazen

#10658

Le SVG ouvre des portes nouvelles à l’interaction des images dans les pages web.

Chaque morceau du SVG peut être contrôlé en CSS et JS comme si c’était un élément du DOM.

C’est ce que je fais ici : http://lehollandaisvolant.net/tout/tools/resistor/
Tout y est en SVG + JS (c’est un peu ma seule page contenant du SVG, mais ça m’a permit de découvrir ça).

Ça y est, les pratiques de merde sont là aussi en HTML5… - Le Hollandais Volant

#10530

bon cette fois j’en ai raz le cul de ces zabrutis qui mettent « autocomplete="off" » partout dans les formulaires, sans savoir ce que ça fait ni à quoi ça sert.

J’ai pondu un script Greasemonkey qui met tous les formulaires et champs de formulaire en « autocomplete="on" ».

Voilà :

// ==UserScript==
// @name Autocomplete set on
// @namespace Autocomplet set on
// @description Make all forms to allow autocomplet
// @include *
// @version 1
// @grant none
// ==/UserScript==
var frm = document.getElementsByTagName('form');
for (var i = 0, n = frm.length; i < n; i++) {
frm[i].setAttribute('autocomplete', 'on');
}
var inp = document.getElementsByTagName('input');
for (var i = 0, n = inp.length; i < n; i++) {
if (inp[i].getAttribute('autocomplete') == 'off') {
inp[i].setAttribute('autocomplete', 'on');
}
}



Et putain, tant que j’y suis, voilà pour les connards qui refusent que je puisse augmenter la taille des textarea (en le bloquant EXPRESSÉMENT au niveau du CSS) et pour réactiver la correction orthographique du navigateur :


var txtarea = document.getElementsByTagName('textarea');
for (var i = 0, n = txtarea.length; i < n; i++) {
if (txtarea[i].style.resize == 'none') {
txtarea[i].style.resize = 'both';
}
if (txtarea[i].getAttribute('spellcheck') == false) {
txtarea[i].setAttribute('spellcheck', true);
}
}


Voilà.

C’est moche, c’est court, mais ça marche.

Grrrrrrrrrr. Pas content.

http://lehollandaisvolant.net/?d=2014/07/28/19/15/26-Ca-y-est-les-pratiques-de-merde-sont-la-aussi-en-html5

image - 516x922px

#9543

Une bonne liste de codes pour Android (les numéros en *#*#…).

https://lh4.googleusercontent.com/-3QEbDS4sJH0/U0WIhjE4AlI/AAAAAAAAKUM/4WUBXQSPo2M/w700/Android-Secret-Codes.png

Note : *le

#8930

Je viens de voir « <!-- *le header --> », « <!-- *le Google font --> », etc. dans la source d’une page web.

Je me marre depuis dix minutes :').

#meme

(oui, pardon, l’hôpital c’est où ?)

http://lehollandaisvolant.net/?mode=links&id=20140301132951

Error 500 sur youtube - Nono's Links

#7846

La longueur des lignes et les deux « == » à la fin suggère qu’il s’agit d’un code en BASE64.
Cependant, il y a des « _ » et des « - » qui ne devraient pas être là. Peut-être ils symbolisent des espaces et des fins de lignes…

Quand je passe le code brute dans le décodeur http://lehollandaisvolant.net/tout/tools/base64/
Il me donne une erreur. Quand je prends des petits bouts, du début jusqu’au premier caractère impossible par exemple, ça me le décode, mais uniquement des caractères unicode improbables.