Chris Biscardi

moon indicating dark mode
sun indicating light mode

Shipping multi-package repos with GitHub Actions, Changesets, and Lerna

Let's say you have a repo full of a set of NPM packages, such as a Yarn Workspaces setup. How do you publish those packages? With GitHub…

Accessing Frontmatter through interfaces

Sometimes you have that one-off field you need to use. So you throw it in the frontmatter of your Markdown file and... then what? The…

Applying theme options using React Context

If we're trying to use (and let other people use) values from the options that get passed into our theme inside of React components, then we…

A first look at FaunaDB

FaunaDB is a geo-replicated database in the style of Spanner and Calvin . It includes a GraphQL integration natively, is multi-tenant by…

You should livestream

This could be a long post about the motivations of people who stream and how if you stream you will become a better engineer, a more…

Gatsby Shadow Contexts

Gatsby's Shadowing functionality works on the concept of a "shadow context" or "shadow set". This concept doesn't have a specific name…

Getting started with Netlify functions and go modules

When building Gatsby sites we don't run a server, so to use any dynamic logic we can take advantage of serverless functions. In our case we…

Using MDXProvider host elements in react-live scope

Now we've established that useMDXScope grabs from the context for imports and useMDXComponents grabs from the combined value of…

Using MDX shortcodes in react-live scope

Importing a component into an MDX file provides it to the MDX content in a different way than using MDXProvider context. Let's say Button…

Using MDX scope in react-live scope

I started writing this as a result of a conversation we had on Jason's Livestream about how to get code blocks to use the components…

Using Gatsby Shadowing without Gatsby

Gatsby themes introduced an API called Shadowing. This API is implemented as a webpack resolver plug-in. I recently rewrote the tests for…

Applying theme options using custom configuration nodes

Building large Gatsby themes can result in a large array of configuration options to manage as a theme author. We can also find ourselves…

Applying theme options using webpack's defineplugin

Sometimes as a Gatsby theme author you need to take a theme option and inject it into the bundle in an arbitrary location. Using web pack's…

Using theme options in gatsby-config.js

Gatsby themes allow you to pass in options in the same way plugins get options. Since gatsby-config has historically exported an object, as…

Removing drafts from gatsby-theme-blog

To indicate that one of our MDX files is a draft, we’ll include an extra front matter field called status. This field will appear in the…

Creating MDX Nodes from Raw Strings and Nodes

Raw Strings If you have a string and you want to create an MDX node from it (for example if you're querying the github API which doesn't…

Sourcing Data from Multiple Locations in Gatsby

How can we construct a GraphQL interface such that we can source data from multiple locations? Check out the livestream here: The old way…

Manipulating Gatsby Page Context with onCreatePage

Adding additional context to a page is a supported part of calling createPage . This field is often used to pass a simple identifying piece…

Constructing Query Types in Themes

Previously, we covered how seemingly innocuous queries can prevent your themes from being composable when used with other themes and even…

Authoring Queries in Themes

Building composable themes requires a slightly different mindset than building a conventional site. Consider the following cases with one…

Layouts in Gatsby Themes

First let's talk a bit about layouts. They come in many shapes and sizes, with navigations, headers, footers, sidebars, responsive menus…

Styles and Naming

There are only two hard things in Computer Science: cache invalidation and naming things. - - Phil Karlton Phil Karlton (and many people…

The Small UX of Users of Gatsby Themes

As authors of themes we can take advantage of starters to make it easier for users of our themes to bootstrap new projects, thus…

Introspecting Gatsby Data for URL Redirects

I recently needed to switch out the slugger I was using from slugify , which requires a bunch of configuration to get the behavior I want…

Listening vs Reading

Last year I had a goal to read 30 books over the year. I hit double digits but didn't make it through all 30. Something else happened last…

Starters and Themes Together

In the last post in this series, we converted the gatsby-starter-blog repo into a theme. We only made changes that were absolutely…

Running a Gatsby Starter as a Theme

Gatsby themes introduce a new model for building Gatsby sites and apps. However, due to the recency of themes being available, the majority…

Getting Gatsby Images from Generated Fields

Ever since I wrote SEO Images with Unsplash I've been making images for my posts, pulling the branch down to my local computer, adding the…

Getting started with Emotion and Gatsby

Emotion is a library for authoring and composing CSS rulesets in a performant way. Here's how to get started using it with Gatsby . First…

Autocompleting Yarn Commands in zsh

Usually I use jq to discover what scripts a node project uses like this: This is fine, and I can always find it be reverse-searching my…

Gatsby Plugin MDX Components API Design

Currently there's an issue that can pop up with respect to MDX and compatibility with the wider Remark ecosystem. Remark AST transformations…

Notes on Parsing the GraphQL SDL

Lately I've been doing some work with the GraphQL SDL and graphql-js (because it's for Gatsby and Gatsby is JavaScript). This post is…

Composing Yarn Workspaces

This week we've been going over multi-package repo tools. Today I want to share a workflow that is enabled by those tools, even across…

Multi-Package Repos with Lerna

Lerna is a multi-package repo tool similar to Yarn Workspaces. Many projects choose to use Lerna as the UI for interacting with their multi…

Multi-Package Repos with Yarn

Yarn workspaces are a great option for working on multiple packages at the same time. They replaces npm link , gives you the ability to…

Accessing Props in MDX

When writing MDX, sometimes you want to display more dynamic content than you otherwise would be able to. An MDX file that can be templated…

SEO Images with Unsplash

I added an SEO component to my blog recently and on top of that I decided to set up infrastructure to pull in images for Twitter, etc. The…

Composition of Styles: Strings vs Objects

The most convenient way to write CSS-in-JS styles is with strings. This has multiple benefits such as easier copy/paste from existing code…

Component Shadowing in Gatsby Child Themes

Today on stream I worked through the final steps for implementing Child Theming for Gatsby. The interesting outcomes of this are that…

Building a Basic Gatsby Site

Gatsby is a fantastic tool for building out almost any site you can think of. Due to how flexible it is, some people find themselves…

CSS-in-JS Theming on a Component Level

When I wrote Styled System on React Hooks I explored what it might look like in the near future to consume a theme context provided by the…

Building Gatsby Plugin Webmentions

I've been idly thinking about how to do comments on my blog since a few people I follow on Twitter have started asking again. Now, to be…

Components vs AST manipulation in MDX

MDX presents a new paradigm for people currently using remark (or other markdown rendering approaches). When using remark the most common…

How MDX transforms into JSX

MDX is at the core of gatsby-mdx and unified is at the core of MDX... but if you're not immersed in the tech it can be hard to…

Drawing a Blank

I went to college to play volleyball and studied for an art degree while I was there. I taught myself how to program using actionscript…

How and Why: Static Queries in Gatsby Themes

Static Queries are now supported in Gatsby Themes thanks to Dustin . Static Queries are useful in normal Gatsby applications to add…

Styled System on React Hooks

I'm pretty confident that the next generation of design-system tools like styled-system will be built on React hooks. So let's take a look…

Controlling the Gatsby Application Root

One of the features I really like about Gatsby is the ability to control the root of the application. In gatsby-ssr.js and gatsby-browser…

Contorting Webpack to Render HTML for Gatsby MDX

Here's the code I was just in the middle of writing when I realized I should stop and try to use webpack . First off, what is this code…

Codeblocks, MDX, and mdx-utils

Note: Since the publishing of this post, MDX has hit 1.0. In 1.0 we removed the intermediary MDXTag component mentioned here in favor of…

Towards Shortcodes for Gatsby Sites

Many blogging platforms have the concept of shortcodes. This is especially prevalent in the WordPress community and other places like…

Design Systems: People, Processes, and Emergent Behavior

Many people think of Design Systems as a proper noun. This affects the way they map expectations onto terms like "theme", and whether or not…

Gatsby Themes, Webpack Loaders, and NPM Packages

Shipping NPM packages is tough, especially for new users. We need to either use build tooling to precompile our code or somehow make the…

Removing Gatsby MDX Wrappers

I just removed generated wrappers from gatsby-mdx's implementation. This removed a sticking point for a lot of people from the API…

MDX Custom Elements

Disclaimer: This is an advanced topic that bends the internals of MDX to our will. It is not how you should be using MDX for everyday…

Gatsby Themes Core Algorithm

Today we're going to talk a bit about the core Gatsby themes algorithm. For background it may be good to read Introducing Gatsby Themes…

React State With Class Properties

Let's take a look at how to define state inside of React components in order to motivate the usage of class properties. First, the most…

Listeners Without Renders in React

Sometimes you run into a situation where you want to have some logic that isn't associated with any rendered output but starts/stops when a…

Chaining Emacs Commands Without Elisp

tldr; here's a video: Before and After As part of splitting a React component into its own file, Let's take this file and remove the msg…

Emacs Command Frequency 2017

I use keyfreq to record the commands I use in emacs and periodically check the log to see what I should rebind, etc. here's a list of…

Confluent Kafka GKE

In the previous post we went through using StatefulSets to deploy Kafka and Zookeeper on GKE. One problem was that we used an effectively…

Kafka, Kube, and Statefulsets on GKE

Kubernetes StatefulSets StatefulSet is the workload API object used to manage stateful applications. StatefulSets are beta in 1.8. k8s docs…

100 Days of French

Over the last 100 days I've been focused on building new habits. One of those habits is designed to increase my ability to speak French…

Formatting Markdown and Codeblocks With Prettier and Hugo

hugo is a fantastic static site generator. prettier is a fantastic auto-formatter with support for markdown and the codeblocks inside…

React Waypoint Revealable

react-waypoint is a useful tool in the React ecosystem for triggering a function when an element enters or leaves the viewport. waypoint…

Cool Stuff You Can Do With fzf

fzf is an awesome tool for filtering and selecting lists of things on the command line. kill Generalizing kill In addition to the…

Emotion Configurable Imports

tldr: pull request As part of some client work I recently had to port an application from next.js to CRA . Part of this port included…

Do Expressions and Optional Chaining

Do Expressions and Optional Chaining are two extensions that I am particularly excited about in the ECMA pipeline. update I've removed…

Working Faster

When building a startup (or similar new product) it is useful to be able to get as much done as possible. These are some of my current…

Emotion Patterns Button Group

CSS-in-JS patterns: Emotion Button Groups How would we build a Button that can be set up as part of a larger ButtonGroup ? Typically in…

Hard Scheduling

Recently I started completely scheduling out every weekday from waking up to going to bed, which I'm calling "Hard Scheduling". This…

Work vs Home Equipment

In the ongoing conversation about "work from home" and remote work I've been thinking a lot lately about what professional equipment I have…

React: Communicating With Children

How do custom React Components communicate with their children? A Simple Case Given two components, A and B , where A renders arbitrary…

Building a Docker Registry

Containers are surging right now. This series of blog posts will explore a small corner of that universe by building a Docker Registry that…

Servant Custom Content Types

Recently when implementing a Docker Registry I came across the need to hash the incoming request body in a way that matches the clients hash…

Response Headers with Servant

It can be hard to figure out how to deal with all of the type machinery in Servant. This post details adding headers to the response of a…

Instrumenting Servant with Prometheus

To set up a Servant/WAI application with monitoring, we will first scaffold a servant application using stack. To instrument our servant…

Reproducible Tutorials with Stack

Stack yields some nice benefits for blogging, tutorials, and more. The main benefit I want to talk about today is reproducibility when using…

Episode 1: A New Blog

Hooray! A new published version of my blog (which also happens to include everything on this domain and thus is not just a blog). A New Blog…

Deploying a Minecraft Server with Docker Machine

The previous post explains how to get up and running with Docker machine. This one will be a quick tutorial on setting up a Minecraft…

Docker Machine

In this post, I will record the process through which I attempt to use Docker Machine to deploy a simple Haskell application on Digital…

Using the Docker-Haskell Official Image

Prerequisites: an install of Docker (If you don’t want an install, Digital Ocean also has a Docker Droplet). The Docker-Haskell “Official…

Emacs in Docker

Assuming a docker installation (either boot2docker or just docker) and a version of 1.3 or higher, we can use Volumes to enable a portable…

Deploying Snap with Docker

Previous Post – Working With Snap 1.0 In our previous post we built out a scaffold project with Snap 1.0. In this post we’ll go over…

Working with Snap 1.0

Snap 1.0 isn’t on Hackage yet, but here’s how you can play with it now. NOTE: This was written using ghc-7.8.3. The repo is on GitHub First…

A Foray Into Haxl: PostgreSQL Simple

I wrote a simple Haxl DataSource and I thought it would be good to share. If you don’t know what Haxl is you can find out more here . The…

STM-Containers Benchmarks

Benchmarks available on GitHub and as Github pages . Tests were run with ghc 7.8.2 and a 12 core Mac Pro (Trashcan). Here’s a fun…

Getting Started with PureScript

According to PureScript.org PureScript is a small strongly, statically typed programming language with expressive types, written in and…

Handling Taps on List/Grid Items with ViewPagers (GestureDetector)

When placing a ViewPager inside of a GridView recently I ran into the issue of the ViewPager stealing the GridView Items’ click event. I had…

Snap, Postgres and Heist: Displaying Data from Queries

The github repo for this post is here . Single AuthUser Splice Assuming we have instances and initializations for the Postgres Auth backend…

Getting Started with Robolectric: Headless Android Testing with Vagrant

In this post we will go over how to set up the sample project for Robolectric, run, test and deploy to a device in a headless vagrant…

GHC -ddump-minimal-imports and CPP error: missing binary operator before token "("

Today I was trying to extract the minimal imports for a module using ghc -ddump-minimal-imports but I was getting this error on some files…

Riak, HAProxy and Haskell: MultiMachine Vagrant on OSX

In this post we will go over how to set up five Riak nodes, cluster them, setup HAProxy on a sixth machine and run a Haskell environment in…

GeoSpatial Indexing with Riak Search 2.0 (Yokozuna/Solr)

In this post we will be using curl to construct a geospatial index using Riak Search 2 (also known as Yokozuna) which is backed by Solr. I…

Environment Variables in Haskell

In this post we will go over how to accept environmental variables in Haskell. We can compile this if we put it in a file called env.hs…

Writing A First Emacs Elisp Function

So today I tried to write my first fully custom Emacs Lisp code. Here are some things I learned (along with the code for a region-to-gist…

Deploy Haskell's Snap on Heroku

In this post we will deploy our Snap app to Heroku. part 1 part 2 part 3 First, we need to put a Procfile in the root of our project…

In Search of a Riak Solr Client for Haskell

In this post are the beginnings of riak-solr-client. First, we need to take a look at the response from Solr/Yokozuna/Riak-Search-2 for a…

Android ListFragment Populated by RoboSpice

In this post we are going to add a ListFragment backed by the RoboSpice data from the first post The git repo is here . Firstly, we are…

Android RoboSpice with GoogleHttpClient

In this post we will examine an example app in which we make a RoboSpice request using GoogleHttpClient. The github repo is here…

MOCL for Android Part 2: Drakma

In this post we will enable Drakma HTTP support in the Android/MOCL example code. I have forked the repo on Github for posterity. The…

Scaffolding a Clojure/Compojure Webapp for Heroku

In this post we’ll go through the process to create a basic Clojure/Compojure/libnoir scaffolding project and deploying it to Heroku. First…

Getting Started With Snap (and User Authentication): Part 3

In this post we will be replacing the JSON file (for user authentication) with a Postgres database. Git Diff and Repo part 1 part 2 In…

Common Lisp on Android: Running the MOCL Android Example

Prereqs: Install ADK, Android NDK, and mocl. git clone the sample app somewhere: Import the cloned app into Android Development’s version of…

Getting Started With Snap (and User Authentication): Part 2

Git Repo part 1 The file structure now looks like this: abc.cabal includes our dependencies and build information. This file is read when…

Using Databases inside of Snaplet Auth Restricted Routes

The github repo for this code is at here . tldr; use this instance: The app we’re using was built by running snap init and adding the…

Books on My Bookshelf for 2014

I decided to take stock of the books that are sitting on my bookshelf for 2014. Here is that list. Starting with some (of my) classics…

Getting Started With Snap (and User Authentication): Part 1

Part 2 Before we get started, there is a quickstart on the snap-framework site here that goes into the barebones scaffold project a bit…

Flattening Nested Arrays in JavaScript

I was writing a quick script today and came across a nice use case for .apply to merge nested arrays into a single array. So I figured I’d…

Installing Montage: A Riak sibling resolution library written in Haskell, on OSX

Here is a description of how I installed Montage ( https://github.com/bumptech/montage ) with GHC 7.6.1 First clone these repos (the…

Vagrant Can Not SSH Into the Box

For Vagrant, if you see this error after vagrant up -ing the box.

Installing Yokozuna on OSX Lion with Homebrew

It’s important to have Ivy installed before make yz-setup or the priv/solr.jar won’t be built. The build script only checks for the…

Clojure Compojure Jetty Integration

If you want to deploy a Clojure/Compojure application you’re going to need a couple hints. First, in project.clj you’re going to need to add…

Quick Tip: Haskell List Comprehensions

I think list comprehensions are my favorite reason to pull out Haskell. For example: I was recently asked this: You have a row of 10…

Quick Tip: JavaScript Partially Applied Functions

Say we have the following function: We can use this function to create new, higher order functions that increase a number by a certain value…

Consistant Hash Routing in Riak Core

Prerequisites The Code The first function, shown above, pings a random (random enough for our purposes) vnode and returns the partition…

Riak Core: Quickstart

First Retrieve the Rebar Templates and put them in ~/.rebar/templates You’ll also need Rebar and Erlang . I used homebrew to get them…

Riak Core: Up and Running

Some of the current Riak Core resources available are: try try try: A blog written by Ryan Zezeski. It includes a few posts on Riak Core…

Riak Core: myapp:ping().

As seen in the quickstart post ; the default Riak Core template gives you a myapp:ping(). method. I named my application spades, so my…

Riak Core: Unique Identifiers

To generate a unique identifier, Riak Core exposes: Which returns a string that looks like this: The full function can be seen below:

A Python Flask CRUD

Recently I was asked to build a CRUD app. The task was open to using any tech I wanted on the backend, so my first thought was a distributed…