CSS

Por qué (y cómo) escribo código con lápiz y papel | trucos CSS

Si la idea del código escrito a mano parece una tontería, puede que le sorprenda saber que es inevitable. Si no está seguro, piense en la última entrevista de trabajo que hizo y recuerde que no había ninguna computadora en la sala de entrevistas, solo sus entrevistadores. .una hoja de papel en blanco y un bolígrafo azul.

Para los estudiantes entre ustedes, es aún más una tarea, ya que sus calificaciones dependen de las líneas de código que haya colocado estratégicamente en el espacio disponible en la hoja de respuestas.

No solo eso, los programadores experimentados pueden indicarle la pila de hojas A4 que sacaron de la fotocopiadora de la oficina para escribir un algoritmo particularmente complejo en el que han estado trabajando.

Entonces, ya sea que sea un estudiante que está tomando un examen, un potencial entrevistador de trabajo o alguien que busca resolver sus problemas de programación, espero que este artículo lo ayude cuando ponga lápiz en papel para codificar.

Aunque me centraré en el aspecto analógico de la escritura de código, puede aplicar estos pasos a la codificación en cualquier forma o idioma. Considere esto también como una guía de codificación general que funciona específicamente para mí, pero que también puede ser muy útil para usted en su trabajo.

¿Por qué debería grabarlo?

Antes de comenzar, es importante comprender que nadie espera que escriba código listo para producción en un cuaderno. No es como si pudiera colocarlo en un editor de código y compilar sin un error. Si el objetivo fuera crear un código perfecto, estaría sentado frente a una computadora en salas de entrevistas y salas de exámenes.

El propósito del código escrito a mano es trabajar con la lógica por adelantado. Hay un deseo de «en el navegador» tan pronto como sea posible en el diseño, pero existe la sabiduría convencional en el diseño de bocetos a mano. Los medios de baja fidelidad fomentan la experimentación rápida y los errores baratos.

La molestia de tratar de descubrir cómo afectar los elementos circundantes con un solo clic (de mi último artículo)

Lo mismo puede aplicarse al código, especialmente cuando se desarrolla la sintaxis y la semántica. Sin embargo, obtener la sintaxis y la semántica correctas es siempre además, aunque no es el único enfoque de todo el ejercicio de escritura a mano.

Veamos por dónde podemos empezar cuando se trata de escribir código a mano.

Conoce tu pregunta

Durante mi último año de universidad, no pude hacer una pasantía ni siquiera asistir a entrevistas en el campus por motivos de salud. Como resultado, mi primera entrevista de trabajo fue literalmente de alto riesgo.

Mirando hacia atrás ahora, la entrevista fue bastante fácil. Pero como nunca había asistido a uno antes, no tenía ni idea. Lo primero que me preguntaron los entrevistadores sobre la programación fue si podía hacer un triángulo invertido formado por asteriscos. Como dije, eso fue fácil, nada. for el bucle no puede manejarlo, ¿verdad? Pero como dije, mi ansiedad también estaba por las nubes.

Respiré hondo, presioné la hoja en blanco que me habían dado con la palma de la mano, la deslicé lo más lentamente posible hacia mí sobre la mesa (ganando tiempo, por supuesto), chasqueé el bolígrafo y luego hice algo preciso. .

Primero dibujé un triángulo invertido de estrellas, así terminé en el suelo para comenzar a responder su pregunta.

He visto a desarrolladores brillantes arruinar algo simplemente porque nunca entendieron completamente lo que estaban resolviendo.

Las preguntas con las que trabajamos no son como las que resuelven los físicos o los matemáticos. Reciben un conjunto de parámetros y encuentran los que faltan; nuestras preguntas son también nuestros resultados. Ya nos han dicho cuáles son nuestros resultados, necesitamos entender cómo llegar a ellos, por lo tanto, es imperativo que conozca bien la pregunta, porque verá el resultado.

Escribir o dibujar lo que desea generar es una de las mejores maneras de comenzar su codificación. Entiendo que en nuestra industria acelerada, la expectativa es que deberíamos pasar directamente a la programación lanzando una demostración de «hola mundo». Y es excelente para familiarizarse con una sintaxis desconocida y deshacerse de su ansiedad por probar algo nuevo.

Pero cuando alguien te hace una pregunta y te da un resultado para trabajar, ¿no sería mejor escribirlo primero? Esta pregunta/puntuación no es solo su punto de partida, sino también su punto de partida. En cada paso de su codificación, puede revisarlo para asegurarse de que está trabajando para lograrlo y de que va por buen camino.

Entonces, ya sea en sus hojas de respuestas o en esa hoja A4 en blanco en la que está a punto de escribir, comience por tomarse un segundo y escriba lo que está tratando de transmitir. Puede ponerlo en los márgenes o en una esquina si no quiero que sea parte de su respuesta. Solo asegúrese de que esté en algún lugar donde pueda seguir haciendo referencia a él.

Delinea tu código

Este paso es como una espada de doble filo. Puede darle una hoja de ruta para su programa o para perder el tiempo. Mi trabajo es asegurarme de que sea lo primero.

Entonces, antes que nada, quiero decir: El código de esquema es innecesario si el alcance de su problema o pregunta es pequeño. Nuevamente, esta práctica no es prescriptiva ni universal para todos los proyectos o situaciones. Imagina que soy tu entrevistador y te pido que escribas cómo centrar un elemento en una página web usando CSS de tantas maneras como sea posible. No necesitará exactamente un esquema para esto, los fragmentos de código son relativamente pequeños para cada método.

Pero ahora, supongamos que le encargo que escriba una aplicación web que capture las firmas de los usuarios a través de una interfaz de pantalla táctil y luego guarde la firma en el servidor. No es tan fácil, ¿verdad? Tienes más de una cosa que entender. Tal vez, un pequeño esquema puede ayudar.

  1. Interfaz de usuario de captura de firma – ¿Lienzo HTML? ¿WebGL?
  2. Deshabilitar eventos de puntero en el resto de la página web cuando el usuario inicia sesión
  3. Convierta y guarde la imagen capturada en un archivo PNG — JS
  4. Luego conviértalo en un blob (tal vez) y guárdelo en la tabla de datos en el archivo de registro de visitantes.

He escrito una secuencia aproximada de acciones que creo que necesito codificar. Podría ser más corto o más largo dependiendo de lo que quisiera de él.

Recomiendo encarecidamente delinear el código para los proyectos de los clientes. Escriba el esquema junto con sus requisitos personalizados o en la parte posterior de los esquemas que imprimió.

Su vista rápida de viñetas le brinda un mapa, una lista de tareas pendientes y una lista de verificación para marcar cuando llegue al final del proyecto, básicamente un resumen de todo su proyecto en una lista de baja fidelidad. plantilla para comenzar su próximo proyecto similar.

Pero como dije antes, este paso es como una espada de doble filo. Deberá ser breve para los examinados y entrevistados cuando haya limitaciones de tiempo.

Si no sabe por dónde empezar, escriba solo tres funciones principales que necesitará codificar en su aplicación y, si tiene tiempo, que sean cinco.

Pero eso es todo. Dedique el menor tiempo posible a esto y no se preocupe por los detalles. El esquema no le hará ganar puntos extra. Ella solo está allí para ayudarlo a asegurarse de que tenga todo cubierto. Captura su reacción visceral inicial y lo mantiene honesto a lo largo de la vida del proyecto.

Taquigrafía vs Taquigrafía

Papel cuadriculado blanco con notas manuscritas en cursiva con tinta negra.
Referencia rápida para deshabilitar la selección de texto

Es hora de empezar a codificar. Entonces, ¿qué escribes? «Bdrs» o «border-radius«;»div -> p» o «<div><p></div></p>«;»pl()» o «println()«;»q()» o «querySelector()«?

Si alguien más está evaluando su código, entonces no hay otra opción. Abandone las abreviaturas, los pseudocódigos, los atajos de Emmet y cualquier otra forma de taquigrafía. De lo contrario, no hay razón para suponer que cualquiera que lea esto sepa lo que significan sus abreviaturas.

Realmente depende de ti.

Si ha dejado de escribir a mano, y muchos de nosotros lo hemos hecho, es mejor no exagerar con las anotaciones largas, ya que se vuelven tediosas. quieres algún día poder mirar hacia atrás y entender lo que grabaste.

Tengo un archivo abierto en mi aplicación para tomar notas y un cuaderno rayado en mi escritorio donde escribo fragmentos de código que quiero conservar para futuras referencias. Están desorganizados, solo una larga corriente de fragmentos. Es por eso que cuando reviso notas antiguas, no sabría lo que quería escribir si no lo hubiera escrito claramente.

Olvido la sintaxis todo el tiempo. Por ejemplo, he estado usando la notación de flechas para las funciones de JavaScript desde que se introdujo (porque es más corta), y estoy bastante seguro de que si alguien me pidiera de repente que defina una función usando function palabra clave, incluso podría equivocarme en los paréntesis o en el nombre de la función, lo que provocaría un error de sintaxis.

No es raro olvidar la sintaxis que no hemos usado en mucho tiempo. Es por eso que es mejor escribir sus notas claramente cuando sepa que las necesita para futuras referencias.

El flujo inconsistente de código

A diferencia del último paso, que no se aplica a ustedes, los entrevistados y los examinados, este está diseñado específicamente para usted.

La mayoría de los lenguajes de programación se interpretan, compilan y ejecutan, por lo que, a veces, el código preescrito en el código fuente se ejecuta más tarde cuando se lo llama. Lo hacemos en JavaScript, por ejemplo, con una llamada de función: las funciones se pueden definir inicialmente y luego ejecutarse más tarde. Los examinados y los entrevistados pueden usar esto para comenzar a trabajar primero en el punto crítico de su respuesta.

Como dije desde el principio, el propósito del código escrito a mano es procesar o probar la lógica de lo que sea que estés programando. Lo mejor es centrarse primero en resolver el este.

Tomemos un ejemplo clásico de libro de texto: un programa para encontrar el enésimo El número de FibonacciSi tuviera que escribir un esquema simple para ello, sería algo como esto:

  1. Obtener los datos ingresados.
  2. Calcular el número de Fibonacci.
  3. Resume el resultado.
  4. Imprima la salida.

Todos los pasos de este esquema son esenciales, pero los más imperativos son el 1, el 3 y el 4. Son necesarios, pero no lo suficientemente importantes como para concentrarse en ellos de inmediato.

Es mejor comenzar a escribir el código para calcular el número de Fibonacci en lugar de extraer la entrada. Envuélvalo en una función, luego continúe y escriba el código secuencialmente y guarde una línea para llamar a esa función cuando corresponda.

Dedique su tiempo a escribir código que se centre en el corazón del problema.

Los verdaderos profesionales pueden adelantarse. Digamos que tengo un proyecto de cliente y necesito trabajar con geometría de triángulo: tengo dos lados, un ángulo opuesto y necesito encontrar la longitud del tercer lado. Y decidí hacer garabatos en un papel para empezar en lugar de abrir el mío IDE.

Primero, dibujaría el triángulo, por supuesto (algo en lo que tengo mucha experiencia, como puedes ver). Iba a escribir algunos ejemplos de longitudes y ángulos. Luego escribiría la fórmula (complementos de búsqueda en línea, por supuesto) y luego iría directamente al código de la función.

No tiene sentido escribir los pasos necesarios, aunque los necesitaré en código listo para producción. Pero sería diferente si tuviera que escribirlo en una hoja de respuestas del examen. No puedo saltarme los otros pasos; Sin embargo, puedo comenzar con el código de la fórmula.

pseudocódigo

Chris ya ha escrito un artículo útil sobre pseudocódigo que le recomiendo que lea detenidamente.

Para todos aquellos profesionales que piensan que todo el código escrito a mano no parece su taza de té, pero aún pueden tener curiosidad si puede ayudarlos, entonces pseudocódigo podría ser el equilibrio que estás buscando.

Es similar al esquema del código que mencioné en uno de los pasos anteriores. Sin embargo, es más corto y se parece más a una codificación abreviada. A veces también llamado «código esqueleto».

Aquí hay un pseudocódigo de diseño de cuadrícula CSS rápido:

Grid
5 60px rows
6 100px columns

¡No hay mucho sobre lo que escribir! Entonces, si bien poner lápiz sobre papel es excelente para este tipo de cosas, es igual de eficiente, rápido y económico escribir un pseudocódigo en cualquier programa que esté usando.

Espacio y comentarios

Creo que el código es 90% palabras clave y 10% pestañas. Sin espacios, la legibilidad de las palabras disminuye. Las sangrías también son necesarias para el código escrito a mano. Sin embargo, no lo use para todos los niveles porque el ancho del papel lo limitará. Usa los espacios sabiamente, pero úsalos.

Papel amarillo sin rayas con código escrito a mano en cursiva con tinta negra.
Una pieza OG preciada escrita con TLC extra

Si está escribiendo código para su propio uso, también creo que si siguió todo lo que he mencionado hasta ahora y ya guardó su salida y diseño de página, es posible que ni siquiera necesite incluir comentarios. para decirle rápidamente lo que hace el siguiente conjunto de código. Si ya ha escrito y leído un esquema del código, los comentarios son notas redundantes.

Sin embargo, si el juicio le dice que registre uno, entonces hágalo. Agréguelo al lado derecho del código (ya que no podrá insertarlo entre las líneas ya escritas de la forma en que podría, por ejemplo, VS Code) Use barras inclinadas, corchetes o flechas para indicar que son comentarios.

Para los examinados que no estén seguros de una sintaxis particular, registre los comentarios. De esta manera, al menos, permite que la persona que evalúa su trabajo comprenda su intención con este código mal formado. Y use solo los delimitadores correctos para delimitar los comentarios, p. , estas serían las barras para JavaScript.

Analógico vs. Digital

Como mencioné anteriormente, todo lo que brindo aquí puede ser un consejo general de codificación. Si no quieres probar esto con papel físico, cualquier aplicación para tomar notas también funciona.

Pero si vas a probar la ruta digital, mi recomendación es probar algo que no sea una aplicación simple para tomar notas. Trabaje con más herramientas digitales visuales: diagramas de flujo, mapas mentales, estructuras alámbricas, etc. Pueden ayudarlo a visualizar su salida, el esquema y el código en sí.

No soy un ciudadano digital (aparte de trabajar en la web y cambiarme recientemente a la lectura de libros electrónicos), por lo que me limito a los cuadernos físicos.

Mis herramientas favoritas de código escrito a mano

¡Cualquier lápiz y papel servirán! Pero hay muchas opciones, y estas son algunas de las herramientas de selección que utilizo:

No hay manera de escribir código.

Espero, al menos, que mi pequeña forma de escribir código a mano con lápiz y papel le haga apreciar la forma en que ya planifica y escribe el código. Me gusta saber cómo otros desarrolladores enfocan su trabajo y esta es mi forma de darle un vistazo a la forma en que hago las cosas.

Nuevamente, nada aquí es arte científico o preciso. Pero si desea probar la planificación de código manual, aquí está todo lo que cubrimos en una lista bien ordenada:

  1. Comience por registrar (con datos de muestra si es necesario) la salida de su código.
  2. Escribe un esquema para el código. Manténgalo en tres pasos para proyectos pequeños o menos complejos.
  3. Usa notaciones largas. Los desarrolladores que escriben para sí mismos pueden usar taquigrafía, siempre que la escritura sea legible y tenga sentido para usted cuando la consulte más adelante.
  4. Cuando tenga limitaciones de tiempo, considere escribir primero el código que trata con el corazón del problema. Posteriormente, escriba una llamada a este código en el lugar correcto de su código secuencial.
  5. Si se siente seguro, intente escribir algún pseudocódigo que aborde la idea principal.
  6. Use sangrías y espacios adecuados, y tenga cuidado con el ancho del papel.

¡Está! Cuando esté listo para intentar escribir código a mano, espero que este artículo le facilite el comienzo. Y si está realizando un examen o una entrevista, espero que esto lo ayude a concentrarse en responder correctamente las preguntas.

Deja una respuesta

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

Botón volver arriba