I made a Hacker News reader using Next.js

Jeff Jadulco — Sun, 24 Jan 2021 12:48:05 +0000

I want to start the year by making a simple project to add to my portfolio. Last year I found myself browsing Hacker News more than Reddit and I thought why not make my own reader using Hacker News API?

View it here

Things to note

Next.js has this feature Incremental Static Regeneration since version 9.5. It basically lets you update and re-generate your page without causing user-facing loading or hiccups.

It is perfect for this project since HN's top posts aren't updated frequently. So, I can cache a static page and only update it on a configurable frequency (in seconds) that I can configure.

How to Dark Mode in React and Tailwind CSS

Jeff Jadulco — Wed, 29 Jul 2020 16:14:17 +0000

Dark mode is the first feature I added in my website. I really didn't know how to do it at first, especially I'm using Tailwind for my styling. I'm sure there are plugins available to use but I want to implement it myself in order to learn more about React and CSS.

Good thing I came across this beautiful article by Josh Comeau: The Quest for the Perfect Dark Mode. Two things became clear to me: CSS variables and prefers-color-scheme media query.

In this post, I will walk you through my process on how to implement dark mode in a Gatsby and Tailwind CSS project.

💡 This tutorial assumes that you have a basic understanding of CSS variables and React's Context API.

🧾 This project uses Tailwind, follow their documentation on how to install and setup Tailwind.

🚀 You can find the source in GitHub and the demo here.

Adding our CSS variables

First, let's declare all our css variables in our main css file. If you don't know which file it is, it's where you put the tailwind imports.

In my website I tried to stick with five colors: primary, secondary, and accent, for both background and texts. This will differ based on your design, but in my case, I already knew what colors I needed because I designed my website in Figma beforehand.

Next, add .light and .dark CSS classes and assign the colors for each variables. Then use the @apply directive in the root selector to apply a default theme for your page.

/* index.css */

:root {
  @apply .light;
}

.dark {
  --color-bg-primary: #2d3748;
  --color-bg-secondary: #283141;
  --color-text-primary: #f7fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-accent: #81e6d9;
}

.light {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #edf2f7;
  --color-text-primary: #2d3748;
  --color-text-secondary: #4a5568;
  --color-text-accent: #2b6cb0;
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Extending Tailwind CSS

In order to use the css variables we created, we must extend the tailwind configuration.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      backgroundColor: {
        primary: "var(--color-bg-primary)",
        secondary: "var(--color-bg-secondary)",
      },
      textColor: {
        accent: "var(--color-text-accent)",
        primary: "var(--color-text-primary)",
        secondary: "var(--color-text-secondary)",
      },
    },
  },
}

These extensions will now be included in Tailwind classes

🚀 Install this VS Code Extension for that sweet, sweet, Tailwind intellisense.

Adding a toggle

Before we create a way for the user to toggle the theme between light or dark theme, we must first prepare our React context.

Getting the initial theme

// themeContext.js

const getInitialTheme = _ => {
  if (typeof window !== "undefined" && window.localStorage) {
    const storedPrefs = window.localStorage.getItem("color-theme")
    if (typeof storedPrefs === "string") {
      return storedPrefs
    }

    const userMedia = window.matchMedia("(prefers-color-scheme: dark)")
    if (userMedia.matches) {
      return "dark"
    }
  }

  // If you want to use light theme as the default, return "light" instead
  return "dark"
}

We are doing multiple things here: first we check if we already have a stored value in the localStorage. If not, we check the media query if the user browser prefers a dark or light color scheme using prefers-color-scheme media query.

Creating our context

If you have no idea what a context is in React, please read their documentation. We are using the Context API to pass our theme data without having to pass the prop down manually in every component.

Our theme context must do the following:

Create a state for the theme and pass the getInitialTheme function that we wrote earlier to get the initial state value.
Create another function called rawSetTheme that will apply the .light or .dark class in the root element and save the theme in the localStorage
Create a side effect that will call the rawSetTheme whenever the value of theme changes.

// themeContext.js

export const ThemeContext = React.createContext()

export const ThemeProvider = ({ initialTheme, children }) => {
  const [theme, setTheme] = React.useState(getInitialTheme)

  const rawSetTheme = theme => {
    const root = window.document.documentElement
    const isDark = theme === "dark"

    root.classList.remove(isDark ? "light" : "dark")
    root.classList.add(theme)

    localStorage.setItem("color-theme", theme)
  }

  if (initialTheme) {
    rawSetTheme(initialTheme)
  }

  React.useEffect(
    _ => {
      rawSetTheme(theme)
    },
    [theme]
  )

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

Using the context provider

For our components to use the context, let's make the ThemeProvider as the Higher Order Component (HOC).

// layout.js

import { ThemeProvider } from "./themeContext"

const Layout = ({ children }) => {
  return (
    <ThemeProvider>
      <Header />
      <main>{children}</main>
    </ThemeProvider>
  )
}

Adding the toggle functionality

Now that we have our context ready, let's create a toggle component that will let the user switch the theme.

Use the ThemeContext to get the theme and setTheme.
Set the checkbox's checked attribute to true when the theme is equal to dark
Call the setTheme on the onChange event.

// toggle.js

export const Toggle = () => {
  const { theme, setTheme } = React.useContext(ThemeContext)

  function isDark() {
    return theme === "dark"
  }

  return (
    <label>
      <input
        type="checkbox"
        checked={isDark()}
        onChange={e => setTheme(e.target.checked ? "dark" : "light")}
      ></input>
      Dark Mode
    </label>
  )
}

Yay!

And there you have it! Our toggle is not as fancy as it looks, but you can do the same logic using a button or a different component.

This solution isn't perfect and there's a small caveat with this: page load flicker. Josh made a great write up about how he solved it in the same article.

My personal website built with Gatsby and tailwindcss

Jeff Jadulco — Fri, 03 Jul 2020 16:18:58 +0000

After a month of research, designing, and coding, I'm happy that I was able to make my personal website. Developing with Gatsby is so fast due to their plugins and clear documentation. Styling with tailwindcss is just 💯

You can view my site here: jeffjadulco.com

DEV Community: Jeff Jadulco