DEV Community: Rahul

Anything You Want - Notes and Summary

Rahul — Sun, 09 Oct 2022 17:34:43 +0000

What is a business

A world where you control all the laws. So do you, don't just accept what other people do in there business and copy.
If people react positively to the idea go ahead otherwise don't pursue it. You'll be fighting an uphill battle.
Every decision should be based on what is best for the customers. Ask your customers and they'll let you know what’s the best course of action.
Start small, don't worry about being big. It is not worth it anyway. Enjoy the process and put in your 100%.

Ideas, Execution, and Expansion

Ideas are just multipliers to execution
It is better to have multiple small customers than have big sharks tailoring your company according to their needs. Don't try to get big customers. Don't let the client be your boss, it is your business after all.
Plan and plan for everything.
- “OK, make a plan that requires only $1,000. Go!”
- “Now make a plan for ten times as many customers. Go!”
- “Now do it without a website. Go!”
- “Now make all your initial assumptions wrong, and have it work anyway. Go!”
- “Now show how you would franchise it. Go!”

You can’t pretend there’s only one way to do it. Your first idea is just one of many options. No business goes as planned, so make ten radically different plans. Same thing with your current path in life:

Now you’re living in New York City, obsessed with success. Go!
Now you’re a free spirit, backpacking around Thailand. Go!
Now you’re a confident extrovert and everyone loves you. Go!
Now you’re married and your kids are your life. Go!
Now you spend a few years in relative seclusion, reading and walking. Go!

Delegate but don't abdicate

Trust, but verify

Hyperfocus - Notes & Summary

Rahul — Sat, 24 Sep 2022 12:27:39 +0000

Hyperfocus - How to Work Less and Achieve More
by - Chris Bailey

Read here for no apparent reason.

Notes & Summary

Chapter 1

Pay attention to one and one thing only, if you want to create or achieve something meaningful.
Switch off the autopilot, as the most urgent and stimulating things in your environment are rarely the most significant. → Go pursue something worthwhile, not something expedient

Chapter 2

If your mind wanders, write down the distractions(for later reference) and move on.
Productivity: Doing the right thing in each moment.
Dedicated/Focused work(without distractions) + break ⇒ get stuff done.

Chapter 3

Try reaching flow every time:
- You need a task that is neither too hard nor too easy, a distraction-less environment, to stop your mind from wandering. (Just how one focuses when they are speed reading.)
Hyperfocus: Thoughts + External Env ———> On One Thing
Intention absolutely has to precede attention
Hyperfocus: Keep one important, complex object of attention in your awareness as you work
Rule of 3: At the start of each day, choose the three things you want to have accomplished by the end of the day.

On days when your schedule is set—such as when you’re attending a conference—you may not be able to determine how you spend your time and attention. You can, however, change how you relate to what you have to get done. For example, instead of making an intention to “attend conference talks,” opt instead to “connect with five new people at the cocktail reception.”

See the whole picture: Don’t make decision on just the immediate consequence

For example, let’s say you’re deciding whether to order a funnel cake for dessert. The immediate consequence of the decision is that you enjoy eating the cake. But the second- and third-order consequences are quite a bit steeper. A second-order consequence might be that you’ll feel terrible for the rest of the evening. Third-order consequences might include gaining weight or breaking a new diet regimen.

Keep reminding yourself to stay off the autopilot.

Goals need Plans; Plans that include when, where, and which kind of action to take.

Use timers/stopwatches

Chapter 4

Design your env to be distraction-less (at least)
If you are inevitably disturbed, don’t fret and enjoy the break. Just command yourself to be back on the work afterward.

Chapter 6

Just as hyperfocus is most productive mode of the brain, scatterfocus is the most creative.
Types:
1. Capture mode → wander and capture ideas.
2. Problem-crunching mode → hold a problem in mind and let it wander.
3. Habitual mode → capture while engaging in simple tasks(like washing dishes).

Chapter 9

Invest in serendipity: Consume challenging things outside the boundaries of your expertise.

Chapter 10

Scatterfocus is most potent when you have the least energy. Your brain is less inhibited during these periods and doesn’t hold back the ideas it generates.

Thank you for Reading

Docker: Why and How to get started with Docker

Rahul — Tue, 19 Oct 2021 17:14:56 +0000

What is Docker?

Docker is an ecosystem of services that are used to create, run and administrate containers.

In simple terms, a container is an isolated environment just for running a particular application. A container essentially contains the application along with all the dependencies and configuration files that it needs for running.

More on that later. First, let's see why do we need docker or containerization in particular.

Why Docker?

The era of cloud computing sprung up a challenge of managing and maintaining the application over various cloud and development environments. Regardless of the underlying platform the application should remain stable and operational. But because of the 'unknown' associated with running the application on a foreign platform, possibility of environment-specific bug increases. A solution to this is to pack and ship the application along with the dependencies, configuration files and libraries that the application needs to run and operate efficiently. This process is called containerization. Which docker does brilliantly.

What is an image and a container?

Docker Image

An image is a snapshot of a file system (application and its dependencies) with a startup command. So essentially, an image may as well be a complete react application with the startup command as npm start.

More formally, an image is like a blueprint for creating a docker container.

Docker Container

Before we jump on to containers, let me quickly throw in some operating system related stuff.

Every running process has a bunch of hardware/software resources associated with it. When a process is running, it communicates with the kernel (core of OS that controls all the tasks of the system) to access those resources.

Each process may have different requirements for running (for instance, one app maybe using python2 and the other python3.) and because of this reasons, containers are used to isolate the environments.

A container is an isolated running instance of a process with it's own set of resources, file system and what not.

Continuing the analogy, if an image is a blueprint to create a container than in OOP reference, an image is a class and a container is an instance of that class. So essentially you can create as many containers as you want from a single image.

Getting started with docker

You'll be needing docker desktop for the tutorial down below. Docker Desktop

When you install docker desktop (For Mac and Windows(pro)), docker runs a Linux virtual machine behind the scenes to run something called as a 'docker server'

Extra info:
Docker uses Linux kernel because of the feature called namespaces. Namespaces are a feature of the Linux kernel that partitions kernel resources such that one set of processes sees one set of resources while another set of processes sees a different set of resources

When the docker server is up. You can communicate with it using docker cli

docker run hello-world
docker run <image_name> <optional: command>

docker: reference to the docker client

run: Try to create or run a container

<image_name>: Name of image to use for this container

<command>: !optional. This command would override default startup command.

For instance

Some docker commands

Here are some of the commands I daily get to use.

docker ps                                 // List running containers
docker ps -all                            // List all containers
docker system prune                       // Remove all unused containers, networks, images (both dangling and unreferenced), and optionally, volumes.
docker logs <container_id>                // Fetch the logs of a container
docker stop <container_id>                // Fetch the logs of a container
docker kill <container_id>                // Stop one or more running containers
docker exec -it <contianer_id> <command>  // runs a new command in a running container.
docker run -it <container_id> sh          // Overides the default command and opens a shell in the running container

-it flag

docker run -it busybox sh

-i → connects your terminal with the container's STDIN (Hence the commands are directly run inside the container)

-t → Does the formatting of the input/output in the terminal

-it → You can club them together like this

All the docker commands

Thank you!

Would love to hear your thoughts.

React: Scroll Transition for Fancy Portfolios

Rahul — Mon, 13 Sep 2021 13:59:26 +0000

I saw this fancy scrolling effect on this website and it just blew my mind. I thought of recreating it and got somewhat successful :)

BTW, surely check this portfolio website by Ilya Kulbachny.

Read this article on my blog to see it working live and also to get the source code

Setup

Run the following commands to have an initial setup to work on.

git clone https://github.com/holdmypotion/scroll-transition.git
cd scroll-transition
git checkout starter
yarn
yarn start

Final File Structure

heroSection.js

Let's start with the hero section. We'll be using framer-motion to animate the image on scroll.

Copy paste this code in src/components/heroSection.js

import React from 'react';
// 1.
import { motion, useViewportScroll, useTransform } from 'framer-motion';

import styles from '../styles/heroSection.module.css';
import heroImage from '../assets/images/5.jpeg';

export default function HeroSection({ offset = 1500 }) {
  // 2.
  const { scrollY } = useViewportScroll();
  // 3.
  const scale = useTransform(scrollY, [0, offset], [1, 5]);
  const opacity = useTransform(scrollY, [0, offset], [3, 0]);
  const moveDown = useTransform(scrollY, [0, offset], [0, -1000]);

  return (
    <>
      <div className={styles.imageContainer}>
        {/* 4. */}
        <motion.img
          src={heroImage}
          alt='Model'
          style={{
            opacity: opacity,
            scale: scale,
            y: moveDown,
          }}
        />
      </div>
      {/* 5. */}
      <div style={{ background: '#030303', height: `${offset}px` }}></div>
      <div style={{ background: '#030303', height: '80vh' }}></div>
    </>
  );
}

Let's break it down:

Here we import all the sass we need from framer motion
1. motion: Grants a normal JSX element super powers (extra props to work with framer motion API)
2. useViewportScroll: Can be used to track the position of the scroll.
3. useTransform: Can be used to change the value of a variable based on a changing value of another variable. (by default: the change is linear)
We are using the useViewportScroll hook to get the vertical scroll distance in pixels
Using the useTransform hook to change the value of 3 variables, scale, opacity, and moveDown based on the scrollY
Here we pass the dynamic values to the styles prop of the motion component.
Lastly, we are adding this empty div of height equal to the total scrolling area we set. This allows us to scroll as the above imageContainer is set toposition: fixed

Thank you for reading!

Read this article on my blog to see it working live and also to get the source code

React: Tag Text Search

Rahul — Sat, 17 Jul 2021 04:46:11 +0000

I recently fabricated this 'Tag-Text-Search' functionality for my blog. So, here is a little article just about it.

BTW, the source code for the blog is public and you can surely go check it here.

In this blog, we'll be using Context API to make the setup work. So, go ahead if you have a basic understanding of it and if not, you can definitely go have a look at my article on Using React Context API Like a Pro

Read this article on my blog to see it working live and also to get the source code

Hope you enjoy :)

Setup

Run the following commands to have an initial setup to work on.

npx create-react-app tag-text-search
cd tag-text-search
yarn start

Final File Structure

The Side Bar

I think it is better to start with creating a side bar that shall contain the search bar and the tags.

src/sideBar/sideBar.js

import SearchBar from './searchBar';
import TagSection from './tagSection';
import styles from '../../styles/sideBar.module.css';

export default function SideBar() {
  return (
    <div className={styles.stickyContainer}>
      <div className={styles.container}>
        <SearchBar />
        <TagSection />
      </div>
    </div>
  );
}

We'll be creating the sideBar.module.css in a moment. But let's first finish off the SerachBar and the TagSection

Wait, no! As a matter of fact, let's be done with all the styling right now right here.
Here you go, paste the code below in src/styles/sideBar.module.css

.stickyContainer {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  height: 0;
  z-index: 20;
  width: 30%;
  max-width: 30%;
}

.container {
  position: absolute;
  z-index: 20;
  display: inline-block;
  height: 100vh;
  left: 20px;
  padding: 1rem;
  top: 0;
  background: var(--baseLight);
  border-radius: 2px;
  z-index: 10;
  transition: 0.8s;
}

.sb__container {
  background: var(--base);
  border-radius: 2px;
  transition: 0.4s;
  margin: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 2px solid transparent;
  width: 100%;
}

.sb__container:focus-within {
  background: var(--baseLight);
  border: 2px solid var(--primary);
}

.sb__container svg {
  margin-left: 0.5rem;
  padding-top: 0.2rem;
}

.sb__input {
  font-family: Antonio;
  background: var(--base);
  outline: none;
  color: var(--primary);
  font-size: 1rem;
  letter-spacing: 0.5px;
  width: 100%;
  padding: 5px;
  border: none;
  transition: 0.4s;
}

.sb__input:focus-within {
  background: var(--baseLight);
}

.sb__input::placeholder {
  color: var(--primary);
}

.ts__flexContainer {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
}

.ts__heading {
  text-transform: capitalize;
  font-size: 1.7rem;
}

.ts_selectedTagContainer {
  margin-bottom: 1.5rem;
  margin-top: 0.3rem;
}

.ts__unselectedTagContainer {
  overflow-y: auto;
  height: 100%;
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ts__selectedTag {
  cursor: pointer;
  margin: 0.2rem 0;
  margin-right: 0.4rem;
  position: relative;
  color: black;
  border: 2px solid var(--primary);
  padding: 5px 15px;
  overflow: hidden;
  transition: 1s all ease;
  background: transparent;
  font-family: Antonio;
  font-weight: bold;
  letter-spacing: 0.04em;
  border-radius: 2px;
  outline: none;
  background: var(--primary);
  font-size: 1rem;
}

.ts__unselectedTag {
  cursor: pointer;
  margin: 0.5rem 0;
  position: relative;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 5px 15px;
  overflow: hidden;
  transition: 1s all ease;
  background: transparent;
  font-family: Antonio;
  font-weight: bold;
  letter-spacing: 0.04em;
  border-radius: 2px;
  outline: none;
  background: var(--base);
  font-size: 1rem;
}

This has all the styles we would be needing for the SideBar , the SearchBar, and the TagSection.

As you can see we are using a couple of CSS variables so we better create them as well.

Paste this code in src/index.css

:root {
  --base: #e3e3e3;
  --baseLight: #c8c7c7;
  --primary: #f1762d;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Search Bar

I do have a blog that is just based on this search functionality, in case you want to check that out. Implement Search Bar in React for Ecommerce Website

Alright now, let's code the SearchBar. It is pretty straightforward as opposed to the TagSection

Just copy the code below in src/components/sideBar/serachBar.js

import { useContext } from 'react';
import { SearchContext } from '../../store/search-context';
import styles from '../../styles/sideBar.module.css';

const SearchBar = () => {
  const { query, searchHandler } = useContext(SearchContext);

  return (
    <div className={styles.sb__container}>
      <svg
        width='16'
        height='16'
        viewBox='0 0 16 16'
        fill='none'
        xmlns='http://www.w3.org/2000/svg'
      >
        <path
          d='M10.9167 9.66667H10.2583L10.025 9.44166C10.8417 8.49166 11.3333 7.25833 11.3333 5.91667C11.3333 2.925 8.90833 0.5 5.91667 0.5C2.925 0.5 0.5 2.925 0.5 5.91667C0.5 8.90833 2.925 11.3333 5.91667 11.3333C7.25833 11.3333 8.49166 10.8417 9.44166 10.025L9.66667 10.2583V10.9167L13.8333 15.075L15.075 13.8333L10.9167 9.66667ZM5.91667 9.66667C3.84167 9.66667 2.16667 7.99167 2.16667 5.91667C2.16667 3.84167 3.84167 2.16667 5.91667 2.16667C7.99167 2.16667 9.66667 3.84167 9.66667 5.91667C9.66667 7.99167 7.99167 9.66667 5.91667 9.66667Z'
          fill='#F1762D'
        />
      </svg>
      <input
        className={styles.sb__input}
        placeholder='Search'
        type='text'
        onChange={e => searchHandler(e.target.value)}
        value={query}
      />
      <span>
        <i></i>
      </span>
    </div>
  );
};

export default SearchBar;

Now, we still have one thing that we need to create to make this work, SearchContext. So let's get on with it.

Search Context

The idea is, you define a state and the setState function in the Context and now you can essentially 'get the state' or 'update the state' from any of the components wrapped in the Context (whole application mostly :))

Paste the code below in src/store/search-context.js

import { useState, createContext } from 'react';

export const SearchContext = createContext({
  query: '',
  searchHandler: () => {},
});

const SearchContextProvider = props => {
  const [query, setQuery] = useState('');

  const searchHandler = query => {
    setQuery(query.toLowerCase());
  };

  return (
    <SearchContext.Provider
      value={{ query: query, searchHandler: searchHandler }}
    >
      {props.children}
    </SearchContext.Provider>
  );
};

export default SearchContextProvider;

Time to look at searchBar.js and serach-context.js simultaneously.

The state that is being updated by the onChange function on the input in the serachBar.js is the state defined in the context, i.e. query, and the function that is updating the state is also coming from the context, i.e. searchHandler.

We are all set but one thing. We never wrapped our application with the context. The way I like to do this is by creating an index.js in src/store and export a component named Context.

Here, paste the code below in src/store/index.js

import SearchContextProvider from './search-context';

export default function Context({ children }) {
  return (
    <SearchContextProvider>
      {children}
    </SearchContextProvider>
  );
}

The reason I like to do this is because I can create multiple contexts in multiple files and then combine them all in this file. (You'll see this later when we create the filter-context.js for tag filtering functionality)

Finally, we need to wrap our application with this context.

Paste this code in src/App.js

import SideBar from './components/sideBar/sideBar';
import Context from './store';

function App() {
  return (
    <Context>
      <SideBar />
    </Context>
  );
}

export default App;

Tag Section

Alright now! Let me lay out the concept behind this functionality.

Essentially there are two lists

Unselected Tags
Selected Tags

Initially, we put all the tags in the 'Unselected Tags' list and keep the 'Selected Tags' list empty.

Then we create two functions namely, selectTagHandler and unselectTagHandler. The selectTagHandler puts the selected tag into the 'Selected Tags' list and removes it from the 'Unselected Tags' list, and the unselectTagsHandler does exactly the opposite.

Finally, both of these functions update the fillter-contenxt (that we'll be creating shortly) with the 'Selected Tags' list for us to access later and use to filter articles. But more on that later. Okay, enough formulation! Let's jump right into creating the Tag Section

At first, let's have the TAGS array.

Paste this into src/data/data.js

export const TAGS = [
  'react',
  'books-notes',
  'web-dev',
  'design',
  'javascript',
  'reactnative',
  'mobile-dev',
];

Paste the code below into src/components/sideBar/tagSection.js

import { useState } from 'react';
import { TAGS } from '../../data/data';
import styles from '../../styles/sideBar.module.css';

export default function TagSection() {
    // 1.
  const [unselectedTags, setUnselectedTags] = useState(TAGS);
  const [selectedTags, setSelectedTags] = useState([]);

    // 2.
  const selectTagHandler = tag => {
    const updatedSelectedTags = selectedTags.concat(tag);
    setSelectedTags(updatedSelectedTags);
    setUnselectedTags(
      unselectedTags.filter(unselectedTag => unselectedTag !== tag)
    );
  };

// 3.
  const unselectTagHandler = tag => {
    setUnselectedTags(unselectedTags.concat(tag));
    const updatedSelectedTags = selectedTags.filter(
      selectedTag => selectedTag !== tag
    );
    setSelectedTags(updatedSelectedTags);
  };

  const selectedTagsList = selectedTags.map(tag => (
    <button
      className={styles.ts__selectedTag}
      key={tag}
      onClick={() => unselectTagHandler(tag)}
    >
      #{tag}
    </button>
  ));

  const unselectedTagsList = unselectedTags.map(tag => (
    <button
      key={tag}
      className={styles.ts__unselectedTag}
      onClick={() => selectTagHandler(tag)}
    >
      #{tag}
    </button>
  ));

  return (
    <div className={styles.ts__flexContainer}>
      <div className={styles.ts__flexContainer}>
        <h2 className={styles.ts__heading}>You Selected</h2>
        <div className={styles.ts_selectedTagContainer}>{selectedTagsList}</div>
      </div>
      <div className={styles.ts__flexContainer}>
        <h2 className={styles.ts__heading}>To Select From</h2>
        <div className={styles.ts__unselectedTagContainer}>
          {unselectedTagsList}
        </div>
      </div>
    </div>
  );
}

Let's break it down.

Firstly we create two arrays (or lists), unselectedTags and selectedTags. You'll notice that the unselectedTags is prepopulated with the TAGS array just like we planned, and the selectedTags is empty.
selectTagHandler takes an argument tag and uses that to populate selectedTags array using the .concat method that comes with the JS Arrays. Now we also need to remove the selected tag from the unselectedTags array and for that, we use the .filter method, again, that comes with the JS Arrays.
unselectTagHandler does exactly the opposite of the function we just discussed, i.e. selectTagHandler. Takes an argument, named tag - updates the unselectedTags array with it - remove it out from the selectedTags array.

Creating the filter context

As you have witnessed all the logic related to state management is right here in the TagSection component. But, in order to filter out articles based on the selected tags we need access to the selectedTags array. To achieve this we create the filter-context in which we basically keep a copy of selectedTags array. So when we update the selectedTags array in the TagSection we also update the state in our filter context.

I'll show you how!

Paste the code below in src/store/filter-context.js

import { useState, createContext } from 'react';

export const FilterContext = createContext({
  tags: [],
  tagSelector: () => {},
});

const FilterContextProvider = props => {
  const [tags, setTags] = useState([]);

  const tagSelector = tagsList => {
    setTags(tagsList);
  };

  return (
    <FilterContext.Provider value={{ tags: tags, tagSelector: tagSelector }}>
      {props.children}
    </FilterContext.Provider>
  );
};

export default FilterContextProvider;

Pretty straightforward, right. Whatever you pass (essentially a list) to the tagSelector function, is used to update the state tags. This is the state that we'll be using later in another component to filter out articles.

But this is not done yet, firstly we shall wrap our application with this context.

Paste the code below into src/store/index.js

import SearchContextProvider from './search-context';
import FilterContextProvider from './filter-context';

export default function Context({ children }) {
  return (
    <SearchContextProvider>
      <FilterContextProvider>{children}</FilterContextProvider>
    </SearchContextProvider>
  );
}

And secondly we need to add an extra bit of logic to our happy little rainbow-colored TagSection component.

Just paste the whole code into src/components/sideBar/tagSection.js and I'll explain the added lines just below it.

import { useState, useContext } from 'react';
import { TAGS } from '../../data/data';
import { FilterContext } from '../../store/filter-context';
import styles from '../../styles/sideBar.module.css';

export default function TagSection() {
    // 1.
  const filterContext = useContext(FilterContext);

  const [unselectedTags, setUnselectedTags] = useState(TAGS);
  const [selectedTags, setSelectedTags] = useState([]);

  const selectTagHandler = tag => {
    const updatedSelectedTags = selectedTags.concat(tag);
    setSelectedTags(updatedSelectedTags);
    setUnselectedTags(
      unselectedTags.filter(unselectedTag => unselectedTag !== tag)
    );
        // 2.
    filterContext.tagSelector(updatedSelectedTags);
  };

  const unselectTagHandler = tag => {
    setUnselectedTags(unselectedTags.concat(tag));
    const updatedSelectedTags = selectedTags.filter(
      selectedTag => selectedTag !== tag
    );
    setSelectedTags(updatedSelectedTags);
    // 3.
    filterContext.tagSelector(updatedSelectedTags);
  };

  const selectedTagsList = selectedTags.map(tag => (
    <button
      className={styles.ts__selectedTag}
      key={tag}
      onClick={() => unselectTagHandler(tag)}
    >
      #{tag}
    </button>
  ));

  const unselectedTagsList = unselectedTags.map(tag => (
    <button
      key={tag}
      className={styles.ts__unselectedTag}
      onClick={() => selectTagHandler(tag)}
    >
      #{tag}
    </button>
  ));

  return (
    <div className={styles.ts__flexContainer}>
      <div className={styles.ts__flexContainer}>
        <h2 className={styles.ts__heading}>You Selected</h2>
        <div className={styles.ts_selectedTagContainer}>{selectedTagsList}</div>
      </div>
      <div className={styles.ts__flexContainer}>
        <h2 className={styles.ts__heading}>To Select From</h2>
        <div className={styles.ts__unselectedTagContainer}>
          {unselectedTagsList}
        </div>
      </div>
    </div>
  );
}

Let's break it down

Here we are storing the object returned by the FilterContext in a constant named filterContext.
And, now we are passing the same exact array to the filterContext.tagSelector function that we passed to setSeletectTagsarray. Hence this makes a copy of the array selectedTags in the filter-context, namely tags array.

Phew! we are almost done. Only thing left to do is, Creating an articles array - Creating a component to render those articles - And before that, filtering them using tags and the search query.

Main Content

Alright now, this will probably feel less overwhelming so let's be done with it.

Styling first, shall we?

Paste this code in src/styles/mainContent.module.css

.container {
  width: 70%;
  margin-left: auto;
}

.thumbnailContainer {
  padding: 2rem 2rem;
  background-color: gray;
  border-radius: 10px;
  margin: 2rem;
  display: inline-block;
  width: 200px;
}

Now, let's create an ARTICLES array. Paste the code below in src/data/data.js

export const ARTICLES = [
  {
    id: '1',
    title: 'Using React Context API Like a Pro',
    body: 'If you\'ve been hearing the term "Context API" and feel totally confused about it (like me, some days ago) or you have no clue what this even means, look no further! I\'ve got you covered (for the most part, I believe)',
    tags: ['react', 'web-dev', 'javascript'],
  },
  {
    id: '2',
    title: 'Never Split the difference - Book Notes',
    body: 'If you\'ve been hearing the term "Context API" and feel totally confused about it (like me, some days ago) or you have no clue what this even means, look no further! I\'ve got you covered (for the most part, I believe)',
    tags: ['books-notes'],
  },
  {
    id: '3',
    title: 'Design in React',
    body: 'If you\'ve been hearing the term "Context API" and feel totally confused about it (like me, some days ago) or you have no clue what this even means, look no further! I\'ve got you covered (for the most part, I believe)',
    tags: ['design', 'react', 'javascript', 'web-dev'],
  },
  {
    id: '4',
    title: 'Design in React Native',
    body: 'If you\'ve been hearing the term "Context API" and feel totally confused about it (like me, some days ago) or you have no clue what this even means, look no further! I\'ve got you covered (for the most part, I believe)',
    tags: ['design', 'react', 'reactnative', 'javascript', 'mobile-dev'],
  },
];

export const TAGS = [
  'react',
  'books-notes',
  'web-dev',
  'design',
  'javascript',
  'reactnative',
  'mobile-dev',
];

Alright, we are almost done. Paste the code below into src/components/mainContent.js

import { useContext } from 'react';
import { SearchContext } from '../store/search-context';
import { FilterContext } from '../store/filter-context';
import styles from '../styles/mainContent.module.css';

export default function MainContent({ articles }) {
  const searchContext = useContext(SearchContext);
  const { tags } = useContext(FilterContext);
  let filteredArticles = null;
  if (articles) {
    // 1. Tag Search
    filteredArticles = articles.filter(article => {
      if (tags.length === 0) {
        return article;
      }
      if (tags.some(val => article.tags.includes(val))) {
        return article;
      } else {
        return null;
      }
    });

    // 2. Text Search
    filteredArticles = filteredArticles.filter(article => {
      if (article.title.toLowerCase().includes(searchContext.query)) {
        return article;
      } else {
        return null;
      }
    });
  }

  return (
    <div className={styles.container}>
      {filteredArticles !== null &&
        filteredArticles.map(article => {
          return (
            <div className={styles.thumbnailContainer} key={article.id}>
              <h2>{article.title}</h2>
            </div>
          );
        })}
    </div>
  );
}

Let's break it down. We are calling both our contexts and retrieving both the querystate and tags state.

Firstly, we filter the articles using tags. If tags.length === 0, in other words, if no tag is selected → return all the articles. if tags.some(val => article.tags.includes(val)), i.e. if any of the tags selected are there in the tags array associated with the article object → return that article otherwise → return nothing.
Secondly, we are further filtering the articles based on the search query. If (article.title.toLowerCase().includes(searchContext.query)), in other words, if a part of the title of the article matches with the search query (no matter the casing) → return that article otherwise → return nothing.

Alright, let's import this component into App.js, pass the articles and finish the remaining coffee (at least for me :)).

Paste the code below in App.js

import SideBar from './components/sideBar/sideBar';
import Context from './store';
import MainContent from './components/mainContent';
import { ARTICLES } from './data/data';

function App() {
  return (
    <Context>
      <SideBar />
      <MainContent articles={ARTICLES} />
    </Context>
  );
}

export default App;

There you have it. An ugly-looking but working 'tag-text-search' functionality. If you want to see it in action, do visit my blog (in case you aren't already on it :)

Thank you for reading!

Would love to hear you thoughts on this!

Read this article on my blog to see it working live and also to get the source code

React: Marquee using Framer Motion

Rahul — Sun, 02 May 2021 04:39:32 +0000

This is called a "marquee" and apparently, I needed one for my portfolio website. So, I thought I might as well share it with you all!

In this blog, we'll create an infinitely running long text (that seems to be very trendy lately) using Framer Motion and obviously react!

Live Link

Code Sand Box

Github Repo

Setup

Run the following commands to set up a react app.



npx create-react-app marquee
cd marquee
npm i framer-motion
npm start

Final File Structure

src/

Marquee.css

Create a file src/components/marquee.css and paste the code below



.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 206px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
}

.track > h1 {
  margin: 20px 0;
  font-size: 8rem;
  font-family: Antonio;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #f4955c;
  text-transform: uppercase;
}

Marquee.js

Create a file src/components/marquee.js and paste the code below.



import React from "react";
// 1. Importing framer-motion
import { motion } from "framer-motion";

import "./marquee.css";

// 2. Defining Variants
const marqueeVariants = {
  animate: {
    x: [0, -1035],
    transition: {
      x: {
        repeat: Infinity,
        repeatType: "loop",
        duration: 5,
        ease: "linear",
      },
    },
  },
};

const Marquee = () => {
  return (
    <div>
      <div className="marquee">
                {/* 3. Using framer motion */}
        <motion.div
          className="track"
          variants={marqueeVariants}
          animate="animate"
        >
          <h1>
            Let's Work Together. Let's Work Together. Let's Work Together. Let's
            Work Together. Let's Work Together. Let's Work Together. Let's Work
            Together
          </h1>
        </motion.div>
      </div>
    </div>
  );
};

export default Marquee;

Let's break it down.

Importing Framer Motion: motion is an API provided by framer-motion that supercharges a normal JSX element(div, h1, span, you name it:)), giving us a lot more props to work with.
Defining Variants: This is the actual magic that makes the stuff do weird things. Here, we are making a variable named marqueeVariants (you can name it anything) and we are describing a property named animate (again, name it whatever you like) that does all the jazz.
- x: [0, -1035] → will translate the element from 0 to -1035px
- Below this, we are defining the way we want our little element to translate, i.e. the transition.
- repeatType: "loop" → makes the translation go again and again, i.e. in a loop
- repeat: Infinity → makes the loop go infinite times
- duration: 5 → time taken to complete the transition/loop.
- ease: "linear" → makes the speed of translation equal throughout its course.
Apply motion and the variants on an element:
- Set the variants property to the name of the variable defined, in our case marqueeVariants
- Set the animate property to the name of the property defined in the marqueeVariants, in our case animate (AS A STRING)

App.js

We just need to add this in our App.js and admire it while it rolls.



import "./App.css";
import Marquee from "./components/marquee";

function App() {
  return (
    <div className="App">
      <Marquee />
    </div>
  );
}

export default App;

Oh, I almost forgot. The font.

Here, paste this code in index.css



@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&amp;display=swap");

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",

    "Antonio", sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  background-color: #2e2e2e;

}

code {

  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",

    monospace;

}

Thank you so much for reading

Leave your review down below.
Later.

React: Custom Cursor (No Extra dependencies!)

Rahul — Tue, 09 Mar 2021 06:45:29 +0000

Just like the last article, this also focuses on a feature that I would like my portfolio to have. A custom cursor.
I've noticed this treat a lot lately and I think it adds a bit of extra sass to the website.

In this article, we'll be making a very basic custom cursor. This could act as a base setup for any kind of cursor you would want to create for your next project.
So let's jump right into the

P.S.: Just React no other dependencies!!

Github Repository: Click me

Live CodeSandBox: Click me

Set up

Run the following command to set up a default react app



npx create-react-app custom-cursor
cd custom-cursor
yarn start

Final File Structure

useMousePosition():

I want to add more cursors to this repository in the future and hence I created a separate hook for getting the current position of the mouse.

Paste this code in src/hooks/useMousePosition.js



import { useEffect, useState } from "react";

export default function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({ x: null, y: null });

  useEffect(() => {
    const mouseMoveHandler = (event) => {
      const { clientX, clientY } = event;
      setMousePosition({ x: clientX, y: clientY });
    };
    document.addEventListener("mousemove", mouseMoveHandler);

    return () => {
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []);

  return mousePosition;
}

In a nutshell, we are listening to an event called mousemove and calling a function mouseMoveHandler on each mouse movement.
The function then updates the state with the new coordinates and then our precious little hook return those new coordinates.

Custom Cursor

Here is a simple Dot and Ring cursor.

Paste this code in src/components/DotRing/DotRing.js and scroll down for an explanation of this code.



import "./DotRing.css";
import useMousePosition from "../../hooks/useMousePosition";

const DotRing = () => {
    // 1.
  const { x, y } = useMousePosition();
  return (
    <>
            {/* 2. */}
      <div
        style={{ left: `${x}px`, top: `${y}px` }}
        className="ring"
      ></div>
            {/* 3. */}
      <div
        className="dot"
        style={{ left: `${x}px`, top: `${y}px` }}
      ></div>
    </>
  );
};

export default DotRing;

Let's break it down:

We returned {x, y} from useMousePosition() and here we are using them.
This is the outer ring over the dot and we are passing the x and y coordinate to the left and top of this element.
This is the dot and we are doing the same this here, passing left: x and top: y

DotRing.css



.ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(31, 30, 30, 0.808);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  will-change: width, height, transform, border;
  z-index: 999;
  pointer-events: none;
}

.dot {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

One thing to notice here is the transition property, we are delaying the movement of the ring by 100ms. This all is personal preference by the way.

The will-change property:

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.

Using The Cursor

App.js



import "./App.css";
import DotRing from "./components/DotRing/DotRing";

function App() {
  return (
    <div className="App">
      <DotRing />
      <div className="container"></div>
      <div className="container" style={{ background: "peachpuff" }}></div>
    </div>
  );
}

export default App;

App.css



.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
  color: black;
}

index.css

Add this to index.css to make the default cursor vanish!



* {
  cursor: none;
}

We are done with a good-looking cursor but there is one problem here, there is no way to change the way the cursor looks or behaves when it is on a certain element.

We'll be doing just that in the next section.

Mouse Context

Paste this code in src/context/mouse-context.js



import React, { createContext, useState } from "react";

export const MouseContext = createContext({
  cursorType: "",
  cursorChangeHandler: () => {},
});

const MouseContextProvider = (props) => {
  const [cursorType, setCursorType] = useState("");

  const cursorChangeHandler = (cursorType) => {
    setCursorType(cursorType);
  };

  return (
    <MouseContext.Provider
      value={{
        cursorType: cursorType,
        cursorChangeHandler: cursorChangeHandler,
      }}
    >
      {props.children}
    </MouseContext.Provider>
  );
};

export default MouseContextProvider;

This is a very basic context that stores a string, cursorType , and a function, cursorChangeHandler to change that string.

BTW, if this is your first time tripping over context. Here is a link to my article on Using React Context API Like a Pro

The Big Idea

The thing we are trying to accomplish using this context is to change the cursorType by calling the cursorChangeHandler() on onMouseEnter() and onMouseLeave() events of the required element.

We'll later pass this cursorType as a className to the cursor and define a class for it in the CSS of our cursor.

Using the Context

index.js

Paste the code in index.js



import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import MouseContextProvider from "./context/mouse-context";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

Pas



import { useContext } from "react";
import "./App.css";
import DotRing from "./components/DotRing/DotRing";
import { MouseContext } from "./context/mouse-context";

function App() {
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);
  return (
    <div className="App">
      <DotRing />
      <div className="container">
        <div
          onMouseEnter={() => cursorChangeHandler("hovered")}
          onMouseLeave={() => cursorChangeHandler("")}
        >
          <h1>Hover over me</h1>
        </div>
      </div>
      <div className="container" style={{ background: "peachpuff" }}></div>
    </div>
  );
}

export default App;

Notice the props onMouseEnter and onMouseLeave . These props are helping us call the cursorChangeHandler function to change the cursorType.

Now, we'll edit the DotRing.js and DotRing.css file to incorporate the new changes.

DotRing.js

Overwrite the src/components/DotRing/DotRing.js with this code



import React, { useContext } from "react";
import "./DotRing.css";
import useMousePosition from "../../hooks/useMousePosition";
import { MouseContext } from "../../context/mouse-context";

const DotRing = () => {
    // 1.
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);

  const { x, y } = useMousePosition();
  return (
    <>
            {/* 2. */}
      <div
        style={{ left: `${x}px`, top: `${y}px` }}
        className={"ring " + cursorType}
      ></div>
      <div
        className={"dot " + cursorType}
        style={{ left: `${x}px`, top: `${y}px` }}
      ></div>
    </>
  );
};

Let's break it down

Here, we are extracting the stuff out of our context
And dynamically adding the cursortype to the className

DotRing.css



.ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(31, 30, 30, 0.808);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  will-change: width, height, transform, border;
  z-index: 999;
  pointer-events: none;
}

.dot {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

.ring.hovered {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-color: lightgray;
}

.dot.hovered {
  display: none;
}

This should be enough to get you started. You can make it as fancy as you want, maybe use keyframes or framer motion to add an infinite animation on the cursor, add different cursorTypes for different purposes

Github Repository: Click me

Live CodeSandBox: Click me

Thank you for reading

Leave your reviews.

React: Super Simple Smooth Scrolling

Rahul — Sun, 28 Feb 2021 17:21:52 +0000

I have been wanting to redo my portfolio, and one of the major things I wanted it to have was smooth scrolling. So, I created a super simple smooth-scrolling effect with no extra dependencies but react.

In this blog, we'll be creating that together. So, let's get right into it.

Live Link

CodeSandBox

Github Repo

Setup

Run the following commands to set up a react app.



npx create-react-app smooth-scroll
cd smooth-scroll
yarn start

Overview

So essentially what we are trying to do is to simply translate a div in Y-direction with a delay.
This div will hold the full SPA (Single Page Application), resulting in an all-out smooth scrolling effect.



<div className="parent">
  <div ref={scrollingContainer}>
    {/* The Complete App */}
  </div>
</div



.parent{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

In this set up the div with the ref scrollingContainer will translate in Y-direction.
Notice that the div with a class of "parent" is set to position: fixed. This is essential otherwise the children div will just translate up leaving the space empty down below.

By doing this we are basically letting the browser know that our whole app is a fixed container of "width=100%" and "height=100%", with no scroll and stuff.

Later on, we'll be setting the height of the

tag equal to the "scrollingContainer div" and that will allow us to scroll.

On Scroll we'll translate the "scrollingContainer div".

Don't worry if this doesn't make sense. Hopefully, the code will make it clearer.

Final File Structure

SmoothScroll.js

Create a file in src/components/SmoothScroll/SmoothScroll.js and paste the code below.
Don't worry about the imports just yet. We'll be creating them shortly.



import React, { useEffect, useRef } from "react";

import "./SmoothScroll.css";
import useWindowSize from "../../hooks/useWindowSize";

const SmoothScroll = ({ children }) => {
  // 1.
  const windowSize = useWindowSize();

  //2.
  const scrollingContainerRef = useRef();

  // 3.
  const data = {
    ease: 0.1,
    current: 0,
    previous: 0,
    rounded: 0,
  };

  // 4.
  useEffect(() => {
    setBodyHeight();
  }, [windowSize.height]);

  const setBodyHeight = () => {
    document.body.style.height = `${
      scrollingContainerRef.current.getBoundingClientRect().height
    }px`;
  };

  // 5.
  useEffect(() => {
    requestAnimationFrame(() => smoothScrollingHandler());
  }, []);

  const smoothScrollingHandler = () => {
    data.current = window.scrollY;
    data.previous += (data.current - data.previous) * data.ease;
    data.rounded = Math.round(data.previous * 100) / 100;

    scrollingContainerRef.current.style.transform = `translateY(-${data.previous}px)`;

    // Recursive call
    requestAnimationFrame(() => smoothScrollingHandler());
  };

  return (
    <div className="parent">
      <div ref={scrollingContainerRef}>{children}</div>
    </div>
  );
};

export default SmoothScroll;

Let's break it down.

useWindowSize() is a custom hook that returns the current innerWidth and innerHeight of the window.
scrollingContainerRef is used to apply translateY property on the div, on the fly.
data is not a state because we don't want our react component re-rendering each time we scroll.
This useEffect runs only if the windowSize changes (if the user resizes the browser). setBodyHeight makes the height property on equal to the height of the "scrollingContainerRef div". After passing "position: fixed" to the "parent div", this makes sure that we have enough room to scroll through the whole "scrollingContainerRef div"
This useEffect runs only once and calls the smoothScrolling function. The smoothScrolling function runs recursively changing the translate property on the "scrollingContainerRef div" whenever the user scroll.

Notice that we are calling the smoothScrolling function through requestAnimationFrame() function.

The window.requestAnimationFrame(**)** method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate another frame at the next repaint. requestAnimationFrame() is 1 shot.

SmoothScrolling.css

Create a file in src/components/SmoothScroll/SmoothScroll.css and paste the code below.



.parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

useWindowSize.js

Create a file in src/hooks/useWindowSize.js and paste the code below



import { useState, useEffect } from "react";

export default function useWindowSize() {
  const getSize = () => {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
    };
  };

  const [windowSize, setWindowSize] = useState(getSize);

  useEffect(() => {
    const handleResize = () => {
      setWindowSize(getSize());
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

This is a pretty straightforward hook that listens to the event of window resize and returns the latest innerWidth and innerHeight of the window.

Section.js

Create a file src/components/Section/Section.js and paste the code below.



import React from "react";

import "./section.css";

const section = ({ flexDirection }) => {
  return (
    <div className="section" style={{ flexDirection: flexDirection }}>
      <div className="left-container">
        <div className="block"></div>
      </div>

      <div className="right-container">
        <div className="container">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. In
            laudantium esse fugiat illum tempore sapiente soluta labore voluptas
            iusto deleniti ab suscipit dolores quisquam corrupti facilis, id
            temporibus mollitia repellat omnis tempora commodi eveniet.
            Incidunt, perspiciatis, adipisci laboriosam dolores quos dolor
            voluptate odio magnam aperiam, alias asperiores pariatur! Nisi,
            libero!
          </p>
        </div>
      </div>
    </div>
  );
};

export default section;

SmoothScrolling.css

Create a file src/components/Section/Section.css and paste the code below.



.section {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  height: 100vh;
}

.block {
  width: 250px;
  height: 250px;
  padding: 60px;
  background-color: peachpuff;
}

.container {
  width: 500px;
}

p {
  font-size: 1.5rem;
}

Just a react component to fill up some space in our scrolling Container

App.js



import React from "react";

import "./App.css";
import Section from "./components/Section/Section";
import SmoothScroll from "./components/SmoothScroll/SmoothScroll";

function App() {
  return (
    <SmoothScroll>
      <h2>Smooth Scrolling</h2>
      <Section flexDirection="row" />
      <Section flexDirection="row-reverse" />
      <Section flexDirection="row" />
      <Section flexDirection="row-reverse" />
      <Section flexDirection="row" />
      <Section flexDirection="row-reverse" />
    </SmoothScroll>
  );
}

export default App;

App.css



h2 {
  text-align: center;
  margin: 40px auto;
  font-size: 4rem;
}

Live Link

CodeSandBox

Github Repo

Thank you for reading!

Would love to hear your thought!

React 3D Image Slider

Rahul — Mon, 15 Feb 2021 05:46:43 +0000

I had to make an image slider for a project and I found out that there is no ready to use cool, basic, image slider. So I went ahead and made one using react-slick.
In this article, we will be making that image slider together. Let's get right into it.

Live Link: https://7etlk.csb.app/

Github Repo: https://github.com/holdmypotion/react-3d-image-slider

Attention!

Vlad Tansky implemented a version similar to this image slider using a well maintained JavaScript library Swiper JS. I definitely recommend this repository
https://github.com/vltansky/react-3d-image-slider

Setup

Run the following commands to set up the project.

npx create-react-app react-3d-image-slider

cd react-3d-image-slider
npm install react-slick slick-carousel

Now, in the App.css file erase everything and copy-paste the code below

/* App.css */

@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";

.App {
  text-align: center;
  height: 100vh;
}

.container {
  padding: 2.5rem 0;
}

The imports are needed for react-slick to work.

Creating the Slider

Let me first throw in the required CSS for the image slider component

/* src/components/ImageSlider.css */

.slide {
  transform: scale(0.7);
  transition: transform 300ms;
  opacity: 0.5;
}

.slideWrapper {
  display: flex;
  justify-content: center;
}

.prevArrow {
  position: absolute;
  top: 40%;
  left: 60px;
  z-index: 100;
  cursor: pointer;
  font-size: 2rem;
}

.nextArrow {
  position: absolute;
  top: 40%;
  right: 60px;
  z-index: 100;
  cursor: pointer;
  font-size: 2rem;
}

And here is the ImageSlider component.

// src/components/ImageSlider.js

import React, { useState } from "react";
// 1.
import Slider from "react-slick";
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";

import "./ImageSlider.css";

// 2.
const NextArrow = ({ onClick }) => {
  return (
    <div className='nextArrow' onClick={onClick}>
      <BsChevronRight />
    </div>
  );
};

const PrevArrow = ({ onClick }) => {
  return (
    <div className='prevArrow' onClick={onClick}>
      <BsChevronLeft />
    </div>
  );
};

const ImageSlider = ({ images, slidesToShow = 3 }) => {
    // 3.
  const [imageIndex, setImageIndex] = useState(0);

    // 4.
  const settings = {
    centerMode: true,
    infinite: true,
    dots: false,
    speed: 300,
    slidesToShow: slidesToShow,
    centerPadding: "0",
    swipeToSlide: true,
    focusOnSelect: true,
    nextArrow: <NextArrow onClick />,
    prevArrow: <PrevArrow onClick />,
    beforeChange: (current, next) => setImageIndex(next),
    responsive: [
      {
        breakpoint: 1490,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 820,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

    // 5.
  const templateImages = images.map((image, idx) => {
    return (
      <div
        className={idx === imageIndex ? "activeSlide" : "slide"}
        key={image.id}
      >
        <div className="slideWrapper">
          {image.code ? image.code : <img src={image.src} alt={image.alt} />}
        </div>
      </div>
    );
  });

  return <Slider {...settings}>{templateImages}</Slider>;
};

export default ImageSlider;

Let's break down this file

import Slider from "react-slick"
NextArrow and PrevArrow are the custom components that we will be using instead of the default arrows for the image slider
In the Slider component, each element is given an index starting from 0. This is the same way Indices work in the map() function in JavaScript. We are using the state "imageIndex" to keep the track of the latest (center image in case of odd number of sliders, i.e. 3, 5, …)
const settings hold the configuration for the slider.
templateImages variable holds the JSX for all the image components

Usage

This code for the slider takes in the data in a format as shown below

// src/data/data.js

export const IMAGES = [
  {
    id: 1,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
  {
    id: 2,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
  {
    id: 3,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
  {
    id: 4,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
  {
    id: 5,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
  {
    id: 6,
    src: "/images/image.png",
    alt: "Placeholder image",
  },
];

export const LARGE_IMAGES = [
  {
    id: 1,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
  {
    id: 2,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
  {
    id: 3,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
  {
    id: 4,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
  {
    id: 5,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
  {
    id: 6,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
];

export const VIDEOS = [
  {
    id: 1,
    code: (
      <iframe
        title="vid1"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/A63UxsQsEbU"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      ></iframe>
    ),
  },
  {
    id: 2,
    code: (
      <iframe
        title="vid2"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/Z5iWr6Srsj8"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      ></iframe>
    ),
  },
  {
    id: 3,
    code: (
      <iframe
        title="vid3"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/WRkmpqTluI8"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      ></iframe>
    ),
  },
  {
    id: 4,
    code: (
      <iframe
        title="vid4"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/vyVpRiqOvt4"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      ></iframe>
    ),
  },
];

But, you can modify it in any way. If you just have a list of image URLs, good enough. Just change the JSX code inside the "templateSlider" variable, accordingly!

BTW, if you are wondering that why I am referencing the images in the src attribute as

export const LARGE_IMAGES = [
  {
    id: 1,
    src: "/images/large_image.png",
    alt: "Placeholder image",
  },
]

It is because the images are placed in the public directory.

public/images/......

Using the Image Slider

// App.js

import "./App.css";
import ImageSlider from "./components/ImageSlider";

import { IMAGES, VIDEOS, LARGE_IMAGES } from "./data/data";

function App() {
  return (
    <div className='App'>
      <div className='container'>
        <ImageSlider images={IMAGES} slidesToShow={5} />
      </div>
      <div className='container'>
        <ImageSlider images={VIDEOS} />
      </div>
      <div className='container'>
        <ImageSlider images={LARGE_IMAGES} />
      </div>
    </div>
  );
}

export default App;

Live Link: https://7etlk.csb.app/

Github Repo: https://github.com/holdmypotion/react-3d-image-slider

Attention!

Thank you so much for reading.

I would love to hear your thoughts on this!

React Theme Switcher

Rahul — Sun, 31 Jan 2021 16:52:07 +0000

In this article, we'll be creating a theme switcher using styled-components, context API, and of course, react.

Live Example: https://codesandbox.io/s/react-theme-swticher-hbgjc

Github Repository: https://github.com/holdmypotion/React-Theme-Swticher

Setup

Run the following commands to initiate a react app.



npx create-react-app theme-switcher
cd theme-switcher
yarn add styled-components styled-normalize

Thus, you have a react app powered by styled-components.

Now, In the src folder create

a components folder and then a Layout.js file within.
a context folder and then a globalContext.js file within
a pages folder and then a Home.js file within
a styles folder and then a globalStyles.js file ad a homeStyles.js file.

The end structure should look something like this.

Creating a context for current theme state

Inside the globalContext.js file, paste the below code.



//globalContext.js

import React, { useState } from "react";

export const GlobalContext = React.createContext({
  currentTheme: "",
  themeSwitchHandler: () => {},
});

const GlobalContextProvider = (props) => {
  const [currentTheme, setCurrentTheme] = useState(
    window.localStorage.getItem("theme") == null
      ? "light"
      : window.localStorage.getItem("theme")
  );

  const themeSwitchHandler = (themeType) => {
    setCurrentTheme(themeType);
  };

  return (
    <GlobalContext.Provider
      value={{
        theme: currentTheme,
        themeSwitchHandler: themeSwitchHandler,
      }}
    >
      {props.children}
    </GlobalContext.Provider>
  );
};

export default GlobalContextProvider;

The code above creates a context with a state and state changing function.

In the end, properties mentioned in the value prop will be available to the components using the useContext() hook.



value={{
    theme: currentTheme,
    themeSwitchHandler: themeSwitchHandler,
}}

Using the Context:
Paste the code below into the index.js file.



// index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import GlobalContextProvider from "./context/globalContext";

ReactDOM.render(
  <React.StrictMode>
        {/* Wrap the App component with the GlobalContextProvider
                created in the previous code snippet */}
    <GlobalContextProvider>
      <App />
    </GlobalContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Setting up a Layout Wrapper for pages

Paste the code below in the "src/components/Layout.js" file.



// Layout.js

import React, { useContext } from "react";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import { normalize } from "styled-normalize";

import { GlobalContext } from "../context/globalContext";

// 1.
const GlobalStyle = createGlobalStyle`
  ${normalize}

  * {
    text-decoration: none;
  }

  html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
  }

  body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
    background: ${(props) => props.theme.background};
  }
`;

// 2.
const Layout = ({ children }) => {
  const darkTheme = {
    background: "#111827",
    secondaryBackground: "#374151",
    text: "#F9FAFB",
    button: "#E5E7EB",
  };

  const lightTheme = {
    background: "#F9FAFB",
    secondaryBackground: "#E5E7EB",
    text: "#111827",
    button: "#374151",
  };

    // 3.
  const currentTheme = useContext(GlobalContext);

    // 4.
  let theme;
  switch (currentTheme.theme) {
    case "dark":
      theme = darkTheme;
      break;
    case "light":
      theme = lightTheme;
      break;
    default:
      theme = lightTheme;
  }

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <main>{children}</main>
    </ThemeProvider>
  );
};

export default Layout;

Let's break it down

The GlobalStyle constant defines the base styles that are generally defined in index.css file.
The Layout component has two constants, darkTheme and lightTheme and we'll be creating a toggle button to switch between the two. Using the same strategy, you can create as many themes as you would like.
Next we are fetching the currentTheme from the globalContext.
The switch case statement populates the "theme" variable which is later passed into the ThemeProvider component provided by styled-components.

Creating the styles for the home page

I like to divide my styled-components on the basis of pages. As some of the styles are common among the pages, I also create a globalStyles.js file to define those.



// globalStyles.js

import styled, { css } from "styled-components";

export const Container = styled.div`
  margin: 0 auto;
  padding: 0 32px;
  width: auto;
  height: 100%;

  ${(props) =>
    props.fluid &&
    css`
      padding: 0;
      margin: 0;
      max-width: 100%;
    `}
`;

export const Flex = styled.div`
  display: flex;
  align-items: center;
  ${(props) =>
    props.center &&
    css`
      justify-content: center;
    `};
  ${(props) =>
    props.column &&
    css`
      flex-direction: column;
    `}
`;

Page-specific styles



// homestyles.js

import styled from "styled-components";

export const NavBar = styled.div`
  background-color: ${(props) => props.theme.secondaryBackground};
  padding: 20px 0;
`;

export const SwitchButton = styled.label`
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  span {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: ${(props) => props.theme.button};
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 34px;
  }

  span:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: ${(props) => props.theme.secondaryBackground};
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
  }

  input:checked + span {
    background-color: ${(props) => props.theme.button};
  }

  input:focus + span {
    box-shadow: 0 0 1px #2196f3;
  }

  input:checked + span:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
`;

export const Body = styled.div`
  padding: 3em 5em;
`;

export const Heading = styled.div`
  font-size: 5em;
  font-weight: 800;
  color: ${(props) => props.theme.text};
`;

export const SubPara = styled.p`
  font-size: 1.5em;
  color: ${(props) => props.theme.text};
`;

export const Para = styled.p`
  font-size: 1.2em;
  line-height: 1.5;
  color: ${(props) => props.theme.text};
  width: 80%;
`;

export const Content = styled.div`
  padding: 10em 0;
`;

Now that we are done creating our little styled-components. It is time to use them to create the final page

Home Page

Paste the code below in "src/components/Home.js" file



// Home.js

import React, { useContext, useEffect } from "react";
import { GlobalContext } from "../context/globalContext";

import Layout from "../components/Layout";
import { Container, Flex } from "../styles/globalStyles";
import {
  NavBar,
  SwitchButton,
  Body,
  Heading,
  SubPara,
  Para,
  Content,
} from "../styles/homeStyles";
const Home = () => {

    // 1.
  const { theme, themeSwitchHandler } = useContext(GlobalContext);

  useEffect(() => {
    window.localStorage.setItem("theme", theme);
  }, [theme]);

  return (
    <Layout>
      <NavBar>
        <Container fluid>
          <Flex center>
                        {/* 2. */}
            <SwtchButton>
              <input
                type='checkbox'
                onChange={() =>
                  themeSwitchHandler(theme === "dark" ? "light" : "dark")
                }
              />
              <span></span>
            </SwitchButton>
          </Flex>
        </Container>
      </NavBar>
      <Body>
        <Container>
          <Heading>Hello</Heading>
          <SubPara>
            What's up! Toggle the switch above to change the theme
          </SubPara>
          <Content>
            <Container>
              <Flex center column>
                <Heading>Article</Heading>
                <Para>
                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                  Reprehenderit quis ipsa, sunt, consectetur voluptate dolores
                  pariatur nisi distinctio iusto vero iure officia. Vero sunt,
                  ducimus sit eveniet dolor impedit itaque voluptate ipsam!
                  Omnis totam, beatae dicta fugit praesentium fugiat dolores
                  laborum, officiis, labore aperiam tempore! Debitis, provident!
                  Rem, exercitationem enim?
                </Para>
              </Flex>
            </Container>
          </Content>
        </Container>
      </Body>
    </Layout>
  );
};

export default Home;

Let's break it down:

We are fetching our context from the globalContext using the useContext() hook.
The "onChange" prop of the switch button toggles the theme between dark and light. (A better way would be to create a separate button to call for different themes as we already have a switch-case statement to select the theme in the Layout.js file.)

Finally, import this component into the App.js file



import Home from "./pages/Home";

function App() {

  return (

    <div className="App">

      <Home />

    </div>

  );

}

export default App;

Further Ideas

This method of using the ThemeProvider component to set themes is not just limited to colors, as it is clearly visible that you can define any kind of styles, store them into a constant, and then pass it on as a theme.

Be creative, think of some use cases where you can maybe pass different margins or padding or perhaps width. You could also pass different fonts, maybe create a website like https://www.happyhues.co/
This is super fun, so surely give it a try.

Thank you so much for reading.

I would love to hear your views. Be sure to comment below!

Em v/s REM

Rahul — Sun, 24 Jan 2021 15:48:46 +0000

The essential difference between em and rem is that rem is "root em".
Now that out of the way let's first see what actually em is?

EM

EM is relative to the current font size of the parent element. This basically means that if the font size of the parent element is 16px then

1em == 16px
2em == 32px
3em == 48px
4em == 64px
and so on...

This is super cool because now you can use these relative units to size up almost everything perfectly!

And as a matter of fact, this unit also works on padding, margin, border, and whatnot.
Padding, margins, borders, height, etc. directly relates to the font-size of the current element.

Look at the example below and the explanation even below.

<div class="main">
  <div class="container">
    <div class="em">
      <h1>EM</h1>
      <h3>This section explains EM</h3>
    </div>
  </div>
</div>

html {
  font-size: 16px;
}

body {
  font-size: 1em;
}

.container {
  font-size: 2em;
}

.em {
  font-size: 2em;
}

.em h1 {
  font-size: 2.5em
}

.em h3 {
  font-size: 0.5em;
}

.em>.block {
  font-size: 0.5em;
  border: 0.1em solid #000;
  padding: 1em;
}

A caveat to em is that it supports compounding, which means if you have nested divs, each setting font-size based on em unit than the nested divs will compound the size starting from the root element to itself.

Here the font size of the "h1" tag would be:

16px * 1 * 2 * 2 * 2.5 = 160px;

And the font size of the "h3" tag would be

16px * 1 * 2 * 2 * 0.5 = 32px;

And the size of "1em" in ".block" div would be

16px * 1 * 2 * 2 * 0.5 = 32px;

Hence,

padding: 1em             == padding: 32px;
border: 0.1em solid #000 == border: 3.2px solid #000

https://codepen.io/holdmypotion/pen/yLaZBbV

To fix up the compounding effect of em units(that quite frankly is a nuisance), rem was introduced(probably!)

REM

REM is relative to the font size of the root element. This solves the problem of compounding that occurs in the case of em. Whatever the font size of the parent element maybe, 1rem unit stays equal to the font size set in the HTML tag

html {
    font-size: 32px;
}
/*Now 1rem == 32px */

Look at the example below:

<div class="main">
  <div class="container">
    <div class="rem">
      <h1>REM</h1>
      <h3>This section explains REM</h3>
    </div>
  </div>
</div>

html {
  font-size: 32px;
}

body {
  font-size: 1rem;
}

.container {
  font-size: 2rem;
}

.rem {
    /* Have no effect as we are setting the font size of h1 and h3
         seperately using rem.
    */
  font-size: 2rem;
}

.rem h1 {
  font-size: 3rem
}

.rem h3 {
  font-size: 1.2rem;
}

REM doesn't support compounding, which means all elements set their sizes based on the font-size of the root element

Here the font size of the "h1" tag would be:

16px * 3 = 48px;

And the font size of the "h3" tag would be:

16px * 1.2 = 19.2px;

https://codepen.io/holdmypotion/pen/QWKBwbG

React Native: Responsive and Adaptive User Interfaces

Rahul — Mon, 11 Jan 2021 05:03:48 +0000

Adaptability is probably the most essential need of an app. I will try to layout some of the tools and tips that I use while trying to make an app responsive towards different OS, orientations, available width and height, etc.

General Tips:

Always set the min and max width, it helps to cover devices with XS or XL Screens
Use Dimension API provided by react native if you want to set the width or height based on the available pixels on the device screen. This differs from using percentage as percentage would be respective to the parent View, and this is wrt the screen itself.
Use KeyboardAvoidingView to offset the input when you open up a keyboard any platform

Dimensions API

Using as Media query

Dimensions API works can be made to work similar to media queries in CSS. Essentially you are getting the width and height of the screen and then changing the styles for different sizesAdaptability is probably the most essential need of an app. I will try to layout some of the tools and tips that I use while trying to make an app responsive towards different OS, orientations, available width and height, etc.

Dimensions object can be used any were in the JS file.

let containerStyles = styles.container;
let buttonStyles = styles.button;
let navStyles = styles.nav;

// Just like "@media screen and (max-width: 350px)"
if (Dimensions.get('window').width < 350) {
    containerStyles = styles.containerSmall;
    buttonStyles = styles.buttonSmall;
    navStyles = styles.navSmall;
}

Using directly in styling

As "Dimensions.get('window').width" gives a numerical value, we can use it to set layout styles like

imageContainer: {
    width: Dimensions.get("window").width * 0.7,
    height: Dimensions.get("window").width * 0.7,
    borderRadius: (Dimensions.get("window").width * 0.7) / 2,
    borderWidth: 3,
    borderColor: "black",
    overflow: "hidden",
    marginVertical: 30,
  },

Using for Orientation change

Dimensions are calculated when the app first renders. So if you change the orientation of the device, it won't be recalculated just by itself.

In such cases, useEffect hook provided by react, comes to the rescue.

Steps:

Inside the useEffect hook, create a function that sets the particular style using Dimensions API
Add an event listener to the Dimensions object for "change" event, and pass the earlier defined function as the second argument.

Like so

...
// Sets the width initially!
const [buttonWidth, setButtonWidth] = useState(
    Dimensions.get("window").width / 4
  );

  useEffect(() => {
        // Sets the widht again if the widht changes,
        // i.e, from potrait to landscape or vice versa
    const updateLayout = () => {
      setButtonWidth(Dimensions.get("window").width / 4);
    };
    Dimensions.addEventListener("change", updateLayout);

    return () => {
      Dimensions.removeEventListener("change", updateLayout);
    };
  }, []);

return (
    ...
    <View style={{ width: buttonWidth }}>
    <Button
      title="whatever"
    />
  </View>
...
)

...

More on: https://reactnative.dev/docs/dimensions

ScreenOrientation API

This API is provided by expo. The main aim of this API is to provide info about the screen orientation and then allow you to do something about it.

You get a bunch of methods to get and lock orientation, and add event listeners to any orientation change.
More about the methods here: https://docs.expo.io/versions/latest/sdk/screen-orientation/

OS Specific Styling

React Native provides two ways to organize your code and separate it by platform:

Using the Platform module.
Using platform specific file extension.

Platform module

It let's you check which platform (IOS, android, web, etc.) your app is running on.
It is super useful to set different styles for different types of platform. Use this option when only small parts of a component are platform-specific.

Here Platform.select() returns the most suitable value for the platform you are currently running on.
That is if you are using an IOS device, the "ios" key will take preference!!

import React from "react";
import { View, StyleSheet, Text, Platform } from "react-native";

const Header = (props) => {
  return (
    <View
      style={{
        ...styles.header,
        ...Platform.select({
          ios: styles.headerIOS,
          android: styles.headerAndroid,
        }),
      }}
    >
      <Text>{props.title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: 90,
    paddingTop: 36,
    backgroundColor: "#CCA7B1",
    alignItems: "center",
    justifyContent: "center",
  },
  headerIos: {
    backgroundColor: "white",
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  headerAndroid: {
    backgroundColor: "#CCA7B1",
  },
});

export default Header;

More on: https://reactnative.dev/docs/platform-specific-code#platform-module

Using separate files

If you have a whole bunch of platform-specific code, a neat way to carry that out would be to split the code into multiple files.

Like so

MainButton.android.js
MainButton.ios.js

You can then use the component as shown below, and react native automatically chooses the file based on the platform the app is running on.

import MainButton from "./components/MainButton"

Super cool isn't!!

More on: https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions

SafeAreaView

Not recommended but used to protect the app content from being overlapped by notches, device side-bars and things like that.