Scott Bolinger

Adventures in Software Engineering

  • A Brand New WooCommerce Checkout Experience

    I’m excited to share what I’ve been working on at GoDaddy for the past several months: a super fast, mobile focused, headless checkout for WooCommerce. This is not a new checkout page template, it’s a completely new experience built from scratch to load faster and help customers checkout faster, especially on mobile. Modern eCommerce checkouts…

  • Cypress Testing Tricks

    I’m currently building an eCommerce checkout app, and I’m using Cypress for end to end testing. I ran into some issues and learned some tricks I’ll share with you here. If you aren’t familiar with the term e2e, it means testing the whole app from the user perspective. In my case, that would be add…

  • Type Safety for GraphQL Data

    When using a GraphQL client like urql, one of the issues you may run into is that your query and mutation responses are not typed. For example, let’s say we have a cart query: When we use this query, it would be nice to see autocompletion in our editor, as well as errors if we…

  • Custom React Hooks

    When you are building a component library, or working on a large project, one of the issues you will run into is having too much logic in your components. If your component starts to look like this, it’s time to create some custom hooks: If you have multiple components using state and effects in a…

  • The Best Style API for Reusable React Components

    When creating reusable React Components, either in a library or for your own use, you need a flexible way to style your components. There are 2 parts to this, what library or style system should you use, and then how do you implement that? Regarding the what style system to use, you have a lot…

  • Don’t Make Black Box React Components

    When building reusable React components, it’s tempting to make black boxes. That would be something like this: At first glance, this looks fine. You have a specific use-case for this component, you got a design and it is used in a single place, and it works perfectly for that. You built it in a way…

  • 7 Thoughts From 7 Years of Headless WordPress Development

    I’ve been working with headless WordPress for about 7 years now, first at AppPresser working on mobile apps, and now at GoDaddy working with Ecommerce. The things I’ve learned can’t be distilled into one blog post, but these are the most important ideas that can trip you up when starting a new project. wtf is…

  • React prop hooks

    When creating a component in React, we can use props like this: This works, but there are a couple of downsides. If your component has a lot of props, and a lot of logic, it can make a large file that is hard for other developers to read. You may want to reuse that logic…

  • Why we chose static CSS for our React component library

    I’ve been building a headless React component library with my team, and we had to pick a way to style our components. We evaluated several options, including Styled Components, Tailwind, and Vanilla Extract. We ended up going with static CSS, here’s why. CSS-in-JS is slow Our first requirement was that we didn’t want to use…

  • Create a Polymorphic Component with Typescript and React

    A polymorphic component can change into any element based on how you use it. For example, you can create a Box component that will render a div, label, input, button, or any HTML element. This is typically done with an “as” or “is” prop: Why would you want to do this? If you are creating…