DEV Community: Kolapo Damola Usman

Valuetypes in Solidity

Kolapo Damola Usman — Sun, 28 Aug 2022 15:24:22 +0000

Solidity is a smart contract programming language. It is most commonly used to write smart contracts for the Ethereum blockchain but can be used to implement smart contracts on any blockchain that uses the Ethereum Virtual Machine (EVM).
Like all other programming languages, datatypes in Solidity can be classified into 2 types, Values and References.

Values: values simply mean that the datatype stores a value e.g boolean stores either true or false.
References: datatypes of type reference do not store a value instead they store a reference to where the actual data is stored e.g an Array is a datatype of type reference.

In this article, we'll be looking at Value Datatypes and how to use them in a solidity contract.

Boolean

contract ValueType {
    bool public boo= true;
}

Here we have a contract named ValueType, we will declare all the value datatypes inside this contract.
In the contract, we declare a boolean datatype using the keyword bool, this boolean is declared as public so it can be called outside the contract.
The variable is given the name boo and its value set to true, the value of a boolean can either be true or false.

Unsigned Integer

Next up, we'll be looking at the unsigned integer datatype.
An unsigned integer means the datatype has to be greater than or equal to zero, we can not use negative numbers with unsigned integers only zero or positive numbers.

contract ValueType {
    uint public numU= 123;
}

Here uint keyword is used to declare an unsigned integer, the variable is declared as public, the variable is given the name numU, and its value is set to 123.
The keyword uint is an alias for 0 to 2^256 - 1
There are different variants of uint with different ranges starting from uint8, uint16, etc which goes all the way to uint256.
Among these variations of uint, the most common one we will come across often is uint256.
Unsigned integers only support numbers that are greater than zero, but what of cases where we need to use a negative number, in this case, we use integers.

Integers

Next up, let's take a look at integers.
Integers allow us to use positive and negative numbers in our contract.

contract ValueType {
    int public numI= -123;
}

An integer is declared using the int keyword, the variable here is declared to be public, the variable is given the name numI and the value set to -123.
Similar to unsigned integers, the keyword int is also an alias for int256.
There are also different variations of int, starting from int8, int16 to int256.

Address

Another value datatype that we will come across a lot in Solidity is type address.

contract ValueType {
    address public addr= 0xFAed2F163D65141FbD48fD5FE1a4C08c2e50a4bF;
}

An address datatype is declared using the keyword address, this variable is made public, and the address is given the name addr and we set the value to a random Ethereum wallet address.

byte32

The last value datatype we will be looking at in this article is byte32, we will encounter this datatype when working with the cryptographic cache function available in solidity called kachek256.

contract ValueType {
    bytes32 public b32= 0x0000000000000000000000000000000;
}

We declare a bytes32 by using the keyword bytes32, the variable is made public, and given the name b32, the value here is set to some random 32bytes.

Conclusion

We haven't covered all the Valuetypes available in Solidity, in this article, but these are the most common ones we will come across when writing a Smart contract, you can find a full list of Solidity Valuetypes in the documentation.

Thanks for reading, If you enjoyed reading this as much as I enjoyed writing it, then Like and Share this with your friends and feel free to connect with me on Twitter 👨‍💻.

How to create a custom cursor with React and Framer-motion

Kolapo Damola Usman — Thu, 04 Aug 2022 14:06:00 +0000

In this article, I will guide you through the process of creating a custom cursor for your React application using Framer motion. At the end of the tutorial, you will have built a custom cursor that looks like the following:

Prerequisite

To follow along with this tutorial, you’ll need the following:

A text editor
Node.js installed locally on your machine
Working knowledge of HTML, CSS, and JavaScript
Working knowledge of React

You can find the complete code for this tutorial at this CodeSandbox.

Let’s get started!

Setting up the Project

Now, let’s set up a simple React project and install the necessary dependencies.

We’ll start by installing React:

npx create-react-app custom-cursor-app

Or you can use Yarn

yarn create react-app custom-cursor-app

Next, we’ll install Framer Motion

npm install framer-motion

Or you can use Yarn

yarn add framer-motion

Getting Started

First, we'll open the App.js file and remove some of the code in it, next we'll replace it with these few lines of code

import "./App.css";

const App = () => {
  return (
    <div className="App">
      <h1 className="title">Custom Cursor</h1>
      <div className="cursor"></div>
    </div>
  );
};

export default App;

Next, we’ll import everything else that’s required to help us create a custom cursor, from the libraries we installed earlier:

useState and useEffect Hooks from React.

motion Hook from Framer Motion.

import { useState, useEffect } from "react";

import { motion } from "framer-motion";

Next, open the App.css file and remove the code in it and place these lines of code in the file, this helps us style the App.js file

@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

.App {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: aqua;
  font-family: "Mochiy Pop One", sans-serif;
}

.title {
  font-size: 5rem;
}

.cursor {
  background-color: #111;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

Getting the Mouse position

To get the mouse position when running the app, we'll need the useState and useEffect Hooks provided by React.

import "./App.css";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";

const App = () => {
// state for mouse position
  const [mousePosition, setMousePosition] = useState({
    x: 0,
    y: 0,
  });

  useEffect(() => {
    const mouseMove = (e) => {
      setMousePosition({
        x: e.clientX,
        y: e.clientY,
      });
    };

    window.addEventListener("mousemove", mouseMove);

    return () => {
      window.removeEventListener("mousemove", mouseMove);
    };
  }, []);

  return (
    <div className="App">
      <h1 className="title">Custom Cursor</h1>
      <div className="cursor"></div>
    </div>
  );
};

export default App;

Here, we use the useState Hook to set the state for the mouse position.
In the useEffect Hook, we are getting the current position of the mouse using the window object.
Next, we set the state x and y of the mousePosition using the clientX and clientY method from the event object.
We are now able to track the movement of the mouse on the screen.

Adding Animations

Next up, we'll be animating the mouse cursor using the motion module we imported from Framer motion.

const App = () => {

  // Variant animation
  const variants = {
    default: {
      x: mousePosition.x - 8,
      y: mousePosition.y - 8,
    },   
 };

  return (
    <div className="App">
      <h1 className="title">
        Custom Cursor
      </h1>
// using the motion module to animate the cursor div element
      <motion.div
        className="cursor"
        variants={variants}
        animate="default"
      ></motion.div>
    </div>
  );
};

export default App;

Here, we are targetting the cursor element, we create a variant for the cursor animation, and set the default x and y position of the cursor element using the mousePosition state, mousePosition.x for the cursor element x initial position and mousePosition.y for the cursor element y initial position.
In the App.css file the cursor div element is styled to have a width and height of 16px each, reducing the mousePosition.x and mousePosition.y by 8 helps center the mouse cursor in the cursor div element.
Next up, to remove the native browser cursor, in the App.css file paste this line of code.

*,
*::before,
*::after {
  cursor: none;
}

Setting the Mixblendmode

To set the mixBlendMode for the custom cursor, open up the App.js file and edit the code.


// Set cursor variant to change color on hover text
const [cursorVariant, setCursorVariant] = useState("default");

// Variant animation
const variants = {

// default animation (applies onMouseLeave)
  default: {
    x: mousePosition.x - 8,
    y: mousePosition.y - 8,
  },

// text animation (applies onMouseEnter) 
  text: {
    height: 150,
    width: 150,
    x: mousePosition.x - 70,
    y: mousePosition.y - 70,
    backgroundColor: "aqua",
    mixBlendMode: "difference",
  },
};

// function for textLeave and textEnter
const textEnter = () => setCursorVariant("text");
const textLeave = () => setCursorVariant("default");

return (
  <div className="App">
    <h1 className="title" onMouseEnter={textEnter} onMouseLeave={textLeave}>
        Custom Cursor
      </h1>
     <motion.div
       className="cursor"
       variants={variants}
       animate={cursorVariant}
     ></motion.div>
  </div>
 );
};

First, we create a new state for the cursor animation variant using the useState Hook.
Next, we create a function to set the variant animation of the cursor element to text animation when the mouse hovers over the h1 element, and we have another function to set the variant animation of the cursor element to default when the mouse leaves the h1 element.
Going over the text variant animation, we set the width and height of the cursor element to 150px each, and reduce the mousePosition x and y by 70px each to center the cursor.
Next up we give the cursor element a background color of aqua, so when the mouse enters the h1 element the color changes to aqua.
Finally, we set the mixBlendMode property to difference.
The mixBlendMode property is what inverts the color of the h1 text to the aqua color onMouseEnter.

Your complete custom cursor webpage should look like this:

You can find the complete code for this tutorial at this CodeSandbox.

Conclusion

Framer motion is an extremely helpful library to use when you want to create animations. You can find a full list of Framer-motion utilities in the animation section of the documentation.

Thanks for reading, and have fun playing around with this and make some tweaks to get a better custom cursor for your webpage!

If you enjoyed reading this as much as I enjoyed writing it, then Like and Share this with your friends and feel free to connect with me on Twitter 👨‍💻.

Migrating your React App to React Router v6

Kolapo Damola Usman — Thu, 28 Jul 2022 14:03:00 +0000

Routing is important in any frontend project, the previous versions of React Router played their part in making routing configuration easier for React and React Native developers.
In this article, we will be focusing on react-router-dom, which is the package that is used to configure routing in most React web apps.
In this article, we will take look at how to do routing with the previous version of React Router before learning about the latest version which is React Router version 6.

This article is for developers who want to learn how to migrate their React Apps from previous versions of React Router to React Router v6, If you are new to React Router this article is also for you. I'll walk you through how to use React Router and its latest features in your React projects.

Prerequisite

To follow along with this tutorial, you’ll need the following:

A text editor
Node.js installed locally on your machine
Working knowledge of HTML, CSS, and JavaScript
Working knowledge of React

A quick walkthrough of React Router version 5(v5)

In React Router v5 we declare all of our routes in the root App component, and the BrowserRouter components wraps the entire application.

//./index.js
<BrowserRouter>
  <App />
</BrowserRouter>

//./App.js
const App = () => {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home Page</Link>
        <Link to="/about">About Page</Link>
        <Link to="/product">Product Page</Link>
        <Link to="/contact">Contact Page</Link>
      </nav>

      <Switch>
        <Route></Route>
      </Switch>
    </div>
  );
};

export default App;

This is how we would set up a typical React application when using React Router v5 or older.
In the App component, we have a nav section, the nav section contains the Link component provided by React Router, which helps us navigate to different pages in the application.
After the nav section, we have the Switch component which wraps all the routes in the application.
What the Switch component essentially does is wrap all routes in the application and ensure that only one route can be active at one time.
The Switch component is where all individual routes and page components are registered

<Switch>
  <Route exact to="/">
    <Home />
  </Route>
</Switch>

Here, we specify a path in the Route component, and the page component we want to render for that path is also nested inside the Route component.

<Switch>
  <Route exact to="/" component={<Home />} />
</Switch>

We can also use the component prop on the Route component instead of nesting, to specify which component should be rendered for a specific path.

If you are new to React Router, you should now have an idea of how it works. If you already know how it works, let's dive into React Router version 6.

Moving on to React Router version 6 (v6)

Getting started

Open up the terminal and create a new React project by running the following command:

> npx create-react-app ReactRouterv6Demo
> cd ReactRouterv6Demo

Next, install React Router as a dependency in the React app:

> npm install react-router-dom@6

This command will install the latest version of react-router-dom, which is version 6.
After installing the React router dependency, we'll need to add some code to the src/index.js file.

// React Router v6
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

We import the BrowserRouter component from react-router-dom, then wrap the App component with the BrowserRouter component, now we are set up to use React Router components and hooks in our app.

Routes configuration in React Router v6

In previous versions of React Router, the Switch component wraps the individual Route components in the App.

In React Router v6 the individual Route are placed in a Routes component.

// React Router v6
<Routes>
  <Route />
  <Route />
</Routes>

The Routes component replaces the Switch component in React Router v6.

// React Router v6
// ./ App.jsx
import { Routes, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";

const App = () => {
  return (
    <div className="App">
      <h1>React Router</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

Another change in React Router v6 is how we register the page component we want to render when we navigate to a specific path.
Here we do not nest the component instead we use the element prop provided by React Router v6, this element prop is set to the page component we want to render.
Also, we do not need the exact keyword in React Router v6 because the default behavior of the Route component in v6 is to exactly match each defined path.

How to Set Up a 404 page

In previous versions of React Router we would set up routing for a 404 page like so;

<Route>
    <NotFound />
<Route/>

NotFound component is the page component we want to render when a user logs on to a page that doesn't exist, also we do not specify a path here.

Next up, Let's look at how to set up a 404page in v6
First create a NotFound component in the component folder.

//./component/NotFound.js
import React from "react";

const NotFound = () => {
  return (
    <div>
      <h1>404 Page</h1>
      <p>The page you are trying to access does not exist</p>
    </div>
  );
};

export default NotFound;

Next we'll setup the 404page route

<Route path="*" element={<NotFound />} />

Here's how we would set up the 404page Route in React Router v6, we have a catch all routes path which is "*", this path we specified picks up anyone trying to access a page that doesn't exist and displays the 404page.

when you log on to a route that does not exist you should see a 404 page similar to this.

Writing inline jsx templates in Route component

In React Router v6, we can inline some JSX template inside the element prop instead of creating a page component

<Route
  path="/test"
  element={
    <div>
      <h2>Test Page</h2>
      <p>Hello test page</p>
    </div>
  }
/>

A page similar to this is rendered in the browser when we log on to /test

Redirects

Next up is to look at how we do redirects for certain routes and how we can programmatically redirect users.

In previous versions of React Router, to perform redirects we use the Redirect component.

In v6 the Redirect component does not exist, instead we use a new component from React Router v6, which is the Navigate component.

<Route path="/redirect" element={<Navigate to="/about" />} />

When a user logs on to /redirect, the user is redirected to the About page.

Programmatic Redirects

To programmatically redirect users, in previous versions of React Router we use the useHistory hook

import {useHistory} from "react-router-dom"
const history = useHistory()

<button onClick={() => history.push("/products")} >Click me</button>

In React Router v6 the useHistory hook is replaced with the useNavigate hook, the useNavigate hook works exactly the same way as the useHistory hook

import {useNavigate} from "react-router-dom"
const navigate = useNavigate()

<button onClick={() => navigate("/products")} >Click me</button>

The difference between using the useHistory hook and the useNavigate hook is, we do not need to call the push method on the useNavigate hook to redirect the user

Nested Routes

In previous versions of React Router here is how we would nest routes.

<Route path="/about/offers>
  <Offers />
</Route>

There is a change in how we do nested routes in React Router v6.
First, we import the Routes and Route components.

// ./Product.jsx
import { Routes, Route } from "react-router-dom";
import Offers from "./Offers";

<Routes>
  <Route path="/offers" element={<Offers />} />
</Routes>;

Here in React Router v6, the Route component will be nested inside the Routes component, we use the element prop to set the page component we want to render unlike in previous versions where we only nest the page component inside the Route component.

Another change in how we do nested routes in v6 is how to set the path, instead of writing out the parent path with the nested path, here nested routes path becomes relative to the parent path.
The offers path is just attached to the end of the parent path (Product page).

Next up, in the App.jsx file where we have all the routes in the application, we have to make some changes to the Route component that links to the product Product page.

<Route path="/product" element={<Product />} />

This Product Route component is currently set to match exactly the product path, anything after the "/product" is neglected, which means the nested offers path will be neglected.
To avoid this, we add "/*" to the product path.

<Route path="/product/*" element={<Product />} />

The "/*" means to match any slug or path that comes after the product path.

Conclusion

If you finished reading this article, you should now have a good base knowledge of React Router v6 and be able to use it in your React projects.
So that's it for this article, there's more on React Router that we didn't touch in this article.

You can check out some of the following resources, to learn more about React Router v6 👇:

Give these resources a read.

As always thanks for giving it a read, give it a like 👍, share it with others too, and if you still got any questions then drop them down in the comments. THANKS FOR READING! 💖

if you enjoyed reading this as much as I enjoyed writing it, then Like and Share this with your friends and feel free to follow me on Twitter 👨‍💻.

Styled-Components for Beginners

Kolapo Damola Usman — Tue, 21 Jun 2022 12:18:00 +0000

Hey guys in this article we are going to talk about Styled-components.

What is Styled components and why do you need it as a React developer?
Have you ever wondered what Styled-component is? Or perhaps you already know what it is but haven't taken the time to study or use it yet.

Are you looking for the best CSS-in-JS solution for your React apps, then this article is for you, whether you're learning about Styled-component for the first time, or you want to brush up on your knowledge of the subject.

In this article, you'll learn the fundamentals of Styled-components, and how to use Styled-components features to speed up the process of styling your react apps.

What is Styled Components

Styled components is a CSS-in-Js solution for React and React Native
It uses tagged template literals which allows you to write plain CSS that is scoped to a single component inside your JavaScript code
Styled-components is a library that is adopted by a large number of companies and it is one of the most starred React and React Native CSS solutions on GitHub

Benefits of using Styled-Components

Styled-components generate unique class-names for every style in your app, so we don't have to worry about class-name duplication
Styled automatically keeps track of which components are rendered on the screen and injects only their styles to the screen, which means we are loading the least amount of code necessary
There is an easier deletion of CSS, with styled-components every style is tied to a specific component, if a component is unused deleting the component automatically deletes its styles
Styling a component based on its prop can be done with Styled components
Styled-component takes care of vendor prefixing, for some of the newer CSS features we might have to explicitly write the CSS for older browsers, but with Styled-components we can write our CSS to the current standards, and it takes care of the rest

Prerequisites

This article assumes that you have:

Basic understanding of HTML & CSS
Basic understanding of React and React Hooks
A code editor.
And a browser (Chrome or Firefox recommended)

Setting up our Project

We set up our project in 2 steps

First, we create a React application using Create React App and we do this by running the following command in the terminal

npx create-react-app my-styled-components-app

Or you can use Yarn

yarn create react-app my-styled-components-app

The second step is to install styled components using the following command

npm install styled-components

Or you can use Yarn

yarn add styled-components

Basics of Styled-components

To start with, let's try styling a simple button element using styled-components

Import Styled components so we can use it in our react App

import styled from "styled-components";

Next step is to define a component with the styles using the imported styled function, this is done outside the app component

const StyledButton = styled.button`
  border: 2px solid green;
  background-color: green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
`

We have just written some basic CSS styling.

But in styled-component, the CSS properties are written in backticks

To use this style we invoke it in our App component like we would any other React component

<StyledButton>Styled Button</StyledButton>

It is as simple as that, we have just styled our button using Styled-component

You should now have a button that looks like this in your browser

Keeping our styled-components in another folder

In large applications or large codebases, separate files are always created for styled-components

Let's try this out

Create a folder named components in the src folder of the React app.

Next, create a file named Button.js in the components folder.

You should have a folder structure similar to this

First, we import styled-components into the Button.js file.

Next up, we move the StyledButton code from App.js into the Button.js file.

Then export StyledButton as a default function.

// App.js

import StyledButton from "./components/Button";

const App = () => {
  return (
    <div className="App">
      <StyledButton>Button</StyledButton>
    </div>
  );
};

export default App;

We can now import StyledButton into App.js file and invoke it.

Our styling remains the same

Adapting styles based on Props

At the moment our button has a background color of green, and the color is white.

Let's say we want a variant of the button, where if a variant is specified
It will have a background color of white, and a color green

Let's take a look at how we would adapt our styling based on the props passed to the StyledButton component

// App.js

const App = () => {
  return (
    <div className="App">
      <StyledButton>Button</StyledButton>
        <br />
      </div>
      <StyledButton variant="outline">Button</StyledButton>
    </div>
  );
};

Let's duplicate the StyledButton component in the App.js file.

Next, we pass in a variant prop of "outline" to the second button.

Here styled-components will automatically inject the variant prop we passed in, as an argument, so we get access to the props in the Button.js file.

Now we have access to variant in the button.js file.

We can then use the variant prop to set the color and background color using a ternary operator

line 6 simply translates to

if the props passed in is equal to the outline then set the background color to white if not set it to green

Line 7 translates to

if the props passed in is equal to the outline then set the color to green if not set it to white

You should now have 2 buttons similar to this in your browser

Extending styles

When working with styled-components.

We will come across cases where we have to reuse most of the styles from an existing component, in another component.

Let's look at an example

<div className="App">
   <StyledButton>Button</StyledButton>
      <br />
   <StyledButton variant="outline">Button</StyledButton>
      <br />
   <BlueButton>Button</BlueButton>
</div>

Let's create a third button component named BlueButton

In this example, we want most of the styling of the first 2 buttons except the background color, and border color.

So we want to extend all the styling from StyledButton but we want to set a different background color and border color for the BlueButton.

Here we give a different background color to the third button, and we also set the border to none.

You should now have 3 different buttons similar to this in your browser.

Polymorphic Prop

Another feature of styled-components is the ability to provide polymorphic prop on a component.

On the BlueButton we can specify a polymorphic prop

<BlueButton as='a'>Blue Button</BlueButton>

This polymorphic prop {as='a'} specified in the BlueButton component changes the button element into an anchor tag.

Inspecting the button in the chrome dev tools shows, that the Blue button has been converted to an anchor tag while the other buttons still remain a button element.

Pseudo-selectors

When styling elements with CSS or other CSS preprocessors a common requirement is to add pseudo-classes

For example styling elements when we hover over them or when an element is in focus.

Let's take a look at an example

On hover, let's change the color and background color of the StyledButton component

Now to specify a hover style in the StyledButton component

Here, in the hover styles, we simply set the color and background color to the opposite of what, it currently is, when we hover on the button

Theming

Now let's take a look at theming with styled-components.

Styled components have full theming support by exporting a theme provider wrapper components

Let's look at how we would create a theme for our app

// App.js
import { GradientButton } from "./components/Button";
import StyledButton from "./components/Button";
//Themeprovider import
import { ThemeProvider } from "styled-components";



const App = () => {
  return (
    <ThemeProvider> //Themeprovider
      <div className="App">
        <StyledButton>Button</StyledButton>
        <br />
        <StyledButton variant="outline">Button</StyledButton>
        <br />
        <GradientButton as="a">Button</GradientButton>
      </div>
    </ThemeProvider>
  );
};

export default App;

First, we import the ThemeProvider from styled components.

We then wrap the App component jsx with the Themeprovider component, and this component accepts a theme prop.

Next up let's define the theme prop that gets passed into the ThemeProvider component.

const theme = {
    dark:{
    primaryColor: "#000" , 
    textColor: "#fff"
}, 
    light:{
    primaryColor: "#fff", 
    textColor: "#000"
} 
}

The defined theme is an object which has 2 keys "dark" and "light".

The dark key has a primary color of "#000" and a text color of "#fff", while the light key has a primary color of "#fff" and a text color of "#000"

    <ThemeProvider theme={theme}>
      <div className="App">
        <StyledButton>Button</StyledButton>
        <br />
        <StyledButton variant="outline">Button</StyledButton>
        <br />
        <GradientButton as="a">Button</GradientButton>
      </div>
    </ThemeProvider>

Next in the theme provider component we pass in our defined theme as the theme prop.

The Themeprovider here provides this theme to all react components underneath itself via the context API.

So all the styled-components will have access to our provided theme even when they are multiple levels deep (that's what the Context API does).

Next let's look at how we would use the theme we have defined in our App.

For this example lets create a dark themed button in button.js file.

// ./components/Button.js

export const DarkButton = styled(StyledButton)`
  border: 1px solid transparent;
  background: ${(props) => props.theme.dark.primaryColor};
  color: 2px solid ${(props) => props.theme.dark.textColor};
`;

Here we are going to extend the StyledButton styles.

To set the background color we have access to our defined theme through props, this allows us to set the background color of the button to primaryColor, and also allows us to set the color of the button to textColor.

Next we import DarkButton from Button.js file and invoke it in App.js

You should now have 4 buttons similar to this in your browser.

Conclusion

So that's it for this article, there's more on Styled-components we haven't talked about.

To learn more about Styled components, make sure to check the following resources 👇:

Give these resources a read.

As always thanks for giving it a read, give it a like 👍, share it with others too, and if you still got any questions then drop them down in the comments. THANKS FOR READING! 💖

if you enjoyed reading this as much as I enjoyed writing it, then Like and Share this with your friends and feel free to follow me on Twitter 👨‍💻.

Choosing the right CSS unit for your next front-end project

Kolapo Damola Usman — Sun, 22 May 2022 12:54:00 +0000

Hey guys, In this article, I will help you understand the different CSS units such as (em, rem, px) to help you choose the right CSS units for your next front-end projects and I will also help you understand how choosing the right CSS unit can help your website's accessibility

The units we will talk about in this article are the Emphemeral unit (em), Root Emphemeral unit also known as root em (rem) and Pixels (px).
For a long time designers and developers have always used the px unit which is very easy to understand because your 10px is always 10px no matter what

Em and rem units are relative but the difference is what they are relative to. Let's get into it

Introduction
What is a CSS Unit
Absolute Length Units
Relative Length Units
The Difference between px, rem, and em
REM
Changing the size of the root element
Accessibility
EM
Conclusion

Introduction

CSS has several options for what units to use when sizing various CSS properties. Learning all your CSS unit options can be the key to a styling that's easy to manage and looks great on any screen.

What is a CSS Unit?

A CSS unit determines the size of a property you’re setting for an element or its content. For example, if you want to set the property margin of a paragraph, you would give it a specific value. This value includes the CSS unit.

Let’s look at an example:

In this case, the margin is a property, 20px; is the value, and px is the CSS unit.

Absolute Length Units

Absolute length units are based on an actual physical unit and are generally considered to be the same size across devices. However, depending on your screen size and quality, or settings in your browser or OS, there may be some exceptions.

Here are some common absolute length units in CSS:
Centimeters (cm), Millimeters (mm), Inches (in), Points (pt), Picas (pc), Pixels (px) are one of the most common length units in CSS.

In CSS, 1 px is formally defined as 1/96 of an inch. All other absolute length units are based on this definition of a px.

Relative Length Units

Relative length units are relative to another element's size or settings. For example, the relative font size of an element may be calculated using the parent element's font size.

Here are some common relative length units: rem, em

The Difference between px, rem and em

Px is a CSS unit commonly used on websites, px is non-scalable, it is an absolute unit.
Changing the value of another element does not affect the value of the absolute units. The value assigned is fixed regardless of user preferences.

Rem and em are scalable and responsive units that are interpreted by the browser in equivalent px units, they are relative units. Changing the value of the parent or root element affects the value of the relative units, they scale with the device.

So what differentiates the two? The difference is in how the browser derives the values. To view the calculated values, go to the Chrome Developer Tools and open the Computed tab.

The calculated px value of the rem unit is relative to the font size of the root element (HTML).
However, this is affected by inheritance through the setting of the font size in the browser, unless overridden by a non-inherited px unit.

The calculated px value of the em unit is relative to the font size of the element to be styled.
This is also affected by values inherited from parent elements unless explicitly overridden by a px unit that is not subject to inheritance.

REM

Rem is always relative to the root element, the default size of the root element is 16px.

Let's look at an example:

A font size of 1rem is applied to the p tag, and the font size of the p tag is computed to 16px when we inspect the element in the dev tools.

Here a font size of 2rem is applied to the p tag, and the font size of the p tag is computed to 32px,

Changing the size of the root element

In a case where the default size of the root element is changed

Let's look at an example:

If the font size of the root element is changed to 10px and the p-tag is given a font size of 1rem.

In this case, the p tag will have a font size of 10px because the default size of the root element has changed.

This is what rem units being relative to the root element means.

Accessibility

What's great about using rem units is that the user can control the size of the font from their browser settings.

If the browser setting is changed to larger text, the rem units font adjusts accordingly and the same applies when the browser setting is changed to smaller text.

A font size of 2rem applied to the p-tag is computed to 40px after we changed the font size of the chrome browser to a larger size.

Here the font size of 2rem applied to the p-tag is computed to 24px after we changed the font size of the chrome browser to a smaller size

This makes using rem units great for accessibility

EM

Em units are relative to their parent element and if they do not have any parent element, em units work exactly like rem units in the sense that they are relative to the root element

Lets take a look at an example of a box container with a p-tag in it:

The box container is given font-size of 30px, then we set a font size of 1em on the p-tag

The p tag when we inspect it in the Chrome dev tools is given a computed font-size value of 30px.

This shows that the p tag, in this case, is relative to its parent element which is the box container.

If we were to remove the styling on the box container and the p-tag has the same styling.

Inspecting the p element in the dev tools shows that the p-tag now has a font-size of 16px.

This shows the relativity of the em units to the root element when it does not have a parent element, also shows the similarities between the em and rem units.

Another thing to note when applying em units to elements with a parent container is, the element won't scale with the browser settings like it will when using rem units.

Conclusion

So that's it for this article, there's a ton more on CSS we haven't talked about.

To learn more about other CSS units, make sure to check the following resources 👇:

MDN web docs: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

W3Schools: https://www.w3schools.com/cssref/css_units.asp

Give these resources a read.

As always thanks for giving it a read, give it a like 👍, share it with others too, and if you still got any questions then drop them down in the comments. THANKS FOR READING! 💖

if you enjoyed reading this as much as I enjoyed writing it, then Like and Share this with your friends and feel free to follow me on Twitter 👨‍💻.

DEV Community: Kolapo Damola Usman

Valuetypes in Solidity

Boolean

Unsigned Integer

Integers

Address

byte32

Conclusion

How to create a custom cursor with React and Framer-motion

Prerequisite

Setting up the Project

Getting Started

Getting the Mouse position

Adding Animations

Setting the Mixblendmode

Conclusion

Migrating your React App to React Router v6

Prerequisite

A quick walkthrough of React Router version 5(v5)

Moving on to React Router version 6 (v6)

Getting started

Routes configuration in React Router v6

How to Set Up a 404 page

Writing inline jsx templates in Route component

Redirects

Programmatic Redirects

Nested Routes

Conclusion

Styled-Components for Beginners

What is Styled Components

Benefits of using Styled-Components

Prerequisites

Setting up our Project

Basics of Styled-components

Keeping our styled-components in another folder

Adapting styles based on Props

Extending styles

Polymorphic Prop

Pseudo-selectors

Theming

Conclusion

Choosing the right CSS unit for your next front-end project

Table Of Contents

Introduction

What is a CSS Unit?

Absolute Length Units

Relative Length Units

The Difference between px, rem and em

REM

Changing the size of the root element

Accessibility

EM

Conclusion