Utilicé la Web durante un día con JavaScript desactivado

¿Alguna vez te has preguntado si es posible hacer algo en la web sin JavaScript? ¿Cuántos sitios utilizan la mejora progresiva en la práctica? En este artículo, Chris Ashton intentará utilizar la web bajo varias restricciones, que representan un grupo demográfico determinado de usuarios. Una buena experiencia central es indicativa de una página web bien estructurada, lo que, a su vez, suele ser una buena señal para el SEO y la accesibilidad. Generalmente es una página web bien diseñada, ya que el diseñador y el desarrollador han dedicado tiempo y esfuerzo a pensar en lo que es realmente fundamental para la experiencia.

Este artículo es parte de una serie en la que intento utilizar la web bajo varias restricciones, que representan un grupo demográfico determinado de usuario. Espero elevar el perfil de las dificultades que enfrentan las personas reales, que son evitables si diseñamos y desarrollamos de una manera que responda a sus necesidades. Esta semana, deshabilitaré JavaScript.

Por qué noscriptimporta

En primer lugar, para aclarar, existe una diferencia entre respaldar una noscriptexperiencia y usar la noscriptetiqueta. Generalmente no me gusta la noscriptetiqueta, ya que fragmenta su página web en versiones JavaScript y no JavaScript en lugar de trabajar desde la misma base de contenido, que es la forma en que las experiencias se vuelven confusas y las cosas se pasan por alto.

Es posible que tenga mucho contenido útil dentro de sus noscriptetiquetas, pero si estoy usando un navegador habilitado para JavaScript, no veré nada de eso; me quedaré atascado esperando a que se descargue la experiencia JS. Cuando me refiero a la experiencia 'noscript', generalmente me refiero a la experiencia de usar la página web sin JavaScript , en lugar del uso explícito de la etiqueta.

API Web MIDI: introducción

¿Es posible utilizar instrumentos musicales digitales como entradas del navegador? Con la API Web MIDI, la respuesta es ¡sí! La mejor parte es que es bastante rápido y fácil de implementar e incluso crear un proyecto realmente divertido. Leer artículo →

Entonces, ¿a quién le importan los usuarios que no tienen JavaScript? noscript¿Existen ya tales usuarios?

Bueno, existen, aunque en pequeñas cantidades: aproximadamente el 0,2% de los usuarios en el Reino Unido tienen JavaScript deshabilitado. Pero observar la cantidad de usuarios que han deshabilitado explícitamente JavaScript es perder el sentido.

Recuerdo esta cita de Jake Archibald:

"Todos sus usuarios no son JS mientras descargan su JS".

Piense en aquellos usuarios que tienen JavaScript habilitado pero que no obtienen la experiencia de JavaScript, por diversos motivos, incluido el bloqueo o eliminación corporativo o local de elementos de JavaScript, errores de JavaScript existentes en el navegador debido a complementos y barras de herramientas del navegador, red errores, etcétera. BuzzFeed reveló recientemente que alrededor del 1% de las solicitudes de JavaScript se agotan , lo que equivale a 13 millones de solicitudes fallidas por mes.

A veces el problema no es con el usuario sino con la CDN que entrega el JavaScript. ¿Recuerdas en febrero de 2017 cuando los servidores de Amazon cayeron ? Millones de sitios que dependen de JavaScript entregado a través de las CDN de Amazon sufrieron graves problemas, lo que les costó a las empresas del índice SP 500 150 millones de dólares durante la interrupción de cuatro horas.

Pensemos también en los mercados globales emergentes; Los países todavía luchan por construir una red de Internet rápida, y las poblaciones no pueden permitirse un hardware rápido para ejecutar JavaScript con un uso intensivo de CPU. O piense en los mercados establecidos, donde incluso un iPhone X con una conexión 4G no es inmune a los efectos de una página web parcialmente cargada interrumpida por el tren que entra en un túnel.

La web es un entorno hostil e impredecible, razón por la cual muchos desarrolladores siguen el principio de mejora progresiva para construir sus sitios a partir de una experiencia central de HTML semántico, superponiendo CSS y JavaScript discreto . Quería ver cuántos sitios aplican esto en la práctica. ¿Qué mejor manera que deshabilitar JavaScript por completo?

Cómo deshabilitar JavaScript

Si desea recrear mi experimento usted mismo, puede desactivar JavaScript investigando la configuración de Chrome:

• Abra las Herramientas de desarrollo (Chrome - Ver - Herramientas de desarrollo o ⌥⌘I en el teclado)
• Abra el submenú de desarrollador (los tres puntos al lado del ícono de cerrar en Herramientas de desarrollador)
• Elija 'Configuración' en este submenú
• Busque la sección 'Depurador' y marque la casilla 'Desactivar JavaScript'

O, como yo, puedes usar la excelente extensión Toggle JavaScript Chrome que te permite desactivar JS con un solo clic.

Crear una publicación de WordPress con JavaScript deshabilitado

Después de deshabilitar JavaScript, mi primera escala fue ir al sitio de mi portafolio personal, que se ejecuta en WordPress, con el objetivo de escribir mis experiencias en tiempo real.

En realidad, WordPress es muy compatible con noscript, por lo que pude comenzar a escribir esta publicación sin ninguna dificultad, aunque faltaban algunas de las funciones de formato de texto e incrustación de medios a las que estoy acostumbrado.

Comparemos la pantalla de publicación de WordPress con y sin JavaScript:

Me sentí bastante cómodo sin las barras de herramientas hasta que necesité insertar capturas de pantalla en mi publicación. Sin el botón 'Agregar medios', tuve que ir a pantallas separadas para cargar mis archivos. Esto tiene sentido, ya que el contenido de "carga en segundo plano" requiere Ajax, que requiere JavaScript. ¡Pero me sorprendió bastante que la pantalla multimedia separada también requiriera JavaScript!

Por suerte, había una vista alternativa:

Después de cargar la imagen, tuve que escribir manualmente una imgetiqueta HTML en mi publicación y copiar y pegar la URL de la imagen en ella. No había forma de determinar la URL en miniatura de la imagen cargada, y todos los títulos que escribí también tuvieron que copiarse manualmente. Pronto me cansé de este enfoque y planeé volver al día siguiente y volver a insertar todas las imágenes cuando me permitiera usar JavaScript nuevamente.

Decidí echar un vistazo a cómo estaba funcionando el front-end de mi sitio.

Ver mi sitio sin JavaScript

Me sorprendió gratamente que mi sitio se viera prácticamente igual sin JS:

Echemos un vistazo más de cerca a esa inserción de Twitter:

Debajo de la página de mi sitio, también incrusté contenido de Instagram, que resistió bien la noscriptexperiencia.

Finalmente, tengo una inserción de GitHub en mi sitio. GitHub no ofrece una inserción nativa, por lo que uso las tarjetas GitHub no oficiales de Hsiaoming Yang .

En parte esperaba sorprenderte con las estadísticas de antes y después (¡ megabytes de JS para una pequeña inserción! ¡Fin del mundo! ¡Deshagámonos de JavaScript! ), y en parte esperaba que hubiera muy poca diferencia (¡ mejora progresiva! Predicar con el ejemplo). ! ¡Soy un buen desarrollador! ).

Comparemos los pesos de las páginas con y sin JavaScript. En primer lugar, con JavaScript:

Ahora sin JavaScript:

Por el bien de un tweet con estilo, una inserción de GitHub y una inserción completa de Instagram, mi sitio crece 600 KB adicionales. También tengo seguimiento de Google Analytics y algunas funciones interactivas ocultas para nerds . Considerando todo esto, 600 KB no parece exagerado, aunque estoy un poco sorprendido por la cantidad de solicitudes adicionales que el navegador tiene que realizar para que todo eso suceda.

Todo el contenido sigue ahí sin JavaScript, todos los menús siguen siendo navegables y, con la excepción de la inserción de Twitter, sería difícil darse cuenta de que JavaScript está desactivado. Como resultado, mi sitio pasa el nivel de validación NOSCRIPT-5: la mejor calificación posible sin JavaScript.

Clasificación de ashton.codes noscript: NOSCRIPT-5. ✅

¿Qué es eso? ¿ No has oído hablar del noscriptsistema de clasificación? Me sorprendería mucho que lo hubieras hecho porque lo acabo de inventar. Es mi pequeño y práctico indicador de la usabilidad de un sitio sin JavaScript y, por extensión, es un indicador bastante bueno de qué tan bueno es un sitio para mejorar progresivamente su contenido.

noscriptSistema de clasificación

Los sitios web (o más exactamente, sus páginas individuales) tienden a clasificarse en una de las siguientes categorías:

• NOSCRIPT-5
  El sitio es prácticamente indistinguible de la versión del sitio habilitada para JavaScript.
• NOSCRIPT-4
  El sitio proporciona paridad de funcionalidad para noscript, pero vincula o redirige a una versión separada del sitio para lograrlo.
• El sitio NOSCRIPT-3
  funciona en gran medida sin JavaScript, pero algunas funciones no clave no son compatibles o parecen no funcionar.
• NOSCRIPT-2
  El sitio ofrece un mensaje que dice que su navegador no es compatible.
• NOSCRIPT-1
  El sitio parece cargarse, pero el usuario no puede utilizar ninguna funcionalidad clave.
• NOSCRIPT-0
  El sitio no se carga en absoluto y no ofrece comentarios al usuario.

Echemos un vistazo a algunos sitios populares y veamos su puntuación.

Amazonas

Hace tiempo que le tengo echado el ojo a un pequeño robot aspirador. Mi contrato de arrendamiento no permite mascotas, y esta es la mejor opción una vez que le pones unos ojos saltones.

A primera vista, Amazon hace un gran trabajo con su solución sin JavaScript, aunque falta la imagen principal del producto.

Tras una inspección más cercana, algunas cosas estaban un poco rotas en la noscriptversión. Me gustaría revisarlos uno por uno y sugerir una solución para cada uno.

Sin imágenes de la galería

Quería ver algunas fotos de los productos, pero hacer clic en las miniaturas no me dio nada.

Asunto

Solucion potencial

Hubiera sido bueno si estas miniaturas fueran enlaces a la imagen completa y se abrieran en una nueva pestaña. Luego podrían mejorarse progresivamente en la galería de imágenes utilizando JavaScript:

• Secuestrar el evento de clic del enlace en miniatura;
• Toma el hrefatributo;
• Actualiza el srcatributo de la imagen principal con el hrefvalor del atributo.

El enlace 'Informar información incorrecta del producto' es solo para JavaScript

¿Esta característica realmente se usa con tanta frecuencia que vale la pena descargar bytes adicionales de JavaScript para todos sus usuarios para que se abra como un modal integrado dentro de la página?

Asunto

Solucion potencial

El formulario modal integrado de Amazon requiere JavaScript para funcionar. Haría que la 'función de informe' fuera un formulario independiente en una URL separada , por ejemplo /report-product?product-id=123. Esto podría mejorarse progresivamente en el modal integrado usando Ajax para descargar el HTML por separado.

Las reseñas solo son parcialmente visibles de forma predeterminada

Asunto

Solucion potencial

¿Por qué no mostrar la reseña completa de forma predeterminada y luego usar JavaScript para truncar el texto de la reseña y agregar el enlace "Leer más"?

Vale la pena señalar que el título de la reseña es un enlace a la reseña en una página independiente, por lo que al menos aún es posible leer el contenido.

En general, me sorprendió gratamente lo bien que funcionó el sitio sin JavaScript. También podría haber sido una página en blanco. Sin embargo, la falta de imágenes de productos significa que nos estamos perdiendo una característica realmente fundamental: ¡yo diría que es fundamental poder ver lo que estás comprando! — Así que es una pena que no pudiéramos ponerle la guinda al pastel y otorgarle una calificación NOSCRIPT-5.

Calificación de Amazon noscript: NOSCRIPT-3. ‍

Todavía no había decidido qué producto quería comprar, así que recurrí a Camel Camel Camel, el rastreador de precios de Amazon.

Camello Camello Camello

Quería decidir entre el iLife V3s Pro y el iLife A4, así que me dirigí a https://uk.camelcamelcamel.com/ . Al principio, el sitio parecía indistinguible de la versión habilitada para JavaScript.

Desafortunadamente, el gráfico del historial de precios no se mostró. Proporcionó un texto alternativo, pero el texto alternativo no me dio ninguna idea de si la tendencia del precio ha estado subiendo o bajando.

Sugerencia general: proporcione texto alternativo significativo en todo momento . No necesariamente necesito ver el gráfico, pero agradecería un resumen de lo que contiene. Quizás, en este caso, podría ser "un gráfico histórico de precios de Amazon que muestra que el precio de este artículo se ha mantenido prácticamente sin cambios desde marzo de 2017". Pero generar automáticamente un resumen como ese es ciertamente difícil y propenso a anomalías.

Sugerencia específica para este caso de uso: mostrar la imagen . El gráfico en la versión escrita del sitio es en realidad una imagen independiente , por lo que no hay ninguna razón por la que no pueda mostrarse en la noscriptversión.

Aún así, el contenido principal debajo del cuadro me brindó la información que necesitaba saber.

La tabla proporciona la paridad de características necesaria para asegurar una calificación NOSCRIPT-5. ¡Me quito el sombrero ante ti, Camel Camel Camel!

Camello Camello noscriptClasificación del camello: NOSCRIPT-5 ✅

Productos de Google

En este momento de mi día, recibí una llamada telefónica de la nada: un amigo me llamó y me preguntó si podíamos reunirnos esta semana. Entonces fui a Google Calendar para verificar mi disponibilidad. ¡Google tenía otras ideas!

Me decepcionó que no hubiera una noscriptalternativa: Google suele ser bastante bueno en este tipo de cosas.

No esperaría necesariamente poder agregar/editar/eliminar entradas a mi calendario, pero debería ser posible proporcionar una vista de solo lectura de mi calendario como contenido principal .

Clasificación del calendario de Google noscript: NOSCRIPT-0

Interesado en ver cómo Google administra otros productos, eché un vistazo rápido a las Hojas de cálculo de Google:

En este caso, el sitio falla con mucha más gracia. Al menos puedo leer el contenido de la hoja de cálculo, aunque no pueda editarlo. ¿Por qué el calendario no ofrece la misma solución alternativa?

¡No tengo sugerencias para mejorar las hojas de cálculo de Google! Hace un buen trabajo al informar al usuario si falta una funcionalidad principal en la noscriptexperiencia.

Calificación de hojas de cálculo de Google noscript: NOSCRIPT-2

¡Esta calificación en realidad no es tan mala! No todos los sitios podrán ofrecer una noscriptexperiencia, pero al menos si son sinceros y honestos (es decir, dirán "sí, no vamos a intentar darte nada") que te prepare, el noscriptusuario: para cuando falle. No perderá unos preciosos segundos intentando completar un formulario que nunca se enviará, o comenzar a leer un artículo que luego tendrá que usar Ajax para recuperar el resto de su contenido.

Ahora, volvamos a mi posible compra en Amazon. Quería ver algunas reseñas de terceros antes de realizar una compra.

La búsqueda de Google funciona muy bien sin JavaScript. Simplemente parece un poco anticuado, como esos viejos sitios solo para escritorio con resoluciones fijas.

La vista de imágenes se ve aún más diferente y, de hecho, la prefiero en algunos aspectos: esta versión se carga súper rápido y enumera las dimensiones y el tamaño de la imagen en kilobytes debajo de cada miniatura:

Clasificación de búsqueda de Google noscript: NOSCRIPT-5 ✅

Uno de los resultados de la búsqueda me llevó a una reseña en YouTube. Hice clic, sin esperar mucho. Tenía razón en no emocionarme:

Realmente no esperaría que un sitio como YouTube funcionara sin JavaScript. YouTube requiere capacidades avanzadas de transmisión, sin mencionar que se expondría al robo de copias si proporcionara una descarga MP4 independiente como alternativa. En cualquier caso, ningún sitio debería parecer defectuoso. Me quedé mirando esta pantalla durante unos segundos antes de darme cuenta de que no iba a pasar nada más.

Sugerencia : si su sitio no puede proporcionar una solución alternativa para noscriptlos usuarios, como mínimo debe proporcionar un noscriptmensaje de advertencia.

Calificación de YouTube noscript: NOSCRIPT-0

¿Cual?

Hice clic en un par de enlaces de reseñas más. ¿ El cual? El sitio de consejos me falló por completo.

Esta era una página que parecía cargada bien, pero solo cuando leías el contenido te dabas cuenta de que en realidad debía faltar información clave. Esa información clave es absolutamente fundamental para el propósito de la página y no puedo entenderla. Por lo tanto, desafortunadamente, eso es una violación de NOSCRIPT-1.

Sugerencia : si su sitio tiene contenido Ajax, ese contenido existe en otra URL. Proporcione un enlace a ese contenido para sus noscriptusuarios. Siempre puedes ocultar el enlace cuando hayas realizado correctamente el Ajax con JavaScript.

¿Cual? calificación del sitio de revisión noscript: NOSCRIPT-1

Facebook

Finalmente, admito que realmente no puedo permitirme una aspiradora en este momento. Entonces, decidí saltar a las redes sociales.

Facebook se niega rotundamente a cargarse sin JavaScript, pero ofrece una opción alternativa. Este es nuestro primer ejemplo de NOSCRIPT-4: un sitio que ofrece una versión separada de su contenido para noscriptusuarios de teléfonos básicos.

La versión móvil se carga instantáneamente. Se ve feo, pero parece que obtengo el mismo contenido que normalmente. Fundamentalmente, tengo paridad de funciones : puedo lograr las mismas cosas aquí que en el sitio principal.

Calificación de Facebook noscript: NOSCRIPT-4

La página se cargó a la velocidad del rayo:

Solo podía ver 7 elementos en las noticias a la vez, pero podía hacer clic en "Ver más historias", lo que me lleva a una nueva página, utilizando técnicas de paginación tradicionales.

Me impresiona tener la opción de "reaccionar" a un comentario de Facebook, aunque se trata de una tarea multipantalla:

No hay nada que impida que Facebook cree un menú de "reacción" al pasar el cursor en un formato que no sea JavaScript, pero para ser justos, esto está dirigido a dispositivos móviles que no pueden desplazarse.

Sugerencia : Sea creativo con CSS. Es posible que descubra que no necesita JavaScript en absoluto.

Al poco tiempo, apareció un vídeo en mis noticias. (En este punto, me di cuenta de cuánto menos contenido de video había visto en la versión móvil en comparación con el Facebook normal, lo que significa que en realidad había estado viendo los estados de las personas en lugar de un video aleatorio que les había gustado; una mejora importante. en lo que a mí respecta!)

Esperaba que el vídeo no funcionara cuando hice clic en él, pero al hacer clic en la miniatura se abrió el vídeo en una nueva pestaña:

Me sorprende gratamente que todas las funciones parezcan estar disponibles en esta noscriptversión del sitio. Sin embargo, finalmente encontré una característica que era demasiado torpe y engorrosa para llevarla hasta el final: la creación de álbumes.

Quería subir un álbum de fotos a Facebook, pero en noscripttierra firme es una tarea enorme. Implica subir una foto a la vez, pasando por dos o tres pantallas para cada carga. Intenté desesperadamente y no pude encontrar una opción de carga masiva.

La laboriosidad de esto me afectó después de la foto número tres (mi álbum contendrá muchas más), así que decidí dar por terminado el día y volver mañana cuando tenga JavaScript.

Gorjeo

Las cosas se pusieron raras cuando volé a Twitter.

Este mecanismo me intrigó, así que indagué en el código fuente, que en realidad era sorprendentemente simple:

noscriptmeta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"/noscript

A pesar de lo bellamente simple que es esta solución, la experiencia me pareció bastante complicada porque en el instante anterior a ser redirigido, vi que una de las personas que sigo en Twitter se había comprometido. Su tweet no apareció en la parte superior de la versión 'móvil', así que tuve que ir a buscarlo.

Sugerencia : establezca un período de gracia en la lógica del lado del servidor para que las redirecciones y las actualizaciones descuidadas no pierdan tweets interesantes antes de que haya tenido la oportunidad de leerlos.

No podía recordar el nombre de usuario de Twitter de mi amigo. La búsqueda fue un poco complicada: ¡empecé a extrañar mucho las sugerencias de autocompletar!

Afortunadamente, la página de resultados de búsqueda mostró su cuenta y pude encontrar su tweet. Incluso pude responder.

Calificación de Twitter noscript: NOSCRIPT-4

Esto puede parecer una puntuación generosa, dada la sensación de torpeza, pero recuerde que la clave aquí es la paridad de funciones. No tiene por qué verse hermoso.

Probé un par de sitios de redes sociales más que, a diferencia de Twitter, no alcanzaron las vertiginosas alturas del cumplimiento de NOSCRIPT-4.

Otras Redes Sociales

LinkedIn tiene una bonita pantalla de carga personalizada. Pero nunca se carga, así que todo lo que pude hacer fue mirar el logo.

Calificación de LinkedIn noscript: NOSCRIPT-0

Instagram no me dio literalmente nada. Una página en blanco. Un sabor completamente diferente de NOSCRIPT-0.

Calificación de Instagram noscript: NOSCRIPT-0

Me sorprendió que Instagram fallara tan espectacularmente aquí, dado que la inserción de Instagram funcionó perfectamente en el sitio de mi cartera. Supongo que con una inserción nunca se sabe cuáles son las expectativas de soporte del navegador del tercero, pero como estoy visitando el sitio directamente, Instagram está feliz de hacer la llamada para cancelar el soporte.

noticias de la BBC

Me dirigí a la BBC para recibir mis noticias.

El menú está un poco fuera de lugar y la columna es bastante estrecha (definitivamente es un patrón que estoy viendo en muchos sitios: ¿por qué “sin JavaScript” significa “dispositivo móvil”?), pero puedo acceder al contenido.

H