Smooth and cool page transitions are something we all love to see while browsing on [Dribbble](https://dribbble.com/search/page%20transitions). I have always been fascinated and asked myself how I could do it for my sites. Once I was able to do achieve it in a site built with [Next.js](https://nextjs.org/) by using a library called [next-page-transitions](https://www.npmjs.com/package/next-page-transitions). It allowed me to create the transitions I wanted with CSS. However, I hit a problem. It was very limiting and inflexible since it was made through CSS classes. I couldn't create a custom experience on every page without having a lot of classes and having to deal with re-renders. Thankfully, Framer Motion's Animate Presence API makes it possible to create sleek and custom page transitions in any React framework easily.  

## Animate Presence

In my previous [post](https://dev.to/joserfelix/getting-started-with-react-animations-308a), I introduced the `<AnimatePresence/>` component. It triggers the `exit` prop animations from all its children when they're removed from React's render tree. Basically, it detects when a component unmounts and animated this process. 

Recently, Framer Motion introduced a prop called `exitBeforeEnter`. If it is set to **true**, it will only render one component at a time. It will wait for the existing component to finish its animation before the new component is rendered.  This is perfect for handling page transitions since we can guarantee that only a component or page is rendered at a time.

## A Small Example

Let's test what we learned about `<AnimatePresence/>`. First, we'll test it without the `exitBeforeEnter` prop by doing a simple transition to see how it behaves. 

This website will be a mimic of an E-commerce. It will have two pages: Store and Contact Us. They will have a very simple layout. Like this: 

![Initial layout.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011677/page-transitions-in-react/Screenshot_2020-09-18_041434_illgyx.png)

![Page%20Transitions%20In%20React%20e82675384cc446ee818b5f99688f90dd/Screenshot_2020-09-18_041647.png](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011697/page-transitions-in-react/Screenshot_2020-09-18_041647_l4wxim.png)

Our first step is to wrap our pages inside a `<AnimatePresence/>`. Where we wrap it will depend on where our router is rendering the pages. Keep in mind that each of the children needs to have a unique `key` prop so it can track their presence in the tree. 

In Next.js we would head to the `_app.js` file, and wrap the `<Component>` with `<AnimatePresence/>`.

```jsx
// pages/_app.js

import { AnimatePresence } from "framer-motion";
import "../styles/index.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence>
      <Component key={router.route} {...pageProps} />
    </AnimatePresence>
  );
}

export default MyApp;
```

For Create React App, we would use it wherever our router is rendering the pages. 

```jsx
import React from "react";
import { Switch, Route, useLocation, useHistory } from "react-router-dom";
import { AnimatePresence } from "framer-motion";

const App = () => {
  const location = useLocation();

  return (
    <AnimatePresence>
      <Switch location={location} key={location.pathname}>
        <Route path="/contact" component={IndexPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </AnimatePresence>
  );
};
```

> 💡 Check out the website's code for each framework in this [GitHub repository](https://github.com/JoseRFelix/page-transition-tutorial).

Now that we have all our pages wrapped in an `<AnimationPresence>`, if we try to change routes, you'll notice that the current component never unmounts. 

![Component not unmounting on route change.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011747/page-transitions-in-react/ezgif.com-gif-maker_djgpn9.gif)

This happens because Framer Motion is looking for an exit animation for each page, and it is not found because we haven't defined any `motion` component yet. 

Let's add some simple fade-out animation to each page. Like this: 

```jsx
import { motion } from "framer-motion"

<motion.div exit={{ opacity: 0 }}>
	... content
</motion.div> 
```

And now the components can unmount!

![Components doing unmounting animation.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011999/page-transitions-in-react/ezgif.com-gif-maker__1_wqysn8.gif)

If you pay close attention, before our contact form disappears, the index page appears at the bottom, creating distraction and ruining the fluidity of our animation. This would be really bad if we were to have a mount animation on the Index page. 

This is where the `exitBeforeEnter` prop comes in handy. It guarantees that our component will have unmounted before allowing the new component to load in. If we add the prop In the `<AnimatePresence/>`, you will notice it is no longer a problem, and our transition is smooth and working as desired. 

```jsx
<AnimatePresence exitBeforeEnter/>
```

![Components smooth transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012054/page-transitions-in-react/ezgif.com-gif-maker__2_u4dmn6.gif)

This is all that is needed to create transitions with Framer Motion. The sky is the limit when it comes to what we can do now!

## A Beautiful Transition From Dribbble

Have you ever wanted to create amazing transitions like those seen in Dribbble? I always have. Thankfully, Framer Motion allows us to re-create these with ease. Take a look at this design by [Franchesco Zagami](https://dribbble.com/shots/9068030-Iskos-Loading-Carousel): 

![Dribbble transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012088/page-transitions-in-react/ezgif.com-gif-maker__4_irfei0.gif)

Let's try to re-create this awesome transition. 

When translating transition prototypes, it would be best to have the original file so the easings and details of the animation can be known. However, since we are taking a Dribble design, we'll re-create it by estimating its values. 

## Initial Transition

One of the elements that we first see is a black background that moves toward the end of the screen. This is really easy to re-create because of Framer's abstractions. 

First, we'll create a component that will house all our initial transition logic so it can be easier to maintain and develop.

```jsx
const InitialTransition = () => {};
```

Second, add the black square which will have the size of the screen. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",    
  },
};

const InitialTransition = () => {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <motion.div
        className="relative z-50 w-full bg-black"
        initial="initial"
        animate="animate"
	      variants={blackBox}
      />      
    </div>
  );
};
```

Instead of using `motion` props, we'll use variants since further down we'll have to handle more elements. 

> 💡 If you want to learn how to use Framer Motion variants, you can check out my [beginner's tutorial](https://jfelix.info/blog/getting-started-with-react-animations)!

So far, we will have a black square in the middle of our screen. We'll use the `bottom` and `height` property to create a downward movement. The `bottom` property will make it collapse towards the bottom. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,    
  },
};

const InitialTransition = () => {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <motion.div
        className="relative z-50 w-full bg-black"
        initial="initial"
        animate="animate"
	      variants={blackBox}
      />      
    </div>
  );
};
```

This is what we have now: 

![Black square going from top to bottom.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012148/page-transitions-in-react/4_ltuuw8.gif)

If you compare this to our reference, you'll notice the animation happens very quickly and not fluid enough. We can fix this with the `transition` property. We'll modify the `duration` to make our animation slower and `ease` to make it smoother. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,
    transition: {
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};
```

it will look much more similar:

![Smooth black box transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012253/page-transitions-in-react/7_g8tnvr.gif)

Now, we have to re-create the text. Albeit, we'll do something different. Since our text is not located in the middle of our navbar, we'll just fade it out.  

The text is a little harder than the black square because if we take a close look it has an animated layer similar to a mask. A way we could achieve this effect is through SVG elements, specifically the `<text/>` and `<pattern/>`.  It will look like this: 

```jsx
<motion.div
  className="absolute z-50 flex items-center justify-center w-full bg-black"
  initial="initial"
  animate="animate"
  variants={blackBox}
>
	<motion.svg className="absolute z-50 flex">
	  <pattern
	    id="pattern"
	    patternUnits="userSpaceOnUse"
	    width={750}
	    height={800}
	    className="text-white"
	  >
	    <rect className="w-full h-full fill-current" />
	    <motion.rect className="w-full h-full text-gray-600 fill-current" />
	  </pattern>
	  <text
	    className="text-4xl font-bold"
	    text-anchor="middle"
	    x="50%"
	    y="50%"
	    style={{ fill: "url(#pattern)" }}
	  >
	    tailstore
	  </text>
	</svg>
</motion.svg>
```

This works by setting a custom text fill with `<pattern/>`. It will have two `<rect/>`. One for the color of the text and the other for the animation which will have a `motion` element. Basically, the latter will hide and will leave a white color.   

Let's proceed to animate this. 

First, let's introduce a new `transition` property called `when`. It defines 'when' should an element carry out its animation. We want our black box to disappear when all children are done rendering hence `afterChildren`: 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,
    transition: {
      when: "afterChildren",
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};
```

Now, when our text finishes rendering, our black box will do its animation. 

Second, we'll animate the `<svg/>` . Here is its variant: 

```jsx
const textContainer = {
  initial: {
    opacity: 1,
  },
  animate: {
    opacity: 0,
    transition: {
      duration: 0.25,
      when: "afterChildren",
    },
  },
};

<motion.svg variants={textContainer} className="absolute z-50 flex"></motion.svg>
```

Finally, the `<rect/>`:

```jsx
const text = {
  initial: {
    y: 40,
  },
  animate: {
    y: 80,
    transition: {
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};

<motion.rect
  variants={text}
  className="w-full h-full text-gray-600 fill-current"
/>
```

> 💡 You may be asking yourself where do I get most of these animation values. All of them except the `ease` was fine tweaked through estimation. For easing, I used this [cheat sheet](https://easings.net/), specifically the `easeInOutExpo` values.

With all these hooked up, you should see this: 

![Text animation.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012336/page-transitions-in-react/9_ozlsio.gif)

Awesome! It's looking very close to our design. 

You may have noticed that we can still scroll even though our screen is supposed to be busy showing our transition. Luckily this is really easy to fix. We just need to apply `overflow: hidden` to our `body` when it is animating and remove it when it's done. 

Thankfully, `motion` components have event listeners for this exact situation: `onAnimationStart`, and `onAnimationComplete`. The former is triggered when the animation defined in `animate` starts and the latter when it ends.

On our `InitialTransition` add the following: 

```jsx
<motion.div
  className="absolute z-50 flex items-center justify-center w-full bg-black"
  initial="initial"
  animate="animate"
  variants={blackBox}
  onAnimationStart={() => document.body.classList.add("overflow-hidden")}
  onAnimationComplete={() =>
    document.body.classList.remove("overflow-hidden")
  }
> 
</motion.div>
```

## Animating the Content

All that is left is creating sleek animation for our content. We won't copy the same animation as the design since it wouldn't match our site very well. What we'll do is a staggering fade in down effect on the children. Let's create our variants:

```jsx
const content = {
  animate: {
    transition: { staggerChildren: 0.1, delayChildren: 2.8 },
  },
};

const title = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

const products = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

export default function IndexPage() {
  return (
    <motion.section exit={{ opacity: 0 }}>
      <InitialTransition />

      <motion.div
        initial="initial"
        animate="animate"
        variants={content}
        className="space-y-12"
      >
        <motion.h1 variants={title} className="text-6xl font-black text-center">
          Welcome to tailstore!
        </motion.h1>

        <motion.section variants={products} className="text-gray-700 body-font">
        </motion.section>
      </motion.div>
    </motion.section>
  );
}
```

You'll be familiar with most of the properties except `delayChildren`. It applies a delay to all the children of a propagated animation. In other words, it will display the children after a certain amount of time. 

Aside from this, we are just making the element fade down, add a duration of 0.7 seconds, and smooth it with an easing. Here is the result: 

![Content fading down.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012404/page-transitions-in-react/ezgif.com-gif-maker__5_khwt4b.gif)

Let's do the same for our contact page:

```jsx
const content = {
  animate: {
    transition: { staggerChildren: 0.1 },
  },
};

const title = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

const inputs = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

<motion.section
  exit={{ opacity: 0 }}
  class="text-gray-700 body-font relative"
>
  <motion.div variants={content} animate="animate" initial="initial" class="container px-5 py-24 mx-auto">
    <motion.div variants={title} class="flex flex-col text-center w-full mb-12">     
    </motion.div>
    <motion.div variants={inputs} class="lg:w-1/2 md:w-2/3 mx-auto">        
    </motion.div>
  </motion.div>
</motion.section>
```

![Transition between pages.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012450/page-transitions-in-react/12_gltydr.gif)

## UX Improvements

Transitioning between Contact and Store will take a long while since it will play the initial transition again. Doing this every time will annoy the user. 

We can fix this problem by only playing the animation if it is the first page the user loads. To achieve this, we'll listen for a route change globally, and determine if it is the first render. If it is, we'll show the initial transition; otherwise, skip it and remove the delay on the children.

In Next.js we would detect a route change through `routeChangeStart` event on `_app.js`.

> 💡 Solutions will vary between frameworks. For the sake of keeping this blog post as simple as possible, I will elaborate on Next.js implementation. However, the [repository](https://github.com/JoseRFelix/page-transition-tutorial) will have solutions in their respective framework.

On `_app.js`:

```jsx
function MyApp({ Component, pageProps, router }) {
  const [isFirstMount, setIsFirstMount] = React.useState(true);

  React.useEffect(() => {
    const handleRouteChange = () => {
      isFirstMount && setIsFirstMount(false);
    };

    router.events.on("routeChangeStart", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, []);

  return (
    <Layout>
      <AnimatePresence exitBeforeEnter>
        <Component
          isFirstMount={isFirstMount}
          key={router.route}
          {...pageProps}
        />
      </AnimatePresence>
    </Layout>
  );
}
```

We are keeping the state on the first mount which is updated only when a user does the first route change. And, we pass this variable as a prop to the currently rendered page. 

On our `index.js` :

```jsx
const content = (isFirstMount) => ({
  animate: {
    transition: { staggerChildren: 0.1, delayChildren: isFirstMount ? 2.8 : 0 },
  },
});

// ...

export default function IndexPage({ isFirstMount }) {
  return (
    <motion.section exit={{ opacity: 0 }}>
      {isFirstMount && <InitialTransition />}

      <motion.div
        initial="initial"
        animate="animate"
        variants={content(isFirstMount)}
        className="space-y-12"
      >
        <motion.h1 variants={title} className="text-6xl font-black text-center">
        </motion.h1>

        <motion.section variants={products} className="text-gray-700 body-font">        
        </motion.section>
      </motion.div>
    </motion.section>
  );
}
```

That's it! Our page has amazing transitions and the user will not feel annoyed by replaying the same animation over and over. 

## Conclusion

Sleek page transitions are very important to achieve awesome web experiences. Using CSS can be hard to maintain since one will deal with many classes and lack of independence. Thankfully, Framer Motion solves this problem with Animate Presence. Coupled with `exitBeforeEnter`, it allows developers to create amazing page transitions. It is so flexible and powerful that through few lines of code, we could mimic a complex animation found on Dribbble. 

I hope this post inspires you to create awesome page transitions so you can impress your future employer or clients. 

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Learn how to create beautiful animated page transitions with Framer Motion. 

Page Transitions In React

Interaction plays a key role in shaping the experience a user has on an application. Animations help define these interactions since the user's eyes tend to pay attention to moving objects. These catchy and moving elements tell a story that helps the application differentiate from competitors and bring a better user experience. 

Creating animations can be daunting, especially programming and handling orchestrations (how these coordinate between each other). Thankfully, amazing people have created abstractions in libraries that allow the developer to create seamless, hardware-accelerated animations efficiently.

In this post, I will give an introduction to Framer Motion and create simple animations with it. We'll be learning about motion components, orchestration, dragging, and automatic animations.

## React Animation Libraries

In React, we have two main animation libraries: [React Spring](https://www.react-spring.io/) and [Framer motion](https://www.framer.com/motion/). I like both of them, but I believe each one has a use case. 

React Spring is a spring-physics based animation library. These animations emulate real spring physics for smooth animations. It is really powerful and flexible. Almost all properties of HTML tags can be fully animated with React Spring. This is especially important for complex and SVG animations, however, Its main disadvantage is its high learning curve.    

Framer Motion is a motion library.  It is easy to learn and powerful with orchestrations. Contrary to React Spring, it has more types of animations: spring, tween, and inertia. Tween represent duration based animations like CSS, and inertia decelerates a value based on its initial velocity, usually used to implement inertial scrolling.

Framer Motion is perfect for handling animations on 99% of sites. Its main disadvantage is its lack of documentation and some properties won't work for SVG animations. 

Choosing between these libraries depends greatly on what you are building and how much you are willing to devote to learning animations. React Spring can do all that Framer Motion does with more flexibility, but it is harder to read and understand. I recommend it for custom, complex animations especially for SVG and 3D ([Three.js](https://threejs.org/)). 

For most websites, Framer Motion is better since it can handle most common cases and its learning curve is really low compared to React Spring. Also, its way of handling animations is more intuitive and declarative. This is why we'll focus on this library and learn about animations with it. The fundamentals of Framer Motion will be transferable to React Spring, however its syntax will be more abstract.   

## How It Works: Motion components

Framer motion core API is the `motion` component. There's a `motion` component for every HTML and SVG element. They work exactly the same as their HTML counterparts but have extra props that declaratively allow adding animations and gestures.

Think of `motion` component as a big JavaScript object that can be used to access all HTML elements. Here are some ways one would call a `motion` component: 

```jsx
<motion.div />
<motion.span />
<motion.h1 />
<motion.svg />
...
```

As said before, they allow for extra props. Some of the most used are: 

* `initial` defines the initial state of an element.
* `style` defines style properties just like normal React elements, but any change in the values through motion values (values that track the state and the velocity of the component) will be animated.
* `animate` defines the animation on the component mount. If its values are different from `style` or `initial`, it will automatically animate these values. To disable mount animations `initial` has to be set to `false`.
* `exit` defines the animation when the component unmounts. This works only when the component is a child of the `<AnimatePresence />` component.
* `transition` allows us to change animation properties. Here one can modify the duration, easing, type of animation (spring, tween, and inertia), duration, and many other properties.
* `variants` allows orchestrating animations between components.

Now that we know the basic props that `motion` can contain and how to declare them, we can proceed to create a simple animation. 

## Mount Animations

Let's say we want to create an element that on mount will fade in down. We would use the `initial` and `animate` prop.

Inside the `initial` property, we'll be declaring where the component should be located before it mounts. We'll be adding an `opacity: 0` and `y: -50`. This means the component initially will be hidden and will be 50 pixels up from its location. 

In the `animate` prop, we have to declare how the component should look when it is mounted or shown to the user. We want it to be visible and located on its initial position, so we'll add an `opacity: 1` and `y: 0`. 

Framer Motion will automatically detect that the `initial` prop has a different value from the `animate`, and animate any difference in properties. 

Our snippet will look like this:

```jsx
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}  
>
  Hello World!
</motion.div>
```

This will create the following animation: 

![Card fading down](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599544841/getting-started-with-react-animations/4_chpipj.gif)

Congratulations on creating your first animation with Framer Motion!

> 💡 You may have noticed that styles are missing from the snippets above. Some of the snippets will lack the styles in order to focus on Framer Motion's functionality.
>
> 📕 All animations in this post will have their own Storybook. [Here is the link](https://framer-animations.netlify.app/?path=/story/simple-fade-in-down-card--main) of the latter.

## Unmount Animations

Unmounting or exit animations are crucial when creating dynamic UIs, especially when deleting an item or handling page transitions. 

To handle exit animations in Framer Motions, the first step is to wrap the element or elements in an `<AnimatePresence/>`. This has to be done because:

* There is no lifecycle method that communicates when a component is going to be unmounted
* There is no way to defer unmounting until an animation is complete.

Animate presence handles all this automatically for us. 

Once the elements are wrapped, they must be given an `exit` prop specifying their new state. Just like `animate` detects a difference in values in `initial`, `exit` will detect the changes in `animate` and animate them accordingly.

Let's put this into practice! If we take the previous component and were to add an exit animation. We want it to exit with the same properties as it did in initial

```jsx
import { motion } from "framer-motion"

<motion.div
	exit={{ opacity: 0, y: -50 }}
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}  	
>
  Hello World!
</motion.div>
```

Now, let's add a `<AnimatePresence/>` so it can detect when our component unmounts: 

```jsx
import { motion } from "framer-motion"

<AnimatePresence>
	<motion.div
		exit={{ opacity: 0, y: -50 }}
	  initial={{ opacity: 0, y: -50 }}
	  animate={{ opacity: 1, y: 0 }}  	
	>
	  Hello World!
	</motion.div>
</AnimatePresence>
```

Let's see what happens when the component unmounts:

![Card fading up](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599544924/getting-started-with-react-animations/ezgif.com-gif-maker_y4hp1t.gif)

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/simple-fade-out-up--main)

## Orchestration

One of Framer Motion's strong suits is its ability to orchestrate different elements through variants. Variants are target objects for simple, single-component animations. These can propagate animations through the DOM, and through this allow orchestration of elements.

Variants are passed into `motion` components through the `variants` prop. They normally will look like this: 

```jsx
const variants = {
  visible: { opacity: 0, y: -50 },
  hidden: { opacity: 1, y: 0 },
}

<motion.div initial="hidden" animate="visible" variants={variants} />
```

These will create the same animation as we did above. You may notice we passed to `initial` and `animate` a string. This is strictly used for variants. It tells what keys Framer Motion should look for inside the variants object. For the `initial`, it will look for 'hidden' and for `animate` 'visible'.

The benefit of using this syntax is that when the motion component has children, **changes in the variant will flow down through the component hierarchy**. It will continue to flow down until a child component has its own `animate` property.

Let's put this into practice! This time we will create a staggering list. Like this: 

![Card entering one after another.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545055/getting-started-with-react-animations/ezgif.com-gif-maker_1_t2fae2.gif)

In the image, each item has an increasing delay between each other's entrance. The first one will enter in 0 seconds, the second in 0.1 seconds, the third in 0.2, and it will keep increasing by 0.1.

To achieve this through variants, first, let's create a variants object where we'll store all possible states and transition options:

```jsx
const variants = {
  container: {  
  },
  card: { 
  }
};
```

`variants.container` and `variants.card` represent each `motion` component we'll have. 

Let's create the animations for the cards. We see that the cards go from left to right while fading in. This means we have to update its `x` position and `opacity`.

As aforementioned, variants can have different keys for their animation states, however, we will leave it as `initial` and `animate` to indicate before mount and after mount, respectively. 

On `initial`, our component will be 50 pixels to the left and its opacity will be 0. 

On `animate`, our component will be 0 pixels to the left and its opacity will be 1. 

Like this:

```jsx
const variants = {
  container: {
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};
```

Next, we have to add the stagger effect to each of these cards. To achieve this we have to add the `container.transition` property which allows us to update the behavior of our animation. Inside the property, we'll add a `staggerChildren` property that defines an incremental delay between the animation of the children. 

```jsx
const variants = {
  container: {
		animate: {
      transition: {
        staggerChildren: 0.1
      }
    }
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};
```

Now, if we hook this variant to the `motion` components:

```jsx
import { motion } from "framer-motion";

const variants = {
  container: {
    animate: {
      transition: {
        staggerChildren: 0.1
      }
    }
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};

const StaggeredList = () => {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      variants={variants.container}     
    >
      {new Array(5).fill("").map(() => {
        return <Card />;
      })}
    </motion.div>
  );
};

const Card = () => (
  <motion.div
    variants={variants.card}   
  >
    Hello World!
  </motion.div>
);
```

With this, our animation is complete and sleek staggered list ready!

![Card entering one after another.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545055/getting-started-with-react-animations/ezgif.com-gif-maker_1_t2fae2.gif)

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/orchestration-staggered-list--main)

## Dragging

Dragging is a feature that can be daunting to implement in an app. Thankfully, Framer Motion makes it a lot easier to implement its logic because of its declarative nature. In this post, I will give a simple, general introduction to it. However, in a future tutorial, I may explain with more details about how to create something more complex like a slide to delete.

Making an element draggable is extremely simple: add a `drag` prop to a `motion` component. Take for example the following:

```jsx
import { motion } from "framer-motion";

<motion.div drag>
  Hello World!
</motion.div>
```

Adding the `drag` prop will make it draggable in the x-axis and y-axis. It should be noted that you can restrict the movement to a single axis by providing the desired axis to `drag`.

There is a problem with just setting the `drag` property. It is not bound to any area or container so it can move outside the screen like this: 

![Card being dragged outside screen](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545000/getting-started-with-react-animations/7_vpjsem.gif)

To set constraints we give the `dragContraints` an object with our desired constraints for every direction: `top`, `left`, `right`,  and `bottom`. Take for example: 

```jsx
import { motion } from "framer-motion";

<motion.div
  drag
  dragConstraints={{
    top: -50,
    left: -50,
    right: 50,
    bottom: 50
  }}
>
  Hello World!
</motion.div>
```

These constraints allow the element to move 50 pixels maximum in any direction. If we try to drag it, for example, 51 pixels to the top, it will be stopped and bounced. Like this: 

![Card being dragged and colliding with constraints](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545092/getting-started-with-react-animations/ezgif.com-gif-maker_2_rurkh5.gif)

It is as there is an invisible wall with the form of a square that won't allow the component to move further.

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/drag-block--main)

## Layout Property

The `layout` prop is a powerful feature in Framer Motion. It allows for components to animate automatically between layouts. It will detect changes to the style of an element and animate it. This has a myriad of use cases: reordering of lists, creating switches, and many more. 

Let's use this immediately! We'll build a switch. First, let's create our initial markup

```jsx
import { motion } from "framer-motion";

const Switch = () => {
  return (
    <div
      className={`flex w-24 p-1 bg-gray-400 bg-opacity-50 rounded-full cursor-pointer`}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        className="w-6 h-6 p-6 bg-white rounded-full shadow-md"
        layout       
      ></motion.div>
    </div>
  );
};
```

Now, let's add our logic:

```jsx
import { motion } from "framer-motion";

const Switch = () => {
	const [isOn, setIsOn] = React.useState(false);

  const toggleSwitch = () => setIsOn(!isOn);

  return (
    <div onClick={toggleSwitch}>
			{/* Switch knob */}
      <motion.div       
        layout       
      ></motion.div>
    </div>
  );
};
```

You may have noticed that only our knob has the `layout` prop. This prop is required on only the elements that we wish to be animated. 

We want the knob to move from one side to the other. We could achieve this by changing the container flex justification. When the switch is on then the layout will have `justify-content: flex-end`. Framer Motion will notice the knob's change of position and will animate its position accordingly.

Let's add this to our code: 

```jsx
import { motion } from "framer-motion";

const Switch = () => {
  const [isOn, setIsOn] = React.useState(false);

  const toggleSwitch = () => setIsOn(!isOn);

 return (
    <div
      style={{
	     background: isOn ? "#48bb78" : "rgba(203, 213, 224, 0.5)",
        justifyContent: isOn && "flex-end",
        width: "6rem",
        padding: "0.25rem",
        display: "flex",
        borderRadius: 9999,
        cursor: "pointer",   
      }}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        style={{
          width: "3rem",
          height: "3rem",
          background: "white",
          borderRadius: "100%",
          boxShadow:
            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
        }}
        layout       
      ></motion.div>
    </div>
  );
};
```

I added some other styles so it can resemble the look of a switch. Anyway, here is the result: 

![Switch being toggled](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545162/getting-started-with-react-animations/11_eug7jn.gif)

Great! It is amazing how Framer Motion can do this automatically without having to deal with extra controls. Anyhow, it looks a little bland compared to what we are used to seeing on apps like Settings. We can fix this pretty quickly by adding a `transition` prop. 

```jsx
import { motion } from "framer-motion";

const Switch = () => {
 const [isOn, setIsOn] = React.useState(false);

 const toggleSwitch = () => setIsOn(!isOn);

 return (
    <div
      style={{
	     background: isOn ? "#48bb78" : "rgba(203, 213, 224, 0.5)",
        justifyContent: isOn && "flex-end",
        width: "6rem",
        padding: "0.25rem",
        display: "flex",
        borderRadius: 9999,
        cursor: "pointer",   
      }}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        style={{
          width: "3rem",
          height: "3rem",
          background: "white",
          borderRadius: "100%",
          boxShadow:
            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
        }}
        layout    
				transition={{
          type: "spring",
          stiffness: 500,
          damping: 30,
        }}   
      ></motion.div>
    </div>
  );
};
```

We define a spring-type animation because we want a bouncy feel. 

The `stiffness` defines how sudden the movement of the knob will look. 

And, `damping` defines the strength of the opposing force similar to friction. This means how fast it will stop moving. 

These together create the following effect: 

![Switch being toggled with spring effect.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545143/getting-started-with-react-animations/10_fus9tx.gif)

Now our switch looks more alive! 

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/layout-switch--main)

## Conclusion

Creating animations can be daunting, especially when many libraries have complex jargon. Thankfully, Framer Motion allows developers to create seamless animations with its declarative an intuitive API. 

This post was meant as an introduction to the fundamentals of Framer Motion. In future posts, I will create complex animations like swipe to expand and delete, drawers, shared layout, and many more. Please let me know in the comments if you have any suggestions as to what you want to see animated!

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎


Learn the basics of animation in React using Framer Motion. We'll focus on learning about motion components, mount and unmount animations, orchestration, dragging, and automatic animations.

Getting Started with React Animations

Learn how to create a custom newsletter sign up form in React with JSONP and serverless functions.

Kick-Start Your Newsletter: Mailchimp Custom Form with React

Have you ever needed to use text inside a card that has generated colors? Give the user the capacity to choose their own color for a component that contains text like a navbar? These are situations where texts need to adapt to the current background color. Making each color match the text would be tedious and unscalable. By using the luminance and contrast ratio, we can determine if the text should be dark or bright while guaranteeing an accessible contrast.

## Contrast Ratio

The goal of text with a background is that it can be easily read by the users, including those with moderately low vision. To understand when a text is legible or not, first, we have to understand what contrast ratio is. Contrast ratio is a property that is defined by the luminance (amount of light) of the brightest color (white) to that of the darkest color (black) that a system is capable of producing. According to the W3C, the formula is `(L1 + 0.05) / (L2 + 0.05)`, where

- L1 is the relative luminance of the lighter of the colors, and
- L2 is the relative luminance of the darker of the colors.

The luminance scale can go from 0.0-1.0. Black being 0.0 and white 1.0. You may notice that if we calculate the ratio with the extremes of the scale's interval  `(1.0 + 0.05) / (0.0 + 0.05)` we would get 21, and if both are 0.0 then we get 1. This means that the ratios will range from 1 to 21. These are commonly written as 1:1 to 21:1.

The recommended contrast ratio between a text and a background should be at least **4.5:1**. 

## Determining Text Color Dynamically

Now that we know what contrast ratio we should aspire to. It is time to find a formula so that we can determine which color to use. 

According to Mark Ransom, to determine if we need a darker or brighter color, we just need to compare the contrast of background color with white and black. If the contrast for black is higher then we use black, otherwise, we use white. We can represent this in Javascript the following way:

```jsx
if ((L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05)){
	use #000000
} else {
  use #ffffff
}
```

If we simplify it: 

```jsx
if (L > Math.sqrt(1.05 * 0.05) - 0.05){
	use #000000
} else {
  use #ffffff
}
```

Now, All that is left is calculating the luminance!

## Calculating the Luminance

Getting the luminance is pretty straightforward if you have an RGB color. According to the W3C, the formula for luminance is `L = 0.2126 * R + 0.7152 * G + 0.0722 * B` where R, G and B are defined as: 

- if RsRGB <= 0.03928
         then **R** = RsRGB/12.92 
         else **R** = ((RsRGB+0.055)/1.055) ^ 2.4

- if GsRGB <= 0.03928
         then **G** = GsRGB/12.92 
         else **G** = ((GsRGB+0.055)/1.055) ^ 2.4

- if BsRGB <= 0.03928
         then **B** = BsRGB/12.92 
         else **B** = ((BsRGB+0.055)/1.055) ^ 2.4

In Javascript this would translate to: 

```jsx
/*
	If color has the following format: 
	const rgbColor = {
		r: 100,
		g: 100, 
		b: 100
	}
*/

// Extracted from Polished
// Code is licensed with an MIT license
function getLuminance(rgbColor){
 const [r, g, b] = Object.keys(rgbColor).map(key => {
    // Our color numbers represent a 8bit channel. 
		// The formula requires a sRGB channel which is defined by 
		// ColorChannelIn8bit / 255
    const channel = rgbColor[key] / 255
    return channel <= 0.03928
      ? channel / 12.92
      : ((channel + 0.055) / 1.055) ** 2.4
  })
  return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3))
} 
```

Frequently, we don't have our colors in RGB, but in hex or color name. That is why I recommend checking out [polished](https://github.com/styled-components/polished) library which exposes a `getLuminance` function that returns the luminance given a hex or color name.

## Bringing It All Together

Now that we know how to determine the color's value using its luminance and comparing contrast ratios, we are ready to apply it to an app. For the sake of this post, I will display how to do this with do a quick possible scenario. We have a card in which the user can change the background color with a color picker. Our job is to select a text color that is accessible and visible to all our users. 

Here is a sandbox with the finished product. Feel free to tinker with it!

<iframe
     src="https://codesandbox.io/embed/dynamic-text-change-with-color-x903b?fontsize=14&hidenavigation=1&theme=dark&view=preview"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="dynamic-text-change-with-color"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

## Conclusion

Adjusting the text color to match a background is very common when developing dynamic UIs. A contrast ratio of 4.5:1 is essential to guarantee an accessible contrast between a text and a background. By comparing the contrast ratios of both white and black using the background color's luminance, it is possible to efficiently determine the text color used with a background.  

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

## References

- [https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color](https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color)
- [https://www.w3.org/TR/WCAG20/](https://www.w3.org/TR/WCAG20/)

Learn about contrast ratio, luminance, and how to use these to make a text color match any background in an accessible way.

Make a Text Match Any Background Color

*Don't want to code along? See this button as a package on [Github](https://github.com/JoseRFelix/react-toggle-dark-mode).*

Creating amazing user experiences for users on a website is the main objective of a web developer. Sometimes we see amazing animations that bring the website to life. In this instance, I want to focus on dark and light mode toggle, specifically sun and moon transition. Here are some examples of what we will be inspired by: 

![Sun and moon animated icon transition](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676531/using-react-spring-to-animate-svg-icons-dark-mode-toggle/Kapture_2020-07-13_at_0.56.08_xojkv6.gif)

![Sun and moon animated icon transition](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676545/using-react-spring-to-animate-svg-icons-dark-mode-toggle/1e794db73ae566f21e814a20a535dde5_chj6s3.gif)

We will be building this with SVGs and [React Spring](https://www.react-spring.io/). In short, what makes this method possible is the use of an [SVG mask](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask). It allows us to do hide two icons in one, and change their properties with animation using React Springs. This will guarantee a fluid spring-physics transition and be able to use Javascript to display whichever icon we need.  

> I assume you have created a React project. If not, please do so with something like [Create React App](https://create-react-app.dev/docs/getting-started/).

## Getting the Icons

We'll use the following sun and moon icons from [Feather Icons](https://feathericons.com/): 

![Sun and moon icons from Feather Icons](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676664/using-react-spring-to-animate-svg-icons-dark-mode-toggle/Group_1_wclf4z.svg)

> These icons are licensed under the open-source [MIT License](https://opensource.org/licenses/MIT).

Here are the SVG codes for only the sun since we will be creating the moon icon through a mask!

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <circle cx="12" cy="12" r="5" />
  <line x1="12" y1="1" x2="12" y2="3" />
  <line x1="12" y1="21" x2="12" y2="23" />
  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
  <line x1="1" y1="12" x2="3" y2="12" />
  <line x1="21" y1="12" x2="23" y2="12" />
  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
```

## Meshing Both Icons Into One

In order to create the moon, we have to understand what is an SVG mask. It is an element that defines an alpha mask for compositing the current object into the background. In other words, SVG masks allow us to define areas in the background that are transparent or not using SVG elements. In CSS we determine the opacity of the mask (how much of the element is shown) by using colors. The closer the color is to black the less opacity it will have and the closer to white the more opacity.

We will be using a circle shape inside the mask to hide a portion of the sun's circle so it will create the curve of the moon.  

Something like this: 

![Circle masked with another circle to create moon icon.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676699/using-react-spring-to-animate-svg-icons-dark-mode-toggle/Group_2__1_icsz6f.png)

First, we will fill the circle since it will make it easier to create our mask: 

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <circle fill="black" cx="12" cy="12" r="5" />
  <line x1="12" y1="1" x2="12" y2="3" />
  <line x1="12" y1="21" x2="12" y2="23" />
  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
  <line x1="1" y1="12" x2="3" y2="12" />
  <line x1="21" y1="12" x2="23" y2="12" />
  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>;
```

Then, wrap our lines in a `<g/>` which is basically the div for SVG elements:

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <circle fill="black" cx="12" cy="12" r="5" />
	<g stroke="currentColor">
      <line x1="12" y1="1" x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
      <line x1="1" y1="12" x2="3" y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
   </g>
</svg>
```

We will have something like this: 

![Sun icon](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676841/using-react-spring-to-animate-svg-icons-dark-mode-toggle/Untitled_xoyuld.png)

Now, we will create our mask. To declare a mask in SVG, we create a `<mask/>`, give it an `id`, and reference it in the element to be masked, in this case, the `<circle/>`. 

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
	<mask id="mask">       
  </mask>
  <circle fill="black" cx="12" cy="12" r="5" mask="url(#mask)"/>
	<g stroke="currentColor">
      <line x1="12" y1="1" x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
      <line x1="1" y1="12" x2="3" y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
   </g>
</svg>
```

With this change, we won't be able to see our icon temporarily because the mask is assuming everything must be transparent. Therefore, let's start by creating a pseudo-canvas that will show the whole icon. To achieve this, inside the mask we will create a `<rect/>` (rectangle) that will have the same height and width of the SVG, and filled with white that will show everything (remember anything closer to white has higher opacity and vice versa). 

```html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
	<mask id="mask">
     <rect x="0" y="0" width="100%" height="100%" fill="white" />     
  </mask>
  <circle fill="black" cx="12" cy="12" r="5" mask="url(#mask)"/>
	<g stroke="currentColor">
      <line x1="12" y1="1" x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
      <line x1="1" y1="12" x2="3" y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
   </g>
</svg>
```

Now that we are showing our icon through our mask, we have to draw a circle with a black fill which will hide the portion of our circle and display the moon. Before doing this, we will do two things: increase the radius of the circle since the sun has a lower radius than the moon, and hide rays temporarily

```jsx
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
	<mask id="mask">
     <rect x="0" y="0" width="100%" height="100%" fill="white" />     
  </mask>
  <circle fill="black" cx="12" cy="12" r="9" mask="url(#mask)"/>	
	{/* <g stroke="currentColor">
        <line x1="12" y1="1" x2="12" y2="3" />
        <line x1="12" y1="21" x2="12" y2="23" />
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
        <line x1="1" y1="12" x2="3" y2="12" />
        <line x1="21" y1="12" x2="23" y2="12" />
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
      </g> */}
</svg>
```

Finally, let's add a circle inside our mask. The circle will be located at the same x of the center but will be at the top to hide only a fraction of our center circle. Also, we will rotate the SVG using a style attribute to show the moon in its right position. 

```jsx
<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      style={{ transform: "rotate(40deg)" }}
    >
      <mask id="mask">
        <rect x="0" y="0" width="100%" height="100%" fill="white" /> 
        <circle cx="12" cy="4" r="9" fill="black" />    
      </mask>
      <circle fill="black" cx="12" cy="12" r="9" mask="url(#mask)" />
      {/* <g stroke="currentColor">
        <line x1="12" y1="1" x2="12" y2="3" />
        <line x1="12" y1="21" x2="12" y2="23" />
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
        <line x1="1" y1="12" x2="3" y2="12" />
        <line x1="21" y1="12" x2="23" y2="12" />
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
      </g> */}
    </svg>
```

With this our moon is ready!

![Moon icon](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594676856/using-react-spring-to-animate-svg-icons-dark-mode-toggle/Untitled_1_bzwuul.png)

## Animating the Icons

To change from moon to sun we have to follow the next steps: 

1. Reduce the radius of the center circle.
2. Hide the mask's circle. 
3. Show the rays. 
4. Rotate the SVG to its original position. 

We could achieve this with normal React state or CSS animations, but that will not create smooth spring-base animations that create the feeling we want. Therefore, we will be using React Spring. Let's install it: 

```jsx
yarn add react-spring
```

Once added, let's proceed to add create an object that will house the two states properties: one for the sun and other for the moon:

```jsx
const properties = {
  sun: {
    r: 9,
    transform: "rotate(40deg)",
    cx: 12,
    cy: 4,
    opacity: 0
  },
  moon: {
    r: 5,
    transform: "rotate(90deg)",
    cx: 30,
    cy: 0,
    opacity: 1
  }
};
```

You may have noticed that in the sun we are rotating it to 40° instead of 0°. I did this to make the animation go from bottom to top which looks better in my opinion. 

First, let's give the component a state. I will name it `isDarkMode` since my main purpose is to use these icons for dark mode. Then, create a toggle function to change states and add `cursor: "pointer"` property in styles. 

```jsx
const AnimatedIcon = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);

  const toggleDarkMode = () => {
    setDarkMode(previous => !previous);
  };

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      style={{ transform: "rotate(40deg)", cursor: "pointer" }}
      onClick={toggleDarkMode}
    >
      <mask id="mask">
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <circle cx="12" cy="4" r="9" fill="black" />
            
      </mask>
      <circle fill="black" cx="12" cy="12" r="9" mask="url(#mask)" />
      {/* <g stroke="currentColor">
        <line x1="12" y1="1" x2="12" y2="3" />
        <line x1="12" y1="21" x2="12" y2="23" />
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
        <line x1="1" y1="12" x2="3" y2="12" />
        <line x1="21" y1="12" x2="23" y2="12" />
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
      </g> */}
    </svg>
  );
};
```

Second, let's declare our springs. A spring is a way to move data from point a to b with animation, simulating the smoothness of a real spring. We can declare one using the hook `useSpring`. Furthermore, We will use our current state to handle changing between the properties in our object. 

```jsx
// ...

const { r, transform, cx, cy, opacity } = properties[
  isDarkMode ? "dark" : "light"
];

const svgContainerProps = useSpring({ transform });
const centerCircleProps = useSpring({ r });
const maskedCircleProps = useSpring({ cx, cy });
const linesProps = useSpring({ opacity });

// ...
```

These hooks will return props that, by giving it to an `animate.HTMLElement`, it will render the values with animation. It can represent any HTML tag; for example, `animated.svg`, `animated.div`, etc.  Knowing this, let's hook it up with our icon's elements:

```jsx
// ...
return (
    <animated.svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      stroke="currentColor"
      onClick={toggleDarkMode}
      style={{
        cursor: "pointer",
        ...svgContainerProps
      }}
    >
      <mask id="myMask2">
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <animated.circle style={maskedCircleProps} r="9" fill="black" />
      </mask>

      <animated.circle
        cx="12"
        cy="12"
        style={centerCircleProps}
        fill="black"
        mask="url(#myMask2)"
      />
      <animated.g stroke="currentColor" style={linesProps}>
        <line x1="12" y1="1" x2="12" y2="3" />
        <line x1="12" y1="21" x2="12" y2="23" />
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
        <line x1="1" y1="12" x2="3" y2="12" />
        <line x1="21" y1="12" x2="23" y2="12" />
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
      </animated.g>
    </animated.svg>
  );
```

As a bonus, let's add some spring configuration to make our animations smoother and cooler!

```jsx
const properties = {
  dark: {
    r: 9,
    transform: "rotate(40deg)",
    cx: 12,
    cy: 4,
    opacity: 0
  },
  light: {
    r: 5,
    transform: "rotate(90deg)",
    cx: 30,
    cy: 0,
    opacity: 1
  },
  springConfig: { mass: 4, tension: 250, friction: 35 }
};
// ...

const svgContainerProps = useSpring({
  transform,
  config: properties.springConfig
});
const centerCircleProps = useSpring({ r, config: properties.springConfig });
const maskedCircleProps = useSpring({
  cx,
  cy,
  config: properties.springConfig
});
const linesProps = useSpring({ opacity, config: properties.springConfig });

// ...
```

That's it, now we have our sleekly animated icon! Feel free to modify it to however you would like. 

![Animated sun and moon transition](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1594678364/using-react-spring-to-animate-svg-icons-dark-mode-toggle/ezgif.com-optimize_xrefo9.gif)

## Conclusion

Creating amazing user experiences on websites depend greatly on micro-interactions. An example of where these can be implemented is by animating icons that represent an action. Learning about SVGs, masks, and an animation library like React Spring, we could create an amazingly smooth dark and light mode toggle. Hopefully, this opens the possibility of creating other animated icons which will guarantee awesome and performant interactions, bringing a website to life.

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

In this post, we will learn how to animate SVG icons using React Spring. We will be building a dark mode toggle. 

Using React Spring to Animate SVG Icons: Dark Mode Toggle

*Don't want to code along? Check out the [GitHub respository](https://github.com/JoseRFelix/antd-dark-mode/tree/master) of this post with a full example!*

[Ant Design](https://ant.design/) is a great UI library for bootstrapping an application quickly. I love it a lot and have been using it to create my [student dashboard](https://msp.jfelix.info/). However, there is a big disadvantage: lack of dynamic theming. When I faced the need to implement a dark mode for my dashboard I noticed AntD didn't have a provider for styles instead it utilizes [Less Stylesheets](http://lesscss.org/). This means that in order to modify the variables dynamically you would have to recompile the styles and in runtime, this is not feasible. In this post, I'll explore how I solved this conundrum. 

> Note: This tutorial will only work with static themes: themes that are just meant to compiled once on the build. If you want to change, for example, the primary color to any color on runtime then you will have to use a library like [react-app-rewire-antd-theme](https://github.com/mzohaibqc/react-app-rewire-antd-theme).

## The Problem

Less stylesheets are really good for supercharging CSS and handle ever-increasing styles.  However, the way a React handles this is by using Webpack to compile the styles to CSS and then add them to the build. This means you can't modify its variables or properties as you would do through Less.js. 

To fix the lack of modification there exists libraries like [react-app-rewire-antd-theme](https://github.com/mzohaibqc/react-app-rewire-antd-theme). This injects the less file with the colors to modify directly in HTML and using `window.modifyVars` to recompile the styles with the new variables on runtime. This may work with a small number of variables, however, for hundreds of variables for a dark theme, it is just not feasible. It kills the performance of the client. 

## The Solution

I tried many approaches to solving this issue, from modifying CSS directly to react-app-rewire-antd-theme, and arrived at a solution that is production-ready: swapping between pre-fetched less-compiled CSS stylesheets on runtime using [react-css-theme-switch](https://github.com/JoseRFelix/react-css-theme-switcher#readme). 

## Getting AntD Stylesheets

The first thing we have to do is creating the Less stylesheets that will contain AntD styles. To achieve this, we just have to import the variables and styles that we need for each theme. For example, for the light theme:  

```less
// light-theme.less

@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/default.less';

// These are shared variables that can be extracted to their own file
@primary-color: #00adb5;
@border-radius-base: 4px;
```

For the dark theme: 

```less
// dark-theme.less

@import '~antd/lib/style/color/colorPalette.less';
@import '~antd/dist/antd.less';
@import '~antd/lib/style/themes/dark.less';

@primary-color: #00adb5;
@border-radius-base: 4px;

@component-background: #303030;
@body-background: #303030;
@popover-background: #303030;
@border-color-base: #6f6c6c;
@border-color-split: #424242;
@table-header-sort-active-bg: #424242;
@card-skeleton-bg: #424242;
@skeleton-color: #424242;
@table-header-sort-active-bg: #424242;
```

## Compiling Less Files With Gulp

On this step, we have to achieve two main objectives: compile Less files to CSS and then append these to the public or static folder so they can be available for the client to be pre-fetched and injected. 

There are several ways to compile Less stylesheets: using a task runner, a module bundler, or scripts. Using Webpack would mean creating a plugin and with every change, the styles would have to compile which will slow down development speed for styles that will remain relatively static. Using scripts can result in extensive and unreadable code. Therefore, I decided to go with the [Gulp task runner](https://gulpjs.com/) since it applies a pipeline paradigm with files that maintain code simple and maintainable. Also, it has great support for minifying and compiling Less. 

Install Gulp and necessary dependencies to minify, use postcss and resolve imports: 

```bash
yarn add -D gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-import
```

And create a `gulpfile.js` :

```jsx
const gulp = require('gulp')
const gulpless = require('gulp-less')
const postcss = require('gulp-postcss')
const debug = require('gulp-debug')
var csso = require('gulp-csso')
const autoprefixer = require('autoprefixer')
const NpmImportPlugin = require('less-plugin-npm-import')

gulp.task('less', function () {
  const plugins = [autoprefixer()]

  return gulp
    .src('src/themes/*-theme.less')
    .pipe(debug({title: 'Less files:'}))
    .pipe(
      gulpless({
        javascriptEnabled: true,
        plugins: [new NpmImportPlugin({prefix: '~'})],
      }),
    )
    .pipe(postcss(plugins))
    .pipe(
      csso({
        debug: true,
      }),
    )
    .pipe(gulp.dest('./public'))
})
```

Finally, run `npx gulp less`, and automatically all styles will be compiled and appended to the public folder.

## Changing Between Themes

Now that we have our themes inside the public folder, we can proceed to use them in our app.

First, let's add [react-css-theme-switch](https://github.com/JoseRFelix/react-css-theme-switcher#readme): 

```bash
yarn add react-css-theme-switcher
```

Then, in our `index.js` or where we are keeping our providers, we wrap the element with the  `ThemeSwitcherProvider`. This will store our themes and current theme. Also, allow the use of `useThemeSwitcher` which change themes and fetch other metadata: 

```jsx
// index.js
import React from "react";

import ReactDOM from "react-dom";

import "./index.css";
import App from "./App";
import { ThemeSwitcherProvider } from "react-css-theme-switcher";

const themes = {
  dark: `${process.env.PUBLIC_URL}/dark-theme.css`,
  light: `${process.env.PUBLIC_URL}/light-theme.css`,
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeSwitcherProvider themeMap={themes} defaultTheme="light">
      <App />
    </ThemeSwitcherProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
```

Now, we can use it like this: 

```jsx
import React from "react";
import "./App.css";
import { useThemeSwitcher } from "react-css-theme-switcher";
import { Switch, Input } from "antd";

export default function App() {
  const [isDarkMode, setIsDarkMode] = React.useState();
  const { switcher, currentTheme, status, themes } = useThemeSwitcher();

  const toggleTheme = (isChecked) => {
    setIsDarkMode(isChecked);
    switcher({ theme: isChecked ? themes.dark : themes.light });
  };

  // Avoid theme change flicker
  if (status === "loading") {
    return null;
  }

  return (
    <div className="main fade-in">
      <h1>The current theme is: {currentTheme}</h1>
      <Switch checked={isDarkMode} onChange={toggleTheme} />

      <Input
        style={{ width: 300, marginTop: 30 }}
        placeholder="I will change with the theme!"
      />
    </div>
  );
}
```

Inside our playground, we will be able to change smoothly between themes!

![Changing between light theme and dark theme](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1593460360/dynamic-themes-in-ant-design-how-to-change-between-light-and-dark-theme/ezgif.com-video-to-gif_scrmtp.gif)

## CSS Injection Order

You may notice our styles are being appended to the head on runtime which means that those that were added on build time will be possibly overridden. 

![Style tags before pre-fetched stylesheets. ](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1593460389/dynamic-themes-in-ant-design-how-to-change-between-light-and-dark-theme/Untitled_qng3xv.png)

On this screenshot, you may observe that the style tags which are build-time CSS declarations are located before those pre-fetched. To avoid overriding our styles, we can mark an insertion point in our HTML which will allow it to be injected at that location, avoiding collisions. Thankfully, we don't have to implement it ourselves since react-css-theme-switcher comes with a built-in solution. 

To begin, add in your HTML a comment where you want the styles to be injected. Also, the text content of this will be the identifier we will pass to the `ThemeSwitcherProvider`. 

```html
// index.html

<!DOCTYPE html>
<html lang="en">
	<head>    
			...
	    <title>React App</title>
	    
	</head>
	<body>
	...
	</body>
</html>
```

Finally, on the provider: 

```jsx
// index.js

ReactDOM.render(
  <React.StrictMode>
    <ThemeSwitcherProvider
      themeMap={themes}
      defaultTheme="light"
      insertionPoint="styles-insertion-point"
    >
      <App />
    </ThemeSwitcherProvider>
  </React.StrictMode>,
  document.getElementById("root")
);
```

With this, we are done! If you check your developer tools: 

![Style tags after pre-fetches stylesheets.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1593460515/dynamic-themes-in-ant-design-how-to-change-between-light-and-dark-theme/Untitled_1_jwnwtn.png)

Our styles will be injected where we want them to. Now, it won't conflict with our styles!

> Note: Watch out for HTML comment trim in production. Make sure your project works well in production and in development.

## Conclusion

AntD is an amazing UI library which can help to create projects quickly and with a beautiful user interface. However, it has a major weakness: it's styles are not easily configurable since they use Less stylesheets. Using Gulp to compile and extract AntD CSS and react-css-theme-switcher to inject and change between them, this issue could be solved in a performant way. In the future, it would be good to explore how to optimize these generated stylesheets by extracting duplicate styles and reducing fetched CSS size.

I hope you found this article useful. For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Learn how to change themes dynamically with the Ant Design UI library. In this post, we will be exploring how to change between dark and light themes.

How to Change Between Light and Dark Themes in Ant Design

_Don't want to code along? Here is the [GitHub repository](https://github.com/Jfelix61/mailhog-docker-express-example) for what we are building on this post!_

Most apps sooner or later will have to deal with sending emails to the user, that being after registration or a specific event. After sending the email, a developer most likely would want to test how the user would receive it or if there is a link, how it reacts within the app. Using a real SMTP server for this can be tricky and could end up spamming a user with emails without needing to. That is why a fake SMTP server can be useful as it can allow you to send emails to a safe box that will trap all these emails and can be fetched if you need to use them to test your flow or content. There are many SaaS (Software as a Service) that can set up this server for you, however, they can be costly and limiting. That is why in this post, I'll be teaching you how to use [Mailhog](https://github.com/mailhog/MailHog) with Docker to create a fake email server and be able to fetch emails so you can use it on your tests.   

## Creating an Express Server

In this tutorial, I'll use an [Express](https://github.com/expressjs/express) server with [Nodemailer](https://github.com/nodemailer/nodemailer) since it is my main toolset. Regardless, this method will work for any stack that can use SMTP as a client. First, start a node environment by running: 

```bash
npm init -y
```

Then, install the required dependencies: 

```bash
npm install --save express nodemailer
```

Next, create a `server.js` which will start our server: 

```jsx
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => res.send("Hello World!"));

app.listen(port, () =>
  console.log(`Example app listening at http://localhost:${port}`)
);
```

Add a start script in `package.json` to start our server:

```jsx
{ 
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }, 
}
```

Finally, start the server with:

```jsx
npm run start
```

![Running server on server port 3000](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1592513879/test-your-email-flow-with-mailhog-a-fake-smtp-server/Untitled_tryhhj.png)

## Setting up docker

Setting Mailhog is as easy as using your OS install command. However, if you are sharing your repository with other developers it would be nice to use Docker so that it can work as expected in other machines or CI (Continous Integration). Also, the developer is able to clean the history as needed by just removing the container.

If you don't have docker installed please refer to their [site](https://www.docker.com/) and follow their instruction on how to install for you OS. 

> Note: If you are using Linux, please install Docker Compose on their [docs page](https://docs.docker.com/compose/install/)

Once you have installed docker create a `Dockerfile`. This will fetch a Node.js image and start our server.

```docker
FROM node:10

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

CMD [ "node", "server.js" ]
```

Also, create a `.dockerignore:`

```docker
node_modules
npm-debug.log
```

Create a `docker-compose.yaml` which will start up our just created Dockerfile and also Mailhog. 

```docker
version: '2.4'

services:
  node:
    build:
      context: .
      dockerfile: Dockerfile 
    ports:
      - '3000:3000'     

  mailhog:
    image: mailhog/mailhog:latest
    restart: always
    ports:
      - 1025:1025
      - 8025:8025
```

Finally, run:

```docker
docker-compose up --build
```

And you will see that our images will be built and our servers will start automatically! 

![Mailhog and server initialized with Docker](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1592513912/test-your-email-flow-with-mailhog-a-fake-smtp-server/Untitled_1_kxbn52.png)

## Receiving Emails

To receive emails we just have to send them as we would for a normal SMTP. Go to `server.js` and add the following : 

```jsx
const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const port = 3000;

const transporter = nodemailer.createTransport({
  host: "mailhog",
  port: 1025
});

app.get("/send_email/:email", (req, res) => {
  const { email } = req.params;

  const messageStatus = transporter.sendMail({
    from: "My Company <company@companydomain.org>",
    to: email,
    subject: "Hi Mailhog!",
    text: "This is the email content",
  });

  if (!messageStatus) res.json("Error sending message!").status(500);

  res.json("Sent!").status(200);
});

// ...
```

Here we create a Nodemailer transport with Mailhog's default credentials. Also, a GET route that receives an `email` parameter to where we want to 'send' it. Now if you head in your browser and type [`http://localhost:3000/send_email/test@test.com`](http://localhost:3000/send_email/test@test.com) you will see a 'sent!' JSON response. If you head towards Mailhog's dashboard on `[localhost:8025](http://localhost:8025)`, the email we just sent will be visible and you can open it to see any details such as headers, and text content. 

![Mailhog dashboard](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1592513938/test-your-email-flow-with-mailhog-a-fake-smtp-server/Untitled_2_z0rjdw.png)

## Query Mailhog

Querying Mailhog is as easy as doing it for a REST server. To find all the possible routes to query,  you can find their [Swagger](https://swagger.io/) JSON and YAML [on their GitHub](https://github.com/mailhog/MailHog/tree/master/docs/APIv2). To get all the emails from a specific email we use the following GET route `http://localhost:8025/api/v2/search`. Since we sent a message to `test@test.com` our query will be `http://localhost:8025/api/v2/search?kind=to&query=test@test.com`. If you paste this in your browser you'll see the email we just sent! 

![Queried email JSON](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1592513954/test-your-email-flow-with-mailhog-a-fake-smtp-server/Untitled_3_ydvvut.png)

Awesome! Now you can use this information for testing using Cypress or Jest. 

## Conclusion

Testing email flows is very important to guarantee a stellar experience for users, especially since these flows can sometimes be fundamental for general functionality like a sign-up confirmation. Using our real STMP server can result in sending a user an email by mistake. Also, by setting a fake SMTP using a SaaS provider like Mailtrap can be expensive. Instead, we can use Mailhog and Docker to create this server quickly that allows us to query for sent emails so we can use them in our tests without dealing with quota or price plans. 

I hope you found this article useful. For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Learn how to set up Mailhog with Docker so you can test your email flow for free 

Test Your Email Flow with Mailhog, a Fake SMTP Server

Resources are extremely important for a programmer since they can greatly improve productivity while coding. I have been collecting many links throughout months and I wish to share some of them with you. Hopefully, they will be as useful to you as they have been to me. Without further ado here some great **free** and **up-to-date** resources!

Table of Contents: 
- [Illustrations](#illustrations)
- [Development](#development)
- [CSS](#css)
- [Tailwind](#tailwind)
- [Design](#design)
- [Productivity](#productivity)

## <a name="illustrations"></a> Illustrations

## [Error 404](https://error404.fun/)

![Error 404 landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource.jpg)

This source is awesome for finding illustrations you can use for your website's 404 page.

## [Blush](https://blush.design/)

![Blush landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-43.png)

Blush allows you to download all their illustrations for free for commercial and personal use. It is amazing since it features many illustration styles that can be composed to create new ones. Also, they have a [Figma](https://www.figma.com/files/recent) plugin so you can immediately get working on them inside your designs.

## [Smash Illustrations](https://usesmash.com/)

![Smash landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-2.png)

Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ object and character, and 20+ unique scenes so you can compose them however you like.

## [Control](https://control.rocks/)

![Control landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-3.png)

Control features high-quality illustrations in solid and linear style for free. They are free to use in commercial and personal use however they are in `.png` format. If you need SVGs then you will have to pay $38 which isn't that bad for illustrations of this quality.

## [DrawKit](https://www.drawkit.io/#browse-now-button)

![Drawkit landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-4.png)

DrawKit features 220+ free to use illustrations. They all come in SVG so you can create awesome compositions! Also, they offer animated illustrations using [lottie](https://airbnb.io/lottie/#/) which is huge for cool and sleek website development.

## [Open Doodles](https://www.opendoodles.com/)

![Open Doodles landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-5.png)

If you are a fan of sketchy illustrations then you will love Open Doodles. All illustrations and free to download in SVG or PNG format. Also, they have a composition route and generator so you can get the doodles you need!

## [Free Illustrations](https://freellustrations.com/)

![Free Illustrations landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-6.png)

Free Illustrations feature many illustration backgrounds that are perfect for landing page development.

## [Mixkit](https://mixkit.co/free-stock-art/)

![Mixkit landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-7.png)

Mixkit is the [Unsplash](https://unsplash.com/) of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge.

## [Delesign](https://delesign.com/free-designs/graphics/)

![Delesign landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-8.png)

Delesign gives you many clean illustrations for free. Their main strong point is their diversity.

## <a name="development"></a> Development

## [Majestic](https://github.com/Raathigesh/majestic)

![Majestic landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-9.png)

Majestic is a zero-config UI for Jest which makes it easier to see tests log output, instead of using purely the terminal. It can be installed globally or just be opened in any repository using `npx majestic`

## [Carbon](https://carbon.now.sh/?bg=rgba(171%2C-184%2C-195%2C-1)&t=seti&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=const%2520pluckDeep%2520%253D%2520key%2520%253D%253E%2520obj%2520%253D%253E%2520key.split(%27.%27).reduce((accum%252C%2520key)%2520%253D%253E%2520accum%255Bkey%255D%252C%2520obj)%250A%250Aconst%2520compose%2520%253D%2520(...fns)%2520%253D%253E%2520res%2520%253D%253E%2520fns.reduce((accum%252C%2520next)%2520%253D%253E%2520next(accum)%252C%2520res)%250A%250Aconst%2520unfold%2520%253D%2520(f%252C%2520seed)%2520%253D%253E%2520%257B%250A%2520%2520const%2520go%2520%253D%2520(f%252C%2520seed%252C%2520acc)%2520%253D%253E%2520%257B%250A%2520%2520%2520%2520const%2520res%2520%253D%2520f(seed)%250A%2520%2520%2520%2520return%2520res%2520%253F%2520go(f%252C%2520res%255B1%255D%252C%2520acc.concat(%255Bres%255B0%255D%255D))%2520%253A%2520acc%250A%2520%2520%257D%250A%2520%2520return%2520go(f%252C%2520seed%252C%2520%255B%255D)%250A%257D)

![Carbon landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-10.png)

Carbon is useful if you want to share sleek images of code snippets inside a tweet or blog.

## [Squoosh](https://squoosh.app/)

![Squoosh landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555896/40-high-quality-resources-for-web-development/resource-11.png)

Compress your images will almost unnoticeable quality loss. Also, you can edit image size and how much quality is lost making it a must for optimizing images for your site.

## [SVGOMG](https://jakearchibald.github.io/svgomg/)

![SVGOMG landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555896/40-high-quality-resources-for-web-development/resource-12.png)

SVGOMG delivers a GUI for optimizing your SVG files. Extremely important when working with SVGs for your site.

## [Kite](https://kite.com/)

![Kite landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-13.png)

Kite is amazing for increasing your code productivity. I believe that in the future AI won't take our jobs but it will be augmented by tools like this. It offers autocompletion in your favorite editors using machine learning trained with 2+ million repositories. It currently works only with Python and Javascript, but shortly, more languages will be available.

## [DevDocs](https://devdocs.io/css/css_animations)

![DevDocs landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-14.png)

DevDocs is a documentation aggregator. It adds multiple libraries and API documentation in a clean and searchable interface. This is massive for general development so I highly recommend it.

## [DevHints](https://devhints.io/)

![DevHints landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-15.png)

This website featured cheat sheets for many tools such as bash, React, go, sass, and many more.

## [Wappalyzer](https://www.wappalyzer.com/)

![Wappalyzer landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-16.png)

Want to know the stack of your favorite website? Say no more, Wappalyzer allows you to know fairly quickly. They also have an extension so you find these on the go.

## [iHateRegex](https://ihateregex.io/)

![iHateRegex landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-17.png)

This site is a holy grail for those that don't want to create their own regex or search all through google. Think of it as google for regex.

## [LottieFiles](https://lottiefiles.com/)

![Lottie Files landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-18.png)

Ever heard of [Lottie](https://airbnb.io/lottie/#/)? I had not until I found this website. Lottie is a library that allows you to parse and run animations exported from Adobe After Effects. These animations are beautiful and LottieFiles houses thousands of these for free. However, take into consideration most of them have a CC-BY 2.0 license.

## [Shape Divider](https://www.shapedivider.app/)

![Shape Divider landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-19.png)

Shape Divider allows you to generate sleek dividers for your website on the fly. It features a cool UI compared to other sites and works very well.

## <a name="css"></a> CSS

## [Animista](https://animista.net/)

![Animista landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-20.png)

Need some CSS animations inspiration or snippets? Animista got you covered. It features many cool CSS effects that can speed up your development.

## [Pattern.css](https://bansal.io/pattern-css#introduction)

![Pattern.css landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-21.png)

Love to use patterns in your design? Then you will love this one. It is a CSS library that makes distinct classes available for you to create awesome patterns for your website.

## [CSSeffectsSnippets](https://emilkowalski.github.io/css-effects-snippets/)

![CSSeffectsSnippets landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-22.png)

Nifty CSS animations for your website.

## [98.css](https://jdan.github.io/98.css)

![98.css landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-23.png)

98.css lets your nostalgic fantasies come true. If you need to build a website or electron app with Windows 98 style then 98.css will greatly help you.

## <a name="tailwind"></a> Tailwind

## [TailwindComponents](https://tailwindcomponents.com/)

![TailwindComponents landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-24.png)

Tailwind is very popular these days, and sites like this show why. TailwindComponents feature hundreds of community-built components using [tailwind.css](https://tailwindcss.com/). Some of these have a very high quality so be sure to check it out!

## [Tailblocks](https://mertjf.github.io/tailblocks/)

![Tailblocks landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-25.png)

Tailblocks features more high-quality Tailwind components. However, they provide a similar experience to bootstrap so you can create a whole website using these. Absolutely a must to speed development.

## <a name="design"></a> Design

## [colors.lol](https://colors.lol/)

![Colors.lol landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-26.png)

Need palettes that are overly descriptive? Colors.lol is the right place to go to find these. They feature 10+ of these palettes which can make your design more vibrant.

## [ColorMind](http://colormind.io/)

![Colormind landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591559103/40-high-quality-resources-for-web-development/resource-45.png)

Colormind generates color schemes using deep learning. You can lock the colors and get others that complement that one.

## [Ucraft Logo Maker](https://www.ucraft.com/free-logo-maker)

![Ucraft Logo Maker landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591559126/40-high-quality-resources-for-web-development/resource-46.png)

This is my go-to whenever I need a quick logo for a side project. They feature thousands of icons that can help you create many logo combinations. For free commercial and personal use, they let you download a PNG version of your logo.

## [AppMockUp](https://app-mockup.com/)

![AppMockUp landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-27.png)

AppMockUp lets you generate mock-ups for Android and iPhones without much work. If you are a mobile developer be sure to check this one out.

## [Webframe](https://webframe.xyz/)

![Webframe landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-28.png)

Webframe has thousands of design inspiration based on real websites.

## [FontSpark](https://fontspark.app/)

![FontSpark landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-29.png)

FontSpark allows you to discover your next favorite font by generating different ones until you like it.

## [HackDesign](https://hackdesign.org/lessons)

![HackDesign landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-30.png)

Have a lot of time and want to learn design? Then HackDesign is for you. This website features many lessons that can teach you what you need for becoming a designer.

## [Checklist Design](https://www.checklist.design/)

![Checklist Design landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-31.png)

If you are designing or building a website these checklists can be a life-saver. They guarantee accessibility and great UX for different sections of your site such as forms, typography, buttons, and many more.

## [Remove BG](https://www.remove.bg/)

![Remove BG landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-32.png)

The title is pretty self-explanatory. This tool makes it a breeze to delete the background from your images so you can use it in your designs or website.

## [Unscreen](https://www.unscreen.com/)

![Unscreen landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-33.png)

Just like [remove.bg](http://remove.bg) but for gifs and videos.

## <a name="productivity"></a> Productivity

## [Sejda](https://www.sejda.com/)

![Sejda landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-34.png)

Sejda provides an online sleek PDF editor. Awesome for editing your CV!

## [GetTerms](https://getterms.io/)

![GetTerms landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-35.png)

GetTerms generates a Privacy Policy and Terms of Service tailored for your app. This is awesome for saving time when building a web product.

## [Top Hunts Time Machine](https://timemachine.betamode.dev/)

![Top Hunts Time Machine landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-36.png)

This tool allows you to see the most famous products featured in [Product Hunt](https://www.producthunt.com/). If you want to find resources be sure to check this out monthly.

## [Notion](https://www.notion.so/)

![Notion landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-37.png)

Notion is so good. So good that it is in fact my daily writing platform. I just love how clean and efficient it is for blogging and note-taking.

## [Writty](https://iamcharlie.design/writty)

![Writty landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-38.png)

Need a super lean and sleek editor for writing? Then you will like Writty. It features a super simple editor that saves all you write inside your browser so you don't have to worry about it being exposed to the Internet so easily. Also, it is open-source which is a plus.

## [Grammarly](https://www.grammarly.com/)

![Grammarly landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591559066/40-high-quality-resources-for-web-development/resource-44.png)

This is a must for writing anything on the Internet. I compare this tool to ESLint since it allows you to find errors before you even notice them. Developers can benefit from this whenever we are writing GitHub issue, a Stack Overflow question, ...

## [OpenSource Builders](https://opensource.builders/)

![OpenSource Builders landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-39.png)

OpenSource Builders offers many open-source alternatives to common products such as Facebook, Slack, Shopify, and many more.

## [Wave](https://www.waveapps.com/)

![Wave landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-40.png)

If you are a freelancer or have your own business, Wave can help with accounting, invoicing, and receipts free on the web.

## [Clockify](https://clockify.me/)

![Clockify landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-41.png)

A truly free time tracker for individuals and teams. Clockify allows you to log time easily and has many features for you to manage this data.

## [Untools](https://untools.co/)

![Untools landing page](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591555895/40-high-quality-resources-for-web-development/resource-42.png)

Untools features many thinking patterns that can help you during programming.

## Conclusion
I hope all of these resources can help you build better websites and apps as they have helped me! If you have another favorite resource, please write them up in the discussion below. 

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Resources are extremely important for a programmer since they can greatly improve productivity while coding. 

40+ High-Quality Free Resources for Web Development

Every programmer has found himself looking for answers in [Stack Overflow](https://stackoverflow.com/) whenever he has no idea how to solve a  problem. It is basically the haven of sharing solutions to frequent coding or to be discovered coding problems. However, what if you don't find the answer you are looking for and your posted question doesn't see to be getting track. In this case, there are some ways you can solve your contrived problem without needing Stack Overflow.  

In this post, I'll teach you how I find solutions to my problems outside of Stack Overflow and how I no longer depend on it. 

## First Alternative: Using Github

GitHub is the best alternative to Stack Overflow. I've noticed common problems that are related to libraries or new features will mostly be found inside a GitHub discussion. Otherwise, those that are related to syntax errors will be in Stack Overflow. One way to find GitHub discussions is by using Google's site query filter: 

```
site:github.com <YOUR QUERY>
```

This will return only results coming from GitHub, perfect for finding these discussions. 

If you don't find any relevant results using the filter, there are other ways of finding these discussions. 

One way is to use GitHub's search bar to **find a preexisting library or repository** that may contain solutions to problems similar to what you are facing. For example, if I am having problems setting up Circle CI with Cypress then I would search for `Cypress Circle CI`. Then look at the first results and analyze if they have what I'm looking for. 

![GitHub search results with repositories that are related to Cypress with Circle CI](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591078398/how-to-find-solutions-to-your-programming-problems/Untitled_aiqi1l.png)

### If a Library is Causing Problems

If you know a library is the culprit of your problem then you could **search for an issue** inside its codebase. For example, recently I had a problem with Cypress stubs. I wasn't finding any relevant answers to my problem in google so I decided to search on their repository. When doing this kind of search be sure to check both **open and closed** issues.

![Issue tab with query that contains route not working](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591078448/how-to-find-solutions-to-your-programming-problems/Untitled_1_qzkhrg.png)

When I search for my issue, I immediately found many related issues and ended up finding a solution in the second result. 

If no issue is found, there is another way: create an issue. Creating an issue is very straightforward and there are many developers ready to help you with your problem. However, they can take some time before they are resolved.

The last alternative and sometimes most time consuming is to dive into the source code. You can use the repository's search bar to find relevant parts in the code that could lead you to a solution or opening a Pull Request with a fix. 

![Repository search bar with route not working query](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591078483/how-to-find-solutions-to-your-programming-problems/Untitled_2_nm7yvf.png)

## Second Alternative: Finding an npm Package

I vaguely mentioned this before by using the GitHub search bar to find a preexisting library or repository. Regardless, [npm](https://www.npmjs.com/) has millions of package which are published and ready to be installed with code that will solve your problem. Furthermore, npm has its own search bar which lets you filter by: 

* **Popularity.** indicates how many times the package has been downloaded. This is a strong indicator of packages that others have found to be useful.
* **Quality.** Quality includes considerations such as the presence of a README file, stability, tests, up-to-date dependencies, custom website, and code complexity.
* **Maintenance.** Maintenance ranks packages according to the attention they are given by developers. More frequently maintained packages are more likely to work well with the current or upcoming versions of the npm CLI, for example.
* **Optimal.** Optimal combines the other three criteria (popularity, quality, maintenance) into one score in a meaningful way.

> This information comes from this [documentation page](https://docs.npmjs.com/searching-for-and-choosing-packages-to-download) in npm's website.

My recommendation is to use these filters to your advantage. Filter mostly by Optimal so you can find which package is more likely to work for your codebase. Also, take into consideration its bundle size and capabilities such as tree shaking.

![Npm search with results for React](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1591078388/how-to-find-solutions-to-your-programming-problems/Untitled_3_kcnteq.png)

## Third Alternative: Using an Online Tutorial

This is very useful if your problem is not solved by a library or it required multiple steps or libraries to solve. You can find these tutorials by searching 'how to ...' on [Google](https://www.google.com), [Medium](https://medium.com/), [Dev.to](https://dev.to/), [Youtube](https://www.youtube.com/), and many others. Do take note that these tutorials may use outdated methods, so be sure to check the date and find the most recent.  

## Fourth Alternative: Ask an Experienced Friend

Asking for help from a friend that has more experience is an efficient way to solve a problem. The main benefit is that their answer can be tailored to your problem and they can give advice along with the solution. Also, they could teach you how they solve problems when you can't find them online which is a big plus in the long run. If you don't know anyone that fits this criteria, feel free to use social media such as Reddit, Twitter, and Discord to meet other developers.

## Fifth Alternative: Do it Yourself

If you have tried all other alternatives and still do not find your solution then it is time for you to create your solution. This will be the most time consuming of all. After you have found the solution to your problem then I recommend you share it with the world since someone may stumble on a similar problem like yours. 

To find a solution by yourself I recommend you to follow the next steps: 

1. **Understand your problem.** Try to cover each edge case where your problem occurs and maybe write down what you have found so you don't forget. 
2. Research. Sometimes this may not be needed, but if it is necessary be sure to check existing techniques that may help you. You could find leads in books, or through colleagues. For example, if you are having problems with stack overflow then search for books, videos, or courses on algorithms that can give you potential methods of solving the issue.
3. **Come up with possible solutions.** Brainstorm for possible solutions and write them down. If you can't come up with any then repeat the first two steps. Also, don't try to sweat solutions in one sitting, clearing your mind can allow your subconsciousness to find them for you. 
4. **Implement a solution.** With all the solutions you have written try to select the one which seems most effective. 
5. **Revise.** Check if your current solution is what you need by checking if you solved what you had written in step 1. Also, if it can be improved further by writing comments, testing, and cleaner syntax. 

## Conclusion

Software development is about solving problems so you can contribute to the world or yourself amazingly. I hope that this post has given you alternatives so you can find solutions to problems you will encounter throughout your career without using Stack Overflow. Don't get me wrong, Stack Overflow is amazing, and if you find your problem in their or you posted your question and got answered, then, by all means, use it. Best of luck in your development journey 🎉

Learn how to find solutions outside of Stack Overflow using Github and other methods. 

How to Find solutions To Your  Programming Problems Outside of Stack Overflow

Our job as a programmer is to constantly find solutions to problems. Since we follow a DRY (don't repeat yourself) philosophy, whenever we encounter a problem, we immediately search for a module or discussion which has a solution. Sometimes the module found is not reliable to add to our codebase since it lacks proper testing coverage or doesn't look dependable at all. 

In this post, I'll focus on the process of creating and publishing a typescript module. It will feature a codebase with proper testing and a publishing pipeline that will give you confidence while shipping code!

## What We'll Use

Setting up a robust module codebase is hard. Adding tools like ESLint, Prettier, Jest, Rollup, or Webpack, a continuous integration pipeline, and many more can be daunting. A developer does not want or needs to spend all day just to create the backbone of a library. That is why we'll use something called [tsdx](https://github.com/jaredpalmer/tsdx#quick-start) which sets this all up for us and also gives us some cool human-readable errors. Think of it as the [create-react-app](https://github.com/facebook/create-react-app) of modules.

## Creating our Codebase

To start let's run this command in the terminal. This will start a new project. I'll name our module `react-awesome-library`.

When choosing the library select any template you need. In this case, I'll use React.js.

```
npx tsdx create react-awesome-library
```

It will add all necessary dependencies, an example,  a continuous integration pipeline with [Github Actions](https://github.com/features/actions), and a test. This is perfect for starting development right away!

![Created files tree](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1590388134/create-and-publish-a-supercharged-typescript-codebase/Clipboard_2020-05-24-00-01-54_lyqbow.png)

This is an example of what it will generate.

## Publishing The Module

First, create an npm account, and be sure to confirm your email. Head [here](https://www.npmjs.com/signup) if you don't have one.

Second, log in to your account in your terminal using:

```
npm login
```

It will prompt you to enter your username, password, and email.

![Npm inquired information](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1590388133/create-and-publish-a-supercharged-typescript-codebase/Clipboard_2020-05-24-00-09-30_qomnrg.png)

Finally, just run `npm publish` to publish your package:

```
  npm publish
```

## Supercharging Publishing Process

Whenever we need to publish a package, we'll probably want to:

1. Run written tests.
2. Update version in `package.json`. Most modules follow [Semantic Versioning](https://semver.org/). It consists of a version number like this `1.1.2` which each number represents `MAJOR.MINOR.PATCH`. A major version indicates incompatible API changes. A minor version marks functionality that is backward-compatible. A patch version specifies that it is a backward-compatible bug fix.
3. Create a git tag for easier navigation between versions.
4. Push the new version to GitHub.
5. Push the new version to npm
6. Create a release note for the package.

Handling these can be tiresome and time-consuming. That is why a package called [np](https://github.com/sindresorhus/np) makes it easier to do all these tasks. Thus, let's install it:

```bash
npm install --global np
```

> You may have to use sudo for global installs.

For `np` to work we have to at least push once to a git repository. Here are some steps to set up for any git repository:

```bash
# Initialize git repository
git init

# Adds a remote repository
git remote add origin <REPOSITORY_URL>

# Commit changes
git add . 
git commit -m "First Commit"

# Push your changes
git push -u origin master
```

After you have pushed your code changes, just run `np --no-2fa` (Note: here we disable 2-factor authentication, but it is highly recommended to enable it.) to publish your package.

![Np steps pipeline before publish](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1590388134/create-and-publish-a-supercharged-typescript-codebase/Clipboard_2020-05-25-01-56-45_nenfoe.png)

That's it! It ran all necessary checks before publish and we can rest assured that we didn't miss anything our pipeline.

## Conclusion

Sharing code in a module is an important task for developers. Creating a module can be daunting since it requires to set up many tools like Webpack or Rollup, ESLint, Prettier, and many more. Thankfully, there are tools like `tsdx` and `np` that supercharge our development and reduce the time taken to set up a Typescript package ready for development.  💻😎

Learn how to create and publish a robust Typescript codebase with tsdx and np

Create and Publish a Supercharged Typescript Codebase

[Last post](https://jfelix.info/blog/semantic-html-what-why-and-how) addressed the definition, benefits, and application of semantic HTML. In this post, I will walk through the process of coding an accessible, responsive website using what we've learned in the series.   

Starting this series, we had the following design: 

![Website design with navbar and hero section](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351385/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-04-00-51-27_uso3wt.png)

And we created a layout model using a technique learnt on the [first post](https://dev.to/jfelx/how-to-create-pixel-perfect-layouts-models-1dkg) of the series:

![Layout model of website design](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351414/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-04-26-03-01-59_bg2d5i.png)

Having this we can begin translating this model to HTML and CSS!

## Responsive Design

One more thing before starting, we have to think about how we will make the site responsive. There are two ways we can achieve this: 

1. Set a max-width to all our sections and focus on the most used breakpoints.  
2. Make it fluid on all screens.

> Note: Every design should aim to be responsive in all screen sizes. However, it can be really time-consuming, therefore we use one of the two methods above to avoid creating media queries for all screens available.

Selecting one of both methods greatly depends on the situation and preference. 

Setting a max-width is what I normally go for. The design stays consistent on big screens and is easier to style since there are fewer breakpoints to worry about. 

Making it fluid is better for some designs. If implemented well (using grid e.g. [12 column grid](https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/)) it can be done really quickly and will be responsive in all breakpoints. However, its cost of implementation can be quite high.

For the sake of this tutorial, we will go with the first method. For the breakpoints, we'll be using the most common:

* **Mobile** (640px)
* **Tablet** (768px)
* **Tablet Landscape** (1024px)
* **Laptop** (1440px)
* **Really big screens** (>= 2000px)

## CSS Normalization

Whenever creating a website, writing CSS that is consistent in all browsers is a must. To guarantee this, we use something called CSS Normalization. [Normalize.css](https://necolas.github.io/normalize.css/) is great for this, however, it is an overkill for this kind of project. Therefore, we will be using a very basic CSS Normalization, but I highly recommend Normalize.css. 

In our basic normalizer, we will just remove browsers added margin and padding. Also, add [box-sizing](https://www.w3schools.com/css/css3_box-sizing.asp) to guarantee a consistent width and height property. 

Apart from removing browser's defaults, using `rem` units instead of `px` will streamline the process of making the site responsive since each element will grow or decrease based on the user's browser zoom or breakpoints. To achieve this, we will change `font-size` value to a percent. In this case, `62.5%`, so that 1 rem would be equal to 10 pixels. On the other hand, whenever we need for the design to stay consistent we can use `px` units.

```css
/*
  Breakpoints: 
    Mobile (640px = 40em)
    Tablet (768px = 48em)
    Tablet Landscape (1024px = 64em)
    Laptop (1440px = 90em)
    Really large screens ( >= 2000 = 125 em)
*/

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /*1rem = 10px*/
  box-sizing: border-box;
}

@media only screen and (max-width: 64em) {
  html {
    font-size: 50%;
  }
}

/* For really big screens */
@media only screen and (min-width: 125em) {
  html {
    font-size: 75%;
  }
}

body {
  font-size: 1.4rem;
  font-family: "Fira Sans", sans-serif;
}
```

## Navigation Bar

Let's start with the navbar. The navbar section element is `header` since it serves as our website's heading containing the site's main links and general brand.

> Note: I will be using [BEM notation](https://css-tricks.com/bem-101/) for elements CSS classes since it increases legibility. 

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Pixel Perfect Layout</title>
  </head>
  <body>
    <header class="navigation">
      <svg       
        class="navigation__logo" 
        width="75"
        height="24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9 0C3.648 0 0 3.648 0 9c0 5.256 3.72 8.856 9 8.856 2.376 0 4.752-.48 7.008-1.68V7.488H9.504v2.736h3.48v4.008c-1.2.672-2.688.888-3.96.888-3.648 0-5.856-2.808-5.856-6.312C3.168 5.424 5.52 2.736 9 2.736c1.584 0 3.288.552 4.44 1.656l2.232-2.256C13.872.504 11.352 0 9 0zM24.664 5.616c-1.512 0-2.784.792-3.408 2.112h-.048V5.904h-2.88v11.52h2.88v-6c0-1.536.912-3.072 3.096-3.072.432 0 .84.072 1.392.216V5.784c-.384-.096-.6-.168-1.032-.168zM31.528 5.616c-2.256 0-3.864.792-4.896 1.848l1.512 1.512a4.577 4.577 0 013.072-1.2c1.584 0 2.64.792 2.64 2.136v.336h-.888c-4.944 0-7.08 1.344-7.08 4.008 0 2.112 1.824 3.456 4.2 3.456 1.536 0 2.88-.576 3.696-1.872h.072v1.584h2.592v-6.888c0-2.712-.984-4.92-4.92-4.92zm-2.76 8.424c0-1.224 1.536-1.776 4.08-1.776h.84v.72c0 1.464-.912 2.568-2.88 2.568-1.08 0-2.04-.528-2.04-1.512zM36.986 5.904l4.704 11.52h3.072l4.536-11.52h-2.952l-3.096 8.064h-.048L40.13 5.904h-3.144zM51.456.264c-1.032 0-1.824.792-1.824 1.728 0 .936.792 1.728 1.824 1.728s1.872-.696 1.872-1.728c0-.984-.816-1.728-1.872-1.728zm-1.416 5.64v11.52h2.88V5.904h-2.88zM56.258 2.568v3.336h-2.376v2.448h2.376v5.4c0 2.904 1.056 3.96 3.768 3.96.648 0 1.728-.12 2.28-.384v-2.424c-.24.192-.84.36-1.56.36-1.128 0-1.608-.576-1.608-1.8V8.352h3.168V5.904h-3.168V2.568h-2.88z"
          fill="#222"
        />
        <path
          d="M61.994 5.904l4.92 11.616-.504 1.248c-.528 1.272-.816 1.824-2.328 1.824-.504 0-1.008-.12-1.464-.288l-.36 2.592c.72.192 1.464.288 2.208.288 2.88 0 3.648-1.416 4.584-3.792l5.256-13.488h-3l-2.88 7.992h-.048l-3.216-7.992h-3.168z"
          fill="#222"
        />
      </svg>

      <span class="navigation__icon">
        <svg
          width="20"
          height="20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 8.5a8.5 8.5 0 1115.453 4.89l3.44 3.437a1 1 0 010 1.415l-.649.647a1 1 0 01-1.413 0l-3.44-3.437A8.5 8.5 0 010 8.5zm8.5 6.071A6.078 6.078 0 012.429 8.5 6.078 6.078 0 018.5 2.429 6.078 6.078 0 0114.571 8.5 6.078 6.078 0 018.5 14.571z"
            fill="#222"
          />
        </svg>
      </span>
      <button class="navigation__button">
        <svg
          width="34"
          height="14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path fill="#222" d="M0 0h34v3H0zM16 11h18v3H16z" />
        </svg>
      </button>
     <nav class="navigation__links">
        <ul>
          <li><a href="/">Home</a>></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>
```

Writing the styles for the navigation bar is pretty straightforward once you have the CSS purpose of each block. We can refer to our model:

![Layout model of navigation bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351514/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-04-01-25-15_jb2gce.png)

By taking a look, the block uses flex to organize its elements.

Also, it has some padding (more on its right and left than top and bottom). Let's translate this to CSS: 

```css
/* ... */ 

/* SECTION */
.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 5rem 9rem;

  max-width: 1440px;
  margin: 0 auto;
}

@media only screen and (max-width: 40em) {
  /* Reduce the padding on smaller screens */
  .navigation {
    padding: 5rem 3rem;
  }
}

/* ELEMENT */
.navigation__search {
  cursor: pointer;
}

/* ELEMENT */
.navigation__button {
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

/* BLOCK */
.navigation__links {
  display: none;
}
```

![Desktop navigation bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351565/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-04-28-02-35-32_wwi1s3.png)

![Mobile navigation bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351600/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-04-28-02-36-47_wjvx5o.png)

That's all for our navigation bar! 

## Hero Section

Next, let write our hero. This time we'll use a `section` tag as the container since we are defining a group of related content. 

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Pixel Perfect Layout</title>
  </head>
  <body>
   <header></header>
   <section class="hero">
      <img class="hero__video" src="assets/video.png" />
      <header class="hero__heading">
        <div class="hero__text-box">
          <h1 class="heading-primary">Work around you and your team</h1>
          <p class="hero__text text">
            From ads that dance or sing to MTV-like commercials, online
            advertisers are now using a new type of technology “rich media” to
            attract consumers.
          </p>
          <button class="hero__button btn btn--purple">get started</button>
        </div>
        <div class="hero__loader">
          <p>01</p>
          <progress value="40" max="100"></progress>
          <p>03</p>
        </div>
      </header>
      <img class="hero__image" src="assets/groove.png" />
    </section>
  </body>
</html>
```

You may see we are using header inside a section. It is perfectly normal to do this since it indicates that it is the introductory element of that section. Looking back at our navigation bar, it is the introductory element for our document or website. 

We'll have something like this. Although semantic and accessible, it lacks beauty and responsiveness.

![Hero section with no CSS applied](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351627/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-05-01-39-06_dnvzht.png)

Styling our hero has a higher complexity than our navigation since it has more elements and blocks. Regardless, using our model we can achieve the pixel-perfect look we want. 

It is important to take things one step at a time looking at each CSS purpose of our model. Likewise, some of the code will be trial and error; it is perfectly fine to do this as long as it gets to look as our intended design.

![Layout model of hero section](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351662/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-05-01-45-12_qulkf4.png)

```css
/* ... */ 

/* SECTION */
.hero {
  display: flex;

  max-width: 1440px;
  margin: 0 auto;

  /*
    Since we have an unnatural block on this section
    we have to make our section relative for it to act
    as an anchor.
  */
  position: relative;
}

@media only screen and (max-width: 48em) {
  .hero {
    flex-direction: column;
  }
}

/* UNNATURAL */
.hero__video {
  position: absolute;

  top: 50%;
  left: 60%;
  transform: translate(-60%, 0);

  object-fit: contain;
  
  box-shadow: -20px 60px 120px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 90em) {
  .hero__video {
    width: 30vw;
  }
}

@media only screen and (max-width: 48em) {
  .hero__video {
    top: initial;

    bottom: -2%;
    left: 50%;

    transform: translate(-50%, 0);
  }
}

@media only screen and (max-width: 40em) {
  .hero__video {
    width: 30rem;
  }
}

/* BLOCK */
.hero__heading {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-around;

  padding: 3rem 9rem;
}

@media only screen and (max-width: 40em) {
  .hero__heading {
    padding: 3rem 4rem;
  }
}

/* BLOCK */
.hero__text-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.hero__text {
  max-width: 450px;
}

.hero__text-box > *:not(:last-child) {
  margin-bottom: 5rem;
}

.hero__button {
  align-self: start;
  margin-top: 2rem;
}

/* ELEMENT */
.hero__image {
  width: 50%;
  object-fit: contain;
}

@media only screen and (max-width: 48em) {
  .hero__image {
    width: 100%;
    height: 50rem;
    object-fit: fill;
    padding: 2rem 9rem;
  }
}

@media only screen and (max-width: 40em) {
  .hero__image {
    padding: 2rem 4rem;
  }
}

/* BLOCK */
.hero__loader {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 4rem;
}

.hero__loader > *:not(:last-child) {
  margin-right: 2rem;
}

/* ELEMENT */
.hero__loader p {
  font-size: 1.6rem;
}

/* ELEMENT */
.hero__loader progress {
  width: 20rem;
  height: 0.3rem;
}

.hero__loader progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Get rid of default border in Firefox. */
  border: none;
}

.hero__loader progress[value]::-webkit-progress-bar {
  background-color: #d7d4d4;
}

.hero__loader progress[value]::-webkit-progress-value {
  background: #c6b393;
}

/* Firefox */
.hero__loader progress[value]::-moz-progress-bar {
  background: #c6b393;
}

/* COMPONENTS */

.heading-primary {
  font-size: 6rem;

  color: #151515;
}

.text {
  font-size: 1.8rem;
  line-height: 28px;

  color: #222222;

  opacity: 0.7;
}

.btn {
  padding: 1.5rem 3rem;

  font-family: inherit;
  text-transform: uppercase;

  letter-spacing: 2px;
  font-weight: 500;

  border: none;
  cursor: pointer;
}

.btn--purple {
  background-color: #4737ff;
  color: white;
}
```

Now we have this!! 

![Final website looking exactly like mockup](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351708/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-12-03-17-16_1_c4apqb.png)

And on mobile: 

> Note: The mockup didn't have a mobile version, regardless, this is a little extra. 

![Mobile version of final design](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1589351757/create-accessible-responsive-pixel-perfect-websites/Clipboard_2020-05-11-03-22-15_1_qjoj6w.png)

Here is the sandbox if you want to play around with the website.

<iframe
     src="https://codesandbox.io/embed/jolly-wing-5wo09?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="create-pixel-perfect-layout"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

## Conlusion

Creating pixel-perfect layouts is very important for web developers since most websites have a mockup behind them. With layout models and semantic HTML, we can create almost any website with high fidelity while taking care of accessibility and responsiveness. 

Thanks for reading this series on how to create Pixel Perfect Layouts 🥳! Feel free to check out the other parts. Follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! See you soon 🔥💻

Use semantic HTML and CSS to create an accessible and pixel perfect website.

Creating an Accessible, Responsive Pixel Perfect Website

In my [last post](https://jfelix.info/blog/how-to-create-pixel-perfect-layouts), we learned how to create layout models which aid developers in creating pixel-perfect websites. However, there is a prerequisite before one begins translating this model to HTML and CSS: Semantic HTML.  

## What

Semantic HTML helps the developer and the browser in creating great development and accessible experience. According to [W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp), a semantic element clearly describes its meaning to both the browser and the developer. 

## Why

One of its main benefits, and probably the most important, is it helps to make a website accessible. Screen readers, or any assistive device scan the web page for any elements which give meaning such as a `<p></p>` to understand that it is a paragraph or `<header></header>` to know it is a heading. 

Accessible sites deliver content to all types of users which is the main objective of any website and web developer. Not only this, but it brings great results such as avoiding a lawsuit ([news article](https://www.cnbc.com/2019/10/07/dominos-supreme-court.html)), better SEO, and discovery of usability problems that would have otherwise not be found. Therefore, even though it requires more work and dedication to develop, it is well worth the extra time.

Do not forget that apart from semantic HTML there are many other aspects of making a website accessible such as alt in images, aria labels, and the use of correct color contrast. Check this [evaluation tool](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) that will help you in creating an accessible experience on your projects.

Other benefits semantic HTML provides: 

1. **Easier development experience**. It is easier for the developer to understand that `<button></button>` is meant to trigger some event rather than `<div></div>` with an event listener.
2. **Better for mobile devices**. According to [Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML), semantic HTML is lighter in file size than non-semantic spaghetti code. Also, it is easier to make responsive. 
3. **Good for SEO**. Search engines give more importance to keywords inside links, headings, or footers than those included in simple `div`s or `span`s. This means that our website will be more discoverable by clients. 

## How

Now that we know that Semantic HTML is extremely important, we have to learn how to apply it in old and new projects. There are a total of 13 semantic tags, however, the most used are `article`, `aside`, `footer`, `header`, `nav`, and `section`. Up next is a cheat sheet that will help you when developing a semantic website. Likewise, I invite you to check the others in this [W3Schools article](https://www.w3schools.com/html/html5_semantic_elements.asp).

![Semantic elements with description, and website example using these.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588487285/semantic-html-what-how-why/Clipboard_2020-04-27-01-57-36_ntjtvc.png)

Once you learn and practice these tags, in the future it will be a lot easier to code semantic sites, and you'll see that knowing them sets you apart from many developers.

## Examples

This is an example of what we should **not** do:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />   
    <title>Non-Semantic HTML</title>
  </head>
  <body>
    <div class="navigation">
      <span>Logo<span>        
      <div aria-label="menu" class="navigation__button" />
      <div class="navigation__links">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </div>
    </div>
    <div class="hero">
      <img class="hero__video" alt="Promotion video" src="assets/video.png" />
      <div class="hero__left">
        <div class="hero__text-box">
          <h1 class="heading-primary">Work around you and your team</h1>
          <h3 class="text">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
          </h3>
          <div class="btn btn--purple">get started</div>
        </div>        
      </div>
      <img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
    </div>    
  </body>
</html>
```

This is extremely hard for developers to understand and maintain in the long term; imagine seeing hundreds of tags like this. If we did not have the classes written we would need to constantly be inspecting each element and learning what it is on the site. Likewise, screen readers, and browsers will struggle to parse this which can reduce our SEO and reach. 

Now, if we were to convert this to semantic HTML, it would look like this: 

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <title>Pixel Perfect Layout</title>
  </head>
  <body>
    <header class="navigation">
      <h1>Logo<h1>     
      <button aria-label="menu" class="navigation__button"/>     
      <nav class="navigation__links">
        
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        <ul>
      </nav>
    </header>
    <section class="hero">
      <img class="hero__video" alt="Promotion video" src="assets/video.png" />
      <div class="hero__left">
        <header class="hero__text-box">
          <h1 class="heading-primary">Work around you and your team</h1>
          <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus lacus ac justo mollis hendrerit. Nulla justo diam, efficitur eu dolor non, mollis semper urna.
          </p>
          <button class="btn btn--purple">get started</button>
        </header>      
      </div>
      <img class="hero__image" alt="Colorful waves" src="assets/groove.png" />
    </section>
  </body>
</html>
```

We may see our new code is really easy to read for developers. Also, browsers and screen readers will be able to parse it efficiently. 

## Conclusion

Semantic HTML has many important benefits for users, developers, and browsers. It must be a staple practice for us, web developers, to write accessible and efficient HTML. Not only do developers receive greater readability, but it also improves the experience of users which is the most important objective of any website.

Now that we know how to create layout models and semantic HTML, we can start creating amazing layouts. In the last part of this series, we will translate a sleek design to responsive and efficient HTML and CSS. See you soon! 🔥

Learn why semantic HTML is important for creating accessible and pixel perfect websites.

Semantic HTML. What, Why, and How

Creating a website requires using some form of design as a reference. It could be in our heads, in a mock-up or design tool. Our objective as developers is to translate this blueprint efficiently to HTML/CSS while taking into account responsiveness and accessibility. This is no easy task since there is a myriad of ways one could code a layout. One way to achieve responsively, pixel perfect websites is creating a layout model separating website items into sections, blocks, and elements.

This will be a three-part series. This first part will focus on how to create a layout model; the second on what is semantic HTML and its benefits; the last on how to create the layout with semantic HTML and CSS.

Without further ado, let's start!

## Definition

Before I translate any design to code, I start to divide the page into sections, blocks, and elements. I define each of these as: 

* **Element.** Is any tag or tags that stand as a unit. These are commonly a text, icon, link, or image. 
* **Block.** Is a container of one or multiple elements or blocks. It lacks logical meaning. Their main purpose is to organize elements through CSS properties such as `flex` and `grid`. Its main HTML tag is the `div`.
* **Section.** Is a container of one or multiple blocks and has a logical meaning. There are many HTML elements that can represent this such as `section`, `article`, or `header`.

## What We Will Analyze

Let's look at the next design. Credits to [Bakhtiyar Sattarov](https://www.figmafreebies.com/download/gravity-agency-portfolio-template/).  

![Landing page with hero and navigation bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140214/how-to-create-perfect-layouts/Clipboard_2020-04-23-02-05-32_1_k9krib.png)

Before we start to create our model, take into account that our main objective for creating a layout is to 

**Get the most efficient layout of sections, blocks, and elements possible. Not necessarily the least amount, but the one that allows a seamless responsive and accessible solution.**

## Creating a Layout Model

When creating a model, I like to identify sections first. One easy way to achieve this is to sort by its logical meaning within the site. In this case, we can see that we have items that could lead the user to other routes within the site, meaning it is a navigation bar. On the other hand, there's also a hero because it is the main attraction of the website. It brings the user to keep exploring and read what our content is about. Therefore we have two sections: a navigation bar and a Hero.

![Landing page with divided sections: hero and navigation bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140335/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-06-28_gmjejk.png)

Once we have defined the sections, we proceed to identify the block or blocks that our sections will contain. To accomplish this we have to distinguish first its elements. 

Recognizing an element is very straightforward since we have to look for any item that is a unit like text, icon, logo, label, or image. 

![Landing page with selected sections and elements](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140382/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-15-48_ltl1ma.png)

Now that we have identified the elements all that's left is to define our blocks. Blocks are identified by determining what I call their CSS purpose or how they organize a group of elements. This organization could be of three types: **flex**, **grid**, or **unnatural**. 

## Flex Block

Flex is the easiest and most common. It lays objects in two dimensions, either in columns or rows. Likewise, elements can be centered and given some unified spacing like space-between, and space-around. Read more on [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

> Tip: When you see a group of elements with space between each other and they are either in a **column** or **row**, consider it a block that can use flex.

![Flex elements in a row](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140458/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-40-11_hwyhdz.png)

![Flex elements in a column](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140513/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-41-11_dat3qm.png)

## Grid Block

Grid is very straightforward to understand but hard to implement. It lays objects tridimensionally, the same as a matrix. This layout is especially good for galleries. Do note that you can implement the same layout in grid and flex but it will end up less compatible with browsers and sometimes harder to implement. 

![Grid of elements](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140577/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-46-17_y1npqh.png)

> Tip: When you see a group of items organized in the form of a **matrix**, contemplate utilizing the grid. 

## Unnatural block

Finally, the unnatural block type is an item that uses an absolute, sticky, or fixed positioning. Normally it is anchored to the section (giving the relative position to section tag). They are easily discovered by noticing their awkward but perfect position.   

![Landing page pointing to block in the middle of the screen](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140633/how-to-create-perfect-layouts/Clipboard_2020-04-25-01-55-04_z6d2v6.png)

## Getting It Together

Now, that we have this information we can start identifying each block.  

![Complete layout model with elements, blocks, and sections](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1588140718/how-to-create-perfect-layouts/Clipboard_2020-04-26-02-55-43_bmmxu2.png)

That's it! Once we have structured the page elements like this, you can translate it easily to semantic HTML and subsequently to CSS. 

## Conclusion

Creating a model is very important when we want to create an accessible and responsive website. It allows the developer to translate any design to HTML and CSS with ease. 

This technique may seem daunting at first, however, with time you will be able to come up with these models quickly in your mind. It will seem as if you are laying blocks in a paper. 

What do you think of this technique? Leave your comments below. See you soon in part two 👍💻

Approaches to create a perfect layout that will let the developer translate his design to responsive and accessible code.

How To Create Pixel Perfect Layout Models

Create a markdown blog with Next.js and Tailwind.css.

How to Make a Markdown Blog With Next.js

This post is a continuation of [my previous post](https://jfelix.info/blog/why-use-bottom-navigation-in-mobile-websites) about the reasons why we, developers, should implement a friendly navigation experience for mobile users.

In this post we will be learning how to build mobile-friendly navigation, applying what we learned.

I'll be using [React.js](https://reactjs.org/) since it is a popular and easy to use library. I will make it as straightforward as possible so you can use it in your favorite framework or vanilla.

The next initial steps consist of creating a new React project with Create React App. You can skip this if you already know how to or you can use a [sandbox template](https://codesandbox.io/s/mobile-navigation-ti0xc). [Skip the setup](#creating-the-navbar).

## Creating our workspace

To start immediately and without hassle let's create a [Create React App](https://create-react-app.dev/docs/getting-started/) using its CLI:

```javascript
npx create-react-app mobile-navigation
```

Now, go to our newly created React build:

```javascript
cd mobile-navigation
```

Next, let's install [Styled Components](https://styled-components.com/) to style our components directly in the file. Don't feel pressured to use styled-components; you can use your preferred styling solution.

```javascript
// npm
npm install --save styled-components

//yarn
yarn add styled-components
```

Finally, let's start our project:

```javascript
yarn start
```

you should see something like this:

![Initial React screen](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1586898180/mobile-friendly-navigation/Clipboard_2020-04-06-19-13-50_vgycpn.png)

### Great!! now we can start working with our app

## Setting up our development environment

First, we will delete these files which are irrelevant for our project: `index.css`, `logo.svg`, `App.css`, `App.test.js`, `setupTests.js`, and `serviceWorker.js`.

Now, let's change `index.js` to this:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

And, `App.js` to this:

```jsx
import React from "react";
import styled, { createGlobalStyle } from "styled-components";

function App() {
  return (
    <Styles.Wrapper>
      <CSSReset />
    </Styles.Wrapper>
  );
}

const Styles = {
  Wrapper: styled.main`
    display: flex;
    background-color: #eeeeee;
    height: 100vh;
  `,
};

const CSSReset = createGlobalStyle`
  *,
  *::before, 
  *::after {
    margin: 0; 
    padding: 0;
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%; /*1rem = 10px*/
    box-sizing: border-box;    
  }  

  body {
    font-size: 1.4rem;
    font-family: sans-serif;  
  }
`;

export default App;
```

Here we deleted the initial content and created a global style that normalizes our CSS (make browsers render all elements consistently and in line with current standards) and a wrapper for our future navbar.

## <a name="creating-the-navbar"></a> Creating the Navbar

Since that we have set up our development environment we can finally start creating our navbar.

Let's say we are creating a navbar for a blog website. It will have 3 main routes: Home, Blog, and About.

First, let's create its HTML:

```jsx
// ...

function App() {
  return (
    <Styles.Wrapper>
      <CSSReset />

      <Navbar.Wrapper>
        <Navbar.Logo>Logo</Navbar.Logo>
        <Navbar.Items>
          <Navbar.Item>Home</Navbar.Item>
          <Navbar.Item>Blog</Navbar.Item>
          <Navbar.Item>About</Navbar.Item>
        </Navbar.Items>
      </Navbar.Wrapper>
    </Styles.Wrapper>
  );
}

// ...

const Navbar = {
  Wrapper: styled.nav``,
  Items: styled.ul``,
  Item: styled.li``,
};

// ...
```

And some basic styling:

```jsx
// ...

const Navbar = {
  Wrapper: styled.nav`
    flex: 1;

    align-self: flex-start;

    padding: 1rem 3rem;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: white;
  `,
  Logo: styled.h1`
    border: 1px solid gray;
    padding: 0.5rem 1rem;
  `,
  Items: styled.ul`
    display: flex;
    list-style: none;
  `,
  Item: styled.li`
    padding: 0 1rem;
    cursor: pointer;
  `,
};

// ...
```

We now have something like this:

![Normal navbar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1586898125/mobile-friendly-navigation/Clipboard_2020-04-08-02-10-15_o0hvlj.png)

## Making it responsive

To create a mobile-friendly responsive experience we will have to move the navbar to the bottom of the screen so it can be easily reachable with the thumbs. We can go three ways about this:

1. Create a normal tab bar with conditional rendering.
2. Move the navbar to the bottom and hide all items in a hamburger button.
3. Create a hybrid between 1 and 2.

All approaches favor thumb-driven design. Choosing one depends on what situation you are in. Choose 1, if you don't have many items and have the liberty of using a framework, or library. Choose 2, if you are creating a pure vanilla site, and have too many items to put in a tab bar. (caveat: since all elements are hidden users most likely won't find relevant routes). Finally, choose 3, if you have a lot of navigation elements and need some of the most important ones visible to the users.

For the sake of the tutorial, I will recreate the first two approaches (skipping third because we don't have that many navigation elements, however by reading the two approaches, you can mix them and come up with it).

* [First approach](#first-approach)
* [Second approach](#second-approach)

## <a name="first-approach"></a> First Approach: Creating a Normal Tab Bar

To get started with this approach we need to detect the current width of the screen so we can render the tab bar whenever we are on mobile. To do this we can use `window.innerWidth`, however, since we want to mimic CSS, which changes anytime the user resizes, we need to create an event listener which watches for the resize event:

```jsx
// App.js

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

// ...

function App() {
  const [windowDimension, setWindowDimension] = useState(null);

  useEffect(() => {
    setWindowDimension(window.innerWidth);
  }, []);

  useEffect(() => {
    function handleResize() {
      setWindowDimension(window.innerWidth);
    }

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

  const isMobile = windowDimension <= 640;

 // ...
```

> In production, debouncing the `handleResize` would be a good idea.

Now that we know when the user is on mobile, we can move to create the skeleton of the mobile nav:

```jsx
// ...

function App() {
  // ...

  return (
    <Styles.Wrapper>
      <CSSReset />

      {isMobile ? (
        <MobileNavbar.Wrapper>
          <MobileNavbar.Items>
            <MobileNavbar.Item>Home</MobileNavbar.Item>
            <MobileNavbar.Item>Blog</MobileNavbar.Item>
            <MobileNavbar.Item>About</MobileNavbar.Item>
          </MobileNavbar.Items>
        </MobileNavbar.Wrapper>
      ) : (
        <Navbar.Wrapper>
          <Navbar.Logo>Logo</Navbar.Logo>
          <Navbar.Items>
            <Navbar.Item>Home</Navbar.Item>
            <Navbar.Item>Blog</Navbar.Item>
            <Navbar.Item>About</Navbar.Item>
          </Navbar.Items>
        </Navbar.Wrapper>
      )}
    </Styles.Wrapper>
  );
}

// ...

const MobileNavbar = {
  Wrapper: styled(Navbar.Wrapper)``,
  Items: styled(Navbar.Items)``,
  Item: styled(Navbar.Item)``,
};

// ...
```

By reusing some of the styles from our Navbar we can save up some redundant CSS. Let's style the mobile navigation to fit our needs:

```jsx
// ...

const MobileNavbar = {
  Wrapper: styled(Navbar.Wrapper)`
    position: fixed;
    width: 100vw;
    bottom: 0;

    justify-content: center;
  `,
  Items: styled(Navbar.Items)`
    flex: 1;
    padding: 0 2rem;

    justify-content: space-around;
  `,
  Item: styled(Navbar.Item)``,
};

// ...
```

When we resize we should see our new navigation bar.

![Tab bar](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1586898125/mobile-friendly-navigation/Clipboard_2020-04-10-03-30-56_otipgb.png)

Congratulations! We've created mobile-friendly navigation.

### Bonus!

To make it more like a mobile navbar we could add some SVG icons. Add the next dependency.

```javascript
  yarn add react-feather
```

Let's import our icons and create a wrapper for it:

```jsx
// ...
import { Home, Bookmark, User } from "react-feather";

function App() {
  // ...

  return (
    <Styles.Wrapper>
      <CSSReset />

      {isMobile ? (
        <MobileNavbar.Wrapper>
          <MobileNavbar.Items>
            <MobileNavbar.Item>
              <MobileNavbar.Icon>
                <Home size={16} />
              </MobileNavbar.Icon>
              Home
            </MobileNavbar.Item>
            <MobileNavbar.Item>
              <MobileNavbar.Icon>
                <Bookmark size={16} />
              </MobileNavbar.Icon>
              Blog
            </MobileNavbar.Item>
            <MobileNavbar.Item>
              <MobileNavbar.Icon>
                <User size={16} />
              </MobileNavbar.Icon>
              About
            </MobileNavbar.Item>
          </MobileNavbar.Items>
        </MobileNavbar.Wrapper>
      ) : (
        <Navbar.Wrapper>
          <Navbar.Logo>Logo</Navbar.Logo>
          <Navbar.Items>
            <Navbar.Item>Home</Navbar.Item>
            <Navbar.Item>Blog</Navbar.Item>
            <Navbar.Item>About</Navbar.Item>
          </Navbar.Items>
        </Navbar.Wrapper>
      )}
    </Styles.Wrapper>
  );
}

// ...

const MobileNavbar = {
  Wrapper: styled(Navbar.Wrapper)``,
  Items: styled(Navbar.Items)``,
  Item: styled(Navbar.Item)``,
  Icon: styled.span``,
};

// ...
```

Finally, add some styles:

```jsx
// ...

const MobileNavbar = {
  Wrapper: styled(Navbar.Wrapper)`
    align-self: flex-end;

    justify-content: center;
  `,
  Items: styled(Navbar.Items)`
    flex: 1;
    padding: 0 2rem;

    justify-content: space-around;
  `,
  Item: styled(Navbar.Item)`
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 1.2rem;
  `,
  Icon: styled.span``,
};

// ...
```

![Tab bar with svg icons](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1586898125/mobile-friendly-navigation/Clipboard_2020-04-10-03-48-05_nflige.png)

And that's it! we have our new tab bar which is closer to what we are used to seeing in mobile apps.

### This is our final product:

<iframe
     src="https://codesandbox.io/embed/blog-mobile-sandbox-approach-1-4j6dp?fontsize=14&hidenavigation=1&theme=dark&previewwindow=split&codemirror=1"
     style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
     title="blog-mobile-sandbox-approach-2"
     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
   ></iframe>

## <a name="second-approach"></a> Second Approach: Creating navigation with Hamburger Button

To get started with this approach we must move the navbar to the button. With media queries we can accomplish this quickly:

```javascript
const Navbar = {
  Wrapper: styled.nav`
    flex: 1;

    align-self: flex-start;

    padding: 1rem 3rem;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: white;

    // 40em == 640px
    @media only screen and (max-width: 40em) {
      position: fixed;
      width: 100vw;
      bottom: 0;
    }
  `,
  // ...
};
```

Let's create our hamburger button. First, it's HTML:

```jsx
// ...

function App() {
  return (
    <Styles.Wrapper>
      <CSSReset />

      <Navbar.Wrapper>
        <Navbar.Logo>Logo</Navbar.Logo>

        <HamburgerButton.Wrapper>
          <HamburgerButton.Lines />
        </HamburgerButton.Wrapper>

        <Navbar.Items>
          <Navbar.Item>Home</Navbar.Item>
          <Navbar.Item>Blog</Navbar.Item>
          <Navbar.Item>About</Navbar.Item>
        </Navbar.Items>
      </Navbar.Wrapper>
    </Styles.Wrapper>
  );
}

// ...

const HamburgerButton = {
  Wrapper: styled.div``,
  Button: styled.div``,
};

// ...
```

And, its styles:

```jsx
// ...

const HamburgerButton = {
  Wrapper: styled.button`
    height: 3rem;
    width: 3rem;
    position: relative;
    font-size: 12px;

    display: none;

    @media only screen and (max-width: 40em) {
      display: block;
    }

    /* Remove default button styles */
    border: none;
    background: transparent;
    outline: none;

    cursor: pointer;

    &:after {
      content: "";
      display: block;
      position: absolute;
      height: 150%;
      width: 150%;
      top: -25%;
      left: -25%;
    }
  `,
  Lines: styled.div`
    top: 50%;
    margin-top: -0.125em;

    &,
    &:after,
    &:before {
      height: 2px;
      pointer-events: none;
      display: block;
      content: "";
      width: 100%;
      background-color: black;
      position: absolute;
    }

    &:after {
      /* Move bottom line below center line */
      top: -0.8rem;
    }

    &:before {
      /* Move top line on top of center line */
      top: 0.8rem;
    }
  `,
};

// ...
```

Furthermore, let's convert our items into a drawer:

```javascript
// ...

const Navbar = {
  // ...

  Items: styled.ul`
    display: flex;
    list-style: none;

    @media only screen and (max-width: 40em) {
      position: fixed;
      right: 0;
      top: 0;

      height: 100%;

      flex-direction: column;

      background-color: white;
      padding: 1rem 2rem;

      transition: 0.2s ease-out;

      transform: translateX(100%);
    }
  `,
  Item: styled.li`
    padding: 0 1rem;
    cursor: pointer;

    @media only screen and (max-width: 40em) {
      padding: 1rem 0;
    }
  `,
};

// ...
```

Now all that's left is add our logic to open and close our drawer. One thing to look out here is if we add a normal toggle, then, when we open the drawer, we won't be able to close it. One option would be to add a close button, however, since this drawer's width is not the whole screen, the user would expect to be able to close it by clicking outside the drawer. So, we will add a listener that detects outside clicks:

```jsx
import React, { useState, useEffect } from "react";

// ...

function App() {
  const [openDrawer, toggleDrawer] = useState(false);
  const drawerRef = useRef(null);

  useEffect(() => {
    /* Close the drawer when the user clicks outside of it */
    const closeDrawer = (event) => {
      if (drawerRef.current && drawerRef.current.contains(event.target)) {
        return;
      }

      toggleDrawer(false);
    };

    document.addEventListener("mousedown", closeDrawer);
    return () => document.removeEventListener("mousedown", closeDrawer);
  }, []);

  return (
    <Styles.Wrapper>
      <CSSReset />

      <Navbar.Wrapper>
        <Navbar.Logo>Logo</Navbar.Logo>

        <HamburgerButton.Wrapper onClick={toggle}>
          <HamburgerButton.Lines />
        </HamburgerButton.Wrapper>

        <Navbar.Items ref={drawerRef} openDrawer={openDrawer}>
          <Navbar.Item>Home</Navbar.Item>
          <Navbar.Item>Blog</Navbar.Item>
          <Navbar.Item>About</Navbar.Item>
        </Navbar.Items>
      </Navbar.Wrapper>
    </Styles.Wrapper>
  );
}

// ...

const Navbar = {
  // ...

  Items: styled.ul`
    display: flex;
    list-style: none;

    @media only screen and (max-width: 40em) {
      position: fixed;
      right: 0;
      top: 0;

      height: 100%;

      flex-direction: column;

      background-color: white;
      padding: 1rem 2rem;

      transform: ${({ openDrawer }) =>
        openDrawer ? `translateX(0)` : `translateX(100%)`};
    }
  `,

  // ...
};
```

![Hamburger navigation](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1586898405/mobile-friendly-navigation/Screenshot_from_2020-04-14_17-06-10_xdqeao.png)

Congratulations!! We have our drawer with all our items, now we can rest assured the mobile user will have a better time navigating our site.

### This is our final product:

<iframe
     src="https://codesandbox.io/embed/blog-mobile-sandbox-approach-2-mzomg?fontsize=14&hidenavigation=1&theme=dark&hidenavigation=1&codemirror=1&hidedevtools=1&previewwindow=split"
     style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;"
     title="blog-mobile-sandbox-approach-2"
     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
   ></iframe>

## Conclusion

Learning how to create friendly mobile navigation on the browser is really important especially with the growing use of mobile phones. Applying this in production means our users will have a pleasant experience on our website, thus leading to a larger conversion rate.

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Approaches to create a friendly navigation in mobile phones.

Create a mobile friendly navigation with React


Have you ever had a hard time reaching the hamburger button or any kind of button located in the top part of a website? If so, you are not alone. Lately, I've come to expect navigation and main actions at the bottom in all mobile apps or websites since it is so comfortable to use, inspiring me to use it more frequently.

# The Problem

Web developers creating a responsive mobile experience on the web opt to hide all navigation elements within a hamburger button. However, since smartphone's screens are getting bigger by the year and if we consider [Fitts's Law](https://lawsofux.com/fittss-law), it ends up being not favorable for the end-user as it requires a higher [interaction cost](https://www.nngroup.com/articles/interaction-cost-definition/), making it harder to use the app. 

Most users use their  [thumbs](https://alistapart.com/article/how-we-hold-our-gadgets/) to navigate these large screens. Consider this figure is taken from this [article](https://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/) which describes the thumb placement areas which are easy-to-reach and hard-to-reach.

![Thumb placement areas](https://dev-to-uploads.s3.amazonaws.com/i/v0sij74kxh2a6u3d0wj5.png)

Since hamburger buttons are located at the top of the screen, these buttons and other CTAs end up being too hard to reach, discouraging interactions from the user.

# The Solution

Mobile developers, following this idea of thumb placement areas, favor the use of a [tab bar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/) since it allows users to have a more comfortable experience reaching the different navigation routes within the app.

Not only a developer must consider the bottom of the screen as a navigation bar or tab bar. He can also use it to display main CTA within the app. Because of this, apps like Uber, Amazon Alexa, Instagram, and Dev.to (PWA) have implemented bottom navigations or their main actions reachable within the natural area. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ztslofprk6gzxde0j9tb.jpeg" alt="Dev.to bottom action placement" width=300>

Even though the natural area is easier to reach, it does not mean that the top of the screen should be forgotten and all elements are moved to the bottom. This would create clutter, and based on the [Hicks's Law](https://lawsofux.com/hicks-law.html) increase the user's cognitive load, discouraging the app's use. Instead, developers should add substantial actions or main navigation routes in a tab bar within the natural area and other secondary actions at the top of the screen. 

As for the hamburger button, it is still useful to include at the top of the screen with secondary links; so, if the user needs extra information, he has the option to. This hybrid approach is a good idea especially for websites since they normally possess an extensive amount of links. Instagram does this on its profile page.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/1xly56af2uvc0674ha7u.png" alt="Hamburger button/tab bar hybrid instagram implementation" width=300>

# Conclusion

Creating a comfortable mobile experience is extremely important in keeping users within your app. By adding your most important actions and navigations links at the bottom of the screen, you will increase the user experience by a lot especially since smartphones are increasingly getting bigger. However, it is important to not add all actions since this can increase the cognitive load of the user. Finally, a hamburger button/tab bar hybrid approach is effective on web applications and websites. 

My next article will feature a way for you to implement this approach in your projects. Follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎 

Edit: [Click here for a tutorial on how to create a mobile friendly navigation on react.](https://jfelix.info/blog/create-a-mobile-friendly-navigation-with-react)


Reasons why developers must opt to use mobile friendly navigation on websites.

Why Use Bottom Navigation in Mobile Websites


Given how fast tech is developed and released, Developers sooner or later stumble on the inevitable thought that he or she may become obsolete. Since my main expertise is front-end development, I've had this thought every time a framework or a library is released which seemed to revolutionize the industry in some way or another (I'm looking at you svelte). However, I realized that acquiring these habits help me ease my foreboding, deepen my understanding, and come out with efficient and interesting solutions to problems. 

## Daily Routine

My first habit (and most important) is to check [GitHub's trending tab](https://github.com/trending) daily. It is amazing how many amusing and fun libraries, boilerplates, and contribution opportunities you can find here. You can just sort by your favorite programming language and even your spoken language, so you can see what is relevant to your ecosystem. Some recommendations for Web Developers is to check both Javascript and Typescript filter since both can feature excellent discoveries. Some examples I've found, which I use and plan on using on personal and professional projects, are  [React Hook Form](https://react-hook-form.com/), [React Content Loader](https://github.com/danilowoz/react-content-loader) and [Zdog](https://zzz.dog/). Additionally, GitHub recently added [email updates](https://github.com/explore/email) which send you an email daily, weekly, or monthly on trending and interesting repositories. 

Another part of my daily routine is checking [dev.to](http://dev.to) articles. I can't help but appreciate how much of a good job have the Dev.to team done to allow us to have a centralized developer community for us to share our favorite discoveries and teach others with it. I remember the days of getting frustrated with Medium articles behind a paywall — now I just avoid it all together except when I'm interested in an article and it's free. 

Also, I love to read some blog posts on reputable developers, even though I don't do it daily, such as [Dan Abramov](https://overreacted.io/) and [Kent C. Dodds](https://kentcdodds.com/). If you know any good bloggers please write it in the discussion below — thanks in advance!

## Weekly Routine

For my weekly routine, I check [Product Hunt](https://www.producthunt.com/). Product Hunt is an intuitive site to see the up and coming startups and initiatives. I blame them for filling my Bookmarks on Chrome with so many interesting links, especially in the illustration department. Some cool websites I have found: [Free Illustrations](https://freellustrations.com/), [Free royalty videos](https://mixkit.co/), [Tech trends of 2020] (https://danieleckler.com/2020/?ref=producthunt), and many more.

## Monthly Routine

I begin each month by reading [Andrei Neagoie's newsletter](https://zerotomastery.io/blog/) which lets me keep up with the novelties I couldn't see on GitHub, Product Hunt, etc.

## Conclusion

By applying these habits in my career as a web developer I have been able to come up with interesting solutions to my endeavors. There are many more which I would love to adopt such as listening to podcasts, watching at least one conference, and contribute to OSS weekly. What habits do you possess that have generated an impact on your career?

Habits that make you a better developer everyday.

Habits I've acquired as a developer


"Designed and developed an e-commerce while focusing on search engine optimization, low maintenance cost, and scalability.

The project is built on Gatbsy.js, Typescript, and Snipcart. Snipcart allows for a secure e-commerce experience, and management of products, cart, payment, and shipping.

The most interesting part of this project was using Tailwind. It brings a maintainable and efficient solution to styling by reducing bundle size and making the site faster with reusable classes.",


A freshly made e-commerce

Mixcart

Designed and developed the front-end and back-end for a student dashboard to make the student's life easier.

The hardest challenge was designing an efficient React and Redux architecture. However, by using an elm inspired structure the project is now easy to develop with readable and modular Typescript.

The most interesting part was integrating Firebase Cloud Messaging.

Organize your homework, evaluations, and to-dos with your friends

My Study Planner

Designed and developed a concept website to showcase the development of a potential start-up website.

The project is a front-end and back-end monolith based on Typescript.

The user interface is powered by React, Redux, and Styled Components.

The back-end is mainly Express with Bulletproof Architecture which increases the project's maintainability and flexibility of development.

A concept social media start-up website app

JetNet


Developed and designed a website to select the best trip with the best price possible.

The most interesting part was integrating WordPress with Elementor to enhance the developer's experience.


A concept travel agency made in WordPress

Tourbound

Designed and developed a coffee shop with love to showcase my skill in translating a design to code.\n\nThe most interesting part was using SASS with BEM notation.

A concept coffee shop made with love

Stella's Coffee Shop

This project displays primarily the consumption of an API with AJAX and displaying its data.

Jose Felix

Front-End Engineer

Blog.

Page Transitions In React

Getting Started with React Animations

Kick-Start Your Newsletter: Mailchimp Custom Form with React

Read all posts

Projects.

Mixcart

My Study Planner

JetNet

Front-End novelty in your inbox

Contact me