Forem: Zenveus

Web Animations

Hamza Shahab — Thu, 27 Aug 2020 08:39:26 +0000

Introduction

Animations play an important role in our day to day internet surfing. They make the online loading experience more entertaining for the users and develops interests among them.

They are a powerful tool and are quite effective in making the online websites more interactive and engaging for the visitors.

"Animation is the art of bringing life to images and graphical objects"

What is Animation?

"A method in which pictures are manipulated to appear as moving images"

In this blog, I'll be focusing purely on CSS Animations. So let's get started!

CSS Animation

Elements in web page can be shifted, rotated and transformed using CSS Animations. They can be moved across the page and interacted in all sorts of interesting ways.

In order to develop a better understanding of CSS Animations, let's understand what keyframes are :)

Keyframes

In animation, "A keyframe is a drawing that defines the starting and ending point of any smooth transition."

Let's see how we can implement a decent animation using keyframes, in an example below:

For that we'll be needing:

A static svg image

and... a bit of css xD

The svg image is divided into smaller parts and each part is grouped and given a specific id which will be later used in CSS.

Now here's how we'll modify the code to make our asset move the way we want!

We'll be creating separate keyframes for the transition and movement of different parts:

1. Barbell

The following code will aid in the vertical motion of the barbell.

@keyframes barbell {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(42%);
  }
}

This is then integrated to the corresponding part in svg by assigning the keyframe to the animation attribute in #Barbell selector.

#Barbell {
  width: 700px;
  height: auto;
  margin: 0;
  padding: 0;
  animation: barbell 1s ease-in-out 6 alternate;
  transform-origin: center;
  transform-box: fill-box;
}

2. Arms

This one's a bit tricky, so fasten your seat belts xD
To illustrate the bending motion of the arms we further subdivided it to arm & forearm pair.

Forearm

@keyframes foreArmLeft {
  from {
    transform: rotate(0deg) translateY(0%) translateX(0%) scaleY(1);
  }
  to {
    transform: rotate(8deg) translateY(35%) translateX(-63%) scaleY(0.65);
  }
}

The translate(35%) adds a bit of vertical motion to the forearm to depict the lifting of barbell while the rotate(8deg) illustrates the bending motion. This is then integrated to the forearm selector #ForeArmLeft as:

#ForeArmLeft {
  animation: foreArmLeft 1s ease-in-out 6 alternate;
  transform-origin: bottom;
  transform-box: fill-box;
}

Upper Arm

The code below aids in moving the upper arm of the brain diagonally.

@keyframes upperArmLeft{
  from {
    transform: translateY(0%) translateX(0%);
  }
  to {
    transform: translateY(270%) translateX(-60%);
  }
}

3. Face

The following 2 keyframes contribute to the transition of happy and sad moods of the brain.

@keyframes faceHappy{
  from{
    opacity: 1;
    transform: translateY(0%);
  }
  to{
    opacity: 0;
    transform: translateY(3%);
  }
}

@keyframes faceSad{
  from{
    opacity: 0;
    transform: translateY(0%);
  }
  to{
    opacity: 1;
    transform: translateY(3%);
  }
}

4. Body

The slight vertical motion of the body representing the brain's efforts to lift the barbell is created with the following piece of code:

@keyframes body {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(5%);
  }
}

Voila! Our animation is now ready... Let's have a look!

Thanks for reading!

Routing with React Router V6

Zaid Akhter — Wed, 17 Jun 2020 15:56:47 +0000

React Router has been the go to routing solution for most react applications. Is simple to use and offers tons of features. If you've used react router before you'd be pleased to know it just got better with its next major version, version 6. Now, react router version 6 is currently in alpha. But it's expected to launch a stable version soon. Also you should know this post is for people already familiar with react router.

Now lets talk about some key changes with react router version 6. First of all, it has smaller bundle sizes but still manages to pack in more functionality.

Installation

Run the following command to install with npm:

$ npm i react-router@next react-router-dom@next

or with yarn:

$ yarn add react-router@next react-router-dom@next

`<Route/>`

In previous versions, you could use the route element like:

<Route path="/" component={Home} />
<Route path="/" render={() => <Home/>} />
<Route path="/" children={<Home/>} />
<Route path="/">
  <Home/>
<Route/>

These methods don't work in version 6. In version 6, you can use the <Route/> element as:

<Route path="/" element={<Home/>} />

`<Routes/>`

The <Switch/> component has been replaced by <Routes/> in version 6. So you can do something like:

<Routes>
  <Route path="/" element={<Home/>} />
  <Route path="/user" element={<User/>} />
<Routes/>

It is important to note that all <Route/> elements must be wrapped in <Routes/> element. Also we no longer need to use the exact prop on <Route/>. Routes are matched exactly by default.

Nesting Routes

Nesting routes in older versions of react router was a bit non-intuitive. But version 6 makes it easier:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="/" element={<UsersIndex />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

The <Outlet/> component in Users component serves as a placeholder. It will render a component depending on the current location.

Object-based Routes

Version 6 allows us to define routes as JavaScript objects using the useRoutes() hook which accepts an array of route objects. A route object has the same properties as a <Route>. For example the routes above can also be defined as:

function App() {
  let element = useRoutes([
    // element. The `children` is just an array of child routes.
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

  return element;
}

It is important to note that the useRoutes() hook must be in context of <BrowserRouter/>. That is why we removed it from the App.

`useNavigate()`

React router version 6 replaces the useHistory() hook with the useNavigate() hook. Which can be used as below:

function App() {
  let navigate = useNavigate()

  return (
    <div>
      <button onClick={() => navigate("/home")}>
        Go Home
      </button>
    </div>
  );
}

You can pass a second optional parameter in navigate. It will be an object and it can contain state if you want to pass in state. You can also pass in replace:true to mimic the behavior of history.replace().

Alternatively, you can also pass in a positive or negative integer in the navigate function. This will navigate us forward or backwards in the browser history stack. For example navigate(1) will take us 1 page forward. Similarly, navigate(-2) will take us 2 pages back.

Conclusion

To wrap up react router version 6 brings cool new features. And makes it more intuitive to use. There are some more minor features which I haven't mentioned. But I have covered the main features coming in react router version 6. And that should be enough to get you started with it.

Creating a Localized Online Shop with Gatsby, Contentful & Foxy Cart

Kumail Pirzada — Wed, 20 May 2020 07:00:40 +0000

Intro

I've had the pleasure of working with Gatsby for static websites multiple times now. However, this particular project I'm working on stands out as a very interesting approach to creating a E-commerce shop for the real-world by fully utilizing the power of JAMstack.

This project consists of three components:

Gatsby for Static Site Generation
Contentful for Data storage + structure management
Foxy.io for remote Shopping Cart management

So how does it work?

1. Gatsby:

We use Gatsby for static site generation, meaning, everything is compiled and built once and served. This includes (most) HTTP requests as well. We create pages dynamically, by fetching the data from Contentful and looping over the data.

Gatsby provides us with a lot of helper 'plugins', such as Gatsby Image, which uses Sharp under-the-hood to render images. This is one of the things that makes Gatsby sites blazing fast, and provides an amazing experience for the end-user as well as the developer.

2. Contentful:

Contentful can be called the 'brain' of our application, where Gatsby was the body. Basically, we create multiple data structures for our data in Contentful, and link them together so it is a breeze to get the required data through the GraphQL API.

The data structures:

Localization:
In the app I worked on, we had three languages, English, Deutsch and French. For each item that we added to Contentful, we also added the Deutsch and French versions for it and provided a common fallback (English). This makes it easy to query for the required version of each item through the GraphQL API.

Secondly, we also have individual translated strings for most items throughout the site. This is for generalization where we don't need to create a whole new page or component, so we use a single string data structure. We fetch all these translated strings at build time and store them in our Redux store, and use a selector to get the required string according to the locale where we need.
Some other data structures specific to the locale include:

Continent
Country, linked to continent (Country code, name, currency)
Currency, linked to the country (Currency name)

Products & Categories:
We have different products with different categories. Each category represents multiple products, for example a "bag" category can represent shoulder bags, handbags, etc. Each product, i.e. shoulder bag can have multiple variants, such as black, white, with strap, without strap, and so on..
Each Contentful item is linked to ensure we have full knowledge of our tree when fetching from the GraphQL API.

Pages:
Even though our end result is a static website, we don't have "static" hardcoded pages. Each page is defined in Contentful, with multiple sections as data structures. Each section can have images, videos, headings, text, etc. depending on the structure. During build time, we loop through all contentful pages and fetch the sections for each and display them using the components we have already created in Gatsby. This means we don't need to modify code to move around sections, add new sections or pages, etc. We can simply make the required changes in Contentful and see the changes in pages when we build our application.

Apart from these, we also have multiple small data structures such as footer information, etc. that I won't go into more detail here.

2. Foxy.io:

Foxy provides a remote shopping cart which we can easily integrate into our website to implement an existing shopping cart into our application.
This means, we do not need to create our custom cart and manage items, payment processing, updating database, etc. etc.
In our example, we have created a shopping cart inside our website for 'costmetic' purposes, which we link to Foxy on checkout. All we need to do is create a form that submits the selected products with their information to our Foxy checkout page, which handles the rest.
We can customize the remote cart to our liking through it's dashboard.

Conclusion

This was a VERY high-level view of how I created an online shop with Gatsby, Contentful & Foxy.io. A more detailed blog may follow at a later date.

Thanks for reading.