Get best of the week

Peut-être qu'on devrait se calmer un peu avec JavaScript?

J'ai un problème de navigateur très étrange . Les scripts de certaines pages ne fonctionnent tout simplement qu'après environ 20 secondes.

Quoi que vous alliez offrir - oui, j'y ai déjà pensé, et non, cela n'a pas aidé. Je parle de ce pas dans l'espoir que quelqu'un demandera avec le débogage, mais parce que cet incident m'a fait vivement au courant de certains, comment dire ... bizarreries ... développements à l'avant.

(En fait, n'essayez même pas de diagnostiquer le problème par une seule phrase, non , j'ai entendu et essayé presque tout ce que vous pouvez imaginer).

L'article a été écrit en mars 2016, certains exemples sont obsolètes - env. trans.

Pages inutiles


Regardez, voici une capture d'écran du tweet. Dans ce document, les parties qui ne fonctionnent pas sans JavaScript sont surlignées en rouge . Je le sais parce que, comme auparavant, j'ai regardé la page pour laquelle 20 secondes la plupart du code n'a pas encore fonctionné.



Quelque chose que je peux comprendre. Par exemple, le bouton «Répondre» élargit le champ de texte en bas et le met en évidence. Cela ne peut se faire sans certains scripts. Le bouton ...ouvre un menu contextuel, ce qui est douteux , car vous pouvez également le reproduire en utilisant CSS. De même, un bouton avec un cœur effectue une action en arrière-plan, ce qui est également douteuxcar il peut être lu avec le chargement de la page complète. Mais ce sont des changements non triviaux qui fonctionneront de manière complètement différente avec et sans scripts.

D'un autre côté ...

Est-ce que ce bouton × se trouve dans le coin supérieur droit et tout l'espace vide autour? Leur seule fonction est de vous envoyer sur mon profil, visible derrière le tweet. Il pourrait aussi bien s'agir de liens réguliers, comme des flèches gauche et droite pour la navigation. Mais cela se fait différemment, donc cela ne fonctionne pas sans JavaScript.

Ou un petit bouton avec des graphiques, pour l'analyse? Sa seule fonction est de charger une autre page dans une fenêtre pop-up artificielle avec un cadre intégré. Il pourrait y avoir un lien régulier qui se transforme en popup en utilisant un script. Mais cela se fait différemment, donc cela ne fonctionne pas sans JavaScript.

Champ de texte? Bien sûr, ce n'est qu'une zone de texte. Mais si vous cliquez dessus avant d'exécuter JavaScript, une légende maladroite restera dans le champ Reply to @eevee. Et lorsque le script est toujours lancé, il efface tout ce que vous avez tapé et l'insère à nouveau Reply to @eevee, seulement maintenant @eeveeil est écrit en lettres bleues, pas en gris.

La même chose se produit sur la page de recherche Twitter, ce qui est très étrange car il n'y a pas de texte dans le champ de recherche! Si vous commencez à taper avant la fin des scripts, ils effaceront simplement tout ce que vous avez tapé. Pas même pour insérer votre texte d'espace réservé ou appliquer un style personnalisé. Sans raison apparente, juste comme ça.

Étant donné que NoScript fonctionne pour moi, je remarque souvent d'étranges décisions de conception sur les sites que je visite pour la première fois. Bien sûr, les pages blanches vierges sont monnaie courante. Pendant un certain temps, les articles du site Web Time se sont bien chargés sans script, mais n'ont pas défilé - une propriété a été utilisée pour la page overflow: hidden;pour des raisons que je ne peux pas comprendre. Les articles Vox se chargent également normalement, sauf que devant chaque image, un espace vide est affiché sur toute la hauteur de l'écran. Certains sites d'entreprise particulièrement mauvais sont des blocs de texte qui se chevauchent en désordre. Je pense qu'ils ont abandonné CSS et écrit la mise en page en JavaScript.

Il n'y a pas de bonnes raisons à cela. Ce ne sont pas des applications interactives avancées, ce ne sont que des pages de texte. Nous les avions l'habitude de les imprimer sur papier, mais dès que nous sommes passés aux technologies de l'information, il est devenu impossible de mettre des mots à l'écran sans exécuter quelques mégaoctets de déchets pour l'exécution?

J'entends directement comment ils m'appellent luddite, car je n'accepte pas d'entourer cinq paragraphes de texte statique de milliers de lignes de scripts. Eh bien, permettez-moi de répondre à l'avance: allez aux bains. Je pense que le Web et les pages interactives sont formidables, je constate de grands progrès au cours de la dernière décennie. C'est tout simplement génial que le Web ait initialement pris en charge les paramètres utilisateur, et je peux préconfigurer les autorisations pour chaque site qu'il peut exécuter sur mon ordinateur et ce qui ne peut pas.

Mais ce qui n'est pas très cool, c'est un groupe de spécialistes hautement rémunérés et hautement qualifiés, dont chacun a installé Chrome sur le dernier modèle Mac Pro, qui travaillent au bureau à une distance maximale d'un kilomètre de chaque serveur qu'ils visitent. Et maintenant, ces gars travaillent, puis ils se tournent et gloussent vers tous ceux qui n'ont pas une telle configuration. Veuillez noter que l'une des conditions suivantes interférera avec votre JavaScript:

  • Quelqu'un sur un ordinateur lent.
  • Quelqu'un sur une connexion lente.
  • Quelqu'un au téléphone, c'est-à-dire sur un ordinateur lent avec une connexion lente.
  • Quelqu'un est coincé avec un ancien navigateur sur un ordinateur qu'il ne contrôle pas - au travail, à l'école, à la bibliothèque, etc.
  • Quelqu'un essaie d'écrire un petit programme qui interagit avec votre site sans API.
  • - , .
  • - — Google .
  • - Linux , , Elinks.
  • - , .
  • - NoScript . , , .
  • - NoScript , , . , .
  • , , .
  • CDN .
  • CDN IPv6, (, , ). - IPv6, , JS .
  • , JavaScript .
  • , . , .
  • , , .

Je ne dis pas que les applications Web interactives telles que Google Maps devraient être effacées de la surface de la Terre, bien que même pour Google Maps, il y ait eu une sauvegarde sans scripts pendant de nombreuses années, jusqu'à la version actuelle de WebGL! Je dis que nous avons désactivé ailleurs lorsque les fonctions de base du HTML normal ont soudainement cessé de fonctionner sans JavaScript. À savoir, sans 40 mégaoctets de JavaScript, selon about:memory - ce sont des données en mémoire, pas la taille du téléchargement. Cela peut ne pas sembler beaucoup (pour une page qui affiche 140 caractères?), Mais mon navigateur accumule souvent une douzaine d'onglets Twitter ouverts, soit un demi-gigaoctet de mémoire , alloué un maximum de 6 Ko de texte.

L'invention de la roue carrée


Vous devez vraiment essayer d'obtenir un résultat aussi déplorable. Je veux dire, si vous avez besoin d'un lien, vous écrivez juste <a href="somewhere">label</a>et vous avez terminé. Mais si vous commencez à inventer cela en utilisant JavaScript, vous avez besoin d'un gestionnaire de clics, et cela devrait fonctionner au bon moment afin que vous sachiez que le lien existe vraiment, et vous devrez peut-être faire un travail pour ajouter des gestionnaires de clics aux faux liens, ce qui ajoute Ajax. Droite?

Non! Vous obtiendrez seulement une imitation pâle et merdique d'un lien. Considérez toutes les fonctions des liens natifs:

  • Je peux suivre le lien.
  • Je peux ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre en utilisant la combinaison des touches ctrl, Maj et la molette de la souris (bouton central).
  • Je peux copier l'adresse du lien et la coller quelque part ou l'ouvrir dans un autre navigateur, ou autre chose.
  • ' Firefox .
  •  — Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
  • , .
  • .
  • , , .

Le fil conducteur ici est que la balise <a href=...> signifie quelque chose . Il dit: "C'est le chemin que vous pouvez emprunter." Des tonnes d'outils s'appuient sur ces informations. Si vous le remplacez par <div onclick>, alors oui, cliquer sur le div fera quelque chose, mais le point entier est complètement perdu. Inversement, si vous l'utilisez <a href="javascript:void(0);">, vous mentez à ces outils; vous donnez du sens, mais donnez des informations sans signification.

C'est ce que les gens veulent dire quand ils parlent de «sémantique» - qu'il y a des informations utiles à collecter. Si vous commencez à inventer la similitude des liens, l'analyse de cette construction synthétique nécessitera soit une exécution spéculative d'une grande quantité de code arbitraire, soit une écriture extrêmementun analyseur statique intelligent, ou tout simplement la formation d'un programmeur humain. Déclarer des intentions est une méthode beaucoup plus puissante et flexible que de simplement faire le travail, car dans le premier cas, les outils universels font des choses utiles presque trivialement.

Un autre bon exemple est les formulaires déroulants <select>. Certains développeurs créent parfois complètement à partir de zéro leurs remplaçants à partir de widgets non natifs. Probablement pour les rendre plus belles? Objectif noble. Mais saviez-vous que dans les formulaires déroulants natifs, lorsque vous commencez à taper, la première position appropriée est automatiquement sélectionnée? De toute évidence, dans la plupart des implémentations alternatives, cela n'est pas pris en charge. Visuellement, ils sont meilleurs (ou tout simplement différents), mais fonctionnellement bien pire pour les longues listes.

Une zone de texte Twitter maison n'est pas du tout une zone de texte, mais contenteditable <div>. Ici contenteditable, cela signifie que la plupart des contrôles natifs fonctionnent assez bien, mais cet objet présente de temps en temps un comportement étrange, par exemple, déplace le curseur au début du texte lorsque je passe d'un onglet à l'autre. Ou parfois le script a quelques problèmes avec ma vitesse de frappe et il commence à remarquer. La seule raison pour laquelle même le mettre à la place de la <textarea> habituelle, semble-t-il, est la teinte @handleset les liens en bleu? Une zone de texte faite maison ne raccourcit pas les liens ou ne remplace pas les emojis Twitter, donc ce n'est pas vraiment un aperçu de ce à quoi ressemblera votre tweet.

Savez-vous que certains sites ont des raccourcis clavier? Bonne droite? Mais en fait, /c'est un raccourci clavier intégré à Firefox qui ouvre la barre de recherche rapide. De toute évidence, personne sur Twitter ou GitHub, ou BitBucket, ou Tumblr, ou dans une douzaine d'autres endroits ne le sait, car ils ont tous attribué ce focus clé à leur propre barre de recherche sur le site. Ce qui est complètement différent de la recherche sur la page actuelle (à l'honneur de GitHub, ils l'ont corrigé quand je me suis plaint sur Twitter). Pendant longtemps, Google+ a désactivé la barre d'espace pour faire défiler vers le bas. Pourquoi personne dans ces grandes entreprises ne s'est-il arrêté et a-t-il dit: "Hé, attendez, c'est une fonction qui fonctionne dans le navigateur, et nous la cassons"? Les développeurs Web utilisent-ils eux-mêmes des navigateurs?

Il a été rappelé que chaque page Twitter absorbe silencieusement les événements du clavier et les clics de souris jusqu'à ce que tous les scripts fonctionnent. Cela signifie que je ne peux même pas changer l'onglet avant d'attendre ces 20 secondes pour le chargement de la page: ctrl-t, ctrl-w, ctrl-tab, ctrl-pgup et ctrl-pgdn - tous les événements du clavier sont complètement absorbés. Voici comment fonctionne un mécanisme appelé «file d'attente d'action rapide». Il semble que cette file d'attente devrait lire les événements à la fin du chargement de la page, mais (a) vous ne pouvez pas utiliser les touches de raccourci dans le navigateur; (b) il semble que cela ne fonctionne toujours pas. Pour résoudre ce problème, j'ai dû écrire un script personnalisé pour bloquer la balise de script avec un identifiant spécifique.

Je ne pense pas que je suis très difficile. Ce sont les fonctions de base du navigateur, et vous les violez, souvent sans bonne raison. Je ne m'attends pas à ce que vous fassiez fonctionner Google Docs sans JavaScript. J'espère juste que vous ne casserez pas mon putain de clavier.

Laisse-moi te donner un conseil.


Acceptez le fait que, pour certaines personnes, votre JavaScript ne fonctionne pas. Pensez à ce que cela signifie. Lorsque vous avez le choix, choisissez toujours les mécanismes HTML existants. Peut-être qu'une fois par an, votre équipe de développement désactivera JavaScript et essaiera d'utiliser le site. Commence à pleurer.

Si vous allez redéfinir ou repenser ce qui existe déjà, étudiez-le d'abord. Vous ne pouvez pas créer un bon remplacement sans comprendre l'original. Demande autour de toi. Enfer, essayez simplement de cliquer /sur le navigateur avant de le faire avec le raccourci clavier de votre site Web.

N'oubliez pas qu'avec tout le pouvoir qu'Internet vous donne, le contrôle est finalement entre les mains de l'utilisateur. Internet n'est pas une console de jeu; agissez en conséquence. Créez des modules. Envisagez à l'avance les paramètres possibles ou communs. Peut-être quelque chose à réduire un peu lorsque vous atteignez 40 mégaoctets de scripts sur la page.

Remercier.

More articles:


All Articles