JamieMason

Next.js chrome devtools coverage settings

I found these settings really useful when using the Chrome Devtools Coverage Inspector to look for unused JavaScript in a Next.js App.

Build the app for production with these settings and the output will be easier to debug.

// next.config.js
module.exports = {
 webpack(config) {

JamieMason

const fetchMachine = Machine(
  {
    initial: "evaluating",
    states: {
      evaluating: {
        on: {
          "done.invoke.loadAddressBook": [
            {
              cond: "hasAddresses",
              target: "addressBookAndForm",

JamieMason

fp-ts – Lodash _.get, Ramda R.props that returns an Option

A function like Lodash's _.get, Ramda's R.props, and Immutable.js's getIn, written in fp-ts.

import { Json } from 'fp-ts/lib/Json';
import { none, Option, some } from 'fp-ts/lib/Option';

export function getIn<T = Json>(props: string[], origin: unknown): Option<T> {
  let value: unknown = origin;

JamieMason

Attempt to reduce boilerplate related to a Machine's types in XState

import type {
  ActionObject,
  EventObject,
  Interpreter,
  Sender,
  State,
 StateMachine,

JamieMason

Refactor this

Spec

when on the server
  return ''
when on the client
  when gclid=12345 GET param is present in the URL
 store it in sessionStorage

JamieMason

const fs = require('fs')
const globby = require('globby')
globby
  .sync(
    ['**/*.js', '!node_modules', '!.next', '!**/*.spec.js', '!**/*.test.js', '!**/integration/**'],
    {
      absolute: true,
    },
  )
  .map((file) => {

JamieMason

Spotify Starred Playlist Backup

Backup of my Starred Playlist at https://open.spotify.com/playlist/3K8uUT7ACHzcJD2Lq5rav5?si=d4f4f823811347a7

https://open.spotify.com/track/0abTt3IYQe5ygIGTfDlD1K
https://open.spotify.com/track/3mnqWACBGfk2AO2eonicIT
https://open.spotify.com/track/10zZYL5n0FX5R8tQFhFPU4
https://open.spotify.com/track/5KXaOkHaB1KA4hcEX9g2pv
https://open.spotify.com/track/5HrDLi6cYysquuwWQcK0G6

JamieMason

import type { GetServerSideProps, NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import { SearchPageComponent } from './search-page-component';
import type { Props } from './search-page-props';

export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
  try {
    if (typeof window === 'undefined') {
      const { getSearchPageProps } = await import('./search-page-props');

JamieMason

Adjust Default Tailwind CSS Font Sizes

A helper function to adjust every TailwindCSS font-size by a relative amount.

const defaultTheme = require('tailwindcss/defaultTheme');

const adjustFontSizes = (adjustFontSizeBy) => {
  const getAdjustedSize = (sizeName) => {
    const [fontSizeRem, { lineHeight: lineHeightRem }] = defaultTheme.fontSize[sizeName];

JamieMason

#!/usr/bin/env bash

echo "export const AddOutline: React.FC<{ className?: string }> = ({ className }) => $(cat "./add-outline.svg")" > "./add-outline.tsx"
echo "export const AddSolid: React.FC<{ className?: string }> = ({ className }) => $(cat "./add-solid.svg")" > "./add-solid.tsx"
echo "export const Adjust: React.FC<{ className?: string }> = ({ className }) => $(cat "./adjust.svg")" > "./adjust.tsx"
echo "export const Airplane: React.FC<{ className?: string }> = ({ className }) => $(cat "./airplane.svg")" > "./airplane.tsx"
echo "export const Album: React.FC<{ className?: string }> = ({ className }) => $(cat "./album.svg")" > "./album.tsx"
echo "export const AlignCenter: React.FC<{ className?: string }> = ({ className }) => $(cat "./align-center.svg")" > "./align-center.tsx"
echo "export const AlignJustified: React.FC<{ className?: string }> = ({ className }) => $(cat "./align-justified.svg")" > "./align-justified.tsx"
echo "export const AlignLeft: React.FC<{ className?: string }> = ({ className }) => $(ca