Prototypal Inheritance in JavaScript

Edet John — Fri, 02 Feb 2024 10:59:35 +0000

JavaScript is a prototype-based language, which means objects can serve as prototypes for other objects. Each object in JavaScript has a prototype, and it inherits properties and methods from that prototype.

Object Prototype

Every object in JavaScript is linked to a prototype object. When you create an object, JavaScript automatically attaches a special property called proto to it, pointing to its prototype.

const myObject = {};
console.log(myObject.__proto__); // Outputs the prototype of myObject

Prototype Chain

Objects in JavaScript form a chain, known as the prototype chain. If a property or method is not found on an object, JavaScript looks up the prototype chain until it finds the property or reaches the end of the chain (usually the Object prototype).
Creating objects with prototypes

// Creating a prototype object
const animalPrototype = {
  speak: function() {
    console.log("Some generic sound");
  }
};

// Creating an object using the prototype
const dog = Object.create(animalPrototype);
dog.speak(); // Outputs "Some generic sound"

In this example, dog is created with animalPrototype as its prototype. It inherits the speak method from animalPrototype.

Constructor Functions:

// Constructor function
function Animal() {}

// Adding a method to the prototype of the constructor
Animal.prototype.speak = function() {
  console.log("Some generic sound");
};

// Creating an instance
const cat = new Animal();
cat.speak(); // Outputs "Some generic sound"

Here, Animal is a constructor function, and instances created with new Animal() inherit from Animal.prototype.

Prototypal inheritance is a fundamental concept in JavaScript that allows objects to inherit properties and methods from other objects. Here's a breakdown :

Prototype: Think of a prototype as a blueprint for creating objects. Every object has a prototype, and it serves as a template for the object's properties and methods.
Prototype Chain: Objects are linked together in a chain, forming the prototype chain. If a property or method is not found on an object, JavaScript looks up the chain until it finds the property or reaches the end.
Creating Objects with Prototypes: You can create objects directly using Object.create(prototype) or use constructor functions. Objects created with the same prototype share common functionality.
Constructor Functions: Constructor functions are a way to create objects with a shared prototype. They serve as a template for creating multiple instances with similar properties and methods.

React Tilt With React JS and Tailwind CSS

Edet John — Tue, 30 Jan 2024 14:47:17 +0000

React Tilt is a cool tool that adds movement and animation to elements on your website. It makes things look more interesting by giving them a floating and tilting effect. It’s easy to use and brings a touch of magic to your apps.

Getting Started

Create new react app using vite and add tailwind css. As the next step add react tilt:

npm i react-tilt

React Tilt Options

Here are configuration options for React tilt package:

Reverse: Determines whether the tilt direction is reversed or not.
Max: Sets the maximum tilt rotation in degrees. • perspective: Adjusts the transform perspective, influencing the intensity of the tilt effect.
Scale: Specifies the scale of the elements, allowing them to appear larger or smaller.
Speed: Controls the speed of the enter/exit transition, determining how quickly the tilt effect occurs.
Transition: Enables or disables smooth transitions on enter/exit.
Axis: Defines which axis (X or Y) should be disabled for tilting.
Reset: Determines whether the tilt effect should be reset on exit or persist.
Easing: Specifies the easing function for enter/exit transitions, influencing the smoothness of the animation.

Tilt options

In card.jsx file, define some options for the card component to work with react tilt. For this tutorial we will be using the default options but feel free to checkout the custom ones or to create new ones on your own.

import { Tilt } from 'react-tilt'

  const defaultOptions = {
    reverse: false,
    max: 35,
    perspective: 1000,
    scale: 1.1,
    speed: 1000,
    transition: true,
    axis: null,
    reset: true,
    easing: "cubic-bezier (.03,.98,.52,.99)",
  }

  const customOptions = {
    reverse: true,
    max: 45,
    perspective: 1500,
    scale: 1.2,
    speed: 2000,
    transition: true,
    axis: "X",
    reset: false,
    easing: "cubic-bezier(.2, .8, .3, 1)"
  }

Card JSX

Now let's take a look a the card component itself. It uses Tilt component as a wrapper from react tilt and receives props: image, title, description from the App component.

const Card = {{image, title, description}) => { return (
  <Tilt options={defaultOptions)>
    <div className="relative w-64 h-80 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg shadow-md rounded-xl overflow-hidden"> <img src=(image) alt={title}
    className="w-full h-48 object-cover" /> 
      <div className="absolute bottom-0 left-0 right-0 p-4
      text-white">
        <h2 className="text-xl font-bold mb-2">
        {title}</h2>
        <p className="text-gray-200">
        {description}</p>
      </div>
    </div>
  </Tilt>
}
export default Card;

App JSX

Finally let's have a look at the App component
code:

import bg from './assets/bg.png' import Card from './components/card'

function App() {
  return (
    <div className="w-full h-screen flex justify-center items-center bg-gradient-to-r Ofrom-slate-950 Oto-slate-900">
      <Card image=(bg) title="hello world" description="some description" />
    </div>
  )
}
export default App

I hope you learned something new from this. If you've used React Tilt before, i want to see your lovely tilt card, share them with me in the description below. Check out these awesome coding materials

Forem: Edet John