Previously on my personal website, the blog content, after converting it back to Static Site Pages, I figured out that you can use webhooks to trigger rebuilds. As both Vercel (the hosting provider) and Prismic (the headless CMS provider) have support for webhooks. To do this, we are going to try and trigger a build on the creation and deletion of blog-posts documents.


Firstly, we go into our Vercel project and create a new webhook, to do this:

Fill in the blanks (I named my hook Prismic (Production) and had it target my production branch which is main), then click create.

Now copy the webhook URL into your prismic screen (under Settings → Webhooks), give it a name and paste the URL. then hit Add this webook!

Now you should be able to trigger it, try it out and look under your Deployments tab in Vercel to make sure it works.

And there we have it, static page generation (hopefully) for blogs using NextJS, Vercel and Prismic (with Webhooks!)

Following a discussion on Twitter with @timneutkens, you dont need to use webhooks as of NextJS v10. All you need to do is add fallback: blocking to your getStaticPaths response.

Previously on my personal website, the blog content, after converting it back to Static Site Pages, I figured out that you can use webhooks to trigger rebuilds. As both Vercel (the hosting provider) and Prismic (the headless CMS provider) have support for webhooks. To do this, we are going to try and trigger a build on the creation and deletion of blog-posts documents.

Something happened to my blog but you can't really tell if you visit the frontend of my blog! I migrated all my blog posts over to Prismic as a Headless CMS solution, after finding that I prefer writing my blog content over on a rich text editor and also having to roll out a change to my preview and main branches on my repository (github.com/ericjiang97/nextjs-personal) especially with blog posts.

This is achieved by every time a request goes onto my blog page under the /blog/[uid] directory, as part of the NextJS we fetch the blog contents and inject it via props.

export async function getServerSideProps({ params }: { params: { uid: string } }) {
  const { uid } = params;
  const blogPost = await client.getByUID('blog-post', uid, { fetchLinks: ['category.uid', 'category.category_name'] });
  
  if (!blogPost) {
    return {
      props: {
        error: 'Not Found',
      },
    };
  }
  
  const data = blogPost.data as PrismicBlogPost<PrismicBlogCategory>;
  
  return {
    props: { uid, data },
  };
}

You also may have noticed that I also added some customised types in order to support TypeScript a bit better, especially with some typed interfaces

For example, this is my types files for my Prismic Blog Content

import { RichTextBlock } from 'prismic-reactjs'; 

export interface PrismicBlogPost<T> { 
  title: RichTextBlock[];
  author: RichTextBlock[];
  preview: boolean;
  published_time: string;
  summary: string; 
  body: any; 
  banner?: { 
    dimensions: { 
      width: number; 
      height: number 
    }; 
    alt: null; 
    copyright: null; 
    url: string; 
  }; 
  category: PrismicBlogPostCategory<T>; 
} 

export interface PrismicBlogPostCategory<T> { 
    id: string; 
    type: 'category'; 
    tags: string[]; 
    slug: string; 
    lang: string; 
    uid: string; 
    link_type: 'Document'; 
    isBroken: false; 
    data: T; 
} 

export interface PrismicBlogCategory { id: string; category_name: string; }

You can check out the Prismic Blog Code here, please note that the Prismic API keys/secrets are provided as environment variables.

In a following update to my site, I've changed the way blog posts are fetched from getServerSideProps to getStaticProps on my landing and blog index pages, this will allow faster rendering on these pages. A big thanks to Jane Machun Wong for the tip!

Like many developers out there, Visual Studio Code (VSCode) is now my go to editor for almost everything (with the exception for Android Studio (for Android) and IntelliJ IDEA (for Java)). I really like customising my VSCode, so that it is easier for me to develop on.

There’s a lot of shortcuts that I use on a day to day basis within VSCode, the ones that I use the most include:

Command Palette: ⌘ (Command) + Shift + P

Duplicate current line up or down: ⌥ (Option) + Shift + (Up or Down arrow)

Move current line up or down: ⌥ (Option) + (Up or Down)

There’s a lot more shortcut keys that I use, but those are the most common ones. The VSCode team also has some awesome key binding posters that you can print out and stick near your desk (I used to print these out with macOS on one side and Windows on the other and stick it around the office).

There’s some neat settings that I always loved being enabled within my VSCode User Settings (globally).

The first one is Format on Save, with this enabled VSCode automatically formats the file you are working on, it picks up ESLint, TSLint and Prettier configs which is pretty neat.

The second one is the Terminal Font Family, if you customised ZSH like me, the default terminal sometimes doesn’t know what font to render your icons in your terminal in and you’ll end up with question marks in boxes.

The last one is Enable Commit Signing, this automatically uses the -S for your commits, (use this if you use GPG signing for your git commits!) and integrates nicely with VSCode’s inbuilt Git feature.

I always loved the customisability of VSCode with the community building many beautiful plugins (and language support!).

Excluding language based plugins such as C/C++, Dart, Python, etc. I usually add themes, formatters, and other tools that I use.

These plugins help me with my day-to-day use.

GitLens: gives you the ability to see the history of the file, in addition to files. Also can use git blame more easily too! 🙈

Polacode: Share your code by sending awesome screenshots!

Themes that I love using include Halcyon and One Dark Pro

There’s a lot more tips and tricks that I use for my VSCode, but they’re not really for everyone.

Supercharging your development environment on Visual Studio Code

A few days ago whilst browsing through my old repositories on GitHub, I've discovered a really old app which showcased chaining some really awesome technologies together. This app showed what music I was playing anytime on Spotify or iTunes via Last.fm.

This older version was built in ReactJS + Material UI (v2) you can tell its really old :P

I recently migrated this to be part of this website, the technology is still pretty much the same, basically on my computer/laptop, I have the last.fm scrobbler which 'observes' what music I'm playing,whether its through iTunes or Spotify and broadcasts it on the app.

Then the page uses the Last.fm API to grab the latest information.

I reckon the new version looks pretty cool!! Check it out at ericjiang.dev/music

As you all may have been aware over the past few months, the COVID-19 Coronavirus outbreak started spreading all over the world and into Australia. I’ve been tracking the Australian cases as it started to slowly climb the exponential curve, with most of the cases being imported (and still is) and now central way of keeping track of it. I decided to build a tool which captures this data source from various government websites.

The entire script is automated with Python, and runs every two hours. So the script automatically crawls through various Department of Health websites across the various states (cause this is reported by the states not the Federal Government) and collects certain data points, for example: the Airline, Flight Number, Origin, Destination and Close Contact Rows, Arrival Date.

Then the symptom onset date is calculated by adding 2 weeks onto the arrival date, this is the standard as defined by both the World Health Organisation (WHO) and the Australian Federal Department of Health.

After the data is collated and wrangled with a simple GitHub Action script, it commits it to the Frontend/Backend Repository to be served over Google App Engine. One of the more complex tasks is finding all the edge cases of how to parse the dates, airline – cause this is all manually updated by humans (Humans, smh. Am i right?) and is really error prone.

One of the things I love to do especially is making information more readable and organise it in a way so that people can read it and access it via one single location or source of truth.

You can try the app at https://covid19-flights.ericjiang.dev

I you all may have been aware over the past few months, the COVID-19 Coronavirus outbreak started spreading all over the world and into Australia. I’ve been tracking the Australian cases as it started to slowly climb the exponential curve, with most of the cases being imported (and still is) and now central way of keeping track of it. I decided to build a tool which captures this data source from various government websites.

Analysing COVID-19 Flights in Australia with Python.

I use my terminal 90-100% of the time whenever I’m on my MacBook Pro and like many other developers I really like customising my terminal so that it helps me with my workflow.

I started using ZSH before Apple released it as the default shell in macOS Catalina, alongside with iTerm2. This combination was mainly done with Oh-My-ZSH and iTerm2. Recently I discovered PowerLevel10k which basically does the same thing as powerlevel9k but waaaaaaayyyy faster.

This step is fairly straight forward simply following the instructions at Oh-my-Zsh and you can install it, or you can just copy the install script below (installs via curl)

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

iTerm2 is more straightforward, simply visit the website and just drag-n-drop it into your applications folder.

Now you can install powerlevel10k, simply visit the site: https://github.com/romkatv/powerlevel10k#oh-my-zsh

Now follow the prompts and you should have a new and awesome tool!

Blog - Category: Development

Published on 29 Oct 2020

Published on 24 Oct 2020

Published on 23 Oct 2020

Published on 2 Aug 2020

Published on 1 Apr 2020

Published on 6 Feb 2020