Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo pensar como un programador

 “No obtengo JavaScript. No puedo fabricar componentes desde cero. Mi mente se queda en blanco cuando miro un archivo JavaScript en blanco. Supongo que no puedo hacerlo porque no sé pensar como programador ”.

¿Suena familiar? No estás solo, amigo. Muchas personas se enfrentan al mismo problema cuando intentan escribir JavaScript.

No más.

Que hoy sea el día en que aprendas a pensar como un programador.

No crees que puedes pensar como un programador

No cree que pueda pensar como un programador porque se congela cuando ve un archivo JavaScript en blanco. Pero ya sabes pensar como programador.

Se trata de usar la lógica para resolver problemas .

Por ejemplo, ¿adónde vas a ir a almorzar hoy? Hay innumerables soluciones. Pero, ¿cómo vas a solucionar este problema?

Una forma de solucionar esto es el proceso de eliminación:

  • No quieres cocinar (entonces comes fuera)
  • No quieres salir (entonces pides comida para llevar)
  • Entonces, opta por Food Panda, Grab, Deliveroo u otro servicio que conozca.
  • Quieres comida saludable (por lo que Macdonalds no es una opción)
  • Encuentra algo que le parece apetitoso.
  • Y pides la comida.

¡Problema resuelto!

Comprenda esto: si puede decidir cómo almorzar usted mismo, puede pensar como un programador.

Cómo detener la congelación cuando ve un archivo JavaScript en blanco

Te congelas cuando te encuentras con un archivo JavaScript en blanco porque piensas en cómo debes estructurar el código .

  • ¿Deberías usar funciones?
  • ¿Deberías usar clases?
  • ¿O tal vez programación orientada a objetos?

A los codificadores les gusta hablar sobre paradigmas de codificación. Así que te atrae la ilusión de que necesitas codificar con UNO de estos paradigmas.

Pero no es así.

No pienses en la estructura .

Superar el bloqueo del codificador es simple. Piense en el problema que desea resolver . Puedes seguir estos cuatro pasos:

  1. Divida el problema en pequeños problemas
  2. Encuentra soluciones a tus pequeños problemas
  3. Reúna las soluciones de manera coherente
  4. Refactorizar y mejorar

La estructura viene en último lugar (durante el cuarto paso, refactorización). Si piensas en la estructura, arruinas tu cerebro incluso antes de comenzar. Pensar en la estructura antes de resolver el problema conduce a un código complicado, abrumador e inflado.

Los errores son tus amigos

Una segunda razón por la que se congela es porque tiene miedo de los errores que aparecen.

No tengas miedo a los errores.

Los errores son tus amigos. Tenemos suerte de tenerlos.

Piense en los diseñadores y otras profesiones, cuando crean algo, es difícil para ellos saber qué está mal en su trabajo.

Pero recibimos comentarios instantáneos a través de mensajes de error. Sabemos instantáneamente si nuestro código funciona. Los errores son como ángeles que nos dicen gentilmente que algo anda mal para que podamos hacer ajustes y corregir las cosas.

Superar el bloqueo del codificador

Piense en el problema que desea resolver. Puedes seguir estos cuatro pasos:

  1. Divida el problema en pequeños problemas
  2. Encuentra soluciones a tus pequeños problemas
  3. Reúna las soluciones de manera coherente
  4. Refactorizar y mejorar

Paso 1: Divida el problema en problemas más pequeños.

¿Cómo se pone un elefante en la nevera?

Esto es lo que respondería la mayoría de la gente:

  1. Abre la nevera
  2. Pon el elefante en
  3. Cierra la nevera

Problema resuelto.

Imagen de un elefante en la nevera
Pobre elefante. Se ve tan triste en la nevera :(

Esta respuesta es el mejor ejemplo de por qué se queda atascado cuando se enfrenta a un archivo JavaScript en blanco. Te saltaste los pasos .

Si piensa lógicamente sobre la pregunta, verá algunos problemas evidentes que siguen sin respuesta:

  1. ¿De qué nevera estamos hablando?
  2. ¿De qué tipo de elefante estamos hablando?
  3. Si el elefante es demasiado grande para caber en el frigorífico, ¿qué haces?
  4. ¿Dónde encuentras al elefante en primer lugar?
  5. ¿Cómo transportas el elefante a tu nevera?

Cuando codifica, debe responder todas las pequeñas preguntas que se le ocurran. Por eso, el primer paso es dividir el problema en pedazos más pequeños.

Paso 2: Encuentra soluciones a tus pequeños problemas.

El segundo paso es encontrar una solución a cada uno de sus pequeños problemas. Aquí, es importante ser lo más detallado posible.

  1. ¿Qué nevera? - la nevera que se encuentra en tu cocina
  2. ¿Qué tipo de elefante? - el elefante africano
  3. ¿Y si el elefante es demasiado grande? - Consigue una pistola retráctil (🔫) para encoger al elefante (😎).
  4. ¿Dónde encuentras al elefante? - África
  5. ¿Cómo transportas al elefante? - Ponlo en tu bolso después de haberlo encogido, luego toma un avión de regreso a casa.

A veces, es necesario profundizar en algunas capas para obtener la respuesta que necesita. En el ejemplo anterior, podemos profundizar en las respuestas 3 y 4.

  1. ¿De dónde sacas la pistola retráctil? - Pedir prestado al científico loco de al lado.
  2. ¿Dónde en África puedes encontrar tu elefante? - Parque de elefantes Addo en Sudáfrica.

Una vez que tenga las respuestas a todos sus problemas más pequeños, júntelos para resolver su gran problema.

Paso 3: Reúna las soluciones de manera coherente.

Entonces, en el ejemplo de poner elefante en el refrigerador, probablemente pueda seguir los siguientes pasos:

  1. Obtenga una pistola retráctil del científico de al lado
  2. Vuela a Sudáfrica
  3. Viajar al parque de elefantes de Addo
  4. Encuentra un elefante en el parque
  5. Dispara al elefante con la pistola retráctil
  6. Pon el elefante encogido en tu bolso
  7. Viaja de regreso al aeropuerto
  8. Vuela de regreso a tu país
  9. Viajar a tu casa
  10. Pon el elefante en tu nevera

Problema resuelto.

Por muy interesante que parezca, no estarías capturando elefantes y poniéndolos en refrigeradores con JavaScript en el corto plazo. En su lugar, veamos un ejemplo real.

Usemos un ejemplo real.

Digamos que desea un botón de creación que, cuando se hace clic, muestra una barra lateral.

Consulte el artículo de Pen Sidebar para pensar como un programador de Zell Liew ( @zellwk ) en CodePen .

Rompiendo el problema

El primer paso para construir este componente de botón y barra lateral es dividir el componente en partes más pequeñas. A continuación, se muestran algunos problemas que puede identificar:

  1. ¿Cuál es el marcado de este botón?
  2. ¿Cómo debería verse el botón?
  3. ¿Qué sucede cuando se hace clic una vez en el botón?
  4. ¿Qué sucede cuando se vuelve a hacer clic en el botón?
  5. ¿Qué sucede cuando se hace clic en el botón por tercera vez?
  6. ¿Cuál es el marcado de esta barra lateral?
  7. ¿Cómo se ve la barra lateral cuando se muestra?
  8. ¿Cómo se ve la barra lateral cuando está oculta?
  9. ¿Cómo se muestra la barra lateral?
  10. ¿Cómo desaparece la barra lateral?
  11. ¿Debería aparecer la barra lateral cuando se carga la página?

Creando soluciones para cada pequeño problema

Para crear soluciones, debe tener conocimiento sobre el medio para el que está creando. En nuestro caso, necesita saber suficiente HTML, CSS y JavaScript.

No se preocupe si no sabe la respuesta a alguna de estas preguntas. Si los ha desglosado lo suficiente, debería poder encontrar una respuesta a través de Google en cinco minutos.

Respondamos cada una de las preguntas:

¿Cuál es el marcado de este botón?

El marcado es una <a>etiqueta con una clase de .btn.

<a href="#" class="btn">Click me</a>

¿Cómo debería verse este botón?

Este botón debe tener el siguiente CSS:

.btn {
  display: inline-block;
  font-size: 2em;
  padding: 0.75em 1em;
  background-color: #1ce;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}

¿Qué sucede cuando se hace clic una vez en el botón? ¿Dos veces? ¿Tres veces?

  • Haga clic una vez: aparece la barra lateral
  • Haga clic dos veces: la barra lateral desaparece
  • Haga clic 3 veces: la barra lateral vuelve a aparecer

¿Cuál es el marcado de esta barra lateral?

La barra lateral debe ser una <div>que contenga una lista de enlaces:

<div class="sidebar">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</div>

¿Cómo se ve la barra lateral cuando se muestra?

La barra lateral debe colocarse a la derecha de la ventana. Debe fijarse en su lugar para que el usuario lo vea. Debe tener 300 píxeles de ancho ...

Cuando termine de resolver el problema, puede terminar con un CSS similar al siguiente:

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: #333;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

.sidebar li + li {
  border-top: 1px solid white;
}

.sidebar a {
  display: block;
  padding: 1em 1.5em;
  color: #fff;
  text-decoration: none;
}

¿Cómo se ve la barra lateral cuando está oculta?

La barra lateral debe desplazarse 300px hacia la derecha, por lo que está fuera de la pantalla.

Cuando responda esta pregunta, otras dos pueden aparecer en su mente:

  1. ¿Cómo saber si la barra lateral se muestra u oculta?
  2. ¿Cómo le das estilo a la barra lateral oculta?

Respondamos a ellos también.

¿Cómo saber si la barra lateral se muestra u oculta?

Si la barra lateral tiene una .is-hiddenclase, la barra lateral debe estar oculta a la vista. De lo contrario, debería ser visible.

¿Cómo le das estilo a la barra lateral oculta?

Usamos translateXpara mover la barra lateral 300px hacia la derecha ya que transformes una de las mejores propiedades para la animación. Tus estilos entonces se convierten en:

.sidebar.is-hidden {
  transform: translateX(300px);
}

¿Cómo se muestra la barra lateral?

La barra lateral no puede aparecer de inmediato. Debe moverse desde la derecha (donde está oculto a la vista) hacia la izquierda (donde se vuelve visible).

Si conoce su CSS, podrá utilizar la transitionpropiedad. Si no lo hace, podrá encontrar su respuesta a través de Google.

.sidebar {
  /* other properties */
  transition: transform 0.3s ease-out;
}

¿Cómo desaparece la barra lateral?

Debería desaparecer de la misma forma que aparece, en la dirección opuesta. Con esto, no tiene que escribir ningún código CSS adicional.

¿Debería aparecer la barra lateral cuando se carga la página?

No Dado lo que tenemos, podemos agregar una is-hiddenclase en el marcado de la barra lateral y la barra lateral debería permanecer oculta.

<div class="sidebar is-hidden">
  <!-- links -->
</div>

Ahora, hemos respondido casi todo, excepto uno: ¿qué sucede cuando se hace clic en el botón una vez? ¿Dos veces? ¿Tres veces?

Nuestra respuesta anterior fue demasiado vaga. Sabemos que la barra lateral debería aparecer cuando haces clic en ella, pero ¿cómo? La barra lateral debería desaparecer cuando vuelva a hacer clic en ella, pero ¿cómo?

En este punto, podemos responder a esta pregunta nuevamente con muchos más detalles. Pero antes de eso, ¿cómo saber cuándo hizo clic en un botón?

Cómo saber cuándo hace clic en un botón .

Si conoce su JavaScript, sabe que puede agregar un detector de eventos al botón y escuchar un clickevento. Si no lo sabe, podrá buscarlo en Google.

Antes de agregar un detector de eventos, debe buscar el botón del marcado con querySelector.

const button = document.querySelector('.btn')

button.addEventListener('click', function() {
  console.log('button is clicked!')
})

¿Qué sucede cuando se hace clic una vez en el botón?

Cuando se hace clic en el botón una vez, debemos eliminar la is-hiddenclase para que aparezca el botón. Para eliminar una clase en JavaScript, usamos Element.classList.removeEsto significa que primero debemos seleccionar la barra lateral.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.remove('is-hidden')
})

¿Qué sucede cuando se hace clic dos veces en el botón?

Cuando se vuelve a hacer clic en el botón, debemos is-hiddenvolver a agregar la clase a la barra lateral para que desaparezca.

Desafortunadamente, no podemos detectar cuántas veces se hace clic en un botón con un detector de eventos. La mejor manera, entonces, es verificar si la clase ya is-hiddenestá presente en la barra lateral. Si es así, lo eliminamos. Si no es así, lo agregamos.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  if (sidebar.classList.contains('is-hidden')) {
    sidebar.classList.remove('is-hidden')
  } else {
    sidebar.classList.add('is-hidden')
  }
})

Y con esto, tienes un prototipo inicial del componente.

Consulte el artículo de Pen Sidebar para pensar como un programador de Zell Liew ( @zellwk ) en CodePen .

Paso final: Refactorizar y mejorar.

El último paso es refactorizar y mejorar su código. Es posible que este paso no le resulte natural en este momento. Se necesita esfuerzo y práctica antes de saber si su código puede mejorarse.

Entonces, una vez que haya terminado con los tres pasos, tome un descanso y trabaje en otra cosa. Cuando mejore con JavaScript, es posible que note que se perdió algunos detalles cuando regrese.

En este ejemplo anterior, puede hacer algunas preguntas más:

  1. ¿Cómo puede hacer que este componente de la barra lateral sea accesible para los usuarios que tienen discapacidades visuales?
  2. ¿Cómo hace que este componente de la barra lateral sea más fácil de usar para las personas con teclados?
  3. ¿Puedes mejorar el código de alguna otra manera?

Para el tercer punto, si buscó en Google un poco más, puede notar que hay un togglemétodo que elimina una clase si está presente. Si la clase no está presente, el togglemétodo la agrega por nosotros:

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.toggle('is-hidden')
})

Terminando

Pensar como programador es sencillo. La clave es saber dividir los problemas en pequeños .

Cuando haya terminado de analizar el problema, busque soluciones para sus pequeños problemas y codifíquelos. En el camino, descubrirá más problemas en los que no había pensado antes. Resuélvalos también.

Cuando termine de escribir sus respuestas a cada pequeño problema, tendrá la respuesta a su gran problema.

Finalmente, el trabajo no está terminado cuando crea su primera solución. Siempre habrá margen de mejora. Sin embargo, lo más probable es que no pueda ver las mejoras en este momento. Tómate un descanso, trabaja en otra cosa y vuelve más tarde. Entonces podrás hacer preguntas aún mejores.

Publicar un comentario

0 Comentarios