Black Sheep Code
rss_feed
A black sheep typing at a computerA black sheep typing at a computer

Black Sheep Code

Tech writings from David Johnston.

Work

Open Source Projects

  • react-github-permalink - Provide a Github permalink and this React component will display the codeblock. I use this component regularly in my blog.
  • TypeScript Tutorial Series - A TypeScript tutorial series, complete with interactive exercises, starting from the very basics and going up to generics and mapped and index types.
  • Javascript 101 - A JavaScript tutorial series for people who know nothing about coding. Complete with interactive exercises.

Just For Fun

Blog

How to create a responsive React hook to listen for changes to cookies

Published:

Your React components may wish to listen for changes to made to cookies, whether they were made by other React code, or HTTP requests or non-React JavaScript. The CookieStore API can help.

Using cookies in React Server Components to avoid a flash the incorrect content.

Published:

We make use of NextJS's `cookies` function to access the cookies on the server side.

The natural state of software is chaos

Published:

The perfect codebase is a myth. Abondon the pursuit of it, and instead seek to contain the mess.

Migrating from Remix to NextJS

Published:

NextJS appears to well and truely established. These are the steps I followed to migrate from Remix 1.9.3 to Next 14.

An overview of configuring proxy behaviour in NodeJS applications

Published:

You may wish to proxy node requests via service like mitmproxy for the purpose of analysing the requests its making or generating test data. Here's a quick reference sheet for setting this behaviour up.

How to publish a React component package, using NextJS as the compiler

Published:

Although your component library may not be making use of React Server Components and the like, it can be helpful to see how the component behaves in a NextJS context.

How to configure NextJS to proxy its requests

Published:

We may wish to proxy the requests NextJS makes, for example through a tool like mitmproxy in order to analyse traffic or generate test data.

The problem of testability in React

Published:

It seems like there are no perfect solutions for testing in React.

git checkout interactive

Published:

micro: gci is an interactive CLI utility to select a git branch with arrow keys.

Adding dark mode to a blog - how to avoid flashes of the wrong theme

Published:

I've added dark mode to this blog. Here's a few tricks I've learned.

Advice for unemployed, experienced devs, in the current job market downturn

Published:

AKA don't make the mistakes I did.

How to configure Remix and mdx-bundler for a serverless platform - barrel files approach, Remix v1

Published:

If using Remix on a serverless platform such as Netlify we can use a build time compilation and barrel files to access frontmatter metadata.

How to get started testing a React codebase that has no tests.

Published:

You've inherited a React codebase that has no tests. You're having trouble with regressions and think that tests might help, but how do you get started?

Run a Docker image on AWS ECS + Postgres using Terraform CDK

Published:

CDKTF is a tool that allows us to use fully fledged programming languages to do Terraform deployments, having the advantage of being type safe for one.

Why I've gone off React Testing Library

Published:

React Testing Library is perhaps the most popular tool for testing React applications. However its use of JSDOM under-the-hood means we often spend time dealing with browser APIs that JSDOM has not implemented.

How to configure Remix and mdx-bundler (with file system access)

Published:

How to use Remix and mdx-bundler to make use of frontmatter headers. This will allow adding publication dates, or grouping posts into series, adding tags, etc. This solution works for a non-serverless solution - it requires file system access.

Testing Easy Markdown Editor

Published:

Easy Markdown Editor is a handy markdown editor with formatting keyboard shortcuts. This post outlines how to write tests for applications using it, using either Testing Library or Cypress.

Various approaches for testing an Single Page Application as it relates to state management

Published:

The presence of state management is often what makes testing an Single Page Application difficult. Various approaches such as API mocking, dependency injection, component composition and error boundaries can help.

Today I learned: The Etc/GMT+x timezones actually mean UTC-x

Published:

Counter-intuitively Etc/GMT+x timezones means the opposite of how they appear in an ISO 8601 formatted date string.

Black box contract testing - third party API mocking using Mockbin

Published:

We have an API that makes calls out to a third party - how do we test it? We can use .HAR files to configure a tool like Mockbin to act as the third party service.

The horseshoe model for software development

Published:

I propose that the designer and the QA should be one and the same.

OpenAPI contract tests - Performance testing

Published:

We can use a tool called jest-timing-reporter to provide a performance diff in our Github pull request.

OpenAPI and contract tests with Jest

Published:

Using good ol' Jest to write some contract tests with our OpenAPI generated client SDK.

Postman and OpenAPI

Published:

Syncing Postman with our Github repo, generating queries from our OpenAPI spec.

Postman and OpenAPI - Automated Tests

Published:

Postman has an automated testing feature, but how well does it work?

The case for blackbox tests

Published:

Blackbox tests do not require knowledge of the implementation details - they're a 'how the consumer sees it' style of test.

This blog now features comments

Published:

You can very easily add comment functionality to a webpage via the Github-powered Utterances plugin.

Thoughts about JSON API

Published:

JSON API is an opinionated REST API structuring spec. I think it has some good ideas about what can be useful in a RESTful API, but ultimately the complexity of using it makes it not worth using.

Generating MSW mocks from an OpenAPI spec.

Published:

We're using msw-auto-mock to generate MSW mocks to test our React application.

Why I don't like API mocking as a necessary frontend testing strategy

Published:

A lot of state management frameworks recommend doing API mocking as the testing strategy. I think dependency injection is a better approach.

User Experience reflects data the underlying data structure

Published:

I propose a variation of Conway's Law.

Generating server and client code using OpenAPI tooling?

Published:

We'll use openapi-generators to generate a Go backend and a React frontend.

I'm playing with Remix

Published:

Using Remix to generate a static blog.

Why use OpenAPI?

Published:

OpenAPI is a spec for describing HTTP APIs. It has a healthy ecosystem of tooling that supports it.

The case for splitting Cypress tests into multiple it blocks

Published:

Cypress recommends long running tests with lots of assertions. I argue that it would be helpful if we had granular visibility of the parts of the test.

A model of extensible changes.

Published:

Making changes in an extensible manner avoids having to do significant code rewrites or being disruptive to downstream consumers of your API.

Dependency injection when using redux.

Published:

An unconventional strategy to inject the behaviour of your state management in testing contexts

Different Approaches to Form Element State Management in React

Published:

Working with lists of data for form inputs such as radio buttons or checkboxes is non-trivial. I outline three approaches.

Agnostic state and service management in React

Published:

Avoid make state framework specific calls inside of your React components, and instead access them via hooks. This reduces the cognitive overhead in understanding your components, and likely allows reuse of those data fetching functions elsewhere.

What is the role of QA and how should their tests fit into the development process?

Published:

If we're doing shift-left testing, and developers are writing their own tests - then where does that leave QA?

How to effectively hire contractors

Published:

Contractors are best utilised to plough through a well defined scope of work.

I support open source: Open Collective