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.

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?

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.

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;
$$;

1. This adds a function called increment_page_view that has a parameter of page_slug.
2. It sets the language to plpgsql which is specific to Postgres.
3. When you trigger the function, it checks to see if a row exists where slug equals the parameter page_slug.
4. If it exists, update the row by adding 1 to view_count and setting updated_at with now().
5. 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:

1. @supabase/supabase-js: Client to connect and query your database hosted by Supabase.
2. 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.

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

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:

1. 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.
2. 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.

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.

• Next.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.

<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.

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

1. 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.

2. 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.

3. 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.

4. When choosing font weights, always skip a level. fine/medium, light/bold, medium/extra-bold

5. Always use multiples when choosing sizes for fonts and rules. 2x/4x, 2x/8x, 4x/8x

6. For body text on the web, stick to 15-25px.

7. The line space should be roughly 120-145%.

8. When using ALL CAPS, add extra letter spacing (5-12%).

9. Do not be afraid to play around with it. Just make small incremental changes.

10. 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.

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.
• Personal Website in case you wanted to check it out yourself

Stop stealing your visitors' 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 (Referral link for $10 off) 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.
• 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! (Referral link for $10 off).

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

Passing Messages with VS Code's API

VS Code offers a special API Object inside their webview by calling acquireVsCodeApi inside your JavaScript. The API object has a postMessage() function that can be used to send messages back to the extension's backend. You can subscribe to messages in the backend using the panel.webview.onDidReceiveMessage() function.

Example of sending a message when script is loaded in Webview App.tsx

// Add typedef for acquireVsCodeApi
declare const acquireVsCodeApi: Function;
// Fetch the api object
export const vscodeApi = acquireVsCodeApi();
vscodeApi.postMessage('React App Loaded')

You can then verify your extension caught the message using:

panel.webview.onDidReceiveMessage((message) => console.log('MESSAGE', message))

Now that we can send messages to the VS Code backend, we need to figure out how to send messages back to the webview and catch it. You can easily send a message using panel.webview.postMessage() function which is similar to how we sent the message from the webview. Instead of using the VSCodeAPI to catch the message in the webview, you actually add an event listener on the window object for message.

Sending the message from the VS Code backend after react app loads:

panel.webview.onDidReceiveMessage((message) => {
    if (message === 'React App Loaded') {
        panel.webview.postMessage('Extension Knows React is ready');
    }
})

Webview listening for a message from the VS Code backend in App.tsx:

window.addEventListener('message', (message) => console.log('CAUGHT THE MESSAGE', message));

You should now see a console.log() with the caught message.

Cleaning up the React Code

I decided to create a lib service that wraps the VS Code API. I can add more type checking to the API and simplify cleanup of eventListeners.

declare const acquireVsCodeApi: Function;

interface VSCodeApi {
    getState: () => any;
    setState: (newState: any) => any;
    postMessage: (message: any) => void;
}

class VSCodeWrapper {
    private readonly vscodeApi: VSCodeApi = acquireVsCodeApi();

    /**
     * Send message to the extension framework.
     * @param message
     */
    public postMessage(message: any): void {
        this.vscodeApi.postMessage(message);
    }

    /**
     * Add listener for messages from extension framework.
     * @param callback called when the extension sends a message
     * @returns function to clean up the message eventListener.
     */
    public onMessage(callback: (message: any) => void): () => void {
        window.addEventListener('message', callback);
        return () => window.removeEventListener('message', callback);
    }
}

// Singleton to prevent multiple fetches of VsCodeAPI.
export const VSCodeAPI: VSCodeWrapper = new VSCodeWrapper();

I can now subscribe to messages using useEffect inside of my App.tsx:

import React, { useEffect } from 'react';
import './App.css';

import { VSCodeAPI } from './lib/VSCodeAPI';

export default function App() {
    useEffect(() => {
        return VSCodeAPI.onMessage((message) => console.log('app', message));
    });
    return (
        <h1>Hello World</h1>
    );
}

Next Steps

Now that we can pass data between the view and the backend, we can start working on actual functionality. I need to look through the VS Code documentation on how to create a custom editor to generate and modify the todo.md file. I want to add Tailwind CSS to the front end for styles and create views for displaying and submitting todos.

What is Volta

Volta is a command line tool used to manage your Node.js. It is built using Rust and is shipped as a static binary that can be ran on Windows and all *nix shells. The goal is to make sure every developer working on the project seamlessly has the same tools and versions installed.

Installation

The installation is simple.

# install Volta
curl https://get.volta.sh | bash

The script installs the binary in ~/.volta and adds ~/.volta/bin to your systems path inside of your ~/.bash_profile, ~/.profile, and ~/.bashrc.

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

Now you can start using Volta to manage Node.js.

Using Volta

You can easily install node using

# Install node
volta install node
# or you can install a specific version
volta install node@12

Now node should be available to use whenever you open your terminal.

If you want to set Volta to always load a specific version of node for your active package you can use pin.

volta pin node@12.18.3

This command will store your pinned version in your package.json.

"volta": {
  "node": "12.18.3"
}

Every time you navigate to your project, Volta will automatically set your active node version to whatever is pinned.

You can even install and pin global packages like yarn using Volta to make sure everyone on your team is using the same version for their global packages.

volta install yarn
volta pin yarn

How does Volta compare to NVM?

NVM is just a node version manager. It only handles installing different versions of node. You can also set a default version of node to load whenever you open your terminal. Volta handles node versions and can set a default version to load also.

When opening a terminal, NVM usually takes about 0.5 to 2 seconds to source in bash if you have a default node version set. Volta does not seem to add any load time.

You can pin node version for your projects using both tools. NVM uses a .nvmrc file and Volta adds a key to your package.json. Volta can also pin versions for global NPM packages used for the project.

NVM does not automatically switch your active node version to your pinned version. You have to run nvm use or install another package call AVN. AVN usually takes 2 to 5 seconds to switch node versions. Volta does it automatically and usually takes less than a second.

What tool will I be using?

Even though I have been using NVM for almost 4 years, I think Volta takes the crown. I plan to use Volta for managing all my Node.js needs from now on. The speed and simplicity of the tool just makes it the better choice. NVM, I am thankful you for all the headaches you have saved me in the past but I think it is time to move on.

• Volta Docs
• NVM Docs
• Previous post about using NVM to manage node version
• Follow me on Twitter for random posts about tech and working from home.

The API

You can access the API playground and docs at api.hashnode.com. This allows you to develop your query and give you the exact response you want. After reading the docs, I built a query to give me everything I needed to display a preview on my portfolio page.

{
  user(username: "CodeByCorey") {
    publication {
      posts(page: 0) {
        slug
        title
        brief
        coverImage
        replyCount
        totalReactions
      }
    }
  }
}

• user(username: "CodeByCorey"): Query for my user
  • publication: Contains all information for my blog publication
    • posts(page: 0): Returns all the posts on the first page
      • slug: So I can create a link to the blog post
      • title: To display the title of my post
      • brief: Is a small snippet of the text in the post
      • coverImage: So I can show the cover image in the preview
      • replyCount: The number of comments on the post
      • totalReactions: Total number of reactions on my post

Using the Query

Now that I have the query, it's time to use it to fetch the data. I created a new lib file in my Next.js app called posts.ts. I used fetch to make the API call and passed the query to the body of the request.

const query: string = `
  {
    user(username: "CodeByCorey") {
      publication {
        posts(page: 0) {
          slug
          title
          brief
          coverImage
          replyCount
          totalReactions
        }
      }
    }
  }
`;
export const fetchPosts = async () => {
  const resp: Response = await fetch('https://api.hashnode.com', {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({ query }),
  })
  const hashnodeResponse = await resp.json();
  return hashnodeResponse.data.user.publication.posts;
};

I wanted to only display the last three posts. I added another function to slice the posts to limit the response. This

export const fetchThreeMostRecentPost = async() => {
  const posts = await fetchPosts();
  return posts.slice(0, 3);
}

Inside my container component, I used the Next.js getStaticProps function to fetch the posts and pass them to the props of my component. I added the revalidate setting to automatically regenerate my HTML when I create a new post on Hashnode.

export async function getStaticProps() {

  const posts = await fetchThreeMostRecentPosts();
  return {
    props: {
      posts
    },
    revalidate: 60
  };
}

Now that all the data is being fetched and passed to the props, It was now time to style my components. I have been using Tailwind CSS for my portfolio website. Here is the RecentBlogPosts component:

export default function RecentBlogPosts({ posts }: Props) {
  return (
    <div className="container mx-auto py-12 text-gray-800">
      <h2 className="text-center text-2xl md:text-4xl pb-6">Recent Blog Posts</h2>
      <div className="flex flex-wrap justify-center">
        {posts.map((post, index) => (
          <a key={index} href={`https://blog.coreyodonnell.tech/${post.slug}`} className="md:w-2/3 lg:w-1/3 px-5 my-2">
            <BlogPreview post={post} />
          </a>
        ))}
      </div>
      <div className="flex flex-wrap justify-center">
        <a
          className="text-green-500 font-semibold hover:text-gray-800 py-4 px-4 rounded"
          href="https://blog.coreyodonnell.tech/"
        >
          View all posts
        </a>
      </div>
    </div>
  );
}

BlogPreview:

export default function BlogPreview({ post }: Props) {
  return (
    <div className="h-full border-2 border-gray-200 rounded-lg flex flex-col justify-between">
      <div className="w-full">
        <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={post.coverImage} alt="blog" />
        <div className="p-6">
          <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{post.title}</h1>
          <p className="leading-relaxed mb-3 text-gray-600">{post.brief}</p>
        </div>
      </div>
      <div className="flex items-center flex-wrap p-6">
        <span className="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">
          Learn More
          <svg
            className="w-4 h-4 ml-2"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M5 12h14"></path>
            <path d="M12 5l7 7-7 7"></path>
          </svg>
        </span>
        <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
          <svg className="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>
          {post.totalReactions}
        </span>
        <span className="text-gray-600 inline-flex items-center leading-none text-sm">
          <svg className="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
            />
          </svg>
          {post.replyCount}
        </span>
      </div>
    </div>
  );
}

The result after styling my components:

• Hashnode API - api.hashnode.com
• Next.js Docs - https://nextjs.org/
• You can check out my portfolio page - Source Code(work in progress)
• Follow me on Twitter for random posts about tech and working from home.

Since I am constantly requiring different node versions, I need a tool to make this process easy.

Methods that will not work

I currently develop my personal projects using Ubuntu. I could easily install node using apt.

sudo apt install nodejs

This won't work for me. How would I switch between all the different node versions? You can install specific versions using apt but you cannot switch easily. It would also take more work to lock your apt version down so whenever you perform an update across your system, it doesn't update node without you realizing it.

I also do not think we should be installing NodeJS with sudo permissions. You are now giving NodeJS full control over your computer. NPM installs third-party modules and it can contain any script the provider wants. How can you trust a third-party script with full control? Unless you read every module and submodule's code before you install it, there might be something malicious. I would rather not take the risk and stay away from sudo.

You could download the binary directly from the NodeJS website and place it in your ~/.local/bin folder and make sure that folder is in your $PATH but you still cannot manage different versions easily.

NVM to the rescue!

Official Docs

I have been using NVM to managing my node version for the past 4 years and it's one of the first things I install on a new computer.

Installation is fairly simple. They provide a one line copy and paste to install and set up your environment.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# Version might be difference since article was published

When the above script runs, it installs nvm in ~/.nvm and adds the initializer for your terminal (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

# Initializer
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

After the script finishes, all you need to do is restart your terminal and it should work. You can verify by typing nvm --version or command -v nvm.

If it does not work, nvm provides troubleshooting steps for Linux and macOS

Using NVM after its installed

Once you have nvm installed and working, it's easy to manage node.

You can easily install whatever version you want using nvm install

# For most recent version of nodejs v12
nvm install 12
# You can be more specific
nvm install 12.18.3

To switch node version you can call nvm use

# To enable node 12
nvm use 12
# to enable node 8
nvm use 8

If your folder contains a .nvmrc file you can just run nvm use and it will pull the version from .nvmrc.

To trigger nvm use automatically, you can use another package called AVN or a lightweight script offered by nvm.

Complaints of NVM being slow

Every time you start a new terminal, NVM automatically sources your default node version. When this process runs, it calls npm config get prefix. This command has some performance issues and there has been a ticket create explaining the reason.

There are two solutions that help with terminal performance. You can remove the default node version using nvm unalias default or when you source nvm you add --no-use.

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh --no-use"

NVM will no longer source node at startup and you will have to manually run nvm use before running anything with node.

Conclusion

I have been using NVM for the past 4 years. It has given me all the tools I need to update and manage my node versions safely. The installation is simple and straightforward. I have never had any problems with it and use it almost daily.

Adding some Code formatting configs

The Yeoman template for VS Code Extension does not have any formatting configs that I typically use for my projects.

I make sure to always have an .editorconfig file. EditorConfig is used to help maintain consistent coding styles for whitespace across everyone's text editors and IDEs. Here is an example I typically use on my typescript projects.

# .editorconfig
# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,ts,tsx}]
charset = utf-8
indent_style = space
indent_size = 4

# Matches the exact files either package.json or .travis.yml
[package.json]
indent_style = space
indent_size = 2

Prettier adds even more code formatting. It really helps create a consistent code style. Every developer has a different way of implementing code. Having a consistent style is important for open source. Here is the .prettierrc config I am using for my extension.

{
    "printWidth": 160,
    "trailingComma": "none",
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true
}

I work on multiple projects that all require a different node version. I use NVM along with AVN to auto switch my node version depending on which repository I am in. Example .node-version file used in this repository.

v12.18.3

With some consistency added to the code base, it's time to work on the react app.

Bootstrapping React

Creating a brand new react app is fairly simple using the create-react-app tool.

I knew I wanted the app in a subdirectory called webview in my extension. First I navigated to the src directory and then used create-react-app to set up an empty react app. I used the typescript template since I wanted this entire extension using typescript including the react portion.

cd src/
npx create-react-app webview --template typescript

Now I just wanted to verify everything was set up and working.

cd webview/
npm run start

It failed with this error...

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /home/CodeByCorey/workspace/vscode-todo-task-manager/node_modules/eslint (version: 7.7.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /home/CodeByCorey/workspace/vscode-todo-task-manager/node_modules/eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

I looked in the root package.json for my VS Code extension and it is using eslint@7 and react-scrips requires eslint@6. Due to how yarn/npm handles packages, my react app was not installing eslint at v6 because yarn already saw it installed at v7 at the root of the project.

The easiest solution I used was to downgrade my extension's eslint version on my root project.

# navigate back to the root of the project
cd ../../
yarn add -D eslint@6
cd src/webview
yarn start

Boom! It worked and opened my app in the browser at http://localhost:3000

I moved the extension.ts into its own directory to help keep the webview and extension separate.

mkdir -p src/extension
mv src/extension.ts src/extension/extension.ts

and changed the main key on the package.json to use the new folder structure

"main": "./dist/extension/extension.js"

How do I get VS Code to open it??

The react app is working in my browser but how do I make VS Code display it?

First thing I did was add the VS Code commands that would open the react app inside package.json

"activationEvents": [
    "onCommand:vscode-task-manager.openTodoManager"
],
"contributes": {
    "commands": [
        {
            "command": "vscode-task-manager.openTodoManager",
            "title": "Todo Manager"
        }
    ]
}

Inside extension.ts I replace the helloWorld command with my new command. Using the Webview docs I figured out how to open a panel with HTML.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('vscode-task-manager.openTodoManager', () => {
            // Create and show panel
            const panel = vscode.window.createWebviewPanel(
                'todoManager',
                'Todo Manager',
                vscode.ViewColumn.One,
                {
                    enableScripts: true
                }
            );

            // And set its HTML content
            panel.webview.html = getWebviewContent();
        })
    );
}

function getWebviewContent() {
    return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Todo Task Manager</title>
            </head>
            <body>
                <h1>Hello TODO</h1>
            </body>
        </html>
    `;
}

When you run the extension and trigger the Todo Manager command, it should open a new panel that display Hello TODO;

Now lets figure out how to get my react resources loaded into the HTML.

I need to move my reacts compiled code into the dist directory for my extension to use. I created a npm script inside my react project to move the folder after its finished building using postbuild.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "rimraf ../../dist/webview && mv build ../../dist/webview",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

The location of the extensions files on the file system is conveniently attached to the context parameter on the activate function. I passed the object to my getWebviewContent() function where I plan to fetch all the react resources.

React is nice enough to offer an asset-manifest.json to find out the name of all the compiled assets. Using path, context.extensionPath, and vscodes.Uri, we can map out the physical location of the compiled react scripts, and import them into the html with VS Codes resource tags.

function getWebviewContent(context: vscode.ExtensionContext): string {
    const { extensionPath } = context;

    const webviewPath: string = path.join(extensionPath, 'dist', 'webview');
    const assetManifest: AssetManifest = require(path.join(webviewPath, 'asset-manifest.json'));

    const main: string = assetManifest.files['main.js'];
    const styles: string = assetManifest.files['main.css'];
    const runTime: string = assetManifest.files['runtime-main.js'];
    const chunk: string = Object.keys(assetManifest.files).find((key) => key.endsWith('chunk.js')) as string;

    const mainUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, main)).with({ scheme: 'vscode-resource' });
    const stylesUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, styles)).with({ scheme: 'vscode-resource' });
    const runTimeMainUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, runTime)).with({ scheme: 'vscode-resource' });
    const chunkUri: vscode.Uri = vscode.Uri.file(path.join(webviewPath, chunk)).with({ scheme: 'vscode-resource' });

    return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Todo Task Manager</title>
                <link rel="stylesheet" type="text/css" href="${stylesUri.toString(true)}">
            </head>
            <body>
                <div id="root"></div>
                <script crossorigin="anonymous" src="${runTimeMainUri.toString(true)}"></script>
                <script crossorigin="anonymous" src="${chunkUri.toString(true)}"></script>
                <script crossorigin="anonymous" src="${mainUri.toString(true)}"></script>
            </body>
        </html>
    `;
}

Now when I run the debugger for my extension and trigger the Todo Manager command. The React app appears as a VS Code Panel!!

Issues and Concerns with current implementation.

I am not 100% happy with this solution. I am not a fan of a sub npm package and managing the react build separately than the extension. A great example of why I dislike it is the eslint issue I didn't expect to happen. I also dislike how I have to compile the react app separately and then compile the extension to make it work. I need to work on my npm scripts to make it more seamless.

One benefit of treating it like a separate app is I can run react in my browser to quickly develop the front end portion and then test it out as a webview panel later.

This is all just a proof of concept for now. There is a more official way to implement web views that I plan on using now that I know it works.

Next steps

I need to figure out how to make the react app and the extension communicate with each other. I have seen some existing open source projects using RPC (Not sure what that is) but I have also seen some using a postMessage() && onMessage() method. Over the next couple of days, I'll be investigating what I can do and document my efforts.

I also want a more trendy name. Todo Task Manager is just not sitting well with me.

Source Code

VSCode has a straightforward method for bootstrapping a new extension.

Making sure all the prerequisites are installed

The prerequisites for developing an extension is having Node.js and Git installed on your machine.

If you need to install Node, I recommend using NVM if you are on Linux or macOS and NVM-windows for windows.

Disclaimer: I develop on Linux, so I will be using those commands.

Install NVM using

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Restart your terminal then install node using

# Current LTS version while writing this is v12
nvm install 12
# I recommend setting this version as default
nvm alias default 12

Bootstrapping the extension repository

Now that node is installed to the latest LTS, it's time to bootstrap the extension repository.

Navigate to wherever you want to create the repository. For me, it's in a folder called workspace

cd ~/workspace

VSCode offers a Yeoman template to generate a basic extension.

Install the required NPM packages globally for Yeoman and the VS Code Extension template. After its installed, you can run the generator.

# Install the npm packages globally
npm install -g yo generator-code

# Running the generator
yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension?
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension?
# ? What's the description of your extension?
# ? Initialize a git repository? Yes
# ? Which package manager to use? yarn

I decided to use yarn because I normally use NPM but I wanted to try something new.

Since I am hosting the code on GitHub, I create a new empty repository there. Then I linked my GitHub repository with my local one.

cd vscode-todo-task-manager/
git remote add origin git@github.com:CodeByCorey/vscode-todo-task-manager.git

git commit -am 'initialize extension'

git push -u origin master

Starting the development environment

Now that the repository is set up, time to run it locally.

# Since I am already in the project directory
code .
# the . means it will open the current directory in vscode

Once VScode is open, press F5 to compile and run the extension.

To verify it is running, hit (ctrl+shift+p) and run the hello world command.

Time to dig into the API docs

Now that I have the base project running, I need to start reading the API Docs to figure out how to start implementing the task manager.

I might also look at some open-source extensions to see how they implement specific features. I tend to learn a lot from reading open-source projects.

What am I going to build?

I have been spending a good amount of time working on my time management. Managing my daily tasks has been something I needed to improve. I currently write down what I plan to do for the day in a notebook. Notebooks are nice but it makes it difficult to organize the tasks besides by date and order. How can I dynamically group them by project, adjust priority as my day changes, roll them over to the next day without having to rewrite them? I decided to create a task manager built into VSCode.

I am sure there are other extensions that already do this but that is not the point. The plan is to use this as a learning experience and build something specifically for me. I get to determine what features are important and how they tie into my workflow.

Problems I am solving

• I spend most of my day with VSCode open on my computer as a Programmer. It would be nice to have all my tasks for my projects in one place.
• I want to have a board similar to Trello where I could easily click and drag to move tasks between statuses and adjust priorities.
• Most of my daily notes are Markdown in a repository. Having the ability to link my notes through wiki links using something like Foam would be a plus.

Thinking through the Tech Stack

The tech stack I plan on using:

• TypeScript
  • Vscode's API already uses it.
• ReactJS
  • It might be a little overkill but why not.
• Tailwind CSS
  • I want to easily be able to style the webview and I love using utility classes for styles.
• Markdown
  • I already take my notes in Markdown and it would make it easier integrating with foam.
  • GitHub Markdown has a task like syntax I could utilize and then you are not forced to use the extension to manage your tasks.

Resources I will be using

• VSCode Extension API
• Tailwind CSS Docs
• The Repository
• Foam

Finding my problems

When you do not have someone looking over your shoulder, it's easy to just do what you want. Bad habits are easy to develop, and they quickly compound on themselves. One of the first things I did was create a list of everything I was doing throughout the day and how long I spent doing it. It did not matter if it was good or bad. I just wanted to have better insight on what I was doing. After a couple of days doing this, it quickly became clear where most of my problems were.

Created a game plan

Now that I know my problems and bad habits, it was time to start doing something about them.

Making all the bad habits difficult to do

I had my personal computer right next to my work computer. This was mixing my personal with work and I would often drift over to my personal computer. First things I did was delete all video games off the computer and just turned it off. Just adding that small amount of resistance kept me more focused on work.

Putting myself in the work mindset

I started waking up earlier so when I walk into my home office, I am wide awake and prepared for work. I started getting dressed like I was going to the office to help put me in the work mindset. First thing walking into my office, I wrote down all the tasks that were assigned to me and all the scheduled meetings for the day. I could then prioritize everything and know what I could and could not complete for the day.

Techniques for staying productive

Being in the work mindset is a nice step for better productivity, but I still wanted to take it to the next level. I started using the Pomodoro time management technique. You set a timer for 50 minutes and work with zero distractions. When the timer went off, you give yourself a 10-minute break. This technique pushed me to be very productive. If I am really into a problem, I will usually continue past the time. Since breaks are just as important for productivity, I make up the time when I finish the task.

Everything is going great

After thinking through all my struggles and executing my plan for productivity, I am now thriving while working from home. I am now the go-to guy on my current team and recently promoted to Senior Software Engineer. My company is currently talking about moving me to team lead role. All it took was a couple of small changes and my productivity went from nothing to being great.