Paco Coursey

macOS Color Picker

Paco Coursey — Fri, 26 Jun 2020 04:00:00 GMT

After trying many apps, my favorite macOS color picker remains the built in utility. It's only shown while editing in specific applications though, so here's how you can turn it into a dedicated app.

Open Script Editor and create a new document
Enter choose color

Save as an Application in your Applications folder

Launch your new Color Picker application. I use the second tab with RGB Sliders to easily copy the hex code.

Pressing escape closes the app. That's it. No installation necessary, the colors are always accurate, and you can even save a few favorites to the grid at the bottom.

SVG Caching with

Paco Coursey — Thu, 25 Jun 2020 04:00:00 GMT

I had an idea for caching SVG paths. Not the usual kind of async request caching of remote SVGs, but local re-use of DOM elements that have already rendered.

SVG's element allows re-use of an existing DOM element, without manually duplicating the node. It works like this:

Setup

When using an icon set like Feather in React, I prefer to use a higher-order component (HOC) and a generic Icon component to render each icon with consistent properties. We'll use this HOC to demonstrate SVG caching:

import { memo } from 'react'

const withIcon = (icon, opts) => {
  const Icon = props => {
    const { size = 24, color = 'currentColor' } = props

    return (
      
    )
  }

  return memo(Icon)
}

export default withIcon

Each icon is simply the SVG contents wrapped with the HOC:

const ArrowLeft = withIcon('')

Caching

We'll use React context to add an icon cache. First, create a new context and the appropriate hook to access it:

export const IconCache = React.createContext(null)
export const useIconCache = () => React.useContext(IconCache)

Setup the provider at the application root. The cache will be a plain, empty object where each key is the icon string and each value is the cached id.

const App = () => (
  {/* ... */}
)

Inside of Icon, read the cache from context and check if this icon has a cached id. If not, generate the new id and add it to the cache:

const cache = useIconCache()

let cachedId = cache[icon]

if (!cachedId) {
  cachedId = `icon-` + hash(icon).toString(16)
  cache[icon] = cachedId
}

Generate a stable id by hashing the icon using the fnv1a ¹ algorithm (commonly used in CSS-in-JS libraries) and then converting it to hexadecimal for a smaller string:

import hash from 'fnv1a'

If we have a cached id, we can render the tag instead of inserting the entire icon again. If this icon has not rendered before, wrap it in a group tag and attach the unique id.

return (
  `
        : `${icon}`
    }}
  />
)

Conclusion

Here's our new withIcon HOC with caching:

import { memo } from 'react'
import hash from 'fnv1a'

export const IconCache = React.createContext({})
export const useIconCache = () => React.useContext(IconCache)

const withIcon = icon => {
  const Icon = props => {
    const { size = 24, color = 'currentColor' } = props
    const cache = useIconCache()

    const cachedId = cache[icon]
    let id

    if (!cachedId) {
      id = 'icon-' + hash(icon).toString(16)
      cache[icon] = id
    }

    return (
      `
            : `${icon}`
        }}
      />
    )
  }

  return memo(Icon)
}

export default withIcon

Rendering the same icon multiple times will reuse existing DOM elements, decreasing the size of your HTML:

/* React */


  
  
  


/* HTML Output:
  

  

  
*/

In this example, the cached version is about 40% fewer characters!

You can still customize each icon, because the props apply to the outer svg element and don't involve the inner elements at all:

Here's a live demo and the demo source code.

You don't have to use fnv1a, any stable id generation technique will work. Just make sure it's consistent between server and client to avoid hydration mismatch.

Custom CSS via Serverless Proxy

Paco Coursey — Sun, 17 May 2020 04:00:00 GMT

If you want to add custom CSS to a website without using a browser extension, you can proxy the site using a serverless function and inject a new stylesheet.

I love Aaron Swartz's blog, but the font size is tiny, the content is not centered, and the colors aren't late-night friendly. Let's improve it.

Create api/index.js and add a server-side fetching library like node-fetch:

const fetch = require('node-fetch')

module.exports = (req, res) => {
  res.end()
}

Fetch the HTML of the actual site:

module.exports = (req, res) => {
  const html = (
    await (await fetch('http://aaronsw.com' + req.url)).text()
  )
  res.end()
}

Add a link tag to the head:

const html = (
  await (await fetch('http://aaronsw.com' + req.url)).text()
).replace(
  '',
  '"
)

Return the modified HTML. Use .send instead of passing the string to .end so that the correct content headers are set.

res.send(html)

If the website content you're proxying doesn't update frequently, you should add caching of your serverless function's response. Aaron passed away a few years ago, so his blog isn't updated anymore.

The final function looks like this:

const fetch = require('node-fetch')

module.exports = async (req, res) => {
  const html = (
    await (await fetch('http://aaronsw.com' + req.url)).text()
  ).replace(
    '',
    ''
  )

  // 1 year
  res.setHeader('Cache-Control', 'max-age=0, s-maxage=31536000')

  res.send(html)
  res.end()
}

Add your custom CSS in a custom.css file.

Deploy

Create a vercel.json configuration file that rewrites all requests to your deployment through our api/index serverless function:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

Deploy with Vercel:

$ vercel

Visit your deployment to see the proxy in action. My Aaron Swartz blog proxy is available here: aaronsw.now.sh/weblog/archive.

Shared Hook State with SWR

Paco Coursey — Sat, 09 May 2020 04:00:00 GMT

SWR is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. ¹

Let's look at an example of a useUsername hook:

const useUsername = () => {
  return useState('')
}

const UsernameInput = () => {
  const [username, setUsername] = useUsername()

  return (
    
      
    
  )
}

const DisplayUsername = () => {
  const [username] = useUsername()

  return (
    Username: {username}
  )
}

This won't work, because each time we call useUsername, we receive a new instance of state. Updating the input won't affect what our DisplayUsername component renders.

Solving with Context

With React context, we typically lift the username state to the highest level and useContext to read the value in our components:

const UsernameContext = createContext()

const App = () => (
  
    {/* ... */}
  
)

const UsernameProvider = ({ children }) => {
  const [username, setUsername] = useState('')

  return (
    
      {children}
    
  )
}

const DisplayUsername = () => {
  const [username] = useContext(UsernameContext)

  return (
    Username: {username}
  )
}

This will work, but in big applications you'll end up with a lot of context.

Solving with SWR

We can simulate useState with SWR by using the mutate function as our setState, and the config.fallbackData option as the initial state. Now when we call mutate, the updated data will be reflected everywhere the hook is used.

import useSWR from 'swr'

const useUsername = () => {
  const { data: username, mutate: setUsername } = useSWR('username', {
    fallbackData: ''
  })

  return [username, setUsername]
}

It works, no context required. Every useUsername will share the same state, and calling setUsername will update the state across all uses of the hook.

useSharedState

We can go one step further and build a shared addition to useState:

const useSharedState = (key, initial) => {
  const { data: state, mutate: setState } = useSWR(key, {
    fallbackData: initial
  })

  return [state, setState]
}

Use it like useState, but pass a key as the first argument:

const [username, setUsername] = useSharedState('username', 'paco')
const [os, setOS] = useSharedState('os', 'macos')

SWR is mainly used to manage remote data requests, but it also provides a powerful cache and API that you can use to share local state between hooks. Kudos to Shu for his excellent work!

Two components using the same React hook don't share state by default.
SWR uses a client-side only cache, so your data won't persist between sessions or windows unless you keep external state like localStorage, at which point SWR may not be useful.

CSS Previous Sibling Selector

Paco Coursey — Tue, 24 Mar 2020 04:00:00 GMT

There is no previous sibling selector in CSS. Instead, we can achieve the same behavior by using flexbox and the order property.

Let's say you're adding a prefix to an input, and would like to style the prefix when the input is focused. If you read from left to right and top to bottom (English), you likely structure your DOM like that too:


  https://

https://

In this markup, there's no way to target the .prefix class using input:focus, because we have no preceding selector. Instead, we can rewrite the DOM structure so that prefix appears after the input:


  
  https://

And use flexbox to change the order of appearance:

.container {
  display: flex;
}

.container input {
  order: 1;
}

.container .prefix {
  order: 2;
}

Now you can select the prefix using the sibling selector:

.container input:focus + .prefix {
  /* Focus styles... */
}

https://

In the case of an input, the simple solution is to use :focus-within, which has good browser support but is still experimental. Maybe you have other use cases for this trick though, let me know!

This post is inspired by my own work on inputs, and this paragraph:

Unfortunately, trying to use :focus limits what you can do: you can style the input or siblings that come after the input… but that’s it.
— Initializing focus state in React

Disable transitions on theme toggle

Paco Coursey — Thu, 19 Mar 2020 04:00:00 GMT

It's difficult to transition between themes smoothly. Adding a CSS transition to every element negatively impacts rendering performance, and it also won't work for images, icons, and CSS properties that don't support transitions.

Instead, we can temporarily remove transitions from all elements so that toggling themes feels snappy and consistent. We'll manually create a stylesheet that disables transitions:

const css = document.createElement('style')
css.type = 'text/css'
css.appendChild(
  document.createTextNode(
    `* {
       -webkit-transition: none !important;
       -moz-transition: none !important;
       -o-transition: none !important;
       -ms-transition: none !important;
       transition: none !important;
    }`
  )
)
document.head.appendChild(css)

Note that we need to manually specify browser prefixes, as this CSS isn't run through any preprocessing.

After changing the theme (usually this involves toggling a class on ), we force a browser repaint and remove the stylesheet:

// Toggle the theme here...

// Calling getComputedStyle forces the browser to redraw
const _ = window.getComputedStyle(css).opacity
document.head.removeChild(css)

Calling requestAnimationFrame before removing the stylesheet seemed to work at first, but it was unreliable and elements still transitioned. Using getComputedStyle works reliably on every major browser, because it forcibly applies all active stylesheets.

Before:

After (or press t to try it yourself):

Thanks to Guillermo for the idea!

Better Next.js Imports

Paco Coursey — Sun, 15 Mar 2020 04:00:00 GMT

Nine days after first writing this post, the Next.js team landed support for paths in tsconfig.json and jsconfig.json by default! In Next.js 9.4 and onwards, you only need to specify a baseURL in your config file to support absolute imports:

// tsconfig.json or jsconfig.json
{
  compilerOptions: {
    "baseURL": "."
  }
}

// import Button from 'components/button'

To use a custom prefix, add a paths configuration:

{
  compilerOptions: {
    "baseURL": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

// import Button from '@components/button'

Editors like VSCode automatically support the config in jsconfig.json, so Command+Click to jump to the source of a file will work as usual. Atom and IntelliJ also have support for rewrites.

The original post, using a babel plugin.

Custom text underlines

Paco Coursey — Tue, 11 Feb 2020 05:00:00 GMT

The text-decoration: underline CSS property provides insufficient control over the underline styling and position. While we wait for the CSS Text Decoration Module specification to become standard, we must rely on custom implementations.

My favorite approach is to use a linear-gradient to create an underline:

background-image: linear-gradient(gray, gray);
background-size: 100% 1px;
background-position: left bottom;
background-repeat: no-repeat;