DEV Community: an-object-is-a

How Taskade Helps You With Project Management (Hint: Take some stress away)

an-object-is-a — Fri, 04 Jun 2021 13:41:14 +0000

This is a sponsored blog post. Thanks to Taskade for reaching out to me.

I'm going to come right out and say it,

I don't want the chaos of the pre-Covid office world in my home.

It was already enough when you could totally and without retribution answer office e-mails only when on-the-clock (wink wink).

Imagine the "just one more thing"-creep (read: Mission creep) now that companies are developing strategies for tackling the new workplace environment...

One of the complications that comes with working in this new normal--especially a remote one--is,

How do you manage shared work-loads when missing the nuance of face-to-face communication?

All of the subtleties of in-person communication have been turned on their head.

I hear companies want the in-office days to come back...

I hear employees have gotten a taste of that sweet sweet work from home/park/cafe/library/boat? freedom--cubicles or a work-life balance? Very difficult decision...

We're entering a new world and when life gets chaotic, what's the solution for coping?

Simplify.

Control what you can; the rest? Que Sera, Sera (translation: What will be will be).

Simplify your life in general, but your work especially.

For those of you new to this remote work game--welcome, glad to have you; for those of you looking to become self-starting, go get'em entrepreneurs!--multiple streams of income anyone?; for those of you who just want to simplify your work life...

Taskade.

So let's get to it.

What is Taskade?

Taskade is a project management platform.
Basically it's an app that helps coordinate a workload between team members or just all by yourself.
Think of it like a combination of to-do lists, zoom meetings, and deadline planning.

You can use it for any project timeline: daily, weekly, monthly, yearly...

Taskade is designed to be simple and to-the-point. It helps you get your goals "on paper" as effortlessly as possible.

After all,

You don't want to stress out over planning your goals. You're not getting paid for that. You're getting paid to achieve your goals.

Let's break this down into 6 sections:

A meta-view of the platform--the general work-flow of Taskade.
In-depth into the parts of that work-flow.
Keeping track of the work-flow. Now that you have all of that information swimming around, how do you manage it?
How to bring in and manage team members--communication between colleagues.
Platform & pricing options.
My final impressions.

Meta-view.

The Taskade dashboard is very basic. Taskade emphasizes simplicity. You have your left hand sidebar, the main window in the center, and a user & app settings button in the top-right corner.

Very simple. Very clean.

Now on to the work-flow.

The Taskade work-flow is broken down into 4 stages.

Workspace -> Project -> Block -> Task

You start by creating a workspace.

Within workspaces you create projects.

Within projects you create blocks.

And within blocks you create tasks. Tasks are the "do's" of your to-do lists.

Let's go into more depth.

The Work-flow In-Depth.

Workspace

You start Taskade by creating a workspace. It's easy and straightforward; there's not much to it.

Project

In our new workspace, we can create a project in one of three ways:

1. A blank canvas.

2. Using a template.

You can use templates created by Taskade or you can create your own. A template is just a pre-configurations of a use-case you would see in personal and professional environments.

3. Import from Trello.

Taskade gives you the option of importing your Trello projects.

From here we can name the project and attach some properties. We can add due dates, assign different team members to the project, or tag the project to help with filtering when searching.

Block

From a project, we can get straight into adding tasks, but blocks are the best way to organize.

There are different types of blocks. "Types" refers to the category of tasks within the block.
There are checklists, bullet lists, numbered lists, and simple paragraph options.

We can also attach properties to our blocks; just the like our projects, due dates and assignments but with two additions: the ability to leave comments and attach files.

Task

Finally to a block we add tasks. Tasks act just like any list you would code in HTML, write in a markdown file or use in your word processor.

Like a block you can add due dates, assignments, comments, and files.

Now that we know how to ORGANIZE our ideas into a project, let's take a look at how we can VISUALIZE those ideas.

Taskade offers 5 different layouts.

1. List - this is our default view; a simple line-by-line presentation.

2. Board - if you're familiar with Trello boards, this is the same thing; we have these cards that we can horizontally scroll on as well as drag to reorganize.

3. Action - think of this like a more functional version of the list view; all of the attachment properties are one click away.

The next two are pretty interesting. I don't personally use these on my laptop (screen too small), but they would be perfect for a multi-monitor setups, a large tv, or projector--maybe for meetings at an office. These two layouts give a great birds-eye view of your project.

4. Mindmap - this is like a horizontal tree where everything cascades from left-to-right; all of the functionality is still there: adding blocks, tasks, attaching properties, collapsing sections...

5. Org Chart - this is a vertical tree; again, same functionality just a different way of conceptualizing the entire project

We now know how to ORGANIZE and VISUALIZE our work-flow.

How do we KEEP TRACK of our work-flow?

Let's talk deadlines.

Keeping track of progress.

When we add a 'due date' to a project it gets tracked in two places:

The 'Roadmap' tab
The 'Calendar' tab

When we add a 'due date' or 'assignment' to a block or task it gets tracked in 3 places:

The 'My Tasks'/'Tasks' tab
The 'Roadmap' tab
The 'Calendar' tab

Personally I prefer the 'Task' or 'Calendar', the 'Roadmap' is too much scrolling--it feels claustrophobic.

Now, managing the information in multiple projects can be a lot of work so Taskade has a notification system that alerts you of:

when tasks are due
when comments have been added
when attachments have been added

basically just monitoring your workspaces for you. These notifications also push to your desktop, mobile, and email if you choose.

They also have a 'Recent'/'History' tab that keeps track of blocks & tasks you've added, deleted, edited, or completed.

For those of you who use Google or Yahoo calendar they allow you to sync your blocks and tasks with those two services.

Now that we know how to KEEP TRACK of our work-flow. Let's move on to COORDINATING that work-flow between team members.

Including others.

To communicate with team members, we have to first add them.

Taskade offers three different ways: email, Taskade username, or link.

There are 2 levels of permissions:

editor: the user can edit the project, but not manage it

viewer: the user can comment and chat within the project, but not edit the project

Once your team members are added you can communicate with them in a couple of ways:

if you or they add a comment to a block or task it'll show up in that same window and in your notifications

if you use the 'Chat' panel (they make it very easy)

In the 'Chat' panel you can text message as well as attach files.

One thing they don't have--which I wish they did--is a system for global chatting. Currently, you can only chat with team members from within a project scope. You can't access the 'Chat' panel from your 'Dashboard'/'Homepage'.

A major feature of Taskade that threads the needle between simplicity vs. complexity is video conferencing/screen sharing.

This is so important for holding onto that "face-to-face" communication in the age of remote work.

No complicated panels and tabs, just one-click away.

Platform and Pricing.

You can use Taskade on just about any platform you can think of.

Desktop--Windows, Mac, Linux; Mobile--Android & Apple; and they even have a browser extension for Chrome, Firefox, and Edge.

A few limitations I found on their mobile platform is that you can't re-organize your projects into different views--so you just
have the list view--and you can't sync your blocks and tasks with your Google or Yahoo calendar. Other than that, your workspace activities sync across all platforms.

As for pricing, Taskade offers 2 options: Free and Unlimited.

Unlimited basically ups capacity for all features--more tasks, larger file sizes, more storage...

You can take a look at their Free vs. Unlimited comparison chart for a full breakdown.

If you want a free upgrade to Taskade Unlimited, about 500 of you are going to be lucky!

(be one of the first 500)

Step 1: Install Taskade Free plan.

Step 2: Contact Taskade.

Step 3: Mention me: "An Object Is A" in your message.

Step 4: Profit.

Final impressions.

So what are my thoughts about Taskade?

I'm not going to name any other project management platforms (other than Trello earlier), but of the ones I've tried Taskade is a great middle ground. Some of the other platforms were too simple or too complicated--too many panels, little widgets, etc.

Taskade offers something that's simple to setup and integrate into any work-flow, but also has features that allow you to work efficiently--notification systems and video conferencing.

You shouldn't have to fiddle around and spend unnecessary time getting your goals written down and communicated across team members. Taskade just let me hit the ground running so I can spend my time doing the actual work I'm getting paid for.

You can check out Taskade over on their:

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.

How does Taskade work? How can it help you? | My Taskade Walk-through and Impressions

How To Build A Chrome Extension NEW Manifest V3

an-object-is-a — Fri, 21 May 2021 13:49:43 +0000

How To Build A Chrome Extension NEW Manifest V3

If you need an easy to follow along video tutorial, you can purchase How To Build a Chrome Extension Manifest V3 over on our Teachable platform.

Use discount code: ANOBJ for 20% off.

You can get the source files here to follow along.

There Are 5 Major Components to Building a Chrome Extension

Let's go over them briefly, then in-depth.

1. The manifest file.

This is the ledger of a chrome extension. It's a JSON file that describes the behavior of a Chrome extension. You list things like: your extensions name; a description; which files or libraries you're including; and permissions your extension needs. We'll get into more detail later on.

2. The background script.

This is a JavaScript file. Think of it like the mainframe or hub of a Chrome extension.

One way to think of Chrome extension development is like full-stack web development

You have the back-end that handles heavy programming logic and you have the front-end that takes in user input--the clicking of buttons, entering of information, etc.

The background script can act like a back-end environment.

3. The popup page.

This is an HTML page users see when they click on the extension icon in the menu bar.
This is one of the ways users can interact with your extension--like a front-end.

4. The options page.

This page is also an HTML page. The user sees this page when they right click on your extension icon and choose for the options. This is another way users can interact with your extension--also like a front-end.

5. The foreground/content script.

This file is a JavaScript script. It's a special case and is a bit more complicated than the other files. For now, think of it like any other JS script that you can attach to the website the user is viewing.

Now that we know the big 5, let's go in-depth one component at a time.

The manifest file.

The manifest file is a JSON file. Here we list the name, description, icons, and manifest version--among other things--of our Chrome extension. For this tutorial, we're working with manifest version 3; think of it like the software version.

In here we define where our background, popup, and options components are located in our file directory. Notice I didn't include the foreground location here. There are two ways of including the foreground script in a Chrome extension: through the manifest (which we won't do in this tutorial) and programmatically (which we will do in this tutorial).

Here is an example of the manifest file we'll be using:

{
    "name": "Chrome Extension MV3",
    "description": "Learning all about Chrome Extensions Manifest Version 3!",
    "version": "0.1.0",
    "manifest_version": 3,
    "icons": {
        "16": "/images/icon-16x16.png",
        "32": "/images/icon-32x32.png",
        "48": "/images/icon-48x48.png",
        "128": "/images/icon-128x128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/icon-16x16.png",
            "32": "/images/icon-32x32.png",
            "48": "/images/icon-48x48.png",
            "128": "/images/icon-128x128.png"
        }
    },
    "options_page": "options.html",
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "https://www.google.com/*"
    ]
}

A key function of the manifest file is defining what our Chrome extension is capable of doing. This gets handled in the permissions properties.

These permissions are APIs that let us do things like store data locally; if your Chrome extension wants to read which urls the user is looking at; and host permissions which tell the browser which urls your Chrome extension is allowed to interact with.

The background script.

The background script is a regular JavaScript script with a very large caveat:

the background script is a JavaScript service worker

If you don't know what a service worker is, we did a tutorial on the basics of service workers. You can find our video tutorial here.

All service workers go through a lifecycle. The first part of that cycle is the install function. This is where we set up the default state of our Chrome extension.

Think of it like this: When you first install a video game(let's say Call of Duty: Warzone) and you navigate to the key bindings, there are default bindings for all the inputs.

This is the same with your Chrome Extension. When the user first installs your Chrome extension, what are the default properties? We handle this in an onInstalled listener and just like installing a game--assuming you don't reinstall--that installation only happens once, not every time you boot the game up.

chrome.runtime.onInstalled.addListener(() => {
    // default state goes here
    // this runs ONE TIME ONLY (unless the user reinstalls your extension)
});

And remember, because the background is a service worker, it's not persistent. So if we want to save any sort of state, we need to store that state somewhere--locally, remotely...doesn't matter.

We can work with temporary variables in the script like any other JavaScript environment...

let name = "Jack";

name = "John";

...but once the browser has determined that the user or you have stopped interacting with the background script for a certain amount of time, the background environment will de-activate until it's needed again.

So if you want to work with any data past de-activation you need to store it. We'll store it locally using the storage API from our manifest like this:

// setting state
chrome.storage.local.set({
    name: "Jack"
}, function ());

// getting state
chrome.storage.local.get("name", function (retrieved_data));

The popup page.

There's not much to be said here. The popup page behaves exactly like any index.html page with one major difference:

You cannot write in-line JavaScript in this file; only attach a script. You can however write in-line CSS styles (or choose to attach a stylesheet)

The options page.

There's not much to be said here either. The options behaves exactly like any index.html page with the same caveat:

You cannot write in-line JavaScript in this file; only attach a script. You can however write in-line CSS styles (or choose to attach a stylesheet)

The foreground/content script.

Now the most complicated component: the foreground or content script.

It's called a foreground(my wording) or content(Google Docs' wording) script because it gets embedded into the tab(s) the user is viewing. Think of it like this:

We can monitor all of the tabs the user is viewing. When they go to a site of our choosing, we can inject our foreground script INTO THAT SITE giving us the ability to control the DOM of that site

It behaves exactly like a JavaScript script--no surprises here--but incorporating it into our Chrome extension takes some work.

To get our foreground script to actually embed into the users tab(s) we need to first monitor their browsing experience with the tabs API. We do this monitoring in the backround script:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
    }
});

Notice the 'if' clause. If the web page the user is viewing is fully loaded(complete) AND it's an actual web page(http), then we do something.

Now that we know the user is on a web page--fully loaded--we can inject our foreground script using the scripting API. Also in the background script:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.executeScript({
            target: { tabId: tabId },
            files: ["./foreground.js"]
        })
            .then(() => {
                console.log("INJECTED THE FOREGROUND SCRIPT.");
            })
            .catch(err => console.log(err));
    }
});

We use the executeScript method and pass in the target (tabId number) and file (location of foreground script) as arguments.
You can also inject CSS into a user's tab using the insertCSS method of the scripting API:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
        chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: ["./foreground_styles.css"]
        })
            .then(() => {
                console.log("INJECTED THE FOREGROUND STYLES.");
            })
            .catch(err => console.log(err));
    }
});

So now that we have our foreground script injected into the user's tab, what can we do?

Anything we want.

document.querySelector("body > div.L3eUgb > div.o3j99.LLD4me.yr19Zb.LS8OJ > div > img").style.transitionDuration = '3.0s';
document.querySelector("body > div.L3eUgb > div.o3j99.LLD4me.yr19Zb.LS8OJ > div > img").style.transform = 'rotate(3000deg)';

This bit of code takes the Google logo--using the DOM--and spins it.

const ce_main_container = document.createElement('DIV');
const ce_name = document.createElement('DIV');
const ce_input = document.createElement('INPUT');

...
...

ce_button.addEventListener('click', () => {
    chrome.runtime.sendMessage({ 
        message: "change_name",
        payload: ce_input.value
    }, response => {
        if (response.message === 'success') {
            ce_name.innerHTML = `Hello ${ce_input.value}`;
        }
    });
});

This bit of code puts a "form" on Google's homepage and allows the user to enter a name that gets saved in our Chrome extension. (All of the code isn't posted, it's a bit long)

So like any script in any html page, we can manipulate the DOM AND insert our own HTML code.

Let's talk communication.

There are two primary ways of sending message back and forth in a Chrome extension.

1. chrome.runtime.sendMessage()

When we want to send a message from the background, options, popup, or foreground components to the background, options, or popup components we use the RUNTIME version of sendMessage().

chrome.runtime.sendMessage("message", function (response));

This method take two arguments: the message you want to send and a callback to deal with a response message.

2. chrome.tabs.sendMessage()

When we want to send a message from the background, options, or popup components to the foreground component we use the TABS version of sendMessage().

chrome.tabs.sendMessage(tabId, "message", function (response));

This method takes three arguments: the id of the tab you want to send a message to; the message; and a callback to deal with a response message.

So we know how to send a message, how do we receive the message?

One way:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    // communication tree
    // if (request === 'get_name') {
    //   return "Jack";
    // }
});

The onMessage method takes a callback which gives you 3 parameters:

request - the message being sent
sender - whose sending the message
sendResponse - a method that allows you send to send a message back to the original sender

A real-life example of a communication tree might be:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'get_name') {
        sendResponse("Jack");
    } else if (request.message === 'change_name') {
        chrome.storage.local.set({
            name: request.payload
        }, () => {
            if (chrome.runtime.lastError) {
                sendResponse({ message: 'fail' });
                return;
            }

            sendResponse({ message: 'success' });
        })

        return true;
    }
});

In here we have two branches:

'get_name' which just sends a response of (string) "Jack"
'change_name' which first saves the name sent by the sender, then sends a response of (object) { message: 'success' }.

Using these three methods: runtime.sendMessage, tabs.sendMessage, and onMessage.addListener you have all the workings of a full-stack application

You can now communicate between "front-end" and "back-end" components. For example, when your user presses a button in your popup page you can send a message to the background script asking to fetch an image and send the image data as a response.

There is much, much more you can do with Chrome Extensions.

But this is a great foundation for you to build from.

You can view our video tutorial down below for more detailed information.

You can get the source files here.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.

How to Dynamically Load Markdown Files in React (markdown-to-jsx)

an-object-is-a — Fri, 07 May 2021 14:28:10 +0000

How to Dynamically Load Markdown Files in React (markdown-to-jsx)

I was fussing about how to display copy in one of my React components.

Instead of dealing with HTML divs, paragraphs, images, tables, etc.

I found a way to just import the .md (markdown) files I already have.

This process involves:

markdown-to-jsx
light knowledge of React state management & life-cycles; we'll use hooks here
light knowledge of the JavaScript Fetch API (very light knowledge, don't worry)

The first thing we'll need is to organize the markdown files.

I've chosen to store the .md files in a markdown folder in the src directory.

Here is the code that brings everything together.

Here is the code I'll be explaining:

// App.js

import React, { useState, useEffect } from 'react';

import Markdown from 'markdown-to-jsx';

import './styles/main_styles.css';

function App() {
    const file_name = 'react_pinterest_clone.md';
    const [post, setPost] = useState('');

    useEffect(() => {
        import(`./markdown/${file_name}`)
            .then(res => {
                fetch(res.default)
                    .then(res => res.text())
                    .then(res => setPost(res))
                    .catch(err => console.log(err));
            })
            .catch(err => console.log(err));
    });

    return (
        <div className="container">
            <Markdown>
                {post}
            </Markdown>
        </div>
    );
}

export default App;

There are 3 key things happening here:

Import the markdown-to-jsx package.
Setup the state.
Fetch and display the markdown.

Firstly, we need to of course import the markdown-to-jsx package.

We use it in our return block.

Secondly, we set up the state we'll use to hold the .md data. Initially, we set the variable post to a blank string and place it in between the Markdown tags.

We also have a file_name to act as a way of dynamically choosing the markdown file we want. In this case
I hard-coded it, but you can set it to whatever you want based on some logic.

Thirdly, once our component loads, useEffect(), we use the import as a function.

The import used this way acts as a promise and returns the absolute path to our markdown file.

We then fetch the markdown file we want using the Fetch API.

Once we fetch the file, we need to parse the response as a text file, and then store the parsed response in our post state variable.

It's as simple as that.

You can get the source files here.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.

Dynamically Load Markdown files into React for your Blog | markdown-to-jsx

Create a React Blog Site | Beginner Project for Jr. Devs

an-object-is-a — Fri, 23 Apr 2021 13:46:44 +0000

Create a React Blog Site | Beginner Project for Jr. Devs

Browse our Teachable courses.

We'll build this webpage out of 6 components.

BlogPage.js - the main container for our posts
Post.js - a single blog post
WriteUp.js - a place to show your copy-write
Gallery.js - an image gallery
PrimaryAsset.js - a place to show a large print image or embed a video
Separator.js - a simple design to separate each blog post

All of the information displayed in a blog post will be seeded in through a feeder file.

This file will have the following schema:

[
    {
        title: ``,
        subtitle: ``,
        images: [``],
        primary_asset: ``,
        copywrite: [``, ``]
    },
    {
        title: ``,
        subtitle: ``,
        images: [ ],
        primary_asset: ``,
        copywrite: [ ]
    }
]

Each blog post will have a title, subtitle, an array of images for our gallery, an HTML string for a main/primary asset, and an array of 2 HTML strings for the copy-write.

BlogPage.js

Our container for our blog posts.

Our main component, the BlogPage will be broken up into 4 sections.

A site header.
A page name.
Left side for blog posts.
Right side for an index/table of contents.

<div className="blog_page">
    <div className="site_header">

    </div>

    <div className="page_name">
    </div>

    <div className="container">
        <div className="left_side">
            <div className="blog_posts">

            </div>
        </div>
        <div className="right_side">
            <div className="blog_index">

            </div>
        </div>
    </div>
</div>

Post.js

Each post we make is contained within this component.

In here, we can design any type of post we want.

For this tutorial, we'll have five sections.

Sections for...

the post title...

some copywrite...

an image gallery...

some more copy-write...

and finally a primary or main asset (video or large print image).

<div className="blog_post">
    <div className="section section1">
        // TITLE
    </div>

    <div className="section section2">
        // COPYWRITE
    </div>

    <div className="section section3">
        // GALLERY
    </div>

    <div className="section section4">
        // COPYWRITE
    </div>

    <div className="section section5">
        // MAIN ASSET (VIDEO OR IMAGE)
    </div>
</div>

WriteUp.js

We're going to take a piece of copy-write and add two visual flairs.

We need to find a way to hide part of the post.

If the copy-write is 700 lines long, we don't want to show all 700 lines.

We want to hide the copy-write up to a specified height and then give the user the option of showing the entire copy-write.

To accomplish this, we'll initially load up the copy-write through the 'dangerouslySetInnerHTML' prop of our div element.

<div ref={CopyWriteRef} dangerouslySetInnerHTML={{__html: props.copywrite}}>
</div>

Once the component loads, we'll check it's height. If the total height of our div once rendered is greater than a certain threshold, we'll cut the height down to that threshold.

useEffect(() => {
    const copywrite = CopyWriteRef.current;

    if (copywrite.getBoundingClientRect().height > text_threshold) {
        copywrite.style.height = `${text_threshold}px`;
        copywrite.nextSibling.style.display = 'block';
        copywrite.nextSibling.nextSibling.style.display = 'block';
    }
});

We also show a linear-gradient at the bottom of the copy-write as well give the user a read more button.

Gallery.js

A simple CSS grid-styled DIV will create our image gallery.

We'll define our gallery in 1 row by 2 columns for Desktop and 1 x 1 for Mobile.

.post_image_gallery {
    width: fit-content;
    height: fit-content;
    max-height: calc((270px * 2) + 20px);
    display: grid;
    gap: 10px;

    grid-template-rows: 270px;
    grid-template-columns: repeat(2, 270px);
    grid-auto-rows: 270px;

    justify-content: center;
    overflow-x: hidden;
}

PrimaryAsset.js

A simple DIV where we show an image or video (iframe embed).

Just like the WriteUp.js component, we'll insert our image or iframe embed in the 'dangerouslySetInnerHTML' prop of our DIV.

For this project, we'll use an iframe embed from our feeder file.

primary_asset: `<iframe src="https://www.youtube.com/embed/cAC4s5GuUb8" \
title="YouTube video player" frameborder="0" allow="accelerometer; \
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" \
allowfullscreen></iframe>`,

<div dangerouslySetInnerHTML={{__html: props.primary_asset}}>
</div>

Separator.js

The final component. Just a few lines to separate one post from another.

We'll just place three square icons from Font Awesome into a DIV and space them apart.

<div className="separator">
    <i className="fas fa-square-full"></i>
    <i className="fas fa-square-full"></i>
    <i className="fas fa-square-full"></i>
</div>

There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files here.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Create a React Blog Site | Beginner Project for Jr. Devs

Valorant-inspired React Website

an-object-is-a — Fri, 09 Apr 2021 13:36:23 +0000

React Valorant Website Tutorial

Browse our Teachable courses.

We'll build this webpage in 5 main sections.

Section 1 - our product logo and an image gallery
Section 2 - information about our product
Section 3 - accolades about our product
Section 4 - opportunities to buy our product
Section 5 - contact information for our business

We'll create a Home.js component to hold all of this code.

Section 1.

All we're going to do here is create containers for our product logo & button, and image gallery.

We'll deal with the details of the image gallery implementation later.

For now we position our logo and button on the page and place our image gallery behind everything.

<div className="section1">
    <div className="container">
        <img src="./images/reyna.png" alt="" className="splash_img" />
        <img src="./images/val-logo.png" alt="" className="splash_logo" />
        <div className="sign_up">
            <a href="https://localhost" target="_blank" rel="noreferrer">Sign Up</a>
        </div>
    </div>

    <div ref={galleryRef} className="gallery">
        {
            loaded ?
                <Deck gallery={gallery} /> : null
        }
    </div>
</div>

This is our result:

Section 2.

For this section we'll create a container for a grid of items.

Our grid will be 2x4 and centered in the screen.

Each item of the grid will be a 'Point' component (a "point" about our product)

Our 'Point' component will consist of an icon, name, and brief description.

function Point(props) {
    return (
        <div className="point">
            <div className="point_icon">
                <img src={props.img} alt=""/>
            </div>
            <div className="point_title">
                <div className="point_name">In the Crosses</div>
                <div className="point_description">Rewards accuracy and skill</div>
            </div>
        </div>
    )
}

Our Section 2 code is very simple.

<div className="section2">
    <div className="marketing_points">
        <Point img="./images/icons/val-symbol.png" />
        <Point img="./images/icons/bladestorm.png" />
        <Point img="./images/icons/dimensional-drift.png" />
        <Point img="./images/icons/empress.png" />
        <Point img="./images/icons/shock-bolt.png" />
        <Point img="./images/icons/turret.png" />
    </div>
</div>

This is our result:

Section 3.

A simple flexbox of items.

<div className="section3">
    <div className="accolades">
        <div className="accolade">
            <i className="fas fa-award"></i>
        </div>
        <div className="accolade">
            <i className="fas fa-flag"></i>
        </div>
        <div className="accolade">
            <i className="fas fa-gamepad"></i>
        </div>
    </div>
</div>

This is our result:

Section 4.

For this section we'll create a container for a flexbox of items.

Each item of the flexbox will be a 'Package' component.

Our 'Package' component will consist of background image, title, description, price, purchase button, and feature list.

For now, we'll just use dummy information.

<div className="package" style={{ backgroundColor: props.color }}>
    <img src={props.image} alt="" className="package_image" />

    <div className="package_information">
        <div className="package_head">
            <div className="package_name">{props.name}</div>
            <div className="package_description">{props.description}</div>
        </div>
        <div className="package_body">
            <div className="package_price">{`$${props.price}`}</div>
            <div className="package_purchase">
                <a href="https://localhost" target="_blank" rel="noreferrer">Select</a>
            </div>
        </div>
        <div className="package_foot">
            Includes all base features:
            <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
                <li>Feature 4</li>
            </ul>
        </div>
    </div>
</div>

Our Section 4 code is very simple.

<div className="section4">
    <div className="packages_container">
        <Package color="#2db634" img="./images/viper.png" />
        <Package color="#fb6c32" img="./images/phoenix.png" />
        <Package color="#3694f5" img="./images/jett.png" />
    </div>
</div>

This is our result:

Section 5.

For this section we'll have a series of unordered lists.

This is just basic contact information organized into lists positioned horizontally. Nothing special here.

<div className="section5">
    <section className="contact_section" >
        <ul>
            <li>Affiliates</li>
            <li>Careers</li>
            <li>Privacy</li>
        </ul>
    </section>
    <section className="contact_section" >
        <ul>
            <li>Telephone <i className="fas fa-phone-square-alt"></i> </li>
            <li>Email <i className="fas fa-envelope-square"></i> </li>
        </ul>
    </section>
    <section className="contact_section" >
        <ul>
            <li>Instagram <i className="fab fa-instagram-square"></i> </li>
            <li>Twitter <i className="fab fa-twitter-square"></i> </li>
            <li>Facebook <i className="fab fa-facebook-square"></i> </li>
        </ul>
    </section>
</div>

This is our result:

Let's get our image gallery up and running.

We created this component in a separate tutorial.

You can find it here.

We're simply going to import and modify it to fit our project.

We don't need the left and right navigation buttons for this gallery so we can strip those out.

Then we just modify some color schemes and we're good to go.

<div ref={galleryRef} className="gallery">
    {
        loaded ?
            <Deck gallery={gallery} /> : null
    }
</div>

Let's implement a navigation bar.

We created this component in a separate tutorial.

You can find it here.

We're simply going to import and modify it to fit our project.

All we really need to do is change the color scheme and icon being used.

This is our result:

There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files here.

All contact image icons we're gathered from Font Awesome.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Valorant Website Tutorial

Make a Pinterest Chrome Extension

an-object-is-a — Fri, 02 Apr 2021 13:55:02 +0000

Make a Pinterest Google Chrome Extension

This write-up assumes you know how to create a JavaScript Pinterest Clone from scratch.

If you don't know how, see our tutorial here.

For this tutorial, we are simply upgrading the functionality of our JavaScript Pinterest Clone and integrating it into a Chrome Extension.

We'll do this in 3 phases.

Phase 1: Simply integrate our Pinterest Clone into our Chrome Extension.

Phase 2: Upgrade our Pinterest Clone to allow for uploading of images from a URL.

Phase 3: Save all Pin data in local storage and have our board display all Pins in storage.

Phase 1: Integration

Let's go over our file structure.

We'll start with the manifest.json.

{
    "name": "Pinterest Chrome Extension",
    "description": "Pinterest Chrome Extension",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./images/icon-16x16.png",
        "32": "./images/icon-32x32.png",
        "48": "./images/icon-48x48.png",
        "128": "./images/icon-128x128.png"
    },
    "background": {
        "scripts": ["./scripts/background.js"]
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "storage",
        "unlimitedStorage",
        "https://*/*png",
        "https://*/*jpg",
        "https://*/*jpeg",
        "https://*/*gif"
    ] 
}

Things to note:

We need a background script to coordinate our entire extension.
We need tabs permission so we can save website URLs.
We need storage and unlimitedStorage permissions so we can save Pin data (including the image data).
We need domain/host permissions ending in image extensions to allow our extension to download images.

Our popup.html will be a simple page that offers the user the option of adding a new Pin based on the current site they're visiting or opening up their Pin board and added a Pin manually.

To get our actual Pinterest Board integrated into the extension, we simply open a new tab in the user's browser with our Pinterest Board

So when the user clicks on a button in our popup.html, we execute a popup_script.js script that tells our background.js to open our board or add a Pin.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'add_pin') {
        new_pin_data = { ...request.payload };

        chrome.tabs.create({
            active: true,
            url: './board.html'
        }, tab => recent_tab = tab.id);
    } else if (request.message === 'my_board') {
        chrome.tabs.create({
            active: true,
            url: './board.html'
        });
    }
}

Phase 2: Upgrade

Let's add the ability to save an image from a URL.

When the user clicks on our "Save from site" button, we'll open up an input and take a URL.

We'll use a fetch to get the image and process it the same way as when we choose an image from our local hard-drive.

<!-- board.html -->

<div class="save_from_site">
    <span style="pointer-events: none;">Save From Site</span>
    <input placeholder="Past a URL to an image" type="text" name="save_from_site_input"
        id="save_from_site_input">
    <div class="upload_image_url">Upload</div>
    <div class="cancel_image_url">Cancel</div>
</div>

// board.js
if (event.target === save_from_site) {
    // hide the 'save from site' button
    // show the input for taking a url
    // show the upload button
    // show the cancel button
} else if (event.target === upload_image_url) {
    // fetch the image from the url
    // parse the image as a blob
    // read the image into our Pinterest board
} else if (event.target === cancel_image_url) {
    // show the 'save from site' button
    // hide the input for taking a url
    // hide the upload button
    // hide the cancel button
}

Phase 3: Storage

Let's use Chrome's 'localstorage' API.

Saving data to the user's HDD is very simple. We'll save the information as an array of objects.

With two calls using the 'storage' API, we can get previously saved Pins:

chrome.storage.local.get('pins', data => {});

Add a new Pin to the dataset.

const new_pins = data.pins ? [...data.pins, new_pin_data] : [new_pin_data];

and save the updated Pins.

chrome.storage.local.set({ pins: new_pins });

We can then give the Pinterest board the saved Pins when requested.

// board.js

chrome.runtime.sendMessage({
    message: 'get_pins'
}, response => {
    if (response.message === 'success') {
        response.payload.forEach(pin_data => {
            create_pin(pin_data);
        });
    }
});

// background.js
...
} else if (request.message === 'get_pins') {
    chrome.storage.local.get('pins', data => {
        if (chrome.runtime.lastError) {
            sendResponse({ message: 'fail' });
            return;
        }

        sendResponse({
            message: 'success',
            payload: data.pins ? data.pins : []
        });
    });

    return true;
}

There is much more nuance to this project.

You can get the source files here and you can follow the video tutorial down below.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Make a Pinterest Google Chrome Extension

React Navigation Bar Tutorial (Slide)

an-object-is-a — Fri, 26 Mar 2021 12:33:31 +0000

React Navigation Bar Tutorial (Slide)

Browse our Teachable courses.

Let's get the skeleton for our component written up.

We'll be using 'react-router-dom' and font awesome for this project.

 <div className="nav_bar">
    <div className="icon_container menu_switch">

    </div>

    <div className={`nav_container`}>
        <div className="icon_container logo">

        </div>
        <ul className="menu_items">

        </ul>
    </div>
</div>

We have a place for our open/close menu button, a logo, and the menu with links to different pages.

Opening and closing our menu.

When the user clicks our menu button, we'll open or close our menu depending on the current state of the menu.

We'll have a piece of state called showMenu to manage this.

const [showMenu, setShowMenu] = useState(false);

function switch_menu() {
    setShowMenu(!showMenu);
}

When showMenu is true we'll attach a CSS class to trigger a transition.

<div className={`nav_container ${showMenu ? 'menu_active' : null}`}>
    <div className="icon_container logo">
        <i className="fab fa-earlybirds" />
    </div>
    <ul className="menu_items">
        <li>
            <Link to="/" onClick={switch_menu}>Home</Link>
        </li>
        <li>
            <Link to="/products" onClick={switch_menu}>Products</Link>
        </li>
        <li>
            <Link to="/about" onClick={switch_menu}>About</Link>
        </li>
    </ul>
</div>

Note how we use a string template to include the menu_active class in the className of our DIV.

We start the menu off-screen:

.nav_container {
    transform: translateY(-100%);
}

and when we "activate" the menu, we simply translate it back to its default position.

.menu_active {
    opacity: 1;
    transform: translate(0%, 0%);
}

The actual links come from the Link element in react-router-dom.

<Link to="/" onClick={switch_menu}>Home</Link>
<Link to="/products" onClick={switch_menu}>Products</Link>
<Link to="/about" onClick={switch_menu}>About</Link>

The mobile version.

The mobile version is real simple.

We give our navigation bar new dimenensions.

Instead of taking up an 80px bar at the top of the page, we just make it take up the entire page.

.nav_bar {
    width: 100vw;
    height: 100vh;
}

The bar is animated with the exact same logic, but instead of sliding on the Y-axis we slide on the X-axis.

There is a bit more detail to this project.

You can find the source files here.

All icons were gathered from Font Awesome.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Navigation Bar Tutorial (Slide)

React Website with Image Slideshow

an-object-is-a — Fri, 19 Mar 2021 13:51:23 +0000

React Website With Image Slideshow

Browse our Teachable courses.

We'll build this webpage in 3 main parts.

Top - the greeting for our customer
Middle - a place for information about our business' mission
Bottom - a footer for information about our business

We'll create a Home.js component for our main page.

The Top.

All we're going to do here is set an image for our background and title for our company.

The image gallery comes later; it's a separate element that we float around our page depending on the dimensions.

<div className="section1">
    <img src="./images/background-section1.jpg" alt="" className="background_image_section1" />
    <div className="title">Sinclaire<br />Market</div>
</div>

This is our result:

The Middle.

For this section we'll have an image for our background; a message to our user; an image; and a call to action.

<div className="section2" style={{ backgroundImage: "url('images/marble.jpg')" }}>
    <img src="./images/background-section2.png" alt="" className="background_image_section2" />
    <div className="left_side">
        Organic.<br/>Ethical.<br/>Fresh.
    </div>

    <div className="right_side">
        <img src="./images/spice-bowl.png" alt=""/>
    </div>

    <div className="call_to_action">
        Browse our selection.
    </div>
</div>

This is our result:

The Bottom.

A simple unordered list of items that can act as links.

<div className="section3">
    <div className="contacts" >
        <section className="contact_section" >
            <ul>
                <li>Affiliates</li>
                <li>Careers</li>
                <li>Privacy</li>
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                <li>Telephone <i className="fas fa-phone-square-alt"></i> </li>
                <li>Email <i className="fas fa-envelope-square"></i> </li>
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                <li>Instagram <i className="fab fa-instagram-square"></i> </li>
                <li>Twitter <i className="fab fa-twitter-square"></i> </li>
                <li>Facebook <i className="fab fa-facebook-square"></i> </li>
            </ul>
        </section>
    </div>
</div>

This is our result:

Let's get our image gallery up and running.

We created this component in a separate tutorial.

You can find it here.

We're simply going to import and modify it to fit our project.

All we really need to do is create a parent element for it in our project, we'll call it the gallery, and position it on our page.

<div className="gallery">
    <Deck gallery={gallery} /> 
</div>

We'll change some code in our 'Deck.js' component (the image gallery) and fit it into our parent element.

Let's finish by implementing a navigation bar.

We created this component in a separate tutorial.

We're simply going to import and modify it to fit our project.

All we really need to do is change the color scheme and icon being used.

This is our result:

There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files here.

All images we're gathered from Pexels.

All contact image icons we're gathered from Font Awesome.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Website with Image Slideshow

React Parallax Website Design

an-object-is-a — Fri, 12 Mar 2021 14:37:46 +0000

React Parallax Website Design

Browse our Teachable courses.

We'll build this webpage in 3 parts.

Top - the greeting for our customer
Middle - a place for information about our business' mission
Bottom - a sign-up option and footer for information about our business

The Top.

All we're going to do here is set a bunch of images in place and write a greeting.

<div className="section1" >
    <img src="./images/space.png" alt="" className="space-background"/>
    <img src="./images/earth.png" alt="" className="earth"/>
    <img src="./images/rocket.png" alt="" className="rocket-ship"/>
    <img src="./images/planet1.png" alt="" className="planet1"/>
    <img src="./images/satellite.png" alt="" className="satellite"/>
    <div className="greeting">[Welcome]</div>
</div>

It's important in the CSS styles for all of these images that we make sure they have a position of 'fixed' and are positioned using the 'top' property.

This important for later when we use our Parallax HOC Wrapper to make these elements scroll at different speeds.

This is our result:

The Middle.

For this section we'll create curved borders and split the section into a left and right side.

<div className="section2" >
    <svg className="svg_curve_top" xmlns="http://www.w3.org/2000/svg" fill="orange" viewBox="0 0 100 100" preserveAspectRatio="none" >
        <path d="M0,100 C65,93 76,10 100,100" />
    </svg>

    <div className="section2_container">
        <div className="left_side">
            // text here
        </div>
        <div className="right_side">
            // image here
        </div>
    </div>

    <svg className="svg_curve_bottom" xmlns="http://www.w3.org/2000/svg" fill="orange" viewBox="0 0 100 100" preserveAspectRatio="none" >
        <path d="M0,0 C65,20 90,5 100,0" />
    </svg>
</div>

The svg elements here create a nice curve effect on the top and bottom of this section.

We used the site Cubic Bezier Curve Generator to help us with the code generation.

The Bottom.

A simple text input and unordered lists finish our bottom section.

<div className="section3" >
    Sign up to receive our newsletter!
    <input className="input_email" type="text" name="email" id="email" />
    <MyButton text="Sign Up" />

    <div className="contacts" >
        <section className="contact_section" >
            <ul>
                // your items here
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                // your items here
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                // your items here
            </ul>
        </section>
    </div>
</div>

The 'Button' is a custom component complete with an animation upon clicking.

Let's handle Parallaxing.

We created this HOC Wrapper in another tutorial.

You can find it here.

We're simply going to wrap anything we wan to move at a different speed in this wrapper and place the new component into our code.

For example,

this:

<img src="./images/rocket.png" alt="" className="rocket-ship"/>

becomes this:

const RocketShip = JSX_withParallax(<img src="./images/rocket.png" alt="" className="rocket-ship" />, 0.04);

and is placed in our code like this:

<RocketShip />

Wrapping everything we want gives us this final effect:

There is much more nuance to this project.

Including the code for our custom 'Button' component.

You can view our video tutorial down below.

You can get the source files here.

All space imagery was gathered from Flat Icon.

All contact image icons we're gathered from Font Awesome.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Parallax Website Design

Copy & Search Chrome Extension

an-object-is-a — Fri, 05 Mar 2021 15:32:54 +0000

Copy & Search Chrome Extension

This tutorial assumes you know how a Chrome Extension works.

Experienced Web Developer? Check out our fast and free Youtube tutorial.

The Rundown

We'll have a simple HTML page that allows our user to pick a search engine; this page will be the popup in our Chrome Extension.

In the foreground script we'll listen for when the user copies a piece of text. When they do, we'll get our background script to open a new with the appropriate URL and search parameter.

Let's start.

Our manifest.json

Nothing special here.

{
    "name": "Clipboard Search",
    "manifest_version": 2,
    "description": "Testing clipboard functionality.",
    "version": "0.0.0",
    "background": {
        "scripts":["background.js"]
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

The only permissions we'll need are the tabs so we can inject our foreground script into specific tabs and <all_urls> so we can inject our foreground script into specific webpages.

The popup.html

A simple web page.

Nothing complicated here.

We have a select with options, a button for submission, and a div to display their search engine of choice.

<div class="container">
    <div class="section1">
        <select name="search_engine" id="search_engine">
            <option value="" disabled selected>Choose a search engine</option>
            <option value="google">Google</option>
            <option value="startpage">Start Page</option>
            <option value="duckduckgo">Duck Duck Go</option>
            <option value="ecoasia">Ecoasia</option>
            <option value="bing">Bing</option>
        </select>
        <button>Select</button>
    </div>
    <div class="section2">
        <div class="search_engine_choice">Your Current Search Engine</div>
    </div>
</div>

Here is what we have:

Our foreground script

Not a lot of code here.

document.addEventListener('copy', () => {
    navigator.clipboard.readText()
        .then(res => {
            chrome.runtime.sendMessage({
                message: 'search',
                payload: `"${res}"`
            });
        })
        .catch(err => console.log(err));
});

We create a listener for the copy event. When triggered, we get the copied material from the clipboard using the readText() method.

We then send the copied text to our background script using the chrome.runtime.sendMessage() method.

Our background script

This is where the bulk of our extension gets written.

Here we have an object that holds all of our search engine strings.

const search_engines = {
    google: 'https://www.google.com/search?q=',
    startpage: 'https://www.startpage.com/do/dsearch?query=',
    duckduckgo: 'https://duckduckgo.com/?q=',
    ecoasia: 'https://www.ecosia.org/search?q=',
    bing: 'https://www.bing.com/search?q='
}

When our Chrome Extension detects that a user has opened a new tab, we make sure to inject our foreground script into that page.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (/^http/.test(tab.url) && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(tabId, { file: './scripts/foreground.js' }, () => {
            console.log('The foreground script has been injected.');
        });
    }
});

In the background listener we listen for the message, "search", from our foreground.

When we receive it, we open up a new tab for our user.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'save_search_engine') {
        current_search_engine = request.payload;
        sendResponse({ message: 'success' });
    } else if (request.message === 'get_current_search_engine') {
        sendResponse({ payload: current_search_engine });
    } else if (request.message === 'search') {
        chrome.tabs.create({
            active: true,
            url: `${search_engines[current_search_engine]}${request.payload}`
        });
    }
});

Notice how the url property has a value constructed of the search engine of choice plus the search term, the request.payload, amended to the string.

That's the basics of how this extension works.

You can get the source files here and/or you can watch a video tutorial down below.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Copy & Search Chrome Extension

React Parallax Scrolling Web Design Solution

an-object-is-a — Mon, 01 Mar 2021 15:08:07 +0000

React Parallax Scrolling Web Design Solution

Browse our Teachable courses.

The general solution we're working with is this:

We are going to create an HOC (Higher Order Component).

It's a function that's going to take a JSX Element.

ex. higherOrderFunction(<div></div>)

It's then going to return a JSX Component.

ex. ParallaxComponent

We'll then render it to our page like this:

The logic for parallaxing is this:

We are going to fix a JSX element to our page (in this case a DIV shaped like a circle).

When we scroll our page DOWN, we'll manually scroll the JSX element UP.

Since we are manually scrolling our element up, we can control how fast or slow it moves.

This creates our parallax effect.

Let's get our JSX on screen.

A simple 'div'.

return (
    <div>
        <img src="./back.png" alt="" />
        <div style={styles.obj}></div>
    </div>
);

We'll style it as a circle.

obj: {
    margin: 0,
    padding: 0,
    height: '200px',
    width: '200px',
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    borderRadius: '50%',
    backgroundColor: '#0083FF',
    boxShadow: '0px 0px 20px 10px #0083FF'
}

Let's write our Higher-Order Component.

We'll need 6 variables to accomplish our parallax animation.

JSXElement - the JSX element we pass into our HOC
start_position - where does this element start (y position) relative to the top of the document/page
ease - we control how fast or slow the JSX element scrolls relative to our page
last_offset - we keep track of how far, in total, we have scrolled up or down
animation_running - we use this to get our requestAnimationFrame() loop to start and stop

5 main steps.

Create a ref.

const ref = React.createRef();

Clone the JSX Element while adding that ref into our clone.

const JSXElementWithRef = React.cloneElement(
    JSXElement,
    { ...JSXElement.props, ref: ref },
)

Save the new JSX Component in the state of our class component.

this.setState({
    ease: _weight,
    WrappedJSXElement: JSXElementWithRef
}, () => {
    this.setState({ start_position: ref.current.offsetTop }, () => {
        this.wrappedJSXElement = ref;
        document.addEventListener("scroll", this.animate_scroll);
    });
});

Render our new Component in the HOC file.

render() {
    return (
        <Fragment>
            {this.state.WrappedJSXElement}
        </Fragment>
    )
}

Build the logic for our animation loop.

Every time we scroll our page, we want to scroll our JSX element(s).

If we scroll 100 clicks of our wheel, we want to make sure we put in a request to scroll our JSX element(s) 100 times as well.

animate_scroll = () => {
    if (!this.animation_running) {
        this.animation_running = true;
        requestAnimationFrame(this.animation_loop);
    }
}

The actual animation loop...

animation_loop = () => {
    let current_offset = window.pageYOffset;

    let difference = current_offset - this.last_offset;
    difference *= this.state.ease;

    if (Math.abs(difference) < 0.05) {
        this.last_offset = current_offset;
        this.animation_running = false;
        return;
    }

    this.wrappedJSXElement.current.style.top = `${this.state.start_position - this.last_offset}px`;

    this.last_offset += difference;

    requestAnimationFrame(this.animation_loop);
}

We do 4 major things here (not in this order).

Calculate the difference between the current position of our document and the top of our page/document.

Where our page starts.

How we calculate the difference.

Move our JSX element by that difference. (*the difference is multiplied by our **ease to create our parallax effect ***)
Request another loop for our animation.
Our exit clause for the animation loop is if the difference is less than 0.05. Basically if the JSX element has reached its destination.

We can use this logic for any type of JSX element.

DIVs, paragraphs, spans, images...

You can get the source files here.

If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Parallax Scrolling Web Design Solution

ReactJS Pinterest Clone

an-object-is-a — Fri, 19 Feb 2021 16:10:43 +0000

Browse our Teachable courses.

We'll build our mock-up in steps.

Create a mock-up of a single Pinterest Pin.
Create a mock-up of the Pinterest "Add a Pin Screen".
Merge the above; Use the "Add Pin Screen" to generate a single Pinterest Pin.
Transfer the logic of our merge in step 3 into our Pinterest Layout.

"Pinterest Pin" Mock-Up

Each Pin is made up of 3 sections.

Pin title - the user won't see this; you can use this on the back-end as a way to store the Pin in a database
Pin modal - this is the overlay for each card; this won't be functional for this tutorial, just cosmetic

Pin image - the actual image the user uploads

Each pin has a "header" and "footer".

<div>
    <div className="card">
        <div className="pin_title"></div>

        <div className="pin_modal"></div>

        <div className="pin_image"></div>
    </div>
</div>

"Add a Pin" Modal Mock-Up

The Modal is made up of 9 sections.

Modal overlay - the transparent black background
Add Pin container - the main interface of the screen
Left side - the left half of our interface
Right side - the right half of our interface
Left side Header - a simple button leading to options
Left side Body - the user's image shows up here
Left side Footer - an option to upload an image from the web
Right side Header - select the Pin size (small, med, large)
Right side Body - information about the Pin is entered here

<div className="add_pin_modal">
    <div className="add_pin_container">
        <div className="side" id="left_side">
            <div className="section1">
            </div>

            <div className="section2">
            </div>

            <div className="section3">
            </div>
        </div>

        <div className="side" id="right_side">
            <div className="section1">
            </div>

            <div className="section2">
            </div>
        </div>
    </div>
</div>

Merge our Pin and "Add Pin Screen".

When we click save, we create a Pin.

function save_pin(pinDetails, add_pin) {
    const users_data = {
        ...pinDetails,
        author: 'Jack',
        board: 'default',
        title: document.querySelector('#pin_title').value,
        description: document.querySelector('#pin_description').value,
        destination: document.querySelector('#pin_destination').value,
        pin_size: document.querySelector('#pin_size').value,
    }

    add_pin(users_data);
}

The Final Pinterest Board

We'll take our Pinterest Layout from a different tutorial.

In a previous tutorial, we created the Pinterest Layout using CSS Grids.

We'll import that code and use that layout as our pin_container for this project.

You can find that tutorial here.

This merge is very simple. There is no new HTML here.

The major change comes in our CSS and JSX.

In our CSS, we create three new class definitions; the small, medium, and large Pin options.

.card_small {
    grid-row-end: span 26;
}

.card_medium {
    grid-row-end: span 33;
}

.card_large {
    grid-row-end: span 45;
}

Then based on which pin size the user chooses, we add that class to our Pin component.

<div className={`card card_${props.pin_size}`}>

There is much more nuance to this project.

You can get the source files here and you can follow the video tutorial down below.