DEV Community: Corey O'Donnell

How to Focus an Input Field with a Hotkey in React

Corey O'Donnell — Wed, 01 May 2024 17:11:47 +0000

Have you ever wondered how to set a hotkey to focus an input field in your React application? Follow along to learn how. We'll even handle showing different hotkeys based on whether the user is on a Mac or Windows system.

Implementation

const SearchInput: FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [actionKey, setActionKey] = useState<string>('');

  useEffect(() => {
    // check if navigator is defined to prevent unexpected errors if browser does not support
    if (typeof navigator !== 'undefined') {
      if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
        setActionKey('⌘K');
      } else {
        setActionKey('CtrlK');
      }
    }

    const handleKeyPress = (event: KeyboardEvent) => {
      let hotkey = false;
      if (typeof navigator !== 'undefined') {
        if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
          hotkey = event.metaKey && event.key === 'k';
        } else {
          hotkey = event.ctrlKey && event.key === 'k';
        }
      }

      if (hotkey && inputRef.current) {
        inputRef.current.focus();
      }
    };

    // Add event listener when the component mounts
    document.addEventListener('keydown', handleKeyPress);

    // Clean up the event listener when the component unmounts
    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  return (
    <div className="relative">
      <input
        ref={inputRef}
        type="text"
        className="peer block w-full border-0 px-0 py-3 text-xl focus:ring-0  sm:leading-6"
      />
      {actionKey && (
        <div className="absolute inset-y-0 right-0 flex py-3 pr-1.5">
          <kbd className="inline-flex items-center rounded border border-zinc-300 px-1 font-sans text-xs text-zinc-400">
            {actionKey}
          </kbd>
        </div>
      )}
    </div>
  );
};

We use the useRef hook to create a reference to the input element.
We use the useEffect hook to add an event listener for the specified hotkey.
navigator.platform is used to determine if the user is using a mac or windows machine so we know what hotkey to display and listen to.
calling inputRef.current.focus() will focus the input if the hotkey is pressed
<kbd /> html element is used to denote textual user input from a keyboard MDN
navigator.platform is technically deprecated and you could use navigator.userAgent as an alternative.

Why Neovim is My Text Editor of Choice

Corey O'Donnell — Tue, 23 Apr 2024 15:16:01 +0000

As a software engineer, choosing and understanding your text editor is important part of your work, as it impacts your productivity and workflow efficiency. It's like choosing the perfect tool for any trade - you need to know what tool to use and how to use it effectively if you want to excel. For me, I use Neovim as my editor and I have been using it for a little over a year now.

Vim and its Benefits

Vim is a text editor that has been around for decades. Almost all servers running usually comes with some form of Vim preinstalled. It highly customizable and its popularity stems from serveral benefits:

Speed and Efficiency

Vim is designed to be operated entirely with the keyboard, allowing for lightning-fast navigation and editing. Once you've mastered Vim's commands, you can perform tasks much more quickly than with a traditional mouse-driven text editor. Imagine never having to touch your mouse again while programming.

Customizability

Vim is highly customizable, allowing users to tailor the editor to their specific needs. Whether it's customizing key bindings, installing plugins, or tweaking settings, Vim can be adapted to suit any workflow.

Modal Editing

One of Vim's most powerful features is its modal editing system. Vim has different modes for editing, navigation, and command entry, allowing users to perform a wide range of tasks without ever lifting their hands from the keyboard.

Extensibility

Vim's plugin system allows users to extend the editor's functionality in countless ways. Whether it's adding support for new file types, integrating with external tools, or automating common tasks, Vim's extensive plugin ecosystem has you covered.

In comes Neovim

While Vim is an excellent text editor, it does have some limitations. For instance, it's primarily maintained by a single lead developer. Its built using its own programming language making it harder for users to build and maintain plugins. Enter Neovim, a modern fork of Vim that seeks to address many of its shortcomings while still keeping vim at its core.

Developed in 2014 as a community-driven effort to modernize the Vim codebase, Neovim builds on Vim's features while also introducing several improvements and new capabilities. Some of the key features of Neovim include:

Built in support for LSP

Language Server Protocol (LSP) is a protocol that allows programming languages to be easily supported across any editor. The LSP enables features such as code highlighting, syntax checking, code completion, inlay hints, type hints. Neovim ships with direct support for LSP making it more performant and easier to maintain vs dealing with external plugins.

Improved Plugin Architecture

Neovim is built and configured using the Lua programming language vs vimscript. This makes it easier to develop and maintain plugins. The Lua API also allows for more powerful scripting and performance.

Actively Maintained and Developed

Neovim is developed by a community of contributors and is constantly being improved and updated with new features and bug fixes.

Customizing Neovim

Customization is a crucial aspect of any text editor, as it allows users to tailor the editor to their specific needs and preferences. Neovim takes customization to the next level, offering a wide range of options for configuring the editor to fit your workflow. Customizing your text editor is essential for improving productivity and efficiency.

My Experience with Customizing Neovim

Personally, customizing Neovim has been a game-changer for me. By tweaking the editor to fit my workflow, I've been able to significantly increase my productivity and focus more on writing code and less on repetitive tasks.

Some of the customizations I've made to Neovim include:

Custom key mappings: I've defined custom key mappings to quickly access commonly used commands and plugins, allowing me to perform tasks more efficiently.
Syntax highlighting and theme: I've customized Neovim's syntax highlighting and theme to make it easier to read and navigate my code.
Plugin configuration: I've installed and configured several plugins to extend Neovim's functionality, such as auto-completion, code linting, and version control integration, and file navigation.

I also enjoy tinkering around with Neovim and learning about different plugins and workflows other engineers use. Whenever I am not feeling motivated on my projects, its usually something fun to take my mind off of things but still stay in the scope of programming.

You can checkout my git repository where I keep all my configuration here: Vinevim

Conclusion

I believe every Software Engineer should have a deep understanding of their text editor in order for them to be efficient at writing code. You can accomplish this with any text editor; you just have to put in the work. I chose Neovim as my editor as it is built on top of vim and easily customizable. It gave me a deeper understanding of how editors work under the hood and it improved my speed and efficiency at programming. I highly encourage you to give it a try and experience the journey of Vim and Neovim.

What is a Design System and Why Is It Important for Software Engineering?

Corey O'Donnell — Fri, 19 Apr 2024 15:54:25 +0000

Design systems are essential tools for software engineers as they provide a structured framework for maintaining consistency and coherence in product design. By offering clear guidelines and standards, design systems streamline the development process, making it easier for engineers to collaborate with designers and implement design elements seamlessly into their code. These systems promote modular and scalable architecture, enabling engineers to efficiently reuse components, update interfaces, and scale applications over time. Additionally, design systems facilitate accessibility and usability by incorporating best practices for inclusive design, ensuring that software products are accessible to all users. Overall, design systems play a vital role in software engineering by promoting efficiency, consistency, and user satisfaction throughout the development lifecycle.

What is a Design System?
A design system serves as a comprehensive set of standards and building blocks aimed at maintaining consistency across your product's design. While design and UI engineering can present challenges, adhering to these established rules can significantly streamline the process and unify the overall design.

When considering a design system, it's helpful to envision it as a hierarchical structure comprising various components:

Design System Container
At the top of the hierarchy is the design system container, which encapsulates all other components. It serves as the repository for the rules and principles governing your product's design. Here, you store essential elements such as design tokens and documentation outlining implementation guidelines.

Component Libraries
Nested within the design system container are component libraries, which adhere to the established rules and guidelines. These libraries consist of reusable elements—such as buttons, input fields, and layouts—that are consistently utilized throughout the product. By adhering to the foundational elements, these components ensure uniformity in visual presentation.

Foundation Elements
Foundation elements form the basis of your design's aesthetic appeal. This level encompasses aspects such as your color palette, typography, and icons. By leveraging the design tokens and rules defined in the design system container, you can construct themes that seamlessly integrate with your component library, facilitating easy customization and maintenance.

Benefits of a Design System for Software Engineering
In addition to enhancing the user experience and maintaining visual consistency, design systems offer significant advantages for software engineering:

Streamlined Development Process
Design systems provide a shared language and framework for designers and developers, making it eaiser for collaboration and communication. By establishing clear guidelines and standards, they reduce ambiguity and minimize the need for back-and-forth iterations between design and development teams. This streamlined process accelerates development cycles and ensures faster time-to-market for products.

Consistent Implementation
One of the primary benefits of a design system for software engineering is the promotion of consistent implementation. By encapsulating design rules and principles within component libraries, developers can easily access and reuse pre-defined elements throughout the application. This consistency not only improves code maintainability but also reduces the likelihood of introducing errors or inconsistencies during development.

Modular and Scalable Architecture
Design systems encourage a modular and scalable architecture by breaking down complex interfaces into reusable components. This modular approach facilitates code reuse, making it easier to update, extend, and scale applications over time. Additionally, by separating design concerns from business logic, design systems promote a more organized and maintainable codebase, enhancing overall software quality and developer productivity.

Improved Accessibility and Usability
By incorporating accessibility best practices into design system components, software engineers can ensure that their products are usable by a diverse range of users, including those with disabilities. Design systems provide guidelines for creating accessible interfaces, such as proper color contrast ratios and keyboard navigation support, enabling developers to build inclusive and user-friendly applications from the ground up.

Enhanced Developer Experience
Design systems contribute to an enhanced developer experience by providing comprehensive documentation, code examples, and tooling support. Developers can easily reference design system guidelines and documentation to understand how to implement various components and adhere to design standards. This helps create an efficient and enjoyable development process and simplies the work required.

Real-time Page Views with Next.js and Supabase

Corey O'Donnell — Thu, 31 Dec 2020 14:27:11 +0000

Let's Build our own real-time page view tracker using Next.js as the frontend framework and a Postgres database hosted by Supabase.

One of the best ways to understand how your blog posts are performing is by tracking page views. You can begin to understand what posts and information your readers care more about based on number of views. You can then focus your efforts on the more important content.

Many people use tools like Google or Fathom Analytics for tracking traffic. With the rise of Ad-Blockers, your traffic collected with these services are not necessarily accurate.

Why not build a page view tracker with your own API routes? The beauty of doing so, ad-blockers will not risk blocking the request without possibly breaking website functionality. This will allow for a more accurate count of page views.

Tools Used

Next.js

We will be using Next.js as our frontend framework. It gives us the power of prerendered React.js, serverless API routes, and typescript with minimal configuration.

Supabase

Supabase is an open-source alternative to Firebase. They offer an API wrapped Postgres Database with real-time subscriptions.

Set up your database hosted by Supabase

Sign in or Sign up for Supabase. Then create a new project. You can either use an existing organization (if you have one) or create a new one.

Enter your project name, add a strong password for your database, and select which region you want your database.

Once the database finishes setting up, we need to create a table to store our pages and the total view count. Navigate to the SQL editor and switch to the Query-1 tab.

You can then paste the bellow SQL query and run it to create a new table called pages with columns id, slug, view_count, and updated_at.

CREATE TABLE pages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  slug text UNIQUE NOT NULL,
  view_count bigint DEFAULT 1 NOT NULL,
  updated_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL
);

We need to run one more query to add a stored procedure to our database. A stored procedure allows us to add or extend functionality to the database.

Let's first breakdown the query below.

CREATE OR REPLACE FUNCTION increment_page_view(page_slug TEXT)
RETURNS void
LANGUAGE plpgsql
AS $$
BEGIN
    IF EXISTS (SELECT FROM pages WHERE slug=page_slug) THEN
        UPDATE pages
        SET view_count = view_count + 1,
            updated_at = now()
        WHERE slug = page_slug;
    ELSE
        INSERT into pages(slug) VALUES (page_slug);
    END IF;
END;
$$;

This adds a function called increment_page_view that has a parameter of page_slug.
It sets the language to plpgsql which is specific to Postgres.
When you trigger the function, it checks to see if a row exists where slug equals the parameter page_slug.
If it exists, update the row by adding 1 to view_count and setting updated_at with now().
If it does not exist, insert a new row with slug equal to page_slug.

Now that we know what this function actually does, open a new query tab in the SQL editor. Paste the query in and run it.

Your database should be fully set up to track page views now!

The final thing we need to do is get your API keys located in API under settings.

Now add them to your next.js project's .env file.

NEXT_PUBLIC_SUPABASE_URL=             # URL
NEXT_PUBLIC_SUPABASE_CLIENT_KEY=      # public
SUPABASE_SERVICE_KEY=                 # service_role

Adding the page view feature to Next.js

Let's first install some dependencies we will use:

@supabase/supabase-js: Client to connect and query your database hosted by Supabase.
swr: React Hook library for data fetching.

npm install @supabase/supabase-js swr

Now you can create a file lib/supabase-admin to initialize your Supabase client.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
const supabaseServerKey: string = process.env.SUPABASE_SERVICE_KEY || '';

const SupabaseAdmin = createClient(supabaseUrl, supabaseServerKey);

export { SupabaseAdmin };

Important: Only use your ServerKey on server side logic. You do not want to expose your ServerKey publicly. If you want to use the client on your frontend code, use NEXT_PUBLIC_SUPABASE_CLIENT_KEY instead of SUPABASE_SERVICE_KEY

We will need to create an API route to increment and fetch the page views. /pages/api/views/[slug].ts

import { NextApiRequest, NextApiResponse } from 'next';
import { SupabaseAdmin } from '@lib/supabase-admin';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    // Call our stored procedure with the page_slug set by the request params slug
    await SupabaseAdmin.rpc('increment_page_view', { page_slug: req.query.slug });
    return res.status(200).json({
      message: `Successfully incremented page: ${req.query.slug}`
    });
  }

  if (req.method === 'GET') {
    // Query the pages table in the database where slug equals the request params slug.
    const { data } = await SupabaseAdmin.from('pages').select('view_count').filter('slug', 'eq', req.query.slug);

    if (data) {
      return res.status(200).json({
        total: data[0]?.view_count || null
      });
    }
  }

  return res.status(400).json({
    message: 'Unsupported Request'
  });
};

We can now create a component to fetch and display the page view count. /components/PageViews.tsx

import useSWR from 'swr';
import { FC } from 'react';

interface PageViewsProps {
  slug: string;
}

const fetcher = async (input: RequestInfo) => {
  const res: Response = await fetch(input);
  return await res.json();
};

const PageViews: FC<PageViewsProps> = ({ slug }) => {
  const { data } = useSWR(`/api/views/${slug}`, fetcher);

  return <>{data?.total ? `${data.total} views` : `–––`}</>;
};

export default PageViews;

Finally, you can add the logic to your pages to increment pages views and display it. Example: /components/BlogLayout.tsx

import { FC, useEffect } from 'react';
import PageViews from '@components/PageViews';

interface BlogLayoutProps {
  slug: string;
}

const BlogLayout: FC<BlogLayoutProps> = ({ slug }) => {
  useEffect(() => {
    fetch(`/api/views/${slug}`, {
      method: 'POST'
    });
  }, [slug]);

  return (
    <div>
      <h1>{slug}</h1>
      <div>
        <PageViews slug={slug} />
      </div>
    </div>
  );
};

export default BlogLayout;

Whenever you load your page, it should make a POST request to increment your page views. If you wanted, you could check out the Supabase Table Editor view and see your table update as you increment page views on your website.

Bam! You now have a real-time page view tracker for your blog or whatever page you want.

Supabase Docs
Next.js Docs
SWR Docs
Follow me on Twitter for random posts about tech and programming.

Create a Dynamic Sitemap with Next.js

Corey O'Donnell — Fri, 18 Dec 2020 15:01:06 +0000

One of the best ways to drive traffic to your website is to have strong Search Engine Optimization (SEO). You can provide search engines with all the URLs for your website using a Sitemap. This allows for easier indexing and more efficient crawling by the search engines.

Maintaining a static sitemap can be tedious and more work if your website is always changing. The best solution is to dynamically create one.

Let's check out a couple of ways we can accomplish this.

Create a sitemap using a script at build time

If all of your content and pages are local in your project, you can easily use a script at build time to create a sitemap.xml.

My blog uses MDX files instead of a CMS, so I do not have to worry about my content changing after build time.

My script uses globby to traverse the file system and return all my routes. First thing we need to do is install it as a dev dependency.

npm i -D globby

Then we can create the script:

scripts/generate-sitemap.js

const fs = require('fs');
const globby = require('globby');

const generateSitemap = async () => {
  // Fetch all routes based on patterns
  // Your folder structure might be different so change bellow to match your needs
  const pages = await globby([
    'pages/**/*.{ts,tsx,mdx}', // All routes inside /pages
    '_content/**/*.mdx', // All MDX files inside my /_content
    '!pages/**/[*.{ts,tsx}', // Ignore my dynamic route index Example /pages/blog/[slug].tsx
    '!pages/_*.{ts,tsx}', // Ignore next.js files
    '!pages/api', // Ignore API routes
    '!pages/admin.tsx' // Ignore pages not meant to be indexed
  ]);

  const urlSet = pages
    .map((page) => {
      // Remove none route related parts of filename.
      const path = page
        .replace('pages', '')
        .replace('_content', '')
        .replace(/(.tsx|.ts)/, '')
        .replace('.mdx', '');
      // Remove the word index from route
      const route = path === '/index' ? '' : path;
      // Build url portion of sitemap.xml
      return `<url><loc>https://codebycorey.com${route}</loc></url>`;
    })
    .join('');

  // Add urlSet to entire sitemap string
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urlSet}</urlset>`;

  // Create sitemap file
  fs.writeFileSync('public/sitemap.xml', sitemap);
};

module.exports = generateSitemap;

To run the script at build time, you can create a next.config.js file. This will modify Next.js build process.

const generateSitemap = require('./scripts/generate-sitemap');
const generateRSS = require('./scripts/generate-rss');

module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      generateSitemap();
    }
    return config;
  }
};

Now when you build your website, you should see a freshly created public/sitemap.xml.

Lastly, I recommend adding public/sitemap.xml to your .gitignore since it is a generated file.

Create a sitemap using a route

You cannot create a sitemap at build time When you are using a content management system (CMS). It might work when you first build your project, but if you push out new content after the build, your sitemap will be outdated.

What we could do is create an API route to fetch the data, and we rewrite the sitemap request to use the API route.

First create the API route:

pages/api/sitemap.ts

export default async (req, res) => {
  // Fetch data from a CMS.
  const resp = await fetch('MOCK_URL');
  const externalPosts = await resp.json();

  const routes = externalPosts.map((post) => `/blog/${posts.slug}`);
  const localRoutes = ['/index', '/blog'];

  const pages = routes.concat(localRoutes);

  const urlSet = pages
    .map((page) => {
      // Remove none route related parts of filename.
      const path = page
        .replace('pages', '')
        .replace('_content', '')
        .replace(/(.tsx|.ts)/, '')
        .replace('.mdx', '');
      // Remove the word index from route
      const route = path === '/index' ? '' : path;
      // Build url portion of sitemap.xml
      return `<url><loc>https://codebycorey.com${route}</loc></url>`;
    })
    .join('');

  // Add urlSet to entire sitemap string
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${urlSet}</urlset>`;

  // set response content header to xml
  res.setHeader('Content-Type', 'text/xml');
  // write the sitemap
  res.write(sitemap);
  res.end();
};

Now we can create a route rewrite to make /sitemap.xml actually call /api/sitemap.

Create next.config.js and add:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/sitemap.xml',
        destination: '/api/sitemap'
      }
    ];
  }
};

Now when you navigate to http://localhost:3000/sitemap.xml, you should see your sitemap based on local files and your CMS.

Bonus: Robots.txt

One additional thing you can add to your website to improve SEO is a robots.txt (AKA robots exclusion standard). This basically tells search engines which routes they are not allowed to index.

Create public/robots.txt and add

User-agent: *
Disallow:

Sitemap: https://your-url.com/sitemap.xml

This will tell search engines they are welcome to crawl your entire website.

If you would like to block any pages from being indexed, add it as disallow field.

User-agent: *
Disallow: /admin
Disallow: /secret-page

Sitemap: https://your-url.com/sitemap.xml

Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.
Nest.js Docs

Prerender React using Next js

Corey O'Donnell — Thu, 05 Nov 2020 14:08:13 +0000

When you want to improve your website's performance or search engine optimization (SEO), prerendering your application is a must. Next.js is the perfect framework to add server-side rendering (SSR) or static site generation (SSG) for your React web app.

The problems caused by React

Whenever you load the website, the first thing to load is the HTML. The HTML then tells the browser to load additional resources such as styles and JavaScript.

Before JavaScript frameworks became popular, most websites were built with HTML and only enhanced with JavaScript. When the browser loaded the website, most of the content was in the HTML and was instantly displayed while the extra JavaScript loaded later.

With React, nothing gets displayed until all of your JavaScript loads. Your HTML is nearly empty and React injects your content in your HTML with JavaScript.

Example HTML with React.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

This leads multiple problems:

When the browser is loading the JavaScript, the screen is blank because <div id="root"></div> does not show anything. Depending on the size of your JavaScript bundle, this could lead to your visitors staring at a white screen for a couple of seconds. This is poor UX.
Most SEO crawlers do not have JavaScript enabled. DuckDuckGo, Google, Bing and any other search engine would not actually know what is on your website since it requires JavaScript to display the content. You will not be ranked at all on Search Engines.

Server-Side Rendering (SSR)

Webpages are generated on your server for every request. Data required by your page can always be fetched allowing your page to always be up to date.

One of the draw backs is a slower time to first byte (TTFB) since the server is waiting for data and generating the page.

Static Site Generation (SSG)

At build time, your app will fetch all the data required and compile it down to static webpages. This provides the best performance and can easily be cached on a CDN.

If your data changes between builds, you might end up causing your webpage to display stale data.

Methods for Prerendering using Next.js

Next.js offers SSR and SSG out of the box. All you have to do is add either getStaticProps for (SSG) or getServerSideProps for (SSR) on your pages.

getStaticProps

getStaticProps is a server-side function that will only be called at build time. The build will then use the response from getStaticProps to generate a static webpage.

Due to it being called server-side, it is okay to add any sensitive logic or direct calls to databases without worry.

Since stale data is a problem with static generated pages, there is an option you can set to revalidate your static page and rebuild it if data changes. revalidate: 60 will check your data every 60 seconds and rebuild the page if needed.

Example Use:

// This function gets called at build time on server-side.
export async function getStaticProps() {

  const res = await fetch('https://.../data')
  const data = await res.json()

  // By returning { props: data }, the Dashboard component
  // will receive `data` as a prop at build time
  return {
    props: {
      data,
    },
    // Check if data changes every 60 seconds. 
    // Rebuild page if different
    revalidate: 60, 
  }
}

// data will be populated at build time by getStaticProps()
export default function Dashboard({ data }) {
  return (
      <div>{data}</div>
  )
}

See more details and options from the official documentation

getServerSideProps

getServerSideProps is similar to getStaticProps but is called every time the page loads instead of at build time. This ensures that all of your initial data is up to date on every load.

Again, due to it being called server-side, it is okay to add any sensitive logic or direct calls to databases without worry.

Since this is called on every load, you do not need to revalidate like getStaticProps. This also leads to a slower load time since you are no longer serving a static file, but have to rebuild on every load.

Example Use:

// This function gets called at build time on server-side.
export async function getServerSideProps() {

  const res = await fetch('https://.../data')
  const data = await res.json()

  // By returning { props: data }, the Dashboard component
  // will receive `data` as a prop at build time
  return {
    props: {
      data,
    }
  }
}

// data will be populated at build time by getServerSideProps()
export default function Dashboard({ data }) {
  return (
      <div>{data}</div>
  )
}

See more details and options from the official documentation

Best choice

If performance is your number one priority, SSG is the better solution. You are not waiting for your server to respond and your static generated site can be cached across a CDN.

If you are worried about stale data, you can have a static generated shell with loading states and fetch the data client-side in parallel. You get the benefit of having a fast TTFB while keeping your data up to date.

Next.js Docs
Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.

Authentication for Next.js using Firebase

Corey O'Donnell — Tue, 13 Oct 2020 13:13:42 +0000

On my Next.js project, I wanted to add some authentication. I decided to use Firebase for my user management and data store.

What I needed:

OAuth using Twitter
client-side authentication
Protected pages
server-side authentication

Assumptions: You already have a base Next.js project setup and you created a project in Firebase.

Setup Firebase

Install Firebase's packages

npm i --save firebase firebase-admin

Create a env.local file and add all the necessary Firebase keys needed

NEXT_PUBLIC_FIREBASE_API_KEY=********************
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=***********
NEXT_PUBLIC_FIREBASE_PROJECT_ID=*********

FIREBASE_PRIVATE_KEY=*********************
FIREBASE_CLIENT_EMAIL=*************
FIREBASE_DATABASE_URL=*************

Now we need to create some files to handle connecting to Firebase.

lib/firebase.ts - handling OAuth and maintaining authentication.

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/functions';
import 'firebase/firestore';

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
  });
}

export default firebase;

lib/firebase-admin.ts - verifying tokens server side.

import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      privateKey: process.env.FIREBASE_PRIVATE_KEY,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL
    }),
    databaseURL: process.env.FIREBASE_DATABASE_URL
  });
}

const db = admin.firestore();
const auth = admin.auth();

export { db, auth };

lib/db.ts - database queries

import firebase from '../lib/firebase';

const firestore = firebase.firestore();

export function updateUser(uid: string, data: any) {
  return firestore.collection('users').doc(uid).update(data);
}

export function createUser(uid: string, data: any) {
  return firestore
    .collection('users')
    .doc(uid)
    .set({ uid, ...data }, { merge: true });
}

Now we can easily use these lib files to build hooks for maintaining our user's session and auth state.

Building the Auth Hook.

I decided to use the context API for handling auth state. This way I can easily access any of the auth variables throughout the application.

First, I created lib/auth.tsx.

Then I set up the context portion of the hook

interface AuthContext {
  auth: Auth | null;
  loading: boolean;
  signInWithTwitter: () => Promise<void>;
  signOut: () => Promise<void>;
}

// Create context with a default state.
const authContext: Context<AuthContext> = createContext<AuthContext>({
  auth: null,
  loading: true,
  signInWithTwitter: async () => {},
  signOut: async () => {}
});

export function AuthProvider({ children }) {
  const auth = useProvideAuth();
  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

// Helper to easily get auth context within components
export const useAuth = () => useContext(authContext);

Time for the more complicated part, implementing useProvideAuth().

function useProvideAuth() {
  const [auth, setAuth] = useState<Auth | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  /**
   * Callback function used for firebase.auth.onAuthStateChanged().
   * Takes the user object returned and formats it for my state.
   * We fetch the idToken and append it to my auth state and store it.
   */
  const authStateChanged = async (authState: firebase.User | null) => {
    // Formats response into my required state.
    const formattedAuth = formatAuth(authState);
    // Fetch firebase auth ID Token.
    formattedAuth.token = await authState.getIdToken();
    // Stores auth into state.
    setAuth(formattedAuth);
    // Sets loading state to false.
    setLoading(false);
  };

  /**
   * Callback function used for response from firebase OAuth.
   * Store user object returned in firestore.
   * @param firebase User Credential
   */
  const signedIn = async (resp: firebase.auth.UserCredential) => {
    // Format user into my required state.
    const storeUser = formatAuth(resp.user);
    // firestore database function
    createUser(storeUser.uid, storeUser);
  };

  /**
   * Callback for when firebase signOut.
   * Sets auth state to null and loading to true.
   */
  const clear = () => {
    setAuth(null);
    setLoading(true);
  };

  /**
   * Triggers firebase Oauth for twitter and calls signIn when successful.
   * sets loading to true.
   */
  const signInWithTwitter = () => {
    setLoading(true);
    return firebase.auth().signInWithPopup(new firebase.auth.TwitterAuthProvider()).then(signedIn);
  };

  /**
   * Calls firebase signOut and with clear callback to reset state.
   */
  const signOut = () => {
    return firebase.auth().signOut().then(clear);
  };

  /**
   * Watches for state change for firebase auth and calls the handleUser callback
   * on every change.
   */
  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(authStateChanged);
    return () => unsubscribe();
  }, []);

  // returns state values and callbacks for signIn and signOut.
  return {
    auth,
    loading,
    signInWithTwitter,
    signOut
  };
}

Using Auth Hook

I added AuthProvider to my pages/_app.tsx.

import { AppProps } from 'next/app';
import { AuthProvider } from '../lib/auth';

import '../styles/globals.css';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

Now we can use the AuthContext in our pages.

We can add a sign in button on pages/index.tsx. If we are authenticated, we can display a link and sign out button.

import { useAuth } from '../lib/auth';
import Link from 'next/link';
import { useEffect } from 'react';

export default function Home() {
  const { auth, signOut, signInWithTwitter } = useAuth();

  return (
    <div>
      {auth ? (
        <div>
          <Link href='/dashboard'>
            <a>Dashboard</a>
          </Link>
          <button onClick={() => signOut()}>Sign Out</button>
        </div>
      ) : (
        <button onClick={() => signInWithTwitter()}>Sign In</button>
      )}
    </div>
  );
}

I want my dashboard route to be protected with auth. If user is not authenticated, it will redirect back to the index page.

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useAuth } from '../lib/auth';

export default function Dashboard() {
  const { auth, loading, signOut } = useAuth();

  const router = useRouter();

  useEffect(() => {
    // If auth is null and we are no longer loading
    if (!auth && !loading) {
      // redirect to index
      router.push('/');
    }
  }, [auth, loading]);

  return (
    <div>
      <p>Dashboard: Hello World</p>
      {auth && (
        <div>
          <button onClick={() => signOut()}>Sign Out</button>
        </div>
      )}
    </div>
  );
}

Server-Side Authentication

Server-side authentication would be handled by passing the id token from the client to the API. The API would then verify the token on every request.

Let's first create a fetch util that passes the token. util/fetcher.ts.

const fetcher = async (url: string, token: string) => {
  const res = await fetch(url, {
    method: 'GET',
    headers: new Headers({ 'Content-Type': 'application/json', token }),
    credentials: 'same-origin'
  });

  return res.json();
};

export default fetcher;

We can then verify the token on the API route using firebase-admin.

API Route: pages/api/user.ts

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '../../lib/firebase-admin';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { uid } = await auth.verifyIdToken(req.headers.token);

    res.status(200).json({ uid });
  } catch (error) {
    res.status(401).json({ error });
  }
};

We can now make the API call to fetch the user data inside our dashboard page. I use the useSWR hook for handling API calls.

pages/dashboard.tsx

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import useSWR from 'swr';
import { useAuth } from '../lib/auth';
import fetcher from '../util/fetcher';

export default function Dashboard() {
  const { auth, loading, signOut } = useAuth();

  const router = useRouter();

  useEffect(() => {
    if (!auth && !loading) {
      router.push('/');
    }
  }, [auth, loading]);

  const { data } = useSWR(auth ? ['/api/user', auth.token] : null, fetcher);

  return (
    <div>
      <p>Dashboard: Hello World</p>
      {auth && (
        <div>
          <button onClick={() => signOut()}>Sign Out</button>
        </div>
      )}
      {data && <div>{data}</div>}
    </div>
  );
}

Conclusion

I now have working authentication for my web app using Firebase.

The user can sign in using Twitter's OAuth.
It creates the user and stores it in Firebase.
I have a protected route with a redirect if the user is not authenticated.
I have a protected endpoint that verifies the user's token on ever request.

Here is the Repository with working code for the article.

It might not be the best solution, but it gets the job done.

Nest.js Docs
Firebase Docs
SWR Docs
Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.

Dark Mode Toggle Using Tailwind CSS

Corey O'Donnell — Sat, 03 Oct 2020 02:29:57 +0000

Tailwind recently released an experimental setting that enables dark mode styles. It allows you to add a prefix to specific classes to only enable the styles when dark mode is enabled. It's currently labeled experimental and future versions might have breaking changes so use at your own risk.

<div class="bg-white text-black dark:bg-black dark:text-white"></div>

Enabling Dark Mode

To enable dark mode add the experimental object to your tailwind.config.js with darkModeVariant: true.

// tailwind.config.js
module.exports = {
  experimental: {
    darkModeVariant: true
  },
  // ...
}

The default strategy is using a media query and will set dark mode based on the operating system performances. This is great for keeping your website themed the way the user's computer is set but your user cannot easily toggle your websites theme without changing their operating system settings.

Tailwind offers a setting to use a class instead of the media query so you can toggle dark mode by adding and removed the .dark CSS class.

// tailwind.config.js
module.exports = {
  experimental: {
    darkModeVariant: true
  },
  dark: 'class',
  // ...
}

Example of using dark mode in your HTML

<body class="dark">
  <div class="bg-white text-black dark:bg-black dark:text-white"></div>
</body>

Toggle Button using React

I added a toggle button on my website using a simple react hook. The button with switch between

export default function App() {

  const [ darkMode, setDarkMode ] = useState(false);

  return (
    <div className={`w-full md:h-screen ${darkMode ? 'dark' : ''}`}>
      <div className="bg-gray-100 dark:bg-gray-900 dark:text-white">
          <button onClick={() => setDarkMode(!darkMode)}>
            {darkMode ? (
              <svg className="w-8 h-8 md:w-10 md:h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
                />
              </svg>
            ) : (
              <svg className="w-8 h-8 md:w-10 md:h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                />
              </svg>
            )}
          </button>
      </div>
    </div>
  )
}

Now I have a button that will switch between a sun and a moon icon based on whether dark mode is true or not.

Documentation for dark mode Tailwind CSS
Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.

Importance of typography

Corey O'Donnell — Tue, 29 Sep 2020 17:43:12 +0000

It may not feel like typography is that important, but it can have a major effect on your reader's experience. Typography is essentially the art and techniques for displaying your written words.

Typography can have positive and negative effects on your words without you realizing it.

Positive Effects of good typography:

Keep the readers more engaged.
Guide the readers focus to the more important content.
Persuade your readers based on mood and feeling.

Negative Effects of bad typography:

Disinterested in boring text.
Exhaustion when it's difficult to read.
Misleading or hard to follow.

Your reader's attention is the most important part of producing content. Think about how busy your reader might be. They have their own life and challenges. When they are offering their precious time and attention, you should make it easy for them. The less effort it takes for them to read, the more likely they will continue to read and provide their attention. Typography is not for you, it is for your reader.

Rules I learned for better typography

Try to always use justify left.
Most of your readers probably read left to right, top to bottom. Justify left will make this easier. Justify center only works with headings and things like invitations. It's also difficult to read when you have large paragraphs with difference sized rows. You should just stay away from forced justify. The spacing between words can leave rivers of spaces and look less appealing.
Use one font until you know how your fonts work together.
For every font you add, you need to understand more about typography. It is definitely possible to pick fonts that are complementary, but can be difficult. The best way to have them complementary is to use fonts with a different classification: serif, sans-serif, slab-serif.
Stay away from the goofy and monospaced fonts for body text.
Goofy can make it feel out of place unless it is follows your design. Monospaced fonts should be used for code blocks.
When choosing font weights, always skip a level. fine/medium, light/bold, medium/extra-bold
Always use multiples when choosing sizes for fonts and rules. 2x/4x, 2x/8x, 4x/8x
For body text on the web, stick to 15-25px.
The line space should be roughly 120-145%.
When using ALL CAPS, add extra letter spacing (5-12%).
Do not be afraid to play around with it. Just make small incremental changes.
Do not be afraid of negative (empty) space. Give your reader some room to breathe.

I am still learning and will continue to add more rules to my list. Maybe we can compare and share as you learn also.

Sources

Butterick's Practical Typography: Web Book
The Futur's Typography Manual: Youtube Video

Follow me on Twitter for random posts about tech and programming. I am also documenting my journey learning design.

Defeating Flash of Unstyled Text (FOUT)

Corey O'Donnell — Thu, 24 Sep 2020 19:41:27 +0000

I noticed when I loaded my personal site without cache, my text would first display without the correct font. It eventually restyle using the original font after everything loaded.

I was originally using a NPM package called typeface-roboto to load my font. This was awesome because I wanted to host the fonts myself instead of pulling from a CDN. I realized the styles included in the package was the reason for my Flash of Unstyled Text (FOUT).

I looked through the code inside the package and checked out the CSS files. Here is an example of how they were adding the font.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap; /* Line Causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

I noticed the @font-face styles were using font-display: swap;. When swap is set, the browser will give a very short time to load the font before it uses a fallback. Once the font is fully loaded, it will convert back to the expected font. This option is great from a performance standpoint but might affect user experience. If you set font-display: block, this will increase the amount of time the browser will have to fetch your fonts before it starts displaying anything on the page. block sacrifices performance for user experience.

My Solution

I pulled all the font files into my project instead of using the NPM package. Then inside my CSS, I loaded the fonts using font-display: block;

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: block; /* No longer causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

Since my websites design is heavily focused on typography. I was willing to sacrifice some performance to give my fonts a little more time to load before anything is displayed.

Follow me on Twitter for random posts about tech, programming, and working from home.

Fathom Analytics: Privacy-Focused Website Analytics

Corey O'Donnell — Wed, 23 Sep 2020 16:49:21 +0000

The Rise of Privacy

Stop stealing your users personal information. Recently, there has been a growing trend of people starting to take their privacy more serious. They realize that they are being tracked across the entire web of internet. Imagine someone following you all day watching every little thing you do without you knowing. They watch you while you are working, reading, and playing. Tools such as Google Analytics make it easier for you to have more insight on your website but this comes at the expense of invading your user's privacy. Countries are adding laws where website need to be more transparent on their tracking or will be fined. Great news is there are tools that are privacy oriented to help keep your visitors' privacy intact while still collecting valuable metrics.

Introducing Fathom Analytics

I have been using Fathom Analytics for my blog and side projects for the past couple months. It has been a great tool to collect metrics without invading my visitors' privacy.

Some great benefits using Fathom:

You don't need to display cookie notices as they do not use cookies, nor track invasive data.
No personal information is collected from my visitors. Privacy is their number one focus.
Ability to use a custom domain for tracking to prevent ad-blockers from blocking the script from loading.
Extremely light-weight script to keep load time minimal.
Add unlimited websites to my account.
Add monitoring for uptime on my websites with multiple forms of notification.
The dashboard is simple and easy to use. It displays everything I need with a clean chart and tables.
Ability to share dashboard to others protected by a password.
Their support has always been quick to respond and always helpful.
They also pledge 2% of their revenues to green initiatives.

Usage

Using Fathom is extremely simple. All you need to do is add a new site in your Fathom settings. This will generate a Site ID and provide you with fathom script to be added to your HTML.

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" site="SITE_ID" defer></script>
<!-- / Fathom -->

They also have JavaScript package fathom-client to make it easy to add it to your JavaScript Frameworks. I use the client inside my Next.js projects.

Example Use in Next.js:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as Fathom from 'fathom-client'

export default function App({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // Initialize Fathom when the app loads
    Fathom.load('SITE_ID', {
      includedDomains: ['YOUR_SITE_URL']
    })

    function onRouteChangeComplete() {
      Fathom.trackPageview()
    }
    // Record a pageview when route changes
    router.events.on('routeChangeComplete', onRouteChangeComplete)

    // Unassign event listener
    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete)
    }
  }, [])

  return <Component {...pageProps} />
}

Be a part of the growing privacy movement

Be a part of the growing movement of improving privacy. I know privacy is important for me. Ditch the invasive tracking tools such as Google Analytics. Switch to something that still gives you metrics awhile still providing privacy. Try Fathom Analytics!

Follow me on Twitter for random posts about tech, programming, and working from home.

Utility-First CSS Is All the Rage

Corey O'Donnell — Fri, 18 Sep 2020 15:19:03 +0000

Introduction to styles

When you are building a website, you typically want to style your HTML. You could use inline styles on your HTML elements.

<article style="background-color: purple; text-align:center; width: 750px;">
    <h1 style="color: red; font-weight: bold; font-size: 72px;">Inline Style Header</h1>
    <p style="color: green;">I am styling this html with inline styles.</p>
    <a href="#" style="color: blue;">I am styling this html with inline styles.</p>
</article>

Great, now we have some styles on our HTML! Inline styles do the job but it can quickly grow into something difficult to manage. There are a couple of problems too. If you open this website on a device that is smaller than 750px, your webpage will be too wide. You also cannot create different hover styles for your anchor tag.

CSS to the rescue

Cascading Style Sheets (CSS) added more features and simplified styling. It brought the ability to combine a list of styles under a single class name.

<style>
  .article-container {
    background-color: purple;
    text-align:center;
    width: 750px;
  }
  .article-header {
    color: red;
    font-weight: bold;
    font-size: 72px;
  }
  .article-body {
    color: green;
  }
  .article-link {
    color: blue;
  }
  .article-link:hover {
    color: grey;
  }
  @media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .article-container {
    width: 100%;
  }
}
</style>
<article class="article-container">
    <h1 class="article-header">Inline Style Header</h1>
    <p class="article-body">I am styling this html with inline styles.</p>
    <a href="#" class="article-link">I am styling this html with inline styles.</p>
</article>

One of great things about CSS classes is that you can share styles across multiple elements. If you change the styles under the class, it will affect all elements using that class. It also adds new ways to style elements such as pseudo classes: hover, focus, active, and more. Pseudo classes allow you to have different styles on an element based the status of the element. CSS also introduced responsive design using media queries that helped produce a better design experience across multiple devices.

Common pitfalls of CSS

CSS has some great benefits but it can have some problems. As your project continues to grow, you start to add more and more styles. Your style sheets can become complicated quickly, especially if you are sharing classes across multiple elements or components. If you make a change to a class, it is hard to tell how many components the change might affect. When this happens, you start to move to less shared classes and more specialized classes. Now you run into the problem with having redundant styles causing your stylesheets to grow. This will increase your load time and make it harder to understand all the code inside the stylesheet.

Introduction to Utility-First CSS

Imagine cleaner inline styles that has all the features of CSS. That is essentially what Utility-First CSS is. Your CSS framework is set up with atomic css classes. Every class created adds one style and you have a class for every possible style you will need.

<style>
  .bg-purple {
    background-color: purple;
  }
  .text-center {
    text-align:center;
  }
  .w-50 {
    width: 50%;
  }
  .text-red {
    color: red;
  }
  .font-bold {
    font-weight: bold;
  }
  .font-large {
    font-size: 72px;
  }
  .text-green {
    color: green;
  }
  .text-blue {
    color: blue;
  }
  .hover-text-grey:hover {
    color: grey;
  }
  @media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .mobile-w-100 {
    width: 100%;
  }
}
</style>
<article class="bg-purple text-center w-50 mobile-w-100">
    <h1 class="text-red font-bold font-large">Inline Style Header</h1>
    <p class="text-green">I am styling this html with inline styles.</p>
    <a href="#" class="text-blue hover-text-grey">I am styling this html with inline styles.</p>
</article>

As you can see from the example, all the CSS classes are responsible for one style. Once you have a utility first framework, you rarely have to write custom CSS. This means your CSS will no longer grow and you can focus on styling your elements instead of thinking about CSS. Maintaining HTML is way easier than maintaining CSS classes.

Recommended Framework

If you are now looking for a utility-first CSS framework, there are a couple of different options. Bootstrap has a decent amount of utility classes but focuses a lot on predefined components. I would recommend Tailwind CSS. Tailwind is developed to be full utility first and is constantly improving. Their documentation is easy to follow and the creator also made full tutorial on building a website using tailwind.

Installing Tailwind CSS

To install tailwind, I would recommend checking out the documentation. You need to have an NPM project setup so you can use their NPM package.

# Using npm
npm install tailwindcss

You need to add the tailwind directives to your CSS

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

If you want to add any customization to your tailwind framework, you will need to set up the config using

npx tailwindcss init

This will generate the tailwind.config.js file where you can modify, extend, and configure custom styles.

Now when you want to compile your CSS, you can use the Tailwind CLI or postCSS CLI. The command for Tailwind CLI is simple but you lose out on some added benefits of postCSS.

# CLI
npx tailwindcss build styles.css -o output.css

For postCSS, you will need to install autoprefixer and postcss-cli

npm i postcss-cli autoprefixer

Next, create a postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ],
};

You can run your postcss to compile your CSS for use in your HTML using

postcss styles.css -o styles.compiled.css

Conclusion

I have really enjoyed using Utility-First CSS. I have never been a fan of writing CSS. Class names are hard to manage and time-consuming thinking through what to call them. I can clearly see what styles are being applied to my HTML elements, and they are not hidden behind a single class name. I think there is a reason Tailwind CSS has grown in popularity so quickly. Do you use Utility-First CSS?

Documentation for Tailwind CSS
Follow me on Twitter for random posts about tech, programming, and working from home.