Forem: Snappy Web Design

The Dysfunctional Back Button

Snappy Web Design — Sun, 29 Aug 2021 22:58:46 +0000

Visit this website and you’ll be infiltrated by three separate popup modals and two banners urging you to sign up for something. You’ll be forced to sequentially close the popups and banners to actually see the text on the page. One modal, fine - but three of them? And two banners? A bit excessive. The worst is yet to come though - reserved for when you try to hit the back button to return to whatever page you were previously on. No, it’s not an alert box asking you to confirm that you want to leave, or a case of the infinitely-refreshing page. This site decided to opt for a far more bold and dubious infringement of good UX. Potentially the “holy-grail” of annoying website practices: hitting back on this site will scroll you up about a ¼ of a centimeter.

If you clicked on this site from a Google search and were hoping to go back to the results, you can kiss that dream goodbye. You’ll be clicking the back button for at least five minutes, potentially years. If you dare stay on the site in a last-ditch attempt to salvage your tab, you’ll be solicited once again with a popup requesting permission to send you push notifications. Which, I can only assume would lead to never-ending push notifications, too. Either way, the authors of this site have clearly chosen one method of retaining users: through force.

With all jokes aside, this site is a great example of web developers going too far in the name of conversions. Like, way too far. This site is so intrusive I thought I accidentally clicked on a satirical site made to highlight frustrating UX by reddit user ...

Keep Reading: https://snappywebdesign.net/blog/the-dysfunctional-back-button/

How to style the Active Drawer ListItem in Material-UI

Snappy Web Design — Fri, 06 Aug 2021 23:28:56 +0000

Wondering how to set or style the active link in Material-UI? This Material-UI tutorial will teach you how to style an active drawer / tab item with simplest code possible.

The Mui AppBar and Drawer provide a great starting point - but they don't provide a solid foundation for highlighting the active tab. As a result, many developers end up with 'hacky' methods of setting active nav items. Fortunately, there's a better way.

Demo

Live Site

Codesandbox Demo

Github Repo

Preview:

Boilerplate (Starting Point)

import React from "react"
import { Link } from "gatsby" OR "@material-ui/core/Link"
import Drawer from "@material-ui/core/Drawer"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"

export default function MuiDrawer() {
  return (
      <Drawer variant="permanent" anchor="left">
        <List>
          <ListItem button component={Link} to="/">
            <ListItemText primary="Home" />
          </ListItem>
          <ListItem button component={Link} to="/404">
            <ListItemText primary="404" />
          </ListItem>
        </List>
      </Drawer>
  )
}

The Solution:

To set the Active ListItem in the Material-UI Drawer, we can use the selected prop. To make this as clean as possible, we should make a custom ListItem. Here's what it looks like:

  let CustomListItem = ({ to, primary }) => (
    <ListItem
      button
      component={Link}
      to={to}
      selected={to === location.pathname}
    >
      <ListItemText primary={primary} />
    </ListItem>
  )

Now we can render our CustomListItem as follows, which will automatically set the Drawer ActiveItem based on the browser's location.

<CustomListItem to="/" primary="Home Page" />

Final Code

Here's how the Drawer looks in its final form:

import React from "react"
import { Link } from "gatsby"
import { useLocation } from "@reach/router"
import Drawer from "@material-ui/core/Drawer"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"

export default function BarebonesDrawer({ children }) {
  const location = useLocation()

  let CustomListItem = ({ to, primary }) => (
    <ListItem
      button
      component={Link}
      to={to}
      selected={to === location.pathname}
    >
      <ListItemText primary={primary} />
    </ListItem>
  )

  return (
      <Drawer variant="permanent" anchor="left">
        <List>
          <CustomListItem to="/" primary="Home Page" />
          <CustomListItem to="/404" primary="404 Page" />
        </List>
      </Drawer>
  )
}

Finished Product

Link: https://codesandbox.io/s/github/SnappyWebDesign/Material-UI_Active_ListItem_Tutorial/tree/main/?file=/src/components/DrawerDemo.js

Bonus: Styled Material-UI Drawer

Need a quick copy and paste? Here's the code for the styled Drawer in the demo above:

View on Github

Did you find this article helpful?

If you did, would you take a second to share the article by clicking below? It helps our cause immensely!

Make sure to also click the follow button to get notified when new posts go live 🔔

Gatsby Code Splitting

Snappy Web Design — Mon, 05 Jul 2021 20:22:45 +0000

Modern web apps are now thought of as bundles of modules interacting with each other to create functions/features. Bundling is the process of merging code into one "bundle" (think: script/file) to deliver to the user.

Code Splitting converts these 'bundles' from one file to many, which can further dramatically improve performance by lazy-loading just the parts of your site that the user needs.

Code Bundling Example (before code splitting):

Raw Code:

// /pages/Index.js
import { add } from '../components/math.js'

console.log(add(15, 15)); // 30

// /components/math.js
export function add(a, b) {
  return a + b;
}

Bundled Code:

function add(a, b) {
  return a + b;
}

console.log(add(15, 15)); // 30

As you can see, bundling is the process of merging your imported files/"modules" into one "bundle". While this is great, it can lead to long load times as your as your application grows in size with added pages and functions.

Code Splitting

You can speed up your site by only loading what the user needs rather than delivering the entire application at once.
E.g., by only loading the components that are ON the page the user is viewing.

One thing that makes Gatsby powerful is that it does this for you. Gatsby automatically and intelligently code-splits bundles when you run gatsby build. However, it does so in a specific manner. For example:

Imagine your website has two pages: a Landing Page and a Contact Page. Each page has 2 unique components; 4 in total:

-- Landing Page

Hero.js (Component)
Services.js (Component)

-- Contact Page

ContactInfo.js (Component)
ContactForm.js (Component)

In a traditional React app, a user who visits the Landing page will download a bundle containing all of the components -- Hero, Services, ContactInfo and ContactForm -- despite only needing the Hero and Services components to correctly display the landing page.

Multiply this by say, 10 pages, and you've got an issue on your hands - you're serving a 10 MB payload for a 1 MB page.

This is how Gatsby approaches code-splitting: on a page-by-page basis.

This strength of Gatsby can also be a real downside when creating a single-page site. Since Gatsby splits bundles up by page, you'll end up delivering an unnecessarily massive payload to the client, slowing down your Largest Contentful Paint / initial load times.

So...the solution?

Code Splitting Components instead of Pages

Code-splitting helps you lazy-load only what the user needs and reduce initial load times without modifying the quantity of code you've written.

The React team created React.lazy and Suspense for implementation of this but, unfortunately, neither are compatible with server side rendering/Gatsby.

Instead, they recommend using a library called Loadable Components.

Using Loadable-Components with Gatsby

Code-splitting components with Loadable-Components in Gatsby is simple. Start by installing dependencies

npm install @loadable/component
# or use yarn
yarn add @loadable/component

Then, on any page you wish to lazy-load a component:

Change:

import Hero from '../components/Hero'
import Services from '../components/Services'

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

To:

import loadable from '@loadable/component'

import Hero from '../components/Hero'
const Services = loadable(() => import('../components/Services'))

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

And that's all! Services.js will now be loaded in its own bundle, separate from the one containing Hero.js. As you see in this example, one method of using loadable-components for a single page site is importing content above the fold normally, and lazy loading content below it.

Bonus: Specifying a Fallback without Suspense

When you lazy-load a component, you're deferring it on the initial page load. Therefore, there will be a short period of time where your content is not visible. You can display a placeholder during that period:

import loadable from '@loadable/component'

import Hero from '../components/Hero'
const Services = loadable(() => import('../components/Services'), {
  fallback: <div>Loading...</div>,
})

export default function LandingPage() {
  return (
    <div>
      <Hero />
      <Services />
    </div>
  )
}

The word "Loading..." will now display until your component is rendered.

Did you find this article helpful?

If you did, would you take a second to share the article by clicking below? It helps our cause immensely!

Make sure to also click the follow button to get notified when new posts go live 🔔

Add a "Copy Link to Clipboard" button to your website in 10 lines of code

Snappy Web Design — Sat, 03 Jul 2021 14:55:09 +0000

Providing your users an easy way to share your blog posts is an SEO no brainer. Using the default Navigator api [navigator.clipboard.writeText] is a common approach, but lacks mobile support.

The best way to copy selected text to the clipboard is by creating a hidden textarea. Luckily, all you need to do is copy the following code:

HTML/JSX:

<Button
  variant="contained"
  size="large"
  onClick={() => {
    CopyToClipboard(window.location.href)
  }}
>
  Copy Link to Clipboard
</Button>

Javascript:

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

Demo:

You can easily extend this by displaying an alert to give users success feedback. An example of how this could be done in Material-UI is with a Snackbar and a piece of state to control the snackbar.
Check out the full post on https://snappywebdesign.net to see how.

Did you find this article helpful?

If you did, would you take a second to share the article? It helps our cause immensely!
Make sure to also click the follow button to get notified when new posts go live 🔔

How to Code a Dark Theme with Material UI

Snappy Web Design — Tue, 15 Jun 2021 23:43:56 +0000

Dark mode is a feature that users can't get enough of. It saves battery life, reduces eye strain, and minimizes blue light emissions. It's a simple feature that as a developer (all else equal), will set you apart far and wide from your competition. To boot, Material-UI supports dark/light themes out of the box, making it a great framework to build on. Despite this, due to dark mode's relative infancy in the web development world, there is a distinct lack of documentation and tutorials on how to actually code dark & light modes.

This article was originally published on Snappy Web Design

In this Material-UI tutorial, you'll learn

How to use localStorage to save a user's theme preference
How to use Material-UI to apply a dark theme and light theme
How to use Gatsby's gatsby-browser and gatsby-ssr to avoid css style conflicts on rehydration with server side rendering (SSR)
How to use a single Mui Theme file to serve both dark/light theme variants ("single source of truth")
How to use React's useReducer, useContext, createContext, and Context.Provider

Why this Tutorial?

Although there are other tutorials on the web and the documentation for Material-UI is normally stout, you've probably found while researching tutorials on dark modes:

Most tutorials show impractical / unorderly code that's difficult to reuse in your own project
Material-UI's documentation falls short of demonstrating how to update the theme live - it only briefly touches on 'dark' and 'light' theme types
Incomplete examples lead to Flashes of Unstyled Content (FOUC)
Gatsby's Server Side Rendering (SSR) leads to FOUC

What's the finished product?

You can view the final code here:

Live Deployed Site

View on CodeSandbox

View the Github Repo

...and here's how the final product will look and behave:

Project Structure

Before we dive into the code, let's first look at the project structure (which is available on CodeSandbox).

You'll notice it looks similar to a typical Gatsby.js project with the exception of the ThemeHandler.js file.

ThemeHandler will...well, handle whether to display a light or dark theme. It'll contain our useContext and useReducer functions.

gatsby-browser wraps our application with our Context Provider. It allows our Gatsby site to have dynamic state.

gatsby-ssr serves the same purpose: wrapping our application with our Context Provider to make it accessible everywhere in our app. It prevents flashes of unstyled content with server-side rendering.

Layout is where we'll initially check the user's local storage to see if they have a previously set theme. If not, we'll set it to the default of our choosing. We'll wrap our application with our Theme using the Material-UI ThemeProvider.

Index does the least amount of work but the most important. It contains the button to toggle the dark/light theme and does so with an onClick function. This dispatches a function via our reducer to change the theme and sets the local storage to the user's newly-preferred theme.

Theme contains our:

1. Base theme, styles to be applied globally across both light and dark modes.

2. Dark theme, styles applied when dark mode is active, and lastly, our

3. Light theme, containing styles to be applied when the light mode is active.

If you're a visual learner, I hope that diagram gives you a mental picture of where we're headed.

Theme.js

One of the reasons why I think this approach is the best is because it has a single source of truth. Unlike other tutorials, we only use one theme, yet we provide multiple styles. We do it by nesting our themes: we define our global styles for both light and dark modes, and then spread that across our styles for our separate light and dark themes.

import { createMuiTheme } from "@material-ui/core/styles"

const baseTheme = createMuiTheme({
  typography: {
    fontFamily: "'Work Sans', sans-serif",
    fontSize: 14,
    fontFamilySecondary: "'Roboto Condensed', sans-serif"
  }
})

const darkTheme = createMuiTheme({
  ...baseTheme,
  palette: {
    type: "dark",
    primary: {
      main: "#26a27b"
    },
    secondary: {
      main: "#fafafa"
    }
  }
})
const lightTheme = createMuiTheme({
  ...baseTheme,
  palette: {
    type: "light",
    primary: {
      main: "#fafafa"
    },
    secondary: {
      main: "#26a27b"
    }
  }
})

export { darkTheme, lightTheme }

Now our theme is set up for us to later import it like

import { darkTheme, lightTheme } from "./Theme"

Eventually, we'll make use of Material-UI's theme provider and pass in our theme dynamically:

<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>

For now though, let's work on our ThemeHandler.

ThemeHandler.js

Our objective is simple: create a state value for darkMode, set it false initially, and be able to access and update our state from anywhere within our Gatsby application.

For this, we make use of React's createContext, useReducer, and ContextProvider.

First up, we need to import createContext and useReducer, assign a variable as our action type which we'll use in our Reducer, and initialize our new Context:

import React, { createContext, useReducer } from "react"
let SET_THEME

export const darkModeContext = createContext()

Then, we'll create our useReducer function. Essentially, we'll be calling a function to set darkMode either true or false. The reducer is a switch statement to feed this value to our global state.

import React, { createContext, useReducer } from "react"
let SET_THEME

export const darkModeContext = createContext()

export const darkModeReducer = (state, action) => {
  switch (action.type) {
    case SET_THEME:
      return {
        ...state,
        darkMode: action.payload
      }
    default:
      return state
  }
}

Then, we'll create and export our DarkModeState function. We'll set our initial state (set dark mode to false on first load) in addition to initializing our dispatch function using the reducer we just created.

import React, { createContext, useReducer } from "react"
let SET_THEME

export const darkModeContext = createContext()

export const darkModeReducer = (state, action) => {
  switch (action.type) {
    case SET_THEME:
      return {
        ...state,
        darkMode: action.payload
      }
    default:
      return state
  }
}

export const DarkModeState = props => {
  const initialState = {
    darkMode: "false"
  }
  const [state, dispatch] = useReducer(darkModeReducer, initialState)

Lastly, we'll create our function (setDarkMode) to update our state. It uses the dispatch function which feeds into our reducer's switch statement.

We return our darkModeContext.Provider which makes both the darkMode state, and the setDarkMode function available globally across our app.

import React, { createContext, useReducer } from "react"
let SET_THEME

export const darkModeContext = createContext()

export const darkModeReducer = (state, action) => {
  switch (action.type) {
    case SET_THEME:
      return {
        ...state,
        darkMode: action.payload
      }
    default:
      return state
  }
}

export const DarkModeState = props => {
  const initialState = {
    darkMode: "false"
  }
  const [state, dispatch] = useReducer(darkModeReducer, initialState)

  const setDarkMode = async bool => {
    dispatch({
      type: SET_THEME,
      payload: bool
    })
  }

  return (
    <darkModeContext.Provider
      value={{
        darkMode: state.darkMode,
        setDarkMode
      }}
    >
      {props.children}
    </darkModeContext.Provider>
  )
}

🔧 Fixing Gatsby's Rehydration Issue

WARNING: Do not skip this step or you will waste hours of your life debugging. I wasted two days debugging flashes of unstyled content the first time I implemented dark mode - learn from my mistakes.

Because Gatsby builds pages long before they're rendered and served to the end-user's web browser, we have to take a couple additional steps when using dynamic state values.

If you want to read more about server-side rendering and Gatsby's webpack -- be my guest. In fact, you probably should read about Gatsby's Browser APIs. But for sake of brevity, let me sum it up like this:

You need to wrap every page with your React.useState component in Gatsby. Luckily, we can use Gatsby's built in API via the gatsby-browser.js and gatsby-ssr.js files. The syntax and content of the files are the exact same:

gatsby-browser.js

import React from "react"
import { DarkModeState } from "./src/components/UI/ThemeHandler"

export function wrapRootElement({ element, props }) {
  return <DarkModeState {...props}>{element}</DarkModeState>
}

gatsby-ssr.js

import React from "react"
import { DarkModeState } from "./src/components/UI/ThemeHandler"

export function wrapRootElement({ element, props }) {
  return <DarkModeState {...props}>{element}</DarkModeState>
}

Layout.js

We're almost to the end! The Layout provides our styles to the rest of our app via Material-UI's ThemeProvider.. Our approach (from a high-level) is:

Import our light/dark themes
Import our theme handler (darkModeContext)
Check the users localStorage to see if a preferred theme is already set in a useEffect function
If not, set the users preferred theme to the default (darkMode: false)
Wrap our component with our dynamic theme (either light or dark) via the ThemeProvider

Importantly, we need to also import and include the <CssBaseline /> component from Material-UI for the ThemeProvider to work.

The code for this is hardly worth elaborating on, so I'll let it speak for itself:

import React, { useContext, useEffect } from "react"
import CssBaseline from "@material-ui/core/CssBaseline"
import { ThemeProvider } from "@material-ui/core/styles"
import { darkTheme, lightTheme } from "./Theme"
import { darkModeContext } from "./ThemeHandler"

const Layout = ({ children }) => {
  const DarkModeContext = useContext(darkModeContext)
  const { darkMode, setDarkMode } = DarkModeContext

  useEffect(() => {
    const theme = localStorage.getItem("preferred-theme")
    if (theme) {
      const themePreference = localStorage.getItem("preferred-theme")
      if (themePreference === "dark") {
        setDarkMode(true)
      } else {
        setDarkMode(false)
      }
    } else {
      localStorage.setItem("preferred-theme", "light")
      setDarkMode(true)
    }
  }, [])

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <CssBaseline />
      <main>{children}</main>
    </ThemeProvider>
  )
}

Index.js (The final step!)

If you've made it this far, pat yourself on the back. This is the final (and simplest) step before you'll have a functioning dark mode toggle.

Let's not waste any more time.

First, we need to wrap our Index Page with our Layout component.
Then, we need to create a button to toggle the theme
We need to create an onClick function for the button, handleThemeChange
Inside the function, we update localStorage and setDarkMode either true or false using our Context Provider:

import React, { useContext } from "react"
import Layout from "../components/UI/Layout"
import Button from "@material-ui/core/Button"
import { darkModeContext } from "../components/UI/ThemeHandler"

const IndexPage = () => {
  const DarkModeContext = useContext(darkModeContext)
  const { darkMode, setDarkMode } = DarkModeContext

  const handleThemeChange = () => {
    if (darkMode) {
      localStorage.setItem("preferred-theme", "light")
      setDarkMode(false)
    } else {
      localStorage.setItem("preferred-theme", "dark")
      setDarkMode(true)
    }
  }

  return (
    <Layout>
        <Button
          variant="contained"
          color="secondary"
          size="medium"
          onClick={handleThemeChange}
        >
          Toggle {darkMode ? "Light" : "Dark"} Theme
        </Button>
    </Layout>
  )
}

export default IndexPage

Boom! Just like that, you have a toggleable dark/light mode with Gatsby and Material-UI.

Finished Product

Live Deployed Site

View on CodeSandbox

View the Github Repo

Did you find this article helpful?

If you read this whole article, thank you. I hope you learned something valuable.

If you did, would you take a second to share the article by clicking below? It helps our cause immensely!

Make sure to also click the follow button to get notified when new posts go live 🔔