Photo by Stephen Phillips — Hostreviews.co.uk on Unsplash

I’m working on upgrading an outdated WooCommerce site, and I was struggling to figure out which versions of PHP and Wordpress each version of WooCommerce would be compatible with.

I went through WooCommerce’s release history on GitHub, which allowed me to find the latest patch version of each minor version. I was then able to use the release dates and the spectacular wayback machine to find the plugin page for each of the releases, which has the compatible PHP and Wordpress version listed.

I put this data together in the table you will find here. I only needed to go…


Photo by Goran Ivos on Unsplash

August 01, 2020

TL;DR

You will need FZF, git, and a linux/unix-based operating system to follow along. The same workflow is probably possible on Windows, but I don’t know how to do it.

Here is the command, I recommend setting up an alias for it:

git branch | fzf | xargs git checkout

My previous workflow

If you are like me, you work on projects with a ton of git branches. I work on one project which has 87 branches at the moment, and another with 36.

When I need to switch branches, I can never remember what the name of the branch I…


Photo by Matt Seymour on Unsplash

July 27, 2020

TL;DR

Use this hook:

// This hook provides a ref which is perpetually up to date but will
// not trigger any renders. This is useful for resolving circular
// references in dependency arrays.
export default function useNoRenderRef(currentValue) {
const ref = useRef(currentValue);
ref.current = currentValue; return ref;
}

Like this:

const [item, setItem] = useState(0);
const [queue, setQueue] = useState([]);
const queueNoRenderRef = useNoRenderRef(queue);
useEffect(() => {
// Access queue data using the special ref from the hook, but use
// the normal state writer. Since we don't have to include `queue`
// in…


Photo by Tekton on Unsplash

Faraday is a very powerful tool, and you can make it even more powerful.

TL;DR

Check out the repo to see the files we create in this blog post.

Welcome

Faraday is a Ruby web request library. Ruby’s standard library includes tools such as Net::HTTP to make requests, but using them can be a little unwieldy, especially when it comes to handling errors. Faraday abstracts all of that away, giving you a nice interface.

I recently needed to add the ability to cache the last request I made, so that I could send it to Rollbar if it failed. I had to…


Photo by Sarah Kilian on Unsplash

TL;DR

Run bundle update mini_racer

The Issue I Experienced

I’ve been dealing with issues on my Mac for a while, so yesterday I decided to give in and wipe it. I upgraded to MacOS Catalina, then wiped my partition and did a fresh install.

In a few hours, I had almost everything running. Today, I tried to run bundle install to setup a Rails project's dependencies and I was greeted by this:

Error: Command 'cipd ensure -log-level error -root
/Users/brandoncc/.rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/libv8-6.7.288.46.1/vendor
-ensure-file /var/folders/9l/2jz0cz8x56nbz806ty1fwwkh0000gn/T/tmpDPKTcT.ensure'
returned non-zero exit status 1
**\_\_\_\_** running 'cipd ensure -log-level error -root
/Users/brandoncc/.rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/libv8-6.7.288.46.1/vendor
-ensure-file /var/folders/9l/2jz0cz8x56nbz806ty1fwwkh0000gn/T/tmpDPKTcT.ensure'
in '.'
Error: failed to resolve package version (line 5): bad version…


Photo by Edvard Alexander Rølvaag on Unsplash

If you forget to specify a custom uploader, CarrierWave will generate a class for you, which inherits from CarrierWave::Uploader::Base. This can cause issues, which you might not catch at first.

Unintended Consequences

The first issue (and the one that caused me the most grief) is that CarrierWave will upload to the uploads directory by default. This means that if you store your files on s3, all of your uploader’s uploads will end up in your-bucket.s3.amazonaws.com/uploads/. This is almost certainly not what you want.

Other issues, which are a little more obvious, come from the fact that you can’t override the base uploader…


Photo by Romson Preechawit on Unsplash

Axios is a great library, but unhandled promise rejections can be a problem. How do we get rid of them?

TL;DR

Use this interceptor:

axios.interceptors.response.use(
response => response,
error => {
throw error
}
)

The Backstory

I was looking at my error reports on Honeybadger today, and I came across this:


Photo by Kaleidico on Unsplash

Gatsby’s notes theme is a great way to get a “notes” section up and running quickly on a Gatsby site. It doesn’t come with a layout that includes a nice page header though, which is what we’ll be fixing over the next few minutes.

Setup

You will need Node.js installed to follow this tutorial. At the time of writing, compatible versions of Node are ^8.10.0 || ^10.13.0 || >=11.10.1.

We’ll be starting with a new Gatsby app using the default template, which you can create using the following command:

npx gatsby new notes-with-layout

Once this command executes successfully, you can run…


Photo by Jalen O’Neal from Pexels

A little background

In a Rails app I have been working on for a while, there is something like this in the layout:

<!DOCTYPE html>
<html lang="en">
<head>
<%= yield :react_styles if content_for?(:react_styles) %>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>

Sometimes I notice that it seems like there should be some content being yielded in <head>, but it isn’t. I finally confirmed it was happening yesterday, and dug into why.

The problem

After hours of debugging and seemingly going into circles, I figured out what was happening. Some pages had yielded content, while others did not…


I recently needed to render a flash message elsewhere in a React app. As far as I could tell, I had three choices:

  1. Use Redux and a connected component to render the flash message.
  2. Use Context, which is easier than ever to use thanks to the awesome useContext hook.
  3. Use something I saw in the React docs a while ago called a Portal.

Using Redux for display-related settings is something I try to avoid. I have never liked putting form data in Redux and that feeling has spilled over into all display-type stuff. …

Brandon Conway

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store