Hola, Soy Arturo Mauricio.   @ArturoMauricioDev

Últimas publicaciones

Publicaciones del Blog

Trabajos más recientes

Portafolio

Home


Soy ingeniero en Sistemas, actualmente me especializo en el desarrollo web como Fullstack developer. Ayudo a las empresas y startups a crear puentes digitales entre sus empleados y/o con sus clientes para realizar tareas cotidianas de forma inmediata a bajos costos y de manera efectiva. Me apasiona dar soluciones tecnológicas a tareas del día a día y convertirlas en productos, que son usados por los empleados de la compañía y/o por sus clientes.

Desarrollo aplicaciones web utilizando herramientas del stack MERN (MongoDB, Express, React y Node) de acuerdo con los requerimientos del usuario considerando metodologías UX, Component Driven Development (CDD) con la ayuda de herramientas basadas en JavaScript para lograr un resultado de impacto.
Me encanta descubrir nuevas formas e ideas aprovechando mi background académico de enseñanza en diferentes universidades para brindar soluciones más saludables a los empleados de compañías y/o los usuarios de aplicaciones.

Conecto con estudiantes y profesionales que recién van empezando para guiarles y enseñarles sobre el desarrollo de aplicaciones web. De esta manera construir una comunidad junto a ellos donde todos nos apoyemos frente a los problemas del día a día.

Quiero colaborar y generar las mejores aplicaciones web para los usuarios que sean de utilidad en su vida cotidiana y les brinden bienestar y mejor calidad de vida.

    👉 Manejo en el área laboral: HTML5, CSS3, Sass, MUI, JavaScript es6+, React.js y NextJs.
    👉 Desarrollo utilizando: React Hooks, React Router y su despliegue.
    👉 Realizo la manipulación del DOM y estructura de datos en JS.
    👉 He trabajado consumiendo APIs Rest
    👉 He trabajado costruyendo APIs Rest en Express conectando a bases de datos PostgreSQL
    👉 Desarrollo utilizando Node, Express, npm, passport, jwt, postgreSQL y Docker
    👉 He trabajado construyendo aplicaciones en Next.js
    👉 He trabajado con git y GitHub
    👉 Administro sistemas basados en Linux

_Para trabajar juntos o si deseas alguna mentoría contáctame._


Arturo Mauricio


Probablemente realizaste muchos proyectos con React, muchos de ellos los creaste utilizando create-react-app. Es normal, esta manera de crear tus proyectos es una práctica muy usual entre los desarrolladores. Pero te preguntaste ¿si hay otras formas de crear proyectos? Por su puesto que sí, hay varias y una de ellas es utilizando Vite.

## Tabla de Contenidos

-   [¿Por qué deberías usar Vite?](#¿por-qué-deberías-usar-vite)
-   [Vamos a la acción](#vamos-a-la-acción)
-   [Resolviendo problemas de versión](#resolviendo-problemas-de-versión)

## ¿Por qué deberías usar Vite?

Si bien con el tiempo, hemos visto herramientas como Webpack, Rollup y Parcel , que mejoraron enormemente la experiencia de desarrollo para los desarrolladores frontend. Hoy en día no es raro que los proyectos a gran escala contengan miles de módulos. Estamos empezando a encontrar un cuello de botella en el rendimiento de las herramientas basadas en JavaScript: a menudo puede llevar una espera excesivamente larga (¡algunas veces hasta minutos!) Para activar un servidor de desarrollo, e incluso con HMR, las ediciones de archivos pueden tardar un par de segundos en reflejarse en el navegador. El ciclo de retroalimentación lento puede afectar en gran medida la productividad y la felicidad de los desarrolladores.

Vite tiene como objetivo abordar estos problemas aprovechando los nuevos avances en el ecosistema: la disponibilidad de módulos ES nativos en el navegador y el surgimiento de herramientas JavaScript escritas en lenguajes de compilación a nativos.

Y ¿De dónde viene toda esta iniciativa para optimizar y resolver estos problemas? Pues del creador de Vue Js, Evan You. Para todos aquellos que no conocen la trayectoria de Evan es bueno mencionar que trabajo para Meteor Development Group y posteriormente paso un par de años en Google Creative Lab donde también formo parte de los inicios de Angular. Fue allí, en Mountain View que decidió ser un rebelde e ir en contra corriente para crear su propia librería de JavaScript, en donde las cosas se mantengan simples y el rendimiento sea el mejor. Es así como nació Vue Js, por eso no me sorprende en nada los objetivos propuestos por Vite Js. También es obvio que existe una coincidencia, ambos proyectos son nombrados con palabras en francés.

## Vamos a la acción.

Evan en su cuenta de Twitter nos indica las diferentes maneras de como podemos iniciar un proyecto con Vite.

![Evan Tweet](https://i49.servimg.com/u/f49/19/27/49/47/1510.png)

Ambas nos ayudarían a lograr nuestro objetivo, pero esta vez yo utilizare:

```
npm init vite@latest
```

Ejecutamos el comando y a continuación nos pregunta el nombre del proyecto. Esta vez lo nombraré como vite-project.

![npm init vite@latest](https://i49.servimg.com/u/f49/19/27/49/47/16268910.png)

Luego debemos indicar el framework a utilizar, elegimos react.

![Elegimos React](https://i49.servimg.com/u/f49/19/27/49/47/16268911.png)

![Elegimos React](https://i49.servimg.com/u/f49/19/27/49/47/16268912.png)

¡Y eso es todo! Ya creamos nuestro primer proyecto con Vite en cuestión de segundos. Para finalizar nos indica 3 sencillos pasos para hacerlo correr.

![Debes ejecutar lo siguiente](https://i49.servimg.com/u/f49/19/27/49/47/16268913.png)

Ahora es cuando a más de uno les habrá saltado un error y comenzaran a sentirse frustrados. Esperen un segundo respiren profundo que acá les traigo la solución. El error más común y por el cual no llega a funcionar es porque la versión de NodeJs no es la adecuada. Para que ViteJs comience a andar necesitamos la versión 12 o posterior. Vamos a solucionarlo.

## Resolviendo problemas de versión.

La manera más sencilla y eficiente de resolver los problemas de versión de NodeJs es utilizando una maravillosa herramienta de gestión de versiones para NodeJs llamada nvm. Para instalarla ejecutamos el siguiente comando.

```
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```

Una vez instalado, reinicia tu terminal y ya podemos ver las versiones de NodeJs que tenemos en nuestro sistema con nvm list.

![nvm list](https://i49.servimg.com/u/f49/19/27/49/47/16268914.png)

Luego procedemos a verificar que versiones están disponibles en los repositorios para realizar la instalación de la versión correcta para la tarea que deseamos realizar. Para ello utilizo el comando nvm ls-remote --lts. A continuación nos mostrará una larga lista con las versiones de NodeJs.

![version list](https://i49.servimg.com/u/f49/19/27/49/47/16268915.png)

Una vez identificada la versión que requerimos procedemos a instalar. Para esta tarea en específico instalamos la versión 12.2.

![instalación](https://i49.servimg.com/u/f49/19/27/49/47/16268916.png)

Ahora verificamos con nvm list la versión de NodeJs con la cual está trabajando el sistema. También es bueno mencionar que con nvm podremos cambiar las diferentes versiones de NodeJs de acuerdo a la necesidad que tengamos, sin tener que instalar o desinstalar. Todas las versiones coexistirán, solo tendremos que activarlas o desactivarlas.

![Se verifica la instalación](https://i49.servimg.com/u/f49/19/27/49/47/16268917.png)

¡Ahora si a iniciar el proyecto!

![npm install](https://i49.servimg.com/u/f49/19/27/49/47/16268918.png)

![npm run dev](https://i49.servimg.com/u/f49/19/27/49/47/16268919.png)

Lo logramos ViteJs ya está funcionando.

![Está funcionando, se muestra la url](https://i49.servimg.com/u/f49/19/27/49/47/16268920.png)

¡Felicidades! Acabas de crear tu primer proyecto con ViteJs.

![Proyecto React con Vite funcionando en el navegador](https://i49.servimg.com/u/f49/19/27/49/47/16268921.png)


Otra forma de crear proyectos en React

¿Debería crear mis proyectos React con Vite?


Atomic Design nace a partir de la inquietud de Brad Frost de aplicar sus clases de química de la secundaria a otros campos e industrias. Su profesor, el Sr. Rae, tenía la reputación de tener una de clases más difíciles en su escuela debido a que sus estudiantes tenían que equilibrar cientos de ecuaciones químicas. Recordemos un poco sobre química de secundaria, sabemos que las reacciones químicas están representadas por ecuaciones químicas que muestran como los átomos se combinan para formar moléculas. ¡Voilà! ¡Es así como empezó todo!

El mundo es increíblemente complejo, es natural que este principio sobre las reacciones químicas sea aplicado a otros campos abordando problemas similares, por ejemplo el diseño de aplicaciones para distintos dispositivos como teléfonos móviles, tabletas, smart TVs, consolas de juegos, lentes de VR y AR, etc. este proceso es realmente complejo y se requieren procesos que faciliten este desarrollo y eviten los errores. Atomic Design utiliza este principio de química de secundaria, y viene a dar en el clavo, uniendo disciplinas como el diseño de aplicaciones y el desarrollo bajo un mismo concepto, el de _`diseñar por componentes`_.

## Tabla de Contenidos

-   [Composición de componentes](#composición-de-componentes)
-   [Los elementos de Atomic Design](#los-elementos-de-atomic-design)
    -   [Átomos](#átomos)
    -   [Moléculas](#moléculas)
    -   [Organismos](#organismos)
    -   [Plantillas](#plantillas)
    -   [Páginas](#páginas)
-   [Llevando todo a código](#llevando-todo-a-código)
    -   [ProductRow](#productrow)
    -   [ProductCatergoryRow](#productcatergoryrow)
    -   [ProductTable](#producttable)
    -   [SearchBar](#searchbar)
    -   [FilterableProductTable](#filterableproducttable)

## Composición de componentes

La composición de componentes es un principio fundamental en ReactJS, te ayuda a diseñar tus componentes de modo que sean muy flexibles, y que se integren entre sí para cambiar un resultado visual o su funcionamiento dentro de la aplicación sin dificultades. Se crean componentes de fácil acoplamiento, es así como son fáciles de reutilizar, mover e incluso eliminar.

![Piezas de lego](https://i49.servimg.com/u/f49/19/27/49/47/blokoc10.jpg)

Son como piezas de lego cada unidad con su forma, color y estructura propia, que combinándolos de una manera se podría construir un edificio y si los combinamos de otra manera podríamos construir un tractor o lo que nuestra propia creatividad e imaginación nos permita hacerlo. A esto le llamamos composición de componentes.

![Construyendo con piezas de lego](https://i49.servimg.com/u/f49/19/27/49/47/imagen10.jpg)

Para realizar la composición de componentes utilizando la metodología Atomic Design debemos comenzar desde los elementos más pequeños de una aplicación, integrándolos uno a uno para formar componentes más grandes que irán convirtiéndose eventualmente en plantillas y páginas. Pero, ¿cómo vamos estructurándolos uno a uno? Lo haremos con:

> El principio de responsabilidad única.

🤯 ¿En qué consiste este principio? Para dar una buena explicación acerca de este principio debemos conocer y seguir las siguientes reglas.

-   **Los átomos** son los componentes básicos, cada átomo como cada elemento químico tiene propiedades distintas a cualquier otro átomo y no se lo puede descomponer más sin perder su significado. Son la unidad funcional más pequeña.

-   **Las moléculas** son grupos de dos o más átomos que se mantienen unidos. Esta combinación entre átomos adquiere por sí misma sus propias propiedades únicas y funcionan en conjunto brindando una única funcionalidad.

-   **Los organismos** son conjuntos de moléculas que funcionan juntas como una unidad brindando una única funcionalidad, estas estructuras son relativamente complejas, varían desde organismos unicelulares hasta organismos sofisticados, y todas ellas tienen un límite de responsabilidad.

En esta descripción, se simplifican muchas cosas de la composición química, pero en sí nos da la esencia básica para la composición de componentes, utilizando el principio de responsabilidad única en nuestras aplicaciones. A continuación precisemos aún más estos 5 elementos que componen esta metodología.

## Los elementos de Atomic Design.

### Átomos

Son componentes básicos, estos no se los puede desglosar más sin dejar de ser funcionales. Cada átomo tienen sus propias propiedades únicas. Pueden ser: botones, avatares, inputs de formularios, párrafos, etc.

![Identificando átomos en una vista](https://i49.servimg.com/u/f49/19/27/49/47/imagen10.png)

### Moléculas

Son grupos de átomos unidos entre sí que adquieren nuevas propiedades distintas, funcionan juntos como una unidad. Por ejemplo:

Un input de búsqueda y un botón pueden unirse para crear una molécula que forma parte de un formulario de búsqueda. Cuando se combinan estos átomos llegan a tener un propósito. Esta molécula llega a ser un componente simple, portátil y reutilizable que se puede colocar en cualquier lugar donde se necesite realizar búsquedas.

![Identificando moléculas en una vista](https://i49.servimg.com/u/f49/19/27/49/47/imagen11.png)

La creación de componentes simples ayuda a los diseñadores y desarrolladores a emplear el principio de responsabilidad única. Dicho en otras palabras "hacer una cosa y hacerlo bien"

### Organismos

Son componentes relativamente complejos, compuestos por grupos de moléculas y/o átomos y/u otros organismos. Estos organismos forman secciones distintas. Por ejemplo, cuando unimos el logo, los iconos, texto y una molécula de búsqueda para crear una navegación en la aplicación. La navegación en sí es una sección independiente con sus propias propiedades, en mobile se puede ver con su burguer menu de una manera diferente a la versión desktop donde no se muestra el burguer menu, ya que se despliega sus opciones directamente.

![Identificando organismos en una vista](https://i49.servimg.com/u/f49/19/27/49/47/imagen12.png)

### Plantillas

En esta instancia, la plantilla contiene los componentes creados en las anteriores instancias y articulan la estructura de la app. Se compone principalmente de grupos de organismos unidos para formar una vista de la aplicación. Aquí se empieza a ver ya el diseño en acción. Con las plantillas los clientes comienzan a ver el diseño final de la aplicación.

Las plantillas definen el esqueleto de la aplicación, muestran componentes clave en acción, demuestra su contenido con respecto a tamaños, espacios que ocupa y la longitud de los textos y caracteres.

### Páginas

Las páginas llegan a ser instancias de las plantillas, dicho de otra manera, las páginas son plantillas con contenido específico y real que muestran como se ve una interfaz de la aplicación. Los usuarios verán e interactuarán obteniendo una experiencia de su uso y utilizando las funcionalidades que la aplicación les brinda.

En esta etapa se realiza una revisión de que todo se llegue a ver bien y de que todo funcione correctamente. En caso de que algo no se vea coherente y no brinde la función esperada, se debe retroceder y modificar las moléculas, organismos y plantillas para resolver las necesidades de los usuarios.

## Llevando todo a código

A continuación, vamos a dividir una interfaz de usuario en una jerarquía de componentes utilizando el principio de responsabilidad única. Y lo llevaremos a código utilizando ReactJS.

![Dividiendo la vista de una app de acuerdo con atomic design](https://i49.servimg.com/u/f49/19/27/49/47/imagen13.png)

Como se observa tenemos una aplicación que muestra productos de deportes y productos electrónicos con sus respectivos precios. Estos productos están divididos por sus categorías. También, se cuenta con una barra de búsquedas la cual filtra el producto deseado de las listas de productos, asimismo se considera solo mostrar los productos que tienen stock.

Ahora comenzaremos a identificar los diferentes componentes de acuerdo con la metodología atomic design.

1. **FilterableProductTable** (café): Contiene la totalidad de componentes.

2. **SearchBar** (azul): Componente para realizar búsquedas y filtrado, su responsabilidad es mostrar los productos de acuerdo con los parámetros que el usuario vaya ingresando.

3. **ProductTable** (verde): Muestra la colección de productos de todas las categorías según el nombre y el precio.

4. **ProductCategoryRow** (turquesa): Muestra los productos de una categoría en específico.

5. **ProductRow** (rojo): Muestra un producto, su nombre y precio en una fila.

### ProductRow

De esta manera quedaría el código del componente ProductRow.

![Componente ProductRow](https://i49.servimg.com/u/f49/19/27/49/47/carbon10.png)

### ProductCatergoryRow

Este componente recibe el título que mostrará en su categoría y el arreglo de productos que pertenecen a dicha categoría, con esa información puede construirse por sí mismo. También crea componentes ProductRow por cada producto reutilizando código.

![Componente ProductCategoryRow](https://i49.servimg.com/u/f49/19/27/49/47/carbon11.png)

### ProductTable

Se construye este componente sobre la base de los anteriores componentes, para el ejemplo se utiliza dos categorías, por lo cual se le envía el título y el arreglo de productos correspondiente.

![Componente ProductTable](https://i49.servimg.com/u/f49/19/27/49/47/carbon12.png)

### SearchBar

Este componente quedaría de la siguiente manera.

![Componente SearchBar](https://i49.servimg.com/u/f49/19/27/49/47/carbon13.png)

### FilterableProductTable

Finalmente, todos los componentes anteriormente construidos son utilizados en este componente. También es bueno resaltar que cada uno de ellos es independiente en sus propiedades y estados. Para conseguir la funcionalidad esperada, los componentes interactúan unos con otros utilizando useContext.

![Componente FilterableProductTable](https://i49.servimg.com/u/f49/19/27/49/47/carbon14.png)

Para obtener toda la información correspondiente a este ejemplo puedes visitar el siguiente [GitHub](https://github.com/ArturoMauricioDev/product-table).

Ahora es tu turno, ya puedes construir tu siguiente aplicación utilizando la metodología Atomic Design.


Atomic Design es una metodología concebida por Brad Frost, que pretende acabar con las inconsistencias y optimizar el diseño y desarrollo al máximo en aplicaciones modernas, de ese modo podemos aplicar la composición de componentes en ReactJs.

¿Cómo utilizo atomic design en mis proyectos ReactJs?


## Tabla de Contenidos

-   [Prerrequisitos](#prerrequisitos)
-   [A la acción](#a-la-acción)
-   [Ingresa a tu app](#ingresa-a-tu-app)

## Prerrequisitos

Para poder desplegar tu aplicación React en GitHub Pages necesitas tener instalado lo siguiente:

1. Node y npm

```
$ node --version
v16.13.2
```

```
$ npm --version
8.1.2
```

Si deseas instalar o manejar las versiones de NodeJs en tu sistema, puedes revisar este otro [artículo.](https://arturomauriciodev.netlify.app/blog/deberia-crear-mis-proyectos-react-con-vite/#resolviendo-problemas-de-versión)

2. Git

```
$ sudo apt install git
```

3. También debes tener una cuenta de [GitHub.](https://github.com/)

## A la acción

1. Crea un repositorio en GitHub.

    - Asegúrate que la visibilidad de tu repositorio sea **público**.

2. Crea tu aplicación React.
   Para ello puedes utilizar el siguiente comando:

```
$ npx create-react-app my-app
```

Ingresa al directorio creado.

```
$ cd my-app
```

Ejecuta la aplicación.

```
$ npm run start
```

Verifica en el navegador que la aplicación esté ejecutándose.

3. Instala el paquete **_gh-pages_**, para ello utiliza el siguiente comando.

```
npm install gh-pages --save-dev
```

Puedes verificar la instalación de **_gh-pages_** en el archivo **_package.json_**.

4. Agrega la propiedad **_homepage_** en el archivo **_package.json_**. Para ello puedes utilizar [Visual Studio Code.](https://code.visualstudio.com/)

_La propiedad homepage tiene el siguiente formato._

```
https://{username}.github.io
```

Debes reemplazar username por el nombre de usuario que tienes en GitHub.

Tu archivo **_package.json_**, quedaría de la siguiente manera.

```
"name": "my-app",
  "version": "0.1.0",
  "homepage": "https://ArturoMauricioDev.github.io/my-app",
  "private": true,
```

5. Agrega los **_scripts_** de predeploy y deploy en tu **_package.json_**, tu archivo quedaría de esta manera.

```
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
```

6. Conecta tu repositorio local con el remoto (GitHub).

```
$ git remote add origin https://github.com/{username}/{repo-name}.git
```

7. Finalmente, despliega tu aplicación React en GitHub Pages.

```
$ npm run deploy -- -m "Despliegue de la app en GitHub Pages"
```

GitHub Pages automáticamente realizará un commit en la rama _gh-pages_ del repositorio remoto, de esa manera quedará todo listo en cuanto al despliegue. 🚀

## Ingresa a tu app

Para obtener la url de tu app debes ingresar a **_Settings_** de tu repositorio y a la sección **_Pages_**, ahí encontrarás una url similar a https://gitname.github.io/my-app.


En este tutorial te enseño a desplegar una aplicación de React en GitHub Pages.

Desplegando una aplicación React en GitHub Pages

Noticias, tips y concejos destacados

Blog

Hi there! Thank you so much for your interest in working together. Please fill the contact form below or send us an email at [example@example.com](mailto:example@example.com).

name

email

subject

message

consent

Contact

En esta sección encontrarás los proyectos en los que ando trabajando.

Portfolio

## Demo

El proyecto esta disponible en [https://room.js.org/](https://room.js.org/). Asimismo este es su [repositorio](https://github.com/ArturoMauricioDev/roomHomepage).

## Tabla de Contenidos

-   [Descripción](#descripción)
    -   [Mobile](#para-mobile)
    -   [Desktop](#para-desktop)
    -   [El reto](#el-reto)
    -   [Créditos por el diseño y reto](#créditos-por-el-diseño-y-reto)
-   [Construcción del proyecto](#construcción-del-proyecto)
    -   [Estructura HTML](#estructura-html)
    -   [Estilos en CSS](#estilos-en-css)
    -   [Manipulando el DOM con JavaScript](#manipulando-el-dom-con-javascript)
-   [Licencia](#licencia)
-   [Bonus](#bonus)
-   [Autor](#autor)



## Descripción

Este proyecto realizará la maquetación del siguiente reto en `HTML`, `CSS` y `JavaScript` considerando los siguientes requerimientos:

### Para mobile

![Design preview for the Room homepage coding challenge - mobile](https://github.com/ArturoMauricioDev/roomHomepage/raw/master/design/mobile-design.jpg)

### Para desktop

![Design preview for the Room homepage coding challenge - desktop](https://github.com/ArturoMauricioDev/roomHomepage/raw/master/design/desktop-preview.jpg)

### El reto

El reto consiste en construir esta página inicial de una e-commerce logrando que se parezca lo más posible al diseño.

Los usuarios deberían poder:

-   Ver el diseño óptimo para el sitio según el tamaño de pantalla de su dispositivo (`Mobile First` es requerido)
-   Ver el estado hover para todos los elementos interactivos en la página.
-   Navegar con el slider.

También se utilizó el archivo de `style-guide.md`, que contiene la información necesaria, de la paleta de colores y fuentes.

### Créditos por el diseño y reto

Este reto pertenece a la lista de retos de [Frontend Mentor](https://www.frontendmentor.io/dashboard). Para más información puede visitar [este enlace](https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq).

## Construcción del proyecto

Se construyó utilizando la metodología `mobile first` para dispositivos de 375px, 1024px y 1440px. Asimismo, para los estilos se hace el uso de la metodología `BEM`. También se utiliza `JavaScript` Vanilla para la `manipulación del DOM` en el menú de la aplicación mobile y en el slider tanto en mobile como en desktop.

A continuación se mostrará algunos detalles y buenas prácticas:

### Estructura HTML

_Carga independiente de las hojas de estilos._

```
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/desktop1024.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="./styles/desktop1440.css" media="screen and (min-width: 1440px)">
```

_Optimización de carga de imágenes según el dispositivo._

```
<picture>
  <source media="(min-width:1024px)" srcset="./images/desktop-image-hero-1.jpg">
  <img src="./images/mobile-image-hero-1.jpg" alt="">
</picture>
```

### Estilos en CSS

_Uso de variables_

```
:root{
    --DarkGray: hsl(0, 0%, 63%);
    --Black: hsl(0, 0%, 0%);
    --White: hsl(0, 0%, 100%);
    --VeryDarkGray: hsl(0, 0%, 27%);
    font-family: 'Spartan', sans-serif;
}
```

_Uso de un toggle para el menú mobile_

```
.menu.toggle{
    display: none;
}

.menu{
    position: absolute;
    background: var(--White);
    display: flex;
    justify-content: space-between;
    height: 80px;
    width: 100%;
    transition: .3s;
}
```

_Uso de flexbox_

```
.topContainer{
    display: flex;
    position: absolute;
    width: 50%;
}
```

### Manipulando el DOM con JavaScript

_Uso de toggle para el menú_

```
let menu = document.getElementById('menu')
let burger = document.getElementById('burger')
let closeButton = document.getElementById('close')

function toggleMenu(){
    menu.classList.toggle('toggle')
}

burger.addEventListener('click', toggleMenu)
closeButton.addEventListener('click', toggleMenu)
```

## Licencia

> Este proyecto esta bajo la licencia de MIT.

## Bonus

Se puede acceder al proyecto por medio del dominio [https://room.js.org/](https://room.js.org/). Para utilizarlo en este proyecto se realizó la integración del proyecto [https://js.org/](https://js.org/), para más información visita su [sitio.](https://js.org/)

## Autor

Made with 💜 by [ArturoMauricioDev](https://arturomauricio.bio.link/)

Es un proyecto que tiene como objetivo aplicar una maquetación en HTML, CSS y JavaScript. El proyecto forma parte de la escuela de Desarrollo Web de Platzi utilizando el challenge de Frontend Mentor.

Room home page


## Demo

El proyecto esta disponible en [https://arturomauriciodev.github.io/socialMedia/](https://arturomauriciodev.github.io/socialMedia/).

## Tabla de Contenidos

-   [Descripción](#descripción)
    -   [Mobile](#para-mobile)
    -   [Desktop](#para-desktop)
    -   [El reto](#el-reto)
    -   [Créditos por el diseño y reto](#créditos-por-el-diseño-y-reto)
-   [Construcción del proyecto](#construcción-del-proyecto)
    -   [Estructura HTML](#estructura-html)
    -   [Estilos en CSS](#estilos-en-css)
    -   [Manipulando el DOM con JavaScript](#manipulando-el-dom-con-javascript)
-   [Licencia](#licencia)
-   [Autor](#autor)

## Descripción

Este proyecto realizará la maquetación del siguiente reto en **HTML**, **CSS** y **JavaScript** considerando los siguientes requerimientos:

### Para mobile

![Design preview for the Room homepage coding challenge - mobile](https://github.com/ArturoMauricioDev/socialMedia/blob/main/design/mobile-design-light.jpg?raw=true)
![Design preview for the Room homepage coding challenge - mobile](https://github.com/ArturoMauricioDev/socialMedia/blob/main/design/mobile-design-dark.jpg?raw=true)

### Para desktop

![Design preview for the Room homepage coding challenge - desktop](https://github.com/ArturoMauricioDev/socialMedia/blob/main/design/desktop-preview.jpg?raw=true)

### El reto

El reto consiste en construir esta página inicial y que se parezca lo más posible al diseño.

Los usuarios deberían poder:

-   Ver el diseño óptimo para el sitio según el tamaño de pantalla de su dispositivo (Mobile First es requerido)
-   Ver el efecto hover para todos los elementos interactivos de la página
-   Cambiar el tema de color de su preferencia

También se utilizó el archivo de `style-guide.md`, que contiene la información necesaria, de la paleta de colores y fuentes.

### Créditos por el diseño y reto

Este reto pertenece a la lista de retos de [Frontend Mentor](https://www.frontendmentor.io/dashboard). Para más información puede visitar [este enlace](https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H).

## Construcción del proyecto

Se construyó utilizando la metodología `mobile first` para dispositivos de 375px, 1024px y 1440px. Asimismo, para los estilos se hace el uso de la metodología `BEM`. También se utiliza `JavaScript` Vanilla para la `manipulación del DOM` haciendo funcional el theme switcher para cambiar el color del tema de acuerdo con su preferencia.

A continuación se mostrará algunos detalles y buenas prácticas:

### Estructura HTML

_Carga independiente de las hojas de estilos._

```
 <link rel="stylesheet" href="./styles/styles.css">
 <link rel="stylesheet" href="./styles/desktop1024.css" media="screen and (min-width: 1024px)">
 <link rel="stylesheet" href="./styles/desktop1440.css" media="screen and (min-width: 1440px)">
```

_Utilización adecuada de etiquetas para mejorar la accesibilidad._

```
<article>
            <h2 class="header__h2 light">
                Social Media Dashboard
            </h2>
            <article class="header__article">
                <small class="header__small light">
                Total Followers: 23,004
                </small>
                <div class="header__div light">
                    <p>
                        Dark Mode
                    </p>
                    <label class="switch">
                  <input id="switch" type="checkbox">
                  <span class="slider light round"></span>
                </label>
                </div>
            </article>
        </article>
```

### Estilos en CSS

_Uso de variables_

```
:root {
    font-family: 'Inter', sans-serif;
    --scroll-gap: 1.5rem;
    /* Primary */
    --LimeGreen: hsl(163, 72%, 41%);
    --BrightRed: hsl(356, 69%, 56%);
    --Facebook: hsl(208, 92%, 53%);
    --Twitter: hsl(203, 89%, 53%);
    --Instagram: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    --YouTube: hsl(348, 97%, 39%);
    /* #### Light Theme */
    --White-BG: hsl(0, 0%, 100%);
    --VeryPaleBlue-TopBGPattern: hsl(225, 100%, 98%);
    --LightGrayishBlue-CardBG: hsl(227, 47%, 96%);
    --DarkGrayishBlue-Text: hsl(228, 12%, 44%);
    --VeryDarkBlue-Text: hsl(230, 17%, 14%);
    /* #### Light Theme */
    --Toggle: hsl(230, 22%, 74%);
    /* #### Dark Theme */
    --VeryDarkBlue-BG: hsl(230, 17%, 14%);
    --VeryDarkBlue-Top-BG-Pattern: hsl(232, 19%, 15%);
    --DarkDesaturatedBlue-CardBG: hsl(228, 28%, 20%);
    --DesaturatedBlue-Text: hsl(228, 34%, 66%);
    --White-Text: hsl(0, 0%, 100%);
    /* #### Dark Theme */
    --Toggle-dark: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
}
```

_Construcción del slider_

```
/* The switch - the box around the slider */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}


/* Hide default HTML checkbox */

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--Toggle);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider.round.dark {
    background-image: var(--Toggle-dark);
}

.slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 29px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider.dark:before {
    background-color: var(--VeryDarkBlue-BG);
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.parent {
    padding: var(--scroll-gap);
    /* height: 40vh; */
    overflow: auto;
    scroll-snap-type: mandatory;
}

.child {
    /* height: calc(50vh - 3 * var(--scroll-gap)); */
    /* scroll-snap-align: center; */
    padding-top: 0.3rem;
    display: grid;
    border-radius: 7px;
}

.child:not(:last-child) {
    margin-bottom: var(--scroll-gap);
}

.child .container {
    background-color: var(--LightGrayishBlue-CardBG);
    padding: 0;
    width: 100%;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
```

_Uso de flexbox_

```
.container__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
```

### Manipulando el DOM con JavaScript

_Uso de toggle para el menú_

```
let switchButton = document.getElementById('switch')
let light = document.getElementsByClassName('light')

function toggle() {
    for (let i = 0; i < light.length; i++) {
        light[i].classList.toggle('dark')
    }
}

switchButton.addEventListener('click', toggle)
```

## Licencia

> Este proyecto esta bajo la licencia de MIT.

## Autor

Made with 💜 by [ArturoMauricioDev](https://arturomauricio.bio.link/)


Es un proyecto que tiene como objetivo aplicar la maquetación en HTML, CSS y JavaScript. El proyecto forma parte de la escuela de Desarrollo Web de Platzi utilizando el challenge de Frontend Mentor.

Social media dashboard with theme switcher


## Tabla de Contenidos

-   [Demo](#demo)
-   [Construcción del proyecto](#construcción-del-proyecto)
    -   [Composición de componentes](#composición-de-componentes)
    -   [Preprocesador SASS](#preprocesador-sass)
    -   [Manejo del estado](#manejo-del-estado)
-   [Licencia](#licencia)
-   [Autor](#autor)

## Demo

El proyecto esta disponible en:

-   [App.](https://arturomauriciodev.github.io/todo-app-react-render/)
-   [GitHub Repo.](https://github.com/ArturoMauricioDev/todo-app-react-render)

En la imagen se puede observar la pantalla de inicio, donde se pueden agregar las tareas a realizar.

![Inicio de la aplicacion, agregue una tarea a realizar](https://i66.servimg.com/u/f66/20/43/92/62/localh18.png)

Se despliega un modal, en el cual se escribe la tarea a realizar y se le da en añadir.

![Escibe un nuevo TODO y has clic en añadir](https://i66.servimg.com/u/f66/20/43/92/62/localh19.png)

Las tareas se agregan cronológicamente, también se puede indicar que ya fueron completadas mostrando el total de ellas en la parte superior. Del mismo modo se las pueden eliminar para que desaparezcan de la lista. Asimismo, es bueno mencionar que todos los datos son guardados en el local storage de tal modo que si cerramos el navegador los datos persisten para la próxima vez que se abra el navegador e ingrese a la aplicación.

![Has completado 2 tareas de 4](https://i66.servimg.com/u/f66/20/43/92/62/localh20.png)

Se pueden ingresar caracteres y/o palabras para filtrar las tareas a mostrar en la lista.

![Ingreso la i en el cuadro de búsqueda de tareas](https://i66.servimg.com/u/f66/20/43/92/62/localh21.png)

Por ejemplo, si ingreso "im" se desplegaría en la lista de tareas "Implementar estados a mis componentes".

![Se ingresa im en el cuadro de búsqueda dando un resultado](https://i66.servimg.com/u/f66/20/43/92/62/localh22.png)

En caso de no encontrar coincidencias, se despliega un mensaje de "No hay resultados para:" el criterio de su búsqueda.

![Se ingresa reac en el cuadro de búsqueda dando ningun reslutado](https://i66.servimg.com/u/f66/20/43/92/62/localh17.png)

## Construcción del proyecto

Se construyó utilizando la metodología `mobile first` para dispositivos de 375px. Asimismo, para los estilos se hace el uso de la metodología `BEM` en el preprocesador `SASS`. También se utiliza `React` para crear componentes utilizando `Atomic Design` y aprovechar los estados de los componentes junto a sus hooks.

A continuación se mostrará algunos detalles y buenas prácticas:

### Composición de componentes

_Componentes de la aplicación_

```
<TodoHeader>
    <TodoCounter totalTodos={totalTodos} completedTodos={completedTodos} />
    <TodoSearch searchValue={searchValue} setSearchValue={setSearchValue} />
</TodoHeader>

<TodoList
    filteredText={filteredText}
    totalTodos={totalTodos}
    searchValue={searchValue}
    onEmptyTodos={() => <EmptyTodos />}
    onEmptySearchResults={(searchText) => (
        <p className="empty-todos">No hay resultados para: {searchText}</p>
    )}
    render={(todo) => (
        <TodoItem
        key={todo.text}
        text={todo.text}
        completed={todo.completed}
        onComplete={() => toggleTodo(todo.text)}
        onDelete={() => deleteTodo(todo.text)}
        />
    )}
>
</TodoList>

{openModal && (
    <Modal>
        <TodoForm addTodo={addTodo} setOpenModal={setOpenModal} />
    </Modal>
)}
<CreateTodoButton openModal={openModal} setOpenModal={setOpenModal} />

<ChangeAlertWithStorageListener sincronize={setSincronizedItem} />
```

### Preprocesador SASS

_Importación de estilos por componente_

```
//index.scss

@import "./components/styles/globales.scss";
@import "./components/styles/TodoCounter";
@import "./components/styles/CreateTodoButton";
@import "./components/styles/TodoList";
@import "./components/styles/TodoSearch";
@import "./components/styles/TodoItem.scss";
@import "./components/styles/Modal";
@import "./components/styles/TodoForm";
@import "./components/styles/ChangeAlert";
@import "./components/styles/EmptyTodos";

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: $bg-color;
  font-family: $Fuente1;
}

#root {
  margin: 0 24px;
  min-height: 100vh;
}
```

_Uso de variables_

```
$Fuente1: 'Nunito', sans-serif;
$color-primario: #29A19C;
$color-primario-disabled:#29a19c75;
$color-secundario: #F9F9F9;
$color-secundario-tranparenci:#f9f9f9ad;
$color-variante:rgba(249, 249, 249, 0.2);
$bg-color: #222831;
$bg-component:#2C3440;
```

_Anidamiento en los estilos_

```
.ChangeAlert-bg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1e1e1f50;
    z-index: 2;
    & .alert-container{
        height: 100%;
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        & p{
            width: 100%;
            height: 56px;
            margin: 0;
            background: #f75858;
            color: $color-secundario;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            cursor: pointer;
        }
        & button{
            width: 100%;
            height: 48px;
            margin: 0;
            background: $color-secundario;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            color: $bg-component;
            font-family: $Fuente1;
            font-size: 16px;
            font-weight: 700;
            border: 1px solid transparent;
            transition: border 0.15;
            &:hover{
                border: $color-secundario-tranparenci;
            }
        }
    }
}
```

### Manejo del estado

_Custom hook_

```
//useTodos.js

import { useState, useMemo } from "react";
import { useLocalStorage } from "./useLocalStorage";

function useTodos() {

    const [todos, saveTodos, setSincronizedItem] = useLocalStorage('TODOS_V1', []);

    const [searchValue, setSearchValue] = useState('');
    const [openModal, setOpenModal] = useState(false);

    const completedTodos = todos.filter(todo => !!todo.completed).length;
    const totalTodos = todos.length;

    const filteredText = useMemo(() =>
        todos.filter((todo) => {
            return todo.text.toLowerCase().includes(searchValue.toLowerCase())
        }), [todos, searchValue]
    )

    const toggleTodo = (text) => {
        const todoIndex = todos.findIndex(todo => todo.text === text);
        const newTodos = [...todos];
        newTodos[todoIndex].completed = !todos[todoIndex].completed;
        saveTodos(newTodos);
    }

    const deleteTodo = (text) => {
        const todoIndex = todos.findIndex(todo => todo.text === text);
        const newTodos = [...todos];
        newTodos.splice(todoIndex, 1);
        saveTodos(newTodos);
    }

    const addTodo = (text) => {
        const newTodos = [...todos];
        newTodos.push({
            completed: false,
            text,
        }
        );
        saveTodos(newTodos);
    }

    const states={
        totalTodos,
        completedTodos,
        searchValue,
        filteredText,
        openModal,
    }
    const stateUpdaters={
        setSearchValue,
        toggleTodo,
        deleteTodo,
        setOpenModal,
        addTodo,
        setSincronizedItem
    }

    return {states, stateUpdaters}
}

export { useTodos }
```

_Persistencia de datos en el local storage utilizando useEffect y useReducer_

```
//useLocalStorage.js

import { useEffect, useReducer } from "react"

function useLocalStorage(itemName, initialValue) {

    const [state, dispatch] = useReducer(reducer, initialState({ initialValue }));
    const {
        sincronizedItem,
        item
    } = state

    //Action Creators
    const onSuccess = (parsedItem) => dispatch({
        type: actionTypes.success,
        payload: parsedItem
    })
    const onSave = (newItem) => dispatch({
        type: actionTypes.save,
        payload: newItem
    })
    const onSincronize = ()=> dispatch({
        type: actionTypes.sincronize
    })

    useEffect(() => {
        const localStorageItem = localStorage.getItem(itemName);
        let parsedItem;

        if (!localStorageItem) {
            localStorage.setItem(itemName, JSON.stringify(initialValue));
            parsedItem = initialValue;
        } else {
            parsedItem = JSON.parse(localStorageItem);
        }
        onSuccess(parsedItem)
    }, [sincronizedItem])

    const saveItem = (newItem) => {
        localStorage.setItem(itemName, JSON.stringify(newItem))
        onSave(newItem)
    }

    const sincronizeItem = () => {
        onSincronize()
    }

    return [
        item,
        saveItem,
        sincronizeItem
    ]
}

const initialState = ({ initialValue }) => ({
    sincronizedItem: true,
    item: initialValue
})

const actionTypes = {
    success: 'SUCCESS',
    save: 'SAVE',
    sincronize: 'SINCRONIZE'
}

const reducerObject = (state, payload) => ({
    [actionTypes.success]: {
        ...state,
        sincronizedItem: true,
        item: payload
    },
    [actionTypes.save]: {
        ...state,
        item: payload
    },
    [actionTypes.sincronize]: {
        ...state,
        sincronizedItem: false,
    }
})

const reducer = (state, action) => {
    return reducerObject(state, action.payload)[action.type] || state
}

export { useLocalStorage };
```

_Optimizando las búsquedas con useMemo_

```
const filteredText = useMemo(() =>
        todos.filter((todo) => {
            return todo.text.toLowerCase().includes(searchValue.toLowerCase())
        }), [todos, searchValue]
    )
```

## Licencia

> Este proyecto esta bajo la licencia de MIT.

## Autor

Made with 💜 by [ArturoMauricioDev](https://arturomauricio.bio.link/)


Es un proyecto que tiene como objetivo aplicar teoría de componentes utilizando Atomic Design bajo el principio de responsabilidad única, para los estilos se utilizó el preprocesador de CSS SASS. Se creó la aplicación con Create React App, se utilizó conceptos de estados de componentes y el ciclo de vida de los mismos, además de varios hooks. La aplicación también utiliza persistencia de datos en el Local Storage.

Todo App in React


Thank you for contacting us! We will get back in touch with you soon.

**Have a great day!**