Explícame las primeras 10 líneas del código fuente de Twitter trucos CSS

En las últimas semanas, contraté a un ingeniero senior con un conjunto completo de JavaScript de mi empresa de alquiler de muebles, Pabio. Como somos un equipo remoto, hacemos nuestras entrevistas de Zoom y me he dado cuenta de que algunos desarrolladores no son buenos para la programación en vivo o las entrevistas de pizarra, incluso si son buenos en el trabajo. Entonces, en cambio, tenemos una discusión técnica de una hora en la que les hago preguntas sobre el rendimiento de la red, la accesibilidad, la guerra de navegadores y otros temas de red similares. Una de las preguntas que siempre me gusta hacer es: «Explícame las primeras diez líneas del código fuente de Twitter».

Creo que esta es una prueba simple que me dice mucho sobre la profundidad del conocimiento previo fundamental que tienen, y este artículo enumera las mejores respuestas.

Como contexto, comparto mi pantalla, abro Twitter.com y hago clic en ver la fuente. Luego les pido que vayan línea por línea para ayudarme a entender HTML, y pueden decir tanto o tan poco como quieran. También hago zoom para que el texto sea más legible para que no veas la línea completa, pero te hagas una idea. Esto es lo que parece:

Tenga en cuenta que dado que nuestra discusión técnica es una conversación. No espero una respuesta perfecta de nadie. Si escucho algunas palabras clave correctas, sé que el candidato conoce el concepto y trato de orientarlo en la dirección correcta.

línea 1: <!DOCTYPE html>

La primera línea del código fuente de cada documento es ideal para esta entrevista debido a lo mucho que sabe el candidato sobre DOCTYPE la declaración es muy similar a cuántos años de experiencia tienen. Todavía recuerdo mis días de Dreamweaver con la larga línea XHTML DOCTYPE, como Chris enumeró en su artículo de 2009 «Common DOCTYPES».

Respuesta perfecta: Esta es la declaración de tipo doc, que siempre ponemos primero en los archivos HTML. Puede pensar que esta información es redundante porque el navegador ya sabe que el tipo de respuesta MIME es text/html; pero en los días de Netscape/Internet Explorer, los navegadores tenían la difícil tarea de averiguar qué estándar HTML usar para mostrar una página de múltiples versiones competidoras.

Esto fue particularmente molesto porque cada estándar generaba un diseño diferente, por lo que se adoptó esta etiqueta para facilitar los navegadores. Previamente, DOCTYPE las etiquetas eran largas e incluso incluían un enlace a la especificación (algo así como SVG hoy), pero afortunadamente el simple <!doctype html> fue estandarizado en HTML5 y sigue vivo.

También aceptado: Está DOCTYPE etiqueta para notificar al navegador que esta es una página HTML5 y debe mostrarse como tal.

línea 2: <html dir="ltr" lang="en">

Esta línea en el código fuente me dice si el candidato sabe acerca de la accesibilidad y la ubicación. Sorprendentemente, solo unas pocas personas sabían sobre dir atributo en mis entrevistas, pero es una gran transición a una discusión de lector de pantalla. Casi todos entendieron lang="en" atributo, incluso si no lo ha usado antes.

Respuesta perfecta: Este es el elemento principal de un documento HTML y todos los demás elementos están dentro de este. Aquí tiene dos atributos, dirección y lenguaje. El atributo de dirección tiene un valor de izquierda a derecha para indicar a los agentes de usuario en qué dirección está el contenido; otros valores son de derecha a izquierda para idiomas como el árabe o simplemente auto lo que deja que el navegador lo entienda.

El atributo de idioma nos dice que todo el contenido de esta etiqueta está en inglés; puede establecer este valor en cualquier etiqueta de idioma, incluso para distinguir en-us y en-gbpor ejemplo. Esto también es útil para que los lectores de pantalla sepan en qué idioma anunciar.

fila 3: <meta charset="utf-8">

Respuesta perfecta: La etiqueta meta en el código fuente es para proporcionar metadatos para este documento. El atributo char-set le dice al navegador qué codificación de caracteres usar, y Twitter usa la codificación UTF-8 estándar. UTF-8 es excelente porque tiene muchos puntos de caracteres, por lo que puede usar todo tipo de caracteres y emojis en su código fuente. Es importante colocar esta etiqueta cerca del comienzo de su código para que el navegador no comience a analizar demasiado mucho texto cuando se trata de esta línea; Creo que la regla es ponerlo en el primer kilobyte del documento, pero diría que la mejor práctica es ponerlo justo en la parte superior del documento. <head>.

Como nota al margen, Twitter parece estar perdiendo <head> un marcador por motivos de rendimiento (menos código de arranque), pero aún me gusta hacerlo explícitamente, ya que es un hogar claro para todos los metadatos, estilos, etc.

línea 4: <meta name="viewport" content="width=device-...

Respuesta perfecta: Esta metaetiqueta en el código fuente es para dimensionar correctamente una página web en pantallas pequeñas, como los teléfonos inteligentes. Si recuerdan la nota original para el iPhone, Steve Jobs mostraba toda la web del New York Times en esta pequeña pantalla de 4,5 pulgadas; entonces era una característica increíble que tenías que pellizcar para acercar y poder leer.

Ahora que los sitios web tienen un diseño receptivo, width=device-width le dice al navegador que use el 100% del ancho del dispositivo como vista para que no haya horizontal desplazarse, pero incluso puede establecer valores de ancho de píxel específicos. La mejor práctica estándar es establecer la escala inicial en 1 y ancho hasta device-width para que la gente todavía pueda acercarse si lo desea.

La captura de pantalla del código fuente no muestra estos valores, pero es bueno saberlo: Twitter también aplica user-scalable=0 que, como sugiere su nombre, desactiva la capacidad de escalar. Esto no es bueno para la accesibilidad, pero hace que la página web se parezca más a una aplicación nativa. el tambien pregunta maximum-scale=1 por la misma razón (puede usar la escala mínima y máxima para fijar la posibilidad de ampliación entre estos valores) En general, es suficiente establecer el ancho completo y la escala original.

línea 5: <meta property="og:site_name" content="Twitt...

Alrededor del 50 % de todos los candidatos conocían las etiquetas de Open Graph y una buena respuesta a esta pregunta demuestra que saben de SEO.

Respuesta perfecta: Esta etiqueta es una metaetiqueta Open Graph (OG) para el nombre del sitio, Twitter. El protocolo Open Graph está hecho por Facebook para facilitar el desarrollo de enlaces y mostrar sus visualizaciones en un diseño de mapa agradable; los desarrolladores pueden agregar todo tipo de detalles de autoría e imágenes de arte de portada para compartir de manera fantástica. De hecho, hoy en día es incluso común generar automáticamente una imagen gráfica abierta usando algo como Puppeteer. (CSS-Tricks usa un complemento de WordPress que lo hace).

Otra nota al margen interesante es que las metaetiquetas suelen tener name atributo, pero OG usa el no estándar property atributo. ¿Supongo que solo Facebook es Facebook? El título, la URL y la descripción de las etiquetas Open Graph son un poco redundantes porque ya tenemos metaetiquetas regulares para ellas, pero las personas las agregan solo para estar seguros. La mayoría de los sitios hoy en día usan una combinación de Open Graph y otras etiquetas meta y contenido de página para generar visualizaciones ricas.

línea 6: <meta name="apple-mobile-web-app-title" cont...

La mayoría de los solicitantes no lo sabían, pero los desarrolladores experimentados pueden hablar sobre cómo optimizar un sitio web para dispositivos Apple, p. apple-touch-icons y pestañas ancladas SVG en Safari.

Respuesta perfecta: Puede anclar un sitio web a la pantalla de inicio de su iPhone para que se sienta como una aplicación nativa. Safari no admite aplicaciones web progresivas, y en realidad no puede usar otras máquinas en el navegador iOS, por lo que realmente no tiene otras opciones si desea esta experiencia nativa, que a Twitter, por supuesto, le gusta. Entonces agregaron esto para decirle a Safari que el título de esta aplicación es Twitter. La siguiente línea es similar y controla cómo debería verse la barra de estado cuando se inicia la aplicación.

línea 8: <meta name="theme-color" content="#ffffff"...

Respuesta perfecta: Este es el equivalente correcto de los estándares web de la metaetiqueta de color de la barra de estado de Apple. Le dice al navegador que coloque un tema en la interfaz de usuario circundante. Android Chrome y Desktop Brave hacen un buen trabajo al respecto. Puede poner cualquier color CSS en el contenido e incluso puede usarlo media un atributo para mostrar este color solo para una aplicación de medios específica, como la compatibilidad con temas oscuros. También puede definir esta y otras propiedades en el manifiesto de la aplicación web.

línea 9: <meta http-equiv="origin-trial" content="...

Nadie a quien entrevisté lo sabía. Supongo que solo sabrá esto si tiene un conocimiento profundo de todas las cosas nuevas que están sucediendo según los estándares.

Respuesta perfecta: Las versiones de prueba de Origin nos permiten usar funciones nuevas y experimentales en nuestro sitio, y el agente de usuario realiza un seguimiento de los comentarios y los informa a la comunidad de estándares web sin que los usuarios tengan que optar por un indicador de función. Por ejemplo, Edge tiene una prueba inicial para primitivas de doble pantalla y un dispositivo plegable, lo cual es genial, ya que puedes hacer diseños interesantes en función de si el teléfono plegable está abierto o cerrado.

También aceptado: No sé sobre este.

línea 10: html{-ms-text-size-adjust:100%;-webkit-text...

Casi nadie lo sabía tampoco; solo si conoce los casos extremos y las optimizaciones de CSS, podrá comprender esta línea.

Respuesta perfecta: Imagina que no tienes un sitio compatible con dispositivos móviles y ábrelo en una pantalla pequeña para que tu navegador pueda cambiar el tamaño del texto para hacerlo más grande y que sea más fácil de leer. CSS text-size-adjust La propiedad puede deshabilitar esta función con un valor de ninguno o especificar un porcentaje hasta el cual el navegador puede agrandar el texto.

En este caso, Twitter dice que el máximo es 100%de modo que el texto no debe ser más grande que el tamaño real; simplemente lo hacen porque su sitio ya responde y no quieren arriesgarse a que el navegador rompa el diseño con un tamaño de fuente más grande. Esto se aplica a la etiqueta HTML básica, por lo que se aplica a todo lo que contiene. Debido a que esta es una función experimental de CSS, se requieren prefijos de proveedor. también falta <style> antes de este CSS, pero supongo que está minimizado en la fila anterior y no lo vemos.

También aceptado: No sé específicamente sobre esta propiedad, pero -ms y -webkit- son prefijos de proveedor requeridos por Navegadores basados ​​en Internet Explorer y WebKit para funciones personalizadas. Solíamos requerir estos prefijos cuando salió CSS3, pero debido a que las propiedades cambian de experimental a estable o se aceptan en una canción estándar, estos prefijos se retiran a favor de una propiedad estandarizada.

Bonificación – línea 11: body{margin:0;}

Esta línea de código fuente de Twitter es especialmente divertida porque puedes seguir la pregunta de la diferencia entre resetear y normalizar una página web, casi todos conocían la versión de la respuesta correcta.

Respuesta perfecta: Debido a que los diferentes navegadores tienen diferentes estilos predeterminados (hoja de estilo del agente de usuario), desea sobrescribirlos restableciendo las propiedades para que su sitio se vea igual en todos los dispositivos. En este caso, Twitter le dice al navegador que elimine el campo predeterminado de la etiqueta del cuerpo. Esto es solo para reducir las inconsistencias en el navegador, pero prefiero normalizar los estilos en lugar de restablecerlos, es decir. aplique la misma configuración predeterminada a todos los navegadores en lugar de eliminarlos por completo. La gente incluso lo usó * { margin: 0 } que es completamente redundante y no muy bueno para el rendimiento, pero ahora es común importar algo como esto normalize.css o reset.css (o incluso algo más nuevo) y comience desde allí.

¡Más líneas!

Siempre es agradable jugar con la herramienta de navegación Inspector para ver cómo se crean los sitios, así que se me ocurrió la idea. Aunque me considero un experto en HTML semántico, aprendo algo nuevo cada vez que hago este ejercicio.

Debido a que Twitter es principalmente una aplicación de cliente React, solo hay unas pocas docenas de líneas en el código fuente. Incluso con eso, ¡hay mucho que aprender! Hay unas cuantas líneas más interesantes en el código fuente de Twitter, que te dejo como ejercicio para ti, lector, ¿cuántas de ellas podrías explicar en una entrevista?

<link rel="search" type="application/opensearchdescription+xml" href="https://css-tricks.com/opensearch.xml" title="Twitter">

… les dice a los navegadores que los usuarios pueden agregar Twitter como motor de búsqueda.

<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />

… hay muchos atributos interesantes que se pueden discutir, especialmente nonce.

<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />

… para páginas de destino internacionales.

:focus:not([data-focusvisible-polyfill]){outline: none;}

… para eliminar el contorno de enfoque cuando no se utiliza la navegación con teclado (CSS) :focus-visible el selector se llena repetidamente aquí).

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

rtp live