
> Cover photo by Tudor Baciu

¿Hace un tiempo estas aprendiendo a programar y quieres conseguir tu primer trabajo? ¿Completas tutoriales o lees artículos pero no sientes que tienes la experiencia necesaria para que te tengan en cuenta en un trabajo? ¿Buscas como destacar, demostrar lo que sabes o simplemente mejorar cómo desarrollador/a? Si respondiste que **SI** a alguna de estas preguntas y quieres saber como tener mas oportunidades en el rubro del desarrollo te invito a que sigas leyendo.

> ¿Cómo obtengo experiencia si aún no tengo un trabajo donde pueda generar esa experiencia?

## Respuesta corta: Clonar aplicaciones existentes.

Como me parece sumamente importante, sobre todo para personas que recién comienzan y buscan su primer trabajo, voy a pasar rápidamente a comentarles varios puntos acerca de por que creo que clonar o replicar aplicaciones es una de las mejores (quizás la mejor) maneras de ganar experiencia.

## 1) No requiere creatividad

![Ideas](https://dev-to-uploads.s3.amazonaws.com/i/5asq4uo0vf73bx935vlh.jpeg)

> Photo by AbsolutVision

No tienes que preocuparte por pensar que quieres implementar ni que se te ocurran ideas o diseños geniales para tu app. Simplemente puedes elegir una aplicación que te guste y que creas que puede tener funcionalidades interesantes para aprender **COMO** se hacen.

No pierdas tiempo buscando ideas para proyectos, clona las paginas y aplicaciones que usas regularmente. (Ej: Twitter, Youtube, Trello, etc).

> El siguiente Párrafo fue agregado gracias al comentario de [Jorge Eψ=Ĥψ](https://dev.to/jagedn)

Esto no quiere decir que tengas que crear exactamente ese tipo de aplicaciones si sientes que aun no tienes los conocimientos necesarios, dependiendo del nivel de los mismos debes buscar aplicaciones o sitios mas sencillos para evitar la frustración que puede surgir al no saber por donde empezar. También puedes implementar partes concretas de aplicaciones grandes que puedan parecer fuera de tu alcance por el momento.

## 2) Te enfocas en aprender

![Learning](https://dev-to-uploads.s3.amazonaws.com/i/rlu7wj7ko10igs21egw9.jpeg)

> Photo by Element5 Digital

Dado que no tienes que pensar que hacer (por lo que vimos en el punto anterior), te puedes enfocar en el **COMO** y realmente aprender a construir una aplicación y cada una de sus funcionalidades.

Ademas el proceso de aprendizaje va a estar guiado por la necesidad de resolver un problema concreto, que en mi opinion, es cuando mejor aprendemos y es lo que vas a tener que hacer en un futuro trabajo, nadie te va a decir como solucionar un problema, el cliente va decirte que es lo que quiere lograr y tu, junto a ru equipo, deberán encontrar una solución.

El hecho de clonar una app o sitio también evita que quieras abarcar muchas cosas al mismo tiempo, sobre todo me refiero a lo que muchos de nosotros hemos hecho cuando empezamos, y es la idea de querer crear una app y generar ingresos a partir de la misma. Esto no es un error en sí mismo, de hecho creo que todos deberíamos intentarlo alguna vez, pero hacerlo cuando estas aprendiendo solamente agrega mas cosas que aprender y posibles fuentes de frustración cuando las cosas no salen como esperamos.

Cuando estas aprendiendo no quieres agregar mas complejidad al proceso, no quieres tener que preocuparte por resolver una problema real de una forma novedosa, de tener que planificar, diseñar y validar una solución propia que agregue valor a los usuarios. Todo eso podría considerarse un campo entero del conocimiento y como tal, requiere que te enfoques en ello exclusivamente para aprender de forma eficiente.

En el futuro, cuando quieras crear algo de ese estilo, mi recomendación es que uses un stack que ya domines, las razones de esta recomendación son prácticamente las mismas que antes, pero en este caso en lo que quieres enfocarte es en generar algo de valor que otras personas estén dispuesto a pagar, por lo que no es bueno estar al mismo tiempo aprendiendo e incluso batallando contra la tecnología, debes enfocarte en las cosas apropiadas dependiendo del objetivo.

## 3) El camino hacia la meta es claro

![Goals](https://dev-to-uploads.s3.amazonaws.com/i/mv41ty1mqy59u24oudqi.jpeg)

> Photo by Ante Hamersmit

Si estas clonando una app que ya existe ya sabes como luce el producto final, no lo tienes que imaginar, el objetivo esta claro, ya sabe cómo se supone que debe funcionar la aplicación porque ya existe y seguramente la has usado.
Esto tiene ademas como ventaja que seguramente otras personas también hayan seguido este camino y hayan generado tutoriales u otro tipo de contenido al respecto, y el cual puedes aprovechar y usar como guía cuando sientas que no avanzas.

## 4) Puedes aportar tu toque personal

![Creatividad](https://dev-to-uploads.s3.amazonaws.com/i/gq7akmlw3k3sq5dqv3wb.jpeg)

> Photo by Dragos Gontariu

Seguramente durante el proceso de creación, hayas ido identificando cosas te gustaría cambiar, cosas que sientes que deberían ser de otra manera, esta es la verdadera oportunidad de que la creatividad surja naturalmente. Aunque no lo creas la creatividad se puede adquirir y mejorar, la practica y exposición a diferentes cosas es la manera de hacerlo.

Teniendo esto en cuenta, una vez que alcanzamos la meta y tienes una aplicación funcional y sientes que aprendiste los conceptos necesarios, puedes dar rienda suelta a la creatividad, este si es un buen momento para innovar, hasta puede que te des cuenta que hay una necesidad real que tu puedes resolver, solo que esta vez ya contaras con la experiencia y la practica necesarias y no estarás cometiendo el error mencionado en el punto #2

Estas mejoras pueden incluir cosas orientadas a la experiencia del usuario como:

- Tema (colores, fuentes, tamaños, etc)
- Layouts, como se organiza el contenido en la página.
- Interacciones, animaciones, etc.
- Que se pueda editar un tweet 😜

O también puedes ir más allá y enfocarte en la parte del backend pudiendo cambiar que base de datos que se utiliza en la app, con que servicios se comunica la API, y un largo etc.

## 5) Experiencia real

![Work](https://dev-to-uploads.s3.amazonaws.com/i/6hjjgrasaozu623r7frk.jpeg)

> Photo by Scott Graham

Como puedes ver, este tipo de enfoque nos permitirá ganar experiencia replicando aplicaciones que resuelven problemas reales, y mas importante, cuanto mas veces sigas este proceso mas fácil va a ser identificar patrones que se comparten entre ellas, explorar diferentes soluciones a un mismo problema y entender los trade-offs de cada una y por que esas soluciones fueron elegidas frente a otras posibles.

También podrás identificar mas claramente cuales son las buenas practicas y el por qué. De poco sirve adoptar alguna metodología o forma de hacer las cosas si no entiendes de dónde surge, cuál era la necesidad que se intento subsanar y cuál es la motivación detrás de esas recomendaciones. Si bien puedes leer sobre esas cosas nada te va a dar mas claridad que enfrentarte a un código que crece en complejidad, que se vuelve difícil de adaptar y mejorar, en ese momento la necesidad hace su trabajo nuevamente y te motiva a buscar la solución en el momento oportuno y no antes.

## Conclusion

Podría explayarme largamente sobre cada punto mencionado pero creo que lo más importante es que te lleves lo esencial de cada uno. Para resumir, mi recomendación es la siguiente, replica cuantas aplicaciones puedas, busca aplicaciones de distintos tipos que resuelvan una variedad de problemas para que vayas incorporando las cosas que se comparten entre ellas y notes las diferencias.

No intentes ser creativo cuando no es el momento, te aseguro que tendrás oportunidad de crear algo único en su debido tiempo. No te abrumes con todas las cosas que hay para aprender, ponte metas claras y desafíos que puedas alcanzar.

Usa estas aplicaciones para poner en practica tus conocimientos, para demostrarte a ti mismo/a lo que puedes lograr y que el hecho de no haber trabajado nunca de manera formal no sea un impedimento para avanzar en tu carrera.


5 razones por las cuales clonar aplicaciones es una excelente forma de ganar experiencia como developer que te ayudara a conseguir mejores oportunidades.

Cómo ganar experiencia como developer sin tener trabajo


# Semana 11 enero 2021

Continuamos con esta serie de posts donde comparto algunos repositorios interesantes que voy encontrando semana a semana.

## Naming cheatsheet

![Naming cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/63aqnpn0orl3i9whgu63.png)

Creo que todos hemos sufrido un poco a la hora de nombrar variables y funciones en nuestro código, por ese motivo creo que este recopilado de consejos sin dudas nos sera muy útil. También lograremos una mejor legibilidad y que nuestro código sea mas mantenible a largo plazo.

Repo: [kettanaito / naming-cheatsheet](https://github.com/kettanaito/naming-cheatsheet)

## Electron Fiddle

![Electron Fiddle](https://dev-to-uploads.s3.amazonaws.com/i/j5nwirgzffrr35y5kc7d.jpg)

La manera más rápida de comenzar con [Electron](https://www.electronjs.org/).
Electron es una herramienta que nos permite crear aplicaciones multi-plataforma usando tecnologías web.

[Electron Fiddle](https://www.electronjs.org/fiddle) es como el [CodePen](https://codepen.io/) para Electron, permitiéndonos crear prototipos y experimentar con las capacidades de la plataforma de manera rápida sin hacer ningún setup.

Al abrirlo tendremos precargado el código necesario para ejecutar un "Hola, Mundo" y comenzar a experimentar.

Podrás cambiar fácilmente la version de Electron, exportar tus experimentos como GitHub Gists y compartirlos para que otros los usen simplemente ingresando la url del mismo.

Repo: [electron / fiddle](https://github.com/electron/fiddle)

## ExplainShell

![ExplaiShell Example](https://dev-to-uploads.s3.amazonaws.com/i/blmo6wldens6pz6a1z2e.jpg)

En [explainshell.com](https://www.explainshell.com/) podrás obtener una explicación detallada de los argumentos de tus comandos en la terminal de una manera bastante atractiva y fácil de entender, sin dudas un recurso interesante para el día a día.

Repo: [idank / explainshell](https://github.com/idank/explainshell)

## Starship

![Starship](https://dev-to-uploads.s3.amazonaws.com/i/h1b5a1f2cyvt4na6prjh.gif)

Ya que estamos hablando de la terminal, por que no tener un prompt lindo como el que se ve en el ejemplo de arriba?

Eso es que nos permite [Starship](https://starship.rs/), una herramienta desarrollada en Rust para personalizar completamente nuestro prompt que funciona para todos los sistemas operativos y para cualquier terminal.

Así se ve mi terminal por ahora cuando estoy dentro de un proyecto con Node.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rhkw4vebeajw8ccjfoi9.png)

Repo: [starship / starship](https://github.com/starship/starship)

## Visx

![Visx](https://dev-to-uploads.s3.amazonaws.com/i/ymf220qqr4z0t4eyz8zl.png)

Por ultimo les traigo [Visx](https://airbnb.io/visx/), una librería de visualizaciones para React basada en [D3.js](https://d3js.org/) y creada por airbnb.

Visx nos permitirá crear gráficas y otras visualizaciones de datos usando primitivas de bajo nivel y las ventajas de React sin tener que adaptarnos a las restricciones y opiniones de otras librerías de este estilo, si no que nosotros podremos generar la nuestra adaptada a las necesidades especificas del proyecto en el que estemos trabajando.

Otra de las ventajas es que puedes mantener un tamaño de bundle pequeño ya que solo incluyes los componentes que necesitas utilizar y no mas.

Por supuesto cuenta con el sello de calidad de airbnb, esto sin duda es un plus y un respaldo a la hora de elegir este tipo de herramientas.

Repo: [airbnb / visx](https://github.com/airbnb/visx)

### Gracias por leer y hasta el próximo!


Repositorios interesantes de la semana, en esta ocasion les traigo Naming cheatsheet, Electron Fiddle, ExplainShell, Starship y Visx.

Repos interesantes de la semana


# Semana 4 enero 2021

Hola! Hoy les traigo una lista de 5 repositorios interesantes que descubrí la semana pasada (algunos ya los sabia de antes 😅). Sin más vueltas paso a comentarles un poco de cada uno, espero que les sea de utilidad.

## Snapdrop

![Sitio web Snapdrop](https://dev-to-uploads.s3.amazonaws.com/i/8pkjtbaxogcea4qdovt8.png)

[Snapdrop](https://snapdrop.net/) es una version open source de la aplicación AirDrop en MacOS. Esta aplicación sirve para compartir archivos estando en la misma red WIFI de forma fácil y rápida.

Es una aplicación simple programada básicamente con HTML, CSS y JS sin ningún framework. Para poder compartir los archivos utiliza la tecnología [WebRTC](https://webrtc.org/) que nos permite establecer conexiones P2P entre dispositivos.

También cuenta con un backend en Nodejs que se usa solamente para manejar la interacción inicial necesaria para establecer la conexión mediante WebRTC, esto quiere decir que los archivos nunca pasan por el servidor, si no solo entre los dispositivos conectados.

Otro detalle interesante es que se puede agregar a la homescreen de tu celular como una app mas, esto gracias a ser implementada como una [Progressive Web App](https://web.dev/progressive-web-apps/).

Repositorio: [RobinLinus / snapdrop](https://github.com/RobinLinus/snapdrop)

## Mozilla Hubs

![Sitio web Mozilla Hubs](https://dev-to-uploads.s3.amazonaws.com/i/948j2xfely6ekl2fyke5.png)

[Hubs](https://hubs.mozilla.com/) es una aplicación que nos permite crear entornos virtuales 3D online para reunirnos con otras personas y charlar en un ambiente un poco mas ameno que una simple video llamada, algo que sin duda ayuda en estos tiempos de pandemia que corren.

Si bien puedes usar dispositivos de realidad virtual (VR) estos no son necesarios.

Puedes elegir tu avatar de una larga lista de opciones e incluso puedes crear tus propios avatars y subirlos a la plataforma, asi que si tienes un poco de conocimiento de Blender u otras herramientas de modelado 3D es una buena oportunidad.

Ademas de esto puedes compartir tu pantalla e interactuar con el entorno, por ejemplo dibujando en un pizarrón.

También tienes la posibilidad de agregar diversos objetos a tu entorno o crearlos de la misma manera que con los avatars. El entorno completo o escena también puede ser cambiado o creado completamente desde cero.

Por ultimo y no menos importantes quiero destacar la gran documentación de alta calidad que tiene, ya sea para usuarios, creadores, o desarrolladores.

Repositorio: [mozilla / hubs](https://github.com/mozilla/hubs)

## Patch Package

Ahora vamos con algo diferente, en este caso es un paquete de npm que nos permite arreglar errores en librerías de terceros sin la necesidad de hacer fork del repositorio original o esperar que los desarrolladores lo arreglen, esto se vuelve necesario muchas veces cuando nuestro sistema depende de que ese arreglo sea incluido.

Esto no es una solución a largo plazo por supuesto, pero es una alternativa simple y muchas veces mas fácil de mantener que crear un fork de la librería en cuestión ya que puedes modificar los archivos originales directamente en la carpeta `node_modules` y la librería se encarga de mantener estos cambios en subsiguientes installs y ademas crea archivos `patch` con los cambios realizados para que los puedas versionar con git.

Repositorio: [ds-300 / patch-package](https://github.com/ds300/patch-package)

## Twind

![Sitio web Twind](https://dev-to-uploads.s3.amazonaws.com/i/38ujkgsmhppxcf63idgs.png)

[Twind](https://twind.dev/) es una librería de CSS-in-JS que usa [Tailwindcss](https://tailwindcss.com/) por debajo manteniendo sus ventajas pero ademas agregando otras funcionalidades interesantes como la agrupación de clases por prefijo, combinación condicional de clases y mas.

Agrupación de clases
Esto hace que los nombres de las clases sean más cortos evitando la repetición de ciertos prefijos que comparten.

```
// Before directive grouping
tw`border-2 border-black border-opacity-50 border-dashed`

// After directive grouping
tw`border(2 black opacity-50 dashed)`

// With variants
tw`sm:(border(2 black opacity-50 hover:dashed))`
// => sm:border-2 sm:border-black sm:border-opacity-50 sm:hover:border-dashed

tw`w(1/2 sm:1/3 lg:1/6) p-2`
// => w-1/2 sm:w-1/3 lg:w-1/6 p-2
```

Para mas detalles sobre esta y otras funcionalidades puedes visitar el repositorio: [tw-in-js / twind](https://github.com/tw-in-js/twind)

## Microsite

[Microsite](https://github.com/natemoo-re/microsite) es un generador de sitios estáticos (SSG) construido sobre [Snowpack](https://www.snowpack.dev/) y que utiliza [Preact](https://preactjs.com/) como framework.

La principal característica es que su output presenta una cantidad minima de código JS del lado del cliente, esto es posible gracias a las utilización de Automatic Partial Hydration (Hidratación Parcial Automática), esta técnica permite generar solo el JS necesario para las partes de la pagina que son realmente dinámicas y no tener que enviar todo el árbol de componentes al browser.

Puedes agregar rutas a tu sitio creando archivos (`.js`, `.jsx`, `.tsx`) en la carpeta pages de la misma forma que lo hace [Nextjs](https://nextjs.org/).

Mas info en el repositorio: [natemoo-re / microsite](https://github.com/natemoo-re/microsite)

## Pensamientos finales

Espero que esto les haya servido de algo, voy a intentar crear un post como este todas las semanas con cosas interesantes que voy encontrando.

Si alguna de estas herramientas les pareció interesante y quieren saber mas me lo pueden hacer saber en [mi cuenta de twitter](https://twitter.com/matiasvj) y puede que escriba un articulo especifico con mas detalles de su funcionamiento, ejemplos, etc.



[Classroom for GitHub](https://classroom.github.com/) es una aplicación que permite a los profesores y alumnos llevar un mejor control de las tareas que se asignan en los distintos cursos y logrando que los estudiantes se familiaricen con buenas practicas de programación como el control de versiones, seguimiento de incidentes, revisión de código, etc.

Facilita las partes mas tediosas del proceso como la creación de repositorios y manejo de permisos de acceso permitiendo que los esfuerzos se centren en las tareas asignadas a los estudiantes y a su resolución. Los profesores pueden fácilmente crear las tareas y distribuir la url de invitación para que los estudiantes se unan y también pueden proveer de forma opcional código inicial para el repositorio de la tarea.

Para comenzar

- [Crear una organización](https://github.com/organizations/new) en GitHub
- [Ingresar a Classroom](https://classroom.github.com/) y crear un salon de clase
- Invitar a los estudiantes proporcionándoles la URL
- Crear una tarea
- Distribuir a los estudiantes la URL de la tarea

[Mas información](https://education.github.com/guide)


Classroom for GitHub es una aplicación que permite a los profesores y alumnos llevar un mejor control de las tareas que se asignan en los distintos cursos y logrando que los estudiantes se familiaricen con buenas practicas de programación como el control de versiones, seguimiento de incidentes, revisión de código, etc.

GitHub en el salon de clases


Hoy les traigo [Electron](https://www.electronjs.org/), una herramienta open source muy útil para la creación de aplicaciones multiplataforma mediante tecnologías web (HTML, CSS, JS), esto permite utilizar los conocimientos que ya posees en dichas tecnologías facilitando la creación de versiones de escritorio para Windows, Mac y Linux.

Presenta funcionalidades como actualizaciones automáticas de nuestra app, reporte de fallos, generar instaladores, menús nativos y notificaciones entre otras.

### Hecho con Electron

Muchas aplicaciones populares han creado sus versiones de escritorio utilizando Electron, como el editor de texto [Atom](https://atom.io/), [Slack](https://slack.com/), [Visual Studio Code](https://code.visualstudio.com/), entre otras.

![Electron](/images/hecho-con-electron.jpg)

Instalación

Es muy sencillo comenzar a utilizarlo, solo debemos tener instalado [Node.js](https://nodejs.org/) y ejecutar los siguientes comandos en nuestra consola o terminal.

```sh
# Clonar repositorio de ejemplo
git clone https://github.com/atom/electron-quick-start

# Cambiarse a la carpeta creada
cd electron-quick-start

# Instalar las dependencias y ejecutar
npm install && npm run
```

O si queremos instalarlo de forma global en nuestro sistema

```sh
npm install electron-prebuilt -g
```

Como seguir

Para información más detallada visita la [documentación oficial](https://www.electronjs.org/docs/latest). Al momento de este post la versión es la 0.34.

Comenta si te interesa que haga algún tutorial de cómo crear una aplicación desde cero.

Saludos.


Hoy les traigo Electron, una herramienta opensource muy útil para la creación de aplicaciones multiplataforma mediante tecnologías web (HTML, CSS, JS), esto permite utilizar los conocimientos que ya posees en dichas tecnologías facilitando la creación de versiones de escritorio para Windows, Mac y Linux.

Aplicaciones de escritorio multi plataforma con Electron


He decidido crear este Blog con el propósito de compartir los distintos conocimientos que he ido adquiriendo a lo largo del tiempo, los proyectos en los que estoy trabajando, las herramientas que uso para el desarrollo, etc.

#### Jekyll y GitHub Pages

Este sitio esta creado utilizando [Jekyll](http://jekyllrb.com/), un generador de sitios estáticos muy popular hecho en ruby. La decisión de inclinarme por desarrollar un sitio estático es por algunas de las ventajas que presenta en comparación a otras soluciones populares como Wordpress, por ejemplo:

- No es necesaria una base de datos
- Es mucho mas rápido
- Es seguro
- Se puede alojar el sitio en [GitHub Pages](http://pages.github.com/) gratis
- Puedes escribir los posts usando Markdown

entre muchas otras ventajas.

#### Diseño

En cuanto al diseño opte por crear una pagina de inicio con un fondo que ocupe el 100 % de la pantalla ya que me parece que queda bastante bien, una foto y con unos botones para mis redes sociales.

Por otro lado estoy utilizando el framework [SemanticUI](https://semantic-ui.com/) para darle estilo al sitio, aunque todavía no le estoy sacando todo el potencial que posee ya que el blog esta en construcción y con el correr del tiempo lo iré mejorando y agregando nuevas funcionalidades.

También integre [Disqus](https://disqus.com/) para manejar los comentarios ya que es muy simple de usar y administrar.

Bueno esto es todo por ahora, comenten que les pareció y si tienen alguna sugerencia o critica, todo es bienvenido.

Código disponible en [GitHub](https://github.com/MatiasVerdier)


He decidido crear este Blog con el propósito de compartir los distintos conocimientos que he ido adquiriendo a lo largo del tiempo, los proyectos en los que estoy trabajando, las herramientas que uso para el desarrollo, etc.