By setting up a simple TypeScript monorepo.

Sharing code between NextJS projects can be easy. With yarn workspaces you can have multiple applications in a single repository — a monorepo — and use the next-transpile-modules plugin to allowing the importing of code from one into another.

See the example repo here.

Image for post
Image for post

I had a NextJS application which had become quite large, to the point where it made more sense to start migrating some of it to a new, separate NextJS application. But some code would be needed in both the original application and the new one.

The code I wanted to share was very simple — not worthy of its own repository, not worthy of building/publishing it and including it as an external dependency. I just wanted to import the code from one application into another.


Final few lessons learned during a busy few months.

Image for post
Image for post

The final part in the series, following Part I and Part II.

During the few months that I stood at my desk in the kitchen, I worked on 3 projects all with very different tech stacks. I wrote some good code and I wrote some bad code. I lost what feels like years of sleep, but more importantly, I gained what feels like years of experience.

I want to share some of these experiences and pass on some useful tips that I picked up along the way.

Instant messaging and video conferencing with Upstra and Jitsi

Building a web application that supports instant messaging and video calls is a daunting task, especially when you’ve only got the weekend to do it. …


But hopefully useful to others too.

Image for post
Image for post
Photo by David Travis on Unsplash

This is a curation of Next.js documentation, explanations, and advice. With a few code snippets and images to help along the way.

It focusses mainly on how the ‘server-side’ works in Next.js. Spoiler — it can do more than just render HTML

Currently, Next.js latest version is 9.5.

What is Next.js?

It’s a framework for building server-side rendered React applications.

But Next.js is not just for building an application’s frontend, because of its ‘server-side’, it can be used to build a full backend for the application as well.

How does the server-side work?

The ‘server-side’ in Next.js applications can be separated into two parts:

  1. The server-side rendering — how Next.js generates HTML on the server-side and sends it to the…


Not writing code can be just as important as writing code.

“We can deliver this feature for the client by Friday, right?”

This might sound like a reasonable question for a Product Manager to ask, but for the Software Engineers on the receiving end, there’s a lot more to it:

  1. The client has already been told they will have it by Friday.
  2. There will be no time to plan the feature properly, meaning low quality and lots of bugs.
  3. No sleep until Saturday.

And yet the team of Engineers remain silent, leaving the Product Manager increasingly pleased with their team of Engineers who will once again achieve the seemingly impossible.

Image for post
Image for post
Photo by Roger Bradshaw on Unsplash

And impossible it may be — or at least impossible to deliver the feature with any sort of quality, and without disrupting all other work. …


Using AWS with Netlify build hooks

Image for post
Image for post
Photo by the author.

Previously, I wrote about updating my Gatsby website to fetch data at build time instead of at runtime. This means that the site only fetches data from external APIs during the build process, rather than every time a user visits the site.

I did this because my data was fairly static — it’s a list of coffee shops that changes just once a week.


More lessons learned during a busy few months.

Image for post
Image for post

Part II in the series.

During the few months that I stood at my desk in the kitchen, I worked on 3 projects all with very different tech stacks. I wrote some good code and I wrote some bad code. I lost what feels like years of sleep, but more importantly, I gained what feels like years of experience.

I want to share some of these experiences and pass on some useful tips that I picked up along the way.

Build your own translation service

Before moving to Bangkok earlier this year, I’d never worked on an application that needed to support more than one language — hardcoding text in English was all I’d ever known. …


JavaScript fatigue taking its toll.

Exhausted women with head on laptop.
Exhausted women with head on laptop.
Photo by Ketut Subiyanto from Pexels

For the last few years, I’ve tried hard to keep up with the React ecosystem, and more generally the surrounding JavaScript ecosystem that seems to move impossibly fast.

For most of that time, I’ve also promised myself that I’ll learn some new languages, try some new technology — anything that puts me outside of my JavaScript comfort zone.

Recently I came across the phrase “JavaScript fatigue” and immediately self-diagnosed.

But for the most part, this hasn’t happened. This hasn’t happened because keeping up with React and JavaScript can be exhausting — sometimes I’m genuinely afraid of falling behind the curve, leaving me with little time and energy to explore other things. …


Lessons learned during a busy few months.

Image for post
Image for post

My memories of the COVID-19 pandemic in many ways will be the same as most: a makeshift standing desk in the kitchen, a plummet in daily step-count, and a distorted view of hours, days and weeks.

Where my memories differ is when I think about the work I did at Amity during this time. Amity took on many exciting opportunities: helping hospitals to manage their potential COVID patients, helping companies, schools, and universities to work remotely, all whilst enhancing the core Amity products for existing clients.

During the few months that I stood at my desk in the kitchen (a stool placed on top of the table), I worked on 3 projects all with very different tech stacks. I wrote some good code and I wrote some bad code. I lost what feels like years of sleep, but more importantly, I gained what feels like years of experience. …


Image for post
Image for post

The JavaScript Bangkok 1.0.0 conference was my first look into a JavaScript community outside of Europe. Combining all of Bangkok’s JavaScript communities (React, Angular, Vue, NodeJS), this was the largest conference in Bangkok to date. Fortunately for me, it was also their most international conference, meaning that most of the talks were in English, and those spoken in Thai had (nearly) real-time subtitles for us farangs in the audience.

Here’s a quick summary of what I took from the day.

Building your first malicious chrome extension

Chrome extensions — small, powerful, and sometimes evil. Alon Kiriati demonstrated an example Chrome extension built from just a few small JavaScript files; the extension changed the displayed currency of an item’s price on Amazon whilst also adding his personal referral tag to the URL helping him to earn some money — pretty clever! …


Using client runtime data fetching instead of build time data fetching

Image for post
Image for post
Photo by NeONBRAND on Unsplash

Like many others, I recently built myself a website using Gatsby. But what I actually did was bootstrap an application with the Gatsby CLI and then treat it like any other React application — I might as well have used create-react-app.

As you’ve probably heard, Gatsby makes it easy to build static websites that are progressive web apps, “blazing fast”, secure, SEO-optimized, etc. using React.

Most of these benefits can’t be avoided because they’re built into the way that Gatsby works and yet I still managed to provide a user experience that didn’t live up to the Gatsby standard.

The Mistake

One of the website pages shows a list of (mostly very good) coffee shops, the data for which comes from an external REST API of mine. …

About

Chris Vibert

Mainly JavaScript, but trying other things. Bangkok 🇹🇭

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