Heading image

I have recently begun redecorating my room and a recent addition was a new set of frames. While the frames are nice, I am not the greatest fan of the default prints that have come with it! After struggling to find adequate prints of the desired size, I have come to the conclusion that I may as well use this as an opportunity to explore generative art and create some stills to print on my wall in the interim (until I find my desired prints).

In today’s tutorial, we are going to explore p5.js and slowly explore a generated sinusoidal…

Heading image

ndb describes itself as “an improved debugging experience for Node.js, enabled by Chrome DevTools”.

It enables some of the best features of Chrome DevTools to become an ally when debugging Nodejs applications.

In a previous blog post, we went through debugging through VSCode. In this post, I will show how the profiler from ndb can help you identify and address bottlenecks where possible.

Getting started

Install ndb globally, initialise a new project and create a new file for the example:

Inside of package.json, update the scripts to include a start script:

Our first example

We are going to calculate the Fibonacci number and…

Heading image

VSCode comes jam-packed with some incredible tools to help you build your applications.

One such tool is the built-in debugger. This debugger can make life far easier when you are debugging Node.js applications!

In today’s post, we will create an incredibly simple Node.js application to sum two numbers and show how the debugger can be a powerful tool for help to run through your programs and identify issues.

Getting started

We will initialise a new npm project and install jest from your root directory of choice and create some files to run things through:

Open your new hello-vscode-nodejs-debugger folder in VSCode…

Heading image

Today’s post will demonstrate how to have a script automatically run as a cron job on your Mac computer using crontab.

We will demonstrate by automating a simple script to add the word “hello” onto a new line every minute and showing how we can log out stdout and stderr to a file after each run for our sake.

Getting started

We will create a .scripts folder at the root using to store our scripts to be used by crontab and create a file hello.sh to store our script:

Inside of the file hello.sh, add the following:

The above does…

LocalStack provides an easy-to-use test/mocking framework for developing Cloud applications. In today’s post, we’re going to have a quick look at setting up LocalStack locally to work with their free tier AWS emulated products.

In particular, today’s post will have a quick look at emulating S3 buckets for local development.


Before getting started, it is required that you have the following on your machine:

  • Python (both Python 2.x and 3.x supported)
  • pip (python package manager)
  • Docker
  • AWS CLI (for interacting with LocalStack after installation)

Installing LocalStack

Following the instructions on their README, we can use pip to install the package.

Running LocalStack


Heading image

In this post, we will set up DynamoDB for local development and learn how to use the provided UI to explore the data we work with.

Getting started

Create a new project directory to work within.

Head to the AWS documentation page and download a version of DynamoDB into the project directory.

I will download the Oregon zip file.

Ensure to unzip the folder into the project directory. Within that folder, I am going to move the DynamoDBLocal_lib and DynamoDBLocal.jar file up to the project directory root (you can remove what is left of the folder after if you would like).

A design system will make you more productive and help you build new features and components faster

Heading image

When building out a UI component library for my own work, I ran into a couple of pain points while searching for how to create a simple workflow that “just works.”

Most tutorials I saw for TypeScript component libraries made use of build tools (which at times caused headaches) and my current job took the opposite extreme of publishing the UI component library as TypeScript and relying on individual projects to transpile it to JavaScript directly from the library itself (if you are from my company… you didn’t read anything).

This tutorial will show you how to set up a…

Heading image

Add your own simple authentication to websites using Next.js Auth

Password protection for deploys can be a costly payment when hosting websites, particularly when you want to protect branch deployments.

In today’s tutorial, I am going to show you how you can set up your own simple authentication protection on these branches using Next.js 10 and Next.js Auth.

Getting Started

Setting up the API

In pages/api/auth/[...nextauth].js, add the following:

We are going to use NEXTAUTH_USERNAME and NEXTAUTH_PASSWORD to set up our basic environment variables.

The above will make a comparison, and if that comparison is correct, we’ll return the user object which will just be a name of admin and ID of 1.

Setting up a private page


Heading image

Next.js released an optimised image component that optimizes how images load on Next.js websites. In their own words: “Images are always rendered in such a way as to avoid prevent Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.” — Next.js image docs

In this post, we’re going to explore and play around with this new component to see it in action.

Getting Started

We will use create-next-app build out the project:

Selecting an image

For this particularly exploration, I went to Unsplash and chose an image to my taste.

In this case, I went with Florian…

Heading image

In this post, we will be diving into one of Next.js 10’s new advanced features in internationalised routing and how we can use this with react-intl.

Getting started

Create a new Next.js 10 project by running npx create-next-app i18n-example to create a new project name i18n-example.

We will run some other commands to set things up:

For installing react-intl I've used --legacy-peer-deps as there was a peer dependency of react@^16.3.0 and I was running npm v7.

Now that we have some files going, let’s get started with some basic content!

Setting up Next.js i18n

Follow on from the docs on getting started, we need to…

Dennis O'Keeffe

Senior Engineer @ UsabilityHub. Formerly Culture Amp.

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