DEV Community: Giancarlo Ramirez

[Boost]

Giancarlo Ramirez — Mon, 27 Oct 2025 18:45:38 +0000

Scripts: Super speed

Matthew Ramirez ・ Oct 26

#roblox #lua #gamedev #programming

Express & JWT demo server

Giancarlo Ramirez — Tue, 19 Sep 2023 04:45:07 +0000

Repo: https://github.com/zendostrike/express-jwt-demo-server

Hello, let's create a simple Express + JWT demo server you can use in your demo projects.

First of all, let's create a new directory for our project:
mkdir express-jwt-demo-server && cd express-jwt-demo-server

Init npm
npm init -y

Install express library.
npm install express

Install jsonwebtoken library.
npm install jsonwebtoken

Install sqlite3 library to save your users.
npm install sqlite3

Database

Let's create a database.js file and create a database and a Users table using sqlite3.

const sqlite3 = require('sqlite3');

const db = new sqlite3.Database('database.db');

db.run(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    email TEXT NOT NULL,
    password TEXT NOT NULL,
    name TEXT,
    lastName TEXT
  )
`);

module.exports = {
  db
}

Secret

Create a constants.js file to save the JWT secret. You can use any string as your secret taking into account that this only for demo purposes.

const secretKey = 'a1521a878991a0941572eafc7708c7cb00756dd8d6844dbb9cc294c74e2108dfa09df9140c0fff6bc6a1e35e8be4b5b4e7bf79b7470fbfaadbb37d61ec6afb6f';

module.exports = { secretKey }

Middleware

Create a verify-token.js file. This is going to be our middleware in charge of verify token.

const jwt = require('jsonwebtoken');
const { secretKey } = require('../constants');

function verifyToken(req, res, next) {
  const token = req.headers.authorization;

  if (!token) {
    return res.status(401).json({ error: 'Unauthorized: No token provided' });
  }

  jwt.verify(token.split(' ')[1], secretKey, (err, decoded) => {
    if (err) {
      return res.status(401).json({ error: 'Unauthorized: Invalid token' });
    }

    // Store the decoded token data in the request for future use
    req.user = decoded;
    next();
  });
}

module.exports = {
  verifyToken
}

Package.json scripts

Let's modify our package.json scripts to run our project (you can use --watch to hot reload the project when code is changed):

  ...
  "scripts": {
    "start": "node --watch index.js"
  },
  ...

Express app

Create a index.js file importing our other files and create a new express app running at port 3000.

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const { verifyToken } = require('./verify-token');
const { secretKey } = require('./constants');
const { db } = require('./database');

const app = express();
const port = 3000;

// Middleware for parsing JSON request bodies
app.use(bodyParser.json());

// Start the Express server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Cool, if you run npm start you will see the server running.
Now we need some routes.

Create a Register route

It takes name, lastName, email and password to create a new user.
If email or password missing will return an error.
If email already used will return an error.
Attemps creating a new user, if fails return error, if success JWT creates a new token using user's information and the secret.

// Endpoint to register a new user and generate a JWT token
app.post('/register', (req, res) => {
  const { name, lastName, email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ error: 'Email and password are required' });
  }

  // Check if the user with the same email already exists in the database
  db.get('SELECT * FROM users WHERE email = ?', [email], (err, existingUser) => {
    if (err) {
      return res.status(500).json({ error: 'Database error' });
    }

    if (existingUser) {
      return res.status(409).json({ error: 'Email already in use' });
    }

    // If the email is not already in use, proceed with user registration
    // Insert the new user into the database
    db.run(
      'INSERT INTO users (name, lastName, email, password) VALUES (?, ?, ?, ?)',
      [name, lastName, email, password],
      (err) => {
        if (err) {
          return res.status(500).json({ error: 'Error registering user' });
        }

        // Generate a JWT token for the registered user
        const token = jwt.sign({ name, lastName, email }, secretKey, { expiresIn: '1h' });

        res.status(201).json({ message: 'User registered successfully', token });
      }
    );
  });
});

Create a Login Route

It will recieve email and password
If wrong email or password returns an error.
If correct user and password will create a token and returns it.

app.post('/login', (req, res) => {
  const { email, password } = req.body;

  if (!email || !password) {
    return res.status(400).json({ error: 'Email and password are required' });
  }

  // Generate a JWT token for the logged-in user
  const token = jwt.sign({ email }, secretKey, { expiresIn: '1h' });

  res.status(200).json({ message: 'Login successful', token });
});

Create a route for getting Logged User

It will all the information from the access token. You will have to add Bearer token to your request to get a correct response.

app.get('/user', verifyToken, (req, res) => {
  res.status(200).json(req.user);
});

Finally create a protected route to test our token.

app.get('/protected', verifyToken, (_, res) => {
  // If the middleware (verifyToken) has passed, it means the token is valid
  res.status(200).json({ message: 'OK, you have a valid token.' });
});

Now you can test your frontend project and build a sessions based on JWT access token.

Repo: https://github.com/zendostrike/express-jwt-demo-server

Cómo centrar un div horizontalmente

Giancarlo Ramirez — Tue, 09 Aug 2022 00:48:00 +0000

Cansado de sentir verguenza al googlear cómo centrar un div? Cansado de que tires ese centro y que te salga para cualquier lado?, tranquilo, hoy te enseñaré a centrar un div horizontalmente de distintas maneras sin morir en el intento.

ALTERNATIVA 1: Text align
Úsalo cuando tengas elementos de tipo inline, inline-block, inline-flex o inline-table. ¿Pero qué rayos es un elemento inline? Es un elemento que empieza cuando termina el anterior, sin saltar a otra línea y ocupando el máximo de su propio tamaño. Si se acaba el espacio, saltará a una nueva línea.

<div classname="parent">
  <span>Centrado</span>
</div>

<style>
.parent {
  text-align: center;
}
</style>

ALTERNATIVA 2: Márgen automático
Úsalo para centrar un elemento de bloque el cuál tenga un ancho determinado. ¿Pero que carajos es un elemento de bloque? Los elementos de bloque son elementos que forman un bloque separado, es decir, romperan la línea para aparecer en una nueva. Por ejemplo los <div>.

<div classname="parent">
  <div classname="child">Yo mido 150 pixeles</div>
</div>

<style>
.parent {
  margin: 0 auto;
}

.child {
  width: 150px;
}
</style>

ALTERNATIVA 3: Flexbox
Úsalo para centrar varios elementos de bloque. Las propiedades que usaremos serán display: flex; y justify-content: center;. No es necesario que los bloques hijos tengan un ancho específico, a Flexbox no le interesa mucho.

<div classname="parent">
  <div>Hijo 1</div>
  <div>Hijo 2</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
}
</style>

ALTERNATIVA 4: Transformar elementos block a inline block
Úsalo también para centrar varios elementos de bloque, los cuales con css transformaremos a inline. Es como la alternativa 1, alinearemos con text-align: center;, pero a cada hijo lo transformaremos de block a inline-block usando display: inline-block;.

<div classname="parent">
  <div classname="child">Hijo 1</div>
  <div classname="child">Hijo 2</div>
</div>

<style>
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
</style>

Espero te sea de ayuda este granito de arena.
En el siguiente te muestro cómo centrar verticalmente, vertical y horizontalmente. Saludos.
(:

Qué es Frontend y Backend?

Giancarlo Ramirez — Sat, 19 Mar 2022 04:59:39 +0000

Imagina un auto, la carrocería vendría a ser el Frontend, y dentro del auto hay muchos sistemas y servicios con los cuales el auto funciona, a ese conjunto de sistemas y servicios le llamaremos Backend.

Siguiendo esa analogía, si el carro no avanza, nos corresponde levantar el capó y revisar que todos estos sistemas y servicios funcionen correctamente. O quizás queremos aumentar el torque o caballos de fuerza. De este trabajo se encargaría un Backend Developer.

Si queremos cambiar el color o la forma del carro, corregir ciertos daños visuales o mejorar el aerodinamismo debemos llamar a un Frontend Developer.

En la práctica, ¿de qué se encarga un Frontend Developer?

Un Frontend Developer se encarga de:

Maquetación: Escribir código HTML y CSS para construir una vista fiel al diseño.
Integración: Hacer llamadas a servicios externos para consumir o enviar datos.
Aseguramiento de la calidad: Escribir tests para validar que lo que se aporta no genera errores. Ayuda a mantener código limpio, legible y fácil de mantener.
Optimización: Mejorar las métricas de la aplicación tales como tiempos de carga, consumo de memoria, etc.

Otras actividades:

Diseño: Apoya con ideas o toma responsabilidad del diseño de las interfaces de Usuario.
UI: Conoce y aplica buenas prácticas de diseño de Interfaces de Usuario.
UX: Conoce y aplica buenas prácticas de diseño de una buena experiencia de Usuario.
Arquitectura: Se encarga de diseñar la arquitectura usando patrones de diseño y patrones de arquitectura para Frontend.

Y, ¿De qué se encarga un Backend Developer?

Un Backend Developer se encarga de:

Bases de Datos: Diseña y mantiene una base de datos.
APIs: Diseña APIs y crea servicios que serán usados en un cliente (web, mobile, etc).
Aseguramiento de la calidad: Escribir tests para validar que lo que se aporta no genera errores. Ayuda a mantener código limpio, legible y fácil de mantener.
Optimización: Mejorar las métricas de la aplicación tales como tiempos de respuesta, consumo de memoria, etc.

Otras actividades:

Seguridad: Se encarga de la seguridad del sitio, certificados de seguridad, autenticación, listas de control de acceso, manejo de sesiones, proxys y VPNs, etc.
Infraestructura: Se encarga de proveer y configurar los servidores donde están desplegados los distintos ambientes de la aplicación, entre muchas otras cosas más, es todo un mundo por aprender y descubrir.

Y tú, ¿para qué lado te inclinas más?