Forem: Franco Andrés

I created a plugin that simplifies the integration of Google Maps into Vite and React

Franco Andrés — Wed, 25 Mar 2026 23:19:52 +0000

If you're using Vite and React, you've probably dealt with manually loading the Google Maps JavaScript API, wrapping your app with providers, repeated configuration and boilerplate all over your codebase. That's where vite-plugin-google-maps comes in: a plugin designed to simplify and speed up Google Maps integration in Vite-based React apps.

What does `vite-plugin-google-maps` offer?

Auto-configuration and zero boilerplate: the plugin automatically wraps your app with the necessary provider (APIProvider) — you don't have to do it manually.

Pre-configured Map component: exposes a virtual module @google-maps/map that provides a Map component ready to use, with default props you can override whenever you need.

Globally configurable defaults: from the initial zoom and center, to controls (fullscreen, zoom control, etc.), to how gestures behave on the map.

Google Maps libraries support (places, marker, etc.): you can define which libraries to load alongside the plugin.

Development panel (debug): if you enable debug: true, you can see useful information like map load status, zoom level, cursor position, and click coordinates — handy for debugging and development.

Flexibility: you can use the Map component's props to override defaults for specific maps, which is ideal if your app uses multiple maps with different configurations.

How to get started

Install the plugin:

pnpm install vite-plugin-google-maps
# or npm/yarn equivalent

Configure it in vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { GoogleMapsPlugin } from 'vite-plugin-google-maps';

export default defineConfig({
  plugins: [
    react(),
    GoogleMapsPlugin({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
      libraries: ['places', 'marker'],       // for example
      debug: true,                           // optional
      mapDefaults: {
        mapId: 'YOUR_MAP_ID',
        gestureHandling: 'greedy',
        defaultCenter: { lat: 40.7128, lng: -74.0060 },
        defaultZoom: 12,
        fullscreenControl: true,
        disableDefaultUI: false,
        // other controls like zoomControl, streetViewControl, etc.
      },
    }),
  ],
});

Use the Map component in your React app:

import { Map } from '@google-maps/map';
import { AdvancedMarker } from '@vis.gl/react-google-maps';

function App() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <Map>
        <AdvancedMarker position={{ lat: 40.7128, lng: -74.0060 }} />
      </Map>
    </div>
  );
}

export default App;

You can override props on Map to change the global configuration (zoom, center, controls, etc.) for that specific map only.

TypeScript Setup

Since @google-maps/map is a virtual module generated by the plugin, TypeScript doesn't know about it by default. To get full typing and autocomplete for the Map component's props, you need to declare the module in a type declaration file. Create a types.d.ts (or add it to your vite-env.d.ts) with the following:

// types.d.ts or vite-env.d.ts
declare module "@google-maps/map" {
  import React from "react";
  import { Map as GoogleMapBase } from "@vis.gl/react-google-maps";

  export const Map: React.FC<React.ComponentProps<typeof GoogleMapBase>>;
}

With this, the Map component will have the same typed props as the original Map from @vis.gl/react-google-maps, with no TypeScript errors.

Why I built this plugin

Integrating Google Maps into a React + Vite project usually involves a lot of boilerplate: provider setup, configuration, libraries, conditional loading — I felt there was room for an abstraction that simplifies all of that.

I wanted to deliver a smooth integration experience, without repeating configuration every time I use a map, especially in projects with multiple maps.

I wanted the default configuration to be sane but easily overridable: many apps just need a basic map, others need different maps — the plugin works for both cases.

Who is it ideal for?

New projects using Vite + React that need maps: lets you get started with Google Maps in minutes without any hassle.

Apps with multiple maps or different map configurations: you can set global defaults and override them when needed.

Teams looking to avoid repeated boilerplate, simplifying onboarding for new developers.

Things to keep in mind / Limitations

You need a Google Maps API Key like any integration with the official API. The plugin doesn't handle key generation for you — that's part of the standard Google Cloud Platform flow.

The plugin depends on @vis.gl/react-google-maps — if your stack changes, some adjustments may be needed.

It's experimental: while functional, there may be edge cases or specific situations where manual configuration makes more sense.

Conclusion

vite-plugin-google-maps was built to give back time and simplicity: instead of repeating configuration and wrappers every time you need a map, just install the plugin, configure it once, and use the Map component directly. If you're using Vite + React and need Google Maps, it can help you get started quickly, keep your code clean, and focus on what matters.

If you're a web developer and this interests you, I'd love to hear your feedback, improvement ideas, or use cases where it becomes indispensable.

Creé un plugin que simplifica la integración de Google Maps en Vite y React

Franco Andrés — Thu, 26 Feb 2026 15:37:47 +0000

Si estás usando Vite y React, probablemente hayas lidiado con la carga manual del API de Google Maps JavaScript API, el wrapping con providers, configuración repetida y boilerplate dentro de tu aplicación. Ahí es donde entra vite-plugin-google-maps: un plugin pensado para simplificar y acelerar la integración de Google Maps en apps React basadas en Vite.

¿Qué ofrece `vite-plugin-google-maps`?

Auto-configuración y cero boilerplate: el plugin autoenvuelve tu app con el provider necesario (APIProvider) no tenés que hacerlo manualmente.

Componente Map preconfigurado: expone un módulo virtual @google-maps/map que provee un componente Map listo para usar, con props por defecto que podés sobrescribir cuando lo necesites.

Defaults globales configurables: desde el zoom inicial, centro, controles (fullscreen, zoom control, etc.), hasta cómo responden los gestos en el mapa.

Soporte para librerías de Google Maps (places, marker, etc.): podés definir qué "libraries" cargar junto con el plugin.

Panel de desarrollo (debug): si activás debug: true, podés ver información útil, como estado de carga de mapa, nivel de zoom, posición del cursor, coordenadas de click útil para debugging y desarrollo.

Flexibilidad: porque podés utilizar las props del componente Map para sobreescribir defaults en ciertos mapas, lo que es ideal si tu app usa múltiples mapas con diferentes configuraciones.

Cómo ponerlo en marcha

Instalar el plugin:

pnpm install vite-plugin-google-maps
# o npm/yarn equivalente

Configurarlo en vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { GoogleMapsPlugin } from 'vite-plugin-google-maps';

export default defineConfig({
  plugins: [
    react(),
    GoogleMapsPlugin({
      apiKey: 'TU_GOOGLE_MAPS_API_KEY',
      libraries: ['places', 'marker'],       // por ejemplo
      debug: true,                           // opcional
      mapDefaults: {
        mapId: 'TU_MAP_ID',
        gestureHandling: 'greedy',
        defaultCenter: { lat: 40.7128, lng: -74.0060 },
        defaultZoom: 12,
        fullscreenControl: true,
        disableDefaultUI: false,
        // y otros controles como zoomControl, streetViewControl, etc.
      },
    }),
  ],
});

Usar el componente Map en tu app React:

import { Map } from '@google-maps/map';
import { AdvancedMarker } from '@vis.gl/react-google-maps';

function App() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <Map>
        <AdvancedMarker position={{ lat: 40.7128, lng: -74.0060 }} />
      </Map>
    </div>
  );
}

export default App;

Si querés, podés sobrescribir props en Map para modificar configuración global (zoom, centro, controles, etc.) sólo para ese mapa.

Setup con TypeScript

Como @google-maps/map es un módulo virtual generado por el plugin, TypeScript no lo conoce por defecto. Para tener tipado completo y autocompletado en las props del componente Map, necesitás declarar el módulo en un archivo de tipos. Creá un types.d.ts (o agregalo a tu vite-env.d.ts) con lo siguiente:

// types.d.ts o vite-env.d.ts
declare module "@google-maps/map" {
  import React from "react";
  import { Map as GoogleMapBase } from "@vis.gl/react-google-maps";

  export const Map: React.FC<React.ComponentProps<typeof GoogleMapBase>>;
}

Con esto, el componente Map va a tener las mismas props tipadas que el Map original de @vis.gl/react-google-maps, sin errores de TypeScript.

¿Por qué desarrollé este plugin?

Integrar Google Maps en un proyecto React + Vite suele implicar bastante boilerplate: provider, configuración, librerías, carga condicional; me pareció que había lugar para una abstracción que lo simplifique.

Quería entregar una experiencia de integración fluida, sin repetición de configuración cada vez que uso un mapa, especialmente en proyectos con múltiples mapas.

Quiero que la configuración por defecto sea sana, pero fácilmente sobreescribible: muchas apps sólo necesitan un mapa básico, otras necesitan distintos mapas el plugin sirve para ambos casos.

¿Para quién es ideal?

Proyectos nuevos usando Vite + React que necesiten mapas: permite empezar con Google Maps en unos minutos sin complicaciones.

Apps con múltiples mapas o diferentes configuraciones de mapas: podes establecer defaults globales y sobreescribir cuando sea necesario.

Equipos que buscan evitar boilerplate repetido, simplificando onboarding de nuevos desarrolladores.

Cosas a tener en cuenta / Limitaciones

Necesitás una API Key de Google Maps como cualquier integración del API oficial. El plugin no gestiona la generación de la API key por vos. Esto es parte del flujo estándar de la Google Cloud Platform.

El plugin depende de la librería @vis.gl/react-google-maps si tu stack cambia, podría requerir ajustes.

Es experimental: aunque ya funcional, puede haber edge-cases o situaciones particulares donde convenga revisar configuración manual.

Conclusión

vite-plugin-google-maps nació para devolvernos tiempo y simplicidad: en lugar de repetir configuración y wrappers cada vez que queremos un mapa, basta con instalar el plugin, configurarlo una vez y usar el componente Map directamente. Si usás Vite + React y necesitás Google Maps, puede ayudarte a arrancar rápido, mantener tu código limpio y enfocarte en lo importante.

Si te interesa y para vos que ya sos desarrollador web me encantaría saber tu feedback, ideas de mejoras o casos de uso donde se vuelva indispensable.

Relacionado

Mini project for converting files to Byte Array

Franco Andrés — Thu, 06 Mar 2025 21:00:02 +0000

Quick weekend project, I created a converter to pass images, PDF, GIF, and Word to a Bytes Array, since I didn't find a site that does it the way I wanted.

Fully developed with vanilla JavaScript, HTML and pure CSS.

Page: https://files-to-byte-array.vercel.app/
Repo: https://github.com/Franqsanz/files-to-byte-array

Herramienta como extensión del navegador para observar los atributos ARIA

Franco Andrés — Fri, 15 Oct 2021 14:53:13 +0000

Foto de portada por Tito Pixel en Unsplash.

Estos últimos meses he estado tratando de mejorar una extensión que desarrollé el año pasado, la idea es que puedas observar si las etiquetas HTML contienen estos atributos.

Escribí sobre está extensión hace un tiempo aquí en Dev, puedes leerlo en el siguiente enlace:

Una extensión para detectar los "aria-label" no aplicados en etiquetas HTML.

Franco Andrés ・ Oct 28 '20

#html #a11y #webdev #css

¿Qué hay de nuevo?

Mi objetivo era que está misma pudiera inyectar un código CSS mediante programación no como estaba originalmente, así tendría más control de ella y podría activarla cuando quería desde una UI (User Interface), también decidí renombrar el proyecto a "ARIA Observation Tool".

¿Qué se observa?

Por el momento no se observan todos los atributos ARIA solo los siguientes:

aria-label
aria-expanded
aria-hidden
aria-haspopup

Si no están aplicados serán remarcados con un color en los bordes.
En realidad es un outline de 2px de tipo dashed.

Ejemplo:

La verdad que no tengo mucha experiencia en extensiones y me ha costado entender al principio en cómo inyectar tal código (aún sigo sin entender muchas cosas 🙃)

Después de leer varios artículos sobre cómo crear una extensión y estar en la documentación oficial de Google, logré hacer lo que quería! 🥳

En construcción...

Aún no he logrado terminarla, sigo luchando pero ya es un paso más, eso me hace sentir bien y la verdad que este proyecto me da orgullo.
No sé bien si realmente es útil o no, pero siempre aprendes algo nuevo en cada proyecto.

Problemas descubiertos

He descubierto muchos problemas cada vez que he avanzado, la accesibilidad es compleja y usar estos atributos también, no se trata simplemente de colocarlos en todas partes, hay etiquetas HTML que no es necesario colocar los atributos y en otros si.
Esto me llevo a la conclusión de que es bastante complejo desarrollar está herramienta.

Conclusión

Queda mucho por investigar y aprender sobre los atributos ARIA y cuáles son las etiquetas más importantes que deberían contenerlos.

Repo:

Dejo el repositorio por si tienes curiosidad o si deseas contribuir o dejar una estrella! 😊

Franqsanz / aria-observation-tool

🧐 Tool as a browser extension to observe whether ARIA attributes are applied in HTML tags.

ARIA Observation Tool Extension

Está herramienta sirve para observar algunos atributos ARIA.

aria-label
aria-expanded
aria-haspopup
aria-hidden

Si no están aplicados serán remarcados con un color en los bordes.

Ejemplo:

View on GitHub

Recursos:

¡Saludos y Feliz Codificación!

Mis Repos para Hacktoberfest 🎃

Franco Andrés — Wed, 06 Oct 2021 13:39:20 +0000

¡Hola!

Este año es mi primera vez que participo en el Hacktoberfest y quiero dejar algunos de mis proyectos por si alguien desea contribuir.

1️⃣ Fruits API

Una API con datos de árboles frutales.

Stack:

JavaScript

Franqsanz / fruits-api

🍉 🍎 A GraphQL API with fruit tree data. Built with 🚀 Apollo Server Lambda + Netlify Lambda.

Fruits API

Other Language

Spanish / Español

GraphQL API with fruit tree data This API is built with Apollo Server Lambda + Netlify Lambda.

In this project I am not using a database. The data is in data.js, in case you want to add more information :)

Contribute

Read the CONTRIBUTING.md file or check if there are any issues, all PRs are welcome.

URLs

Playground: https://fruits-api.netlify.app/graphql

Web: https://fruit-api.netlify.app/

Get the code for this project

Clone repository:

git clone https://github.com/Franqsanz/fruits-api.git

Enter to the repository directory:

cd fruits-api

Install all dependencies:

npm install

# Or with yarn
yarn

Once all the dependencies are installed run the following command:

npm start

yarn start

Run Testing (optional):

npm test

yarn test

As an alternative, you can use Docker

Open your terminal/command line
Run docker-compose up

Once the API is executed, if all goes well you should see in your terminal the following…

View on GitHub

2️⃣ BoxShadows.css

Una mini librería CSS de sombras.

Stack:

CSS
JavaScript

Franqsanz / box-shadows.css

Mini librería de sombras.

BoxShadows.css

Mini librería CSS de sombras.

Instalación

npm i box-shadows

O descarga el archivo desde la web: https://cssshadows.netlify.app/

Modo de uso

1. Ejemplo con Styled Components:

import styled from "styled-components";
import { sw_b_20_b } from "box-shadows";

const Card = styled.div`
  width: 200px;
  height: 200px;
  box-shadow: ${sw_b_20_b};
`;

2. De forma tradicional:

La forma de utilizar esta librería es como cualquier archivo CSS. Solo debes enlazarlo en el <head>.

Ejemplo:

<head>
  <link rel="stylesheet" href="./shadows.min.css">
</head>

❗ ATENCIÓN ❗

Solo hay clases no puedes usar id.

Entonces debes llamar los class desde las etiquetas que utilizes. Por ejemplo un <div>.

Color de la sombra

#CACACA
rgb(202, 202, 202)
hsl(0, 0%, 79%)

Tipos de clases disponibles

Clases con efecto Blur.
Clases con efecto Solid.
Clases con…

View on GitHub

3️⃣ Regexs

Un pequeño paquete NPM de expresiones regulares.

Stack:

JavaScript

Franqsanz / regexs

Paquete NPM de expresiones regulares.

Regexs

Es un paquete de Expresiones Regulares, que construí con el objetivo de uso personal, pero cualquiera puede utilizarlo.

Voy a ir recopilando Expresiones Regulares con el tiempo.

Si te gustaría contribuir para agregar algunas más, puedes hacer un PR. en GitHub. :)

Instalación

$ npm install regexs

Modo de uso

const regexs = require('regexs');
// También pudes utilizar "Destructured Object"
const { numberCommas, rmAccents } = require('regexs');

// O con import
import regexs from 'regexs';
import { numberCommas, rmAccents } from 'regexs';

// Agregar comas a cifras numéricas.
// Por ejemplo:
const numero = numberCommas(50000);
console.log(numero); // 50,000

// Quitar acentos.
// Por ejemplo:
const acentos = rmAccents('perfección');
console.log(acentos); // perfeccion

Tipos de expresiones regulares disponibles:

…

View on GitHub

Happy Coding!

Resolviendo el error de degit en la instalación de create-astro

Franco Andrés — Mon, 30 Aug 2021 19:00:55 +0000

Si algún día pruebas Astro es posible que tengas el siguiente error en la instalación:

franqsanz@Franco/mnt/c/Users/franc/Desktop/random-books npm init astro
npx: installed 18 in 10.622s

Welcome to Astro! (create-astro v0.6.0)
If you encounter a problem, visit https://github.com/snowpackjs/astro/issues to search or file a new issue.

> Prepare for liftoff.
> Gathering mission details...
✔ Which app template would you like to use? › Starter Kit (Generic)
✔ Which frameworks would you like to use? › Preact, React, Solid, Svelte, Vue
> Copying project files...
zlib: unexpected end of file

Este error:

zlib: unexpected end of file

Si es que todavía no fue resuelto por el equipo de Astro (es muy probable que esté resuelto en el futuro).

Solución

Sólo debes eliminar la carpeta .degit de la siguiente forma:

rm -rf ~/.degit/github/snowpackjs

Y luego volver a probar la instalación y esto es todo!

degit es lento en create-astro, así que debes tener paciencia.

Aquí un hilo en github sobre el problema

¡Saludos!

Cómo cambiar la contraseña de Linux(Ubuntu 20.04 LTS) en WSL

Franco Andrés — Tue, 20 Jul 2021 18:42:53 +0000

Seguramente alguna vez te has olvidado la contraseña en Linux y no sabes cómo cambiarla (cosa que a mí me ha pasado algunas veces 😅). La verdad es bastante fácil de hacer.

Puedes leer este artículo para más detalles.

En este caso voy hablar de cómo restablecer o cambiar la contraseña en Ubuntu 20.04 LTS ya que es la distribución que estoy utilizando en WSL, pero si usas otra distribución échale un vistazo al link que deje arriba!

Son tres simples pasos

1️⃣ Cambiar a root como usuario predeterminado

Aquí debe abrir un terminal de cmd de Windows y ejecutar el siguiente comando:

# cmd
config --default-user root

Debe colocar ubuntu2004 antes del comando.
Obviamente en el lugar de user y username debe colocar su usuario.

Ejemplo:

# cmd
C:\Users\user>ubuntu2004 config --default-user root

2️⃣ Cambia la contraseña

Aquí debe abrir un terminal de wsl y ejecutar el siguiente comando:

# wsl
passwd username

Le pedirá que ingresé su nueva contraseña y luego confirmarla

Ejemplo:

# wsl
root@user:/home/username# passwd username
New password:
Retype new password:
passwd: password updated successfully

3️⃣ Vuelva a establecer su usuario como predeterminado

# cmd
config --default-user username

Ejemplo:

# cmd
C:\Users\user>ubuntu2004 config --default-user username

Y listo ya sabes cómo cambiar la contraseña o restablecerla! 🎉

¿Cómo funciona .npmignore?

Franco Andrés — Mon, 05 Jul 2021 19:39:25 +0000

Si alguna vez te pusiste a desarrollar un paquete para publicar en npm, seguro te pusiste a pensar 🤔:

¿Cómo hago para ignorar X archivo para que no se publique en npm?
¿Con .gitignore es suficiente?
¿Cuándo debo usar un .npmignore?

Con .gitignore si puedes ignorar archivos, pero a veces no quieres ignorar X archivo y ahí es donde entra .npmignore.

Por ejemplo: desarrollaste un paquete y a su vez un sitio web para su documentación. Si deseas tener todo en un mismo proyecto, es ahí donde es necesario un .npmignore porque no vas a publicar todos los archivos de la web en npm, solo el paquete.

Cuando npm no encuentra un .npmignore utiliza el .gitignore para ignorar los archivos.

¿Cómo se ve?

# Ejemplo de un .npmignore

img/
css/
index.html

Como puedes ver es exactamente igual a un .gitignore.

Puedes verificar si tu paquete ignorará los archivos que incluiste en .npmignore ejecutando npm pack, éste comando generará un tarball localmente que sería exactamente lo mismo que hace npm al publicarlo.

Para saber más puedes leer los documentos.

Espero que este post super corto te sea de ayuda. 😃

¡Saludos!

¿Qué es Astro y cómo empezar?

Franco Andrés — Wed, 30 Jun 2021 15:32:20 +0000

¡Hola!

La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯

Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.

¿Pero qué es?

Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”

Puedes leer con más detalles en la introducción a Astro.

Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.

Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.

Por ejemplo:

Todo.jsx
Todo.vue
Todo.svelte

Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔

Iniciar un proyecto con Astro

⚠️ Importante

La versión mínima de Node.js que se requiere es la 14.15.1.

# Inicializamos Astro 
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start

Uso

Estructura básica recomendada:

├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json

Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo .astro.

Así es como se ve un archivo `.astro`

---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Astro</title>
 </head>
 <body>
   <header>
     <!-- Colocamo nuestro componente Astro -->
     <Nav />
   </header>
   <div class="contentTodo">
     <!-- Colocamo nuestro componente React -->
     <TodoReact:visible />
     <!-- Colocamo nuestro componente Svelte -->
     <TodoSvelte:visible />
   </div>
 </body>
</html>

Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (---).

Routing

El enrutamiento ocurre dentro de src/pages/* los archivos .astro se convierten en .html estático.

Por ejemplo tienes lo siguiente:

index.astro
about.astro
404.astro

Los archivos de esta carpeta se corresponde con una URL pública.

Ejemplo:

Archivo local	URL publica
`src/pages/index.astro`	`/index.html`

¡Astro tiene muchas características más!

Más info

Puedes leer más sobre Astro en el Readme del proyecto.
Mira la documentación.
También en esta demo que hizo Cassidy con Astro + React + Vue.
Aca dejo mi primera experiencia con Astro + React + Svelte + Vue, también puedes verlo en vivo.
Echa un vistazo a este artículo en CSS-Tricks.

Conclusión

Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.

¡Saludos!

Cree una mini librería CSS de sombras

Franco Andrés — Tue, 27 Apr 2021 14:38:26 +0000

Me puse a crear un proyecto de fin de semana (que no lo hice en un fin de semana 🙃), se trata de una librería CSS de sombras, se me ocurrió porque tenía curiosidad de como crear una.
Es algo básico pero siempre se aprende algo nuevo al crear proyectos.

Como funciona

Hay dos formas de usar esta librería:

De forma tradicional descargando un archivo .css
Instalando desde npm.

Echemos un vistazo a lo tradicional:

Enlazamos el archivo como cualquier otro archivo .css

<head>
 <link rel="stylesheet" href="./shadows.min.css">
</head>

Esta librería solo contiene clases, entonces hacemos lo siguiente:

<div class="sw-b-30-b"></div>

<!--
  Está clase contiene una sombra tipo blur de 30px posicionada en la línea inferior del elemento,
  el nombre completo sería así: "shadows-blur-30-botton".
-->

Para saber todas las clases que existen puedes leer la Documentación.

Hay tres tipos de sombras:

Efecto Blur.
Efecto Solid.
Efecto multi sombra(experimental).

Echemos un vistazo al paquete npm:

Decidí crear un paquete porque me pareció interesante poder usarlo con Styled Components o otro framework de CSS-in-JS.

Instalamos el paquete:

npm install box-shadows

Acá un ejemplo con Styled Components:

import styled from "styled-components";
import { sw_b_20_b } from "box-shadows";

const Card = styled.div`
  width: 200px;
  height: 200px;
  box-shadow: ${sw_b_20_b};
`;

Conclusión

Seguramente existen otros proyectos parecidos y que estén mejor desarrollados, en mi caso solo fue crear algo por solo curiosidad.
De todas formas me gustó hacer esto.

Enlaces

Sitio web
Documentación
Paquete npm

Saludos!

Un preloader parecido a microsoft cortana con puro CSS

Franco Andrés — Thu, 25 Mar 2021 03:41:10 +0000

Configuración de CORS en ApolloServer

Franco Andrés — Mon, 01 Mar 2021 15:23:11 +0000

Tenía un error con CORS en mí API GraphQL que está construida con Apollo Server Lambda, cuando hacía una solicitud desde el frontend me daba el típico error en la consola, que más de uno/a debe haber visto alguna vez.
Pero yo me pregunté, en mí API, sí agregué la opción de CORS, entonces ¿Dónde está el problema?

Sobre `ApolloServer()`

El ApolloServer() puede recibir muchas opciones, uno es el objeto CORS pero este no funciona o en mí caso no funcionó.

Un ejemplo:

const { ApolloServer } = require('apollo-server-lambda');
const { typeDefs, resolvers } = require('./graphql/index');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  // En teoría esto debería funcionar. 
  cors: {
    origin: '*',
    credentials: true
  }
});

Solución

Después de buscar en internet encontré una solución en github. 😎

Vuelvo a aclarar que está solución es aplicándola en Apollo Server Lambda, la verdad que no tengo idea si está solución funciona también en el resto de módulos de Apollo Server, creería que es lo mismo, pero la verdad que no lo sé.

La solución que encontré fue eliminar CORS de ApolloServer() y pasarlo al server.createHandler() que es lo que vamos a exportar.

Pasamos exactamente el mismo objeto CORS.

Ejemplo:

exports.handler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true
  }
});

Y acá el código completo para que se entienda mejor:

const { ApolloServer } = require('apollo-server-lambda');
const { typeDefs, resolvers } = require('./graphql/index');

const server = new ApolloServer({
  typeDefs,
  resolvers
});

exports.handler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true
  }
});

Conclusión

Eso fue todo lo que tuve que hacer, solamente cambiar de lugar el objeto CORS.

¡¡Saludos!! 🤙🏻

Forem: Franco Andrés

I created a plugin that simplifies the integration of Google Maps into Vite and React

What does vite-plugin-google-maps offer?

How to get started

TypeScript Setup

Why I built this plugin

Who is it ideal for?

Things to keep in mind / Limitations

Conclusion

Related

Creé un plugin que simplifica la integración de Google Maps en Vite y React

¿Qué ofrece vite-plugin-google-maps?

Cómo ponerlo en marcha

Setup con TypeScript

¿Por qué desarrollé este plugin?

¿Para quién es ideal?

Cosas a tener en cuenta / Limitaciones

Conclusión

Relacionado

Mini project for converting files to Byte Array

Herramienta como extensión del navegador para observar los atributos ARIA

Una extensión para detectar los "aria-label" no aplicados en etiquetas HTML.

Franco Andrés ・ Oct 28 '20

¿Qué hay de nuevo?

¿Qué se observa?

En construcción...

Problemas descubiertos

Conclusión

Repo:

Franqsanz / aria-observation-tool

🧐 Tool as a browser extension to observe whether ARIA attributes are applied in HTML tags.

ARIA Observation Tool Extension

Recursos:

Mis Repos para Hacktoberfest 🎃

1️⃣ Fruits API

Stack:

Franqsanz / fruits-api

🍉 🍎 A GraphQL API with fruit tree data. Built with 🚀 Apollo Server Lambda + Netlify Lambda.

Fruits API

Other Language

Contribute

URLs

Get the code for this project

2️⃣ BoxShadows.css

Stack:

Franqsanz / box-shadows.css

Mini librería de sombras.

BoxShadows.css

Instalación

Modo de uso

Color de la sombra

Tipos de clases disponibles

3️⃣ Regexs

Stack:

Franqsanz / regexs

Paquete NPM de expresiones regulares.

Regexs

Instalación

Modo de uso

Tipos de expresiones regulares disponibles:

Resolviendo el error de degit en la instalación de create-astro

Solución

Cómo cambiar la contraseña de Linux(Ubuntu 20.04 LTS) en WSL

Son tres simples pasos

1️⃣ Cambiar a root como usuario predeterminado

2️⃣ Cambia la contraseña

3️⃣ Vuelva a establecer su usuario como predeterminado

¿Cómo funciona .npmignore?

¿Qué es Astro y cómo empezar?

Iniciar un proyecto con Astro

Uso

Así es como se ve un archivo .astro

Routing

Más info

Conclusión

Cree una mini librería CSS de sombras

Como funciona

Echemos un vistazo a lo tradicional:

Echemos un vistazo al paquete npm:

Conclusión

What does `vite-plugin-google-maps` offer?

¿Qué ofrece `vite-plugin-google-maps`?

Así es como se ve un archivo `.astro`

Sobre `ApolloServer()`