Bienvenidos a la comunidad freeCodeCamp de Montevideo!!


## Volvemos a la carga!

Después de mucho tiempo estoy de vuelta escribiendo un post, esta vez es para compartirles como re-implemente este mismo sitio en una serie de directos en mi canal de [Twitch](https://www.twitch.tv/matiasvj91).

Espero que esto sea el principio de una etapa mas activa en la generación de contenido y la participación de la comunidad. Ojalá les guste como quedo el nuevo look, que puedan aprender algo viendo como lo hice, a los problemas que me enfrenté y como los resolví.

Por supuesto cualquier consulta o feedback es bienvenido y lo pueden hacer en el [grupo de facebook](https://www.facebook.com/groups/free.code.camp.montevideo) :)

## Tecnologías usadas

Como dice el titulo de este post las principales tecnologías elegidas fueron [Nextjs](https://nextjs.org) y [Tailwindcss](https://tailwindcss.com), la elección de este stack en particular se dió por la gran productividad que brindan pero también porque hace tiempo quería poder implementar algo y ganar mas practica. Por supuesto que el código esta disponible en [GitHub](https://github.com/MatiasVerdier/fccmvd) para que todos lo puedan ver.

### Nextjs

Es un framework de React que se caracteriza por su facilidad de uso y gran experiencia de desarrollo.
Dentro de sus principales características esta la de poder expresar las rutas de tu aplicación o sitio simplemente creando una estructura de carpetas y archivos dentro del directorio [pages](https://nextjs.org/docs/basic-features/pages), estas carpetas y archivos serán mapeados a las urls correspondientes, todo esto sin tocar una sola linea de código.

Esto es solo una de toda la cantidad de funcionalidades que incluye, sin duda lo recomiendo si quieren crear aplicaciones o sitios de forma fácil y rápida. Para ver todo lo que se puede crear pueden darse una vuelta por la página de [showcase](https://nextjs.org/showcase).

### Tailwindcss

Es un framework css que adhiere a la filosofía [utility-first](https://tailwindcss.com/docs/utility-first), es decir se basa en la composición de clases utilitarias para crear tus diseños en vez de traer componentes completos como puede ser el caso de Bootstrap o similares.

De todas maneras yo utilice también unos componentes que son parte de [TailwindUI](https://tailwindui.com), un producto de pago en el cual se proporcionan excelentes ejemplos de componentes comunes y diversos layouts para poder usar en tus aplicaciones y sitios.

### Mas cosas

También utilicé [MDX](https://mdxjs.com/) para poder escribir los artículos en Markdown y tener la posibilidad de incluir componentes React dentro del mismo, aunque aun no lo he utilizado en el sitio.

Otra librería interesante que uso en el sitio es [date-fns](https://date-fns.org/) para lo que es todo el manejo de fechas.

## Los directos

Sin mas los dejo con la serie de directos que quedaron re-subidos en mi canal de [YouTube](https://www.youtube.com/channel/UCDVIsMWkPRkU7qh_jCwIo9g). Cabe mencionar que el sitio ya ha tenido cambios y mejoras desde que hice estas sesiones de live coding por lo que algunas cosas no son exactamente iguales a lo que se ve en los videos.

https://www.youtube.com/watch?v=7qMgVYGY-UE

https://www.youtube.com/watch?v=dFxsyGab3X0

https://www.youtube.com/watch?v=Q9VJh41knuM

https://www.youtube.com/watch?v=2TrtP7l3bcI


Compartimos el proceso de re-implementación de este sitio usando Next.js y Tailwindcss que se llevo a cabo en varios directos.

Re-implementando el sitio con Next.js y Tailwindcss


Los que trabajamos en alguna rama de IT, prácticamente todos los días, tenemos esa clase de preguntas que Informes20 no puede contestar:

¿Cómo se hacía en Linux para que un proceso se ejecute al iniciar el sistema?
¿Qué fue lo que hice aquella vez para solucionar este problema con las librerías de Java?
¿Qué parte del registro de Windows había que tocar para cambiar el nombre de la carpeta de usuario?

https://www.youtube.com/watch?v=98LJpyhrR3Q

## Tu cerebro no es bueno en eso

Por supuesto que el Informes20 de hoy es Google, y que Google sí puede contestar estas preguntas.

**¿Pero por qué perder tiempo buscando de nuevo algo que ya habíamos encontrado antes? ¿No nos haríamos un favor a nosotros mismos si registráramos en un sólo lugar todo nuevo conocimiento que se nos cruza por delante?**

Si tu trabajo (o hobbie) es ser informático (ya sea programador, administrador de sistemas, diseñador web, etc.), sabés que todo lo que hay para aprender dentro de tu campo de experiencia es prácticamente infinito, inabarcable. Cuánto más si considerás lo que hay por fuera de tus dominios.
Y aún eso que está por fuera de tus dominios, en algún punto vas a necesitar manejarlo. O sino, ¿a qué programador no le ha tocado instalar librerías desde la linea de comandos? ¿O qué sysadmin no ha tenido alguna vez programar en un lenguaje desconocido? Todos manejamos, en base diaria, una cantidad de conocimiento inabarcable para la mente humana.

Hace unos meses me tocó asistir a una charla para emprendedores que dio [Ana Spósito](https://twitter.com/analaurasposito 'Ana Spósito Twitter') en Espacio Serratosa y ahí escuché una frase sobre la forma en que gestionamos nuestra lista de tareas pendientes que, irónicamente, no pude olvidarme: "nuestros cerebros son buenos generando ideas, pero no tanto recordando cosas". Así que su sugerencia fue que anotemos y organicemos absolutamente todo lo que tengamos pendiente hacer mejor nuestro trabajo.

Lo mismo aplica para todo lo que aprendemos diariamente. De repente nos enfrentamos a un determinado problema: lo estudiamos, le buscamos la vuelta, googleamos un buen rato y probamos distintas soluciones hasta que por fin damos en la tecla.
Pero una vez superado el inconveniente, si te he visto no me acuerdo.
¿Y qué pasa cuando un tiempo después se nos presenta de nuevo? Lo inevitable. Volvemos a repetir el proceso, lamentando no haber tomado nota la vez anterior.

## "Pero yo escribo en mi blog"

Todo esto se puede evitar de una forma muy fácil: registrar todo lo que aprendemos. Sí, todo. Cada línea de comando. Cada vuelta de tuerca. Cada tornillo que ajustamos. Todas y cada una de las artimañas que esconde nuestra profesión correspondientemente documentada para su posterior consulta.

"Bueno -me dirá alguno-, para eso me hice un blog". A lo que yo sacudiría la cabeza lentamente y le contestaría con mansa y fingida sabiduría ancestral: "eso no es suficientemente bueno, mi pequeño saltamontes".
Escribir en un blog es bueno para una cosa y sólo una: comunicar. Acá yo estoy hablando de algo mucho más básico y práctico que comunicar.
Hablo de registrar, documentar.

En la comunicación no sólo se presta atención al contenido, sino también a la forma. Nadie quiere que su blog sea un plomo que espante a los lectores, y por lo tanto se gasta tiempo y energía en embellecer el discurso y las formas.
Si mañana encuentro que mi problema con las dichosas librerías de Java se resuelve en dos patadas cambiando un guión por un punto en el nombre de un archivo (como me pasó una vez), no me voy a sentir inclinado a escribir un bonito post sobre mi hallazgo, porque voy a pensar que no vale la pena hacer que mis lectores se gasten en leer sobre un problema tan básico, ¿o no? Y de esa forma el nuevo conocimiento, esa mínima vuelta de tuerca que hace que todo funcione como debería, queda condenado al olvido en algún rincón de mi cerebro.

Así que hay que buscar una solución más inmediata. Una en la que pueda escribir esto nuevo que acabo de descubrir, sin que me importe el cómo, la forma, o que quede "lindo" para el ojo.
¿Un archivo de block de notas? Muy desorganizado. ¿Un cuaderno donde escribir a mano? Aunque me gustan las soluciones analógicas, en este caso necesitamos poder consultar y encontrar rápidamente, así que no.

¿Y una especie de wikipedia personal? ¡Ahá! Creo que dimos en el clavo.

Quizás no todo el mundo lo sepa, pero Wikipedia ofrece para todo el que lo quiera descargar, gratis, el mismo software se utiliza en Wikipedia.org, el cual se puede conseguir acá: www.mediawiki.org

Es relativamente fácil de instalar, y uno vez logrado, tenemos una Wiki personal que podemos llenar con todo lo que queramos o necesitemos.

## Predicando con el ejemplo

Yo desde hace un tiempo tengo mi propia Wiki donde voy poniendo todo lo que aprendo. En un principio sólo podía acceder a ella localmente desde mi PC.
Pero después de un tiempo me pareció bueno hacerla pública, en un subdominio dentro de mi web personal, y eso por dos motivos. Primero, poder acceder a ella desde cualquier lugar (por ejemplo en mi trabajo, donde no tengo mi PC). Pero también para abrir la cancha, y que todo aquel que quiera consultarla, pueda hacerlo.
Es más. Si se quiere, la gente podría registrarse como en cualquier web pública y empezar a aportar también, porque quizás no todo el mundo tiene el tiempo o las ganas de armarse su propio lugar de documentación.

Pueden visitarla acá: [Ir a mi Wiki](http://wiki.matiascreaweb.uy 'Matias Wiki')

De momento el contenido es muy poco, pero pretendo mantenerme constante subiendo todo lo que aprendo día a día, haciéndola así cada vez más útil, primero para mí mismo y después para todo el que le sirva.

## Otros buenos ejemplos

En mi deambular por internet he visto que otras personas con muchísimo más conocimiento y experiencia que yo han adoptado esta buena práctica, he incluso la han llevado mucho más allá.

Un buen ejemplo de esto es la web de un consultor económico que dedica su web a documentar y enseñar sobre diversas tecnologías. Esta web no es exactamente una Wiki (más bien tiene el formato clásico de un blog) pero la idea es la misma. Yo la consulto bastante seguido y me ha dado más de una alegría en momentos de ignorancia supina:

[Alvin Alexander](http://alvinalexander.com/ 'Alvin Alexander')

Otro buen ejemplo es esta web (ésta sí es una Wiki) que encontré más recientemente. Aún no la he recorrido mucho pero tiene cosas interesantes a primera vista:

[Noah's Neurosphere](http://www.noah.org/wiki/Category:Engineering "Noah's Neurosphere")

Y por último, otra al estilo blog, pero igual de interesante que el resto:

[Life of a Computer Scientist](http://lifecs.likai.org/ 'Life of a Computer Scientist')

## Conclusión

No importa cuántos años de lleves en el campo de la informática. Siempre va a haber cosas que aprender, y esas cosas tienden a perderse en un agujero negro a menos que las documentes.

¿Por qué empezar ya mismo a hacerlo? Porque cuanto antes empieces, menos vas a tener que lamentarte luego de las cosas que se te olvidaron en el camino.


O mejor, ¿por qué perder tiempo buscando de nuevo algo que ya habíamos encontrado antes?

Tu blog no es suficiente


### Practica todo lo que puedas

Sin dudas en la programación como en la mayoría de las cosas la practica hace al maestro, por lo tanto deberas dedicar mucho tiempo en esta tarea para perfeccionar tus habilidades y aprender cosas nuevas continuamente.

Una de las formas de practicar es ponernos a prueba mediante desafíos o retos de programación que nos hagan pensar y aplicar los conocimientos que disponemos en resolver problemas y no simplemente siguiendo un tutorial paso a paso o realizando tareas mas mecánicas que realizamos de forma cotidiana.

<div className="bg-indigo-50 border-l-4 border-indigo-400 p-4">
  <div className="flex">
    <div className="ml-3">
      <p className="text-indigo-700">
        <strong className="text-indigo-700">Actualizacion: </strong> Si bien los
        algoritmos son una buena forma de practicar, recomiendo el siguiente
        articulo donde explico una mejor forma de{' '}
        <a
          href="https://matiasverdier.com/posts/como-ganar-experiencia-como-developer-sin-tener-trabajo"
          rel="noopener noreferrer"
          target="_blank"
        >
          ganar experiencia real aunque no tengas un trabajo
        </a>
      </p>
    </div>
  </div>
</div>

### Algoritmos al rescate

Un algoritmo es un conjunto de pasos o instrucciones que nos permiten resolver un problema, requieren de entender el problema que tenemos enfrente y encontrar la solución empleando las herramientas que disponemos.
Hoy en día existen muchas paginas donde podemos acceder a una cantidad innumerable de desafíos que resolver ya sea de forma tranquila tomando todo el tiempo necesario o compitiendo con otras personas o contra una inteligencia artificial.

### Sitios recomendados (Sin orden especifífico)

#### [freeCodeCamp](https://freecodecamp.com)

![](/img/posts/freecodecamp.png)

Sin duda que el sitio de freeCodeCamp no podía faltar en esta lista, ya que ademas de que esta comunidad haya nacido gracias a este sitio, cuenta con una gran cantidad de ejercicios donde tendrás que aplicar los conocimientos de JavaScript para hallar una solución al problema planteado ademas de servirte para obtener las distintas certificaciones que ofrece.

#### [Code Fights](https://codefights.com/signup/cHn3heTHBzpfWPyii/main)

![](/img/posts/codefights.png)

Muy buena plataforma donde podrás practicar resolviendo desafíos en varias modalidades, como pueden ser mano a mano, torneos, competir contra bots creados por conocidas empresas del rubro, resolver problemas planteados en entrevistas reales, conseguir ofertas laborales y mucho mas. Puedes utilizar una gran cantidad de lenguajes para realizar los ejercicios.

#### [CodinGame](https://www.codingame.com/servlet/urlinvite?u=1627701)

![](/img/posts/codingame.jpg)

Sin duda una plataforma muy innovadora que te permitirá aprender mucho mientras compites, juegas y te diviertes resolviendo problemas tanto para principiantes como para expertos, también participar en tornes internacionales por grandes premios y reconocimiento, sin duda uno de los precursores en el área de la programación competitiva.

#### [Hacker Rank](https://www.hackerrank.com)

![](/img/posts/hackerrank.png)

Muy buena plataforma con gran cantidad de desafíos y tutoriales en diversas áreas de la programación como matemáticas, algoritmos, estructura de datos, programación funcional, bases de datos, inteligencia artificial, etc. También cuenta con varias modalidades de concursos y un inmenso catalogo de lenguajes de donde elegir.

#### [Code Wars](https://www.codewars.com)

![](/img/posts/codewars.png)

Descubre el ninja que hay en ti, esta plataforma cuenta con muy buenos desafíos en diversos lenguajes. Podrás ir ganando experiencia y subiendo de nivel, ser parte de un clan y mucho mas.

#### [Code Combat](https://codecombat.com)

![](/img/posts/codecombat.png)

Sitio para aprender programación de una forma sumamente divertida mediante un juego de rol donde deberas usar tus habilidades para controlar a tu héroe e ir atravesando los distintos niveles del juego, obteniendo mejoras en tu equipamiento y logros. Especialmente bueno para los que recién comienzan.

#### ¿Qué otros sitios conoces?

No dudes en comentar si conoces algún otro sitio similar a los mencionados, si ya has probado este tipo de modalidad o cualquier otra cosa que quieras compartir con la comunidad.

## ¿Aceptas el desafío?


Una de las formas de mejorar como programador es poner a prueba tus conocimientos resolviendo problemas o desafíos.

FreeCodeCamp
Montevideo

Últimos artículos

Re-implementando el sitio con Next.js y Tailwindcss

Tu blog no es suficiente

Desafía tus habilidades

FreeCodeCampMontevideo

Últimos artículos

Re-implementando el sitio con Next.js y Tailwindcss

Tu blog no es suficiente

Desafía tus habilidades

FreeCodeCamp
Montevideo