DEV Community: IsraelMitolu

Creating Visual Interest: How to Use MouseMove Hover to Reveal Background Images

IsraelMitolu — Sat, 29 Apr 2023 07:53:54 +0000

Canva celebrated 15 billion designs on its platform on February 15, 2023, marking a huge milestone for the company. To celebrate the event, the company created a special background image featuring designs made on the platform. When you move your mouse around the page, the image gets revealed, creating a cool effect. I found it interesting and decided to recreate it using HTML, CSS, and JavaScript. This article will show you how to recreate the effect step by step.

Prerequisites

This article assumes you have a basic knowledge of HTML, CSS and JavaScript. You'll also need a code editor and a web browser. I'll be using VS Code and Chrome, but you can use whatever you like.

To follow along, clone or download the starter files here

Getting Started

First, create the HTML markup for the container and background image. The container is where the background image will be revealed on hover.

<div class="container">
  <h1>Thanks for <u>15 billion designs!</u></h1>
  <input type="text" placeholder="Search your content or Canva's" />
  <div class="hover"></div>
</div>

The container is where all the content will be. The hover div is empty for now, but we will add the background image using CSS.

Styling the Container

Next, copy the following CSS into the styles.css file. This will style the container and the other elements in the app.

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  width: 100%;
  height: 25rem;
  background: linear-gradient(
    119.42deg,
    #cc00c4 8.94%,
    #7d2ae8 54.02%,
    #00c4cc 95.49%
  );
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-size: 3rem;
  position: relative;
  z-index: 10;
  margin-top: 1rem;
}

input {
  position: relative;
  margin-top: 2rem;
  padding: 9px 4px 9px 40px;
  border: 1px solid #2b3b4a4d;
  outline: none;
  color: #0d1216;
  padding: 0 12px;
  font-size: 1rem;
  border-radius: 4px;
  height: 2.5rem;
  width: 40rem;
  max-width: 100%;
  z-index: 10;
}

In the CSS above, we set the container to position: relative so that we can position the background image inside it. We also set the overflow property to hidden so that the background image doesn't overflow the container.

We also set the z-index property of the h1 and input elements to 10 so that they appear above or on top of the background image.

Here is what we have so far:

Adding the Background Image

Next, we'll target the .hover class and add the background image. We'll also set the position property to absolute so that we can position the image inside the container.

Copy the following CSS into the styles.css file:

.hover {
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  width: 10rem;
  height: 10rem;
  background: url(img/giphy.gif) 50% 50% fixed;
  border-radius: 50%;
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.15);
  filter: blur(1px);
  z-index: 5;
}

The opacity property is set to 0 so that the image is hidden by default. We'll use JavaScript to change the opacity to 1 when the user hovers over the container.

Additionally, for the background property, we used the shorthand syntax to set the background image, position, size and repeat. We also set the fixed value for the background-attachment property so that the image stays in place when the mouse moves around.

If you prefer, you can use the longhand syntax to set the background image, position, size and repeat:

background-image: url(img/giphy.gif);
background-position: 50% 50%;
background-attachment: fixed;

Revealing the Background Image

To reveal the background image, we'll use JavaScript to track the movement of the user's mouse cursor and change the opacity of the background image.

Create a new file called app.js and add the following code:

const hover = document.querySelector(".hover");
const hoverWHalf = hover.offsetWidth / 1.5;
const container = document.querySelector(".container");

container.addEventListener("mousemove", (e) => {
  hover.style.left = e.pageX - hoverWHalf + "px";
  hover.style.top = e.pageY - hoverWHalf + "px";
  hover.style.opacity = "1";
});

In the code above, we first select the .hover and .container elements using the querySelector method.

Then, we add an event listener to the container element. The event listener listens for the mousemove event, so that whenever the user moves their mouse over the container, the code will calculate the position of the .hover element and update its position and opacity dynamically.

Specifically, it calculates the horizontal and vertical midpoint of the .hover element using the offsetWidth property and then subtracts half of this value from the pageX and pageY properties of the mousemove event to determine the position of the .hover element relative to the mouse cursor.

Don't forget to link the app.js file inside the index.html file ;)

<script src="app.js"></script>

With this, we have successfully created the mousemove hover effect. Here is the final result:

Check out the live demo and source code on Github.

Conclusion

And there you have it! You've made it to the end of this article on creating visual interest using the MouseMove hover effect with HTML, CSS, and JavaScript. By now, you should have a good understanding of how to use this technique to add some excitement and creativity to your website.

Remember, there are countless ways to customize this effect and make it your own. Don't be afraid to experiment with different images, colours, and animations to create a look that perfectly matches your brand or personal style.

As you continue to develop your web design skills, be sure to keep an eye out for new and exciting trends in the industry. Who knows, you might just discover the next big thing :)

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

Resources

Using Custom Cursors with JavaScript for a Better UX
How to Center an HTML Element Using JavaScript
MDN Web Docs - mousemove

The Top VS Code Extensions Every Frontend Developer Needs in Their Toolkit

IsraelMitolu — Thu, 27 Apr 2023 05:51:54 +0000

Visual Studio Code, commonly known as VS Code, is a free and open-source code editor developed by Microsoft for Windows, Linux, and macOS. It has become one of the most popular code editors in the developer community due to its user-friendly interface and numerous features that cater to different programming languages and frameworks.

As a frontend developer, having the right extensions installed can greatly improve your workflow, making it more efficient and effective. In this article, I will introduce you to my top VS Code extensions that every frontend developer should consider adding to their toolkit.

1. Live Server

Live Server is a valuable tool for frontend developers that allows you to launch a local development server with live reload capability. This extension creates a local development server and opens your project in a browser. It automatically refreshes the page every time you save changes to your code, providing a seamless and efficient development experience.

2. Visual Studio IntelliCode

Visual Studio IntelliCode is an AI-powered extension that provides intelligent code completion suggestions based on your code context. This extension can save you time and effort by eliminating the need to manually type out every line of code. With Visual Studio IntelliCode, you can write code more efficiently and with fewer errors.

3. Prettier - Code Formatter

Prettier is a code formatter that helps you format your code according to a set of rules. It is very useful when you are working on a project that requires you to follow a specific coding style. It also helps you avoid common mistakes such as missing semicolons and trailing commas.

4. Path IntelliSense

Path Intellisense is an extension that provides auto-completion for file paths in your project. This can be especially useful when working with large codebases that have many nested directories. With Path Intellisense, you can quickly and easily navigate to the file you need without having to remember its exact location.

5. GitLens — Git supercharged

GitLens is a powerful extension that provides a visual representation of your Git repository. It allows you to see the history of your commits, branches, and tags. This can be especially useful when working on a project with multiple developers. With GitLens, you can easily track changes, view blame annotations, code authorship, commit history, and much more.

5. Auto Rename Tag

When you're working with HTML or XML, it is essential to ensure that your tags are properly named and closed. Auto Rename Tag is an extension that automatically renames your opening or closing HTML tags when you rename one of them. This extension can save you a significant amount of time and prevent errors that may arise from mismatched tag names.

6. CSS Peek

CSS Peek is an extension that allows you to quickly navigate from an HTML file to the corresponding CSS definition. This can be extremely helpful when working with large codebases that have many CSS files. With CSS Peek, you can easily locate and modify the CSS rules that affect specific HTML elements.

7. ESLint

ESLint is a powerful linter that can analyze your code and identify potential errors or coding style issues. This extension integrates with VS Code to provide real-time feedback on your JavaScript and TypeScript code as you write it. With ES Lint, you can ensure that your code is free of errors and follows best coding practices.

8. Live Share

Live Share is an extension that allows you to collaborate with other developers on the same project. This extension allows you to share your code with other developers and work on it together in real-time. With Live Share, you can easily collaborate with other developers on the same project.

9. Intellisense for CSS class names in HTML

IntelliSense for CSS class names is an extension that provides autocompletion for CSS class names. This extension can save you time and effort by eliminating the need to manually type out every CSS class name. With IntelliSense for CSS class names, you can write CSS code more efficiently and with fewer errors.

10. Tailwind CSS IntelliSense

Tailwind CSS is a popular utility-first CSS framework that can help you write clean and responsive code. With the Tailwind CSS IntelliSense extension, you can enjoy autocompletion and syntax highlighting for Tailwind CSS classes in VS Code. This extension can save you time and effort by allowing you to quickly and easily apply Tailwind CSS classes to your HTML and CSS code.

11. VS Code ES7+ React/Redux/React-Native/JS snippets

VS Code ES7+ React/Redux/React-Native/JS snippets is an extension that provides auto-completion for React and React Native code. This extension can save you time and effort by allowing you to quickly and easily write React and React Native code. With VS Code ES7+ React/Redux/React-Native/JS snippets, you can write React and React Native code more efficiently and with fewer errors.

12. Better Comments

Better Comments is an extension that allows you to add color to your comments. This extension can help you organize your code and make it easier to read. With Better Comments, you can easily distinguish between different types of comments and identify important information at a glance.

13. Github Copilot

GitHub Copilot is a revolutionary AI-powered code completion tool that uses machine learning to help developers write code faster and more accurately. It suggests code snippets and even entire functions based on the context of the code you are writing. With Copilot, you can save time and focus on the logic of your code.

14. REST Client

REST Client allows you to send HTTP requests and view the responses directly in VS Code. It supports many HTTP methods, including GET, POST, PUT, DELETE, and more. This extension is perfect when you who want to test APIs and web services quickly and easily.

15. Live Sass Compiler

If like me, you love using Sass, then you will love this extension. It allows you to compile your Sass and Scss code to CSS in real-time. The extension also offers other useful features, such as live browser reloading and customizations for the output CSS.

Conclusion

Having the right VS Code extensions can greatly improve your workflow as a frontend developer, increasing productivity, reducing errors, and improving readability.

While there are many other useful VS Code extensions beyond the 15 mentioned in this article, these are the ones that I use on a regular basis. I hope you find them useful as well!

I would love to hear your thoughts on this article. Which VS Code extensions do you use to improve your frontend development workflow? Do you have any favorite extensions not mentioned in this article? Let me know in the comments below!

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

A Beginner's Guide to Portals in React: Everything You Need to Know

IsraelMitolu — Fri, 07 Apr 2023 20:39:19 +0000

React is a popular JavaScript library for building user interfaces. One of the powerful features of React is the use of portals, which allow developers to render content outside of the normal React tree structure. In this article, you'll learn all about what portals are, how to use them, and some common use cases for portals in React applications.

What are Portals?

React portals provide a way to render content outside of the normal DOM hierarchy of a component. This means that you can render a child component at a different place in the DOM tree than its parent component.

In technical terms, portals in React work by creating a new DOM node and rendering a component into it. This new node is appended to the body element of the HTML document, which is outside of the normal React component tree. The rendered content can then be positioned and styled independently of the parent component.

Advantages of Using Portals

There are several advantages to using portals in React:

Flexibility: Portals allow you to render a component outside of its parent container, which can be useful in situations where you need to display content in a different part of the page.
Improved performance: By rendering a component outside of its parent container, you can reduce the amount of DOM manipulation needed to update the component, which can improve performance.

Common Use Cases for Portals

Portals can be used for a variety of UI elements. Here are some common use cases of portals in React:

Modals
Dialog boxes
Tooltips
Hover cards
Popovers
Dropdown Menus
Loaders

How to Create a Portal in React

To create a portal in React, we make use of the createPortal() API. This method takes two arguments:

children: Any valid React element that can be rendered.
domNode: DOM container where the children should be rendered

Here is the syntax:

createPortal(children, domNode);

Example:

import { createPortal } from "react-dom";

const Modal = () => {
  return (
    <div className="modal">
      <h1>Modal Content</h1>
    </div>
  );
};

const Portal = () => {
  return createPortal(<Modal />, document.getElementById("modal-root"));
};

In the example above, we define a Modal component that we want to render using a portal. We then define a Portal component that uses the createPortal() method to render the Modal component in a container with the ID of modal-root.

How to Use Portals

To see how portals work, let's create a simple React app that uses portals to render a modal component. If you're working on an existing project, you can skip the first step. The complete code for this example is available on GitHub.

Step 1: Initialise your React app

First, create a new React app using Vite:

npm create vite@latest my-react-app --template react

Navigate to the project directory and install the dependencies:

cd my-react-app
npm install
npm run dev

Step 2: Create a portal container

Next, create a container element in the index.html file that will host the portal. This element should be located outside the root node of the React app, which is typically a div with an ID of root.

For this example, we'll create a div with an ID of portal and add it to the body of the HTML file:

<body>
  <div id="root"></div>
  <div id="portal"></div>
</body>

Step 3: Create the Overlay component

We will use the Overlay component as a backdrop effect when the modal opens, and also create the portal inside it.

Create a new file Overlay.jsx, in the src directory and paste the following code:

import React from "react";
import { createPortal } from "react-dom";
import "./App.css";

const Overlay = ({ closeModal, children }) => {
  return createPortal(
    <div className="overlay" onClick={closeModal}>
      {children}
    </div>,
    document.getElementById("portal")
  );
};

export default Overlay;

The Overlay component returns a JSX fragment that uses the createPortal() method from the react-dom package to render a div with children elements inside a portal.

We then set the onClick event for the div to call the closeModal function that is passed as a prop.

Step 4: Create the Modal component

Next, create a new file Modal.jsx in the src directory, and add the following code.

import React from "react";
import Overlay from "./Overlay";
import "./App.css";

const Modal = ({ closeModal }) => {
  return (
    <Overlay closeModal={closeModal}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>Modal</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, libero.
          Exercitationem quod quam perspiciatis quasi voluptate sint facilis
          quia praesentium pariatur veniam quidem nam, ullam porro eveniet
          molestiae minima eligendi.
        </p>
        <button onClick={closeModal}>Close</button>
      </div>
    </Overlay>
  );
};

export default Modal;

In the code above, the onClick event for the div is set to stop event propagation so that clicking inside the modal doesn't close it.

Additionally, the onClick event for the button element will call the closeModal function that was passed as a prop.

Step 5: Edit the App component

Copy and paste the following code into the App.jsx file.

import { useState } from "react";
import Modal from "./Modal";
import "./App.css";

function App() {
  // State to manage whether the modal is open or closed
  const [modalOpen, setModalOpen] = useState(false);

  // Function to toggle the state between open and closed
  const handleModal = () => {
    setModalOpen(!modalOpen);
  };

  return (
    <div className="App">
      <h1>React Modal Demo</h1>
      <p>
        This is a demo of how to use portals to create a modal component in
        React.
      </p>
      <button onClick={handleModal}>Open Modal</button>

      {modalOpen && <Modal closeModal={() => setModalOpen(false)} />}
    </div>
  );
}

export default App;

Here we define a state to manage whether the modal is open or closed, and a function to toggle the state. When the "Open Modal" button is clicked, the handleModal function is called and the modalOpen state is updated accordingly.

If the state is true, the Modal component is rendered, which includes a "Close" button that sets the modalOpen state to false.

Step 6: Style the App

Finally, let's style the app. Add the following code inside the App.css file:

.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 450px;
  min-height: 250px;
  padding: 2rem;
  top: 20%;
  background-color: white;
  border-radius: 15px;
}

button {
  padding: 0.7rem 1.4rem;
  color: white;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
}

Here's what the final app looks like:

Now, let's take a closer look at how this works. Open the Developer Tools in your browser and inspect the page. You'll notice that while the modal is closed, the portal div is empty.

When you click the button to open the modal, the modal is rendered inside the portal div, just as we specified.

The new DOM nodes are now mounted inside the portal node instead of the App node specified in the source code. This demonstrates the functionality of portals in action.

Event Bubbling and Portals

Event bubbling refers to the way events propagate from child components to parent components in the component tree. In the case of React portals, this means that even if we render a portal outside of the parent DOM element, it still behaves like a standard React component, with access to props and state, as it remains within the DOM tree hierarchy.

Since portals only affect the HTML DOM structure and not the React component tree, features such as Context API and Event Bubbling continue to work as they did before.

To prevent event bubbling, as demonstrated in the example, you can use the stopPropagation() method to ensure that only the event listener on the portal's container is triggered.

Wrapping Up

Portals in React are a powerful feature that allows developers to render content outside of the normal component hierarchy. This can be useful for creating modals, popovers, and other UI elements that need to be positioned relative to a specific element or displayed on top of the main application interface.

When using portals, it's important to keep in mind some best practices.

First, always make sure to clean up the portal node when the component unmounts. This can be done using the useEffect hook and the removeChild method.
Second, be careful not to use portals excessively, as they can add unnecessary complexity to your code.
Finally, always test your portals thoroughly for accessibility issues, as they can sometimes cause unexpected behaviour in certain browsers or screen readers. Ensure to follow the WAI-ARIA Modal Authoring Practices when working with modals.

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on Twitter | LinkedIn | Github | Portfolio.

Happy coding!

Resources

Markdown for Technical Writers: Tips, Tricks, and Best Practices

IsraelMitolu — Thu, 09 Mar 2023 16:12:50 +0000

As a technical writer, you know how important it is to create documentation that is not only informative but also visually appealing and easy to read. However, formatting and styling your documents can be a tedious and time-consuming task, especially when working with complex content. This is where Markdown can be a lifesaver - a simple markup language that can help you create polished and professional-looking documentation without spending hours on formatting.

In this article, I'll share my experience with Markdown and how it has improved my technical documentation. I'll also provide some tips, tricks, and best practices that I've learned along the way. Whether you're an experienced technical writer or just starting out, this article will equip you with the knowledge you need to begin using Markdown and enhance your technical writing skills.

What is Markdown?

Markdown is a lightweight markup language that allows users to format text in a simple and intuitive way. It was developed in 2004 by John Gruber and Aaron Swartz, with the goal of creating a text-to-HTML conversion tool for writers who wanted an easy way to write for the web. Since then, Markdown has grown in popularity and is now used by a wide range of people, including programmers, writers, and bloggers.

The beauty of Markdown lies in its simplicity. Unlike other markup languages such as HTML, Markdown uses plain text with simple syntax to format text. This means that anyone can learn Markdown with ease, even if they have no programming experience.

Markdown and HTML

Markdown and HTML are two markup languages that are commonly used for formatting text on the web. While they share some similarities, they are fundamentally different in terms of syntax and purpose.

Markdown is designed to be easy to read and write, using simple syntax that is intuitive for anyone to use. On the other hand, HTML uses more complex syntax and is designed to provide more advanced formatting capabilities.

Benefits of Using Markdown for Technical Writing

There are many benefits to using Markdown for technical writing. Here are some of the benefits:

Easy to learn: Markdown's syntax is simple and intuitive, which makes it easy to learn even for non-technical writers. The syntax is intuitive and uses symbols like asterisks and hash symbols to indicate formatting elements like headings, lists, and emphasis.
Faster Writing: With Markdown, you can focus on writing content, rather than formatting it. This speeds up the writing process and allows you to produce more content in less time.
Portable: Markdown is a plain text format, which means that you can use it on any platform. Whether you’re working on a Windows, Mac, or Linux machine, you can use Markdown to format your files.
Compatible with a range of tools and platforms: Markdown can be easily converted into HTML or other formats using conversion tools, and it is supported by most blogging and content management systems. This makes it highly compatible with a range of tools and platforms, including GitHub, Jekyll, and WordPress.
Efficient and streamlined workflow: Markdown can speed up the writing process by allowing writers to focus on content rather than formatting. Since Markdown is a plain text format, it can be easily edited, revised, and collaborated on without the need for complex formatting tools.

Getting Started with Markdown

To get started with Markdown, all you need is a plain text editor and some basic knowledge of Markdown syntax. Most text editors, such as Sublime Text, Atom, or Visual Studio Code, have built-in support for Markdown syntax highlighting.

Basic Markdown Syntax

Headings

To create a heading, start the line with one or more hash (#) symbols followed by a space and the heading text. The number of hash symbols indicates the level of the heading, with one hash symbol for the largest heading and six for the smallest.

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Formatting Text

You can format text using the following syntax:

Italic: surround the text with a single asterisk (*).

Bold: surround the text with two asterisks (**).

Bold and Italic: surround the text with three asterisks (***).

Code: surround the text with a backtick (`).

*Italic* **Bold** ***Bold and Italic***Code

Lists

Markdown supports ordered and unordered lists. To create an unordered list, prefix each item with an asterisk (*) or a dash (-) followed by a space, and then the list item. To create an ordered list, use a number followed by a period (.) and a space, and then the list item.

`text
Unordered List:

Item 1
Item 2
Item 3

Ordered List:

Item 1
Item 2
Item 3 `

To create a nested list, indent each item by four spaces or one tab. For example:

`text

Item 1
- Item 1.1
- Item 1.2
Item 2
- Item 2.1 `
Item 1
- Item 1.1
- Item 1.2
Item 2
- Item 2.1

Links and Images

To create a link, surround the link text with square brackets [] followed by the URL in parentheses ().

To insert an image, use the same syntax as for links but with an exclamation mark (!) at the beginning.

`text
Link:
Link text

Image:

`

Link text

Blockquotes

Blockquotes are used to quote text from another source. To create a blockquote, add a greater than symbol (>) before the text you want to quote.

`markdown

This is a blockquote
`

The more control you have over your attention, the more control you have over your future. - James Clear

For a blockquote with multiple paragraphs, add a > before each paragraph.

`markdown

Don’t postpone joy until you have learned all of your lessons. Joy is your lesson.

~ Alan Cohen
`

Don’t postpone joy until you have learned all of your lessons. Joy is your lesson.

~ Alan Cohen

Extended Markdown Syntax

Tables

To create tables in Markdown, you can use the pipe (|) character to separate columns and the dash (-) character to separate the header row from the body. However, creating tables manually can be a bit tricky since the pipes must align vertically. So, I recommend using a table generator tool to simplify the process.

md | Column 1 | Column 2 | Column 3 | | ---------- | ---------- | ---------- | | R1, C1 | R1, C2 | R1, C3 | | R2, C1 | R2, C2 | R2, C3 |

Column 1	Column 2	Column 3
R1, C1	R1, C2	R1, C3
R2, C1	R2, C2	R2, C3

Code Blocks

To create a code block, use three backticks (`\) followed by the programming language in which the code is written. Then, insert your code in between the backticks.

console.log('example log')

The rendered output looks like this:

console.log("example log");

Horizontal Rules

To insert a horizontal rule, use three or more hyphens (---), asterisks (***) or underscores (___) on a separate line.

---

Footnotes

Markdown also supports footnotes, which are useful for adding additional information or clarifications to your text without disrupting the flow of your content. To add a footnote, use the following syntax:

Place a caret (^) where you want to add the footnote reference.
Add the footnote text in square brackets [], immediately followed by a colon (:).
Add the footnote content on a separate line, indented by one tab or four spaces.

The Mediterranean diet is a healthy eating pattern rich in fruits, vegetables, whole grains, and healthy fats like olive oil[^1]. This diet has been shown to improve heart health and reduce inflammation[^2]. To learn more about the Mediterranean diet, check out resources like Oldways[^3].

[^1]: Keys A, Anderson JT, Grande F. "Serum cholesterol response to changes in the diet. IV. Particular saturated fatty acids in the diet." Metabolism. 1965;14:776-87.
[^2]: Estruch R, Ros E, Salas-Salvadó J, et al. "Primary prevention of cardiovascular disease with a Mediterranean diet supplemented with extra-vir

When you render your Markdown document, the footnote reference will be replaced with a superscript number that links to the footnote content at the bottom of the page.

Task Lists

Markdown also allows you to create task lists, which are useful for keeping track of items that need to be completed. To create a task list, use a hyphen (-), a space, and square brackets [] to create a checkbox. To mark an item as complete, add an x inside the brackets.

-[ ] Task 1
-[x] Task 2
-[ ] Task 3

Here's what the rendered output looks like:

Embedding HTML

Markdown also allows you to embed HTML code directly into your document. This can be useful when you need to include more advanced formatting that is not available in Markdown. To embed HTML code, simply include the HTML tags in your Markdown document. For example:

<button style="color:red; background: #f9f9f9; border-radius: 10px"
  >Click Me</button
>

Click Me

How to Remember Markdown Syntax

Although this looks like a lot of information, you don't need to memorize all of the Markdown syntaxes. You can always refer to this guide or use a Markdown cheat sheet. Additionally, after you've written a few Markdown articles, you'll start to remember the syntax.

Platforms like Hashnode, Dev.to and Ghost have provided cheat sheets for their Markdown editors. They also have a preview feature, allowing you to see your Markdown document's rendered output as you type.

How to speed up your workflow

Keyboard Shortcuts

The easiest way to speed up your workflow is through keyboard shortcuts. Keyboard shortcuts allow you to perform common tasks without using your mouse. Many text editors have keyboard shortcuts for working with Markdown syntax. The more universal are include:

Ctrl + B: Bold
Ctrl + I: Italic
Ctrl + K: Add a link

However, these shortcuts are only available in some text editors and IDEs. You can also use extensions to add keyboard shortcuts to your text editor.

Tools to speed up your workflow

There are also many tools available that are designed specifically for working with Markdown. Here are a few popular ones:

Typora: A cross-platform Markdown editor with a WYSIWYG interface.
MarkdownPad: A Windows-only Markdown editor with a live preview feature.
iA Writer: A macOS app that provides live previews and syntax highlighting.
Pandoc: A command-line tool for converting Markdown to other formats, such as HTML, PDF, or LaTeX.

Extensions to use

There are many extensions that you can use to enhance the functionality of Markdown. Here are some of the popular extensions:

Markdown All in One: This extension adds many useful features to Markdown, such as a table of contents, a live preview, and auto-completion.
Code Spell Check: Enhances accuracy by detecting and highlighting grammatical errors and misspellings.
markdownlint: This extension checks your Markdown content for syntax errors and formatting issues, helping you to write better Markdown by highlighting common errors.
Word Count: It counts the number of words, characters, and lines in your Markdown content. Word Count is a useful tool for tracking your progress and ensuring that your content meets your word count goals.
Markdown Emoji: It provides a library of emoji that you can easily add to your Markdown content. Markdown Emoji is a fun and easy way to add some personality to your writing and engage with your readers.

How I Use Markdown to Write Articles

To boost my productivity, I incorporate various tools along with the aforementioned extensions. These tools aid me in my writing and publishing tasks, as well as in note-taking and project management. I use specific tools for each task, including:

VS Code: for writing my articles.
Hashnode (and Dev.to): to publish personal articles
GitHub: For safekeeping and easy access, I back up my articles on GitHub. This ensures that my work is secure, and I can always refer to it in the future if needed.
Notion: Lastly, I use Notion as my project management tool and note-taking app. This versatile platform enables me to organize my tasks and ideas in one place, making it easier to stay on top of my work and manage my time more effectively.

By using these tools, I can quickly write Markdown articles in VS Code and easily publish and back them up.

Markdown Best Practices

Here are some best practices that you can follow when using Markdown for technical writing:

Don't use too many levels of heading: Use headings to break down your content into sections, but don't use too many headings. Too many headings can make your document look cluttered. Stick to using two or three levels of headings.
Use lists: Use lists to break down complex information into smaller, more manageable pieces.
Make links descriptive: When creating links, use descriptive anchor text instead of generic phrases like "click here" or "read more". This helps search engines understand the context of the link.
Link to external resources: When linking to external resources, use the full URL instead of a relative link. This helps search engines understand the context of the link. It also helps boost your SEO.
Add a table of contents: Add a table of contents to your document to make it easier for readers to navigate your content.
Use alt text for images: Use alt text to describe images, which helps search engines and screen readers understand what the image is about.

Wrapping Up

Markdown is a versatile and efficient tool for technical writers to create high-quality content. By utilizing the basic and advanced syntax of Markdown, along with keyboard shortcuts and extensions, technical writers can streamline their workflow and save time.

Now that you have learned the benefits and best practices of using Markdown for technical writing, it's time to start incorporating it into your writing process. With a little practice and experimentation, you'll be amazed at how quickly you can create polished and professional-looking documents.

Thanks for reading. Happy writing!

I'd love to connect with you on Twitter | LinkedIn | GitHub | Portfolio

Resources and Further Reading

Learn how React Context API works by Building a Minimal Ecommerce Shopping App

IsraelMitolu — Fri, 20 May 2022 10:14:00 +0000

So, this is a project that has been on my mind for a while, but I didn't put much thought or effort into building it.

Then Hashnode's Writeathon came up, and I thought, this is the perfect opportunity to write this article that will both help me improve my React knowledge and also help other developers who are learning about it for the first time or want to brush up on their knowledge of the subject. Win-win situation!

In this article, you'll learn about the React Context API, how it solves prop drilling, and how I built this simple shopping app with the following features:

Store current items
Update the context when the user clicks on the "Add to Cart" button
Display the cart count in the Navigation bar
Add and remove items from the Cart
Save cart items to local storage

Below is a screenshot of what we'll be building:

If that looks good, let's get started!

Prerequisites

This article assumes that you have :

A basic knowledge of HTML, CSS, JavaScript, and React.
Node and npm installed on your local development machine.
Code Editor(VS Code)

Overview of React Context

What is React Context?

React Context is a method used to pass data(and functions) from parent to child component(s), by storing the data in a store (similar to Redux), from where you can easily access and import the data into whatever components you choose.

This is a better alternative to prop drilling, which is the term used to describe the passing of data through several layers of components, even if those components have no actual need for the data.

When to use Context?

Context is designed to share data that can be considered "global" to the whole app. An example would be the currently authenticated user, a theme, or user preferences(for example, language or locale).

"Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult."

Source: Official Docs

Building the eCommerce Web app

Illustrations

Before we get into the code, let’s look at the component hierarchy to better understand the relationship between the components of the app.

The illustration below shows how data will be passed down from the root component level (App) to the component rendering what is to be displayed(items).

However, what we'll be using in our app is what Context solves:

As you can see, the Context is like a store in your application. And once it is set up, you can simply import it into whatever component needs that data.

Now that we have gone through a basic overview of React Context, let's jump right into the project.

Here is the live demo of what we'll be building, and if you also want to see the code, it's available on Github.

Project Set up

Let's start by creating a new React project. I will be using Vite in this tutorial. If you haven't heard about it, do well to check out my previous article on it.

Of course, feel free to use your bundler of choice: Vite or CRA.

# vite
npm init vite@latest react-shopping-cart --template react

# create react app
npx create-react-app react-shopping-cart

Once it is finished, run:

cd react-shopping-cart
npm install

Dependencies we'll be using:

React Router

npm install react-router-dom@6

Styled components

npm install --save styled-components

Note: We won’t be covering the styling to keep our code minimal; this is just to explain how the app works.

Also, I have included some comments in the code so that you understand their purpose.

Context Setup

In complex applications where the need for context is usually necessary, there can be multiple contexts, with each having its data and functions relating to the set of components that requires those data and functions.

For example, there can be a ProductContext for handling the components which use product-related data, and another ProfileContext for handling data related to authentication and user data.

However, for the sake of keeping things as simple as possible, we’ll use just one context instance.

In the src directory, create three folders: Context, components and pages.

Inside the Context folder create another folder, Cart.

Navigate to the Cart folder and add the following to a new file, CartTypes.js.

// /src/Context/Cart/CartTypes.js`:

export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_ITEM = "REMOVE_ITEM";
export const INCREASE = "INCREASE";
export const DECREASE = "DECREASE";
export const CHECKOUT = "CHECKOUT";
export const CLEAR = "CLEAR";

Here, we are defining the action types that our Context should have, and exporting them to be used within the Context.

Next, add the following to a new file, CartContext.jsx in the same directory to create the context:

import { createContext } from "react";

const CartContext = createContext();

export default CartContext;

Next, create a new file CartState.jsx inside the Cart folder. Add the following code:

import { useReducer } from "react";
import CartContext from "./CartContext";
import CartReducer from "./CartReducer";
import { sumItems } from "./CartReducer";

const CartState = ({ children }) => {
  //   Initial State of the cart
  const initialState = {
    cartItems: [],
    checkout: false,
  };

  //Set up the reducer
  const [state, dispatch] = useReducer(CartReducer, initialState);

  //Function to handle when an item is added from the store into the Cart
  const addToCart = (payload) => {
    dispatch({ type: "ADD_TO_CART", payload });
  };

  //Function to handle when an item that is in the cart is added again
  const increase = (payload) => {
    dispatch({ type: "INCREASE", payload });
  };

  //Function to handle when an item is removed from the cart
  const decrease = (payload) => {
    dispatch({ type: "DECREASE", payload });
  };

  //Function to remove an item from the cart
  const removeFromCart = (payload) => {
    dispatch({ type: "REMOVE_ITEM", payload });
  };

  //Function to clear the cart
  const clearCart = () => {
    dispatch({ type: "CLEAR" });
  };

  //Function to handle when the user clicks the checkout button
  const handleCheckout = () => {
    dispatch({ type: "CHECKOUT" });
  };

  return (
    //Add the functions that have been defined above into the Context provider, and pass on to the children
    <CartContext.Provider
      value={{
        showCart: state.showCart,
        cartItems: state.cartItems,
        addToCart,
        removeFromCart,
        increase,
        decrease,
        handleCheckout,
        clearCart,
        ...state,
      }}
    >
      {children}
    </CartContext.Provider>
  );
};

export default CartState;

Let's break the above code into bits.

First, the useReducer hook that is imported, accepts a reducer of type (state, dispatch) => newState, which then returns the current state. We also import the context files: CartContext and CartReducer.

Second, the initialItems is an array that defines the initial state of the cart when the page is loaded.

Third, in the CartContext.Provider, will render all of the props passed into it and will pass it through its children.

How the provider works is that the current context value is determined by the value prop of the nearest <CartContext.Provider>, and when it updates, the useContext hook will trigger a rerender with the latest context value passed to the CartContext provider.

Next, create a new file CartReducer.jsx, and add the following code:

// /src/Context/Cart/CartReducer.jsx

//Import the Action types
import {
  REMOVE_ITEM,
  ADD_TO_CART,
  INCREASE,
  DECREASE,
  CHECKOUT,
  CLEAR,
} from "./CartTypes.js";

// Export function to calculate the total price of the cart and the total quantity of the cart
export const sumItems = (cartItems) => {
  Storage(cartItems);
  let itemCount = cartItems.reduce(
    (total, product) => total + product.quantity,
    0
  );
  let total = cartItems
    .reduce((total, product) => total + product.price * product.quantity, 0)
    .toFixed(2);
  return { itemCount, total };
};

// The reducer is listening for an action, which is the type that we defined in the CartTypes.js file
const CartReducer = (state, action) => {
  // The switch statement is checking the type of action that is being passed in
  switch (action.type) {
    // If the action type is ADD_TO_CART, we want to add the item to the cartItems array
    case ADD_TO_CART:
      if (!state.cartItems.find((item) => item.id === action.payload.id)) {
        state.cartItems.push({
          ...action.payload,
          quantity: 1,
        });
      }

      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is REMOVE_ITEM, we want to remove the item from the cartItems array
    case REMOVE_ITEM:
      return {
        ...state,
        ...sumItems(
          state.cartItems.filter((item) => item.id !== action.payload.id)
        ),
        cartItems: [
          ...state.cartItems.filter((item) => item.id !== action.payload.id),
        ],
      };

    // If the action type is INCREASE, we want to increase the quantity of the particular item in the cartItems array
    case INCREASE:
      state.cartItems[
        state.cartItems.findIndex((item) => item.id === action.payload.id)
      ].quantity++;
      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is DECREASE, we want to decrease the quantity of the particular item in the cartItems array
    case DECREASE:
      state.cartItems[
        state.cartItems.findIndex((item) => item.id === action.payload.id)
      ].quantity--;
      return {
        ...state,
        ...sumItems(state.cartItems),
        cartItems: [...state.cartItems],
      };

    // If the action type is CHECKOUT, we want to clear the cartItems array and set the checkout to true
    case CHECKOUT:
      return {
        cartItems: [],
        checkout: true,
        ...sumItems([]),
      };

    //If the action type is CLEAR, we want to clear the cartItems array
    case CLEAR:
      return {
        cartItems: [],
        ...sumItems([]),
      };

    //Return the state if the action type is not found
    default:
      return state;
  }
};

export default CartReducer;

Now that we're done setting up the context, the next thing will be to wrap the App inside the Context.

To do that, navigate to the main.jsx(Vite) or index.js(CRA) in the root directory. Add the following code:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import CartState from "./Context/Cart/CartState";

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

So, now our entire app has access to the Context.

Building out the Components

For the App.jsx, we'll add the code that handles the application’s navigation.

import Navbar from "./components/Navbar";
import Store from "./pages/Store";
import About from "./pages/About";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Cart from "./pages/Cart";

function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Store />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/cart" element={<Cart />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Now, let's create the components we'll need for our app's basic navigation to function properly.

Create a new file Navbar.jsx inside the components folder, and add the following:

// General
import { useState, useEffect } from "react";
import { Link, NavLink } from "react-router-dom";
import CartIcon from "/assets/icons/cart.svg";
import styled from "styled-components";
import CartContext from "../Context/Cart/CartContext";
import { useContext } from "react";

const Navbar = () => {
  const [toggle, setToggle] = useState(false);
  const [innerWidth, setInnerWidth] = useState(window.innerWidth);

  // Get Screen Size
  useEffect(() => {
    const changeWidth = () => {
      setInnerWidth(window.innerWidth);
    };

    window.addEventListener("resize", changeWidth);

    return () => {
      window.removeEventListener("resize", changeWidth);
    };
  }, []);

  // Extract itemscount from CartContext
  const { cartItems } = useContext(CartContext);

  return (
    <Nav>
      <NavContainer>
        <Left>
          <Link to={"/"}>FASHION.</Link>
        </Left>

        <Right>
          <NavRightContainer
            style={{
              transform:
                innerWidth <= 500
                  ? toggle && "translateY(100vh)"
                  : "translateY(0%)",
            }}
          >
            <NavList>
              <NavItem>
                <NavLink to="/" onClick={() => setToggle(!toggle)}>
                  Store
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink to="/about" onClick={() => setToggle(!toggle)}>
                  About
                </NavLink>
              </NavItem>
              <NavItem>
                <a href="https://twitter.com/israelmitolu" target="_blank">
                  Contact
                </a>
              </NavItem>
              <NavItem>
                <Link to="/cart" onClick={() => setToggle(!toggle)}>
                  <p>Cart</p>
                  <NavCartItem>
                    <img src={CartIcon} alt="Shopping cart" />
                    {/* If the number of cartItems is greater than 0, display the
                    number of items in the cart */}
                    {cartItems.length > 0 && (
                      <CartCircle>{cartItems.length}</CartCircle>
                    )}
                  </NavCartItem>
                </Link>
              </NavItem>
            </NavList>
          </NavRightContainer>

          <MenuBtn onClick={() => setToggle(!toggle)}>
            <span></span>
            <span></span>
            <span></span>
          </MenuBtn>
        </Right>
      </NavContainer>
    </Nav>
  );
};

The above code sets up the Navigation bar, which will look like this:

In the pages folder, which is in the src directory, create Store.jsx, Cart.jsx and About.jsx.

For the Store.jsx,

import { products } from "../data";
import styled from "styled-components";
import ProductCard from "../components/ProductCard";

const Store = () => {
  return (
    <>
      <Heading>
        <h1>Browse the Store!</h1>
        <p>New Arrivals for you! Check out our selection of products.</p>
      </Heading>
      <ProductsContainer>
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </ProductsContainer>
    </>
  );
};

export default Store;

The Store contains the Product Cards, which are generated dynamically by mapping through the available products array which is exported from the data.js file:

export const products = [
  {
    id: 1,
    name: "Cerveza Modelo",
    price: 919.11,
    image: "/assets/img/1.png",
  },
  {
    id: 2,
    name: "Diesel Life",
    price: 1257.92,
    image: "/assets/img/2.png",
  },
  {
    id: 3,
    name: "Indian Cricket Team jersey",
    price: 1500.85,
    image: "/assets/img/3.png",
  },
  {
    id: 4,
    name: "One Punch man - OK",
    price: 1250.9,
    image: "/assets/img/4.png",
  },
  {
    id: 5,
    name: "Hiking jacket",
    price: 1750.85,
    image: "/assets/img/5.png",
  },
  {
    id: 6,
    name: "Real Heart",
    price: 3100.61,
    image: "/assets/img/6.png",
  },
  {
    id: 7,
    name: "Fredd - Black and White",
    price: 1801.1,
    image: "/assets/img/7.png",
  },
  {
    id: 8,
    name: "Star Wars - The Last",
    price: 1199.99,
    image: "/assets/img/8.png",
  },
  {
    id: 9,
    name: "Yellow Blouse",
    price: 2395.16,
    image: "/assets/img/9.png",
  },
  {
    id: 10,
    name: "Rick and Morty - Supreme",
    price: 1243.82,
    image: "/assets/img/10.png",
  },
];

The ProductCard component shows the product details for each product.

Note that we would import useContext and CartContext in all the components where we need the data that is stored in the context.

The onClick events in the buttons handle the addToCart and increase functions which we have extracted from the CartContext:

import styled from "styled-components";
import { Link } from "react-router-dom";
import { formatCurrency } from "../utils";
import CartContext from "../Context/Cart/CartContext";
import { useContext } from "react";

const ProductCard = ({ product }) => {
  // Extract these functions from the CartContext
  const { addToCart, increase, cartItems, sumItems, itemCount } =
    useContext(CartContext);

  //Check whether the product is in the cart or not
  const isInCart = (product) => {
    return !!cartItems.find((item) => item.id === product.id);
  };

  return (
    <CardWrapper>
      <ProductImage
        src={product.image + "?v=" + product.id}
        alt={product.name}
      />
      <ProductName>{product.name}</ProductName>
      <ProductCardPrice>{formatCurrency(product.price)}</ProductCardPrice>
      <ProductCardButtons>
        {isInCart(product) && (
          <ButtonAddMore
            onClick={() => {
              increase(product);
            }}
            className="btn"
          >
            Add More
          </ButtonAddMore>
        )}

        {!isInCart(product) && (
          <Button onClick={() => addToCart(product)}>Add to Cart</Button>
        )}
      </ProductCardButtons>
    </CardWrapper>
  );
};

For the code below, we will extract the state and functions that we need for the Cart component, which are: cartItems, checkout and clearCart.

Then, if there are any items in the cartItems array, render the items as CartItem components to the page:

import CartItem from "../components/CartItem";
import { useContext } from "react";
import CartContext from "../Context/Cart/CartContext";
import styled from "styled-components";
import Checkout from "../components/Checkout";
import { Link } from "react-router-dom";

const Cart = () => {
  // Extract the functions from the Context
  const { cartItems, checkout, clearCart } = useContext(CartContext);

  return (
    <>
      <Heading>
        <h1>
          Shopping Cart
          <span>({cartItems.length})</span>
        </h1>
      </Heading>

      {/* Show the checkout message when the Checkout Button has been clicked */}
      {checkout && (
        <CheckoutMsg>
          <h4>Thank you for your purchase!</h4>
          <p>
            Your order has been placed and will be delivered to you within 24
            hours.
          </p>
          <Link to="/">
            <ShopBtn onClick={clearCart}>Continue Shopping</ShopBtn>
          </Link>
        </CheckoutMsg>
      )}

      <Layout>
        <div>
          {
            <CartItemWrapper>
              {/* If cart is empty, display message, and if not, display each cart
            Item in cart: {cartItems.length} */}
              {cartItems.length === 0 ? (
                <h4 style={{}}>Cart is empty</h4>
              ) : (
                <ul>
                  {cartItems.map((product) => (
                    <CartItem key={product.id} product={product} />
                  ))}
                </ul>
              )}
            </CartItemWrapper>
          }
        </div>

        <div>
          {/* Checkout component  */}
          {cartItems.length > 0 && <Checkout />}
        </div>
      </Layout>
    </>
  );
};

The CartItem component contains the items that are present in the current state. And, we'll extract some functions from the CartContext, namely: removeFromCart, increase and decrease:

import { useContext } from "react";
import CartContext from "../Context/Cart/CartContext";
import styled from "styled-components";
import { formatCurrency } from "../utils";
import TrashIcon from "/assets/icons/trash-outline.svg";
import Plus from "/assets/icons/add-circle-outline.svg";
import Minus from "/assets/icons/remove-circle-outline.svg";

const CartItem = ({ product }) => {
  const { removeFromCart, increase, decrease } = useContext(CartContext);

  return (
    <SingleCartItem>
      <CartImage src={product.image} alt={product.name} />
      <div>
        <h5>{product.name}</h5>
        <p>{formatCurrency(product.price)}</p>
      </div>

      {/* Buttons */}
      <BtnContainer>
        <button
          onClick={() => increase(product)}
          className="btn btn-primary btn-sm mr-2 mb-1"
        >
          <Icon src={Plus} alt="" />
        </button>

        <div>
          <p>Qty: {product.quantity}</p>
        </div>

        {/* Display a minus icon or trash/delete icon based on the quantity of a particular product is in the cart */}
        {product.quantity > 1 && (
          <button onClick={() => decrease(product)} className="btn">
            <Icon src={Minus} alt="" />
          </button>
        )}

        {product.quantity === 1 && (
          <button onClick={() => removeFromCart(product)} className="btn">
            <Icon src={TrashIcon} alt="" />
          </button>
        )}
      </BtnContainer>
    </SingleCartItem>
  );
};

Adding Cart Management

Now that we can add, remove, and display products, the final thing to do is implement our cart management. We have already initialised the cart as an empty array in CartState.jsx, meaning that once we restart the app, it will revert to being empty.

Now, what we will do is make sure that we load the existing cart from the local storage on component load.

Update the initialState method in CartState.jsx as follows:

const initialState = {
  cartItems: storage,
  ...sumItems(storage),
  checkout: false,
};

Next, we need to define the storage, also in the CartContext.jsx:

//Local Storage
const storage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];

Finally, in the CartReducer.jsx, we will define Storage:

const Storage = (cartItems) => {
  localStorage.setItem(
    "cartItems",
    JSON.stringify(cartItems.length > 0 ? cartItems : [])
  );
};

And export the function to calculate the total price of the cart and the total quantity of the cart

export const sumItems = (cartItems) => {
  Storage(cartItems);
  let itemCount = cartItems.reduce(
    (total, product) => total + product.quantity,
    0
  );
  let total = cartItems
    .reduce((total, product) => total + product.price * product.quantity, 0)
    .toFixed(2);
  return { itemCount, total };
};

With this, we've successfully completed the implementation of the Shopping App.

Check out the live demo and the code repository on Github.

Conclusion

And we're done!

In the course of this article, we discussed Context and its use and used React to scaffold the interface of a minimal shopping app. We also used context to move data and methods between multiple components and added its functionality using useReducer and dispatch.

If you found this post useful (and I'm sure you did), do well to share this resource with your friends and co-workers, and follow me for more content. If you have a question or find an error or typo, kindly leave your feedback in the comments section.

Thanks for reading, and happy coding!

Animating in React (The Many Ways!)

IsraelMitolu — Tue, 10 May 2022 17:51:29 +0000

This article introduces you to the different options for creating animations in React, in the process we will look at the pros, and cons of using each technique, and some important statistics, so you know when to use which of them.

Depending on the complexity of your animation, some techniques would be fine as they are, and others that are optimized to handle more complex animations.

Here are the several methods we will discuss in this article.

Straight up CSS
React Transition Group
React Motion
React Spring
Greensock Animation Platform(GSAP)
Framer Motion

Let's get right into it!

1. Straight up CSS

When building a simple web animation, this is a great option. Using CSS enhances your site performance by requiring only a small amount of resources from your browser and machine’s RAM, giving your app a decent feel when using transitions.

You also get some control by using the animation property and its sub-properties such as animation-delay and animation-iteration-count.

CSS is best when you have simple transitions like toggling the states of UI elements or doing a fadeIn or fadeOut animation.

However, suppose you want to chain more than three animations in a row. In that case, you should use a JavaScript (JS) library instead of CSS because CSS sequencing becomes complicated with delays, and you'll end up with a lot of recalculations if you miss the timing.

Now, let's look into the JS/ React libraries for animation.

2. React Transition Group

React Transition Group offers a straightforward approach to animations and transitions by providing its in-built components such as TransitionGroup for defining animations.

It also exposes transition stages, manages classes, grouping elements, and manipulates the DOM in useful ways making animating very convenient.

Another exciting feature is that it's relatively small and won't add to the size of your bundle, and you can also use the CDN.

Here are some stats on React Transition Group:

Popularity: 9.2k stars on Github, and more than 8.4 million weekly downloads on NPM.
Documentation: Its docs are beginner-friendly; include Codesandbox examples to better illustrate.
Support for Typescript: React transition group comes with the backing for TypeScript out of the box, and it can be installed using the command below:

npm install @types/react-transition-group

Bundle size(minified): 13.5kB

Overall, it's a good animation library to consider for your next React project.

3. React Motion

React Motion is an animation library for React applications that makes realistic animations easier to build and implement.

It makes use of physics to create animations that feel natural. All you have to do is provide values for stiffness and damping within one of its components.

stiffness refers to the speed with which the destination value is reached.
damping is the friction encountered by the animated component during the transition.

Sequencing animations using React Motion, however, is not as easy and readable as some of the alternatives due to its complex nature.

Now, let's see some stats:

Popularity: 20.8k stars on Github, and more than 611k weekly downloads on NPM
Documentation: They have well-documented examples of their features, and you can copy the source code of a given component.
Support for Typescript: You can use Typescript with React Motion by using the type definitions.
Bundle size(minified): 19.8kB

4. React Spring

React Spring is a spring-physics based animation library that follows a modern approach to animation.

It’s highly flexible and covers most animations needed for your User interface.

React spring inherits some properties from React Motion, such as ease of use, interpolation, and performance.

One really cool special about React Spring is the ability to apply animations without relying on React to render updates frame by frame.

Now, let’s see how React spring stacks up against other React animation libraries:

Popularity: 23.1k stars on Github, and more than 727k weekly downloads on NPM
Documentation: Well-written and beginner-friendly documentation. You can copy a code snippet from the documentation and test or preview CodeSandbox.
Support for Typescript: You can install the package for NPM or Yarn
Bundle size(minified): 172kB!

5. GSAP

The Greensock Animation Platform (GSAP) is a great animation library for the web because it enables you to animate just about anything that can be accessed with JavaScript, including DOM Elements, SVGs, generic objects, canvases, and more.

GSAP is a great tool to build simple to very complex physics-based animations. It allows developers to sequence motion and controls the animation dynamically.

GSAP is also a great choice because it is:

flexible
lightweight
fast (estimated to be 20x faster than jQuery),
has a large and supportive community via the forums.

Now, for the report card,

Popularity: 14.1k stars on Github, and more than 270k weekly downloads on NPM
Documentation: Has well detailed docs with Codepen examples. If you need any help, ask on the GreenSock [forums]
Support for Typescript: Use the Typescript definitions on Github
Bundle size(minified): 62.1kB

While you're here, check out this article to learn how to build a sleek preloader animation :)

6. Framer Motion

Framer Motion is a popular React animation library. Like GSAP, Framer Motion allows us to apply both simple and complex animations and transitions to DOM elements defined in React components.
Its syntax is easy to understand which helps you make animations faster and also improves the code readability.

Overall, Framer Motion is a very strong, highly customizable, and powerful library:

Popularity: 14.5k stars on Github, and more than 1.1 million weekly downloads on NPM
Documentation: Easy to understand and beginner-friendly; you can find the source code of a given component in the docs and also view it in CodeSandbox.
Support for Typescript: Framer motion supports Typescript off the bat. Even if the files are in TypeScript, you can write regular ES6/JavaScript and they will still work.
Bundle size(minified): 140.7kB

Although it could get bulky as your animation elements grow, and also has a much larger bundle size when compared to some other libraries, its widely used nowadays, and merits consideration for your next React project.

Conclusion

There are a lot of options when it comes to creating user-friendly animations and transitions in your React applications. Many of which are easy to get started with and customize.

In this article, you have been introduced to some of these libraries, and hopefully, with the comparisons, you can choose the option that best suits your animation needs for your next React project.

Also, if you have used any other animation libraries, kindly share them in the comments section!

Thanks for reading, and have fun animating ;)

Before you go, check out this list of other library animations:

React-animations — the library is built on all animations with animate.css. It is easy to use and has a lot of animation collections.
animated — Declarative Animations Library for React and React Native
Anime.js — Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
wow — Reveal Animations When You Scroll. Very Animate.css Friend.
react-move — Beautiful, data-driven animations for React.
velocity — Velocity is an animation engine with the same API as jQuery’s $.animate().

Why You Should Ditch Create-React-App for Vite

IsraelMitolu — Thu, 05 May 2022 09:22:48 +0000

Create React App (CRA) has long been the go-to tool for many developers of all skill levels when it comes to constructing a React app (beginners, intermediate and even experts). It does, however, have some significant drawbacks, which are speed and performance.

It is well known that CRA can be somewhat slow while building a project and setting up a development server, requiring around 5-10 minutes (depending on factors like hard disks, and internet connectivity issues). Time typically adds up, which is why I'm going to introduce you to a tool called Vite. Vite is a build tool similar to Webpack (CRA uses Webpack beneath the hood). More information is available here).)

In this article, I'll walk you through the process of building a React App with Vite. You will learn the differences between CRA and Vite, as well as some of its features and benefits, and also how to create a React App with Vite.

What is Vite?

Vite, pronounced /vit/, like "veet" is the next generation in frontend tooling. It focuses on speed and performance by improving the development experience for modern web projects.

Vite is created by Evan You, who is the creator of Vue.js, but it's not a Vue-only tool. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements.

It consists of two major parts:

A dev server which provides support for Hot Module Replacement (HMR) for updating modules during the execution of the application. When changes are made to the source code of an application, only the changes are updated, rather than the entire application. This feature helps speed up development time.
A build command that bundles your code with Rollup, pre-configured to output highly optimised static assets for production.

How does Vite work?

At its core, Vite does 2 things

Serve your code locally during development.
Bundle your Javascript, CSS and other assets together for production.

There are other tools(bundlers) that do the same thing, such as webpack, Parcel and Rollup, so what makes Vite different?

The problem with the tools mentioned above is that they have to build everything on every save, and if you have a very large application, that could take several minutes every time you save, even with Hot reloading in some frameworks, the update speed gets significantly slower as you add more code and dependencies to the app.

Vite has taken a different approach to this, kind of a reverse approach. Vite starts the server right away, takes the dependencies that don't change often, and pre-bundles them using esbuild.

Esbuild is a Javascript build tool written in Go, which pre-bundles dependencies 10-100 times faster than Javascript-based bundlers.

Let's take a look at the illustrations below to get a better understanding of how it works.

The above diagram represents a traditional bundle based development server, where we have an entry point, the possible routes and all the modules, which are then bundled together, and then the development server is ready.

Vite, on the other hand, uses route-based code-splitting to figure out what parts of the code actually need to be loaded, and doesn't have to pre-bundle everything.

Vite serves the source code using native ES Module support in modern browsers. This lets the browser take the job of bundling in development, which consequently makes your code to load instantly, no matter how large the app is.

It also supports Hot Module Replacement for an extremely fast feedback loop during development.

When building for production, Vite uses Rollup under the hood, so you don't have to worry about configuring it.

Why use Vite over CRA?

You may be asking why you should use Vite now that we've covered what it is and how it works.

We've gone through a few benefits in the previous section, so I will just highlight them here.

Performance

Pre-bundling with ESbuild makes it 10 to 100 times faster than using any other JS bundler. This is because it helps improve page speed and convert CommonJS / UMD modules to ESM.

Hot Module Replacement(HMR)

Vite uses HMR capabilities to keep track of changes in your application without reloading the full page. With the HMR API, the browser will only load the modified section of the page and still retain the application's state.

You don't need to manually set these up - when you create an app via create-vite, the selected templates would have these pre-configured for you already.

Native ECMAscript module support

Vite supports ES modules natively. It allows you to develop for the browser with bare imports like Typescript and it converts them into properly versioned imports on build.

Rich Features

Out-of-the-box support for TypeScript, JSX, CSS and more.

Check out other Features here.

Prerequisites

Before using Vite, you'll need a couple of prerequisites:

Node.js version 12.2.0 or higher
Package manager - Npm or Yarn
Compatible browser for development

The third requirement is a browser that supports dynamic imports. You can check to see if your browser is supported by visiting: https://caniuse.com/es6-module-dynamic-import.

Most modern browsers are supported, with the exceptions being Internet Explorer, Opera Mini, and the Baidu browsers. But if you're on a somewhat recent version of Chrome, Edge, Safari, or Firefox, you should be all set.

Creating a Project with Vite

To create a Vite application, open your terminal and navigate to the folder where you want to save the Vite program. Then run this command:

npm create vite@latest

You'll be prompted to select a framework and a variant(template). In our case, we'll be using React, so select React.

You can also directly specify the template you want to use and the project name in one single line:

npm init vite@latest my-react-app --template react

Note: my-react-app is the name of the Vite application that we want to create. You can change it to whatever name you prefer

Next, run the following commands in the terminal

cd my-react-app
npm install
npm run dev

Moving on... Running the above command will start the development server. Then open your browser and enter http://localhost:3000.

You should see a React logo with a counter and a button, as shown below:

Conclusion

There we go! We've looked at what Vite is, how it works, and some of its features. We also learned how to set up applications using Vite.

For this project, the create vite app command was set up in 10 seconds. After which I ran npm install to install dependencies, which took 35 seconds. So, all in all, the project was set up in 45 seconds. Which I'm sure you'll agree is way faster than CRA ;-)

I would love to hear your thoughts in the comments section, and if you enjoyed this post or found it insightful, kindly share it with your friends and colleagues. Also, consider subscribing to my blog.

Till next time, thanks for reading, and happy coding!

Before you go, here are some community maintained templates to check out.

Writing Cleaner CSS using BEM Methodology

IsraelMitolu — Sat, 12 Mar 2022 09:05:53 +0000

Have you ever come across this syntax and assumed it was autogenerated and didn't give it much thought? There's a good chance you have.

what__is--this

That's what we'll look at in this article, where you'll learn about BEM, its advantages, and whether or not you should use it in your next project.

What is BEM?

The Block Element Modifier methodology (abbreviated BEM) is a popular naming convention for HTML and CSS classes that helps to keep your code organized and maintainable.

What is a "Maintainable code"?
Maintainable code is code that is simple to modify or extend, which implies it takes less time to make changes without affecting other things.

How does BEM Work?

A BEM class name consists of 3 entities:

Block: A standalone entity that is meaningful on its own e.g Navbar, button, image, footer, section, container.
Element: A part of a block that has no standalone meaning and is semantically tied to its block. E.g title, item, list, checkbox.
Modifier: Is used to change the appearance, behaviour or state of a Block or Element. e.g background, focus, hover, checked.

When all three are combined in a class name, it is written as:

[block]__[element]--[modifier]

Let's take a look at the illustration below to get a better understanding of how BEM works.

From the illustration,

The card is the Block, which can also be seen as a parent container.
The card__image, card__description, card__button are all Elements, which are semantically connected to the card Block. They can also be seen as child items, and are denoted by two underscores following the name of the block.
The card__button--hovered is a Modifier that manipulates the card__button so that we can style it without inflicting changes on any completely unrelated module. This is done by appending two hyphens to the name of the element.

Why Use BEM?

BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
It communicates the purpose of your selectors
BEM helps you think systematically about CSS organization. This enables you to work efficiently both alone and in teams.
BEM has a unique style to create CSS class names, we won't run into conflicts with other class names.

When to use BEM

BEM is mostly used when you have a project that has multiple pages, HTML selectors and a large code structure, which tends to be difficult to maintain the code and may even lead to issues of specificity and inheritance.

BEM is not required in cases when you can already scope your components, such as styled-components or CSS modules.

Profile Card example

Here's a profile card I created to show how BEM is utilized. This is the card's final preview.

Before we go any further, I'd like you to try to figure out which of the components on this card is a Block, Element, or Modifier.

Awesome! You got it right.

Now, on to the code.

After seeing those classes pile up in the HTML file, you might think that's a lot of classes for a simple card, and you'd be right.

Recall that we learned earlier that we won't conflict with other class names since "BEM has a unique style for producing CSS class names". Because the fact is that the more CSS you have in a project, the more things build up, and the more specificity and complexity issues you face.

Also, note that you should not leave a modifier isolated. Always keep modifiers together with the element class as seen on line 80 in the HTML, card__button comes before the card__button--hovered.

View Compiled CSS

I use SASS in this case since it allows me to easily nest my classes without having to type .card every time. But don't worry if you don't understand SASS; you can view the compiled CSS by following the arrows in the screenshots below.

1. Click Dropdown

2. Click "View Compiled CSS"

Check out my article on freeCodeCamp to help you get started with SASS.

Summary

The goal of a methodology like BEM is to have a set of guidelines that help with understanding and keeping CSS maintainable, so even if you don't strictly follow it, it's a great way to guide the way you write your code.

Regardless of approach, it must be readable and maintainable. Consider using BEM for an easy way to keep your code clean and clear.

Conclusion

Thanks for reading as always. If you found this post insightful (and I'm sure you did 😉), do well to share this article with your friends and co-workers, and follow me for more content. If you have a question or find an error or typo, kindly leave your feedback in the comments section.

Check out the live demo and the code repository on Github.

How to Easily Host a Website for Free Using Netlify

IsraelMitolu — Mon, 21 Feb 2022 13:33:21 +0000

So you've built a website with a fantastic UI or a fantastic feature. It may be a personal portfolio project or a YouTube tutorial you were watching.

And you'd like to spread the word about the website you've built. It runs well on your computer, and you think it's ready for the rest of the world to see.

However, you are unsure of where to begin. This is where Netlify enters the picture.

Netlify is a hosting platform that allows you to easily launch websites and web apps without having to manually configure and manage them.

It includes plenty of features that make it a favourite among today's web developers:

Deploy in seconds
Continuous integration and Continuous Deployment(CI/CD)
Instant Forms: You can collect data from users without having to build a backend
Prevent spam submissions on Forms
Easily deploy websites from Github, Gitlab or Bitbucket
Host using a custom domain, or Netlify’s own customizable domains.
Analytics for your sites
Server-less Functions
Netlify CMS to manage your blog posts

Other features can be found here.

In this article, you'll learn how to deploy a static site on Netlify, as well as some of Netlify's features.

Prerequisites

You'll need a Github account to follow along with this tutorial(or, Gitlab or Bitbucket). To create one, head over to Github to sign up. This is important since that is where you will store your source code.

Step 1: Sign up on Netlify

Head over to the Netlify homepage, click on Sign up.

Select your preferred signup method.

Step 2: Add a new site

After signing up, you’ll be redirected to a dashboard where you can add your site.

Now, to add a site, click on the Add new site button. The dropdown will display 3 options to add a new site.

Import an existing project
Start from a template
Deploy manually.

We'll choose the first option, which is to import an existing project. The other two methods will be discussed briefly later in this article.

Step 3: Connect to a Git provider

Choose the Git provider for your website's source code. Github in this case.

Step 4: Choose the Repository

Select the repository and branch you want to deploy from

Step 5: Configure the site’s settings

The options for deploying the website can be configured here. Set the Deployment Branch option to main (or whichever branch you intend to deploy).

You can go ahead and click Deploy Site if it's a simple static page.

But, if you're using a build tool or want to add some other options, you'll need to configure the build settings.

Step 6: Deploy your website

You will now be directed to the Site overview page of the newly created webpage. The automated build process takes place here. With Netlify, the deployment process takes around a minute or less.

Your website has now been launched and is accessible via the internet. To check it out, click on the green link.

Additional Points

Custom Domain

Awesome! You have launched your website 🎉. But before you share it with the world, you should change the domain name to something more in line with what the project is showcasing, and not just a random domain name.

Luckily for us, Netlify allows us to change the site name from the randomly generated one, to do that, click on Domain Settings

Toggle the Options dropdown and select Edit site name from the list. After that, type in the name you want to use, and save it.

If you want to use a custom domain, check out the docs on how to do so.

Netlify Drop

Remember how we said in Step 2 of the first method that there are three ways to add a new site to Netlify? The "Deploy manually" approach, also known as Netlify Drop, is used here.

You can create a new site by simply dragging a project folder on your computer to the deploy dropzone in your browser.

Check out the docs for more information.

Netlify Templates

The other way of adding a new site is by using Netlify Templates. This is mainly used to create Jamstack sites, or when you want to add Netlify CMS to an existing site.

Make changes to your deploy

Anytime you link Netlify to your Git provider, such as Github, it immediately updates when it detects a new change to the branch/repo that is connected.

After you have made a change to the code in your text editor, all you have to do is drag and drop the folder again into the deploy dropzone.

Your sites are secured

Another interesting thing about Neltify is that your sites are HTTPS enabled(Hypertext Transfer Protocol Secure) with its Transport Layer Security (TLS) protocol option with a Let's Encrypt certificate.

All of this ensures that your Netlify-hosted sites are:

Secure: Protects users' information from being stolen, particularly when forms or data are being submitted.
SEO optimised: Would rank higher than sites that are not secured.

Conclusion

Congratulations! Your website is live, up and running. And you can now share with anyone using the customised URL.

That's it. Setting up your website on Netlify is as simple as that. I hope you found this post to be helpful. If you liked it, please leave a like and a comment.

Now go off and create amazing things, and share what you've created with the rest of the world!

Using Custom Cursors with Javascript for a Better User Experience

IsraelMitolu — Fri, 11 Feb 2022 18:05:38 +0000

Have you seen the popular trend where websites use a customized cursor that is different from the standard cursor and makes the site stand out from other websites? You might even be curious about how those cursors are created.

That's something I've had a lot of experience with, starting when I visited the website for the creative and expressive Studio Job. I was really sucked in. It was unlike anything I'd ever seen before!

And in this article, I'll show you how to make your own custom cursors and discuss when you should use one for your next project. But, before we get started making custom cursors, let's define what they are.

Why use a Custom Cursor?

Custom cursors are used in web design to add more personality to your website and also to give the users an awesome experience. This simple addition makes your website stand out.

Consider the following scenario:

You've been given the task of creating a modern website, such as a portfolio site with animations, parallax effects, and moving items.

Using a standard cursor on the design will most likely seem out of place.

This is a great example of how a custom cursor may improve the user experience.

You can also use them to direct visitors to where they should go and what they should do, providing a more engaging experience.

With that in mind, we will create a custom cursor on a landing page to learn how we can maximise this feature for better UX(User Experience).

The image below shows a preview of the final design:

Prerequisites

This article assumes that you have:

Knowledge of HTML
Knowledge of CSS (SCSS)
Knowledge of Javascript (ES6)
A code editor and browser

How do custom cursors work?

We use a custom cursor by changing the default cursor to the image that we want.
Like so:

body {
 cursor: url('image-path.png'), auto;
}

The next value of the property is a fallback, auto which sets the cursor to the default, just in case the image hasn’t loaded or if it can’t be found. Adding this fallback is important so your website won’t be cursor-less.

The cursor property can also be added to different elements and is not restricted to just the body.

For example, check out the codepen below:

Creating the Custom cursor

This section has been broken down into different steps to make it easier to understand.

Step 1: Set up the Project

To code along with me, you can clone or download the landing page design which is located in the starter folder.

To begin, start the development server in the IDE and open up your browser.

This is the resulting layout, where the custom cursor will be placed.

Step 2: Add the cursor divs

In the index.html, add the following code immediately after the <body> tag

<div class="cursor-ball"></div>
<div class="cursor-outline"></div>

The first div represents the ball cursor, while the second represents the larger cursor.

Next, we would style these empty divs in CSS

Step 3: Style the cursor divs

In the scss/cursor folder, inside _cursor.scss, we will add the styling for the cursor.

First, we style the two cursors.

.cursor-ball {
  width: 8px;
  height: 8px;
  background-color: #000;
}

.cursor-outline {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  transition: all 0.5s ease;
}

As we progress, you'll see the effect of the transition.

The output 👇

Isn't that going to make a terrible cursor? It's all square-shaped and boxy.

As a result, we'll add some styles that are shared by both cursors:

.cursor-ball,
.cursor-outline {
  border-radius: 50%;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%)
}

The code block above contains a border-radius which makes the divs into circles.

We add a position of absolute so that we can alter the mouse cursors' top and left locations in Javascript.

The z-index of 100 makes the two cursors to be on top of any other element on the web page.

Note: Make sure the mouse has the highest z-index in any project you implement a custom cursor so that the cursor won’t be hidden at any point in time.

The pointer-events of none disables any pointer events on the divs, in this case, so that we can select other elements behind the cursor divs. To understand better, see the documentation

The transform property moves the element to the centre.

Now you should see a bit of the cursor at the top-left corner of the screen.

Step 4: Move the cursor around the screen

Now, let's get this cursor moving!

In the app.js file, we will start by grabbing the elements we need:

let cursorBall = document.querySelector(".cursor-ball");
let cursorOutline = document.querySelector(".cursor-outline");

Now, let’s add an event listener to get the exact coordinates of the mouse — when the mouse moves:

document.addEventListener("mousemove", (e) => {
  cursorBall.style.top = e.pageY + "px";
  cursorBall.style.left = e.pageX + "px";

  cursorOutline.style.top = e.pageY + "px";
  cursorOutline.style.left = e.pageX + "px";
});

Because we styled the cursors with a position of absolute, we can now modify the top and left properties of both the cursorBall and cursorOutline dynamically using Javascript.

e.pageY returns the coordinates on the Y-axis (vertical) for every event e of a mouse moving on the screen.

While e.pageX returns the coordinates on the X-axis (horizontal) for every event e of a mouse move.

Here’s the result 👇

You’d notice that there is a delay in how the bigger cursor, cursorOutline catches up to the smaller cursor. And that is because of the transition of all 0.5s ease that we added when styling the .cursor-outline.

Side note: You can experiment with different values for the animation-duration. Here, we used 0.5s, and you can even try without any transition property.

Furthermore, to completely remove the default pointer cursor, we would add the following code into the body tag found in the stylesheet cursor: none;

This will make sure that only our custom cursor shows.

We can afford to do this because we're working with pure CSS, which loads and renders quickly.

However, if we choose an image that may not load up in time due to a network fault, the User Experience would be poor.

In such scenarios, add the image location url and the fallback of auto, as we discussed in an earlier section.

Great job so far! 😃

This is how our web page should look now 👇

Now, what we've done so far is fine, but I'd like to see us take it a step further by adding more functionality depending on mouse events.

More Event Listeners

To make the webpage more interesting, let’s add more functionality to the cursor:

Mouseup and Mousedown

In the app.js file, we will utilise the mousedown and mouseup event types which will listen for when the mouse button is being pushed.

document.addEventListener("mousedown", (e) => {
  if (e.button === 0) {
    cursorOutline.classList.add("cursor-mousedown");
  }
});

document.addEventListener("mouseup", () => {
  cursorOutline.classList.remove("cursor-mousedown");
});

For the mousedown effect to work on only the left mouse is clicked, we use the button property to select what part of the mouse will be used. Check the documentation for more info on the button property.

The code then translates to: “If the left mouse is being clicked, add the class of cursor-mousedown to the cursorOutline.

And on the event of mouseup, when the mouse is released from being pushed, remove the cursor-mousedown class.

Then, head over to the scss/cursor/_cursor.scss to add the styling for this new effect:

.cursor-mousedown {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #000;
  background-color: #8454f4;
}

This is the resulting effect 👇

Mouseover and Mouseleave

In the app.js file, to get all the social media links from the DOM, use a querySelectorAll on the parent element of the links:

let links = document.querySelectorAll(".social-links a");

Now, using the ES6 syntax, the forEach method to listen for events on each social-link link:

links.forEach((link) => {
  link.addEventListener("mouseover", () => {
    cursorOutline.classList.add("scale-link");
    link.classList.add("hovered-link");
  });

In the code above,

We’re listening for a mouseover event on each of the link.
We’re adding a class of scale-link to the cursorOutline in Javascript, and later set it up in SCSS
We’re adding a class of hovered-link to the link to change the appearance of the individual links when the cursor hovers over them.

The styling for the new classes:

.scale-link {
  transform: scale(1.5);
  background: #000;
}

.hovered-link {
  color: #fff;
}

This means that when the cursor hovers over any of the link,

the cursorOutline will expand/scale to 1.5 times its original size.
The hovered-link will change the text colour of the links.

This is the result we have 👇

The scaling works alright, but there are a few things you’ll notice:

The cursorOutline still remains active even though the links were no longer being hovered on.
The cursor is no longer centred.
The link does not turn white. Did the hovered-link class not work?
The link goes under the mouse.

These were the challenges I discovered while working on it, and you may experience them as well; here's how I dealt with them.

To solve issue #1

This is where we introduce the mouseleave event which is fired when the cursor moves out of the target element.

Still in the forEach block, add the following code:

link.addEventListener("mouseleave", () => {
    cursorOutline.classList.remove("scale-link");
    link.classList.remove("hovered-link");
  });

Basically, we just remove the scale-link and hovered-link when the mouse moves out of the link.

To solve issue #2

The problem here is that the cursorOutline does not scale as it should.

We'll experiment with the transfom-origin property here:

  transform-origin: 130% 100%;

This defines the point around which a transformation is applied. In this case, we set it to 130% on the left and right, and 100% on the top and bottom.

Check out MDN to learn more about this property.

Here’s what we get after solving issues 1 and 2 👇

Side note:
If you want the pointer cursor to be displayed, add cursor: none; to the specific element(s)

To solve issue #3

The hovered-link does work, but if we take a look using Chrome Dev Tools, the actual source of the problem is that the link's colour takes precedence over this new class.

To fix this, we can use the !important property, and it will work. But using this property isn’t advisable to use because it generally breaks the natural cascading of stylesheets. It should be used sparingly.

A better option is to be more specific with the styling by using

a.hovered-link {
  color: #fff;
}

To learn more about specificity and the !important property here.

To solve issue #4

If you recall, we gave our cursors a z-index of 100 so that they would be on top of every element on the page, including the links.

So here's a quick fix:

Add a z-index of 100 to the elements to which you want to apply the effect, such as the social media links.

Final Result 👇

Awesome! We were able to resolve the issues we were having. We’re also done adding the custom cursor, and we have explored several interactions using the mouse event listeners. 😎💪

Responsiveness

Lastly, before we can deploy the project, we need to add a media query that prevents the custom cursor from appearing on devices without a pointing device.

Because not everyone uses a mouse or trackpad, forcing them to use a custom cursor is pointless, thus we must disable it:

In scss/responsive/_responsive.scss,
We will create a mixin that we will then *include * in the _cursor.scss

@mixin anyPointer {
  @media (any-pointer: fine) {
    @content;
  }
}

Let's include the mixin to _cursor.scss, where we've already applied styling for both cursors.

We would set the display to none by default, and using the @include rule, we set the display to block so that the cursor will be displayed only if the user is using a pointing device (such as mouse or trackpad):

.cursor-ball,
.cursor-outline {
   ...

  display: none; 
  @include anyPointer {
    display: block; 
    pointer-events: none;
  }
}

Conclusion

Finally, a big yay! 🥳 We've created a cool custom cursor, and you've learned about custom cursors and how they can impact your website's user experience.

If you found this post useful (and I'm sure you did), do well to share this resource with your friends and co-workers, and follow me for more content.
If you have a question or find an error or typo, kindly leave your feedback in the comments section.

Also, kindly share what you think. Do you think it's a good idea to have a custom cursor? Are there any other instances when it won't be required? Leave your response in the comments section.

Inspirations from the web

How to Create a Sleek Preloader Animation Using GSAP Timeline

IsraelMitolu — Tue, 25 Jan 2022 11:46:52 +0000

Have you ever come across a website with a fluidly animated preloader that drew you in and grabbed your interest from the first glance? It made you want to reload the page over and over again.

Last week, while browsing the internet, I came across Enyata's website, and after seeing the preloader, I was pretty impressed, so I thought, "Why not develop it out?" And that's exactly what I did.

So, in this article, I'll show you how to use the timeline feature of the Greensock Animation Platform (GSAP), and at the end, you'll be able to make this preloader.

Let's get started!

Prerequisites

This article assumes that you have:

Basic understanding of HTML and CSS
Basic understanding of Javascript
A code editor (VS Code recommended)
A web browser (Chrome or Firefox recommended)

What is GSAP?

The Greensock Animation Platform (GSAP) is arguably one of the best animation libraries for the web because it enables you to animate just about anything that can be accessed with JavaScript, including DOM Elements, SVGs, generic objects, canvases, and more.

GSAP is also a great choice because it is:

flexible
lightweight
fast, like really fast (estimated to be 20x faster than jQuery),
has a large and supportive community via the forums.

You can learn more about this library here.

Tweens and Timelines

In GSAP, a Tween is a Javascript object that allows you to define parameters that control how animation plays out.
Tweens works in such a way that you provide the properties in the format:

gsap.method(element, var, duration)

A Timeline is a tool that allows you to chain together multiple animations (i.e Tweens, and other timelines by nesting ) which makes it easy to control the animations as a whole, and to precisely set their timing. A typical timeline is written like so:

let tl = gsap.timeline();

We would be looking into the most commonly used methods to create Tweens:

to()
from()
fromTo()

to()

This is the most common method in GSAP, as it allows you to define the destination values.
Just as its name implies, it specifies where your animation is going to .

from()

The from() method acts like a backwards tween, where you set where the values should start from, and then GSAP animates to the element’s current values.

fromTo()

The fromTo() is really great because it allows us to define both the Start and End values for animations, just as shown in the demo below:

There are many other methods listed in the documentation, but we would be working with these three.

Now that we've learned the basics of Tweens and Timelines, let's build out the preloader!

Building out the preloader

Yay! The time we've all been waiting for is here. In this section, we will build a very simple landing page with HTML and CSS, build the preloader, and use the GSAP timeline to animate the elements.

This section has been broken into different steps to make it easier to understand.

Step 1: Install GSAP

First, to use GSAP in a project, we would have to install it. Luckily, there are different methods to do so.

Using the CDN

You can easily set up GSAP into your project by adding the following to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

Installing via Package managers

//Using npm
npm install gsap

//or with yarn
yarn add gsap

Now that it's installed, then import it into your project

import { gsap } from "gsap";

Step 2: Creating the landing page

We'll start by creating an HTML page with 2 divs — one, the preloader div, and the other will be the landing page.

Inside the preloader div, we have a div with a class prl-logo which is the logo on the preloader, and it contains an h1 which would be hidden until it is defined later in the animation sequence.

The SVG element is the menu button in the navigation bar.

<body>
    <!-- Intro -->
    <div class="preloader">
      <div class="prl-logo">
        <h1 class="hide"> cruise. &trade; </h1>
      </div>
      <div class="lightCyan-slider"></div>
      <div class="persianGreen-slider"></div>
      <div class="white-slider"></div>
    </div>

    <!--Hero-->
    <section>
      <nav>
        <a class="logo" href="index.html">Cruise.</a>
        <svg
          class="menu-btn"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
        >
          <path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z"
            fill="rgba(255,255,255,1)"
          />
        </svg>
      </nav>
      <div class="hero-content">
        <h2>Lets go on an adventure.</h2>
        <p
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
          culpa vero quae perferendis molestiae exercitationem nemo atque
          veritatis ratione rem dolore quibusdam quia, a totam quidem nostrum
          iusto! Reiciendis, rem.</p
        >
        <button>Explore</button>
      </div>
    </section>

    <script src="app.js"></script>
  </body>

Now, for the CSS, we have some basic styling, using flex and position to manipulate the layout and positioning of the elements.

You can also get the fonts I used from Google Fonts — Make sure to import them either in the head tag of your HTML file or in your CSS file.

For the preloader section and the sliders, we'll give them a position of fixed so that we can set the top and left properties for its positioning, and then the height and width of 100%, so it takes up 100% of the viewport.

To make the landing page responsive on mobile devices, we'll define some media queries too.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  max-width: 100%;
  background: url(home1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 10vh;
  padding: 1rem 5rem;
}

.logo {
  font-family: "Abril Fatface", cursive;
  text-decoration: underline;
  font-size: 1.3rem;
  color: #fff;
  font-weight: lighter;
}

.menu-btn {
  cursor: pointer;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  color: #fff;
  text-align: center;
  z-index: -1;
}
.hero-content h2 {
  font-size: 3rem;
  font-family: "Abril Fatface", cursive;
  font-weight: lighter;
}
.hero-content p {
  font-size: 0.9rem;
  font-family: "Montserrat", sans-serif;
  color: #f0f2f2;
  margin: 1.5rem 0rem;
  line-height: 24px;
}

button {
  border: none;
  outline: none;
  padding: 0.5rem 1.5rem;
  border-radius: 10px;
  color: #025959;
  cursor: pointer;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* Preloader  */
.preloader {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prl-logo {
  font-family: "Abril Fatface", cursive;
  font-size: 1.3rem;
  z-index: 2;
}

/* Sliders  */
.lightCyan-slider,
.persianGreen-slider,
.white-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}
.lightCyan-slider {
  background: #d5f2ef;
}

.persianGreen-slider {
  background: #03a6a6;
}

.white-slider {
  background: #fff;
}

.hide {
  opacity: 0;
  color: #03a6a6;
  font-weight: lighter;
}

/* Responsive media queries */
@media screen and (max-width: 768px) {
  .logo,
  .prl-logo {
    font-size: 1rem;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 425px) {
  nav {
    padding: 1rem 3rem;
  }
}

The resulting layout 👇

Great, we have our landing page set up, now let's dive into Javascript and build the animation timeline.

Step 3: Implementing GSAP timeline

We start by creating a timeline, which accepts the defaults property. This lets you set properties that will be inherited by all tweens in that timeline.

In this case, we're setting the ease animation to power1.out

const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

To define a tween:

Define the target element
Define the vars parameter
Define the position parameter(Note: this is optional)

tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});

The code above first takes the element we want to animate( the target element), which in this case is the class lightCyan-slider.

Then, we add the vars parameter, which contains the properties/values you want the tween to have.
In this case, the vars parameter contains the x key which is equivalent to a transform: translateX() in CSS.

To position the animations in the timeline, you'll need to pass the position parameter after the vars parameter. Here it is defined as "-=1", and it is super helpful because it tells the timeline exactly where to insert the animation.

In this case, the animation runs 1 second before the end of the previous animation.

tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);

To learn more about the position parameter, check here.

Now, we can define the other tweens:

const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

tl.to(".lightCyan-slider", {
  x: "-10%",
  duration: 1,
});

tl.to(
  ".persianGreen-slider",
  {
    x: "-20%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(
  ".white-slider",
  {
    x: "-30%",
    duration: 1.5,
  },
  "-=1"
);

tl.to(".hide", {
  x: "0%",
  duration: 2,
  opacity: 1,
});

tl.to(".preloader", {
  x: "200%",
  duration: 3,
});

tl.fromTo(
  "nav",
  {
    opacity: 0,
  },
  {
    opacity: 1,
    duration: 1,
  },
  "-=2"
);

tl.fromTo(
  ".hero-content",
  {
    opacity: 0,
    y: -20,
  },
  {
    opacity: 1,
    duration: 1,
    y: 0,
  },
  "-=1.5"
);

Note : It is important that you write your tweens in the order that you want the timeline to run.

For example, in the code above, we go from:

.lightCyan-slider --> .persianGreen-slider --> .white-slider --> .hide --> .preloader --> nav -->.hero-content

Great!, we have successfully created a timeline using GSAP that chains all the animations for our landing page, see the result!

Check out the live demo and the code repository on Github.

Conclusion

Congrats!!! If you made it to the end, that means you have successfully implemented the GSAP timeline and built an awesome preloader. I hope you got a lot of value from this article.

I want you to know there are a lot of possibilities in using GSAP and is not limited to preloaders. Check out some of the best GSAP animation websites on awwwards and on Greensock Showcase.

Also, do well to like and follow for more content, and if you've got any questions or spotted any errors... please do well to leave some feedback as this is my first technical article :)