Herramientas para subir de nivel (IV): Más calidad y menos calambrazos
Herramientas para subir de nivel (IV): Más calidad y menos calambrazos
Cómo mejorar el resultado de lo que haces sin hacer una gran inversión.
Aquel día no se me olvidará.
Estaba viendo la pantalla de un programador con años de experiencia.
Tenía abierto su editor de código y aparecían unas líneas subrayadas en rojo 🟥.
Pero rojo fuerte, sobre fondo negro, de ese que no solo avisa, espanta.
—Ahí tienes un error
—¿Eso rojo? Pensaba que era un adorno…
El árbol de navidad se lo encontró cuando, al ejecutar el código, pasó lo evidente: La terminal empezó a escupir errores como si le hubieran dado un calambrazo ⚡️
La calidad de lo que haces comienza restringiendo los fallos mientras lo haces.
Son esos que tu computadora sabe que estás cometiendo porque puede estar pendiente de lo que haces mucho mejor que tú.
1️⃣ Textos impolutos
El corrector ortográfico y gramatical está ya hasta en los tamagochis.
Ahora queremos algo más: revisar los estilos, la puntuación, sugerencias para reformular las frases…
👉 Todo esto lo hace, y bien, LanguageTool, que tiene versión gratuita y otra open source.
2️⃣ Detecta lo que falta, no solo lo que sobra
Los modelos generativos de IA han leído tanto que se las saben todas (también inventarse cosas para salir del paso…)
Como están tan preestablecidos, les cuesta poco encontrar los “huecos”.
Prueba a entrar en ChatGPT y pegar allí el email que tienes que enviarle al equipo diciéndoles algo difícil. Pregunta “Qué le falta a este email para explicarme mejor” y obtendrás una mejora.
👉 Lo puedes hacer también con imágenes: pregunta a este ChatGPT si tu aviso de cookies está completo. Ya verás que no.
3️⃣ Eleva la calidad de tu código
Los seres humanos disfrutamos, demasiado, haciendo lo que nos gusta y cómo más nos gusta. Hay gente bien que la tortilla de patata la quiere CON cebolla. Luego está el resto ⚡️
Con el código pasa lo mismo: A unos más los tabuladores, a otros los espacios, que si identación de 2…
Cuando trabajas en equipo eso es el caos. Y una visitilla de gente “simpática” con un bate…
No hay nada más terrible que trabajar en un fichero y, al guardar tus preciosos cambios, ver como todos se mueve de sitio.
(🚩 Al final te revelo una herramienta endemoniada que destroza el código).
Mejorando el proceso
Hay dos formas principales de hacerlo:
Que el código sea más bonito
Que el código sea más limpio (sin errores)
👀 Implantar todo esto funcionará mucho mejor en un proyecto nuevo.
Fichero .editorconfig
Crea unas reglas para aplicar un estilo de codificación concreto compatible con diferentes editores y sistemas operativos.
La codificación de caracteres, por ejemplo, fue durante mucho tiempo una forma de romper el código y las amistades y con este fichero puede regularse.
👉 Crea tu editorConfig (ES)
Prettier
Aunque muchos lenguajes tienen sus propias librerías para “embellecerse” esta es una de las más conocidas.
Da formato al código y se asegura que se mantenga consistente y limpio automáticamente. Soporta múltiples lenguajes, formatos de archivo y editores.
👉 ¿Qué es Prettier? (ES)
ESLint
Ya que nos centramos en desarrollo web este es el analizador de código estático de JavaScript que identifica, según vas escribiendo, los errores que cometes dejándote variables sin usar, sintaxis incorrecta y malas prácticas.
👉 Configura Prettier y ESLint (ES)
Hay muchísimas más opciones. Es imposible verlas todas y en todos los ámbitos en un solo envío.
(👉 Aunque me encantaría saber las tuyas, más abajo, en comentarios 💬)
Busca y dedica tiempo a integrarlas en tu flujo de desarrollo. Te va a cambiar la vida.
Al principio molesta, mucho, que te estén indicando errores, pero a medio plazo comienzas a ver que vas más ágil y que te puedes enfocar en otros aspectos del código.
Te lo digo por experiencia
Estoy sufriendo auténticos calambrazos ⚡️ en Developer contra las cuerdas.
Una saga de audio+vídeo donde estamos desarrollando un proyecto real basado en React con todas las buenas prácticas posibles.
⚡️ Ya tenemos 5 capítulos y el código está en abierto.
🚩 La herramienta endemoniada que NO te recomiendo usar es Shittier: el destrozacódigo.
Contar cómo se aprende desarrollo web y no quedarse en lo básico
Carolina Romero SI lo ha conseguido.
Ella no tiene miedo a equivocarse.
Esto pasa muy pocas veces.
Empezó como todos con una etiqueta HTML. Y ahora despliega en la nube con un comando de terminal.
Pocos Juniors se atreven a hablar de arquitectura web. Carolina lo hace y, además, pone ejemplos.
Testing, paradigmas de programación o qué elegir para crear tu portfolio, su contenido abarca todo lo que alimenta su curiosidad.
Está aprendiendo, pero al triple de velocidad.
Lo interioriza y lo pone en práctica.
Lo cuenta en "Hablemos de desarrollo web".
Sabe lo que te interesa porque compartes su proceso de aprendizaje.
Únete ya a su comunidad con más de 1200 suscriptores.
Las herramientas para subir de nivel en Web Reactiva fueron antes el control de versiones, las automatizaciones con fuerza y la magia del teclado.
Y la próxima semana
💊 Recursos a tutiplén
🕹 JUEGOS
Juego infinito: Infinite Craft
Crea más items a partir de palabras hasta lograr un ser humano. Miles de combinaciones posibles. Sin fin y sin sacar la tarjeta. ¡Te robará la vida!
⚡️ ASOMBROSICO
Un directorio de APIs públicas gratuitas
Desde la de Pokemon hasta las más de 1.000 que contiene esta lista categorizada para que empieces tu nuevo proyecto.
😎 PARA FARDAR
Airclap, envía ficheros entre dispositivos
Multiplataforma, rápido y fácil de usar. En la capa gratuita ya te permite compartir archivos con cualquier dispositivo.
🤖 IA PRÁCTICA
Un Copilot para tu flujo de trabajo
Pieces es un software de IA que va más allá de lo habitual y está orientado a developers: se integra con todo tu sistema operativo y sabe cosas de todo lo que haces.
Animaciones con CSS generadas por IA
Pide y se te concederá. Unas de las mejores integraciones entre lo que pides y el resultado final listo para copiar, pegar y modificar.
🌳 BUENAS PRÁCTICAS
Reemplaza texto en VSC sin preocuparte de las mayúsuclas ni el "case"
Nuestro proveedor de extensiones 🧡 José Manuel nos trae Multiple cursor case preserve. Si haces una selección múltiple ya no tendrás que preocuparte de si el original está en camelCase o snake_case.
🛠 HERRAMIENTAS
Chocolatey, el gestor de paquetes de Windows
A 🧡 Sergi le está gustando esta solución para instalar paquetes y librerías de forma rápida y automatizada en Windows.
Comprime JPG, PNG, GIF de forma múltiple y rápida
Pic Smaller ya las visto antes pero con miles de anuncios y mensajes de limitaciones. Sube una carpeta de imágenes y deja que haga la magia.
🔰 PARA APRENDER
Comparativa entre frameworks de JavaScript y Laravel
Varios son los frameworks de JS que tratan de imitar las ideas y fácilidad de uso del popular Laravel basado en PHP, ¿cuál deberías elegir en tu próximo proyecto?
Comunicación HTTP en JavaScript
Cómo comunicarse con las peticiones, que sí fetch, async/await… Aprende en castellano algo más sobre el protocolo HTTP y como se maneja en el mundo real.
🤸♂️ ALTERNATIVAS OPEN SOURCE
Piku, la alternativa a Dokku para desplegar con un clic
Despliega en tus servidores al estilo heroku, solo con un git push, gracias a esta herramienta open source.
⚓️ BACKEND
SQLite se puede usar también en WordPress
🧡 Israel Escuer nos cuenta en castellano las ventajas de esta base de datos: tantas que incluso el CMS más famoso también puede alojarse allí.
4 cositas rápidas que puedes hacer antes de darte el piro
Corre para ser el primero en contarle a tu red que has descubierto esta newsletter.
Comparte la newsletter en Whatsapp.
Suscríbete a Hablemos de desarrollo web, te gustará lo que cuenta Carolina.
A los algoritmos le gustan los likes y si pulsas ♥️ Substack le enseña la newsletter a más gente. A ti te cuesta cero y a mi me regala un suscriptor ;)
PD: Ver a Devaslife montando su nuevo escritorio “standing” paso a paso con esa delicadeza y elegancia con la que se mueve es para quererlo a él y al escritorio.
#reactivisima321