DEV Community

Franco Andrés
Franco Andrés

Posted on • Updated on

Mis Repos para Hacktoberfest 🎃

¡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

GitHub logo Franqsanz / fruits-api

🍎 Una API GraphQL con datos de árboles frutales. Construido con 🚀 Apollo Server Lambda + Netlify Lambda.

Netlify Status

Fruits API

API GraphQL con datos de árboles frutales Esta API esta construida con Apollo Server Lambda + Netlify Lambda.

En este proyecto no estoy utilizando una base de datos Los datos estan en data.js, por si deseas agregar más información. :)

URL

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

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

Obtener el codigo de este proyecto

  1. Clonar repositorio:
$ git clone https://github.com/Franqsanz/fruits-api.git
Enter fullscreen mode Exit fullscreen mode
  1. Entrar al directorio del repositorio:
$ cd fruits-api
Enter fullscreen mode Exit fullscreen mode
  1. Instalar todas las dependecias:
$ npm install

# O con yarn
$ yarn
Enter fullscreen mode Exit fullscreen mode
  1. Una vez que instale todas las dependencias ejecute el siguiente comando:
$ npm start

$ yarn start
Enter fullscreen mode Exit fullscreen mode

Una vez ejecutada la API, si todo sale bien debe ver en su terminal el siguiente mensaje: Lambda server is listening on 9000, abra su navegador y coloque en la URL http://localhost:9000/graphql y esto cargará el GraphQL Playground, debería ver lo siguiente:

playground

Obviamente que el playground estará vacío usted deberá…

2️⃣ BoxShadows.css

Una mini librería CSS de sombras.

Stack:

  • CSS
  • JavaScript

GitHub logo Franqsanz / box-shadows.css

Mini librería de sombras.

GitHub License

BoxShadows.css

header

Mini librería CSS de sombras.

Instalación

npm i box-shadows
Enter fullscreen mode Exit fullscreen mode

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};
`;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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…

3️⃣ Regexs

Un pequeño paquete NPM de expresiones regulares.

Stack:

  • JavaScript

GitHub logo Franqsanz / regexs

Paquete NPM de expresiones regulares.

GitHub License PRs welcome npm npm

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Tipos de expresiones regulares disponibles:

Happy Coding!

Discussion (0)