Forem: Jim Raptis

Gatsby MDX: Copy code button with confetti effect

Jim Raptis — Mon, 24 Aug 2020 13:10:49 +0000

TL;DR

We'll build a versatile Copy to clipboard button for a Gatsby MDX blog. Because code is boring, we'll add a little bit of flair with a confetti explosion

A quick preview of what we'll build in this tutorial.

Jim Raptis💥

@d__raptis

How I reward engagement on my posts 🎉

MDX and the prism-react-renderer module made my life easier

#reactjs #webdevelopment #100DaysOfCode

14:17 PM - 08 Aug 2020

Before starting, you can check the live example.

Installation

We'll create a new Gatsby project from this starter template that has built-in support for an MDX blog and the prism-react-renderer module.

gatsby new gatsby-starter-blog-mdx https://github.com/hagnerd/gatsby-starter-blog-mdx

Understand the basics of MDX

The entry point for MDX is the MDXProvider component that handles internally the mapping of components to MDX. Also, it has a very important prop.

The components prop is an object that allows you to override the default component for each HTML element (here is a list for them) or even provide your own as shortcodes.

The Gatsby template uses the MDXProvider inside the wrapRootElement browser API.

The wrapRootElement browser API is useful to set up any Provider components that will wrap your application.

Below you see the wrap-root-element.js file that sets up the MDXProvider and overrides the pre element with a custom Code component.

import React from "react"
import { MDXProvider } from "@mdx-js/react"
import { Code } from "./src/components/code"
import { preToCodeBlock } from "mdx-utils"

const components = {
  pre: preProps => {
    const props = preToCodeBlock(preProps)
    if (props) {
      return <Code {...props} />
    } else {
      return <pre {...preProps} />
    }
  },
}
export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

Then, our wrapper is added to both gatsby-browser and gatsby-ssr.js files to render the root element of the Gatsby app.

import { wrapRootElement as wrap } from "./wrap-root-element"

export const wrapRootElement = wrap

Adjust the custom code component

The custom Code component lives in the src/components/code.js file and utilizes the prism-react-renderer. The prism-react-renderer is the perfect way to render some extra UI with your Prismjs-highlighted code.

The library tokenizes code using Prism and provides a small render-props-driven component to quickly render it out into React.

The default code.js is the following:

import React from "react"
import { render } from "react-dom"
import Highlight, { defaultProps } from "prism-react-renderer"
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"

export const Code = ({ codeString, language, ...props }) => {
  if (props["react-live"]) {
    return (
      <LiveProvider code={codeString} noInline={true}>
        <LiveEditor />
        <LiveError />
        <LivePreview />
      </LiveProvider>
    )
  } else {
    return (
      <Highlight {...defaultProps} code={codeString} language={language}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  }
}

The magic happens inside the Highlight component. The pre element renders the code wrapper and the render-prop functions provide the necessary props for each line and token/word.

The copy to clipboard button will live inside the pre element.

Create the copy button

The copy button will be placed at the top right corner of the code section.

To achieve that positioning, we'll set the position of the pre element to relative and add a little bit of padding.

<pre
  className={className}
  style={{
    ...style,
    padding: "2rem",
    position: "relative",
  }}
>
  ...
</pre>

The Button component is a simple button element that is placed with position: absolute:

const Button = props => (
  <button
    style={{
      position: "absolute",
      top: 0,
      right: 0,
      border: "none",
      boxShadow: "none",
      textDecoration: "none",
      margin: "8px",
      padding: "8px 12px",
      background: "#E2E8F022",
      color: "white",
      borderRadius: "8px",
      cursor: "pointer",
      color: "#E2E8F0",
      fontSize: "14px",
      fontFamily: "sans-serif",
      lineHeight: "1",
    }}
    {...props}
  />
)

For a better UX, your users should be informed about the outcome of their actions. So it's a nice extra feature to toggle the button's text once the code is copied.

Then, we have to set a React hook state variable isCopied.

const [isCopied, setIsCopied] = React.useState(false)

The isCopied variable gets true when the user clicks the copy button and resets to false after a specific amount of time (eg. 3 seconds).

<Button
  onClick={() => {
    copyToClipboard(codeString)
    setIsCopied(true)
    setTimeout(() => setIsCopied(false), 3000)
  }}
>
  {isCopied ? "🎉 Copied!" : "Copy"}
</Button>

The copyToClipboard is our core functionality here. I've re-used a function from this article.

const copyToClipboard = str => {
  const el = document.createElement("textarea")
  el.value = str
  el.setAttribute("readonly", "")
  el.style.position = "absolute"
  el.style.left = "-9999px"
  document.body.appendChild(el)
  el.select()
  document.execCommand("copy")
  document.body.removeChild(el)
}

The final code component

By now, we have the custom Code component, the copyToClipboard function, and the Button component. Then, the final code component is the following:

export const Code = ({ codeString, children, language, ...props }) => {
  const [isCopied, setIsCopied] = React.useState(false)

  if (props["react-live"]) {
    return (
      <LiveProvider code={codeString} noInline={true}>
        <LiveEditor />
        <LiveError />
        <LivePreview />
      </LiveProvider>
    )
  } else {
    return (
      <Highlight
        {...defaultProps}
        code={codeString}
        language={language}
        theme={dracula}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre
            className={className}
            style={{
              ...style,
              padding: "2rem",
              position: "relative",
            }}
          >
            <Button
              onClick={() => {
                copyToClipboard(codeString)
                setIsCopied(true)
                setTimeout(() => setIsCopied(false), 3000)
              }}
            >
              {isCopied ? "🎉 Copied!" : "Copy"}
            </Button>

            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })} style={style}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  }
}

The Confetti party

The code works fine. The copy to clipboard functionality is perfect. But we still miss the flair!

There is a known secret in the frontend development community!

Everything is better with a little confetti

It's so useless but we're gonna congratulate our readers with a confetti rain.

To bring this into life, we'll have to install the React dependency react-dom-confetti.

    yarn add react-dom-confetti

The configuration is pretty straightforward. It's just a JSON object with a couple of options:

const config = {
  angle: 90,
  spread: 360,
  startVelocity: 40,
  elementCount: 70,
  dragFriction: 0.12,
  duration: 3000,
  stagger: 3,
  width: "10px",
  height: "10px",
  perspective: "500px",
  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
}

The next step is to add the Confetti component. This component explodes to a confetti rain every time the prop active is true.

Then, we just have to pass the isCopied variable to make it explode in our example. Easy, huh?

<Confetti active={isCopied} config={config} />

To place the Confetti component, we can use the same positioning trick as before. Because we want to fire the explosion in front of the button.

We'll set up a Wrapper component for the Confetti and Highlight components with the CSS attribute position: relative. Then, we'll wrap the Confetti component with the ConfettiWrapper which is placed absolutely at the top right corner.

<Wrapper>
  <Highlight>...</Highlight>

  <ConfettiWrapper>
    <Confetti active={isCopied} config={config} />
  </ConfettiWrapper>
</Wrapper>

And the code for the two wrappers:

const Wrapper = props => <div style={{ position: "relative" }} {...props} />

const ConfettiWrapper = props => (
  <div style={{ position: "absolute", top: 0, right: 0 }} {...props} />
)

That's all folks

Clone the Github repository and don't forget to show me your creation by tagging me, @d__raptis on Twitter 💪

If you liked this post, you can follow me on Twitter where I share daily tips about coding, design and bootstrapping micro-startups.

Build a Landing Page with Chakra UI - Part 1

Jim Raptis — Mon, 10 Aug 2020 08:31:06 +0000

The post was originally posted on my blog

You can subscribe and learn more about my posts here

TL;DR

I'll teach you how to build a responsive landing page in React using the Chakra UI design system. This is the first part and we'll set up our landing page and build the hero section.

Jim Raptis💥

@d__raptis

🆕 Build a responsive landing page with @chakra_ui in #react

I'm preparing a blog post series about building from scratch a basic landing page using only the Chakra UI library

👇 Subscribe to my newsletter to notify you 👇

raptis.wtf

08:55 AM - 31 Jul 2020

Installation

We'll create a new project using create-react-app and name it landing-page.

npx create-react-app landing-page
cd demo-app

Next, we'll install the Chakra UI library and its dependencies.

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

For setting up the Chakra UI with React will need its ThemeProvider and optionally a custom theme. You can check my previous article about the installation.

Define the folder structure

There is a huge discussion on the ideal React folder structure. I believe there is no perfect folder structure, you just pick a clear structure that fits your goals and it's comprehensible.

I apply the KISS principle ("Keep It Simple, Stupid") for the folder structure. It consists of three core directories pages, components, and utils.

├─ public
├─ src
    └─ components
        └─ layouts
        └─ sections
        └─ ui
    └─ utils
    └─ App.js
    └─ index.js

Components folder

The components folder has three sub-directories:

The sections folder with all the sections (eg. Hero, Header, Footer)
The layouts folder that includes the layout for our main pages (eg. LandingLayout, AuthLayout)
The ui folder with all the smaller components that have no business logic or side effects (eg. Logo, Button)

Pages folder

In the pages folder, you can place all the pages of our landing page, e.g. Home, About, SignUp, Login, and so on.

Each page renders a layout and consists of many sections. Every section component takes as props its main variables (text, images, links), so it's super easy to customize your pages.

Utils folder

The utils folder includes all the function helpers (eg. our custom theme).

A rule of thumb is to create a helper function when you need specific functionalities in more than one place.

Setup App component

Routing is optional for our tutorial since it will be a single page landing page. However most real-life landing pages have multiple pages, so I set up it here to save you some time.

The App component will handle the routing of our app. Of course, we'll go with the state-of-the-art library react-router-dom library.

You can install it by typing the following command:

yarn add react-router-dom

Routing is optional for our tutorial since it will be a single page landing page. However most real-life landing pages have multiple pages, so I set it up here to make your life easier.

Our setup will be simple. If you need to learn more advanced details you can check the official docs

We must wrap our application with the BrowserRouter component that keeps the UI in sync with the URL. The BrowserRouter is recommended over the plain Router because it handles the history object internally.

Then, we define our Route components (only / for our example) and wrap them with the Switch component.

The Switch component selects the route that matches the current location and returns only one component.

import React from "react"
import { BrowserRouter, Switch, Route } from "react-router-dom"

import Landing from "./pages/Landing"

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/">
          <Landing />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

Create the layout

Now it's time to create the LandingLayout.js file and place it into the /components/layouts folder.

This component will always render the header, the footer, and any components that are passed as children.

To achieve the vertical layout of a landing page we have to add the Flex Chakra UI component. It renders as a classic div element with display: flex. The Flex component has some helpful shorthand props:

flexDirection is direction
flexWrap is wrap
alignItems is align
justifyContent is justify

So, the initial LandingLayout component is a column centered flexbox that renders the Header component and all of its children. To center the layout and make it responsive, we add the margin: 0 auto CSS style and set the max-width: 1200px for large displays.

There two ways in Chakra UI to define responsive styles. Depending on the occasion, you can choose the more appropriate and readable solution.

  // First option
  maxW={[
      "auto",    // base
      "auto",    // 480px upwards
      "auto",    // 768px upwards
      "1200px",  // 992px upwards
    ]}

  // Second option
  maxW={{
    base: "auto",
    sm: "auto",
    md: "auto",
    lg: "auto",
    xl: "1200px"
  }}

The complete LandingLayout component is the following:

import React from "react"
import { Flex } from "@chakra-ui/core"
import Header from "../sections/Header"
import Footer from "../sections/Footer" // will add this in the part 2

export default function LandingLayout(props) {
  return (
    <Flex
      direction="column"
      align="center"
      maxW={{ xl: "1200px" }}
      m="0 auto"
      {...props}
    >
      <Header />
      {props.children}
      <Footer />
    </Flex>
  )
}

The next step is to create the Header component that is inside LandingLayout.

The responsive Header component

The Header.js file will be in the /components/sections folder.

The starting point to this component was this code by Jean Bauer at the official Chakra UI docs.

We'll make some adjustments to make the component fully responsive and enhance its UI.

The outermost component is a row flexbox rendered as a nav element. The justify attribute is set to space-between to leave the appropriate space between the logo and the actual menu.

Also, we set the background-color and the color rules to the color combinations we displayed at the image above based on the active screen size.

<Flex
  as="nav"
  align="center"
  justify="space-between"
  wrap="wrap"
  w="100%"
  mb={8}
  p={8}
  bg={["primary.500", "primary.500", "transparent", "transparent"]}
  color={["white", "white", "primary.700", "primary.700"]}
  {...props}
>
  ...
</Flex>

The basic trick we'll apply here is to hide/show the menu icon and the menu items by applying conditionally the CSS rules display: block and display: none.

The menu/close icon will be visible only on the base case and hidden on screens larger than the md breakpoint. Depending on the show value, we show either the CloseIcon (when show === true) or MenuIcon (when show === false).

<Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
  {show ? <CloseIcon /> : <MenuIcon />}
</Box>

The same trick is used for the menu items. The items are always shown on screens larger than the md breakpoint and conditionally on smaller displays. The condition depends on the state of the show variable, which is toggled by pressing the Menu/Close icon.

One small notice here is the use of the flex-basic CSS property. It sets the initial main size of a flex item. We use the property to force the items in a new line when the menu icon is present. It is combined with the rule flex-wrap: wrap from the outermost Flex component that allows its children to break into a new line.

<Box
  display={{ base: show ? "block" : "none", md: "block" }}
  flexBasis={{ base: "100%", md: "auto" }}
>
  ...
</Box>

Inside that Box lives our actual menu. To make our life easier, we'll use a Flex container that is responsible for defining the direction of the children elements and justify their position.

A quick note here. Instead of the Flex component, we could have chosen the Stack component. But in our case, the Stack components introduced some UI bugs and went with the Flex.

<Flex
  align="center"
  justify={["center", "space-between", "flex-end", "flex-end"]}
  direction={["column", "row", "row", "row"]}
  pt={[4, 4, 0, 0]}
>
  ...
</Flex>

For the menu items, we create a separate MenuItem component that renders a Text component with a Link to the desired location.
Duo to the use of a Flex component as a container, we have to manually set the spacing between the menu items.

This is achieved by passing the isLast. This prop indicates whether (or not) we have to add the appropriate margin to the MenuItem.

const MenuItem = ({ children, isLast, to = "/", ...rest }) => {
  return (
    <Text
      mb={{ base: isLast ? 0 : 8, sm: 0 }}
      mr={{ base: 0, sm: isLast ? 0 : 8 }}
      display="block"
      {...rest}
    >
      <Link to={to}>{children}</Link>
    </Text>
  )
}

The final Header component is below:

import React from "react"
import { Link } from "react-router-dom"
import { Box, Flex, Text, Button, Stack, PseudoBox } from "@chakra-ui/core"
import Logo from "../ui/Logo"

import { CloseIcon, MenuIcon } from ".../Icons"

const MenuItems = props => {
  const { children, isLast, to = "/", ...rest } = props
  return (
    <Text
      mb={{ base: isLast ? 0 : 8, sm: 0 }}
      mr={{ base: 0, sm: isLast ? 0 : 8 }}
      display="block"
      {...rest}
    >
      <Link to={to}>{children}</Link>
    </Text>
  )
}

const Header = props => {
  const [show, setShow] = React.useState(false)
  const toggleMenu = () => setShow(!show)

  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      w="100%"
      mb={8}
      p={8}
      bg={["primary.500", "primary.500", "transparent", "transparent"]}
      color={["white", "white", "primary.700", "primary.700"]}
      {...props}
    >
      <Flex align="center">
        <Logo
          w="100px"
          color={["white", "white", "primary.500", "primary.500"]}
        />
      </Flex>

      <Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
        {show ? <CloseIcon /> : <MenuIcon />}
      </Box>

      <Box
        display={{ base: show ? "block" : "none", md: "block" }}
        flexBasis={{ base: "100%", md: "auto" }}
      >
        <Flex
          align={["center", "center", "center", "center"]}
          justify={["center", "space-between", "flex-end", "flex-end"]}
          direction={["column", "row", "row", "row"]}
          pt={[4, 4, 0, 0]}
        >
          <MenuItems to="/">Home</MenuItems>
          <MenuItems to="/how">How It works </MenuItems>
          <MenuItems to="/faetures">Features </MenuItems>
          <MenuItems to="/pricing">Pricing </MenuItems>
          <MenuItems to="/signup" isLast>
            <Button
              size="sm"
              rounded="md"
              color={["primary.500", "primary.500", "white", "white"]}
              bg={["white", "white", "primary.500", "primary.500"]}
              _hover={{
                bg: [
                  "primary.100",
                  "primary.100",
                  "primary.600",
                  "primary.600",
                ],
              }}
            >
              Create Account
            </Button>
          </MenuItems>
        </Flex>
      </Box>
    </Flex>
  )
}

export default Header

Let's dive into the Hero section

The hero section is the most important part of any landing page. It's the first part, the user interacts with and it has to be perfect!

As you can see below, the section is composed of two core elements. The image and the main content (header, subtitle, CTA button).

Before going further, this the place we have to define the props for our components. The main variables for our hero section are five. The text for the title, the subtitle and the button, and the URL of the image and the CTA's link.

export default function Hero({
  title,
  subtitle,
  image,
  ctaLink,
  ctaText,
  ...rest
}) {
  return ();
}

About the actual code, the top container will be a Flex component again. According to the screen dimensions, we'll gonna change its flex-direction and justify-content properties.

For the mobile device, we set the direction to column-reverse. The reason behind that choice is that we want to change the order of the two main elements.

The rest prop is passed to allow as manipulate the outermost container of the Herocomponent from outside.

<Flex
  align="center"
  justify={{ base: "center", md: "space-around", xl: "space-between" }}
  direction={{ base: "column-reverse", md: "row" }}
  wrap="no-wrap"
  minH="70vh"
  px={8}
  mb={16}
  {...rest}
>
  ...
</Flex>

The min-height attribute is passed to justify that the section will be vertically centered on large displays. You can see the difference in the image below.

Now, it's time for the image component. The only action to be done is to adjust the width. On small devices, we want to force width: 80% and progressively make it less.

Also, we add a margin-bottom on small screens to make the space between the image and the content larger.

<Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
  <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
</Box>

About the content element, it's a simple Stack element that includes two Heading components, the Button, and a Text component about the text below the button.

The only remarkable thing here is the alignment of the elements which should be centered on mobile and on the left side for bigger screens.

<Stack
  spacing={4}
  w={{ base: "80%", md: "40%" }}
  align={["center", "center", "flex-start", "flex-start"]}
>
  <Heading
    as="h1"
    size="xl"
    fontWeight="bold"
    color="primary.800"
    textAlign={["center", "center", "left", "left"]}
  >
    {title}
  </Heading>
  <Heading
    as="h2"
    size="md"
    color="primary.800"
    opacity="0.8"
    fontWeight="normal"
    lineHeight={1.5}
    textAlign={["center", "center", "left", "left"]}
  >
    {subtitle}
  </Heading>
  <Link to={ctaLink}>
    <Button
      variantColor="primary"
      borderRadius="8px"
      py="4"
      px="4"
      lineHeight="1"
      size="md"
      rightIcon="chevron-right"
    >
      {ctaText}
    </Button>
  </Link>
  <Text
    fontSize="xs"
    mt={2}
    textAlign="center"
    color="primary.800"
    opacity="0.6"
  >
    No credit card required.
  </Text>
</Stack>

The Hero component is ready and you can see the complete code below:

import React from "react"
import { Link } from "react-router-dom"
import PropTypes from "prop-types"
import { Box, Button, Flex, Image, Heading, Stack, Text } from "@chakra-ui/core"

export default function Hero({
  title,
  subtitle,
  image,
  ctaLink,
  ctaText,
  ...rest
}) {
  return (
    <Flex
      align="center"
      justify={{ base: "center", md: "space-around", xl: "space-between" }}
      direction={{ base: "column-reverse", md: "row" }}
      wrap="no-wrap"
      minH="70vh"
      px={8}
      mb={16}
      {...rest}
    >
      <Stack
        spacing={4}
        w={{ base: "80%", md: "40%" }}
        align={["center", "center", "flex-start", "flex-start"]}
      >
        <Heading
          as="h1"
          size="xl"
          fontWeight="bold"
          color="primary.800"
          textAlign={["center", "center", "left", "left"]}
        >
          {title}
        </Heading>
        <Heading
          as="h2"
          size="md"
          color="primary.800"
          opacity="0.8"
          fontWeight="normal"
          lineHeight={1.5}
          textAlign={["center", "center", "left", "left"]}
        >
          {subtitle}
        </Heading>
        <Link to={ctaLink}>
          <Button
            variantColor="primary"
            borderRadius="8px"
            py="4"
            px="4"
            lineHeight="1"
            size="md"
            rightIcon="chevron-right"
          >
            {ctaText}
          </Button>
        </Link>
        <Text
          fontSize="xs"
          mt={2}
          textAlign="center"
          color="primary.800"
          opacity="0.6"
        >
          No credit card required.
        </Text>
      </Stack>
      <Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
        <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
      </Box>
    </Flex>
  )
}

Hero.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  image: PropTypes.string,
  ctaText: PropTypes.string,
  ctaLink: PropTypes.string,
}

Hero.defaultProps = {
  title: "React landing page with Chakra UI",
  subtitle:
    "This is the subheader section where you describe the basic benefits of your product",
  image: "https://source.unsplash.com/collection/404339/800x600",
  ctaText: "Create your account now",
  ctaLink: "/signup",
}

Sum up

Until now our landing page should look like this!

Next week, we'll build the responsive Footer and Features sections.

If you liked this post, you can follow me on Twitter where I share daily tips about coding, design and bootstrapping micro-startups.

Custom React hook to connect Google Analytics

Jim Raptis — Thu, 06 Aug 2020 15:11:05 +0000

Check the full article on my personal blog

TL;DR

We'll create a custom React hook that setups Google Analytics to a CRA app. The React app uses the react-router-dom and react-ga modules.

A quick explanation of what we want to achieve.

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. They offer a great dashboard and the service is free.

Our goal is to connect the Google Analytics to our React app using some utility functions and a custom React hook that handles the initialization of the ga object.

Installation

We start with the creation of a new React app using create-react-app and npx:

npx create-react-app demo-app
cd demo-app

Then, we install the two dependencies. The react-router-dom library which is the de-facto routing solution in React. and react-ga the official Google Analytics React package:

yarn add react-router-dom react-ga

Or if you're using npm:

npm install --save react-router-dom react-ga

Create the analytics.js file

Our first step is to create the file analytics.js where we're going to create the Google Analytics init function and define two helpers to fire custom events and the pageview one.

We utilize the react-ga's method initialize to set up the Google Analytics with our unique tracking id. You can pass more options to the initialize function but we'll only enable debug logging for the local development mode.

Then we create the two extra helper functions, sendEvent() and sendPageview(), that simply fire a custom event and the pageview one respectively.

import ReactGA from "react-ga"

const TRACKING_ID = "UA-XXXXXXXXX-X"

function init() {
  // Enable debug mode on the local development environment
  const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === "development"
  ReactGA.initialize(TRACKING_ID, { debug: isDev })
}

function sendEvent(payload) {
  ReactGA.event(payload)
}

function sendPageview(path) {
  ReactGA.set({ page: path })
  ReactGA.pageview(path)
}

export default {
  init,
  sendEvent,
  sendPageview,
}

Define the App component

Now we have to create the App component that renders the pages of our app. To keep it simple, I define 3 dummy routes, /, /features, and /signup.

I use BrowserRouter over the pure Router because it ignores the history prop and handles the history object automatically for you.

The Switch component selects the first route that fits the location and renders it. So it renders only one route!

import React from "react"
import { BrowserRouter, Switch, Route } from "react-router-dom"

import Home from "./pages/Home"
import Features from "./pages/Features"
import SignUp from "./pages/SignUp"

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/features">
          <Features />
        </Route>
        <Route exact path="/signup">
          <SignUp />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

export default App

Build the custom useGoogleAnalytics hook

Since we don't handle history manually (BrowserRouter does this for us), our only option to access the current location object is by using the useLocation hook by react-router-dom.

So, we define two useEffect hooks. The first useEffect simulates the known componentDidMount function and initializes the ga object. The second one listens on every location change and sends the valuable pageview event.

Pretty straightforward, huh?!

import React from "react"
import { useLocation } from "react-router-dom"

import analytics from "./analytics"

export default function useGoogleAnalytics() {
  const location = useLocation()

  React.useEffect(() => {
    analytics.init()
  }, [])

  React.useEffect(() => {
    const currentPath = location.pathname + location.search
    analytics.sendPageview(currentPath)
  }, [location])
}

Let's call our hook

We go to our App component and we call our custom hook function.

function App() {
  useGoogleAnalytics()

  return (
    <BrowserRouter>
      <Switch>...</Switch>
    </BrowserRouter>
  )
}

There is a problem though. Our hook depends on the current location object which is not available yet on the App components

A quick solution is to create a separate component called Routes that renders the Switch component and its children and calls the custom hook from there.

Doing that we can be sure that the BrowserRouter component exists and has defined the location object before rendering Routes.

function Routes() {
  useGoogleAnalytics()

  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/features">
        <Features />
      </Route>
      <Route exact path="/signup">
        <SignUp />
      </Route>
    </Switch>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  )
}

That's all folks! You have successfully added Google Analytics in your React app!

Now, you can fire custom events from any component you like by just importing and calling the sendEvent function from the analytics.js file.

If you liked this post, you can follow me on Twitter where I share daily tips about coding, design and bootstrapping micro-startups.

Best Icon Packs for building beautiful web apps

Jim Raptis — Sat, 01 Aug 2020 17:16:54 +0000

Check the original post on my blog.

Icons are an integral part of any website or web app. The icon set defines the tone and the general feeling of the user interface.

As a solo developer, many times selecting the right icons can be a tricky task. That's the reason, I want to share 5 beautiful crafted icon packs that can scale up your interface.

All of them can be easily implemented to any web project and add a modern and minimal tone to your app.

1. CSS.gg

CSS.gg is an amazing collection of 700+ pure CSS, SVG and Figma UI icons. The icons are available in SVG Sprite, style-components, npm, and API.

2. Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Each icon is available as SVG or PNG file

3. Feather Icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

To use the pack, there are several options. You can use the SVGs directly or install the npm library.

Also, it's part of the react-icons library.

4. Zwicon

Zwicon is a handcrafted icon set with 566 icons in 26 categories. It's designed on a 24px grid so it works hand-in-hand with 8pt Grid System.

The pack introduces a unique tone to your application/website.

5. Remix Icon

Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers.
The library includes 2271 icons and is constantly updating.

The icons are available as SVG/PNG files and Remix offers Webfont and SVG Sprite support.

For the React enthusiasts, it's part of the react-icons library too.

If you liked this post, you can follow me on Twitter where I share daily tips about coding, design, and bootstrapping micro-startups ✌️

How to setup Chakra-UI in React using cra

Jim Raptis — Fri, 24 Jul 2020 10:33:16 +0000

TL;DR

We'll setup Chakra UI in React using create-react-app and explore a basic example.

Read the full article at my blog

Introduction

Chakra UI is a modern React UI library. It provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

The last year, Chakra UI gained a lot of traction and the hype is building around the library.

Today, I will guide you on how to set up Chakra UI using the create-react-app generator.

1. Create a new project

The easiest way to generate a React project is by using the Create React App. Replace the demo-app text with your app’s name.

npx create-react-app demo-app
cd demo-app

2. Install Chakra

Then, we have to install the Chakra UI library and its dependencies.

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

3. Add the ThemeProvider

Your first action is to wrap your application with their ThemeProvider component that includes all the appropriate styling for your components.

It's optional but you can pass as a prop a custom theme object that overrides Chakra's default theme options. It's a great way to add custom color palettes and icons.

import React from "react"
import { ThemeProvider } from "@chakra-ui/core"
import customTheme from "./customTheme"

return <ThemeProvider theme={customTheme}>{props.children}</ThemeProvider>

About your custom theme, you can easily add a custom palette. CopyPalette app can be handy for the palette generation.

Below, I show an example custom theme file for with a primary color (You'll see next how to use it).

import { theme } from "@chakra-ui/core"

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: {
      100: "#CFD1FD",
      200: "#A7ABFB",
      300: "#8388F9",
      400: "#6268F8",
      500: "#444BF7",
      600: "#262EF6",
      700: "#0B14F5",
      800: "#0911DD",
      900: "#080FC7",
    },
  },
}

export default customTheme

4. Inject global styles

Sometimes you may need to apply CSS reset styles to your application. Chakra UI exports a CSSReset component that will remove browser default styles.

The creators recommend adding the CSSReset component at the root of your application to ensure all components work correctly.

import { CSSReset, ThemeProvider } from "@chakra-ui/core"
import customTheme from "./customTheme"

return (
  <ThemeProvider theme={customTheme}>
    <CSSReset />
    {children}
  </ThemeProvider>
)

Ready to add Chakra components

At this point, the basic setup is completed. You should be able to add successfully the Chakra UI components.

For demonstration, we'll add two typography components <Text> and <Heading> and a <Button> wrapped by a Stack component. At the same time, we'll utilize the custom primary color palette we added earlier.

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. The spacing prop is the one that defines the spacing between components. It accepts all the valid Styled System props too.

About the custom colors, you can easily apply them as a string by specifying its name e.g "primary" and the desired tint/shade e.g. "primary.500".

One tricky point here is that the default style props need the color explicitly defined e.g. "primary.500".

Whereas the button component needs only the name of the color e.g. "primary" and handles internally the color shades/tint for its states (wow huh?!).

import { Button, Heading, Stack, Text } from "@chakra-ui/core"

return (
  <Stack spacing={4} bg="white" p={8} borderRadius="lg">
    <Heading as="h1" size="md" color="primary.900">
      Chakra UI is rad!
    </Heading>
    <Text as="p" fontSize="md" color="primary.500">
      Here are your first Chakra components:
    </Text>
    <Button variantColor="primary" isFullWidth>
      Click me, please!
    </Button>
  </Stack>
)

Up to this point, you're ready to apply your own styles and explore their rich component gallery!

Have fun and share with me your creations by tagging me @d__raptis on twitter 💪

Adaptive React.js Duotone component

Jim Raptis — Tue, 07 Jul 2020 09:48:58 +0000

This tutorial is about creating a simple duotone React.js component you can easily tweak.

Duotone design refers to creations that are made up of two contrasting colors. Much like what it describes, the word “duotone” has two parts: “duo,” meaning double, and “tone,” meaning color.

If you're impatient like me, grab the Codesandbox code right away.

Let's start!

Setup

The best way to start building a new single-page application in React in by using create-react-app. Replace the duotone-app text with your app's name.

  npx create-react-app duotone-app

The only external library is the CSS-in-JS library React styled-components. It comes in handy when you want to pass variables in your CSS. The installation command is the following:

  yarn add styled-components

How it works

Our approach is based on the hacky way described in this tweet by Una Kravetz.

Duotone images are so #trendy right now 😎

Had some airport time so I drew out how to get this effect w/one div in CSS 😊 #devdoodles pic.twitter.com/WENOWlwcUY
— Una Kravets 👩🏻‍💻 (@una) October 25, 2017

The image is set as a background-image of a div element. Then, we utilize the ::before and ::after selectors to add two colored overlay layers above the div. The hack is on using the CSS property mix-blend-mode to blend the overlay layers with the original image.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

One important point here is that the colors have to be contrasting to make the effect aesthetically pleasing!

Build the Duotone component

The React component will get as props the url of your image and two contrasting colors:

<Duotone
  src="https://source.unsplash.com/random"
  lightColor={lightColor}
  darkColor={darkColor}
/>

Defining the actual div element with the background-image property is our 1st task.

const Duotone = styled.div`
  background-image: url(${props => props.src});
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;

  position: relative;

  /* Setup the fixed dimensions */
  width: 225px;
  min-height: 400px;
`

The position: relative rule is necessary to position the overlay layers relative to the original div. Unfortunately, there is one small drawback with this method. You have to specifically know and set the dimension of your image.

Now, we're ready to apply the selectors that represent the overlay layers. The ::before selector sets as background color the lightColor with mix-blend-mode: darken. In that way, the background is replaced with the content where the content is , otherwise, it is left as it was.

&::before {
  background-color: ${props => props.lightColor};
  content: "";
  display: block;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  mix-blend-mode: darken;
  position: absolute;
}

Then, we simple apply the ::after selector too. Here, the backgroud get the darkColor and set the CSS rule mix-blend-mode: lighten to replace the background with the content where the content is lighter.

&::after {
  background-color: ${props => props.darkColor};
  content: "";
  display: block;
  border-radius: 32px;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  position: absolute;
}

Our component is ready!

Real-life use case

I used the Duotone component for the root page of my blog.

As you've already noticed, the blog has multiple theming options. The problem was how could I adapt my header image to the active theme. My initial thought was to use a gradient overlay above the image. But I didn't like this idea due to its aesthetic result.

By implementing the Duotone component, I was able to easily customize the image based on the active primary and secondary colors and produce an eye-catching effect.

Theming v2

- More color palettes
- Adaptive duotone effect based on the active theme pic.twitter.com/NKCAQIfTKg
— Jim Raptis💥 (@d__raptis) July 5, 2020

The final Duotone React component

Here is the final Duotone React component:

const Duotone = styled.div`
  background-image: url(${props => props.src});
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;

  position: relative;

  /* Setup the fixed dimensions */
  width: 225px;
  min-height: 400px;


  &::before {
    background-color: ${props => props.lightColor};
    content: "";
    display: block;
    border-radius: 32px;
    width: 100%;
    height: 100%;
    mix-blend-mode: darken;
    position: absolute;
  }

  &::after {
    background-color: ${props => props.darkColor};
    content: "";
    display: block;
    border-radius: 32px;
    width: 100%;
    height: 100%;
    mix-blend-mode: lighten;
    position: absolute;
  }
`

If you liked this post, you can follow me on Twitter where I share daily tips about coding, design and bootstrapping micro-startups.

How we built Above the Fold plugin to solve handoff problems

Jim Raptis — Fri, 22 May 2020 09:44:59 +0000

Howdy! I’m Jim, co-founder and Design Lead at VisualEyes. Find a little bit about myself and my background here.

During my daily routine at VisualEyes, I design and optimize our landing page along with building/maintaining our design tool plugins.

The main goal for every landing page is to make the business’ value proposition clear enough and convert visitors to leads the optimal way.

Content layout and placement play a significant role in the aforementioned goals. Especially the content that appears above the fold because it’s the first visible when the user loads the page. Thus, it’s a common practice to place the elements that fulfill the conversions goals in the initially visible part of your page.

Our goal as frontend developers is to make sure that the design to code handoff is done the optimal way. CSS offers plenty of attributes that let us manage which content will be displayed on the initial screen. However, we have to be sure that the designer is aware of the issue and the dangers.

Designers have difficulties specifying the Above the fold at the design stage of our process. Many times they have no clue about the visible part of their users’ window. The only indicator is the default Artboard/Frame size of design tools, such as Adobe XD, Figma, Sketch. However these presets are specialized for the total screen resolution and not the real browsing window.

Let’s demonstrate the real problem with a practical example.

The right screenshot is taken from my actual device whereas the left is the Figma MacBook Pro preset. Now, the problem is obvious. The OS and Chrome browser’s navigation bars remove a dynamic portion of the available screen area. Thus, the actual free window for the landing page is smaller than the preset and our social proof elements are not visible anymore.

Very few of us browse the web in fullscreen mode, that’s why the viewport size almost always differs from the actual screen resolution. The CSS tricks site conducted a study and stated that 1% of the users have their browsing window in fullscreen mode. The study is from 2016 but I highly doubt that the results would be different now.

How to solve it?

That’s the reason we built Above the Fold plugin, and mark in layers where the above the fold section ends.

Our approach was to gather the most common screen resolution around the web per device type (Desktop, Mobile, Tablet). Then, we calculated the average user viewport size and aggregated the results to form a danger zone. A zone in which you can’t be sure that your elements are safe.
The final results of Above the Fold plugin are the followings:

We share our Sketch & Figma plugins for free to the community because we strive to make the design to code handoff process easier and more robust for everyone. Go and give it a try, we’d be glad to learn your feedback and your suggestions.

👉You can learn more & download the plugin on our PH page 👈

Our Spectrum community is always open to interesting suggestions and discussions by creative people like you!

CSS & React: How to bounce your logo

Jim Raptis — Wed, 27 Nov 2019 17:58:32 +0000

TLDR:
Build a smooth bouncing logo animation with pure CSS and use it in React. My impatient friends can scroll down the dark depths (=end) of this article and grab the valuable CSS snippet.

👵 The Story

While I was craving for inspiration on Dribbble and cursing the trash Internet connection, I saw IT! It was small but beautiful! Μoving tirelessly back and forth and catching my breath every time it hits the ground.

From that time on, I was obsessed with this small devil!

As a front-end engineer that respects himself, I opened the dev tools to check the source code of the animation. Who would have thought that it was just a gif?

I was really disappointed!

From that time on, I had my heart set on building the god damn bounce!

But, enough of my emotional breakdown. Let’s get some 💩 done!

🧠 How

Before getting our hands dirty, I want to define our goal and how we’re gonna achieve it!

First of all, the Dribbble logo is a basketball, so it makes perfect sense to be bouncing. However, it doesn’t have to be a ball to make the animation look natural. Having a circular shape is enough and to convince you, our object will be an eye.

My company, Loceye uses eye-tracking technology to understand users' behavior, and possible that eye thing makes sense now.

The second point is about the shadow! Maybe it’s not obvious to everyone but a bouncing eye transforms its shadow as it gets near the ground. The shadow gets bigger and bigger as the eye comes closer to the ground.

About the code implementation, we’re gonna need an SVG logo (PNG could work too with small adjustments) and a basic understanding of CSS animations. When we have a functional bouncing eye, I’ll show you how you can use it in any React project with no hassle as a loading component.

👨‍💻 Coding Section

Let’s start the coding section!

The idea behind the implementation is not rocket science! It works as simple as that. Define a container that will contain the logo and its shadow. The logo and the shadow will be positioned relative to their parent element.

For educational reasons, I’m gonna break down the whole animation concept into 4 parts.

💀 Part #1 — Static skeleton

We’re gonna define the static layout of our animation. For simplicity, the logo and its shadow will be two <div> elements with circular and rectangular shape respectively.

<div class="container">                                 
  <div class="logo"></div>
  <div class="shadow"/></div>
</div>

Now, let’s declare some useful CSS variables and escape from the headache later. If you’re new into CSS variables and curious to learn more, you can visit this link and thank me later in the comment section.

<div class="container">                                 
  <div class="logo"></div>
  <div class="shadow"/></div>
</div>

It’s time to position our main elements. The trick is the CSS attribute position. By defining position: relative at the container and position: absolute to its children, we achieve to position the ball and the shadow relative to their parent.

The tricky part here is to keep in mind that the top and left attributes calculate the absolute position of the top left element’s point.

For example, the elements can be horizontally centered inside the container if we set left: 50% and subtract the half of its width.

You can check my previous article to learn why.

The CSS classes below align the ball and the shadow inside their container using some plain calculations.

.container {
  position: relative;
}

.logo {
  position: absolute;
  top: var(--offset);
  left: calc(50% - var(--logo-size) / 2);                               
}

.shadow {
  position: absolute;
  top: calc(
    var(--offset) + 
    var(--drop-height) + 
    var(--logo-size) - 
    1.5  var(--shadow-height)
  );
  left: calc(50% - var(--logo-size) / 2);
}

By now, our animation should look more static than ever!

🏃Part #2 — Movin’ it

It’s time to move the damn ball!!!

Half the magic lies on the @keyframes CSS at-rule, which controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

Our @keyframes bounce at-rule is gonna handle the translateY() and scale() CSS functions.

The function translateY() will reposition the ball vertically on the 2D plane from 0 to var(--drop-height) pixels. Simpler, it will move our ball downwards towards the ground by the specified pixels.

@keyframes bounce {
  from { 
    transform: translateY(0) scale(1);
  }
  to   { 
    transform: translateY(var(--drop-height)) scale(1, 0.7);
  }
}

But how? Here comes the rest of the magic! The animation CSS property applies an animation between styles. We set the animation-direction property alternating back and forth animation-iteration-count to infinite.

Smooth movement is anything and everything!

However, the most important property is the animation-timing-function, that specifies how an animation progresses through the duration of each cycle. I picked the cubic-bezier() timing function because it’s highly customizable and can give the desired natural feeling.

.logo {
  ...
  animation-name: bounce; 
  animation-duration: 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  animation-iteration-count: infinite;
}

Of course, these floating point numbers are not random but precisely defined after hours of calculations. Just kidding!

Hopefully, Andrey Sitnik and Ivan Solovev build an amazing curated list of easing functions, the easing.net. My work was to pick easeInExpo and copy-paste the cubic-bezier() easing.

)

Preview cubic-bezier(0.95, 0.05, 0.795, 0.035) at cubic-bezier.com

Another great tool is cubic-bezier.com by Lea Verou. Not only helps you visualize your cubic-bezier curve, but you can also compare it with some common easing functions.

🕶 Part #3— Shadow owes its birth to light.

It’s time to take care of our shadow. Considering our extended analysis on Step #2, the shadow movement should be easy as a pie (unless you’ve never baked a pie).

@keyframes grow {
  from {
    transform: scale(0.2, 0.5);                             
  }

  to {
    transform: scale(1, 0.1);   
  }
}

As you can see, our only adjustment is on its scale() function. Our goal here is to “stretch” the shadow as the ball is coming closer.

So far, we have a fully-functional bouncing animation with two dummy objects. Let’s put the finishing touches at our next step.

🏀 Part #4 —Dat eye is bouncing

Everything is great by now, but something is missing. The lovely eye and its realistic shadow of course. Obviously, a ball cannot have a rectangular shadow.

I used a <svg> element with our .logo class to define my logo.

<div class="container">                                         
  <svg class="logo" ...>....</svg>
  <div class="shadow"/></div>
</div>

However, it could work if you kept the <div>element and added a PNG image inside the .logo class, taking advantage of background-image property. Moreover, we should use background-size and border-radius to center it.

.logo { 
  ...   
  background-image: './path/to/logo.png';                           
  background-size: cover;
  border-radius:50% 50% 50% 50%;
}

The last touch is adding the radial-gradient() function and create a fading natural shadow for our object.

.shadow {   
    ...
    background: radial-gradient(50% 50%, rgba(150,150,150,1), rgba(150,150,150,0.05));
}

🎉🎉🎉 Kudos! The logo is bouncing! 🎉🎉🎉

If you were here to grab your CSS snippet, the above Pen will make you joyful. Thank you for being patient with my bad sense of humor and hope to see you around here again!

The rest of you, who want the React component should bear with my bad humor a little bit more.

⚛ Only React geeks here

About the React component, I took advantage of the powerful styled-components library, that allows you to write actual CSS code to style your components. Of course, you can use the traditional way and import your CSS file into your component.

A tricky point is that the <Logo> component is an <svg> element rendered as a React component. You can easily transform an svg element to React component using svgr web editor(CLI tool is available too). Don’t forget to include viewPort in your <Logo> component!

🏃‍♀️🏃 Impatient CSS lovers here

Conclusion

It’s not that difficult to create a cool animation using pure CSS stuff. You should only take a deep breath and define what you really want! Transferring your animation to the real world can really help you understand the basic requirements!

Check the functional React Sandbox and I’m gonna wait for your dirty bouncing animation at the comment section below 👇👇👇

CSS: Absolute center element

Jim Raptis — Wed, 20 Nov 2019 20:41:33 +0000

TLDR:
Learn how to center an element with position: absolute inside its parent.

Introduction

You should probably be thinking, “Why not using the rad CSS flexbox?”. And you’re right! In almost all cases display: flex could work and escape you from some unnecessary headache.

However, sooner or later you’ll need to hack the system and position a poor element using position: absolute. Then, maybe you’ll figure out that it’s a little tricky.

I’m here to rescue you, buddy‍!

👎 The Wrong Way

You open your favorite code editor(VS is mine) and the show starts!



.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
}

You’re so much excited about your awesomeness until you look at the final result!

No! God damn No! Dat thing is no way centered!

And, that’s the exact time you wonder why you started coding in the first place. But as the curiosity takes place over the frustration, you start wondering: “Why is that happening?”

👍 The Correct Way

You and, obviously, I (when I first came into that centering issue) are missing a crucial detail!

Considering a 2-D plane, the center point (0,0) of the coordinates system is not the center of your element. It’s the top left corner! Now it should be clearer why the item looked far from the center in the first place.

But how can you change that? It’s a cinch and I’m gonna show you the proper way.

The key point is to subtract half of the element’s width on the X-axis (horizontal) and half of the element’s height on the Y-axis (vertical). Then, your element has to be absolutely centered inside its parent.



.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

The CSS implementation is even easier, thanks to the translate() function.

The translate() function repositions an element in the horizontal and/or vertical directions.

Thus, by using translate(-50%, -50%) you’ve removed the undesired offset using only 21 characters. Amazing!!! 👏

Conclusion

When the Flexbox module is not an option, you should not be afraid to play with the position property.

To be honest, I’m really curious to learn some even more awkward ways to center my elements. Feel free to show us how in the comment section below 👇