DEV Community: Julio Santacruz

🚀Los 7 Métodos para proteger tus APIs que debes conocer

Julio Santacruz — Wed, 24 Dec 2025 07:36:10 +0000

Si quieres trabajar como Backend, ya sabes que las APIs son como la puerta principal de tu casa digital. Si no las proteges bien, cualquiera podría entrar y robarte todo. Estos son 7 métodos clave para blindar tus APIs (Este post es mas informativo, for noobs, for beginners, for non technical peopel, y/o estudiantes, esto es para informar :D).

1️⃣ Rate Limiting

¿Qué es? Ponerle límites de velocidad a tu API.

¿Cómo funciona? Solo deja que un usuario haga X peticiones en cierto tiempo.

¿Cómo lo implemento? Usando middlewares, proxies como NGINX o librerías que controlen el número de peticiones por IP o token.

¿Qué previene? Ataques de fuerza bruta o spam.
👉 Ejemplo: _Imagina que tienes un servicio y un usuario está enviando peticiones de manera constante para saturar tu servidor. Si no implementas Rate Limiting, el usuario puede consumir todos los recursos del sistema, afectar a otros usuarios y provocar caídas del servicio..

2️⃣ CORS (Cross-Origin Resource Sharing)

¿Qué es? Un sistema de permisos para decidir qué sitios pueden usar tu API.

¿Cómo funciona? Solo deja pasar a “dominios de confianza”.

¿Cómo lo implemento? Configurando reglas en el servidor o en frameworks como Express, Django o .NET para definir los orígenes permitidos.

¿Qué previene? Que cualquiera desde cualquier web intente robar tus datos.
👉 Ejemplo: _Imagina que tienes un servicio con acceso a informacion sensible y no cualquiera debe acceder, al configurar el CORS estas creando una lista de quien si puede acceder a tu API con acceso a la informacion

3️⃣ SQL y NoSQL Injection

¿Qué es? Cuando un atacante mete código malicioso en tus consultas a la base de datos.

¿Cómo funciona? Se aprovechan de entradas sin validar para manipular, robar o borrar info.

¿Cómo lo implemento? Usando queries parametrizadas, ORMs y validando siempre la entrada del usuario.

¿Qué previene? Robos de información o borrados masivos de datos.
👉 Ejemplo: _Es como si llenas un formulario para pedir un libro en la biblioteca y alguien en vez de escribir “Harry Potter” pone: “dame Harry Potter y la llave del almacén”.

4️⃣ Firewalls

¿Qué es? Una barrera digital que separa tráfico bueno del malo.

¿Cómo funciona? Filtra peticiones y bloquea las sospechosas.

¿Cómo lo implemento? Configurando un WAF (Web Application Firewall) o reglas de firewall en la infraestructura (AWS, Azure, GCP).

¿Qué previene? Ataques directos y accesos no autorizados.
👉 Ejemplo: _Es como un guardia en la entrada de un edificio: deja pasar a los residentes y niega acceso a todos los demas.

5️⃣ VPNs (Virtual Private Networks)

¿Qué es? Una conexión segura y encriptada que esconde tu identidad online.

¿Cómo funciona? Redirige tu tráfico por un túnel cifrado y cambia tu IP.

¿Cómo lo implemento? Configurando una VPN corporativa para que solo quienes estén conectados puedan acceder a la API.

¿Qué previene? Robos de datos en redes públicas y rastreo de ubicación.
👉 Ejemplo: _Imagina que tu API solo debe ser accesible desde la red de tu empresa. Cuando te conectas desde tu casa o desde una red pública, primero establece una conexión VPN.
La VPN crea un túnel cifrado que hace que su dispositivo se comporte como si estuviera dentro de la red de la oficina, permitiéndole acceder a la API de forma segura sin exponerla a internet.

6️⃣ CSRF (Cross-Site Request Forgery)

¿Qué es? Un ataque que engaña al usuario para ejecutar acciones sin saberlo.

¿Cómo funciona? El atacante hace que tu navegador mande una petición falsa en tu nombre.

¿Cómo lo implemento? Usando tokens CSRF, cabeceras personalizadas y validaciones en el servidor.

¿Qué previene? Acciones no autorizadas como transferencias o cambios de contraseñas sin tu consentimiento.
👉 Ejemplo: _Imagina que estás logueado en el sistema de tu banco en una pestaña del navegador. Luego visitas una página maliciosa que, sin que lo notes, envía una petición para transferir dinero usando tu sesión activa.
Si la API no valida un token CSRF, el servidor cree que la petición es legítima y pierdes dinero.

7️⃣ XSS (Cross-Site Scripting)

¿Qué es? Insertar scripts maliciosos en páginas web.

¿Cómo funciona? El código se ejecuta en el navegador del usuario.

¿Cómo lo implemento? Escapando y validando todo contenido dinámico, y usando cabeceras como Content-Security-Policy (CSP).

¿Qué previene? Robos de cookies, datos sensibles o redirecciones a sitios falsos.
👉 Ejemplo: _Un usuario malicioso logra insertar código en una página pública. Cada visitante que entra ejecuta ese código sin saberlo. La validación de datos y CSP evitan que contenido no confiable se ejecute en el navegador..

💡 En resumen

Tus APIs son como una casa llena de objetos valiosos: datos, usuarios y procesos de negocio. Si dejas la puerta abierta, tarde o temprano alguien entrará.

Rate Limiting es el control de acceso al servicio.
CORS es la lista de invitados en tu fiesta.
SQL Injection son formularios llenados con trampas.
Firewalls son tus guardias en la entrada.
VPNs son pasadizos secretos.
CSRF son firmas falsas en contratos.
XSS son mensajes escondidos en tus cajas de cereal.

🔐 Implementar estas medidas no significa que tu API será invulnerable, pero sí que tendrás varias capas de defensa. Como en la vida real, no basta con solo cerrar la puerta: necesitas cerradura, alarma, cámaras y, si es posible, un buen perro guardián 🐶.

gojs for dummies (para mi :D) #Español

Julio Santacruz — Mon, 10 Apr 2023 21:24:27 +0000

Que es GoJS?

Partamos dede el principio GoJS es una biblioteca de JavaScript que te permite crear diagramas o elementos interactivos 100% del lado del cliente. GoJS admite templates para todos los elementos gráficos y uniónes de datos con propiedades de objetos gráficos para modelar datos. Solo necesita guardar y restaurar el modelo. El modelo de gojs consta de objetos simples de JavaScript, y tienen integracion con todos los frameworks de Frontend (React - Angular -Vue). Tiene muchas herramientas y comandos predefinidos, que implementan los comportamientos estándar que necesitan la mayoría de los diagramas.
La personalización de la apariencia y el comportamiento es principalmente una cuestión de establecer propiedades.

Tu primer diagrama con GoJS - React

Para crear tu primer diagrama con React y GoJs debes iniciar un projecto de react e instalar :

`npm install gojs gojs-react`

El siguiente paso seria crear el componente del elemento, primero debemos importar ReactDiagram de gojs-react


import { ReactDiagram } from 'gojs-react';

y lo llamamos con los siguientes argumentos

<ReactDiagram
        initDiagram={ }
        divClassName='diagram-component'
        nodeDataArray={ }
        linkDataArray={ }
        onModelChange={ }
      />

El siguiente paso sera asignarle un unos estilos al elemento div para que el canvas sea visible

/* App.css */
.diagram-component {
  width: 400px;
  height: 400px;
  border: solid 1px black;
  background-color: white;
}

Ahora vamos escribir una funcion que que inicia el diagrama ( initDiagram )

function initDiagram() {
  const $ = go.GraphObject.make;

  // Para establecer la licencia declaramos go.Diagram.licenseKey = "..."; (no es necesaria una licencia durante el desarrollo)

  const diagram = $(go.Diagram, {
        'undoManager.isEnabled': true,  // Esta propiedad nos permite interactuar con el modelo
        'undoManager.maxHistoryLength': 0,  // si comentas esta propiedad deshabilitas el historial (undo / redo) 
        'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
        model: new go.GraphLinksModel(
          {
            linkKeyProperty: 'key'  // IMPORTANTE -> Esta propiedad nos permite vincular los datos con GraphLinksModel
          })
      });

  // Aqui definimos el Template para los nodos 
  diagram.nodeTemplate =
    $(go.Node, 'Auto',  // Declaramos un nodo 
      new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 
      // creamos un vinculo llamado "loc" para asignar "location" desde nuestro modelo
      $(go.Shape, 'RoundedRectangle', // dentro del nodo creamos una figura "RoundedRectangle" 
        { name: 'SHAPE', fill: 'white', strokeWidth: 0 }, 
        new go.Binding('fill', 'color')), // vinculamos el parametro fill a la propiedad color dentro del modelo 
      $(go.TextBlock, 
      // Creamos un texto dentro de la figura que declaramos antes
        { margin: 8, editable: true },  // le asignamos un margin de 8 y lo hacemos editable
        new go.Binding('text').makeTwoWay() // Vinculamos la variable text para asignar el texto desde el modelo
      )
    );

  return diagram;
}

Vamos a crear un array de objetos para ser mostrados en nuestro diagrama

const DataArray = [
    { key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
    { key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
    { key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
    { key: 3, text: 'Delta', color: 'pink', loc: '150 150' }
    ]

Esto podria ser suficiente par visualizar los datos e interactuar con ellos... pero nosotros queremos hacer de diagrama, entonces debemos de crear un array de datos para unir los datos del DataArray

const LinkDataArray= [
          { key: -1, from: 0, to: 1 },
          { key: -2, from: 0, to: 2 },
          { key: -3, from: 1, to: 1 },
          { key: -4, from: 2, to: 3 },
          { key: -5, from: 3, to: 0 }
        ]

Por ultimo vamos a crear una funcion que meneje eventos

function handleModelChange(changes) {
  console.log('GoJS model changed!', changes);
}

vamos a integrar lo anterior a nuestro diagrama

<ReactDiagram
        initDiagram={ initDiagram }
        divClassName='diagram-component'
        nodeDataArray={ DataArray }
        linkDataArray={ LinkDataArray }
        onModelChange={ handleModelChange }
      />

Este este ejemplo lo puedes encontrar en react-gojs basic

Typescript for noobs

Julio Santacruz — Sat, 21 Jan 2023 04:22:19 +0000

If you are reading this post maybe it's because you want to try Typescript or like in my case you must learn it for a Job.

I'm writing this post because it helps to retain knowledge and works like notes for the future me.

Let 's start....

Why should you learn Typescript..?

It is one of the programming languages most loved by the community.
It has a very High adoption rate. <---- Look at the next image
We can prevent many JS errors <---- This one it's relevant.
Better development experience <---- I'm not sure.
Less amount of bugs <---- This one it's true.

TypeScript vs JavaScript

Well in some way typescript it's the poke-evolution of javascript.
Typescript it's like javascript with extra steps, security steps, those steps help us to find errors in the development process.. but how do they work?

TypeScript... How does it help?

---> Static analysis (This is where TS plays its role)

Run in the editor.
You can find typos, wrong calls to functions.
Forces you to write well-done code

---> Unit Tests

In a few seconds they allow us to verify if our code does what we think it does.

---> Integration tests

It takes a few minutes to validate if our system works.
We can find different borderline cases.

---> Code review

It takes a few hours to validate that we are following the practices and standards of our team.

TypeScript... How does it work?

Well, the Browsers and Node.js do not natively recognize TypeScript files, what you need to do is transpile your code from .ts to .js.

In our .ts files we are going to have the classes, interfaces, modules and types. The transpiler will convert the code into .js that will be able to run anywhere. In addition, the transpiler allows us to choose which version of ECMAScript we are going to translate our code to.

So, you can install typescript with npm and the recommendation it is install with the flag --dev-save

npm install typescript --dev-save

Once it is install you should run the next

npx tsc --init

This will create our tsconfig.json, with this file you can customize your ts enviroment

One of the extra steps [type annotation]

For typescript defining the data type is very important, to the point of assuming the data type automatically and this is called 'inferred types'.

but it is better that we set the type, and we can do it as follows

Number

  //type inferred 
  let dato = 100
  dato = 30
  console.log("dato:",dato)


  //type asigned
  let dato2:number = 20
  dato2 = 30
  console.log("dato2 :",dato2)


  //type asigned but not defined
  let dato3:number;
  //typescript want to prevent an undefined on dato3 
  console.log("dato3:",dato3)

remember
number !== Number
number it's a type, Number it's a object

Boolean

  // Type inferred
let isReady = true

// Type asigned
let isEnable: boolean=true

// Cannot be null or undefind
let isNew:boolean   // = undefined

Strings


  // Type inferred
  let myString = 'hello';

  // Type asigned
  let myString2:string = 'hello';  // '' <--- string
  let anotherString:string = "hello :D"; // "" <--- string
  let lolesString:string = `this is a string to ${myString}`; // ``<---- string

Arrays

// Type inferred
// typescript is inferring that we only have numeric values in the array
let arrNumbers = [1,2,43,3,5,34,3,23,2,2]
// we can only use array methods with numbers
arrNumbers.push(2)

// typescript is inferring that we have numeric, string and boolean values in the array
let arrAnother = [4,3,23,2,2,'sdf',true]
// we can only use array methods with numbers, strings and booleans
arrAnother.push('lol')

let mixed: (number|string|boolean|undefined|Object)[]= ['lol',3,'yes',false, undefined]
mixed.push(23)
mixed.push('lolxD')
mixed.push(true)
mixed.push([])
mixed.push({})

What is any?

  //With any we can change the type for ANY one :D
  let myDynamicVar:any
  myDynamicVar=100
  myDynamicVar='lol'
  myDynamicVar=[]
  myDynamicVar={}

// any is not recommended to use

This data type disables TS typing and allows us to reassign the data type of a variable.
It is not recommended to use any, because we lose the possibility of catching any error and basically we are using javascript. However, if we are migrating code from JS to TS it can be useful, but once we have a consolidated project with TypeScript, we should never use any.

We can convert the 'any' type to any other data type by casting it with the 'as' operator or by using '' generics.

myDynamicVar = 'Hola';
const rta = (myDynamicVar as string);
console.log(rta);

myDynamicVar2 = 1212;
const rta2 = (<number>myDynamicVar2);
console.log(rta2);

Gatsby for beginners pt1

Julio Santacruz — Mon, 21 Nov 2022 19:40:26 +0000

Hello there..!

Now I want to tell you about Gatsby... Yes it's a JavaScript Framework, yes it uses React to. Well let me start and if you have questions put it on the comment section and I'll look for it... Maybe some day...

Gatsby...?

Gatsby is a React-based Framework, designed to preformat static websites from your React-app (It's a statis site generator that used React, GraphQL and webpack)

Yes, there are other frameworks that works the same, like NEXT.js but it's not the same...

The main benefits of the usages of static site like Gatsby are:

Loading Speed
Search Engine Optimization (SEO)
Security

Gatsby Ecosystem

Well parentally it's big, but its hard to say how big it is... according to stack overflow survey only 3.77% choose Gatsby as web technology they used professionally, more then Drupal but lees then NUXT...
I must say that until now I have not found a negative review.

Let's Start a Project

there are many way to start a project with Gatsby, lets check three of them...

Only Gatsby

For this method we only require to install react and gatsby

npm install react react-dom gatsby

Gatsby with the CLI (like 'create-react-app')

This option make a full project sample with config files and a 'src' directory and it's ready for us to modify.

First we need to install Gatsby CLI

npm install -g gatsby-cli

with this were are available to create a new project using

gatsby new <name-of-your-project>

Using a Starter A starter it's like a theme template based project, that you can personalize for your convenience. There are free to used and you can find them here. To install one you need to have the name of the starter and the name of the user that made it

gatsby new <name-of-your-project> <name-of-user>/<name-of-starter>

Gatsby Router

Gatsby Router is simple to use, in this case simple is better...
Each file in the pages folder is a page

To navigate between the pages we must use the Link component of gatsby and assign it the parameter 'to=//'

The importance of this last images it is the component 'Link', the component Button it is only a styled button

Dude, do the initial Git configuration

Julio Santacruz — Thu, 29 Sep 2022 07:41:06 +0000

Intro

Hello, Let me tell you that I just restarted my work computer, why is this relevant? because I lost all my settings and it's time to configure them again. I imagine you got an idea with the title, we will see the initial git configurations, the ones I need to start working.

I hope this publication is useful to you, I am sure it will be useful for my future self.

what is Git?

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. there is more software for version control, but git is the one I like to use.

Initial Configuration

First of all, to start a new repository we can use the command

git init

Now let's set the user information (us).

git config --global user.email "your@email.com"
git config --global user.name "your_name"

To find where the settings are stored we can use the command.

git config --list --show-origin

Git works with branches, I'm sure you already know that, as I write this, the default name of the main branch is 'master'. By convention we could call it 'main', let's see how to change the name

git branch -m old_name new_name

to ensure that all projects start with the main branch name 'main'

git config --global init.defaultBranch main

BONUS

For bonus we are going to connect our project to a repository in GITHUB. As a first step we are going to set the 'origin'

git remote add origin repository_URL

To verify that the URL was saved correctly

git remote -v

To fetch the latest version from the remote repository

git pull origin main

if there is an error for different versions we can add the flag '---allow-unrelated-histories'

git pull origin main --allow-unrelated-histories

Finally, to send our information to the remote repository we can do git push and save the changes from our local repository to GitHub

git push origin main

Things all JavaScript beginners should know (Updated)

Julio Santacruz — Tue, 06 Sep 2022 05:07:23 +0000

Hello

I'm currently looking for my first job as a frontend developer, I've been doing some technical interviews and they actually ask these questions (I took these questions from an instagram post). So I'll be looking for the answers and really understanding this topic.

Note. I already know some answers, but I will be updating this post from time to time. If you feel like collaborating with any answers, feel free to share in the comments.

1. What is the use of windows object?

The window object is a representation of the 'window' browser, the space were you navigate, it is created automatically by the browser, It is not a JavaScript Object...
The window object have a lot of his own properties and methods, y bet you know some of them...
| Properties | Methods |
| ----------- | ----------- |
| console | alert() |
| innerWidth | prompt() |
| InnerHeight | setTimeout()|
| scrollY | confirm() |

2. What are the different data types present in JavaScript?

Data types:

Boolean Type // true | false
Null Type // null
Undefined Type // undefined
Number Type // 123
BigIng Type // 123456789023456767766n
String Type // 'hello world'
Symbol Type
Object Type // {}

3. What is the difference between undefined value and null value?

Undefined is a vaiable that refers to something that doesn't exist

4. What is this [[[]]]?

<->

5. What are classes in ES^?

<->

6. What are the difference between cookie, local storage and session storage?

<->

7. What is the difference between setIntervals and setTimeout?

<->

8. What are arrow functions? How are they different from normal functions?

<->

9. What is this keyword?

<->

10. What are promises? How do you call a promise?

<->

11. What is the difference between observables & promises?

<->

12. What is callback hell?

<->

13. Explain closures

<->

14. What are pure functions?

<->

15. Difference between == and ===

<->

16. How to access DOM elements using js?

<->

17. What are higher order fuctions?

<->

18. Explain desctructing in Javascript

<->

19. What are spread and rest operators?

<->

20. What is even propagation event capturin, even bubbling?

<->

21. What is function currying?

<->

22. Difference between let and var

<->

23. Difference between call, apply and bind

<->

24. What is event loop ?

<->

25. What is weakMap and weakSet?

<->

26. What is the difference betwwin a function parameter and an argunment?

<->

27. What is function execution context & global execution context

<->

28. What is scope in JavaScript?

<->

29. How to create an array? List some of array methods

<->

30. What is hoisting?

<->

ECMAScript o JavaScript?

Julio Santacruz — Sat, 03 Sep 2022 03:39:55 +0000

Este no es un post ordinario, aquí voy a colocar notas de estudio de este tema tan basto que es JavaScript, o si tu vienes para saber que es ECMAScript puedes bajar unos cuantos párrafos, que hoy vamos empezar desde el inicio de los tiempos...

Historia de JavaScript

Antes de que se escribiera la primer linea de código de JS, en 1950 empezaba a nacer la computación moderna, la primeras computadoras eran enormes cajas de metal que solo podían ser adquiridas por grandes empresas, estas cajas que ahora son obsoletas se utilizaban para realizar enormes cantidades de cálculos, principalmente útiles para el sector militar.

[ *Dato curioso = Un teléfono inteligente actual tiene mas poder de calculo y procesamiento que la computadora utilizada en el alunizaje ]

El Apollo Guidance Computer fue un componente fundamental del programa Apolo. Proporcionaba la capacidad de cálculo necesaria para controlar la orientación y la navegación del módulo de mando y del módulo lunar. Módulo de memoria volátil de 1024 bits del AGC del Apolo

Ahora en 1969 se creo la red ARPANET, este fue el primer protocolo para conectar dos computadoras. Este y otros protocolos se siguieron desarrollando entre 1970 - 1990, en 1990 Tim Berners-lee creo la world wide web, fue un forma nueva acceder a documentos, archivos o enlaces para navegar a otros lugares.

En 1993 se creo Mosaic, fue el primer navegador de internet de fácil acceso.

En 1995 Microsoft lanzo internet explorer, dando inicio a los browser wars, esta guerra inicia con internet explorer vs Netscape, en los siguientes anios luego se fueron agregando chrome, Firefox y safari.

Dentro de Netscape nace JavaScript en 1995, por su lado Microsoft lanzo JScript, debido a esto en 1997 nace ECMA--->(European Computer manufacturer Association). ECMAScript es el estándar que se encarga de establecer como debe ser interpretado y debe funcionar JavaScript....

ECMAScript es el estándar ----> JavaScript es el lenguaje

ECMAScript o JavaScript?

Si quieres aportar al lenguaje con ideas, implementaciones o nuevos métodos te puedes dirigir a la TC39 ----> Technical Committee No 39. Este comité se encarga de aceptar e implementar cambios al lenguaje.

Cuando hay cambios al lenguaje se creo un lanzamiento denominado ESxx, En 1997 se lanzo ES1 (primer ajuste), en el 2005 se lanzo ES5, en el 2018 se lanzo el ES9 ( ECMAScript 9)

La ultima version es ES2022

Como puedo centrar un < div > ...?

Julio Santacruz — Sun, 14 Aug 2022 06:30:00 +0000

Vamos a centrar un div

En esta entrada te muestro tres métodos diferentes para centrar el contenido de un div like a pro

Los métodos para centrar < div > son:

position: absolute;
display: flex;
display: grid;

Position: absolute..?

La propiedad 'position' de CSS especifica la manera en que un elemento es posicionado en el DOM. Las propiedades que tenemos disponibles son:

top, right, bottom, left

Estas propiedades establecen la position final de los elementos. Existen varios tipos de position, los mas comunes son.

static, relative, absolute, sticky

Centrar < div > con position: absolute;

    div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50, -50);
        }

Display: flex...?

Desde el inicio, display flex es parte de FlexBox, es un set de propiedad 'nuevas' de HTML5, nos permite maquetar nuestros proyectos web de una manera mas sencilla e intuitiva (es mi propiedad favorita). FlexBox funciona como un elemento contenedor (flex container) que ordena y posiciona todos los elementos contenidos segun se le indique.

Centrar un < div > con display: flex;

    div{
        display: flex;
        align-items: center;
        justify-content: center;
        }

Display: grid...?

A mi manera de entender como funcionan las cosas puedo decir que grid y flex son iguales y tienen el mismo objetivo, pero funcionan de manera diferente. Las propiedades Grid también se crearon para HTML5 y funciona como una cuadricula.

Centrar un con display: grid;

    div{
        display: grid;
        display: grid;  
        justify-content: center;  
        align-content: center;
        }

div{
    display: grid;
    place-items: center;
    {

Accesibilidad WEB..? Tienes que saber esto..!

Julio Santacruz — Wed, 27 Jul 2022 21:09:00 +0000

Que es accesibilidad web ?

La accesibilidad web es la practica continua de asegurarnos que todo lo que creamos para la web se puede usar, interpretar y operar por una variedad de personas en una variedad de situaciones.

Cuando hablamos de accesibilidad o un diseño accesible nos enfocamos principalmente en el Frontend, el diseño web/interfaz de proyecto es el encargado de cumplir con estándares para ser legible por cualquier persona, incluyendo a personas con discapacidad visual, auditiva, física, cognitiva, neurológica y del habla.

Lectura de interés ---> Acciones para un sitio accesible en MEXICO

a11y --> es el numeronimo de accessibility

Por que es importante la accesibilidad web ?

Implementar un diseño accesible para todos los usuarios es importante para incluir a personas en situaciones de discapacidad, incluso en algunos lugares es requerido por ley.

Ejemplo en EEUU existe una ley que menciona que, si tus usuarios están en el país, ellos tienen el derecho de que todos los productos o servicios que ellos desean utilizar sean accesibles.

Existen casos como el de Domino’s Pizza, que fue denunciado por qué el sitio no era accesible y un ciudadano los demando por eso, terminaron siendo multados millones de dólares.

Americans with Disabilities Act (ADA) became law in 1990.

Quien regular la accesibilidad ?

WCAG ---> Web Content Accessibility Guidelines (Guía de Accesibilidad para el Contenido Web). Esta Guía fue creada por la W3C (World Wide Web Consortium) a través de la WAI (Web Accessibility Initiative)

---> Actualmente esta iniciativa va en la version 2.0

Como se mide la accesibilidad ?

La accesibilidad se mide en tres niveles

[ ] A - Es el nivel mas bajo, es una accesibilidad basica para nuestros proyectos.
[ ] AA - Es el nivel intermedio
[x] AAA - Es el nivel mas alto, este nivel es la meta para paginas de universidades y gobiernos.

Cuales son las Pautas WCAG 2.0?

Perceptible

Los criterios de conformidad bajo este principio se enfocan en asegurar que todo el contenido que es importante se pueda interpretar de varias maneras.

Operable

Cuando hablamos de ser operable, queremos asegurarnos que nuestro sitio es fácil de usar y navegar, que se puede navegar de diferentes maneras y con mouse y/o teclado

Comprensible

Hacer que nuestro sitio web sea comprensible nos asegura que un rango de personas lo pueden usar, desde la persona que vive con una discapacidad mental que necesita patrones comunes para saber cómo usar la web hasta la persona que va de carrera y necesita consultar algo rápido

Robusto

Cuando hacemos productos que funcionan en muchos lados, abrimos las posibilidades que cualquier persona los use sin importar su ubicación, máquina, navegador o condición

Como puedo implementarlo ?

HTML Semántico

Tal vez a ti como a mi nos mencionaron mucho de la importancia de una estructura de HTML semántico, aquí todo toma sentido.

Para que la web sea accesible se han desarrollado varios tipos de programas especiales para que personas con alguna discapacidad física puedan navegar la web, por ejemplo, un lector de pantalla. Este tipo de programas lo que hacen es leer las etiquetas de HTML y darles jerarquía para la lectura en voz alta. Por ejemplo, en la etiqueta < head > colocamos meta información que no se lee en voz alta, en < body > tenemos:

< h1, ..., h6 >,
< img >
< a >
< buttons >
< sections >

y más etiquetas que nos organizan la información, algunos si se leerán en voz alta, incluso el atributo "alt" de una imagen debe ser una breve descripción de la imagen para quien no puede ver la imagen

< img src=" .../nombre.jpg " alt="breve descripción de imagen" >

a continuación te dejo un ejemplo de una estructura de HTML semántico

<html>
<head> .... </head>
<body>
<header> ... </header> 
<main> 
    <section> ... </section>
    <section> 
        <article> ... </article>
     </section>
 </main>
</body>
</html>

Html no semántico

<html>
<head> .... </head>
<body>
<div> ... </div> 
<div> 
    <div> ... </div>
    <div> 
        <div> ... </div>
     </div>
 </div>
</body>
</html>

Por último debes saber que existe unos atributos 'aria' para todo tu HTML, aria es un acrónimo

Accessible Rich Internet Applications

Pronto hare una publicación hablando solo de los atributos 'aria'

CSS Legible

Con CSS Legible no me refiero a la facilidad de leer el código CSS, me refiero a que este de los estilos correctos para nuestro proyecto, haciendo contraste correcto de los colores, textos guía para elementos como iconos que puedan no ser de uso común, aplicación de un skip links, definición de estilos 'focus y hoves' para elementos importantes, entre otros.

CSS Estilizado
JavaScript Funcional

Como subir tu proyecto de React a GitHub Pages

Julio Santacruz — Fri, 27 May 2022 06:31:05 +0000

Introducción

En esta ocasión de mostrare como hacer deploy de tu proyecto de react al servidor de paginas estáticas de github pages. Si sabes que es react seguramente sabrás que GitHub y tendrás tu cuenta, si es así sígueme en github. Por otro lado Github Pages es un servicio adicional de hosting de paginas estáticas (solo HTML, JavaScript y CSS) que NO FUNCIONA COMO SERVIDOR BACKEND, es un servicio gratuito y sencillo de usar.

Preparación

Antes de iniciar el proceso de deploy en GitHub Pages debes tener lo siguiente:

[x] Cuenta de GitHub
[x] Git instalado en tu computadora
[x] Proyecto web en su repositorio en GitHub

Instalación de gh-pages

El primer paso será instalar el paquete gh-pages que nos ayudara a convertir el código de react a archivos estáticos que nos acepte el hosting

npm install --save-dev gh-pages

recuerda que las banderas "--save-dev" asignan la instalación como dependencias de desarrollo. Una vez que se haya instalado verifica en el archivo package.json que se haya agregado el paquete

},
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    }
...
   }

Configuración package.json

Para configurar nuestro archivo package.json debemos agregar las siguientes reglas, la primera será homepage la vamos agregar después de "devDependencies"

 },
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    },
 "homepage": "https://USUARIO_GITHUB.github.io/NOMBRE_DE_REPOSITORIO"
...
   }

Para esta regla de "homepage" es importante que coloques TU usuario de github y el nombre del repositorio que estas utilizando, por ejemplo

"homepage": "https://aramxD.github.io/react-fetch-exercise"

Ahora vamos a agregar un par de scripts, llamados "predeploy" y "deploy" que nos ayudara a preparar nuestra aplicación para subirla a los servidores de GitHub

},
"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
    ...
},

No olvides guardar los cambios

Ejecutamos Deploy

Con los scripts preparados ejecutamos en nuestra terminar el script "deploy"

npm run deploy

No olvides que la terminal debe esta en la carpeta de nuestro proyecto.
Una vez que termine la ejecución de nuestro comando, podrás ver que se creo una carpeta llamada "build"

En esta carpeta encontraras lo archivos estáticos de nuestro proyecto

Commit y push

Para finalizar debemos guardar los cambios y agregarlos a nuestro repositorio, primero agregamos los cambios con:

git add --all

lo siguiente será crear el commit con los cambios

git commit -m"deploy ready"

para finalizar enviamos los cambios al repositorio con "push"

git push origin master

Resultados

Para comprobar que todo haya salido bien, entra a tu repositorio y dirígete a settings, en el lado izquierdo encontraras el apartado de Pages ahí encontraras el link publico de tu proyecto.

Nota: En ocasiones es necesario esperar unos minutos para que se actualicen los servidores de GitHub Pages y se muestre nuestro proyecto

Debes nombrar tus Áreas CSS Grid

Julio Santacruz — Mon, 23 May 2022 19:51:27 +0000

Hay muchas maneras de maquetar en HTML y CSS, personalmente me gusta mucho utilizar FLEX BOX, pero en esta publicación te enseñare como definir las áreas para tu interfaz con CSS y 'Grid template areas'. Esta es una manera sencilla para definir áreas y nombrarlas.

CSS Grid nos sirve para cuadricular el contenido de nuestro HTML de manera que mas nos convenga para ordenar la información que mostramos al usuario. Piensa en un blog, tenemos los siguientes elementos

Cabecera (Header), en este espacio podemos tener el menú de navegación, el logo de nuestro proyecto, una imagen hero de proyecto u otros elementos. Esta area se ubica en la parte superior del contenido.
Contenido (Main), esta es el área principal en donde tenemos la información que vamos a mostrar. Esta area la encontramos entre el Header y el Footer.
Pie de pagina (Footer), en esta puede tener un menu espacial con enlaces a otros sitios. Esta área se encuentra al final del contenido.
Lateral (Aside), esta area es la conflictiva, va entre el Header y el Footer y puede ir a la izquierda o a la derecha de Contenido (Main). Este espacio es mas angosto que el contenido main, pensemos que es un menu lateral.

Considerando lo anterior podemos pensar en la siguiente estructura

Después de algunas ajustes de dimisiones con CSS

Primero vamos a definir un contenedor para nuestro contenido, para este ejemplo lo creare con un < div >, tu puedes elegir otra etiqueta. No olvides asignarle una clase, en este caso la clase es 'grid-areas'

html

<h1>Grid Template Areas</h1>
<div  class="grid-areas">
    <div  class="header"> Soy el Header</div>
    <div  class="main">Soy el Main</div>
    <div  class="footer">Soy el Footer </div>
    <div  class="aside">Me llamo Aside</div>
</div>

CSS

.grid-areas { 
        display: grid;  <---- Definimos el uso de CSS GRID
        grid-template-columns: repeat(4, 1fr); <---- Definimos 4 columnas
        grid-template-areas: <---- Asignamos el nombre de las areas
                "header header header header "  
                "main main main aside"  
                "footer footer footer footer";    
                }

El resultado de esta estructura es la siguiente: