Explica tu código en 60 segundos: del fragmento pegado al vídeo dibujado a mano
Publicado · Actualizado · Jakub Kuźnicki
Política de actualización: los datos del producto, las fuentes citadas y las pruebas verificadas se vuelven a validar cuando cambian. Consulta la metodología del autor.
El problema de una descripción de PR de seis párrafos
¿Te imaginas que una función auxiliar de seis líneas decidiera si Google indexaría cuatro de tus páginas de inicio? El pull request que lo corrigió incluía un ensayo de seis párrafos sobre qué se había roto y por qué. Siendo realistas, una persona lo leyó y siguió con su día.
Lo interesante de ese error nunca fue el aspecto del código final. Fue el orden en que había que pensar: primero descubres que existen dos copias de la función auxiliar; después, que una trata una ruta vacía de forma distinta a una sola barra; luego, que las barras finales están desactivadas, y solo entonces entiendes por qué la URL canónica apuntaba a una redirección. Un diff muestra el estado final, no el camino. Un lápiz que escribe línea a línea muestra el camino.
El código
Por eso construí Scribe. Leer código es mejor que mirarlo durante una hora preguntándote qué hace, y verlo escribirse es mejor que ambas cosas.
La previsualización es gratuita. Pegar, ajustar, dibujar y repetir no requiere una cuenta, y no hay límite para la frecuencia. Solo necesitas una cuenta para descargar el vídeo terminado. En el plan gratuito tienes cinco exportaciones por día UTC; se reinician a las 00:00 UTC y llevan una pequeña marca de agua de todrawn.com. Premium elimina el límite y la marca de agua.
Esta es la función auxiliar que causó el problema, tal como estaba antes de la corrección:
function prefixed(locale: AppLocale, path?: string): string {
if (locale === routing.defaultLocale) {
return path || "/";
}
return `/${locale}${path || ""}`;
}Pégala en el campo de texto de Scribe y pulsa reproducir. Son seis líneas, y todo el error vive en la diferencia entre las dos instrucciones return.
Ajustes
Scribe debe adaptarse a más de un flujo, por eso la mayor parte de la imagen se puede ajustar desde el panel Ajustes.
El resaltado ofrece Ninguno, JavaScript, TypeScript, Python, Java o un perfil compartido para C, C++ , C# y Go. Al subir un archivo, el perfil se elige por su extensión, así que un archivo .cs o .go llega ya coloreado. También puedes quitar todo el resaltado y escribir con un solo color de tinta, o colorear a mano un fragmento seleccionado cuando una línea merece atención.
El fondo puede ser Papel o Pizarra oscura, y la elección se aplica a los fotogramas exportados, no solo a la previsualización. Elige el fondo en el que tu audiencia vaya a leer el código.
El lápiz es la parte importante porque es lo que escribe. La velocidad va de la mitad al doble. La pausa entre líneas lo detiene hasta un segundo, que es donde un fragmento deja de ser un bloque y se convierte en una secuencia. En la vista del lápiz 3D, Pen lift determina cuánto sube la punta entre trazos; es un cambio visual, no de tiempo, y no afecta al renderizado plano 2D.
Los identificadores largos suelen impedir que una línea quepa. En modo texto, el tamaño va del 70 al 140 por ciento y el espaciado entre letras llega a 0,2 em. Normalmente basta para mantener un nombre de método largo en una sola línea. El encuadre de cámara hace zoom entre el 75 y el 200 por ciento si prefieres recortar antes que reducir el texto.
El formato puede ser 16:9 horizontal o 9:16 vertical, así que un reel y una página de documentación pueden salir del mismo fragmento. La reproducción se pausa, repite y desplaza cuando quieras, en una línea de tiempo real y no con un único botón. El panel Ajustes recuerda lo que configuraste y ofrece Restablecer si te has alejado demasiado.
Qué funciona y qué no
Las líneas largas se notan, y en vertical duelen más. En un fotograma 9:16 ganan las líneas cortas; si el fragmento insiste en ser ancho, usa 16:9 o recórtalo. Un muro de código es peor que tres líneas con una pausa después de cada una. Los comentarios se leen mejor que los identificadores ingeniosos mientras escribe el lápiz.
30 fps es la opción más fluida, pero la escritura a mano no los necesita. 24 son suficientes y producen un archivo sensiblemente más pequeño, así que 24 es mi valor predeterminado y recurro a 30 solo cuando el lápiz se mueve rápido.
Conviene conocer estos tres límites antes de pegar algo:
- La entrada está limitada a 100 KB y solo se dibujan las primeras 500 líneas.
- La fuente de glifos dibujados a mano es ASCII imprimible. Los caracteres acentuados aparecen como un pequeño cuadro y Scribe te avisa cuando ocurre; ni siquiera mi propio apellido sobrevive a esa limitación.
- El renderizado y la codificación ocurren en tu máquina, así que allí se nota si el clip es largo o el dibujo es denso.
Ese último punto es el intercambio que hay detrás de la previsualización gratuita. Tu texto, tu código, tu dibujo y cada fotograma renderizado permanecen en el navegador; al exportar solo salen el formato y la duración del render, porque el contador diario debe aplicarse en algún lugar. La FAQ lo explica junto con el momento del reinicio.
Cuando un navegador no puede codificar MP4, obtienes WebM y Scribe lo indica en lugar de fallar en silencio. Todos los límites anteriores están en la lista de mejoras; prefiero diseñar alrededor de la condición de no enviar tu código a ningún sitio antes que eliminarla.
Exportar y decidir dónde ponerlo
La exportación puede ser 720p o 1080p, a 24 o 30 fps, horizontal o vertical. Antes de gastar nada, Scribe muestra una estimación de duración, número de fotogramas y megabytes aproximados. Inicia sesión para descargar; la previsualización que te trajo hasta aquí no lo pidió. Si cinco exportaciones al día no bastan, la página de precios ofrece la respuesta honesta.
Después, el archivo tiene que acabar en un lugar donde sea útil. Los míos suelen ir a descripciones de pull requests, cuando el razonamiento importa más que el diff. Las notas de versión son el siguiente hogar: un clip de 40 segundos se ve allí donde un changelog se pasa de largo. Después vienen la página de documentación de esa función que todos interpretan mal, el canal de Slack donde mueren las explicaciones escritas y un hilo de lanzamiento, donde un clip vertical hace algo que una captura no puede.
El vídeo, creado con la herramienta que describe
Este es el fragmento del principio del artículo, exportado directamente desde Scribe. Sin cámara, sin editor y sin grabación de pantalla: solo el lápiz escribiendo el código en el orden que hace evidente el error.
La previsualización es gratuita y no requiere una cuenta. La forma más rápida de juzgar todo esto es pegar tu función peor explicada en Scribe y observar el lápiz. Si funciona, lo sabrás en un minuto. Si no, prefiero saber por qué.
Para consultar las funciones para desarrolladores, revisa los precios y después compara el flujo de un walkthrough de código.