DEV Community: Satel

How to Cache in Node.js Application

Satel — Mon, 15 May 2023 22:06:36 +0000

How to Cache in Node.js Application

Caching is a technique used to store frequently accessed data in memory, so that it can be retrieved quickly without having to fetch it from the source every time. Caching can significantly improve the performance of your Node.js application, especially if it involves frequently accessed data.

There are several ways to implement caching in a Node.js application. In this article, we will explore some of the most popular methods.

In-Memory Caching

In-memory caching is the simplest form of caching. It involves storing data in memory, which can be accessed quickly without having to fetch it from the source every time. In Node.js, you can use a package like node-cache or memory-cache to implement in-memory caching.

Here's an example of how to use node-cache:

const NodeCache = require('node-cache');
const cache = new NodeCache();

// Set a key-value pair in the cache
cache.set('myKey', 'myValue');

// Get the value for a key from the cache
const value = cache.get('myKey');
console.log(value); // Output: myValue

Distributed Caching

Distributed caching involves storing data across multiple servers, so that it can be accessed quickly from any server. This is useful for applications that are deployed across multiple servers, or for applications that need to handle a large amount of traffic.

In Node.js, you can use a package like redis or memcached to implement distributed caching.

Here's an example of how to use redis:

const redis = require('redis');
const client = redis.createClient();

// Set a key-value pair in the cache
client.set('myKey', 'myValue');

// Get the value for a key from the cache
client.get('myKey', (err, value) => {
  console.log(value); // Output: myValue
});

Caching HTTP Responses

Caching HTTP responses can significantly improve the performance of your Node.js application, especially if it involves frequently accessed data. In Node.js, you can use a package like express-cache-controller or http-cache-middleware to implement caching of HTTP responses.

Here's an example of how to use express-cache-controller:

const express = require('express');
const cacheController = require('express-cache-controller');
const app = express();

app.use(cacheController({
  maxAge: 60 // Cache for 60 seconds
}));

app.get('/my-route', (req, res) => {
  // Generate the response
  const response = { message: 'Hello, world!' };

  // Send the response
  res.json(response);
});

Conclusion

Caching is an important technique to improve the performance of your Node.js application. In this article, we explored some of the most popular methods of caching in Node.js, including in-memory caching, distributed caching, and caching of HTTP responses. By implementing caching in your Node.js application, you can significantly improve its performance and scalability.

ChatGPT Session

Satel — Tue, 21 Mar 2023 21:50:21 +0000

Now, we are talking about the ChatGPT of OpenAI. This is really excellent and funny to work with it.

ChatGPT will help a lot of things for developers as well, and we can build up a great service using it and get from it.

I would like to open a session to discuss how we use ChatGPT in our developer's life.

Hope to hear your thoughts

Using Predicate Combinators in Typescript

Satel — Fri, 24 Jun 2022 17:15:51 +0000

Problem:

Our predicate functions are checking too much and are in charge of more than should:

enum UserRole {
  Administrator = 1,
  Editor = 2,
  Subscriber = 3,
  Writer = 4,
}

interface User {
  username: string;
  age: number;
  role: UserRole;
}

const users = [
  { username: "John", age: 25, role: UserRole.Administrator },
  { username: "Jane", age: 7, role: UserRole.Subscriber },
  { username: "Liza", age: 18, role: UserRole.Writer },
  { username: "Jim", age: 16, role: UserRole.Editor },
  { username: "Bill", age: 32, role: UserRole.Editor },
];

const greaterThen17AndWriterOrEditor = users.filter((user: User) => {
  return (
    user.age > 17 &&
    (user.role === UserRole.Writer || user.role === UserRole.Editor)
  );
});

const greaterThen5AndSubscriberOrWriter = users.filter((user: User) => {
    return user.age > 5 && user.role === UserRole.Writer;
});

Solution:

We have to start using the predicate combinators. It will increase the code readability and resuability.

type PredicateFn = (value: any, index?: number) => boolean;
type ProjectionFn = (value: any, index?: number) => any;

function or(...predicates: PredicateFn[]): PredicateFn {
  return (value) => predicates.some((predicate) => predicate(value));
}

function and(...predicates: PredicateFn[]): PredicateFn {
  return (value) => predicates.every((predicate) => predicate(value));
}

function not(...predicates: PredicateFn[]): PredicateFn {
  return (value) => predicates.every((predicate) => !predicate(value));
}

You can use by combining those.

const isWriter = (user: User) => user.role === UserRole.Writer;
const isEditor = (user: User) => user.role === UserRole.Editor;
const isGreaterThan17 = (user: User) => user.age > 17;
const isGreaterThan5 = (user: User) => user.age > 5;

const greaterThan17AndWriterOrEditor = users.filter(
    and(isGreaterThan17, or(isWriter, isEditor))
);

const greaterThan5AndSubscriberOrWriter = users.filter(
    and(isGreaterThan5, isWriter)
);

Better predicate combinators with factories

Predicate combinators create too many variables, so it’s easy to get lost between these functions. If we use the combinator predicate function only once, then it’s better to have something more generic.

const isWriter = (user: User) => user.role === UserRole.Writer;
const isEditor = (user: User) => user.role === UserRole.Editor;
const isGreaterThan17 = (user: User) => user.age > 17;
const isGreaterThan5 = (user: User) => user.age > 5;

const greaterThan17AndWriterOrEditor = users.filter(
    and(isGreaterThan17, or(isWriter, isEditor))
);

const greaterThan5AndSubscriberOrWriter = users.filter(
    and(isGreaterThan5, isWriter)
);

We can solve this using the combinator predicate factories.

const isRole = (role: UserRole) => 
    (user: User) => user.role === role;

const isGreaterThan = (age: number) =>
    (user: User) => user.age > age;


const greaterThan17AndWriterOrEditor = users.filter(
    and(isGreaterThan(17), or(isRole(UserRole.Writer), isRole(UserRole.Editor)))
);

const greaterThan5AndSubscriberOrWriter = users.filter(
    and(isGreaterThan(5), isRole(UserRole.Writer))

You’ve probably noticed that some function invocation is repeated with the same arguments. The best option will be to mix predicate factories with combinator predicates together. Thus we’ll have the best of both worlds.

const isRole = (role: UserRole) => 
    (user: User) => user.role === role;

const isGreaterThan = (age: number) =>
    (user: User) => user.age > age;

const isWriter = isRole(UserRole.Writer)

const greaterThan17AndWriterOrEditor = users.filter(
    and(isGreaterThan(17), or(isWriter, isRole(UserRole.Editor)))
);

const greaterThan5AndSubscriberOrWriter = users.filter(
    and(isGreaterThan(5), isWriter)
);

In this way, we do fewer repeats and keep the code clean and neat.

Fantastic New way for deep copy of JavaScript Object

Satel — Sat, 11 Jun 2022 04:35:08 +0000

JavaScript has a good way to deep copy of JavaScript Object - structuredClone().

The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.

The method also allows transferable objects in the original value to be transferred rather than cloned to the new object. Transferred objects are detached from the original object and attached to the new object; they are no longer accessible in the original object.

structuredClone(value)
structuredClone(value, transferables)

This function can be used to deep copy JavaScript values. It also supports circular references, as shown below:

// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

console.assert(clone !== original); // the objects are not the same (not same identity)
console.assert(clone.name === "MDN"); // they do have the same values
console.assert(clone.itself === clone); // and the circular reference is preserved

Transferring

Transferable objects (only) can be transferred rather than duplicated in the cloned object, using the optional parameter's transfer value. Transferring makes the original object unusable.

The following code shows how to clone an array and transfer its underlying resources to the new object. On return, the original uInt8Array.buffer will be cleared.

var uInt8Array = new Uint8Array(1024 * 1024 * 16); // 16MB
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[i] = i;
}

const transferred = structuredClone(uInt8Array, { transfer: [uInt8Array.buffer] });
console.log(uInt8Array.byteLength);  // 0

You can clone any number of objects and transfer any subset of those objects. For example, the code below would transfer arrayBuffer1 from the passed in value, but not arrayBuffer2.

const transferred = structuredClone(
   { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
   { transfer: [arrayBuffer1] });

Enjoy Hack!~!

The Complete Road Map for becoming DevOps Engineer

Satel — Thu, 09 Jun 2022 17:02:09 +0000

I have been fooling around to find the complete road map to become DevOps Engineer from Novice.

This is cool one I have found: https://roadmap.sh/devops. Do you agree with this? Or any other relevant solutions?

If you have any suggestions, please comment

Thanks

Varaiants for Drag and Drop in Framer Motion

Satel — Sun, 05 Jun 2022 03:59:12 +0000

With the Framer Motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with Framer Motion.

Variants

We can organize styles with variants.

They let us control animations throughout a component tree by switching to a single animate prop.

Sample:

import React from "react";
import { motion } from "framer-motion";
const variants = {
  active: {
    backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
};
export default function App() {
  return (
    <>
      <motion.div
        style={{ width: 100, height: 100 }}
        variants={variants}
        animate="active"
      />
    </>
  );
}

We create the variants object with some styles we want to apply at various stages of animation.

Then we apply them by passing the variants object as the value of the variants prop.

Then we set animate to 'active' to set the styles when the animation ends to the ones in the active property.

Style

The style prop is like the style prop in React, but it’s enhanced to support motion values and transform values.

Sample:

import React from "react";
import { motion, useMotionValue } from "framer-motion";
export default function App() {
  const x = useMotionValue(0);
  return (
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: "red",
        x,
        opacity: 1,
        scale: 0.5
      }}
    />
  );
}

We pass the x motion value into the style prop so we can set the horizontal position of the div.

Layout Animation

We can create layout animations with Framer Motion.

The layout prop lets us animate an element to its new position when its layout changes.

Sample:

import React from "react";
import { AnimateSharedLayout, motion } from "framer-motion";
const items = [
  { name: "foo", isSelected: true, id: 1 },
  { name: "bar", isSelected: false, id: 2 },
  { name: "baz", isSelected: true, id: 3 }
];
export default function App() {
  return (
    <AnimateSharedLayout>
      {items.map((item) => (
        <motion.li layout key={item.id}>
          {item.name}
          {item.isSelected && <motion.hr layoutId="underline" />}
        </motion.li>
      ))}
    </AnimateSharedLayout>
  );
}

to let us animate the changes in the layout with the AnimateSharedLayout component.

We have the motion.li to animate the li elements when the li layout change.

Drag

We can add drag and drop capabilities to our elements with Framer Motion.

Sample:

import React, { useRef } from "react";
import { motion } from "framer-motion";
export default function App() {
  const constraintsRef = useRef(null);
  return (
    <motion.div
      ref={constraintsRef}
      style={{ background: "green", width: 200, height: 200 }}
    >
      <motion.div
        drag
        dragConstraints={constraintsRef}
        style={{ background: "red", width: 100, height: 100 }}
      />
    </motion.div>
  );
}

We allow the red div to be dragged around within the green div. We do this by assigning a ref to the green div. Then we pass the ref as the value of the dragConstraints prop. The drag prop lets us enable dragging on the red div.

Create Simple Count Down Timer Component

Satel — Mon, 30 May 2022 12:21:16 +0000

It renders a countdown timer that prints a message when it reaches zero.

Use object destructuring to set defaults for the hours, minutes and seconds props.
Use the React.useState() hook to create the time, paused and over state variables and set their values to the values of the passed props, false and false respectively.
Create a method tick, that updates the value of time based on the current value (i.e. decreasing the time by one second).
If paused or over is true, tick will return immediately.
Create a method reset, that resets all state variables to their initial states.
Use the the React.useEffect() hook to call the tick method every second via the use of setInterval() and use clearInterval() to cleanup when the component is unmounted.
Use a to wrap a
element with the textual representation of the components time state variable, as well as two elements that will pause/unpause and restart the timer respectively.
If over is true, the timer will display a message instead of the value of time.

Code

function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
  const [paused, setPaused] = React.useState(false);
  const [over, setOver] = React.useState(false);
  const [time, setTime] = React.useState({
    hours: parseInt(hours),
    minutes: parseInt(minutes),
    seconds: parseInt(seconds)
  });

  const tick = () => {
    if (paused || over) return;
    if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);
    else if (time.minutes == 0 && time.seconds == 0)
      setTime({
        hours: time.hours - 1,
        minutes: 59,
        seconds: 59
      });
    else if (time.seconds == 0)
      setTime({
        hours: time.hours,
        minutes: time.minutes - 1,
        seconds: 59
      });
    else
      setTime({
        hours: time.hours,
        minutes: time.minutes,
        seconds: time.seconds - 1
      });
  };

  const reset = () => {
    setTime({
      hours: parseInt(hours),
      minutes: parseInt(minutes),
      seconds: parseInt(seconds)
    });
    setPaused(false);
    setOver(false);
  };

  React.useEffect(() => {
    let timerID = setInterval(() => tick(), 1000);
    return () => clearInterval(timerID);
  });

  return (
    <div>
      <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes
        .toString()
        .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>
      <div>{over ? "Time's up!" : ''}</div>
      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>
      <button onClick={() => reset()}>Restart</button>
    </div>
  );
}

Now you can use it in your React applications.

ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('root'));

Explain Memoization in a pure Javascript

Satel — Wed, 25 May 2022 13:20:30 +0000

Memoization is the process of caching the output of function calls so that subsequent calls are faster. Calling the function again with the same input will return the cached output without needing to do the calculation again.

Because JavaScript objects behave like associative arrays, they are ideal candidates to act as caches. Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function. However, if the data is not cached, then the function is executed, and the result is added to the cache.

A basic implementation in Javascript looks like this:

const memoize = fn => {
  const cache = new Map()
  return value => {
    const cachedResult = cache.get(value)
    if (cachedResult !== undefined) return cachedResult
    const result = fn(value)
    cache.set(value, result)
    return result
  }
}

Note

The above technique returns a unary function even if the function can take multiple arguments.
The first function call will be slower than usual because of the overhead created by checking if a cached result exists and setting a result before returning the value.
Memoization increases performance on subsequent function calls but still needs to do work on the first call.

Create Simple Tab Component with Pure React

Satel — Tue, 24 May 2022 09:08:28 +0000

Let's create Tabbed menu and view component with pure React.

Let's define a TabItem component, pass it to the Tab and remove unnecessary nodes expect for TabItem by identifying the function's name in props.children. Use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
And use Array.prototype.map on the collected nodes to render the tab-menu and tab-view. Define changeTab, which will be executed when clicking a <button> from the tab-menu. changeTab executes the passed callback, onTabClick and updates bindIndex, which in turn causes a re-render, evaluating the style and className of the tab-view items and tab-menu buttons according to their index.

/* App.css */
.tab-menu > button {
  cursor: pointer;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.tab-menu > button.focus {
  border-bottom: 2px solid #007BEF;
}
.tab-menu > button:hover {
  border-bottom: 2px solid #007BEF;
}

// Tabs.jsx
function TabItem(props) {
  return <div {...props} />;
}

function Tabs(props) {
  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
  const changeTab = newIndex => {
    if (typeof props.onTabClick === "function") props.onTabClick(newIndex);
    setBindIndex(newIndex);
  };
  const items = props.children.filter(item => item.type.name === "TabItem");

  return (
    <div className="wrapper">
      <div className="tab-menu">
        {items.map(({ props: { index, label } }) => (
          <button
            onClick={() => changeTab(index)}
            className={bindIndex === index ? "focus" : ""}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="tab-view">
        {items.map(({ props }) => (
          <div
            {...props}
            className="tab-view_item"
            key={props.index}
            style={{ display: bindIndex === props.index ? "block" : "none" }}
          />
        ))}
      </div>
    </div>
  );
}

Now you can use Tabs Component to render in your React application.

ReactDOM.render(
  <Tabs defaultIndex="1" onTabClick={console.log}>
    <TabItem label="A" index="1">
      Lorem ipsum
    </TabItem>
    <TabItem label="B" index="2">
      Dolor sit amet
    </TabItem>
  </Tabs>,
  document.getElementById("root")
);

Thanks

Creating Custom File Drag and Drop Component

Satel — Sat, 21 May 2022 09:56:43 +0000

It renders a file drag and drop component for a single file.

Create a ref called dropRef for this component. Use the React.useState() hook to create the drag and filename variables, initialized to false and '' respectively. The variables dragCounter and drag are used to determine if a file is being dragged, while filename is used to store the dropped file's name.

Create the handleDrag, handleDragIn, handleDragOut and handleDrop methods to handle drag and drop functionality, bind them to the component's context. Each of the methods will handle a specific event, the listeners for which are created and removed in the React.useEffect() hook and its attached cleanup() method. handleDrag prevents the browser from opening the dragged file, handleDragIn and handleDragOut handle the dragged file entering and exiting the component, while handleDrop handles the file being dropped and passes it to props.handleDrop. Return an appropriately styled <div> and use drag and filename to determine its contents and style. Finally, bind the ref of the created <div> to dropRef.

FileDrop.jsx

function FileDrop(props) {
  const [drag, setDrag] = React.useState(false);
  const [filename, setFilename] = React.useState('');
  let dropRef = React.createRef();
  let dragCounter = 0;

  const handleDrag = e => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragIn = e => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter++;
    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
  };

  const handleDragOut = e => {
    e.preventDefault();
    e.stopPropagation();
    dragCounter--;
    if (dragCounter === 0) setDrag(false);
  };

  const handleDrop = e => {
    e.preventDefault();
    e.stopPropagation();
    setDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      props.handleDrop(e.dataTransfer.files[0]);
      setFilename(e.dataTransfer.files[0].name);
      e.dataTransfer.clearData();
      dragCounter = 0;
    }
  };

  React.useEffect(() => {
    let div = dropRef.current;
    div.addEventListener("dragenter", handleDragIn);
    div.addEventListener("dragleave", handleDragOut);
    div.addEventListener("dragover", handleDrag);
    div.addEventListener("drop", handleDrop);
    return function cleanup() {
      div.removeEventListener("dragenter", handleDragIn);
      div.removeEventListener("dragleave", handleDragOut);
      div.removeEventListener("dragover", handleDrag);
      div.removeEventListener("drop", handleDrop);
    };
  });

  return (
    <div
      ref={dropRef}
      className={
        drag ? "filedrop drag" : filename ? "filedrop ready" : "filedrop"
      }
    >
      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}
    </div>
  );
}

Style.css

.filedrop {
  min-height: 120px;
  border: 3px solid #D3D3D3;
  text-align: center;
  font-size: 24px;
  padding: 32px;
  border-radius: 4px;
}

.filedrop.drag {
  border: 3px dashed #1E90FF;
}

.filedrop.ready {
  border: 3px solid #32CD32;
}

App.jsx

ReactDOM.render(<FileDrop handleDrop={console.log}/>, document.getElementById('root'));

Please enjoy your custom File DnD Component.

Animated Carousel with Framer Motion

Satel — Fri, 20 May 2022 09:04:08 +0000

I'd like to create Carousel component with Framer motion in React application.

Prerequisites:

Knowledge of Javascript(ES6)
Knowledge of HTML and CSS
Basic knowledge of React

Creating React Application and Installing Npm Modules

In your bash, or terminal run the below commands

npx create-react-app carousel

cd carousel && npm install  framer-motion @popmotion/popcorn

Update the App Component

import React from "react";
import { useState } from "react";
import { motion, AnimateSharedLayout } from "framer-motion";
import Carousel from "./Carousel";
import "./styles.css";

const Pagination = ({ currentPage, setPage }) => {
  // Wrap all the pagination Indicators
  // with AnimateSharedPresence
  // so we can detect when Indicators
  // with a layoutId are removed/added
  return (
    <AnimateSharedLayout>
      <div className="Indicators">
        {pages.map((page) => (
          <Indicator
            key={page}
            onClick={() => setPage(page)}
            isSelected={page === currentPage}
          />
        ))}
      </div>
    </AnimateSharedLayout>
  );
};

const Indicator = ({ isSelected, onClick }) => {
  return (
    <div className="Indicator-container" onClick={onClick}>
      <div className="Indicator">
        {isSelected && (
          // By setting layoutId, when this component
          // is removed and a new one is added elsewhere,
          // the new component will animate out from the old one.
          <motion.div className="Indicator-highlight"
                      layoutId="highlight" />
        )}
      </div>
    </div>
  );
};

const pages = [0, 1, 2, 3, 4];

const App = () => {
  /* We keep track of the pagination direction as well as
   * current page, this way we can dynamically generate different
   * animations depending on the direction of travel */
  const [[currentPage, direction], setCurrentPage] = useState([0, 0]);

  function setPage(newPage, newDirection) {
    if (!newDirection) newDirection = newPage - currentPage;
    setCurrentPage([newPage, newDirection]);
  }

  return (
    <>
      <Carousel
        currentPage={currentPage}
        direction={direction}
        setPage={setPage}
      />
      <Pagination currentPage={currentPage}
                  setPage={setPage} />
    </>
  );
};

export default App;

Creating Carousel Component

Add Carousel.js in the src folder of the App, and update the code with below.

import React from "react";
import { useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { wrap } from "@popmotion/popcorn";

// Variants in framer-motion define visual states
// that a rendered motion component can be in at
// any given time.

const xOffset = 100;
const variants = {
  enter: (direction) => ({
    x: direction > 0 ? xOffset : -xOffset,
    opacity: 0
  }),
  active: {
    x: 0,
    opacity: 1,
    transition: { delay: 0.2 }
  },
  exit: (direction) => ({
    x: direction > 0 ? -xOffset : xOffset,
    opacity: 0
  })
};

const pages = [0, 1, 2, 3, 4];

const Carousel = ({ currentPage, setPage, direction }) => {
  /* Add and remove pages from the array to checkout
     how the gestures and pagination animations are
     fully data and layout-driven. */
  const hasPaginated = useRef(false);

  function detectPaginationGesture(e, { offset }) {
    if (hasPaginated.current) return;
    let newPage = currentPage;
    const threshold = xOffset / 2;

    if (offset.x < -threshold) {
      // If user is dragging left, go forward a page
      newPage = currentPage + 1;
    } else if (offset.x > threshold) {
      // Else if the user is dragging right,
      // go backwards a page
      newPage = currentPage - 1;
    }

    if (newPage !== currentPage) {
      hasPaginated.current = true;
      // Wrap the page index to within the
      // permitted page range
      newPage = wrap(0, pages.length, newPage);
      setPage(newPage, offset.x < 0 ? 1 : -1);
    }
  }

  return (
    <div className="slider-container">
      <AnimatePresence
        // This will be used for components to resolve
        // exit variants. It's necessary as removed
        // components won't rerender with
        // the latest state (as they've been removed)
        custom={direction}>
        <motion.div
          key={currentPage}
          className="slide"
          data-page={currentPage}
          variants={variants}
          initial="enter"
          animate="active"
          exit="exit"
          drag="x"
          onDrag={detectPaginationGesture}
          onDragStart={() => (hasPaginated.current = false)}
          onDragEnd={() => (hasPaginated.current = true)}
          // Snap the component back to the center
          // if it hasn't paginated
          dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
          // This will be used for components to resolve all
          // other variants, in this case initial and animate.
          custom={direction}
        />
      </AnimatePresence>
    </div>
  );
};

export default Carousel;

Styling

Update the App.css with the simple styling for carousel.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #09a960;
}

* {
  box-sizing: border-box;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.slider-container {
  position: relative;
  width: 600px;
  height: 600px;
}

.slide {
  border-radius: 5px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* position of indicator container */
.Indicators {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.Indicator-container {
  padding: 20px;
  cursor: pointer;
}

.Indicator {
  width: 10px;
  height: 10px;
  background: #fcfcfc;
  border-radius: 50%;
  position: relative;
}

.Indicator-highlight {
  top: -2px;
  left: -2px;
  background: #09f;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
}

Run the App

npm start

You could see simple animated Carousel in your localhost:3000.

Thanks

Different ways to create an Object in Javascript

Satel — Thu, 19 May 2022 13:00:30 +0000

There are several ways to create an object in Javascript. Let's go through one by one.

Object literal

Often used to store one occurrence of data

const person = {
  name: "John",
  age: 50,
  birthday() {
    this.age++
  }
}
person.birthday() // person.age === 51

Constructor

Often used when you need to create multiple instance of an object, each with their own data that other instance of the class cannot affect. The new operator must be used before invoking the constructor or the global object will be mutated.

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.birthday = function() {
  this.age++
}
const person1 = new Person("John", 50)
const person2 = new Person("Sally", 20)
person1.birthday() // person1.age === 51
person2.birthday() // person2.age === 21

Factory function

Creates a new object similar to a constructor, but can store private data using a closure. There is also no need to use new before invoking the function or the this keyword. Factory functions usually discard the idea of prototypes and keep all properties and methods as own properties of the object.

const createPerson = (name, age) => {
  const birthday = () => person.age++
  const person = { name, age, birthday }
  return person
}
const person = createPerson("John", 50)
person.birthday() // person.age === 51

Object.create()

Sets the prototype of the newly created object

const personProto = {
  birthday() {
    this.age++
  }
}
const person = Object.create(personProto)
person.age = 50
person.birthday() // person.age === 51

A second argument can also be supplied to Object.create() which acts as a descriptor for the new properties to be defined.

Object.create(personProto, {
  age: {
    value: 50,
    writable: true,
    enumerable: true
  }
})

Conclusion

Prototypes are objects that other objects inherit properties and methods from.
Factory functions offer private properties and methods through a closure but increase memory usage as a tradeoff, while classes do not have private properties or methods but reduce memory impact by reusing a single prototype object.