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

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

Fruits API

Open in Visual Studio Code Netlify Status License License GitHub Pull Requests GitHub contributors Open Source Love made-with-javascript

Other Language


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

  1. Clone repository:
git clone https://github.com/Franqsanz/fruits-api.git
Enter fullscreen mode Exit fullscreen mode
  1. Enter to the repository directory:
cd fruits-api
Enter fullscreen mode Exit fullscreen mode
  1. Install all dependencies:
npm install

# Or with yarn
yarn
Enter fullscreen mode Exit fullscreen mode
  1. Once all the dependencies are installed run the following command:
npm start

yarn start
Enter fullscreen mode Exit fullscreen mode
  1. Run Testing (optional):
npm test

yarn test
Enter fullscreen mode Exit fullscreen mode

As an alternative, you can use Docker

  1. Open your terminal/command line
  2. Run docker-compose up

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

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!

Top comments (0)