DEV Community: Danniel Navas

Actualización devtospanish

Danniel Navas — Wed, 16 Oct 2024 00:47:27 +0000

Hacia mucho tiempo no escribía, pero esta vez lo hago con avances de la plataforma en la que inice hace ya un tiempo considerable.

En esta oportunidad traigo cosas que de fondo pueden ser pequeñas pero espero sean de ayuda.

Ya contamos con link propio ahora pueden encontrar en https://devtospanish.dev
Contamos con Perfiles, y esta es una de las cosas que estuve pensando, los desarrolladores contamos con una expertis que nos facilita crear portafolios e intregrar apis sin mucho esfuerzo, pero en esta ocación me he dado cuanta que no todos los que participamos creamos contenido es full desarrollo hay diseño arquitectura y mil cosas más por lo que senti necesario crear un perfil que pueden compartir con su proio link y en el cual trae los post publicados por cada uno. ejemplo: https://www.devtospanish.dev/profile/dannieldev.
Aun que falta trabajo en este ya esta funcional.
Proximamente se incluira el tema de seo para que permita tener una descrripción y la imagen de usuario.
Ahora se marca el ultimo post publicado como nuevo, simple pero bueno algo detalle :D.
Este proyecto nacio con angular como tecnologia en front pero desde esta ultima versión contamos con vue como se ha podido ver en el favicon.

Y listo con estas actualizaciones espero seguir aportando a la comunidad y dando un poco mas de visibilidad a todos nosotros.

Despliega tu Proyecto Gratis en Firebase: Una Guía Paso a Paso

Danniel Navas — Fri, 15 Dec 2023 03:00:27 +0000

Para comenzar, es esencial tener Node instalado en tu máquina. A continuación, instalamos Firebase Tools de forma global con el siguiente comando:

npm install -g firebase-tools

Una vez que Firebase está instalado, iniciamos sesión a través de la terminal con el comando:

firebase login

Al ejecutar este comando, se nos presentará la opción de permitir que Firebase recopile información de uso y reportes de errores de CLI y Emulator Suite. Podemos elegir sí (Y) o no (N) según nuestras preferencias.

Después de seleccionar nuestra preferencia, seremos redirigidos a la página de inicio de sesión de Firebase. Ingresamos nuestras credenciales de Google y aceptamos los permisos necesarios. Una vez aceptado, veremos un mensaje exitoso y podemos continuar desde la terminal.

Siguiendo con el proceso, el siguiente comando es:

firebase init

Este comando inicia la configuración de nuestro hosting.

Seleccionamos con o sin GitHub Actions, según lo que se ajuste mejor a nuestro flujo de trabajo. Luego, elegimos la opción de hosting que más se adapte y asociamos el proyecto a nuestro desarrollo. En mi caso, ya tengo varios proyectos creados, así que selecciono uno.

El siguiente paso es indicar la ubicación de nuestro proyecto compilado.

Por defecto, sugiere public, pero puedes especificar otra carpeta, por ejemplo, dist/myproject. Esta carpeta debería resultar de ejecutar un comando como npm run build (revisa tu package.json en la sección de scripts).

Luego, nos pregunta si nuestro proyecto es una SPA (Single Page Application) como Angular, Vue o React. Si es así, respondemos con "y".

Continuará preguntando si queremos configurar GitHub Actions para automatizar el despliegue al hacer push o merge. La elección depende de tus preferencias.

Si seleccionas la opción por defecto (N), finalizaremos el proceso y se mostrará el resultado.

Si decides configurar GitHub Actions, te pedirá acceso a tu repositorio en GitHub, indicando el nombre de usuario y el nombre de tu proyecto separados por una barra (/), por ejemplo, dannielnavas/miproyecto.

Al finalizar, si no configuramos GitHub Actions, solo necesitamos hacer un build (npm run build) y luego ejecutar firebase deploy. Esto mostrará un enlace al proyecto en Firebase y otro que contendrá nuestro sitio desplegado.

Recuerda que Firebase ofrece un servicio gratuito mensual. Mientras no superes esa cuota, todo el funcionamiento será sin costo.

Espero que este artículo te ayude a desplegar tus proyectos de forma gratuita, independientemente de la tecnología utilizada.

No olvides que he contribuido a la comunidad de DevToSpanish, donde puedes encontrar más artículos escritos por hispanohablantes aquí.

Cómo mostrar tus artículos, videos, etc. en tu README de GitHub de forma dinamica

Danniel Navas — Sat, 25 Nov 2023 02:18:07 +0000

Introducción:

En este tutorial, te mostraré cómo mostrar tus artículos, videos, etc. en tu README de GitHub. Esto es posible siempre que el contenido que deseas mostrar esté disponible a través de una API.

Pasos a seguir:

Crea un repositorio en tu perfil de GitHub.
Crea un proyecto en Node.js.
Crea los archivos necesarios.
Configura el flujo de trabajo de GitHub Actions.

Creación del repositorio:

Para crear un repositorio en tu perfil de GitHub, sigue estos pasos:

Ve a la página de tu perfil de GitHub.
Haz clic en el botón Nuevo repositorio.
Escribe un nombre para tu repositorio.
Elige el tipo de repositorio. En este caso, elige Repositorio vacío.
Haz clic en el botón Crear repositorio.

Creación del proyecto Node.js:

Para crear un proyecto Node.js, sigue estos pasos:

Abre una terminal en tu computadora.
Navega a la carpeta donde deseas crear el proyecto.
Escribe el siguiente comando:

mkdir <nombre-del-proyecto> && cd <nombre-del-proyecto>

Escribe el siguiente comando para inicializar el proyecto:

pnpm init

Creación de los archivos necesarios:

Los archivos necesarios para este tutorial son los siguientes:

index.js: Este archivo contiene el código que se ejecutará para actualizar el README.
README.md: Este archivo es el README que se actualizará.
template.md.tpl: Este archivo contiene el código que se utilizará para formatear los artículos.

Configuración del flujo de trabajo de GitHub Actions:

El flujo de trabajo de GitHub Actions se utiliza para actualizar el README automáticamente cada vez que se publiquen nuevos artículos. Para configurar el flujo de trabajo, sigue estos pasos:

Crea una carpeta .github en la raíz del proyecto.
Crea una carpeta workflows dentro de la carpeta .github.
Crea un archivo post.yml dentro de la carpeta workflows.

El contenido del archivo post.yml debe ser el siguiente:

name: PostReadme

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
      - run: npm install -g pnpm
      - run: pnpm install
      - run: pnpm run generate
      - run: |
        git config user.name DannielNavas
        git config user.email dannielnavas@gmail.com
        git add README.md
        git diff --quiet && git diff --staged --quiet || git commit -m "[bot] Update README with latest info"
        git push origin master

El código de index.js es el siguiente:

import fs from "fs";
import fetch from "node-fetch";

(async () => {
  const template = await fs.promises.readFile("./template.md", "utf8");

  const response = await fetch("https://dev.to/api/articles?username=dannieldev");
  const posts = await response.json();

  let HTMLPosts = [];
  HTMLPosts = posts
    .slice(0, 3)
    .map((post) => `<li><a href="${post.url}">${post.title}<a/></li>`)
    .join("");

  const newMarkdown = (await template).replace(
    "%{{latest_Article}}%",
    `<ul>${HTMLPosts}</ul>`
  );

  await fs.promises.writeFile("./README.md", newMarkdown);
})();

El código de template.md.tpl es el siguiente:

template.md.tpl

<!-- Proudly created with GPRM ( https://gprm.itsvg.in ) -->
# Articulos

%{{article}}%

Explicación del código:

Este código es un script de Node.js que utiliza los módulos fs (sistema de archivos) y node-fetch para leer un archivo de plantilla, obtener datos de una API, y luego escribir esos datos en un archivo README.md.

Primero, importa los módulos fs y node-fetch. fs es un módulo incorporado en Node.js para trabajar con el sistema de archivos, mientras que node-fetch es un módulo que permite hacer solicitudes HTTP en Node.js, similar a cómo fetch funciona en el navegador.

Luego, el código define una función asíncrona autoinvocada. Esta función se ejecuta inmediatamente después de su definición.

Dentro de esta función, primero se lee un archivo llamado template.md en el directorio actual. Se utiliza fs.promises.readFile para leer el archivo de forma asíncrona y se espera hasta que se complete la lectura del archivo.

A continuación, se realiza una solicitud HTTP GET a la API de dev.to para obtener los artículos de un usuario. Se espera hasta que la respuesta esté disponible y luego se convierte la respuesta en JSON.

Después de obtener los datos de la API, se seleccionan los primeros tres artículos, se convierten en elementos de lista HTML y se unen en una sola cadena.

Luego, se reemplaza un marcador de posición en la plantilla leída anteriormente (%{{latest_Article}}%) con la lista de artículos HTML generada.

Finalmente, se escribe el contenido modificado en un archivo llamado README.md. Se utiliza fs.promises.writeFile para escribir en el archivo de forma asíncrona y se espera hasta que se complete la escritura del archivo.

**Gracias por leer. Espero que esta información te sea útil y te ayude a mejorar tu perfil.

Actualmente estoy trabajando en un proyecto personal que espero que aporte a la comunidad hispanohablante. Puedes encontrar más información sobre él en la siguiente URL: devtospanish: https://devtospanish.danniel.dev/**

Validación de tokens de reCAPTCHA en Lambda de AWS

Danniel Navas — Fri, 17 Nov 2023 01:01:00 +0000

El reCAPTCHA de Google es una herramienta que ayuda a proteger tus sitios web y aplicaciones de spam y ataques automatizados. Cuando se implementa en el frontend, el reCAPTCHA genera un token que el usuario debe proporcionar al backend para validar que es un usuario humano.

En este artículo, veremos cómo validar un token de reCAPTCHA en una Lambda de AWS.

Pasos previos

Antes de comenzar, necesitamos crear los siguientes recursos:

Un proyecto de Node.js
La dependencia axios
Una variable de entorno RECAPTCHA_SECRET_KEY en la Lambda
Para crear un proyecto de Node.js, podemos usar el siguiente comando:
pnpm init

Para instalar axios, podemos usar el siguiente comando:
pnpm install axios

Para crear la variable de entorno RECAPTCHA_SECRET_KEY, podemos ir a la configuración de la Lambda y agregar la siguiente entrada:

KEY=RECAPTCHA_SECRET_KEY
VALUE=secret_key_here

Código de la Lambda

El siguiente código muestra cómo validar un token de reCAPTCHA en una Lambda:

const axios = require("axios");

exports.handler = async (event) => {
  try {
    const { token } = JSON.parse(event.body);
    if (!token) {
      return {
        statusCode: 400,
        body: JSON.stringify({ message: "No token provided" }),
      };
    }

    const secret = process.env.RECAPTCHA_SECRET_KEY;
    const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secret}&response=${token}`;

    const response = await axios.get(url, {
      timeout: 5000,
    });

    if (!response.data) {
      return {
        statusCode: 500,
        body: JSON.stringify({ message: "Error fetching reCAPTCHA response" }),
      };
    }

    const { success } = response.data;

    if (!success) {
      return {
        statusCode: 400,
        body: JSON.stringify({ message: "Invalid token" }),
      };
    }

    return {
      statusCode: 200,
      body: JSON.stringify({ success }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ message: error.message }),
    };
  }
};

Lo que realiza el código seria lo siguiente:

Primero, el código verifica si el token está presente en el evento de entrada. Si no lo está, devuelve un error.
Luego, el código obtiene el secreto de reCAPTCHA de la variable de entorno.
A continuación, el código crea una URL para la API de verificación de reCAPTCHA.
Luego, el código envía una solicitud GET a la API de verificación de reCAPTCHA.
Finalmente, el código comprueba la respuesta de la API. Si la respuesta indica que el token es válido, el código devuelve un código de estado 200. Si la respuesta indica que el token no es válido, el código devuelve un código de estado 400.

Cómo crear pipes custom en Angular

Danniel Navas — Fri, 20 Oct 2023 02:40:58 +0000

Los "pipes" son una característica esencial en Angular que posibilita la transformación de la salida de un componente o directiva. Aunque los "pipes" incorporados en Angular proporcionan una amplia gama de funcionalidades, hay ocasiones en las que se requiere la creación de un "pipe" personalizado para llevar a cabo una transformación que no está disponible de forma predeterminada.

Creando un pipe personalizado

Para crear un pipe personalizado, primero debemos ejecutar el siguiente comando en nuestra terminal

ng g pipe my-pipe

Esta interfaz tiene un solo método, transform, que recibe el valor de entrada del pipe un argumento y debe devolver el valor transformado.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
export class CustomCurrencyPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

Una vez que hemos generado el pipe, podemos registrarlo en nuestra aplicación Angular. Podemos hacerlo en el archivo app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyPipe } from './pipes/my-pipe';

@NgModule({
  declarations: [
    AppComponent,
    MyPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora que hemos registrado el pipe, podemos utilizarlo en las plantillas. Para ello, utilizamos el símbolo de pipe (|) seguido del nombre del pipe.

<p>{{ value | myPipe }}</p>

En este ejemplo, el pipe myPipe se utilizará para transformar el valor value.

Ejemplos de pipes personalizados

Aqui un ejemplo de un pipe para el formato moneda para usd, eur y cop:

codesandbox.io

Crear pipes personalizados es una forma sencilla de añadir funcionalidad personalizada a nuestras aplicaciones Angular. Con un poco de esfuerzo, podemos crear pipes que se adapten a nuestras necesidades específicas.

Dev.to en español

Danniel Navas — Fri, 28 Oct 2022 20:45:08 +0000

En días anteriores estuve leyendo un post en el que se preguntaban si existía más contenido en español en esta plataforma que uso constantemente.
Y dada está pregunta empecé a revisar el contenido que se crea en nuestro idioma y grata sorpresa que es bastante y muy buena y de contenido muy variado.
Por ende empecé a crear un proyecto con unas premisas cómo cabeza de este:

Nunca monetizar (el contenido es de cada autor)
Intentar hacer visible a cada autor, para que reciba la mayor visibilidad y el mayor apoyo posible.
El código sea abierto
Lo más sencillo para iniciar (más adelante se pueden crear funcionalidades que ayuden a mejorar el proyecto)
Y la última no quitar interacciones a dev.to por lo que este proyecto es solo una presentación con los artículos que redirigen a esta plataforma.

A esto cree el siguiente sitio https://devtospanish.danniel.dev/ .
Que se necesita para aparecer en los tags agrega español o spanish o espanol y listo un api consulta estos tags y los presenta en en devto en español.

Cabe aclarar que está abierto a comentarios y mejoras.

Espero este proyecto ayude a la comunidad.

Agregar un step de coverage en github actions - Frontend (Angular)

Danniel Navas — Wed, 27 Oct 2021 16:27:14 +0000

Con la llegada de github actions se ha simplificado la creación de flujos CI/CD y uno de los pasos importantes es los de las pruebas unitarias y que mejor que tener un step que valide nuestra cobertura, por eso dejo un script que puede ayudarnos a cubrir.
Primero creamos una carpeta llamada .github en la raíz de nuestro.
Dentro de esta creamos otra de la siguiente forma .github/workflows
Por último un archivo yml con el siguiente nombre por buena practica coverage.yml dentro de el dejaremos el siguiente código.

name: CI Angular app through Github Actions
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Setup
        run: npm ci

      - name: Test
        run: |
          npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

Tip: La ultima línea es la ejecución de pruebas unitarias en angular esta puede ser remplazada por el de tu preferencia, recuerda que debe ejecutarse bajo un navegador sin interfaz.

Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.

Como crear Pull request template y en español

Danniel Navas — Tue, 12 Oct 2021 00:13:28 +0000

Esta vez será poco texto, la idea de este post es dejar un template para tus pull request, sea en proyectos propios con en el de la empresa en la que trabajas.

Lo primero que realizaremos es crear un archivo con el nombre PULL_REQUEST_TEMPLATE.md este archivo va dentro de la carpeta .github.

# Descripción

Por favor, incluya un resumen del cambio y qué problema se soluciona. Incluya también la motivación y el contexto pertinentes. Enumere las dependencias necesarias para este cambio.

Correcciones # (problema)

## Tipo de cambio

Por favor, elimine las opciones que no sean relevantes.

- [ ] Corrección de errores (cambio no radical que soluciona un problema)
- [ ] Nueva característica (cambio no rompedor que añade funcionalidad)
- [ ] Cambio de ruptura (arreglo o característica que causaría que la funcionalidad existente no funcionara como se esperaba)
- [ ] Este cambio requiere una actualización de la documentación

# ¿Cómo se ha probado?

Describa las pruebas que ha realizado para verificar sus cambios. Proporcione instrucciones para que podamos reproducirlos. Enumere también los detalles relevantes de la configuración de las pruebas

- [ ] Prueba A
- [ ] Prueba B

* Lista de comprobación:

- [ ] Mi código sigue las directrices de estilo de este proyecto
- [ ] He realizado una auto-revisión de mi propio código
- [ ] He comentado mi código, especialmente en las áreas difíciles de entender
- [ ] He realizado los cambios correspondientes en la documentación
- [ ] Mis cambios no generan nuevas advertencias
- [ ] He añadido pruebas que demuestran que mi arreglo es efectivo o que mi característica funciona
- [ ] Las pruebas unitarias nuevas y existentes pasan localmente con mis cambios
- [ ] Cualquier cambio dependiente ha sido fusionado y publicado en los módulos posteriores

y eso es todo.
Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.

Utiliza los mixins en tus break points

Danniel Navas — Thu, 30 Sep 2021 01:53:59 +0000

Los media querys son una forma de acomodar nuestro sitio web para diferentes dispositivos.

Con la utilización de SASS en cada ves más proyectos se vuelve necesario simplificar el proceso de declaración de nuestros breakpoints y para esta tarea se utilizan los mixins, los cuales son una porción de código que podemos reutilizar en esas partes que se hacen repetitivas.

Para definir los mixins vamos a colocar tres break points los cuales son:

Moviles: 767px

Tablets: mínimo 768px, máximo 999px

Desktop: 1280px

pasamos a la declaración creamos un nuevo archivo .scss y en este dejaremos el siguiente código:

ahora importaremos este archivo en nuestro scss de la siguiente forma:

@import '../../utils/mixins.scss';

ahora lo vamos a utilizar definiendo nuestros estilos para los diferentes dispositivos

Y con esto ya tendríamos implementado nuestros break points de una forma más practica y sencilla de utilizar.

Espero te ayudara este post.

Gracias por leer, nos vemos en la próxima.

Recomendaciones para una entrevista técnica

Danniel Navas — Tue, 14 Sep 2021 00:52:20 +0000

A lo largo de mi carrera profesional he apoyado el proceso de reclutamiento en varias empresas desde la parte técnica y aquí te daré unos tips para que la próxima vez que tengas una entrevista técnica vallas preparado.

Lo más importante de todo repasa los temas por los que están interesados en contratarte.
La entrevista es una charla de ambos lados en la cual el entrevistador quiere conocer tu habilidad técnica.
Ten seguridad sobre tus respuestas .
Elimina cualquier elemento que te pueda distraer, procura estar concentrado en una sola actividad.
Si tiene una prueba en vivo lo mejor es ir comentando el proceso que está realizando, así no tendrás nervios y será más dinámica la prueba.
No olvides las pruebas unitarias, son muy importantes actualmente no existe un lugar donde no las apliquen.
Se tu mismo, confía en ti y se sincero sobre tus conocimientos.

Este post se inspiro en el de @valtory , Cómo venderse como dev ya que es algo muy importante en nuestro día a día.

Gracias por leer, nos vemos en la próxima.

La mejor fuente para nuestro IDE

Danniel Navas — Tue, 07 Sep 2021 01:47:42 +0000

Existen muchos tipo de fuentes en la web destinadas a múltiples propósitos y entre todos estos esta el de desarrollo. Por eso hoy quisiera compartir una de las fuentes que más me gusta de forma personal (No porque sea la mejor).

La fuente tiene el nombre de Victor mono combina la escritura cursiva con la monotipada, tiene soporte con la ligadura (Ligatures) y lo mejor es que es gratuita. (link)

Ingresaremos a la pagina del creador de la fuente ~~link~~ y en esta descargaremos un zip con el source, archivos ttf con los que podremos instalar en nuestro sistema operativo, si estas en MACOS puedes utilizar los siguientes comandos de brew de una forma más sencilla.

brew tap homebrew/cask-fonts

brew install --cask font-victor-mono

Hora de configurar nuestro IDE, ingresaremos a la configuración, en mi caso VSCode y donde ingresamos la fuente colocaremos el nombre de esta de la siguiente forma:

como adicional te muestro las primeras líneas de mi configuración donde habilito la ligadura, el tamaño de la fuente y un tema que recomiendo para el uso de la fuente.

Resultado:

Si conoces otra fuente u otros temas compártelo en los comentarios.

Gracias por leer, nos vemos en la próxima.

Lazy loading en Angular

Danniel Navas — Wed, 01 Sep 2021 00:33:50 +0000

Que es Lazy loadind? es la técnica mas utilizada para la mejora de carga de nuestras aplicaciones, en la cual se reduce el peso del bundle dado que en este lo que hacemos es dividir la aplicación en parte pequeñas (componentes).

Además de ser la más utilizada es la que las empresas más piden en mi experiencia a una entrevista siempre ten en claro este tema y por esto te lo quiero explicar lo más sencillo posible.

Dado que tenemos nuestra aplicación vamos a terminar con una estructura parecida a lo siguiente:

Con esto vamos a crear un nuestro primer componente con layzy para eso crearemos un module y un routing.

ng g c m componente —routing

Con esto creamos un module aparte y un router único para nuestro componente o componentes que mantendremos en esta parte de nuestra aplicación. Ya con esto sobre la misma ruta vamos a crear el componente

ng g c component/component

Con esto vamos a crear la ruta dentro de nuestro router local (router de nuestro componente).

Si intentamos acceder a esta ruta no podremos ya que nuestro router global no sabe a dónde dirigirse, y agregando el siguiente código le mostraremos cómo resolverlo tanto en el global como en nuestro local con las posibles rutas internas, como te las muestro a continuación:

Y con esto tendríamos nuestra aplicación con lazy loading.

Gracias por leer, nos vemos en una próxima ocasión.