DEV Community: jesuscovam

React Parallax effect with Framer-Motion

jesuscovam — Sun, 04 Apr 2021 18:13:42 +0000

Let's recreate the example from https://usehooks.com/useOnScreen/ but adding framer-motion for a parallax effect

The first thing will be installing the packages. For simplicity, I'm going to use the react-intersection-observer, that uses the IntersectionObserver API.

install

npm i framer-motion react-intersection-observer

The first look at our component will be 2 divs with a hight of 100vh each, and any background you like to make a differentiation.

export default function Home() {

  return (
    <div>
      <div style={{ height: "100vh" }}>
        <h1>Scroll down to next section 👇</h1>
      </div>
      <div style={{ height: "100vh", backgroundColor: "#23cebd" }}></div>
    </div>
  );
}

Let's add the div with an image that we'd like to see move when we scroll it into the viewport.

//* everything until here is the same *//
<div style={{ height: "100vh", backgroundColor: "#23cebd" }}>
  <div style={{ marginLeft: "50px" }}>
    <h1>Hey I'm on the screen</h1>
    <img style={{ borderRadius: "30px" }}
      alt="ralph from the simpsons waving his hand"
      src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif"
    />
  </div>
</div>

For the moment is a static image, we want it to appear when as a DOM element enters in the screen. For that we are going to use react-intersection-observer, let's update our code.

import { useInView } from "react-intersection-observer";

export default function Home() {
  const [ref, isVisible] = useInView({ threshold: 0.7 });
  return (
    <div>
      <div style={{ height: "100vh" }}>
        <h1>Scroll down to next section 👇</h1>
      </div>
      <div ref={ref} style={{ height: "100vh", backgroundColor: "#23cebd" }}>
        {isVisible && (
          <div style={{ marginLeft: "50px" }}>
            <h1>Hey I'm on the screen</h1>
            <img
              style={{ borderRadius: "30px" }}
              alt="ralph from the simpsons waving his hand"
              src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif"
            />
          </div>
        )}
      </div>
    </div>
  );
}

the useInView will manage the communication with the IntersectionObserver API, we'll take from it the ref to be placed on the DOM element we want to observe and a boolean value for us to use. It will only take a threshold or a rootMargin, any of those will work and the propuse is to decide how much % of the DOM element we want to scroll before switching the isVisible boolean from false to true, in this case we wrote 0.7 that's equivalent to 70% of the DOM element has to be on screen to change our boolean.

Bringing framer-motion

For the moment our element is just appearing on the screen, that could be rude. Let's update our code to make it slide from the left.

import { useInView } from "react-intersection-observer";
import { motion } from "framer-motion";

export default function Home() {
  const [ref, isVisible] = useInView({ threshold: 0.7 });
  const variants = {
    visible: {
      opacity: 1,
      x: 0,
    },
    hidden: {
      opacity: 0,
      x: -100,
    },
  };
  return (
    <div>
      <div style={{ height: "100vh" }}>
        <h1>Scroll down to next section 👇</h1>
      </div>
      <div style={{ height: "100vh", backgroundColor: "#23cebd" }}>
        <motion.div
          ref={ref}
          variants={variants}
          animate={isVisible ? "visible" : "hidden"}
          transition={{ duration: 0.5, ease: "easeOut" }}
          style={{ marginLeft: "50px" }}
        >
          <h1>Hey I'm on the screen</h1>
          <img
            style={{ borderRadius: "30px" }}
            alt="ralph from the simpsons waving his hand"
            src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif"
          />
        </motion.div>
      </div>
    </div>
  );
}

This would be the whole example, we did one important change besides adding the framer-motion code, changing the ref from the div with the 100vh to the div that wraps the text and the image we want to slide in.

Thank you for your time
My name is Jesus Cova, I'm a full-stack developer based in Quintana Roo, México.

My JavaScript experience

jesuscovam — Sun, 04 Apr 2021 01:42:46 +0000

JavaScript is a unique language in the history of programming languages, it has never been a language that would return so much opportunity for a developer to master. You can find a job in almost any tech area with it, here I'll lay down the paths I took that worker the best for my environment.

FrontEnd(UI) 📱 : There are multiples libraries in JavaScript for making user interfaces. I started with Vue.js, but it didn't take me much time to switch to React.js, the reason behind this change was the market opportunity for React is bigger, and Next.js (a meta framework on top of React) makes you look so good with little effort, AND the biggest JS community for mobile native development is also written in React, React Native.

Backend 🛠 : I do backend serverless, which means I don't rent a server to write code in it, I just focus on my business logic and ship that code to AWS, then expose over a GraphQL API, with App Sync, and use other services to give full security to my apps, like Authentication, Object storages, etc. The key difference is that as I am a single developer for most of my projects, I get to delegate the maintenance of the servers to a company for a really good price, and I just get to write the code that makes the apps work.

Extra👽 : There's also worth the effort to do geeky stuff with the options in the language, recently the JavaScript ecosystem is going to a better and faster compile direction, and services like Svelte are great to keep an eye on, also Deno, an alternative to Node (our main language for backend in JavaScript).

Conclusion 🔚 : JavaScript is ultra-friendly, the language has evolved in something reliable, there are a lot of opportunities and you just have to choose in an area that you like the most to specialize, I would open up that for the last year I mainly focus on learning to ship fast and big codebases, so I focused a lot on services like GraphQL, Next.js and AWS to faster my development process, but I lacked expressiveness on UI, so I'm looking forward get better at my CSS animations and transitions, I just prioritized the other for a time as I mostly do the full-stack role.

full image

Mi error al usar Cognito (AWS).

jesuscovam — Tue, 30 Mar 2021 02:31:24 +0000

TL;DR: no uses window.localStorage.clear()

He invertido mucho tiempo en un proyecto con GraphQL donde la autenticación es manejada con Cognito, pero la base del proyecto solo se fundamentó en usar login con correo, nunca me tomé la molestia de hacer OAuth (porque nunca lo había hecho y ya tuve bastantes batallas con la documentación de Amplify por mi propia cuenta siendo primerizo con este backend).

Usar autenticación con Cognito y GraphQL es excelente si utilizas la API de App Sync también, te permite ponerle un candado personalizado a la API por default, luego escogiendo cuales tablas de la base de datos tienen acceso público y cuáles tienen acceso solo con login.

Como lidiar con OAuth y Cognito

Como todo el tiempo de desarrollo previo no tuve la necesidad de usar un link que sacará a los usuarios del proyecto, nunca me vi en la necesidad de usar la localStorage, con GraphQL me bastaba conseguir la información que necesitaba para que la página en ruta funcionara. Pero cuando agregué OAuth con Google, el usuario sale de tu proyecto y luego regresa a tu ruta inicial /, (al menos porque el URI de return según Google, no puede tener un /, es decir esto www.ejemplo.com/checkLogin ❌, solo esto www.ejemplo.com)

Entonces antes de hacer el login con google, el programa escribe window.localStorage.setItem('social', 'SignUp')
y cuando regresa al landing page, revisa si hay un usuario conectado && window.localStorage.getItem('social') === 'SignUp') cambia al usuario de ruta para que termine de crear su perfil.

El Problema (O mi novatada)

Si esta evaluación sobre 'social' === 'SignUp' es falsa, estaba ejecutando window.localStorage.clear() y esto elimina el usuario de Amazon Cognito del navegador 😅

Conclusión

No escribas window.localStorage.clear() mejor reemplaza el valor como window.localStorage.setItem('social', 'INIT') porque no sabes que otros paquetes de npm están usando la localStorage.

Add the delivery of products by seller🛍

jesuscovam — Tue, 10 Nov 2020 13:48:53 +0000

I was recently asked for a codebase to make a shopping cart where the shipping price is the most expensive shipping price for the products by the same seller + the most expensive price from the other sellers.

For example, if there are 4 products in the cart, and 3 are from 1 seller, calculate the most expensive delivery from that seller + the delivery from the other seller.

the delivery category could be one of these
moto | auto | van

The price for auto and van is the same

Code

A look at the final composed function👀

const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

The first step is to group the products by category, for this case is the sellerID

const groupByCategory = (category: string) => (products: { item: Product }[]) => {
    return products.reduce((acc, { item }) => {
      return (acc = { ...acc, [item[category]]: [...(acc[item[category]] || []), item] })
    }, {})
  }

This function will return a tree of sellers with products

This DB only has 1 seller, so we are going to add some noise to test the function

Add noise 🔈

 const addNoise = (nodes) => ({
    ...nodes,
    bbc: [
      { id: 10, title: 'jaja', delivery: 'moto' },
      { id: 20, title: 'jeje', delivery: 'auto' },
    ],
    ccc: [{ id: 14, title: 'jiji', delivery: 'auto' }],
  })

Map over the products of each seller 🛍

What matters from this function is to return the most expensive delivery for each tree/node/seller.

this function is composed of 3 more that apply only to products of each tree/node/seller

mapObjIndexed(mapOverProducts)

where mapOverProducts:

  const mapOverProducts = compose(
    reduce(deliveryReducer, 0), 
    setOf, 
    map(mapOverCategory('delivery'))

  )

mapOverCategory

  const mapOverCategory = (category: string) => (arr) => arr[category]

mapOverCategory('delivery') will return [moto, auto, ...NDeliveries] for each node

setOf

will return the same array but avoiding repetitive delivery methods

const setOf = (values) => [...new Set(values)]

reduce(deliveryReducer, 0) ➕

As we only have 3 possible scenarios, we are going to use a reducer.

const deliveryReducer = (state, action) => {
    switch (action) {
      case 'moto':
        return stateOverNumber(1)(state)

      case 'auto':
        return stateOverNumber(2)(state)

      case 'van':
        return stateOverNumber(3)(state)

      default:
        return state
    }
  }

Where stateOverNumber(n)(state) ❔

  const stateOverNumber = (num: number) => (state: number) => 
    (state < num ? num : state)

This is the moment we obtain which delivery is the most expensive from each node

At this point, we continue with the first composed function as we ended the work inside each node of products by a seller.

It's time for values

const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

Values

We no longer need the id of each seller, only its biggest delivery method

map(converToMoney) 💰

const convertToMoney = (deliveryTypes: number) => {
    if (deliveryTypes === 1) {
      return 2.9
    } else {
      return 4.9
    }
  }

1 being 'moto' and for the moment the price for the other methods is the same.

reduce((a, b: number) => a + b, 0) ➕

The las function adds the value of all the possible prices by a node 😁

Now, let's make an abstraction

Ok spoiler alert, I work with react ⚛️

We are going to abstract all of this logic in a hook that only takes as an argument the category for which we are going to split the nodes

const useAbstraction = (category: string) => {
  const groupByCategory = (category: string) => (products: { item: Product }[]) => {
    return products.reduce((acc, { item }) => {
      return (acc = { ...acc, [item[category]]: [...(acc[item[category]] || []), item] })
    }, {})
  }

  const mapOverCategory = (category: string) => (arr) => arr[category]
  const setOf = (values) => [...new Set(values)]

  const stateOverNumber = (num: number) => (state: number) => (state < num ? num : state)

  const deliveryReducer = (state, action) => {
    switch (action) {
      case 'moto':
        return stateOverNumber(1)(state)

      case 'auto':
        return stateOverNumber(2)(state)

      case 'van':
        return stateOverNumber(3)(state)

      default:
        return state
    }
  }
  const mapOverProducts = compose(
    reduce(deliveryReducer, 0),
    setOf,
    map(mapOverCategory('delivery'))
  )
  const addNoise = (sellers) => ({
    ...sellers,
    bbc: [
      { id: 10, title: 'jaja', delivery: 'moto' },
      { id: 20, title: 'jeje', delivery: 'auto' },
    ],
    ccc: [{ id: 14, title: 'jiji', delivery: 'auto' }],
  })

  const convertToMoney = (deliveryTypes: number) => {
    if (deliveryTypes === 1) {
      return 2.9
    } else {
      return 4.9
    }
  }

  const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

  return { composeProcess }
}

And now

  const { composeProcess } = useAbstraction('sellerID')
  const delivery = useCallback( () 
   => composeProcess(state.products)
   , [state.products])

Outro

Probably there are better ways to give order hierarchy to the delivery methods, but this way works and it could be adapted to even group by cities or states.

My name is Jesus Cova, I work with the team at midnightouizard🧙🏼‍♂️ and you can contact me on twitter or jesuscovam@gmail.com

Thanks for your time!

Sumar el delivery de productos por vendedor🛍

jesuscovam — Tue, 10 Nov 2020 02:39:44 +0000

Recientemente me pidieron en una codebase qué mantengo hacer un carrito de compras donde el precio del envío sea el precio de envío más caro por productos de un mismo vendedor + el precio más caro de los otros vendedores.

Ejemplo, si en el carrito hay 4 productos, y 3 son de 1 vendedor, calcular el delivery mas costoso de ese vendedor + el delivery del otro vendedor.

La categoría de delivery puede ser
moto | auto | van

El precio de auto y van para este uso es el mismo.

Codigo

Este es un vistaso a la composición final👀

const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

El primer paso es agrupar los productos por categoría, en este caso la categoría será sellerID

const groupByCategory = (category: string) => (products: { item: Product }[]) => {
    return products.reduce((acc, { item }) => {
      return (acc = { ...acc, [item[category]]: [...(acc[item[category]] || []), item] })
    }, {})
  }

Esta función nos va a devolver un árbol de vendedores con productos

Esta base de datos solo tiene un vendedor, entonces agregaremos un poco de ruido para probar esta función

Agregar ruido 🔈

 const addNoise = (nodes) => ({
    ...nodes,
    bbc: [
      { id: 10, title: 'jaja', delivery: 'moto' },
      { id: 20, title: 'jeje', delivery: 'auto' },
    ],
    ccc: [{ id: 14, title: 'jiji', delivery: 'auto' }],
  })

Map sobre los productos de cada vendedor 🛍

Lo que nos importa de toda esta función es calcular el delivery más costoso de cada categoria/nodo/vendedor

La siguiente linea es una composición de 3 funciones para conseguir ese delivery más costoso.

mapObjIndexed(mapOverProducts)

Donde mapOverProducts:

  const mapOverProducts = compose(
    reduce(deliveryReducer, 0), 
    setOf, 
    map(mapOverCategory('delivery'))

  )

mapOverCategory

  const mapOverCategory = (category: string) => (arr) => arr[category]

mapOverCategory('delivery') va a devolver [moto, auto, ...NDeliveries] por cada vendedor

setOf

va a devolver el mismo arreglo quitando los deliveries repetidos

const setOf = (values) => [...new Set(values)]

reduce(deliveryReducer, 0) ➕

Ok aquí tenemos 3 escenarios posibles, entonces por comodidad lo manejé con un reducer.

const deliveryReducer = (state, action) => {
    switch (action) {
      case 'moto':
        return stateOverNumber(1)(state)

      case 'auto':
        return stateOverNumber(2)(state)

      case 'van':
        return stateOverNumber(3)(state)

      default:
        return state
    }
  }

Donde stateOverNumber(n)(state) ❔

  const stateOverNumber = (num: number) => (state: number) => 
    (state < num ? num : state)

Esta es la pieza clave que da categoría a cada producto, lo demás fue llegar aquí.

En este punto podemos regresar a la primera función compuesta, ya terminamos de mapear sobre los productos de cada nodo/vendedor

Recordando que viene values

const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

Values

Ya no necesitamos el id del vendedor, solo sus valores.

map(converToMoney) 💰

const convertToMoney = (deliveryTypes: number) => {
    if (deliveryTypes === 1) {
      return 2.9
    } else {
      return 4.9
    }
  }

1 siendo moto, y por el momento los otros valores tienen el mismo precio

reduce((a, b: number) => a + b, 0) ➕

La última función nos da la suma de estos valores para tener la suma del delivery más costoso de cada vendedor 😁

Listo, vamos a hacer una abstracción

Ok spoiler alert: uso react. ⚛️

voy a abstraer toda esta lógica en un custom Hook que solo tome la categoría y sobre la cual queremos agrupar los productos

const useAbstraction = (category: string) => {
  const groupByCategory = (category: string) => (products: { item: Product }[]) => {
    return products.reduce((acc, { item }) => {
      return (acc = { ...acc, [item[category]]: [...(acc[item[category]] || []), item] })
    }, {})
  }

  const mapOverCategory = (category: string) => (arr) => arr[category]
  const setOf = (values) => [...new Set(values)]

  const stateOverNumber = (num: number) => (state: number) => (state < num ? num : state)

  const deliveryReducer = (state, action) => {
    switch (action) {
      case 'moto':
        return stateOverNumber(1)(state)

      case 'auto':
        return stateOverNumber(2)(state)

      case 'van':
        return stateOverNumber(3)(state)

      default:
        return state
    }
  }
  const mapOverProducts = compose(
    reduce(deliveryReducer, 0),
    setOf,
    map(mapOverCategory('delivery'))
  )
  const addNoise = (sellers) => ({
    ...sellers,
    bbc: [
      { id: 10, title: 'jaja', delivery: 'moto' },
      { id: 20, title: 'jeje', delivery: 'auto' },
    ],
    ccc: [{ id: 14, title: 'jiji', delivery: 'auto' }],
  })

  const convertToMoney = (deliveryTypes: number) => {
    if (deliveryTypes === 1) {
      return 2.9
    } else {
      return 4.9
    }
  }

  const composeProcess = compose(
    reduce((a, b: number) => a + b, 0),
    map(convertToMoney),
    values,
    mapObjIndexed(mapOverProducts),
    addNoise,
    groupByCategory(category)
  )

  return { composeProcess }
}

Y ahora solo usamos

  const { composeProcess } = useAbstraction('sellerID')
  const delivery = useMemo( () 
   => composeProcess(state.products)
   , [state.products])

Outro

Probablemente pueda mejorar el reducer, pero ya esto soporta la posibilidad de agrupar en un futuro por ciudad o estado.

Mi nombre es Jesus Cova, trabajo con el equipo de midnightouizard🧙🏼‍♂️ y me pueden contactar en twitter o en jesuscovam@gmail.com

¡Gracias por tu tiempo!

Hacer === Function // Que hago === Data

jesuscovam — Thu, 01 Oct 2020 18:57:03 +0000

Me gusta la idea de que mis funciones se conceptualizan de manera general para que puedan ser usadas en diferentes casos especificos. Resulta que el uso que le doy a algo que tiene nombre, es solo un uso que puede ser un termino diferente para otra persona. La capacidad de desconceptualizar el termino con la acción, libera a la acción de ser reutilizada en más maneras, porque ahora ya no tengo que HacerX(), HacerY(), HacerZ(), solo tengo que Hacer(Algo).

Anatomy of a reusable component in React

jesuscovam — Thu, 02 Jul 2020 00:53:43 +0000

Hi there, I'm going to explain you how to decompose into peaces a component, like the one I'm using right now.

The component will have several selects, the goal is to use the same select component with different parameters, so we actually do ourselves the favor of not having to write the same test more than once and reduce our codebase.

Imports

Imports at the first lines of every js file is a thumb rule, I've seen people using dinamic imports but... well I haven't have the use case for now. So we'll write them at the beginning.

Component Declaration

Here is where the composition begins.

Declaration

we declare the component as a function or a const, I prefer const so I have my chance of a 1 line declaration with return.

Parameters

the parameters inside the ({ }) have general names, that's because we plan to use this component for different types of data that fit the description. This case is the already selected names of descriptive items that create a new pool in the database.

Logic

This function "useFetchData" will fetch some data from the database (in my case is firestore). And will update the state, from this state we can part to the UI section of this component.

Return (UI)

This is it, here's were we actually serve some UI to the app. We'll use some already written/tested components from @material-ui, which gets really mad if you don't control a form component, so we are going to use the controlledValue state and onChange method written in the component declaration.

< Select >some some < /Select >

The select tag will display in a dropdown style N options we write inside them, as we are using react and plan to make this component reusable, we are going to display the options from the recently updated state that fit the collection written in the composition of this component.

That's it

We did it, we wrote a reusable component in React.

Full Component

First Picture

Thanks for your time!

If you want to chat about javascript || apps, please, feel free to write me a message✌️

Jesus Cova
Full Stack Developer
jesusc.dev
twitter