You are here

Mozilla Hispano

Los 9 errores más comunes al usar CSS Grid

Noticias de Mozilla Hispano - Dom, 11/11/2018 - 16:13

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Uriel Jurado.

Es fácil tener muchos errores usando una tecnología nueva, especialmente algo que tuvo un gran cambio desde la versión anterior, tal como en CSS Grid. En este vídeo (en inglés) explico los 9 errores más comunes que la gente tiene al usar esta tecnología, con consejos y tips para evitar estas trampas y romper viejos hábitos.

Para más información (vídeos en inglés):

Error 1: Creer que CSS Grid lo es todo

Flexbox vs CSS Grid – ¿Cuál es mejor?

Usando Flexbox y Grid juntos

Eliminar Cajas con CSS Shapes

Error 2: Usar únicamente porcentajes en las dimensiones

Mínimo y Máximo, dimensionando contenido en CSS Grid

Unidades FR en CSS Grid

MinMax en CSS Grid

Error 3: Asumir que necesitas breakpoints

Diseño asombrosamente sencillo con CSS Grid

Error 4: Confundirse al enumerar

Diseñador Gráfico Ingenioso y Práctico con CSS Grid

Lo Básico de CSS Grid: El gran cuadro

Error 5: Siempre usar 12 columnas

Explico esto al final de “Unidades FR en CSS Grid”

Error 6: Ignorar el poder de las filas

Flexibilidad y dobleces

Espacio Blanco en la Web

Error 7: Buscar un Framework

Error 8: Esperar a la muerte de IE11

¿Internet Explorer + CSS Grid?

Serie de 7 partes sobre escribir CSS flexible que trabaje en todos los navegadores

Error 9: Titubear en vez de jugar

Mondrian Responsivo

CSS Grid como si fueras Jan Tschicold

Categorías: Mozilla Hispano

Una caricatura sobre el DNS a través de HTTPS

Noticias de Mozilla Hispano - Sáb, 22/09/2018 - 17:24

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Emmanuel Sanchez.

Las amenazas a la privacidad y seguridad de los usuarios está creciendo. En Mozilla hemos seguido de cerca estas amenazas. Creemos que tenemos la obligación de hacer todo lo que podamos para proteger a los usuarios de Firefox así como sus datos.

Nos enfrentamos a las compañías y organizaciones que en secreto recolectan y venden información de los usuarios. Esa es la razón por la que hemos agregado la protección contra rastreo y lanzamos la extensión Facebook Container. En los próximos meses nos verás haciendo más cosas en favor de la protección de nuestros usuarios.

Dos nuevas protecciones que estamos agregando son:

  1. DNS a través de HTTPS, un nuevo estandar del IETF que hemos promovido
  2. “Resolutivo Recursivo de Confianza”, una nueva forma de resolver DNS para el cual nos hemos asociado con Cloudflare

Con estas dos iniciativas, estamos quitando algunos de los posibles riesgos para tus datos que han sido parte del sistema de nombres de dominio (DNS) desde que fue creado hace 35 años. Por lo mismo nos gustaría que nos ayudes a probar estas iniciativas. Veamos la forma en la que el DNS sobre HTTPS y el Resolutivo Recursivo de Confianza protegen a nuestros usuarios.

Pero primero veamos la forma en la que las páginas se mueven a través de Internet.

Un breve curso sobre HTTP

Cuando se trata de explicar la forma en la que un navegador descarga una página, generalmente se hace así:

  1. Tu navegador realiza una solicitud GET al servidor
  2. El servidor responde con un archivo HTML

Este sistema es llamado HTTP.

Pero el diagrama está demasiado simplificado. El navegador no se comunica con el servidor directamente. Esto debido a que probablemente no se encuentra cerca uno del otro.

El servidor podría estar a miles de kilómetros de distancia. Y probablemente no exista una conexión directa entre tu computadora y el servidor.

Entonces la solicitud entre el servidor y el navegador va a pasar a través de múltiples manos antes llegar. Lo mismo ocurrirá cuando el servidor responda.

Me gusta pensar en que es parecido a la forma en la que los niños se pasan notas entre sí durante una clase. Escrito en la parte de afuera, la nota indica la persona a la que se debe dirigir. El niño que escribió la nota se la pasara a su vecino. Después los niños lo van a pasar a sus “vecinos”, que probablemente no son el destinatario, pero es alguien que se encuentra más cerca a él.

El problema de esto es que cualquiera a través del recorrido puede abrir la nota y leerla. Además no hay forma de saber de antemano el camino que la nota va a recorrer, ni las personas que tendrán acceso a ella.

Puede terminar en manos de personas que realicen acciones peligrosas…

Como compartir el contenido de la nota con todos.

O cambiar la respuesta.

Para evitar estas situaciones, se ha creado una nueva versión de HTTP. Ésta es llamada HTTPS. Con HTTPS, es como si cada mensaje tuviera un candado.

Tanto el navegador como el servidor conocen la combinación para abrir el candado, pero no los que se encuentran en medio del camino.

Con esto aunque los mensajes pasen a través de varias manos, solo tu y el sitio web (el servidor), serán capaces de leer el contenido de los mensajes.

Esto resuelve muchos agujeros de seguridad. Pero algunos de los mensajes entre tu navegador y el servidor no son cifrados. Esto significa que personas que se encuentren en medio pueden seguir viendo parte de lo que estás haciendo.

Un momento en el cual los datos siguen están expuestos es cuando se está realizando la conexión con el servidor. Cuando envías un mensaje inicial al servidor, envías el nombre del servidor también (en un campo llamado “Indicador del Nombre del Servidor”). Esto le permite a los administradores de servidores utilizar la misma computadora (el mismo servidor) para múltiples sitios, y conocer con cuál de ellos deseas hablar. Esta solicitud inicial es parte del proceso para establecer el cifrado, pero la solicitud en sí no está cifrada.

El otro lugar donde los datos son expuestos es en el DNS. Pero, ¿qué es el DNS?

DNS: el Sistema de Nombres de Dominio

En la metáfora anterior, mencioné que el nombre del receptor debía de estar en la parte de afuera de la nota. Esto también ocurre en peticiones HTTP; se necesita decir quién va a recibir el mensaje.

Pero no puedes usar un nombre. Ningún enrutador (router) sabe dónde se encuentra el sitio web con el que deseas hablar. Entonces, en vez de eso utilizamos una dirección IP. De esta forma los enrutadores conocen el servidor con el que te deseas comunicar.

Esto genera un problema. No vas a querer que los usuarios tengan que recordar la dirección IP de tu sitio. En vez de eso, quieres darle a tu sitio un nombre que puedan recordar.

Esa es la razón por la cual tenemos un sistema de nombre de dominio (DNS). Tu navegador utiliza DNS para convertir el nombre de dominio en una dirección IP. El proceso de convertir un nombre de dominio a una dirección IP se denomina “resolución de nombre de dominio”.

¿Cómo sabe el navegador hacer esto?

Una opción sería tener una gran lista en el navegador, parecido a un directorio telefónico. Pero debido a que continuamente llegan nuevos sitios, o se mueven a otros servidores, sería muy difícil tener una lista adecuadamente actualizada.

En vez de tener una gran lista que registre todos los dominios, existen muchas pequeñas relacionadas entre sí. Esto permite que sean manejadas independientemente.

Para obtener la dirección IP que corresponde al nombre del dominio, se debe de buscar la lista que contiene ese nombre de dominio. Hacer esto es un poco como la búsqueda de un tesoro.

¿Como se vería la búsqueda de la versión en inglés de Wikipedia (en.wikipedia.org)?

Podemos dividir el dominio en partes: subdominio, dominio de segundo nivel y dominio de primer nivel.

Con estas partes tenemos lo necesario para encontrar la lista que contiene la dirección IP del sitio. Pero para esto debemos de solicitar ayuda. La herramienta que nos ayudará a convertir el nombre de dominio en una dirección IP se llama “resolutivo” (resolver).

Primero, el resolutivo se comunica con un Root DNS (algo así como un servidor DNS principal). Él conoce unos pocos servidores Root DNS, así que envía mensaje a uno de ellos y le pregunta el lugar donde podrá obtener más información sobre el dominio de primer nivel .org.

El servidor Root DNS le dará la dirección de un servidor que conoce las direcciones .org.

El siguiente servidor se llama servidor de nombres de dominio de nivel superior (top-level domain, TLD). El servidor TLD conoce todos los nombre del dominio que terminan en .org.

Sin embargo, no sabe nada sobre los subdominios de wikipedia.org, por tanto no conoce la dirección IP para en.wikipedia.org.

El servidor TLD le dirá al resolutivo que pregunte al servidor de nombres de dominio de Wikipedia.

El resolutivo casi ha terminado de realizar su trabajo. El servidor de Wikipedia es llamado “servidor autoritario”. Él conoce todo sobre los subdominios de wikipedia.org, incluyendo en.wikipedia.org, o la versión alemana de.wikipedia.org. El servidor autoritario le dice al resolutivo la dirección IP que contiene los archivos HTML del sitio (en este caso en.wikipedia.org).

El resolutivo devolverá al sistema operativo la dirección IP de en.wikipedia.org.

Este proceso es llamado resolución recursiva, debido a que va a diferentes servidores a realizarles básicamente la misma pregunta.

Anteriormente dijimos que el resolutivo nos ayudaría. Pero, ¿cómo hace el navegador para encontrarlo? En general le pide al sistema operativo que le provea con un resolutivo que le pueda ayudar.

¿Cómo conoce el sistema operativo el resolutivo que debe utilizar? Existen dos posibles caminos.

Tu puedes configurar un resolutivo en el cual confías. Pero pocas personas hacen esto.

En vez de eso, la mayoría de la gente utiliza el que se encuentra por defecto. Y el que se encuentra por defecto, es cualquiera que la red le haya dicho al sistema operativo que se conectara. Cuando una computadora se conecta a la red y obtiene su dirección IP, la red le recomienda un resolutivo a utilizar.

Esto significa que el resolutivo que estés utilizando puede cambiar a lo largo del día. Si vas a una cafetería por la tarde, es probable que estés utilizando un resolutivo diferente al que estabas utilizando en la mañana. Y esto puede ocurrir aunque hayas configurado tu propio resolutivo, dado que no existe seguridad en el protocolo DNS.

¿Cómo se puede vulnerar el protocolo DNS?

¿Cómo puede hacer esto vulnerables a los usuarios?

Usualmente un resolutivo le dirá al servidor DNS el dominio que está buscando. En esta solicitud en ocasiones se incluye su dirección IP completa. E inclusive si no se entrega a dirección IP completa, comúnmente se entrega la mayor parte de la dirección IP, la cual puede combinarse con otros datos para saber el origen (el usuario que está realizando la solicitud).

Esto significa que cada servidor al que le solicites ayuda,va a poder visualizar el sitio que estás buscando. Esto significa también que cualquiera en el camino a través de esos servidores podrán ver tu solicitud.

Los dos más grandes riesgos para los usuarios son el rastreo y la suplantación de identidad.

Rastreo

Como acabamos de ver, es relativamente fácil tomar de forma parcial o completa tu dirección IP y saber el sitio que estás buscando. Tanto el servidor DNS como cualquier otro servidor que esté entre tú y ese servidor pueden hacer un perfil tuyo y registrar los sitios que has estado visitando.

Los datos tienen un valor. Muchas personas y empresas pagarán mucho dinero para saber los sitios por los cuales has estado navegando.

Aún si confías en los servidores DNS y los enrutadores que por defecto se encuentran en medio, tu información aún así puede ser recabada y vendida. Esto debido a que el mismo resolutivo que te dio tu red podría no ser de confianza.

E inclusive si confías en el resolutivo que utilizas, lo más probable es que solo lo utilices en tu casa. Como se mencionó anteriormente, cada vez que vas a la cafetería o a un hotel o cualquier otra red es probable que estés utilizando otro resolutivo. Y, ¿acaso sabes cuáles son sus políticas de recolección de datos?

Más allá de que los datos sean recolectados y vendidos sin tu conocimiento o consentimiento explícito, existen otras maneras en que tu información puede estar en peligro.

Suplantación de identidad

Con la suplantación de identidad, alguien en el camino al servidor DNS cambia la respuesta del servidor DNS. En vez de decirte la dirección IP real, te dará una dirección IP diferente. De esta forma, se puede bloquear tu acceso a cierto sitio, o enviarte a una versión falsa del mismo.

De nuevo, este es un caso en el cual el resolutivo puede actuar maliciosamente.

Por ejemplo, imaginemos que tu estas comprando algo en Megatienda. Deseas revisar si el producto que estás planeando comprar se encuentra más barato en la tienda en línea otratienda.com.

Pero estás conectado a la red inalámbrica de Megatienda, y por tanto utilizando el resolutivo que ellos te indican. El resolutivo podría alterar la respuesta para decir que otratienda.com no está disponible.

¿Cómo lo podemos arreglar?

En Mozilla creemos que tenemos la responsabilidad de proteger a nuestros usuarios y sus datos. Por ello hemos estado trabajando en arreglar estas vulnerabilidades.

Hemos desarrollando dos nuevas características para arreglar esto –  Resolutivo Recursivo de Confianza (Trusted Recursive Resolver, TRR) y DNS sobre HTTPS (DNS over HTTPS, DoH). Realmente existen tres amenazas aquí:

  1. Puedes llegar a utilizar un “resolutivo” que rastree tus solicitudes, o modifique las respuestas de los servidores DNS.
  2. Los enrutadores que se encuentra en medio de tu y el servidor DNS pueden hacer lo mismo.
  3. Los servidores DNS pueden rastrear tus solicitudes de DNS.

Entonces, ¿cómo se puede solucionar esto?:

  1. Evitar los resolutivos en los que no confiamos, con TRR.
  2. Protegerse en contra del espionaje o posible manipulación de mensajes que se pueda generar en el camino hacia el servidor, utilizando DoH.
  3. Enviar tan poca información como sea posible para evitar la identificación de los usuarios.
Evitar la desconfianza de resolutivos usando TRR

Las redes pueden proveer resolutivos no confiables que pueden robar datos o engañar a los usuarios para dirigirlos a otros sitios webs, debido a que muy pocos usuarios conocen los riesgos o la forma en la que pueden protegerse.

Incluso para los usuarios que conocen los riesgos, es difícil para ellos cerciorarse que su ISP u otra organización maneja los datos de DNS adecuadamente.

En Mozilla hemos estudiado los riesgos, y en conjunto con nuestro poder de negociación hemos buscado una empresa que colabore con nosotros para proteger los datos de los usuarios. Y la hemos encontrado: Cloudflare.

Cloudflare provee un servicio de resolución recursiva, con una política de privacidad enfocada en los usuarios. Se han comprometido a borrar todo los datos que puedan identificar a un usuario después de 24 horas, así como nunca compartir esos datos a terceros. También habrán auditorías periódicas para verificar que los datos son borrados como se espera.

Con esto tenemos un resolutivo en el cual podemos confiar para proteger la privacidad de los usuarios. Esto significa que Firefox puede ignorar el resolutivo que le proporcione la red e ir directamente a Cloudflare. Y con ello no tenemos que preocuparnos de utilizar un resolutivo que venda los datos de los usuarios o que dirija a los usuarios a sitios web maliciosos.

¿Por qué los elegimos? Cloudflare está tan emocionado como nosotros en construir un servicio resolutivo de DNS enfocado en la privacidad. Ellos han trabajado con nosotros para construir un servicio de DoH transparente para los usuarios. Han estado muy abiertos a agregar protecciones para los usuarios, por lo que estamos muy felices de colaborar con ellos.

Pero esto no significa que los usuarios de Firefox solo puedan usar los servicios de Cloudflare. Los usuarios tienen la libertad de configurar Firefox para usar cualquier servicio que deseen. Así que a medida que las ofertas de estos servicios crezcan, planeamos facilitar el descubrimiento y utilización de los mismos.

Proteger contra el espionaje y los intrusos mediante DoH

El resolutivo no es la única amenaza. Los enrutadores pueden rastrear y falsificar las respuestas del DNS, debido a que pueden ver los contenidos tanto de las solicitudes hacia el DNS como de sus respuestas. Pero ya se han desarrollado métodos para asegurarse que los enrutadores no puedan hacer cosas como esas. Es el cifrado del cual hablé antes.

Utilizando HTTPS para intercambiar los paquetes entre el equipo y el DNS, nos podemos asegurar que no se puedan espiar ni modificar los solicitudes entre ellos.

Enviar la menor cantidad de datos posibles para evitar la identificación

Además de proveer un resolutivo confiable usando DoH, Cloudflare está trabajando con nosotros para hacer de esto todavía más seguro.

Normalmente, un resolutivo envía el nombre del dominio completo a cada servidor –  el servidor Root, el TLD, etc. Pero Cloudflare hará algo diferente. Solo enviará aquello que es importante al servidor DNS con el que esté hablando ese momento. Esto es llamado minimización QNAME.

El resolutivo usualmente también incluye los primeros 24 bits de tu dirección IP en la solicitud. Esto puede ayudar al servidor DNS a saber el lugar donde te encuentras y poder seleccionar el CDN más cercano a ti, pero esta información puede ser utilizada para relacionar diferentes solicitudes de DNS a un mismo usuario.

En vez de hacer esto, Cloudflare hará la solicitud desde la IP de uno de sus servidores que se encuentra más cerca del usuario. Esto permite la geolocalización sin vincularlo a un usuario en particular. Además de esto estamos buscando la forma de hacer esto aún mejor sin olvidarnos de la privacidad.

Haciendo esto – eliminado las partes relevantes del nombre del dominio y no incluyendo la dirección IP del usuario – significa que los servidores DNS tienen muchos menos datos que puedan recolectar.

¿Que no está arreglando TRR or DoH?

Con estas correcciones hemos sido capaces de reducir la cantidad de personas que pueden visualizar los sitios que tú estás visitando. Pero esto no elimina las filtraciones de datos por completo.

Después de que se utiliza el servicio de DNS para encontrar la dirección IP, aún se debe de realizar la conexión al servidor. Para realizar esto, se debe de hacer una solicitud. Esta solicitud incluye el nombre del sitio en el servidor al cual te quieres conectar, y esta solicitud no está cifrada.

Esto significa que tu ISP puede conocer los sitios que estás visitando. Además los enrutadores que llevan tu solicitud desde tu navegador al servidor también pueden ver la información.

Una vez que se ha realizado la conexión al servidor web, todo las conexiones futuras son cifradas, permitiendo no solo utilizar la conexión con un sitio web en especifico, sino con todos los sitios que estén alojados en el servidor.

Esto se llama reutilización de conexión. Cuando tu te conectas a un servidor que lo soporta, el servidor te va a decir los otros sitios que almacena. Entonces puedes visitar dichos sitios mediante una conexión cifrada.

¿Por qué esto ayuda? Porque ya no tienes que iniciar una nueva conexión para visitar los otros sitios web. Esto significa que no tendrás que enviar un mensaje sin cifrar indicando el sitio al que te quieres conectar. Lo cual permite que te conectes a otros sitios en el mismo servidor sin revelar dichos sitios a tu ISP o a los enrutadores que utilices.

Con el aumento de servicio de CDN, más sitios están siendo servidos a través de un único servidor. Permitiendo reutilizar la conexión con dicho servidor para conectarse a diversos sitios web y con ello evitar filtrar datos cuando te conectes a otros sitios web. Esto significa que conforme pase el tiempo esto aumentará, así como la privacidad de los usuarios.

¿Cuál es el avance?

Tu puedes utilizar DNS sobre HTTPS hoy, de hecho te motivamos a ello.

Queremos activar esta función por defecto para todos los usuarios. Nosotros creemos que todos los usuarios merecen tener privacidad y seguridad de sus datos sin importar el nivel que conocimientos técnicos que tengan.

Esto es un gran cambio y debemos de hacer las pruebas pertinentes primero. Es por esto que estamos realizando un estudio acerca de esta función. Hemos solicitado a la mitad de los usuarios de Firefox Nightly que nos apoyen para la recolección de dato sobre el rendimiento de la función.

Nosotros usamos el resolutivo por defecto como lo conocemos, pero también enviamos una solicitud al resolutivo de Cloudflare con DNS sobre HTTPS. Entonces comparamos los dos “resultados”, para verificar que todo se encuentra funcionando como se espera.

Para los participantes en este estudio, la respuesta que entregue Cloudflare no se utilizará. De momento solo verificamos que todo funcione adecuadamente y después ignoramos la respuesta de Cloudflare.

Estamos agradecidos por el apoyo que hemos obtenido por parte de los usuarios de Firefox Nightly – esas personas que nos ayudan día con día a probar Firefox para que funcione cada vez mejor para todos – y esperamos que nos ayuden con esta funcionalidad también.

Categorías: Mozilla Hispano

A propósito de la salud de Internet

Noticias de Mozilla Hispano - Jue, 20/09/2018 - 20:31

El jueves pasado estuvimos en la semana Linux a través de una presentación del Reporte para la salud de Internet (IHR) que Mozilla lanzó este año.

Definir cómo Internet es saludable se hace complejo porque los contextos, historias y también oportunidades que tenemos son diferentes, y esto gracias a los lugares en los que nos encontramos. Sin embargo, una forma de saber cómo internet puede ser saludable es a través de casos en los que se vulneran los derechos de los cibernautas, prácticas, actores y sobre todo, las oportunidades que se dan.

Para el contexto colombiano y buscando la participación, percepción y reflexión de más personas, presentamos casos específicos para cada uno de los puntos en los que se centra el IHR, además de definir lo que se entiende en cada ámbito y también formular preguntas para conocer más de la percepción y opinión de los asistentes.

 

A continuación presentamos el recuento de la presentación y reflexión en torno a cada una de las áreas que se presentan en el Reporte para la Salud de Internet: privacidad y seguridad, apertura, descentralización, inclusión digital,  y alfabetización digital.

 

Privacidad y seguridad. Presentamos información respecto al caso colombiano en el que los ataques de ransomware cayeron de 638 millones a 184 millones en 2017: Ataques de ransomware cayeron de 638 millones a 184 millones en 2017. 

Y también reflexionamos sobre nuestra navegación diaria a través de las siguientes preguntas: cuando usted navega en internet ¿se siente seguro? ¿siente que tiene el control de su información, datos, privacidad? ¿Si? ¿No? ¿Por qué? ¿En qué contextos si y en cuáles no?

Apertura. En Colombia se encuentra activa la iniciativa del Portal de datos abiertos del Estado, sin embargo una pregunta que tenemos es: ¿Qué tan abiertos son los datos y dinámicas en las que se obtiene y da acceso a los mismos?

De igual forma, presentamos para el caso de reformas o leyes de derechos de autor, el caso Colombiano, en el que hace unos meses la sociedad civil participó de manera muy activa en la reforma de la ley de derechos de autor, planteando desafíos en términos de acceso a la información, derechos de autor, el funcionamiento de bibliotecas, entre otros. Pueden encontrar más información en una publicación de la Fundación Karisma de Colombia sobre la Reforma de derecho de autor.

Descentralización. En términos de neutralidad, la invitación que hacemos es a pensar y reflexionar respecto a nuestras prácticas diarias de navegación. ¿Qué aplicaciones usamos? ¿A quiénes pertenecen? ¿Quién las controla? Respecto a este tema hablamos del caso de Mark Zuckerberg, además de WeChat en China y el monopolio de los navegadores web.

Inclusión digital. Partiendo de la premisa que Internet debería reflejar la diversidad y experiencia de todas las personas, en cualquier lugar del mundo; que todos y todas deberíamos tener la oportunidad de participar en la creación, avance y estructuración de internet, sin tener algún tipo de amenaza. Al respecto, hablamos de los grupos y colectivos que empoderan a mujeres para que incremente su participación en Internet. De igual forma, hablamos de Mozilla Nativo, la comunidad de Mozilla que se dedica a empoderar a través de proyectos de localización de Software a hablantes de lenguas indígenas para que ellos se vuelvan constructores de herramientas (Firefox, Firefox para Android, mozilla.org, entre otras herramientas y plataformas) y estas estén en sus lenguas.

Alfabetización digital. En este punto se plantea que no solo es necesaria la conectividad a internet, también se necesita de habilidades como leer, escribir y participar en el mundo digital. En Colombia también hay varias inicitiavidas, así que dentro de la presentación hablamos de los Puntos vive Digital de MINTIC, del tema de ciudadanía digital y también de la nueva modalidad de trabajo, el teletrabajo.

 

Agradecemos al GLUD -Grupo Linux de la Universidad Distrital-, a los participantes que estuvieron en nuestra presentación y a nuestra nueva voluntaria, Alejandra Zerta, quien se integra a la comunidad desde Manizales.

 

¿Quieres participar del equipo local de reflexión e investigación sobre el Reporte de la Salud de Internet?

¡Escríbenos!

Nuestras redes sociales: FanpageTwitter o al Correo: monica@mozillacolombia.org

Te incitamos a descargar y compartir nuestra presentación. ¡Somos Mozilla Colombia!

Categorías: Mozilla Hispano

Depurando aplicaciones web modernas

Noticias de Mozilla Hispano - Dom, 26/08/2018 - 22:00

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

El desarrollo y depuración de aplicaciones JavaScript modernas en las herramientas de desarrollador de Firefox dieron un salto cuántico hacia adelante. En colaboración con Logan Smyth, Líder Técnico para Babel, subimos de nivel el soporte a mapas de fuente para permitirte inspeccionar el código que realmente escribiste. Combinado con la iniciativa en marcha para ofrecer soporte de primera clase a frameworks JS a través de nuestras herramientas, esto aumentará la productividad para desarrolladores de aplicaciones web modernas.

Los frameworks JS y las herramientas de construcción (build) juegan un rol crítico hoy en día. Frameworks como React, Angular y Ember le permiten a los desarrolladores construir interfaces de usuario declarativas con JSX, directivas y plantillas. Herramientas como Webpack, Babel y PostCSS le permiten a los desarrolladores usar las nuevas características de JS y CSS antes que sean soportadas por los creadores de navegadores. Estas herramientas ayudan a los desarrolladores a escribir código más simple, pero generan código más complicado de depurar.

En el siguiente ejemplo, usamos Webpack y Babel para compilar Módulos ES y funciones asíncronas dentro de JS simple, que puede correr en cualquier navegador. El código original a la izquierda es muy simple. El código generado, compatible con navegadores a la derecha es mucho más complicado.

Archivo original a la izquierda, archivo generado a la derecha.

Cuando el depurador se pausa, usa los mapas de fuentes para navegar desde la línea 13 en el código generado a la línea 4 en el código original. Desafortunadamente, ya que la pausa realmente ocurre en la línea 13, eso puede hacer difícil para el usuario para descubrir cuál es el valor que dancer tiene en ese momento. Moviendo el puntero del ratón sobre la variable dancer retorna undefined y la única manera para encontrar el contexto de dancer es abrir todos los seis contextos en el panel de Contextos seguidos por expandir el objeto _emojis. Este proceso complicado y frustrante es el por qué mucha gente opta por deshabilitar los mapas de fuentes.

Valor de dancer es undefined, seis contextos separados en el panel de Contextos.

Para hacer frente a este problema, formamos un equipo con Logan Smyth para ver si era posible hacer que la interacción se sintiera más natural, como si estuvieras depurando el código original. El resultado es un nuevo motor que mapea los datos de mapas de fuentes con el árbol de sintaxis de Babel para mostrar las variables que esperas ver en la manera que quieres verlas.

El valor correcto de dancer es mostrado, el panel de Contextos muestra un contexto.

Estas mejoras fueron implementadas primero para Babel y Webpack, y actualmente estamos agregando soporte para TypeScript, Angular, Vue, Ember y muchas otras. Si tu proyecto genera fuentes de mapas hay una buena posibilidad para que esta característica funcione para ti.

Para probarlo, sólo dirígete y descarga Firefox Developer Edition. Puedes ayudarnos probando esto en tu propio proyecto y reportando cualquier error. Si quieres seguir adelante, decir hola, o contribuir, también puedes encontrarnos en los canales de devtools en GitHub, Mozilla Discourse o en el Slack de devtools.

Nuestro objetivo para el 2018 es mejorar la vida de los desarrolladores web que desarrollan aplicaciones modernas usando los últimos frameworks, herramientas y mejoras prácticas. Corregir variables es sólo el inicio ¡El futuro es brillante!

Categorías: Mozilla Hispano
Subscribe to Proyecto NAVE aggregator - Mozilla Hispano