Forem: Rashid Shamloo

API Data Fetching in React / Next.js

Rashid Shamloo — Wed, 03 Jan 2024 18:20:22 +0000

Remember the good old days when you could just use a UseEffect() hook, define an async function with useCallback() and call it inside useEffect(), use an AbortController() to abort the fetch when the component unmounts, use useState() to make the isLoading and isError states and manage them inside your try-catch, and call it a week?

Nowadays there are more ways to fetch your data and display it inside your component.

1. Fetching on the Client

Before the introduction of Server Components and Server Actions, all data fetching had to be done on the client. If you needed to hide sensitive information like API keys, you had to have another API between the client and the final API endpoint that fetched the data using the API key and sent it to the client.

1-1. useEffect() + useState()

This is the old way of doing it described at the start. the downside is that you have to write everything yourself (you have to add caching and re-fetching on top of everything mentioned already).

'use client';

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

interface Data {
  name: string;
}

const MyComponent = () => {
  const [data, setData] = useState<Data>();
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const getData = useCallback(
    async (signal: AbortSignal) => {
      setIsLoading(true);
      setIsError(false);
      try {
        const res = await fetch('url', { signal });
        const resJson = await res.json();
        setData(resJson);
      } catch (e) {
        setIsError(true);
        if (typeof e === "string") setError(e);
        else if (e instanceof Error) setError(e.message);
        else setError("Error");
      } finally {
        setIsLoading(false);
      }
    },
    []
  );

  useEffect(() => {
    const controller = new AbortController();
    getData(controller.signal);
    return () => controller.abort();
  }, [getData]);

  return (
    <div>{isLoading ? 'Loading...' : isError ? error : data && data.name}</div>
  );
};

export default MyComponent;

ℹ️ Notes:

Since the code placed inside the main body of a functional component is executed on every update, we need to use useEffect() to fetch the data only when the component is mounted.

Because we can only use await inside an async function, and useEffect() can't be async, we need to define a separate async function to get the data and call it inside useEffect().

We can define the async getData() function inside the useEffect() itself, but if we want to define it separately, we need to use useCallBack(). Otherwise, the function will be re-created on every component update and since it's the dependency of the useEffect() it will cause it to re-run on every update as well.

Since a component may be mounted/unmounted many times, we need to abort the previous running fetch request when the component unmounts using an AbortController and returning a function that aborts the controller from useEffect().

1-2. Data Fetching Libraries

There are libraries like SWR, RTK Query, and React Query that simplify the data fetching process on the client and take care of the state, error handling, caching, and re-fetching for you.

RTK Query example:

'use client';

import { useGetDataQuery } from "path/to/apiSlice";

const MyComponent = () => {
  const { data, isLoading, isError, error } = useGetDataQuery();

  return (
    <div>{isLoading ? 'Loading...' : isError ? error : data && data.name}</div>
  );
};

export default MyComponent;

2. Fetching on the server

Server Components and Server Actions allow data fetching and processing to be run on the server. The final result is sent to the client for display hiding all sensitive information and allowing for server caching of the data. This is the new paradigm in the React ecosystem.

2-1. Server Components

Server Components run on the server and unlike client components, can be async and directly (without the need for useEffect()) await and fetch the data and send the final result to the client. on top of the previously mentioned advantages of fetching on the server, this allows for patterns like Partial Prerendering where part of the page can be static and only the server components that need to fetch the data can be dynamically streamed.

interface Data {
  name: string;
}

const MyComponent = async () => {
  const res = await fetch("url");
  const data: Data = await res.json();

  return <div>{data.name}</div>;
};

export default MyComponent;

Since the component itself is fetching the data and takes time to render, you can use Suspense in the parent to display a loading indicator.

import { Suspense } from "react";
import MyComponent from "./MyComponent";

const ParentComponent = () => {
  return (
    <Suspense fallback={"Loading..."}>
      <MyComponent />
    </Suspense>
  );
};

export default ParentComponent;

For error handling, You can use an Error Boundary. By adding a Error.tsx
file to your app directory, Next.js automatically creates an error boundary, sets that component as the fallback, and lets you handle your errors easily.

ℹ️ Note: You can also handle the errors using a try-catch in your server component.

2-2. Server Actions

Server Actions are functions that run on the server and can be used to fetch data or perform any other task. The main benefit of Server Actions is that they can be called from client components. This gives you fine-grain control to choose which part of your code you want to run only on the server.

When running Server Actions in Server Components, you just need to add the 'use server' directive to the function declaration.

interface Data {
  name: string;
}

const getData = async () => {
  "use server";

  const res = await fetch("url");
  return await res.json();
};

const MyComponent = async () => {
  let data: Data = await getData();

  return <div>{data.name}</div>;
};

export default MyComponent;

If you want to use a Server Action in a client component, you need to move the function to a separate file, add the 'use server' directive at the top, and import and use it in your client component.

Server Action (getDataOnServer.ts):

"use server";

export const getDataOnServer = async () => {
  const res = await fetch("url");
  return await res.json();
};

Client Component:

import { getDataOnServer } from './getDataOnServer';
...
const data = await getDataOnServer();

Let's modify our previous useEffect() + useState() client component to fetch the data using a Server Action instead. We have to move the try-catch error handling to the Server Action instead since the error will be thrown on the server, not on the client.

Server Action (getDataOnServer.ts):

"use server";

interface Data {
  name: string;
}

export const getDataOnServer = async () => {
  let data: Data | undefined = undefined;
  let isError = false;
  let error = "";

  try {
    const res = await fetch("url");
    data = await res.json();
  } catch (e) {
    isError = true;
    if (typeof e === "string") error = e;
    else if (e instanceof Error) error = e.message;
    else error = "Error";
  }

  return { data, isError, error };
};

Client Component:

"use client";

import { getDataOnServer } from "./getDataOnServer";
import { useCallback, useEffect, useState } from "react";

interface Data {
  name: string;
}

const ClientMyComponent = () => {
  const [data, setData] = useState<Data>();
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  const getData = useCallback(async () => {
    setIsLoading(true);
    const { data, isError, error } = await getDataOnServer();
    setIsLoading(false);
    if (!isError) setData(data);
    else {
      setIsError(isError);
      setError(error);
    }
  }, []);

  useEffect(() => {
    getData();
  }, [getData]);

  return (
    <div>{isLoading ? "Loading..." : isError ? error : data && data.name}</div>
  );
};

export default ClientMyComponent;

⚠️ Warning:

We can't pass objects like an AbortSignal to a Server Action so we can't abort the fetch request on component unmount.

Server Actions are usually used for data mutation, for fetching and displaying the data, Server Components are a better option.

ℹ️ Note: You can also use the Error Boundary (Error.tsx) approach for handling errors.

- Validation

In all the examples above we're blindly setting our data to the result of res.json() which is of type any. This is not a good practice especially if you're fetching data from a third-party API.

Before using the result of our fetch request, we need to verify that it is in the format we expect. To do that we can use a validation library like Zod.

We first make the schema for the data:

import { z } from "zod";

const dataSchema = z.object({ name: z.string() });

Then we can use the parse() or safeParse() methods to validate our data:

...
const resJson = await res.json();

// will throw an error if parse() fails
const data = dataSchema.parse(resJson)

// will not throw an error
const parseResult = dataSchema.safeParse(resJson)
if (parseResult.success)
  data = parseResult.data;
else
  // handle error

ℹ️ Note: Parsing the API response with Zod also throws away any extra JSON data that is not in your schema and only returns the needed data.

- API Routes

While you can use Next.js API Routes to fetch data on the server, it's not a separate way of doing it. they're just an API endpoint. you still have to make a fetch request and get the result from your API Route inside your component.

Because RSC (React Server Components) and Server Actions are a new addition, there are some compatibility issues with some packages and libraries but they are getting updated and new workarounds are being implemented as we move forward.

React Native setup with Expo Router, NativeWind, and TypeScript

Rashid Shamloo — Fri, 20 Oct 2023 03:18:45 +0000

React Native
Expo
Running your application on your phone
Routing in Expo
NativeWind
Path Alias (@)
Environment Variables
Icons

- React Native

React Native lets you develop native mobile applications using React. You will have to use different elements like View, Text, and TouchOpacity instead of div, p, and button but the underlying logic is the same and you can apply what you already know about React like different hooks (useState(), useEffect(), etc.) or different libraries like Redux Toolkit.

In this article, I will explain the steps you need to take to have a working setup so you can start developing using React Native.

- Expo

Expo to React Native is what Next.js is to React. it's a framework that provides all the necessary utilities you need for making a modern React Native application like Development Server, Routing, etc.

Expo also offers a file-based routing very similar to the one offered by Next.js.

To install Expo with file-based routing and TypeScript support, use the following command:

npx create-expo-app --template

when prompted to choose a template, select the Navigation (TypeScript) template.

- Running your application on your phone

To run the dev server you can use the following command:

npm run start

You will be presented with a QR code and addresses you can enter manually to connect to the dev server.

Next, Install the Expo app on your phone, open it, and scan the QR code to connect to the dev server, and interact with your application.

On Windows, you need to open the 8081 port in your firewall. (allow it in the Inbound Rules if you're using the default Windows firewall)

You can also use the Android Emulator in Android Studio to test your application.

- Routing in Expo

Similar to the file-based routing in Next.js (app directory), You can make new directories in the app directory to present new routes or use dynamic routes like [id] as well.

An example setup:

/app
  /books
    /index.tsx
  /book
    /[id].tsx
  /_layout.tsx
  /index.tsx

You can use the useRouter() hook to access the router and push a new path to it to navigate to another page.

import { Text, TouchableOpacity } from 'react-native';
import { useRouter } from 'expo-router';

const MyComponent = () => {
  const router = useRouter();
  return (
    <TouchableOpacity onPress={() => router.push('/books')}>
      <Text>Show all books</Text>
    </TouchableOpacity>
  );
};

export default MyComponent;

- NativeWind

You've most likely worked with or at least heard about Tailwind CSS. It allows you to use pre-defined class names to add CSS rules to your elements instead of writing new classes yourself or using the style property.

NativeWind lets you use Tailwind CSS classes in React Native and can simplify and speed up the styling process. Especially if you've worked with Tailwind CSS before.

In order to add NativeWind to your project, follow these steps:

1. Install NativeWind using the following commands:

npm i nativewind
npm i -D tailwindcss

2. Edit the `tailwind.config.js` file and add the directories containing your `tsx` files to the `content` array:

content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],

3. Edit the `babel.config.js` file and add `'nativewind/babel'` to the `plugins` array:

plugins: [
  ...,
  'nativewind/babel',
],

Note: If you've not installed Expo using the mentioned template and are getting the No overload matches this call. error when adding the className property to your elements, Add a .d.ts file like app.d.ts to the root of your project and add the following line to it:
/// <reference types="nativewind/types" />
You can also use this line instead:
/// <reference types="expo-router/types" />

- Path Alias (@)

When importing components from within nested components, instead of using ../../../components/Component, it's better to use a path alias that points to the root of your project like @, and shorten your import paths using it like @/components/Component.

Next.js already has this setup out of the box but for Expo, you need to add it manually.

First, open your tsconfig.json file and add the following line to it:

"compilerOptions": { "paths": { "@/*": ["./*"] } },

Next, open the app.json file and enable the experimental tsconfigPaths feature:

{
  "expo": {
    "experiments": { "tsconfigPaths": true }
  }
}

Now you can use the @ path alias to shorten your paths.

- Environment Variables

When storing sensitive information like API keys, you need to store them in a .env file so you can use it in production but don't push it to GitHub and leak your API key. It also allows you to manage the information easier.

In Expo like Next.js, you can achieve this using a .env.local file:

EXPO_PUBLIC_API_KEY=0123456789

You can then access the variable in your app using:

process.env.EXPO_PUBLIC_API_KEY

Environment variables are stored as plain text and can still be accessed by end users. if you want to hide something from end users, you would need to use an Orchestration Layer (an API or serverless function acting as a middle-man between your application and the final API) but it's out of the scope of this article.

If you're using an older version of Expo that does not support environment variables by default, you can use the react-native-dotenv package.

- Icons

To add icons to your React Native application, you can use the @expo/vector-icons package (installed by default). it comes with many different icons and should cover all your needs. to see a list of available icons and how to add them to your project, check this website: icons.expo.fyi

🎉 You should now have a working setup and can start developing your first application!

Media Queries and Responsive Design

Rashid Shamloo — Thu, 14 Sep 2023 13:39:46 +0000

Table of Contents

1. Introduction
2. CSS
- Using min-width and max-width
- Using the new range syntax
3. Styled-Components
4. Tailwind CSS
5. Material UI
6. JavaScript
7. React
- window.matchMedia()
- Custom Hooks
8. An example
9. Tips and Tricks
- Responsive font size
- Dealing with the impossible
10. Conclusion

1. Introduction

With an ever-growing number of users using mobile devices to browse the internet, responsive design is a necessity.

However, The layout for a large horizontal screen (desktop) can be quite different from the layout for a small vertical screen (mobile). We may need to change the flow of elements, resize or hide some elements, and maybe even change the number and position of elements displayed.

We can achieve all that with Media Queries. Media Queries allow us to apply different CSS rules for different screen sizes (and other device characteristics like the pointer type or orientation).

There are different ways of using Media Queries based on the CSS framework you're using. You can also use them in JavaScript or React to apply different logic for different screen sizes.

2. CSS

- Using min-width and max-width

By putting your CSS rules inside a @media block, they will only apply when the specified condition (Media Query) is met:

@media screen and (min-width: 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *greater* than or equal to 768px
   */
}

@media screen and (max-width: 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *less* than or equal to 768px
   */
}

You can also use both min-width and max-width to target the screen sizes that fall in that range:

@media screen and (min-width: 480px) and (max-width: 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *greater* than or equal to 480px and
   * is *less* than or equal to 768px
   */
}

- Using the new range syntax

There is a newer range syntax you can use to more easily write your media queries:

@media screen and (width >= 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *greater* than or equal to 768px
   */
}

@media screen and (width <= 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *less* than or equal to 768px
   */
}

@media screen and (480px <= width <= 768px) {
  /* 
   * these rules will only apply when the screen width
   * is *greater* than or equal to 480px and
   * is *less* than or equal to 768px
   */
}

3. Styled-Components

You can use Media Queries in Styled-Components similar to how you would use them in CSS, other than the fact that you can define custom screen sizes in your theme and access them inside your Media Queries:

const theme = {
  screen: {
    sm: '600px',
  },
}

const MyComponent = styled.div`
  @media screen and (min-width: ${({ theme }) => theme.screen.sm}) {
    ...
  }
`;

4. Tailwind CSS

Tailwind CSS has multiple pre-defined screen sizes (breakpoints) that are compiled to the relevant Media Query (e.g. md will compile to @media (min-width: 768px) { ... }). You can use these breakpoints to easily apply different styles for different screen sizes:

<div class="text-white md:text-black">
<!--
  The text color will be white for screen widths
  less than 768px and will be black for screen widths
  greater than or equal to 768px
-->
</div>

You can customize the pre-defined screen sizes or add new ones by modifying the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      screens: {
        'md': '800px',
        // 'md' will now be @media (min-width: 800px) { ... }
        'customName': '850px'
        // you can now use the new 'customName' breakpoint
      },
    },
  },
}

And if you want to use max-width instead of min-width or target a range, you can use the max and min properties:

module.exports = {
  theme: {
      screens: {
        'md': {'max': '800px'},
        // 'md' will now be @media (max-width: 800px) { ... }
        'customName': {'min': '850px', 'max': '900px'},
        // the new 'customName' breakpoint will be
        // @media (min-width: 850px) and (max-width: 900px) { ... },
  },
}

You can also use the raw property to pass in a custom Media Query:

'md': { 'raw': '(min-width: 800px)' },

Note: When you add the screens directly to the theme object, it replaces the default screens:

module.exports = {
  theme: {
    screens: {
    // default screens will be replaced by this
    }
  }
}

If you want to add or modify a breakpoint while preserving the default screens, you should add your screens to the theme.extend object:

module.exports = {
  theme: {
    extend: {
      screens: {
      // These will be applied in addition to the default screens
      }
    }
  }
}

5. Material UI

Material UI has its own set of breakpoints that can be customized in your theme. You can use them inside the sx prop to customize your styles for different screen sizes:

<Box
  sx={{ 
    color: { xs: 'white', md: 'black' },
  }}
/>

By default, these will compile to min-width but Material UI also provides helpers you can use to target a range or use max-width instead:

<Box
  sx={(theme) => ({ 
    [theme.breakpoints.down('md')]: {
      // @media (max-width: 900px)
      color: 'white',
    },
    [theme.breakpoints.between('md','lg')]: {
      // @media (min-width: 900px) and (max-width: 1200px)
      color: 'black',
    },
  })}
/>

6. JavaScript

Sometimes you want to know the screen size in your JavaScript code and change your logic based on it. You can use the window.matchMedia() method for that.

window.matchMedia() returns an object with a matches property which is either true or false depending on whether the document matches the Media Query or not.

const isLarge =  window.matchMedia("(min-width: 1024px)");

if (isLarge.matches) {
  // do something if screen width is larger than 1024px
} else {
  // do something else if it's not
}

However, the value is only calculated when you run your code for the first time. if you want to react to screen size changes (window resize), you need to add an event listener for the change event:

const isLarge = window.matchMedia('(min-width: 1024px)');

isLarge.addEventListener('change', () => {
  console.log(isLarge.matches);
});

7. React

- window.matchMedia()

In React you can use the previously mentioned window.matchMedia() method:

import { useEffect } from 'react';

const MyComponent = () => {
  const isLarge = window.matchMedia('(min-width: 1024px)');

  useEffect(() => {
    const handleChange = () => {
      console.log(isLarge.matches);
    };
    isLarge.addEventListener('change', handleChange);
    return () => isLarge.removeEventListener('change', handleChange);
  }, []);
};

- Custom Hooks

There are NPM packages like react-responsive that provide custom hooks for easy usage of Media Queries:

import { useEffect } from 'react';
import { useMediaQuery } from 'react-responsive'

const MyComponent = () => {
  const isLarge = useMediaQuery({
    query: '(min-width: 1024px)',
  });

  useEffect(() => {
    console.log(isLarge);
  }, [isLarge]);
};

Note: react-responsive uses matchmediaquery which itself uses window.matchMedia() under the hood.

If you're using Material UI, it also provides a custom useMediaQuery() hook you can use so you don't need to install any extra packages:

import { useEffect } from 'react';
import { useMediaQuery } from '@mui/material/useMediaQuery'

const MyComponent = () => {
  const isLarge = useMediaQuery('(min-width: 1024px)');

  useEffect(() => {
    console.log(isLarge);
  }, [isLarge]);
};

8. An example

This is a small section of my portfolio that I'm working on atm, and I liked how customized/different I could make it look on various screen sizes so I decided to write this article to share my knowledge:

In this example (ignoring the navigation menu and text) for different screen sizes:

The size of the container element and images are changed
The aspect ratio of the container element is changed while the images keep their aspect ratio
The small balloon is hidden (display: hidden) on smaller screens
The background images are moved (left and top property) to make a better composition for the new aspect ratio
The bigger balloon is moved and also scaled down (scale property) on smaller screens to better fit in the frame.

9. Tips and Tricks

- Responsive font size

For adjusting the font size you don't necessarily need to use Media Queries. you can achieve a responsive font size using the clamp() function.

#selector {
  font-size: clamp(1rem, 2.5vw, 2rem); 
}

It sets the font size to the middle value (2.5vw) while limiting (clamping) it between the start (1rem) and end (2rem) values. resulting in a font size that grows with screen width (vw) but is limited to a minimum and maximum size.

- Dealing with the impossible

Sometimes the positioning or other properties of an element are so different on different screen sizes that you just can't achieve it by adjusting Flex/Grid properties or moving it around using absolute positioning.

In these situations, you can use two copies of the same element, position one perfectly for smaller screen sizes and one for the bigger ones. then hide one of them (display: hidden;) and only show the one that is suitable for the current screen size using Media Queries (breakpoints).

This is an example of this technique I used in one of my projects:

Notice how the information text/element is in a different location and also included in the tilt on bigger screen sizes but changes position and is not tilted on smaller screens. this is achieved by using two different elements and showing one and hiding the other based on the screen size.

This is a similar technique to what you would use for toggling the display of mobile menu on your website just applied to two similar elements with different positions / properties.

10. Conclusion

Responsive design and its implementation takes much more than just using Media Queries.

You can show different image sizes or even totally different images, use the max-width property in addition to width, the clamp() function, flex-wrap, and more to customize your design for various screen sizes.

It is also very easy to over-customize and use Media Queries when you don't need to, so you should always aim for the simplest solution because it'll be the most maintainable and won't break when a new device with a weird screen size enters the market.

Introducing the react-next-parallax NPM package

Rashid Shamloo — Tue, 05 Sep 2023 05:09:52 +0000

Table of Contents

1. Introduction
2. The problem solved by react-next-parallax
- 1. Scale Problem
- 2. Containing elements within a 3D frame
3. What makes us think a scene is in the 3D space
- 1. Scale
- 2. Movement during rotation
4. Attributes
- Scale
- Opacity
- Scale, Rotation, and Skew
5. Animation Modes
6. Animation Reverse
7. Multipliers
8. Animating elements that are being manipulated by the component
9. Multi-component setup
10. Improvements to react-next-tilt

1. Introduction

After spending countless hours developing this component over the past month, experimenting with different approaches, testing and making sure that the component is implemented correctly, writing the documentation, and developing multiple demos to showcase how it works, I'm excited to announce the react-next-parallax component and the corresponding NPM package.

react-next-parallax uses react-next-tilt (introductory blog article) as the foundation and adds support for having a dynamic parallax scene in a confined frame. It also supports different animations like movement, opacity, scale, rotation, and skew based on the tilt angle. It is highly customizable, offering settings for different animation modes and speeds on top of all the other customizations offered by react-next-tilt.

To learn more about the component, how to install and use it, and all the different props and settings, you can check the package readme on NPM.js:

react-next-parallax package on NPM.js

As the old saying goes: "A live demo is better than a thousand words". To see the component in action, you can check any of the following demos:

Main Demo
Attributes Demo
Control Element Demo
Storybook

In the rest of this article, I will go over the development process in more detail.

2. The problem solved by react-next-parallax

You can set up a parallax tilt effect using only react-next-tilt (as you can see on its demo page) by translating/moving the elements along the z-axis. but you will run into two main problems when setting up parallax scenes this way.

Let's say we have a scene with many layers, like this:

By translating/moving the elements along the z-axis (giving layers in the front higher translateZ() values) we can achieve a parallax effect:

but we have already run into the first problem and that is:

1. Scale Problem

When elements are translated along the z-axis and are closer to the viewer, they appear to be bigger. it may be fine in other situations, but when we have a scene like this, we don't want the scale of the elements to change because then we would have to adjust the size of each element by scaling it down to achieve the original composition.

2. Containing elements within a 3D frame

The biggest problem we run into is the fact that we can't hide the parts of the images that are outside the tilt. You may think we can use overflow: hidden but as I've mentioned in another post, using it will flatten the image and remove the parallax effect.

Technical note: You may be thinking that this is possible by putting the preserve-3d elements inside a container and applying overflow: hidden to it, but it's not:

Putting the tilt inside a parent/container with overflow: hidden:

While the parent does hide the content outside of it, and the 3D effect is preserved, the content is not confined to the tilt element but to the parent. meaning it overflows the tilt element but then is cut off by the parent's bounds which doesn't look good.

Using an intermediary element with overflow: hidden inside the tilt containing the 3D content inside

This could look like it works if you were dealing with a static scene. because the elements look like they're in 3D space and they are, just not in the 3D space we want!

When we put an overflow: hidden element inside a preserve-3d element, it breaks the 3D stack at that point. and when we have another preserve-3d element inside of it, a new 3D stack is created. so what happens is that the elements inside of it are transformed in the 3D space but then get flattened. and the flattened result is put inside the parent's 3D space. so they don't move depending on the tilt angle. (imagine rotating a TV showing a 3D scene inside a room)

So, the question is: "How can we have overflow: hidden and 3D effect at the same time?"

In order to answer this question, we first need to know what 3D is in the first place.

3. What makes us think a scene is in the 3D space

We look at our screens which are flat 2D surfaces but can tell if what we're looking at is 3D or not. there are two main factors that help us distinguish 2D from 3D:

1. Scale

Elements that are closer to us appear bigger and vice versa, elements that are further away appear smaller. but we don't need this in our scene as mentioned before so we can ignore it.

2. Movement during rotation

Elements that are closer to us move more according to the rotation angle and elements that are further away move in the opposite direction. elements in between have less movement. (If you hold a pen with the tip facing you, when you rotate it from the middle, the tip will move in the rotation direction, the middle will not move and the back will move in the opposite direction. and the more the rotation angle, the higher the movement difference will be.)

We can mimic this behavior by moving some elements in the rotation direction and some in the opposite direction. the elements in between will have less movement or no movement at all. the amount of movement will determine how close or far the elements are from us. (Note that since the container is rotated/tilted already, this is the additional movement on top of it)

I got this idea after checking Atropos and seeing that it uses translate() to achieve a similar effect.

This is the main idea and the starting point for this component.

4. Attributes

I decided to use data attributes to implement the idea similar to how Atropos does it. I also tried to keep the value format similar but I've not checked how they are implemented in Atropos, so there could be differences.

- Offset

To implement this idea I've used an offset attribute that can be assigned to each element we want to be moved according to the tilt angle:

<img data-parallax-offset="±number" />

We can then calculate the amount of movement in the X/Y axis using this simple formula:

translate = tiltAngle / tiltMaxAngle * offset
/*
 * Note:
 * tiltAngle is in the [-tiltMaxAngle - tiltMaxAngle] range.
 * translateX is calculated using rotation around the Y axis and vice versa.
 * We have to reverse/negate the angle around the X axis in the calculation.
 * We set the value as percent and because of the way translate() works, it'll be a percentage of the dimension of the element itself (width for translateX() and height for translateY())
 * This value is multiplied by the offsetMultiplier that is mentioned later.
*/

This way elements with higher offset values will move more at higher tilt angles and will appear to be in the front, and elements with a negative offset will move in the opposite direction and will appear to be in the back. giving the illusion of being in 3D space.

You can see this attribute in action in the Offset Demo

- Opacity

I noticed that Atropos also has an opacity attribute that can be used to animate the opacity of the element based on the tilt angle (start opacity at center and end opacity at max tilt angle) and I decided to implement the same functionality in my component as well.

<img data-parallax-opacity="start;end" />

For the implementation, I used the same mapping method I used in the development of react-next-tilt.

If we want to animate the opacity from one edge to the other (tiltAngle/tiltMaxAngle = [-1 - 1]) from start to end ([start - end]) we can use this mapping:

Mapping [-1 - 1] to [start - end]:
+ 1 = [0 - 2] => / 2 = [0 - 1] => * (end - start) = [0 - (end-start)] => + start = [start - end]

And since we want to animate from the center to the edge, we can use Math.abs(tiltAngle/tiltMaxAngle) = [0 - 1] instead and drop the first two steps:

Mapping [0 - 1] to [start - end]:
* (end - start) = [0 - (end-start)] => + start = [start - end]

You can see this attribute in action in the Opacity Demo

- Scale, Rotation, and Skew

I also added attributes and animations based on tilt angle for Scale, Rotation, and Skew in a similar manner.

<img data-parallax-scale="start;end" />
<img data-parallax-rotation="start;end" />
<img data-parallax-skew="start;end" />

You can see these attributes in action here:
Scale Demo - Rotation Demo - Skew Demo

While implementing these attributes, I kept performance and usability in mind. while animating these attributes makes use of transform functions, my implementation doesn't replace the whole transform property and only overwrites/replaces the required functions so you can use other transform functions at the same time as using the desired attribute. A list of what transform functions each attribute overwrites/replaces is available in the readme.

5. Animation Modes

Since I already figured out how to animate each attribute from edge to edge instead of center to edge, I decided to add this as an option/prop.

I implemented separate modes/calculations for the X and Y axes as well as an option that will animate the value using both X and Y tilt angles (from top left to bottom right).

In total there are 4 animation modes available:

'center-to-edge'
'edge-to-edge-x'
'edge-to-edge-y'
'edge-to-edge-both';

You can see them in action in the Attributes Demo

6. Animation Reverse

After implementing the different animation modes, I thought it could be useful to be able to animate each attribute in reverse.(instead of being the start value at the center and end at the max angle, being end value at the center and start at the max angle, or instead of animating from start to end when hovered from left to right, animating from start to end when hovered from right to left)

I also decided to add fine-grained control over which attribute we want to reverse (because for example after setting up the offsets, we don't want to change it and want to only change other attributes).

In total, animation reverse has 8 modes:

'all'
'all-except-offset'
'offset'
'opacity'
'scale'
'rotation'
'skew'
'none'

7. Multipliers

While making the demos and setting up the scenes I found myself changing the offset values manually a lot to get the effect and movement speed I wanted so I decided to add an offsetMultiplier that allows for easy adjustment of all offset values. I later added a multiplier for all other attributes as well.

You can see the offsetMultiplier in action in the Attributes Demo

8. Animating elements that are being manipulated by the component

In the main demo for the component, there are two balloons that I've animated using CSS keyframe animations and transform: translateX/Y() functions. However, one of them also has an offset attribute set so its transform: translateX/Y() functions are also manipulated by the component at the same time.

This caused the CSS animation to override/ignore the transform: translate() set by the component and the element didn't move according to the tilt angle.

I tried using the Web Animation API to animate the element instead of @keyframes but the result was the same. and animating using the left and top properties resulted in jittery/not smooth movement.

I then remembered about the separate translate property we can use instead of transform: translate() and after using it, both the CSS animation and the components translate() manipulation worked at the same time without interfering with each other.

Also another workaround I figured out while writing the documentation is putting the element inside a parent/container and animating it instead of the element itself while the element is being manipulated by the component.

9. Multi-component setup

Atropos has a multi-component demo on its website and after seeing it, I figured I could achieve a similar result with my component, using the controlElement prop I developed for react-next-tilt from the start that allows the component to be manipulated by other elements. That element could be another component as well which means it's a matter of putting multiple components inside another component and setting their control Element to the parent component.

After implementing it, I am really happy with the result. plus I can use all the other attributes I've added to rotate, scale, skew, etc. each of the contained components at the same time which results in really cool effects.

Here is a preview of what it looks like:

I plan to polish it more, add some presets for easy setup and use, and publish it as a separate component.

10. Improvements to react-next-tilt

In the process of developing this component, I needed some extra functionality that I first implemented in this component then ported back to react-next-tilt and added as core functionality which resulted in it gaining some new features including:

Support for setting TiltRef, FlipTiltRef, and ParallaxRef as controlElement (commit)
onReset() callback function (commit)
preserve3dEnable prop (commit)
shadowType prop (commit)
'all' position for spotGlarePosition prop (commit)
spotGlareSizePercent prop (commit)
gyro argument for the onTilt() callback function (commit)

Images used in this article and demos are by Yuliya Pauliukevich on vecteezy.com

Preventing the Layout Shift Caused by Scrollbars

Rashid Shamloo — Wed, 09 Aug 2023 21:47:46 +0000

The Problem

When content overflows the page and the scrollbar shows up, the content is pushed/shifted to the left and vice versa, when the scrollbar disappears, the content is pushed/shifted to the right:

This annoying layout shift can be prevented in multiple ways. In this article, I will go over them one by one:

1. Always showing the scrollbars

This is the easiest and ugliest solution.

body {
  overflow-y: scroll;
}

2. The `scrollbar-gutter` property

The scrollbar-gutter property has been made for this exact purpose. setting it to stable will preserve the space for the scrollbar and prevent the layout shift.

html {
  scrollbar-gutter: stable;
}

BUT... it doesn't work in Safari and the scrollbar track will always be visible on your page which is not desirable.

*. A little note about `100vw` and `100%`

Before continuing to the next points, it is necessary to understand the difference between 100vw and 100%:

100vw : Full width including the scrollbar.
100% : Full width excluding the scrollbar.

3. Shifting the content to the right

When the scrollbar is not showing, 100vw and 100% are equal, and when the scrollbar is showing, the difference between them is equal to the width of the scrollbar.

So if we shift the content to the right by the difference of 100vw and 100%, we can prevent the layout shift. To achieve it we can use padding-left on the parent/container element:

.container {
  padding-left: calc(100vw - 100%);
}

Source

4. Positioning inside a `100vw` width parent

Since scrollbars don't affect the vw unit, we can fix the problem by setting the width of the parent/container in the vw unit and centering/positioning our elements inside of it:

.container {
  width: 100vw;
  /* elements inside won't be affected by scrollbars */
  display: flex;
  align-items: center;
  justify-content: center;
}

Source

The result after applying the 4th method:

Testing the Redux Store using Cypress in Next.js (TypeScript)

Rashid Shamloo — Wed, 09 Aug 2023 02:52:18 +0000

This is a quick step-by-step guide for setting up Redux (Toolkit) testing using Cypress. I assume you already know how to install, set up, and use Redux (Toolkit) and Cypress separately.

1. Accessing the Redux Store

You can't directly import and interact with your Redux store inside your test spec file. You first need to add it to the window in your store.ts file. You can do it in two ways:

- Adding the `store` to the `window` itself

This is not recommended because it can cause conflicts.

declare global {
  interface Window {
    Cypress?: Cypress.Cypress;
    store?: typeof store;
  }
}

if (typeof window !== 'undefined' && window.Cypress) {
  window.store = store;
}

- Adding the `store` to `window.Cypress`

Recommended

interface CypressWithStore extends Cypress.Cypress {
  store?: typeof store;
}

declare global {
  interface Window {
    Cypress?: CypressWithStore;
  }
}

if (typeof window !== 'undefined' && window.Cypress) {
  window.Cypress.store = store;
}

2. Dispatching Actions

You can use invoke('dispatch', action) to dispatch actions to the store:

cy.window()
.its('Cypress')
.its('store')
.invoke('dispatch', SomeAction(payload));

3. Reading the State

You can use invoke('getState') to read the state:

cy.window()
.its('Cypress')
.its('store')
.invoke('getState')
.its('stateVariable')
.should(assertion);

Using Styled-Components with Next.js v13 (TypeScript)

Rashid Shamloo — Mon, 07 Aug 2023 01:57:22 +0000

Table of Contents

1. Install Next.js (with TypeScript)
2. Install the vscode-styled-components plugin
3. Install the styled-components package
4. Add SSR support
5. Add global styles
6. Add formatting to global styles
7. Add a theme
8. Add the theme type
9. Move providers into a separate file (optional)

I recently started a Next.js v13 project with styled-components and had to jump through many hoops to have a working setup. In this article, I will go over the process step by step.

1. Install Next.js (with TypeScript)

npx create-next-app@latest

2. Install the `vscode-styled-components` plugin

3. Install the `styled-components` package

npm install styled-components

4. Add SSR support

Next.js renders the components on the server and hydrates them (adds the interactive parts) on the client. when using styled-components with Next.js, styles get applied on the client meaning the first render on the server will be without any styles and there will be a visible delay before the styles are applied.

There are multiple ways to add SSR support to styled-components with Next.js:

A. Enabling `styled-components` in `next.config.mjs`

You just need to edit your next.config.mjs file and add the following to it:

const nextConfig = {
  compiler: {
    styledComponents: true,
  ...
  },
};

Source

B. Global style registry

Next.js suggests implementing a global style registry component that collects all the styles and applies them to the <head> tag.

Create the lib/registry.tsx file and add the following to it:

'use client'

import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())

  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })

  if (typeof window !== 'undefined') return <>{children}</>

  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

In your root layout.tsx file import StyledComponentsRegistry and wrap children in it:

import StyledComponentsRegistry from './lib/registry'

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          {props.children}
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

C. The `styled-components` Babel plugin

styled-components provides a Babel plugin you can use for adding SSR support. To use it:

Install it using the following command:

npm i -D babel-plugin-styled-components

Create the .babelrc file in the root of your project and add the following to it:

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

Now, Next.js will automatically use Babel instead of SWC to compile your code since a custom configuration is present.

However, there are cases where this might not work, for example next/font requires SWC and you will get this error message if you're using it alongside the custom .babelrc configuration file:

Syntax error: "next/font" requires SWC although Babel is being used
due to a custom babel config being present.

D. The `styled-components` SWC plugin

You can also use the styled-components SWC plugin:

Install it using the following command:

npm i -D @swc/plugin-styled-components

Create the .swcrc file in the root of your project and add the following to it:

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "ssr": true
          }
        ]
      ]
    }
  }
}

5. Add global styles

Global styles is the place to add your fonts, CSS reset/normalize, and any other style you want applied globally.

You can achieve this using the createGlobalStyle() function:

Create the styles/GlobalStyles.ts file and add to it:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  // your global styles
`;

export default GlobalStyles;

In your root layout.tsx file, import and add the GlobalStyles component:

import StyledComponentsRegistry from './lib/registry'
import GlobalStyles from './styles/GlobalStyles';

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          <GlobalStyles />
          {props.children}
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

6. Add formatting to global styles

While writing your global styles you may have noticed that formatting doesn't work for it even though it works for other styled components. to fix the issue you can do one of the following in your styles/GlobalStyles.ts file:

Using the css helper function:

import { createGlobalStyle, css } from 'styled-components'

const styles = css`
  // your global styles
`;

const GlobalStyles = createGlobalStyle`
  ${styles}
`;

export default GlobalStyles;

Source

Using an intermediate object:

import { createGlobalStyle } from 'styled-components'

const styled = { createGlobalStyle }

const GlobalStyles = styled.createGlobalStyle`
  // your global styles
`;

export default GlobalStyles;

Source

7. Add a theme

You may have colors, font sizes, or other global variables that you need to access in multiple components. you can use a theme to do it:

Create the styles/theme.ts file and add your colors to it:

const theme = {
  colors: {
    colorName1: '#aabbcc',
    colorName2: 'hsla(50, 60%, 70%, 0.5)',
    ...
  },
};

export default theme;

In your root layout.tsx file, import your theme as well as ThemeProvider and wrap children in it:

'use client';

import StyledComponentsRegistry from './lib/registry'
import GlobalStyles from './styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          <GlobalStyles />
          <ThemeProvider theme={theme}>
            {props.children}
          </ThemeProvider>
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

Access the theme in your components:

import { styled } from 'styled-components';

export const MyDiv = styled.div`
  background-color: ${({ theme }) => theme.colors.colorName1};
`;

8. Add the `theme` type

You may have noticed when using the theme in your components, you are not getting any IntelliSense/auto-complete with TypeScript. To fix it:

Create the types/styled.d.ts file and add the following:

import 'styled-components';
import { theme } from '../styles/theme';

type Theme = typeof theme;

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

Source

Now you have auto-complete with your theme:

9. Move providers into a separate file (optional)

If you don't like having 'use client' in your layout.tsx file, and when you have multiple providers as we do now, you can move all of your providers to a Providers.tsx file and import and use it in your layout.tsx file instead:

Create the Providers.tsx file and add the following:

'use client';

import StyledComponentsRegistry from './styles/registry';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';

const Providers = (props: React.PropsWithChildren) => {
  return (
    <StyledComponentsRegistry>
      <ThemeProvider theme={theme}>
        {props.children} 
      </ThemeProvider>
    </StyledComponentsRegistry>
  );
};

export default Providers

Edit your layout.tsx file to look like this:

import Providers from './Providers';
import GlobalStyles from './styles/GlobalStyles';

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html lang="en">
      <body>
        <Providers>
          <GlobalStyles />
          {props.children}
        </Providers>
      </body>
    </html>
  );
}

🎉 Congratulations! Now you can finally start making your styled-components with Next.js v13!

"react-next-tilt" and "react-flip-tilt" NPM Packages

Rashid Shamloo — Wed, 02 Aug 2023 07:32:22 +0000

Table of Contents

1. The Beginning
2. The Line Glare Effect
3. useImperativeHandle() and Async Animation
4. Problems with the Tilt Component
5. Reinventing a Better Wheel (Tilt Component)
6. The Spot Glare Effect
7. requestAnimationFrame() and will-change Property
8. Testing
9. Storybook
10. Flip-Back Direction
11. Control Element
12. JSDoc Descriptions
13. The Final Note

This will be a long post in which I go over why and how I made these components/packages.

tl;dr: I spent a lot of time on them and learned a lot in the process. Have fun using them :)

1. The Beginning

The past few months have been a fun ride for me for sure. After doing many coding challenges on frontendmentor.io, I started working on my portfolio website in Next.js. I began implementing the features I always wanted to work on in my portfolio, like Next.js App directory, i18n (Internationalization), react-hook-form, email.js, and many cool CSS/3D/Animation ideas I've had for a while that you'll see once it's finished.

While working on my portfolio, I came across a website (https://evolany.com/) which I found inspiring for its sleek design and interactive elements. What they use for the members section is an image that flips and turns into a tilt element on hover. I thought to myself: "That looks cool, I should be able to do that in React."

At this point, I was already using a tilt component (react-parallax-tilt) in my portfolio, and after checking this page I had the general idea of how it should be done, a container with transform-style: preserve-3d, with two children, one tilt and the other an image, both having backface-visibility: hidden and the tilt being rotated to face backward at the start. For the animation, I decided to use framer-motion because I was already familiar with it and knew it had what was needed to get the job done (and I'm glad I did because later I needed to await the animation and it was easy with framer-motion).

So I started making the component and after some trouble as usual (has anything worked well the first few times, ever?!), like motionValue having the NaN value sometimes and breaking everything when the animation type was spring and there was a set duration (which to fix, I needed to remove duration and use mass and stiffness instead to control the duration), I managed to make a working component that flipped on hover and showed the tilt component.

2. The Line Glare Effect

One of the features of the element on the mentioned site is the line glare that shows when the tilt element is at a certain angle to give the impression of light hitting it which gives it a nice 3D feel, but the tilt component I was using (and any other ones that I checked) lacked this feature. so I decided to make the effect myself and inject it into the tilt component I was using. At first, I used createPortal() to do this but later switched to the appendChild() method.

To get the movement of the line glare right, I checked to see how the original element worked. The original element is made using vanilla JavaScript and CSS. The animation is done using CSS with the JavaScript code updating the CSS variables. While the code is very clean and admirable, it wasn't of much use to me since I was doing things differently. nevertheless, I looked at how the movement was done and tried to do a similar thing in my component as well. after playing around with the numbers for a while, I could get something that almost worked but I didn't really get the math behind it. At this point, I was spending a lot of time fiddling with the numbers but not getting the exact effect, and even if I did, I couldn't improve it further by adding customizations like different directions, movement, etc. so I decided to ignore the original implementation and come up with my own idea/logic instead. After thinking about it for a while, I came up with a way to do it and now I knew exactly what I was doing, and not only did it help me solve this problem but it was crucial in making other parts and customizations of the component as well.

Here, I would like to do a small rant about the advice floating around that is: "You just need to code enough to get something working right now and not think about the future". Had I not figured out my own way of doing things and settled on something that just worked for now, I wouldn't have been able to complete the other parts of this project nor gain the knowledge I now have. I believe it's better to deeply understand the problem and the solution and learn something from it rather than just hacking it to work for now.

Anyway, back to the topic, the line glare element is twice the size of the main element and placed on top of it with only the part inside visible. It will move only left or right depending on the sum of offsetX and offsetY (offsetX/Y is a number between 0 and 1 depending on the distance of the pointer/touch from the edge of the element) but since it's a diagonal line, it gives the impression of it going from top to bottom as well.
Because the line glare element is twice the size and translate is relative to the size of the line glare element, not the main element, at first it has translateX of -100% so it is placed outside the component, and at translateX of 50% it will exit the main element from the right side:

The line glare should be visible only when the component is tilted so when the pointer is at the center (offsetX(0.5) + offsetY(0.5) = 1) it should be outside the main element. Let's say we want the line glare to be visible while the component is being tilted to the top left corner (offsetX(0) + offsetY(0)=0), then we need to map the offsetX + offsetY ([1 - 0]) to the line glare element position/translateX or [-100% - 50%]:

To map [1 - 0] to [-100 - 50], we can do:
* -1 = [-1 - 0] -> * 3/2 = [-1.5 - 0] -> + 0.5 = [-1 - 0.5] -> * 100 = [-100 - 50]
or
((offsetX + offsetY) * (-3 / 2) + 0.5) * 100

Even though it took me a day or two to come up with this method, after that, everything made sense and I also implemented customizations like reverse movement, different line angle, width, color, etc.

3. useImperativeHandle() and Async Animation

At this point, I had a working component and I really liked the flip-tilt effect, so I decided to make it into an NPM package so others can use it as well. for that, I needed to make a demo page to showcase the component and how it worked. the best way to showcase it was by having multiple components side by side, similar to how the original element was presented, but I also wanted to add customization selection elements to showcase the power of React and that while it may take longer to make the component at first, after that, you can easily integrate as many of it as you want into your application with different props/customizations.

While making the demo page and working on the component, I thought it'd be cool if I could showcase the components on the demo page by animating them in a pattern/sequence to showcase the flip animation. I tried flipping the component programmatically by changing its flipped state. and while the component did flip, changing the component's state re-rendered it, meaning the animation got interrupted (not to mention the performance impact of having to constantly re-render a lot of components while doing animations). I needed a way to run the flip animation inside of my component without re-rendering it.

After doing some research I came across the useImperativeHandle() hook. It lets you customize the ref handle of your component and expose internal properties/functions to the outside so a parent component can call a child function without having to re-render it. This was exactly what I was looking for and after learning and using it, I could achieve the animation effect I wanted without re-rendering. It also allowed me to expose more needed functions at the later stages of development.

I also exported the current flipped state of the component (isFlipped()) using the same method (I use a ref to keep track of the flipped state instead of state to minimize re-rendering, and it took a while to figure out that I needed to use a getter function to export its value).

After testing the isFlipped() state and flip() function, I came across a new problem. After running the following code:



ref.flip();
ref.flip();

I expected the component to flip and then flip back but nothing happened on the screen. this was because the functions ran instantly without waiting for the previous one to finish. to fix the problem I needed to make the animation and the flip() function asynchronous so they could be awaited. Thankfully, the only thing I needed to do to convert my flip() function to an async function was adding the await keyword to my framer-motion animate() call. after that, I could await the flip() function and the result was the expected animation:



await ref.flip();
await ref.flip();

4. Problems with the Tilt Component

While refactoring and polishing the component and playing around with it more, I noticed some problems with the tilt component I was using, including:

After the flip animation, the tilt component was always straight (not tilted) while I wanted it to be tilted at the start depending on the pointer position. to fix it, I tried:
- Calculating the rotation angle myself in my component based on pointer position and setting the transform rotation of the tilt element. which didn't work because the transform got overridden by the tilt component.
- Dispatching mouseMove events to the tilt element after running the flip animation which kind of worked and the tilt component appeared tilted after the flip animation. but I didn't like this method as it was too hacky and the multiple random events it dispatched could interfere with the final application that was going to use my component.

It's possible to set the start tilt angle using initialAngleX/Y props, but then it changes the rest/reset position as well and re-renders the component, and using the tiltAngleX/YManual props disables the tilt on hover.

Changing some of the props didn't immediately take effect and I had to set them as the component key to force an update. (example)
The tilt component I was using (and all the other ones I checked), attaches the event handlers to the element that is being tilted itself, so after tilting, the element goes out of the cursor position and resets back, and then comes under the cursor and so on. this caused jittery movement around the edges:

Again at this point, I felt like I was spending too much time trying to make something work that even if it did, I would've been limited by its features and functionality and I wouldn't have been able to fully customize it. So even though I was halfway through writing the readme for the package before publishing it, after giving it some thought, I decided to scrap it all and start over and make my own tilt component from scratch.

5. Reinventing a Better Wheel (Tilt Component)

I separated all the logic related to the tilt component into another project and started making my own tilt component. I already knew how to calculate the tilt angle from the offset from before when I was trying to set the start angle of the previous tilt component, I just needed to write all the other parts and customizations...

After coming this far, I wanted to make the best component I can with my current skills and also learn in the process so I didn't want to skimp on anything.

I finished the tilt logic, added touch and gyroscope support, scale, reverse, reset, initial angle, and many more customizations and exported the needed functions and properties using the useimperative() hook, all the while trying to minimize component re-renders by using refs, useMemo(), useCallback(), and keeping performance in mind overall.

Also from my experience with the previous tilt component in my portfolio, there was an annoyance in mobile/touch that when trying to tilt the component, the page scrolled at the same time. I addressed that and added a "disable scroll on touch" option as well.

While the time I spent before may have seemed like lost time, the knowledge I gained doing all that, helped me greatly in making the tilt component and the customizations.

6. The Spot Glare Effect

To implement the spot glare effect, I used an element twice the size of the main element with a radial gradient background which is placed so that its center is at the corner of the main element and depending on the pointer/touch position moves to the other corner giving the impression of light hitting the element at different angles:

For the movement and customizations, I used the same mapping method that I used for the line glare effect. (offsetX([0 - 1]) to translateX([0% - 50%]))

7. requestAnimationFrame() and will-change Property

Most of the other tilt components seem to be based on tilt.js. while taking a look at it, I noticed that it boasts about being "requestAnimationFrame powered". this piqued my interest and I started looking at what it is and how to implement it in my component.

requestAnimationFrame() takes a function as the argument and tells the browser to run that function before the repaint phase. this results in faster/smoother animations than animating the element using JavaScript alone, and can reach to almost the same speed as the native CSS animations.

Once I knew how it worked, I implemented it in my component by putting the parts of my code that updated the animation/transform in the requestAnimationFrame() function. at first, I tried batching all the animation updates in one call, but later decided against it as it meant if there was going to be a frame drop because the calculations couldn't be made before the next frame, the frame drop would affect all the tilt, line, and glare elements. by separating it into different calls for each element, if one of them lagged a frame, the others would still render which results in smoother animations overall. (of course, this could not work in another case in which the animations are in a sequence or depend on each other)

The will-change CSS property is another performance optimization used by other components. it lets the browser know which properties are about to be changed so it can be prepared for it which usually means not cleaning up the memory as fast as it can and and holding on to it. this can cause higher memory usage if you just randomly apply it to your elements.

The proper way to use the will-change property is to set it before starting your animation (changing the transform in this case) and remove it after you are done. The way I implemented it in my component is that when the pointer/touch enters the component, I add the property to the tilt and glare elements and when the pointer/touch leaves it, I remove it. this lets the browser know that while the pointer/touch is inside the component, it should expect changes to the transform property.

8. Testing

After more refactoring, I was writing my new readme files for the now two packages that I had made, but even though I had tested the functionality by manually changing different props and playing around with it, I've not had written any tests for the components yet. And after coming so far, I didn't want to publish an NPM package without proper tests and just say: "Trust me, it works!".

I knew Jest from before when I learned it to write the tests for my previous NPM packages. but at this point even though it was on my "to learn" list, I didn't know how to write tests for React components.

React testing Library

The most popular library for testing React components is the React Testing Library and I started learning it. because I was using Vite.js for development, I had to set up and use Vitest instead of Jest which I did without much trouble since Vitest is made on top of Jest and has a similar syntax.

After learning how to write the tests, fire events, and things like the difference between FireEvent and UserEvent and setting everything up, I started writing my first test in React Testing Library.

I spent some time before adjusting the CSS style of the component to make the internal elements respect the width/height set as props so I decided to write the first test for the width property to see if the component actually rendered at the given width when provided with a bigger-size image as child.

And you guessed it, I ran into yet another problem. the returned computed width (getBoundingClientRect().width) was an empty string. At first, I thought something was wrong with the component but after investigating further, I figured out the reason.

React testing library uses jsdom (or others like happy-dom) under the hood to emulate the browser environment and enable testing of different properties. but it doesn't render the component in an actual browser meaning the styles can't be computed and the returned computed style is just an object with the correct keys but empty strings as values.

This would've been fine if it was only limited to the width/height props but I was using computed styles (getBoundingClientRect()) inside my component to calculate the offsets and all the positions/movements which meant it broke everything.

Cypress

The solution was to use a testing method that actually rendered the component in a browser so I had access to the computed styles. two of the most used testing libraries for this purpose are Cypress and Selenium. I decided on Cypress (while reading on Reddit that they both suck and we should use playwright instead...) and started learning it.

Cypress has a jQuery-like syntax (actually incorporates jQuery itself) and uses Chai (not Jest/Vitest) for assertions. it also has its own implementation of promises that can't be used with async/await...

Another interesting thing about Cypress is that it's asynchronous, meaning when you say "expect an element to have a certain style property" it doesn't just check it there and then. it waits (by default 4 seconds) for the element to have/attain that style and if the condition passes within the timeout, the test passes. this is especially useful for testing things like fetching a resource that could take a variable amount of time to complete.

To my surprise, learning and writing the tests in Cypress went rather smoothly, probably because I was already familiar with React Testing Library and Jest/Vitest. I only touched the component testing part of Cypress though and look forward to writing integration/e2e tests using it for my future applications.

The only problem I had with Cypress was that when testing for the tilt angle after triggering the event at certain positions like "topRight", the component's tilt angle was short of what it needed to be. at first, I thought it was a problem with my rotation calculation and implemented some workarounds like rounding the numbers and it fixed the problem but left a bad taste in my mouth because I wasn't sure what the root cause of the problem was. After revisiting my calculations later on, I came to the conclusion that my math was correct and there was no reason for rounding so I undid it and investigated further. it turned out that the position Cypress triggered the event at, was off by "1px" and it was causing the problem. so I provided my own correct trigger positions instead of relying on the built-in positions and it fixed everything.

Overall, even though setting up and running the tests took some time (mainly because I was learning at the same time), it let me catch some bugs that I missed and also helped test the new features and changes later on.

9. Storybook

Storybook was another tool/library on my "to learn" list. It provides an environment where you can render your component in different states and with different props (a story) and preview, test, or play around with it. it's also good for showcasing/documenting different features of a component and the effect of changing individual props on how the component looks and behaves.

I started learning it by watching a youtube video but when it came to using it, I noticed that in the new version, the syntax was changed and most of what I learned was useless... still it was well documented and after reading the docs I got the hang of it. I enjoyed using it and it is something I plan to use in the future as well.

The only thing that took some time was figuring out how to do the customizations I wanted to make, like:

Hiding the actions I didn't want/need
Changing the input type shown for each prop
Showing only a few selected props for a selected story
Showing/Hiding a prop in the prop table
Setting the component window background to a dark color by default
Setting the whole page's background to a dark background by default
etc.

In the end, I implemented all the customizations I wanted to make.

You can check it out here: Storybook

10. Flip-Back Direction

I set up the flip animation in a way that allowed the flip direction to be changed by passing a prop (flipDirection). Depending on the prop's value I set the rest/initial rotation to either 180 or -180 degrees and rotated to 0 on hover/touch. (the reason for it being this way not the other way around is that I wanted the tilt (back) element to be at 0 rotation when being interacted with so the tilt angle and glare movements would work the proper way and not in reverse). and when the pointer/touch left the component the rotation was set back to it's initial rotation. meaning it flipped from one side and flipped back to that side as well. (the original element the idea came from works in this way as well)

This wasn't easy to notice when using a flat image and was best seen when using a 3d/parallax element. so I set up a demo page with parallax elements to showcase this feature and just when I was almost done with it, it occurred to me: "Wouldn't it be cool if I could implement a 360-degree continues rotation so if the flip animation starts from one side, it ends by going to the other side instead of back to where it started?"

The challenge I faced when implementing this feature was that for a 360 degree rotation, the element's rotation needed to start at 180° and go to 0° and then to -180°, but when it animated again, the rotation was at -180° not 180°. so when rotating to 0° again, it started animating from the wrong side.

To fix the problem I needed to negate the rotation value after the element finished animating so if it was -180°, it needed to be switched back to 180°. but changing the rotation caused the element to do a whole unwanted animation from -180° to 180°. I needed a way to just change the rotation value without actually animating the element.

After a little bit of tinkering, I could achieve this using framer-motion motionValue's jump() function. After doing the needed adjustments to the flip function to get it to work properly, I was really happy with the end result and added the flipBackDirection property to the component and set the 360° rotation as the default.

You can check it out here: Parallax Demo

11. Control Element

Another idea I came up with during later stages of development was adding the ability to attach the component's event handlers to other elements and let them control it. this allowed for some cool effects to be implemented as well as opened the door to adding the full-page listening option to the element (since the page/document is just another element that the event handlers should be attached to). It also let me learn more about the difference between Synthetic Events and Native Events and how they worked.

I implemented this feature for both the react-next-tilt and react-flip-tilt components while allowing for customizations and also accepting refs as well as elements as input. And of course, added the fullPageListening option too. Making the demo pages took a while, but I'm really happy with the end result.

You can check the control element demo here:
react-next-tilt - react-flip-tilt

12. JSDoc Descriptions

I was already familiar with JSDoc from writing prop descriptions for my previous NPM packages, but I decided to go all in and provide more/better descriptions. I added the following information for the props of both components:

Description of the prop
Note (any extra information)
Default value
Example
Link to a relevant source for more information which can be a demo page, storybook page, or a website like MDN
Parameter information for functions

This lets developers know everything there is to know about the prop from inside their IDE by just hovering over it:

13. The Final Note

Even though I spent a lot of time and ran into many problems while making these components/packages, and most likely because of that, I learned many new things and solidified my knowledge on what I already knew which were my main goals when I started this project.

If you're interested in trying these packages, you can find them here:

Tilt ("react-next-tilt")

NPM.js
Main Demo
Control Element Demo
Storybook
GitHub Repository

FlipTilt ("react-flip-tilt")

NPM.js
Main Demo
Parallax Demo
Control Element Demo
Storybook
GitHub Repository

Hopefully, you've learned something new by reading this article and knowing about the problems I've encountered. However, the best way to learn is to run into the problems yourself and solve them after putting some time and thought, only then will the knowledge stick in your mind. So I suggest pursuing the next wild idea you have and trying to implement it. even if you don't finish it or no one uses it, you will learn invaluable lessons along the way.

Next, I will focus on finishing my portfolio before I get distracted again...

P.S. I skipped over many parts in this article like designing and making the demo pages mobile friendly, making the images used in the demo pages, customizing the sliders for the tilt demo page, adding a11y to the demo pages, etc.

Making a 3D Parallax Effect with CSS

Rashid Shamloo — Thu, 27 Jul 2023 17:32:26 +0000

While it may seem complicated at first, making a 3D parallax effect with CSS is pretty easy and straightforward.

Let's say we have a div element with two nested div elements (children) and we want to apply the 3D parallax effect to them:

- HTML

<div id="container">
  <div id="child1" />
  <div id="child2" />
</div>

- CSS

#container {
  width: 150px;
  height: 150px;
  background-color: green;
  display: grid;
  place-items: center;
  animation: rotate 5s ease-in-out infinite;
}
#child1 {
  width: 70%;
  height: 70%;
  background-color: blue;
  grid-area: 1/1/1/1;
}
#child2 {
  width: 30%;
  height: 30%;
  background-color: yellow;
  grid-area: 1/1/1/1;
}

After applying a simple CSS @keyframes animation for demonstration purposes, it looks like this:

you can add the 3D parallax effect by following these steps:

1. Add `transform-style: preserve-3d` to the parent/container

For the 3D effect to work, you first need to set the transform-style: preserve-3d on the parent/container element. This will let the browser know that it should render the element and it's children in 3D space.

#container {
  ...
  transform-style: preserve-3d
}

2. Add the `perspective` property to the parent/container (optional)

The next step is adding the perspective property to the parent/container element. the value of this property determines how close/far the elements are from the user. you can set the value using 'px', 'em', 'rem', etc. units.

#container {
  ...
  perspective: 1000px;
}

3. Move/Translate the children along the `Z` axis

Even though the elements are now rendered in 3D space, all of the elements are on the same plane ( they all have translateZ of 0 which means they are stacked on top of each other). to really see the 3D effect you need to move them back and forth along the Z axis. you can do it in different ways:

- The `translate` property

translate: 0 0 100px;

- The`translateZ()` function of the `transform` property

transform: translateZ(100px);

- The `translate3d` function of the `transform` property

transform: translate3d(0, 0, 100px);

After following these steps, our CSS will look like this:

#container {
  ...
  transform-style: preserve-3d
  perspective: 1000px;
}
#child1 {
  ...
  translate: 0 0 50px;
}
#child2 {
  ...
  translateZ: 0 0 100px;
}

And this is what it looks like in action:

While the 3D parallax effect is easy to set up, there are a few caveats.

When applying some CSS properties, the browser has to flatten the layers (remove the 3D effect), which means if you use these properties, the effect will not work. these properties include:

- `overflow`

- `mix-blend-mode`

- `opacity`

- `filter`

- `clip-path`

To read more about these properties and possible workarounds, you can read this article.

Exporting Declaration Files in Vite.js

Rashid Shamloo — Wed, 26 Jul 2023 03:56:46 +0000

JavaScript is not a statically typed language. TypeScript gives you the illusion that there are types during development but once it's compiled into JavaScript, all that disappears. that's why you need libraries like Zod for runtime type checking.

When you want to share the library/package you've written in TypeScript with others, you need to generate and include a separate type declaration file (ending in .d.ts) so other developers can access your type definitions during development. (You also need to add a "types" entry in "package.json" pointing to that file)

1. Limitations of `tsconfig.json`

In the tsconfig.json file that is generated after running the tsc --init command (it comes by default in many libraries like Vite.js), there are options you can enable to generate declaration files like "declaration", "declarationDir", etc.

But you will run into limitations and problems if you just use the options available in this file, like:

- Not being able to generate declaration files for only specific files

The "include" option is for including the files in your whole project not just type declaration generation. so if you exclude other files (set it to only the files you need declarations for), those files won't be seen by typescript at all and you will get lots of errors.

- Not being able to rename/modify the generated declaration files

When your project grows, you may want to separate your type definitions into another file like types/types.ts and import it in your main file. but when building/shipping, you want all of your types to be in a index.d.ts file in the root of your dist folder. you can't achieve that with tsconfig.json

2. vite-plugin-dts to the rescue

There is a plugin called vite-plugin-dts for Vite.js which makes generating declaration files much easier.

- Installation

You can install it by running this command:



npm i vite-plugin-dts -D

Then in your vite.config.ts file add these lines:



import dts from 'vite-plugin-dts';

// add dts() to the plugins array
plugins: [react(), dts()],

- Generating declarations for specific files

By default, declaration files will be generated for all files but you can limit it to specific files by using the include option:



dts({
  include: ['path/to/file.ts'],
}),

- Renaming/Modifying the generated declaration files

You can rename the generated files to something else or even modify the content by using the beforeWriteFile option. you can pass a function that takes two arguments (filePath: string, content: string) and returns an object with the same-name properties {filepath: 'new/path/to/file.d.ts', content: 'newContent'}. if you return false the file will be skipped.



dts({
  beforeWriteFile: (filePath, content) => ({
    filePath: filePath.replace('path/to/file.d.ts', 'index.d.ts'),
    content,
  }),
}),

- Changing the output directory

you can use the outDir option to limit declaration file generation to specific directories. (you can achieve this using the options in tsconfig.json as well)



dts({
  outDir: 'dist',
}),

There are many more options available that you can check in the documentation

The build process in JavaScript/TypeScript can be confusing with all of the different tools and options available. hopefully, this article can help with making it a little easier.

Styling Input Range Sliders

Rashid Shamloo — Thu, 06 Jul 2023 02:26:09 +0000

Styling input range sliders might seem easy at first but there are a lot of caveats and it's more complicated than it seems. in this article, I will go through what is needed to have working, styled horizontal and vertical input range sliders.

1. The Shadow DOM

When you add the <input type="range" /> line to your HTML, under the hood, browsers add multiple additional DOM elements to actually render it on the page. this implementation differs for each browser and is something you need to keep in mind when styling different parts of the slider.
These DOM elements are hidden by default and are called shadow DOM elements for that reason. the first step is to actually see what the structure of these elements looks like.

2. Revealing the Shadow DOM

To see the shadow DOM elements, you need to change some settings in your browser's DevTools.

Chrome

Open the DevTools (F12)

Click the gear icon at the top right corner

In the Preferences tab, under the Elements section, enable the Show user agent shadow DOM option

Firefox

In the address bar type about:config, hit Enter, and click Accept the Risk and Continue

Search for devtools.inspector.showAllAnonymousContent and set it to true

After doing the steps above you can check your <input type="range" /> element in the DevTools and see what is actually rendered:

Chrome

Firefox

3. Pseudo-Elements

Each browser allows us to target these shadow elements using different pseudo-elements/selectors:

Chrome

Track: ::-webkit-slider-runnable-track

Thumb: ::-webkit-slider-thumb

Firefox

Track: ::-moz-range-track

Thumb: ::-moz-range-thumb

Progress: ::-moz-range-progress

4. Styling

Now that we know the structure of the shadow elements and how to target them using pseudo-elements/selectors, we can start styling them. but before doing that, we need to remove the default style (appearance) applied by the browser. we can do it using the appearance CSS property:



appearance: none;

We can also set the background to transparent to get rid of the default background color:



background-color: transparent;

Now we can apply our custom styles using the pseudo-elements/selectors.
A simple style (using flashy colors for demonstration purposes) would look like this:

As you can see both from the shadow DOM elements and the pseudo-elements/selectors, Chrome does not provide a progress element for us to style. but we can achieve a similar result by doing one of the following:

CSS

We can cast a shadow from the thumb to the start of the track and clip it to give the impression of it being the same height as the track. (example)
JavaScript

We can get the position of the thumb and set the background of the track to be a linear-gradient that's one color up to that position and another to the end. (example)

ℹ️ We can also use :hover, :active, and :disabled selectors to further customize the appearance in different states.

5. Vertical Slider

Edit: After playing around with it a bit more, I've figured out the problem. I was using rotate : -90deg; to rotate the horizontal slider and make a vertical one. using the rotate property seems to glitch the slider movement somehow. if we use transform: rotate(-90deg); instead, everything works fine and it won't get stuck. so just do that and ignore the next two sections ^^;

If we rotate our horizontal slider to make a vertical one, it will look and work fine on desktop but on mobile/touch it won't work properly and will be stuck. to address this issue, each browser provides an extra property we can use to tell it to render a vertical slider instead of a horizontal one:

Chrome



-webkit-appearance: slider-vertical;

Firefox



<input type="range" orient="vertical" />

But there's a problem. before, we set the appearance to none to get rid of the default styles but setting these properties will override our styles and revert the slider to how it looked like before.

To work around this, what I came up with is rotating our styled slider to make a vertical but non-functional slider. then we put a working vertical slider made using the properties above, on top of it, hide it, and when its value changes, we update our original slider. so what users interact with will be the default vertical slider but what they see is our styled slider. (we only need to do this for mobile/touch)

⚠️ Still on Firefox sometimes the vertical slider gets stuck on mobile/touch.

ℹ️ We also need to add writing-mode: bt-lr; for older versions of Edge.

6. orient="vertical" in React/TypeScript

After adding orient="vertical" to the input tag in React/TypeScript, we will get this error:

Property 'orient' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

According to React, the orient property does not exist on the input tag, so we have to add the property ourselves. we can use module declare to do this. we can either add the following lines to the top of the current file or place it in a index.d.ts file:



declare module 'react' {
  export interface InputHTMLAttributes<T> {
    orient?: string;
  }
}

ℹ️ You can use this method to add any custom property to any HTML tag you want.

🎉 Congratulations! Now, you have probably given up on customizing the input range slider and have decided to either use the default browser style or a component library!

Whether you're brave enough to do it or decided against it, hopefully, you've learned something from reading this article that could help you in the future. :)

P.S.

Styling for Safari, Edge, Opera, Brave, etc. would be similar to Chrome since they either use Webkit or are compatible with it.

I've ignored Internet Explorer throughout this article but it has its own set of pseudo-elements you need to style separately.

Testing device orientation (gyroscope) on localhost using Vite

Rashid Shamloo — Wed, 28 Jun 2023 14:05:54 +0000

I'm making a tilt component atm and wanted to make it respond to gyroscope (device orientation) changes. there were some caveats with testing it locally so I decided to write this post to explain it.

1. Device Orientation Event

To detect device orientation (gyroscope) changes, you need to add an event listener for the deviceorientation event. this is how it's done in React using TypeScript:



const handleDeviceOrientation = useCallback(
  (e: DeviceOrientationEvent) => {
    // do something with `e.alpha`, `e.beta`, and `e.gamma`
  },
  []
);

useEffect(() => {
  window.addEventListener(
    'deviceorientation',
    handleDeviceOrientation
  );
  return () =>
    window.removeEventListener(
      'deviceorientation',
      handleDeviceOrientation
    );
}, [handleDeviceOrientation]);

We can then get the rotation values in degrees around each axis from the event object:

e.alpha : rotation around the Z axis
e.beta : rotation around the X axis
e.gamma : rotation around the Y axis

2. Testing in Chrome

To test device orientation in Chrome, you can use the Sensors tab in Chrome Devtools. to access it:

F12 to open DevTools
Three dots->More Tools->Sensors
In the Orientation section, you can drag/rotate the 3d phone model around to change the device orientation and see the effect in your application:

3. Testing on your phone

Now you probably want to test your application on your phone to see how it actually works. First, you need to make your dev server accessible to your local network. To do that, run the dev server with the -- --host flag. (no, it's not a typo!)



npm run dev -- --host

Now your dev server is exposed to your local network and it should list the IP addresses/ports it's listening to, like:



➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.x:5173/

Make sure your phone is connected to the same network as your PC and open the listed address/port. it should connect and show your application. (I usually do this to test all my applications on my phone in addition to Chrome's responsive view mode)
Now, you will notice that the device orientation event doesn't work on your phone!

4. Vite dev server with HTTPS

Your phone doesn't give access to the device orientation (gyroscope) sensor when your app is served under the HTTP protocol. It has to be served under HTTPS for it to work!
To run your dev server in HTTPS, do these steps:

Install the @vitejs/plugin-basic-ssl package: ```

npm i @vitejs/plugin-basic-ssl

2. Edit your `vite.config.ts` file to reflect these changes:
```ts


import basicSsl from '@vitejs/plugin-basic-ssl'
plugins: [basicSsl()] // add basicSsl() to the plugins array

If you're using React, your vite.config.ts file should look something like this now:



import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), basicSsl()],
});

Now when you run the npm run dev -- --host command, your dev server will run under the HTTPS protocol and the listed addresses will begin with https://.
After going to the listed address/port on your phone, you will see this warning message: Your connection is not private (NET::ERR_CERT_AUTHORITY_INVALID)
Tap on Advanced and select the Proceed to ... (unsafe) option.

🎉 Congratulations! now you can test/debug device orientation (gyroscope) on localhost using your phone!

Forem: Rashid Shamloo

API Data Fetching in React / Next.js

1. Fetching on the Client

1-1. useEffect() + useState()

1-2. Data Fetching Libraries

2. Fetching on the server

2-1. Server Components

2-2. Server Actions

- Validation

- API Routes

React Native setup with Expo Router, NativeWind, and TypeScript

Table of Contents

- React Native

- Expo

- Running your application on your phone

- Routing in Expo

- NativeWind

1. Install NativeWind using the following commands:

2. Edit the tailwind.config.js file and add the directories containing your tsx files to the content array:

3. Edit the babel.config.js file and add 'nativewind/babel' to the plugins array:

- Path Alias (@)

- Environment Variables

- Icons

Media Queries and Responsive Design

1. Introduction

2. CSS

- Using min-width and max-width

- Using the new range syntax

3. Styled-Components

4. Tailwind CSS

5. Material UI

6. JavaScript

7. React

- window.matchMedia()

- Custom Hooks

8. An example

9. Tips and Tricks

- Responsive font size

- Dealing with the impossible

10. Conclusion

Introducing the react-next-parallax NPM package

1. Introduction

2. The problem solved by react-next-parallax

1. Scale Problem

2. Containing elements within a 3D frame

3. What makes us think a scene is in the 3D space

1. Scale

2. Movement during rotation

4. Attributes

- Offset

- Opacity

- Scale, Rotation, and Skew

5. Animation Modes

6. Animation Reverse

7. Multipliers

8. Animating elements that are being manipulated by the component

9. Multi-component setup

10. Improvements to react-next-tilt

Preventing the Layout Shift Caused by Scrollbars

The Problem

1. Always showing the scrollbars

2. The scrollbar-gutter property

*. A little note about 100vw and 100%

3. Shifting the content to the right

4. Positioning inside a 100vw width parent

Testing the Redux Store using Cypress in Next.js (TypeScript)

1. Accessing the Redux Store

- Adding the store to the window itself

- Adding the store to window.Cypress

2. Dispatching Actions

3. Reading the State

Using Styled-Components with Next.js v13 (TypeScript)

1. Install Next.js (with TypeScript)

2. Install the vscode-styled-components plugin

3. Install the styled-components package

4. Add SSR support

A. Enabling styled-components in next.config.mjs

B. Global style registry

C. The styled-components Babel plugin

D. The styled-components SWC plugin

2. Edit the `tailwind.config.js` file and add the directories containing your `tsx` files to the `content` array:

3. Edit the `babel.config.js` file and add `'nativewind/babel'` to the `plugins` array:

2. The `scrollbar-gutter` property

*. A little note about `100vw` and `100%`

4. Positioning inside a `100vw` width parent

- Adding the `store` to the `window` itself

- Adding the `store` to `window.Cypress`

2. Install the `vscode-styled-components` plugin

3. Install the `styled-components` package

A. Enabling `styled-components` in `next.config.mjs`

C. The `styled-components` Babel plugin

D. The `styled-components` SWC plugin

8. Add the `theme` type

1. Add `transform-style: preserve-3d` to the parent/container

2. Add the `perspective` property to the parent/container (optional)

3. Move/Translate the children along the `Z` axis

- The `translate` property

- The`translateZ()` function of the `transform` property

- The `translate3d` function of the `transform` property

- `overflow`

- `mix-blend-mode`

- `opacity`

- `filter`

- `clip-path`

1. Limitations of `tsconfig.json`