Tengo un problema de navegador muy extraño . Los scripts en algunas páginas simplemente no funcionan hasta que pasan unos 20 segundos.

Lo que sea que ibas a ofrecer, sí, ya lo pensé, y no, no ayudó. Hablo sobre esto no con la esperanza de que alguien te lo cuente con depuración, sino porque este incidente me hizo muy consciente de algunos, cómo decir ... peculiaridades ... desarrollos en el frente.

(De hecho, ni siquiera intentes diagnosticar el problema con una oración, no , escuché e intenté casi todo lo que puedas imaginar).

El artículo fue escrito en marzo de 2016, algunos ejemplos están desactualizados - aprox. trans.

Páginas inútiles

Mira, aquí hay una captura de pantalla del tweet. En él, las partes que no funcionan sin JavaScript se resaltan en rojo . Lo sé porque, como antes, he estado mirando la página durante la cual 20 segundos la mayoría del código aún no ha funcionado.

Algo que puedo entender. Por ejemplo, el botón "Responder" expande el campo de texto en la parte inferior y lo enfoca. Esto no se puede hacer sin algunos scripts. El botón ...abre un menú emergente, lo cual es dudoso , ya que también puede reproducirlo usando CSS. Del mismo modo, un botón con un corazón realiza una acción en segundo plano, lo que también es dudoso.ya que se puede reproducir con carga de página completa. Pero estos son cambios no triviales que funcionarán de formas completamente diferentes con y sin scripts.

Por otro lado ...

¿Está este botón × en la esquina superior derecha y todo el espacio circundante vacío? Su única función es enviarte a mi perfil, que está visible detrás del tweet. También podrían ser enlaces regulares, como flechas izquierda y derecha para la navegación. Pero esto se hace de manera diferente, por lo que no funciona sin JavaScript.

¿O un pequeño botón con gráficos, para análisis? Su única función es cargar otra página en una ventana emergente artificial con un marco incorporado. Podría haber un enlace regular que se convierta en una ventana emergente usando un script. Pero esto se hace de manera diferente, por lo que no funciona sin JavaScript.

¿Campo de texto? Por supuesto, esto es solo un cuadro de texto. Pero si hace clic en él antes de ejecutar JavaScript, un subtítulo torpe permanecerá en el campo Reply to @eevee. Y cuando el script aún se inicia, borra todo lo que escribió y lo inserta nuevamente Reply to @eevee, solo que ahora está @eeveeescrito en letras azules, no en grises.

¡Lo mismo sucede en la página de búsqueda de Twitter, lo cual es muy extraño porque no hay texto en el campo de búsqueda! Si comienza a escribir antes de que finalicen las secuencias de comandos, simplemente borrarán todo lo que escribió. Ni siquiera para insertar el texto del marcador de posición o aplicar un estilo personalizado. Sin razón aparente, solo así.

Como NoScript funciona para mí, a menudo noto decisiones de diseño extrañas en los sitios que visito por primera vez. Por supuesto, las páginas blancas en blanco son comunes. Durante bastante tiempo, los artículos en el sitio web de Time se cargaron bien sin un script, pero simplemente no se desplazaron: se usó una propiedad para la página overflow: hidden;por razones que no puedo entender. Los artículos de Vox también se cargan normalmente, excepto que frente a cada imagen, se muestra un espacio en blanco a la altura total de la pantalla. Algunos sitios corporativos particularmente malos son bloques de texto superpuestos desordenados. Creo que abandonaron CSS y escribieron el diseño en JavaScript.

No hay buenas razones para esto. Estas no son aplicaciones interactivas avanzadas; son solo páginas de texto. Solíamos imprimirlos en papel, pero tan pronto como cambiamos a la tecnología de la información, se hizo imposible poner palabras en la pantalla sin ejecutar unos pocos megabytes de basura para la ejecución.

Escucho directamente cómo me llaman ludita, porque no estoy de acuerdo en rodear cinco párrafos de texto estático con miles de líneas de guiones. Bueno, déjame responder por adelantado: ve a la casa de baños. Creo que las páginas web e interactivas son geniales, veo un gran progreso en la última década. Es simplemente estupendo que la web inicialmente admitiera la configuración del usuario, y puedo preconfigurar los permisos para cada sitio que se puede ejecutar en mi computadora y lo que no.

Pero lo que no es muy bueno es un grupo de especialistas altamente remunerados y altamente calificados, cada uno de los cuales tiene Chrome instalado en el último modelo de Mac Pro, que trabajan en la oficina a una distancia de no más de un kilómetro de cada servidor que visitan. Y ahora estos muchachos están trabajando, y luego se vuelven y se ríen de todos los que no tienen esa configuración. Tenga en cuenta que cualquiera de las siguientes condiciones interferirá con su JavaScript:

Alguien en una computadora lenta.
Alguien con una conexión lenta.
Alguien en el teléfono, es decir, en una computadora lenta con una conexión lenta.
Alguien está atascado con un navegador antiguo en una computadora que no controla: en el trabajo, en la escuela, en la biblioteca, etc.
Alguien está intentando escribir un pequeño programa que interactúa con su sitio que no tiene una API.
- , .
- — Google .
- Linux , , Elinks.
- , .
- NoScript . , , .
- NoScript , , . , .
, , .
CDN .
CDN IPv6, (, , ). - IPv6, , JS .
, JavaScript .
, . , .
, , .

No digo que las aplicaciones web interactivas, como Google Maps, deban borrarse de la faz de la Tierra, aunque incluso para Google Maps hubo una copia de seguridad sin scripts durante muchos años, ¡hasta la versión actual de WebGL! Digo que apagamos en otro lugar cuando las funciones básicas del HTML normal de repente dejaron de funcionar sin JavaScript. Es decir, sin 40 megabytes de JavaScript, según about:memory : estos son datos en la memoria, no el tamaño de la descarga. Esto puede no parecer mucho (¿para una página que muestra 140 caracteres?), Pero mi navegador a menudo acumula una docena de pestañas abiertas de Twitter, es decir, medio gigabyte de memoria , con un máximo de 6 KB de texto asignado.

La invención de la rueda cuadrada

Realmente necesitas tratar de lograr un resultado tan deplorable. Quiero decir, si necesitas un enlace, solo escribe <a href="somewhere">label</a>, y listo. Pero si comienza a inventar esto usando JavaScript, necesita un controlador de clics, y debería funcionar en el momento adecuado para que sepa que el enlace realmente existe, y es posible que tenga que trabajar un poco para agregar controladores de clics a los enlaces falsos, que agrega Ajax. ¿Derecha?

¡No! Solo obtendrá una imitación pálida y desagradable de un enlace. Considere todas las funciones de los enlaces nativos:

Puedo seguir el enlace.
Puedo abrir el enlace en una nueva pestaña o ventana usando la combinación de las teclas Ctrl, Mayús y la rueda del mouse (botón central).
Puedo copiar la dirección del enlace y pegarla en algún lugar o abrirla en otro navegador u otra cosa.
' Firefox .
— Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
, .
.
, , .

El hilo conductor aquí es que la etiqueta <a href=...> significa algo . Él dice: "Este es el camino que puedes seguir". Toneladas de herramientas dependen de esta información. Si lo reemplaza con <div onclick>, entonces sí, hacer clic en el div hará algo, pero todo el punto se pierde por completo. Por el contrario, si se usa <a href="javascript:void(0);">, en realidad está mintiendo a estas herramientas; causa significado, pero da información sin sentido.

Eso es lo que las personas quieren decir cuando hablan de "semántica": que hay información útil que debe recopilarse. Si comienza a inventar la similitud de enlaces, entonces el análisis de esta construcción sintética requerirá la ejecución especulativa de una gran cantidad de código arbitrario, o escribir extremadamenteun analizador estático inteligente, o simplemente entrenando a un programador humano. Declarar intenciones es un método mucho más poderoso y flexible que simplemente hacer el trabajo, porque en el primer caso, las herramientas universales hacen cosas útiles casi trivialmente.

Otro buen ejemplo son los formularios desplegables <select>. Algunos desarrolladores a veces completamente desde cero crean su reemplazo de widgets no nativos. ¿Probablemente para hacerlos más hermosos? Noble gol. ¿Pero sabía que en los formularios desplegables nativos, cuando comienza a escribir, se selecciona automáticamente la primera posición adecuada? Obviamente, en la mayoría de las implementaciones alternativas esto no es compatible. Visualmente, se ven mejor (o simplemente diferentes), pero funcionalmente mucho peor para listas largas.

Un cuadro de texto de Twitter casero no es un cuadro de texto en absoluto, pero contenteditable <div>. Esto contenteditablesignifica que la mayoría de los controles nativos funcionan bastante bien, pero aún así, este objeto de vez en cuando exhibe un comportamiento extraño, por ejemplo, mueve el cursor al comienzo del texto cuando cambio entre pestañas. O a veces el script tiene algunos problemas con mi velocidad de escritura y comienza a notar. La única razón por la que incluso ponerlo en lugar de la <textarea> habitual, parece, es teñir @handlesy vincular en azul. Un cuadro de texto improvisado no acorta los enlaces ni reemplaza los emojis de Twitter, por lo que esta no es realmente una vista previa de cómo se verá su tweet.

¿Sabes que algunos sitios tienen teclas de acceso rápido? Bien, verdad? Pero en realidad /es una tecla de acceso rápido integrada en Firefox que abre la barra de búsqueda rápida. Obviamente, nadie en Twitter o GitHub, o BitBucket, o Tumblr, o en una docena de otros lugares sabe de esto, porque todos asignaron este foco clave a su propia barra de búsqueda en el sitio. Lo cual es completamente diferente de la búsqueda en la página actual (para honor de GitHub, lo arreglaron cuando me quejé en Twitter). Durante mucho tiempo, Google+ apagó la barra espaciadora para desplazarse hacia abajo. ¿Por qué nadie en estas grandes empresas se detuvo y dijo: "Oye, espera, esta es una función que funciona en el navegador y la estamos rompiendo"? ¿Los desarrolladores web usan los navegadores?

Se recordó que cada página de Twitter absorbe silenciosamente cualquier evento de teclado y clics del mouse hasta que todos los scripts funcionen. Esto significa que ni siquiera puedo cambiar la pestaña hasta que espere estos 20 segundos para que se cargue la página: ctrl-t, ctrl-w, ctrl-tab, ctrl-pgup y ctrl-pgdn: todos los eventos del teclado se absorben por completo. Así es como funciona un mecanismo llamado "cola de acción rápida". Parece que esta cola debería reproducir eventos al final de la carga de la página, pero (a) no puede usar las teclas de acceso rápido en el navegador; (b) parece que todavía no funciona. Para solucionar esto, tuve que escribir un script personalizado para bloquear la etiqueta del script con un identificador específico.

No creo que sea muy exigente. Estas son las funciones básicas del navegador, y usted las viola, a menudo sin una buena razón. No espero que haga que Google Docs funcione sin JavaScript. Solo espero que no rompas mi maldito teclado.

Déjame darte un consejo.

Acepte el hecho de que a veces para algunas personas su JavaScript no funcionará. Piensa lo que eso significa. Cuando tenga una opción, elija siempre los mecanismos HTML existentes. Quizás una vez al año su equipo de desarrollo desactive JavaScript e intente usar el sitio. Comenzar a llorar.

Si va a redefinir o repensar lo que ya existe, estudie esto primero. No puede crear un buen reemplazo sin entender el original. Pregunta por ahí. Demonios, solo intente hacer clic /en el navegador antes de hacer esto con la tecla de acceso rápido en su sitio web.

Recuerde que con todo el poder que le brinda Internet, en última instancia, el control aún está en manos del usuario. Internet no es una consola de juegos; actúa en consecuencia. Crea módulos. Considere las configuraciones posibles o comunes de antemano. Tal vez algo para reducir un poco cuando llegue a 40 megabytes de secuencias de comandos en la página.

Gracias.

¿Quizás deberíamos calmarnos un poco con JavaScript?

Páginas inútiles

La invención de la rueda cuadrada

Déjame darte un consejo.

More articles: