DEV Community: Fernando Cutire 🔨

I started to write on english, this is why

Fernando Cutire 🔨 — Wed, 12 Jan 2022 13:50:32 +0000

When I thought about this topic, I said to myself “Writing in English is hard, because it’s not my native language”

It’s hard but is also an opportunity. I needed to start practicing my English. And guess what was the way?

I said, “Ok I will start to write in English because almost every content I consume online is in English and I have read and watched a lot”

But of course writing is challenging.

So in this article, I teach you what it’s working for me.

Writing is hard: Thinking in a different language

Of course, I could use the easy way who was to just use translate apps.

But this was enough?

I have been using google translate with my Spanish-based articles. And it worked weird.

It doesn´t have that consistency or as I want to call “soul”.

It seemed like just different words and doesn’t seem to be written by a human.

So another thing that happens to me, was to begin writing in English.

And maybe I will sound better, you can judge by yourself.

Of course, my grammar is not the best, but anyways here I am. And I will continue to improve.

More writing equals better writing: Why consistency over time matters

Just focusing on writing. It´s that simple?

Maybe not, but some of the benefits I could say are

Start thinking in English
Start creating content (in English ofc)
Having more articles makes you more confident. Like “I have written so many articles, I know I am good”

As you see, there are many benefits and progress over time.

In general, it´s cool to learn a new language in this way.

Receiving and giving are both beautiful things to do.

And consuming media in a different language makes it faster to learn it.

Also, It seems that you are giving your knowledge, expertise and somehow improving the way for us.

It´s that simple.

Let's connect

Remember you can follow me on Twitter @fernandocutire, I am getting better at writing in English so we could talk there.

Why I am finishing my degree

Fernando Cutire 🔨 — Tue, 11 Jan 2022 17:34:02 +0000

Not only is people saying that a degree is useless, but actually not getting it.

In tech Twitter, I have seen this phenomena

I will explain why I am getting a degree and why I think it is a good deal.

A reasonable cost for a degree

Getting my bachelor is not as costly as getting one in the US.

Here in my country, a complete degree (excluding labs, books, and important stuff) is less than 500$, that´s worth it, considering that these are 5 years.

Also, the university is the best forming engineers in my country.

A job without one it´s REALLY HARD

I know about opportunities overseas.

But here virtually every job description in my country requires a degree

And equivalent experience is really hard to find.

Also for the best jobs is useful for have a degree.

If I want to move abroad, a degree could be useful too, especially considering a young man doesn´t have a lot of experience.

These were my favorite apps of 2021

Fernando Cutire 🔨 — Thu, 06 Jan 2022 21:15:47 +0000

This is not some kind of paid promotion. Just that sometimes are curious about what other people use in a daily basis.

When I ask, I get different responses and is cool to have this variety.

So I present my favorite apps/software of the last year

My favorite apps

Calm

A sleep and meditation app, has a ton of meditation exercises and calm music. Really an amazing app , i wish it has a better web app but for now it’s ok.

Dashlane

This password manager is really useful. By now it makes all that it needs to do. Also it has VPN, and a dark web email analyzer. It is a really great password manager.

Toggl

It is a time tracker useful when working on different projects and clients. For me i use it to know how many time i spent on different topics.

Rescuetime

Another time tracker, this really blows my mind. It can track without specifying some task. When i open my PC it begins to track, really useful.

OS: Ubuntu

This was the year i began to use linux. Ubuntu has make things easier in development, although i had audio related issues, and the os freeze sometimes.

Let's connnect

Remember you can follow me on Twitter @fernandocutire, I am getting better at writing in English so we could talk there

4 years of taking online education taught me this (first year) Pt1

Fernando Cutire 🔨 — Thu, 06 Jan 2022 20:51:57 +0000

Online courses are everywhere, and every day there are more.
This is not going anywhere, and don't expect that it would slow down.

In a series of articles, I will explain my approach to online education.

This is written in a personal way, maybe you can relate. It wasn't always perfect, I was really slow and the start.

So this was the first year.

In my first year, I discover online courses, but I didn’t see it as a way that can help me at the time.

I would only say to myself, this looks good but I don’t feel pressured to finish it, maybe someday, like when I am looking for a job I will have better reasons

As you may know, my way of thinking was not very mature, and it wasn’t because I was at school with so many hours and for me, it was not a big deal to finish.

The topics that interested me at the time were mainly programming and business. I enroll in 3 free udemy courses and paid for 3. I remember that I just completed 2 but because it was 2 hours or less, so no big deal.

As you may know, some Udemy Courses can get through 30 hours of content, and this makes it hard to finish. At the time I thought that more content meant that the course was better, but obviously, I was mistaken.

Finally, it is important to say that I just took courses from Spanish speakers instructors so as you may think, the offer was not very high back then.

This series will continue.

Let's connnect

Remember you can follow me on Twitter @fernandocutire, I am getting better at writing in English so we could talk there

My thoughts on working and studying full time

Fernando Cutire 🔨 — Wed, 05 Jan 2022 19:01:56 +0000

Some time ago I was at an online university class, and i got lost on my mind if when i graduated i will have enough experience for a first job.

I know internships and entry level jobs exist, but I dont't want to wait after i finished college to make it.

Right now i decide that i will go through some interviews to get a first job. A first formal job not freelancing or internships. I have searched in different companies and i am wonder if i meet all the requirements. In the immense majority of jobs description that are listed, business want people with 3-5 years of experience on similar jobs.

After job searching I know I don’t have enough experience, also project, research are not enough. Also, a full-time job in Panama are 8 hours a day, my university classes are 5 hours. The time is not enough.

Right now i am on my 4th year of 5 years, which also means that the time I begin classes will be different, it varies every semester. For example, on my 3rd year we were always in the morning.

But, based on my research, there’s a high chance that my classes begin at 4 pm or 5 pm (at best). Which let me work from 8am to 3pm. And if classes and work are remote (which there is a high chance that there will be) i can save on commute and make it all the work in my home.

What’s the catch? No time (1 hour between work and study) and i will be with full classes (6 classes per semester), so things can get messy in bad times.

There’s always hope

After these years i have been doing it pretty good with my classes, i got good grades this last 2 years. I have a high gpa and i have been praised for my very good work as an individual either as a team member.

Also i have make improvements on my productivity and my life in general. So i know i could handle at make my best at these opportunities. Things always seem bad at first, but then i find a way

See the full article at: https://fernandocutire.com/my-thoughts-on-working-and-studying-full-time/

I share more of my experience in twitter
follow me @fernandocutire

Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx

Fernando Cutire 🔨 — Fri, 15 Oct 2021 03:41:10 +0000

📰 En este artículo aprenderás

Los archivos que acepta Storybook .stories.jsx y .stories.mdx
Cómo se visualizan estos archivos en el navegador
Cuando usar cual y por qué

🗨️ Contenido

Hora de construir

Perfecto, hasta este momento debes de conocer la problemática que resuelve Storybook y como preparar tu entorno en local, así que solo falta construir.

El problema: Construir en storybook

Dentro de la plantilla que construiste en el capítulo anterior te encontrarás con una introducción y otros archivos que simulan componentes, algo que puedes ver en tu navegador si correr npm run start-storybook.

Esto que observa a la derecha, representan los diferentes tipos de archivos que construiremos en storybook

Storybook: Las historias del libro

Una historia captura el estado renderizado de un componente de la interfaz de usuario. Los desarrolladores escriben varias historias por componente que describen todos los estados "interesantes" que un componente puede soportar.

La CLI creó componentes de ejemplo que demuestran los tipos de componentes que puede crear con Storybook: botón, encabezado y página.

Cada componente de ejemplo tiene un conjunto de historias que muestran los estados que apoya. Puede explorar las historias en la interfaz de usuario y ver el código detrás de ellas en archivos que terminan en .stories.js o .stories.ts. Las historias están escritas en formato Component Story Format (CSF), un estándar basado en módulos ES6, para escribir ejemplos de componentes.

La pequeña documentación es algo personal de cada historia y se refiere en su mayoría a descripción de los controles. Es bueno saber que se pueden construir páginas enteras de documentación pero eso tiene su propio archivo que veremos más adelante

En la captura de pantalla anterior estábamos mostrando el componente botón y nos basaremos en él para explicar los historias.

El botón en realidad lo constituyen tres archivos:

button.jsx (el componente en jsx)
button.css (los estilos de el componente)
button.stories.jsx (la historia de storybook sobre el componente)

Ahora entremos a cada uno de estos archivos y veamos su código.

Button.jsx

Este componente es uno normal de React , como ves importa las librerías React y Proptypes. También importa estilos CSS

import React from 'react';
import PropTypes from 'prop-types';
import './button.css';

export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

Más abajo es cuando se torna interesante, como viste en el componente se le pasan parámetros (props) al componente botón, esto se define mejor en:

Button.propTypes = {
  /**
   * Is this the principal call to action on the page?
   */
  primary: PropTypes.bool,
  /**
   * What background color to use
   */
  backgroundColor: PropTypes.string,
  /**
   * How large should the button be?
   */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /**
   * Button contents
   */
  label: PropTypes.string.isRequired,
  /**
   * Optional click handler
   */
  onClick: PropTypes.func,
};

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: 'medium',
  onClick: undefined,
};

Dentro de Button.propTypes están incluidos como puedes ver los controles del componente. Dependiendo del control habrá diferentes opciones, por ejemplo size solo acepta tres valores, small, medium o large, pero backgroundColor acepta una cadena.

Habrás notado que arriba de cada control hay una pequeña documentación. Esta se refiere a la descripción que aparece en el punto 3 de Pequeña documentación.

Dentro Button.defaultProps están los valores por defecto del componente, dándole a cada control un valor por defecto a mostrarse.

button.css

.storybook-button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.storybook-button--primary {
  color: white;
  background-color: #1ea7fd;
}
.storybook-button--secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.storybook-button--small {
  font-size: 12px;
  padding: 10px 16px;
}
.storybook-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}
.storybook-button--large {
  font-size: 16px;
  padding: 12px 24px;
}

Aquí es solo una hoja de estilos para nuestro componente.

Por supuesto, como css, también se puede usar scss o sass

Button.stories.jsx

Es en este archivo donde storybook se comunica con nuestro componente React , Button.jsx

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

En la primera parte se importan los componentes, se exporta un default , este incluye el título que se mostrará en el storybook, el nombre del componente (en este caso Button) y unos argTypes que en este caso especificar un backgroundColor.

Siguiendo más abajo

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

Se crea un componente Template que se le coloca un componente Button y se le pasan argumentos.

Después se ve que se exportan 5 const, Primary, Secondary, Large y Small. Estas corresponden a la sección de cada uno de los tipos de botón. Por eso puedes ver que se le pueden colocar argumentos a cada uno.

Y esto sería lo básico para escribir componentes y mostrarlos en storybook. Ves que puedes colocar controles y asignar componentes de react.

Storybook: documentando el trayecto

Así como hay componentes , también necesitamos una documentación más exhaustiva, un lienzo blanco donde escribir.

Este archivo corresponde a los que tienen terminación .stories.mdx

Como es en el caso de Introduction. Si vamos al archivo, es un documento algo largo donde que nos importa son que puedes importar addons de storybook, que sencillamante son extensiones que dan funcionalidades especiales, para motivos de esta serie, se ve una sencilla como es Meta, pero existen más que se pueden ver la documentación de storybook. Otro detalle importante es que se pueden colocar estilos a la documentación. También, esta documentación se puede escribir en formato markdown y html, dentro del mismo archivo y aún así funciona de maravilla como se muestra en el ejemplo.

# Welcome to Storybook

Storybook helps you build UI components in isolation from your app's business logic, data, and context.
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.

Browse example stories now by navigating to them in the sidebar.
View their code in the `src/stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.

<div className="subheading">Configure</div>

¿ .stories.mdx o .stories.jsx ?

Usar documentación o un componente, la respuesta se da por si sola. Si buscas mostrar los componentes que has hecho en React, es preciso emplear un .stories.jsx y proporcionar controles para que tu equipo pueda observar las diferentes variantes del botón, campo de texto o componente que quieras mostrar.

Por el otro lado , usar .stories.mdx se refiere más que nada a mencionar ciertas guías a tu equipo, guías que no requieren de mostrar el componente necesariamente (aunque también se puede importar y colocar dentro de este tipo de archivos), sino más bien para informar. Por eso es que se creó este tipo de archivo.

🔥 Recapitulando

Repasemos lo que aprendiste

Existen 2 tipos de archivos principales, que storybook lee .stories.jsx (typescript tsx) y .stories.mdx
Un .stories.jsx recibe un componente de react (usualmente .jsx o .tsx si es en typescript)
El componente de react es común, importando estilos y librerías necesarias, pero se le añaden propiedades que terminan siendo controles de storybook
Para saber si usar .stories.jsx o .stories.mdx, hazte la pregunt ¿Necesito documentación o mostrar un componente con controles? Si es documentación .stories.mdx, un componente y permitir al usuario tener controles .stories.jsx

🔚 Fin

Sabes crear componentes .stories.jsx y documentación .stories.mdx

Puedes dar controles a los componentes para que tu equipo interactúe con ellos y puedes documentar sus propiedades.

Puedes escribir documentación usando .stories.mdx

Puedes distinguir cuando usar.stories.jsx .stories.mdx

Te invito a que veas mi repositorio de github, con el material.

GitHub - FernandoCutire/poc-learn-storybook: A free storybook template created with CRA to make proof of concepts of storybook

📺 Continua la serie

Esto no se termina aquí, puedes continuar los siguientes capítulos de la serie Storybook para averiguar como termina.

Serie Storybook: Usando storybook para desarrollo de componentes

Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores

Serie Storybook: Corriendo storybook en local + Código en github

Desarrollarás un repositorio de Storybook en tu computadora local

Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx

Desarrollarás .stories.jsx y .stories.mdx , aprenderás como se forman y como funciona el núcleo principal en Storybook.

📚 Lecturas Adicionales

Leer es bueno, aquí te dejo algunas fuentes adicionales a este artículo para que puedas complementar y aclarar conocimientos.

React Cookbook: David Griffiths, Dawn Griffiths O Reilly Media Inc

React Cookbook: Source Code

Storybook Documentation

👊🏽 Turno para tí: Comenta y comparte

Si te ha gustado la serie, dale a me gusta, compárteselo a quién veas que lo necesita y comenta si tienes alguna duda

Serie Storybook: Corriendo storybook en local + Código en github

Fernando Cutire 🔨 — Fri, 15 Oct 2021 03:38:31 +0000

📰 En este artículo aprenderás

Que se requiere para correr Storybook
Los pasos para inicializar Storybook usando create-react-app como boilerplate

🗨️ Contenido

Bienvenido al segundo episodio de la serie de Storybook.

Antes de empezar a tirar comandos, es importante que tengas primero una aplicación corriendo. Esto se puede lograr gracias a create-react-app que nos dará un boilerplate de una aplicación react que servirá de base para storybook, aclaro este punto porque storybook no creará esto por su cuenta y requerirá que primero tengas la aplicación creada.

Con eso en mente, estos son los pasos a seguir.

Antes de continuar recuerda tener instalado npm, y CRA (Create-react-app) en tu computadora local.

Crear una aplicación en react , colocando estos comandos en la terminal.

npx create-react-app storybook-app

Entrando a la carpeta de nuestra aplicación

cd storybook-app

Después de ello, tendremos una aplicación de react en funcionamiento.

Con ello , ahora sí añadiremos storybook

npx sb init

Luego de que se haya instalado, iniciaremos el servidor de Storybook

npm run storybook

Storybook ejecuta un servidor separado en el puerto 8086 (o en el que hayas elegido), como puede ver en la figura. Cuando usa Storybook, no es necesario ejecutar la aplicación de React.

Hasta aquí tendremos storybook corriendo en local, si todos los logs han ido bien.

🔥 Recapitulando

Repasemos lo que aprendiste

Tener instalado npm y cra para continuar el tutorial. Sino una aplicación react funcional.
Storybook corre en base a una aplicación lista, no en una carpeta vacía, tómalo en cuenta antes de correr npx sb init

🔚 Fin

Te dejo un repositorio con storybook configurado. Además te encontrarás con otros elementos configurados como docker, travis.yml, sientete libre de clonar el repostorio y trabajar en tus propios proyectos.

GitHub - FernandoCutire/poc-learn-storybook: A free storybook template created with CRA to make proof of concepts of storybook

📺 Continua la serie

Esto no se termina aquí, puedes continuar los siguientes capítulos de la serie Storybook para averiguar como termina.

Serie Storybook: Usando storybook para desarrollo de componentes

Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores

Serie Storybook: Corriendo storybook en local + Código en github

Desarrollarás un repositorio de Storybook en tu computadora local

Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx

Desarrollarás .stories.jsx y .stories.mdx , aprenderás como se forman y como funciona el núcleo principal en Storybook.

📚 Lecturas Adicionales

Leer es bueno, aquí te dejo algunas fuentes adicionales a este artículo para que puedas complementar y aclarar conocimientos.

React Cookbook: David Griffiths, Dawn Griffiths O Reilly Media Inc

React Cookbook: Source Code

Storybook Documentation

👊🏽 Turno para tí: Comenta y comparte

Si te ha gustado la serie, dale a me gusta, compárteselo a quién veas que lo necesita y comenta si tienes alguna duda

Serie Storybook: Usando storybook para desarrollo de componentes

Fernando Cutire 🔨 — Wed, 13 Oct 2021 14:02:28 +0000

📰 En este artículo aprenderás

Cuál es el material de construcción primordial de React y el por qué de su importancia
Qué es Storybook
El porqué de Storybook al desarrollar junto a equipos

🗨️ Contenido

El problema

Los componentes de React son el material de construcción primordial de las aplicaciones React. Si los escribimos con inteligencia, podemos reutilizar los componentes en otras aplicaciones de React. Pero cuando construye un componente, es necesario trabajar para comprobar cómo funciona en todas las circunstancias. Por ejemplo, en una aplicación asincrónica, React podría representar el componente con propiedades indefinidas. ¿El componente seguirá renderizándose correctamente? ¿Mostrará errores?

Pero si está construyendo componentes como parte de una aplicación compleja, puede ser difícil crear todas las situaciones que su componente deberá afrontar.

Además, si tiene desarrolladores especializados en experiencia de usuario (UX) trabajando en su equipo, puede perder mucho tiempo si tienen que navegar a través de una aplicación para ver el componente único que tienen en desarrollo.

Sería útil si hubiera alguna forma de mostrar un componente de forma aislada y pasarle conjuntos de propiedades de ejemplo. Aquí es cuando entra la solución

Storybook: la herramienta para desplegar componentes

Storybook es una herramienta para mostrar bibliotecas de componentes en varios estados. Podría describirlo como una galería de componentes (aunque no le hace justicia). En realidad, Storybook es una herramienta para el desarrollo de sistemas de diseño basados en componentes.

Sistemas de Diseño ¿Son necesarios?

Como mencioné en el anterior párrafo el Storybook nos permite estar en la intersección entre varios equipos (frontend, UI, UX) gracias a que provee un sistema de diseño basado en componentes.
Pero a pesar de la publicidad y alboroto, un sistema de diseño no es una solución milagrosa o panacea. Si trabajas en un equipo modesto en una sola aplicación, estará mejor con un directorio de componentes de IU en lugar de configurar la infraestructura para habilitar un sistema de diseño.

La escalabilidad de un sistema de diseño funciona a su favor cuando comparte componentes de interfaz de usuario en muchos proyectos. Si se encuentra pegando los mismos componentes de la interfaz de usuario en diferentes aplicaciones o entre equipos, esta guía es para usted.

🔥 Recapitulando

Repasemos lo que aprendiste

Los componentes de React son el material de construcción primordial de las aplicaciones React.
Si piensas con inteligencia, puedes reusar componentes de React
Si solo se toca la parte del código, pueden haber discrepancias e ineficiencias entre equipos, especialmente de UX, UI y Frontend.
Storybook permite crear sistemas de diseños basados en componentes.
Storybook también resuelve la ineficiencia entre equipos, al dar un entorno de desarrollo para frontend, y brindar un entorno de producción para que los demás equipos puedan visualizar el trabajo y hacer comentarios cuando se requiera.

🔚 Fin

Sabes cuando un sistema de diseño es una opción viable. Conoces que los componentes son el bloque principal de React y estás anuente de la importancia para los equipos.

📺 Continua la serie

Esto no se termina aquí, puedes continuar los siguientes capítulos de la serie Storybook para averiguar como termina.

Serie Storybook: Usando storybook para desarrollo de componentes

Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores

Serie Storybook: Corriendo storybook en local + Código en github

Desarrollarás un repositorio de Storybook en tu computadora local

Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx

Desarrollarás .stories.jsx y .stories.mdx , aprenderás como se forman y como funciona el núcleo principal en Storybook.

📚 Lecturas Adicionales

Leer es bueno, aquí te dejo algunas fuentes adicionales a este artículo para que puedas complementar y aclarar conocimientos.

React Cookbook: David Griffiths, Dawn Griffiths O Reilly Media Inc

React Cookbook: Source Code

Storybook Documentation

👊🏽 Turno para tí: Comenta y comparte

Si te ha gustado la serie, dale a me gusta, compárteselo a quién veas que lo necesita y comenta si tienes alguna duda

✅ Solución: SSH Config -Problemas por múltiples cuentas de git en un mismo ordenador

Fernando Cutire 🔨 — Tue, 17 Aug 2021 19:18:53 +0000

📰 En este artículo aprenderás

El problema de tener muchas cuentas de git, gitlab
Una solución sencilla si te da problemas al momento de clonar o hacer push a un repo de forma remota por ssh
Por qué colocar las llaves ssh no es suficiente

🗨️ Contenido

Toda gran solución comienza con un gran problema. El día de hoy solucionaremos el:

Git fatal: Could not read from remote repository

Esto me sucedió a mí cuando quería hacer un git clone de mi repo personal de github. Y ya había configurado mi llave ssh.

Sucede también que tenía configurada mi cuenta de gitlab de la organización donde trabajo también la tenía configurada también.

Entonces me dió problema, puede que te pase igual. Yo solo tenía 2 cuentas pero tú puedes tener incluso más, entonces para que no se te vuelva muy dificil de manejar , te recomiendo que implementes esta solución.

✅ Solución

La solución viene de la mano de un archivo que insertaras en tu carpeta .ssh/

Esta carpeta se creó al momento de crear tu llave ssh, así que si no las hecho, te recomiendo que lo hagas y regreses aquí.

Ahora dentro de esta carpeta insertaremos un archivo config. Este tendrá una estructura que nos podrá incorporar varias claves ssh en un formato sencillo de leer ideal para manejar diferentes llaves ssh, que podrás incorporar como tu creas sea mejor.

Aquí el código.

# GITHUB
Host github.com
   HostName github.com
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/github/id_rsa_pub

# GITLAB
Host gitlab.com
   HostName gitlab.com
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/id_rsa_pub

El nombre del archivo es config

Puedes configurarlo para varias cuentas por ejemplo GITHUB PERSONAL, GITHUB PROFESIONAL. Entonces usar una llave ssh diferente para cada una, así se detectará bien y no habrá problema.

Recuerda también el IdentityFile, muy importante para separar las diferentes llaves.

🔥 Recapitulando

Repasemos lo que aprendiste

Creación de config
Diferentes problemas a la hora de tener diferentes cuentas en una misma máquina
Por qué colocar las llaves ssh no es suficiente

🔚 Fin

Ya has podido identificar el problema de llevar diferentes cuentas y has podido solucionarlo gracias a un config. Colocaste las diferentes llaves con nombres diferentes y colocaste su ubicación dentro del archivo config, y tienes todo mucho más ordenado y sin problemas al usar conexiones ssh para repositorios.

GitHub Gist - FernandoCutire -Solución: SSH Config -Problemas por múltiples cuentas de git en un mismo ordenador

👊🏽 Turno para tí: Comenta y comparte

Has aprendido a darle una solución a este problema, lamentablemente todavía existe este problema para varios desarrolladores, compartiendo la solución podemos ayudar a que deje de serlo. Puedes compartir la guía si te ha sido útil y/o comentar por si te ha dado un problema.

Aunque sea por un gol de diferencia, la victoria es victoria

📰 Contenedores: create-react-app + Storybook + Docker (Con repositorio)

Fernando Cutire 🔨 — Fri, 13 Aug 2021 20:44:19 +0000

En este artículo crearemos una imagen de docker con base a una aplicación en storybook, esto servirá para que otros desarrolladores puedan correr la aplicación sin proble,as

📰 En este artículo aprenderás

Cómo empaquetar una aplicación en un contenedor docker
El desarrollo de un contenedor para una aplicación JS
Cómo ver los puertos del contenedor
Solución a errores comunes al empaquetar SPA (Single Page Application)
Repositorio con código completo para que puedas probar la aplicación

¿Por qué docker?

Respuesta corta, te lo han pedido subirán el storybook a la nube y quieren tener tu sistema de diseño en un pipeline siempre atento.

Puedes leer más sobre docker en mi artículo de Docker para desarrolladores

Comenzando

Para este ejemplo decidí usar create-react-app para la aplicación npx create-react-app storybook-docker. Recuerda que storybook en su documentación dice que su comando sb init no funciona sin tener una aplicación antes corriendo, así que es mejor que sigas los pasos.

Paso 1: Crea la aplicación

npx create-react-app storybook-docker

Si ya tienes tu app, usa tu aplicación y ve al siguiente paso

Paso 2: Storybook

sb init

Nota: No funciona en proyectos vacíos por eso usar primero react app

Si ya tienes tu storybook ahora sí vayamos a dockerizar.

Paso 3: Docker

Para este paso, es recomendable que entiendas como funciona un Dockerfile, te lo explico mejor aquí

Este es el código que uso para mi Dockerfile

# Usar una imagen  
FROM node:current-alpine3.14

# Establecer el directorio de trabajo de nuestro contenedor
WORKDIR /usr/src/app

# Copiar el package.json a la carpeta /app de nuestro contenedor
COPY package.json /app

# Copiará otros archivos de la aplicación
COPY . .

# Ejecutar el comando npm set progress=false && npm install
RUN npm set progress=false && npm install

# Exponer el puerto 8086 de el contenedor docker, fin de documentación
EXPOSE 8086

# Correrá este comando al final cuando se esté corriendo el contenedor
CMD ["npm", "run", "storybook"]

Puedes realizar este y añadirle según tus necesidades, yo solo necesito esos comandos así que lo dejo así.

Paso 4: docker-compose

Yo para este proyecto uso docker-compose.yml

Puede que no sea necesario tomando en cuenta que solo es una aplicación pero a la hora de manejar más en tu aplicación puede serte útil, así que dejó el código.

version: "3"
services:
  storybook:
    ports:
      - "8086:8086"
    build: .

Aquí se expone el puerto 8086.

Corre tu aplicación con un docker-compose up

Adicional

Algo que me dió problema fue en el package.json, ya que corría mi aplicación dentro del docker pero no podía observarla en el navegador.

Así que revisando mi package.json, expuse el puerto 8086 también ya que por defecto viene otro, te recomiendo que si te da problemas también lo hagas.

{
  "name": "storybook-docker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 8086",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/node-logger": "^6.3.7",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.7"
  }
}

Fijate en el comando que dice "storybook": "start-storybook -p 8086", ese sería el que deberías de cambiar.

🔥 Recapitulando

Repasemos lo que aprendiste

Tener una aplicación corriendo antes de iniciar storybook, una app como la que te genera create-react-app
Entender como funciona un Dockerfile, para añadir capas según lo necesario
Verificar los puertos después de montar tu contenedor
Revisar el package.json con el comando que corras para inicializar storybook por si te da problemas al momento de visualizar tu contenedor en el servidor local.

🔚 Fin

Sabes como dockerizar una SPA en un entorno de desarrollo, recuerda el repositorio de github, para que tengas un acceso a todo el código,

GitHub - FernandoCutire/storybook-docker: Dockeriza un proyecto storybook

Conexión github

Fernando Cutire 🔨 — Thu, 12 Aug 2021 23:05:59 +0000

Conexión con github

🐳 Docker para desarrolladores

Fernando Cutire 🔨 — Thu, 12 Aug 2021 23:05:11 +0000

Docker es una herramienta maravillosa para desarrolladores y el concepto de empaquetar tus dependencias en un solo lugar que corre en cualquier lugar suena casi utóṕico.

En este artículo aprenderás

Cómo leer un Dockerfile
Problemas comunes al correr tu Dockerfile
Analizar Dockerfile de una SPA
Cómo construir tus propios dockerfile
Keywords básicas sobre los Dockerfile
Qué es alpine y porqué es usado
Donde buscar imágenes para tus contenedores

Usaré un ejemplo para que podamos entender mejor el funcionamiento de un Dockerfile, un ejemplo para una aplicación de react


FROM node:current-alpine3.14

WORKDIR /usr/src/app

COPY package.json /app

COPY . .

RUN npm set progress=false && npm install

EXPOSE 8086

CMD ["npm", "run", "storybook"]

Si empleamos la similitud entre un contenedor de esos que los barcos transportan y los docker lo podemos entender de una manera mucho más sencilla y práctica.

Es verdad que dentro de un contenedor puedes meter una cantidad exacta de mercancía, pero de diferentes tipos y estos poseen un tamaño específico para que sean fáciles de identificar y de llevar por los barcos.

En docker funciona de forma similar, solo que nuestra mercancía es nuestra aplicación y las reglas son las siguientes.

De manera práctica nos encontraremos con

FROM

FROM node:current-alpine3.14

Esto significa que se genera un contenedor a partir de una imagen, podemos pensar en ella como un molde que es la primera capa de nuestro contenedor. Ella tendrá configuraciones específicas que servirán para correr los comandos consecuentes, puedes ver que uso node:current-alpine3.14

Esta imagen la encuentro en la página de docker hub, que podemos pensar en ella como un repositorio de imágenes, comúnmente buscarás imágenes oficiales (estas tienen un símbolo de imagen oficial a lado del nombre).

En docker funciona de forma similar, solo que nuestra mercancía es nuestra aplicación y las reglas son las siguientes.

Ahora conocemos que esto de node:current-alpine3.14 es el nombre completo de la imagen que usamos como base, pero ¿Qué es alpine? Alpine es el sistema operativo (basado en linux) de nuestra imagen. Este nombre es famoso porque representa una imagen con un peso mínimo de mega bytes , y esto se busca para que tu contenedor final no pese mucho, ya que no conviene mucho tener tu aplicación de 50mb y que tu imagen base pese 250 mb.

Workdir

WORKDIR /usr/src/app

El WORKDIR indica el directorio de trabajo, nos referimos a el como un directorio que se crea dentro del contenedor que se usará como base para correr los comandos consecuentes.

Entonces conocemos que el workdir se refiere más a nuestro contenedor que a tu aplicación por eso verás que en muchos lugares se le conoce como /app, si tu aplicación usa sus archivos en src/, nada de preocupaciones, recuerda que se habla del contenedor y no tanto de tu aplicación, esto vendrá en los próximos comandos.

COPY

COPY package.json /app

COPY . .

Los comandos COPY, hacen honor a su nombre de copiar los archivos de tu aplicación a la del contenedor /app.

Primero copiamos el package.json porque de allí correremos comandos npm.

Luego empleamos el COPY . .

Admito que esto no es muy explicativo pero básicamente es copiar lo de tu directorio al directorio de trabajo (WORKDIR) el que ya habíamos específicado anteriormente.

Podríamos traducir a COPY . /app

El WORKDIR indica el directorio de trabajo, nos referimos a el como un directorio que se crea dentro del contenedor que se usará como base para correr los comandos consecuentes.

RUN

RUN npm set progress=false && npm install

Este puede aparecer bastante en el desarrollo de una aplicación, y hace lo que su nombre, corre en tu contenedor lo que le pongas a su izquierda así de simple.

Usualmente cuando agarras una aplicación , lo primero que haces es instalar las dependencias porque sino la aplicación no corre, esto es un clásico. Bueno en docker sucede similar, corre el npm install que harías normalmente. Sobre el set progress=false es para que no meustre la barra de progreso al instalar dependencias , el && une comandos por lo que le coloco npm install.

EXPOSE

EXPOSE 8086

EXPOSE sirve para decir que el puerto que tu contenedor usará.

Aquí está el dilema y es que colocarlo no hará efecto a la hora de correr el contenedor, entonces esto sirve más de documentación. Lee sobre como correr un contenedor

En mi opinión está bien colocarlo porque la documentación es muy importante pero es bueno tener en cuenta que su utilidad es esa y a la hora de correrlo no esperar que abra en ese puerto por defecto.

CMD

CMD ["npm", "run", "storybook"]

CMD es la consola que corre el comando que coloques entre sus corchetes, esto sucederá cuando se termine de correr el contenedor.

Quizá al final de la construcción de la imagen no se ejecute pero su función se realizará al final de correr el contenedor y no la construcción.

Recapitulando


# Usar una imagen  
FROM node:current-alpine3.14

# Establecer el directorio de trabajo de nuestro contenedor
WORKDIR /usr/src/app

# Copiar el package.json a la carpeta /app de nuestro contenedor
COPY package.json /app

# Copiará otros archivos de la aplicación
COPY . .

# Ejecutar el comando npm set progress=false && npm install
RUN npm set progress=false && npm install

# Exponer el puerto 8086 de el contenedor docker, fin de documentación
EXPOSE 8086

# Correrá este comando al final cuando se esté corriendo el contenedor
CMD ["npm", "run", "storybook"]

Finalizando

Al final de todo esto recuerda que puedes ejecutar el comando docker build -t aplicacion-docker .

-t significa que colocarás un tag que vendría a ser un nombre, aquí no puedes usar letras mayúsculas así que separo con un guión.

El . al final significa que buscará dentro de la carpeta un Dockerfile y lo leerá para crear una imagen a partir de las instrucciones, si abres la terminal desde otra carpeta y quieres correr el comando debes sustituir ese punto con la ubicación de el Dockerfile, lo mismo sucede si tienes más de un Dockerfile en tu aplicación pero esto es algo que no suele suceder.

También quiero destacar que tu archivo se debe llamar Dockerfile, si le llamas DockerFile, u otro nombre te mandará error, este es un error frecuente también, recuerda Dockerfile.