---
title: lesterchan.net v5.0
date: 2020-04-20 09:00:43
permalink: https://lesterchan.net/blog/2020/04/20/lesterchan-net-v5-0/
author: Lester Chan
categories:
  - Site
tags:
  - "5.0"
  - lesterchan.net
  - WordPress
---

[lesterchan.net 4.0](https://lesterchan.net/blog/2013/01/02/lesterchan-net-v4-0/) was launched more than 7 years ago.

Since the COVID-19 pandemic started, I have been staying at home most of the time, and it began to get boring. Work, watch television, play computer games, play console games, and the cycle repeats.

So I decided to revamp my website and took this chance to remove pages and WordPress plugins that are no longer relevant to this blog.

I am using [Tailwind CSS](https://tailwindcss.com/) and [Tailwind UI](https://tailwindui.com/) components for the design of the site. Using [PurgeCSS](https://github.com/FullHuman/purgecss) to keep the CSS file size small.

Tailwind UI uses [Alpine.js](https://github.com/alpinejs/alpine), but I rewrote the two components (Dark Mode Toggle & Responsive Navigation) that uses it to plain JavaScript.

Finally, I have removed jQuery.

I rewrote [Analytics](https://lesterchan.net/site/analytics/), [UsersOnline](https://lesterchan.net/site/users-online/), [Search](https://lesterchan.net/site/search/), and [Archive](https://lesterchan.net/blog/archive/) pages in React.

The charts on Analytics page is done using [Chart.js](https://www.chartjs.org/). Date manipulation by [date-fns](https://date-fns.org/). moment.js is too bloated. [Lodash](https://lodash.com/) for general purpose JavaScript utility.

The build is done using [Webpack](https://webpack.js.org/) (previously was using Gulp). Each of the pages above is an [entry point](https://webpack.js.org/concepts/entry-points/) by itself. I have another entry point called “script” for the general JavaScript used throughout the site.

Linting is by [ESlint](https://eslint.org/) with [Prettier](https://prettier.io/) as code formatter.

Search is now done natively in [Algolia](https://www.algolia.com/). Previously, it was proxied through WordPress before hitting Algolia. I find that a bit pointless, and it loses out of the benefits that Algolia can bring to the table.

Coded a simple gallery lightbox while waiting for [Fancybox v4](http://fancyapps.com/next/) to be released.

And last but not least, Dark Mode support via [Tailwind CSS Dark Mode](https://github.com/ChanceArthur/tailwindcss-dark-mode). You can toggle it on the right sidebar, and it will remember your preference in local storage.

**Summary**

- Tailwind CSS and Tailwind UI
- PurgeCSS
- Removed jQuery
- Rewrote in React: Analytics, UsersOnline, Search, and Archive
- Chart.js, date-fns, Lodash
- Webpack
- ESlint, Prettier
- Algolia Search: Instant Search and Autocomplete
- Coded a simple gallery lightbox
- Dark Mode via Tailwind CSS Dark Mode
- Removed Pages: 
    - /about/favourites/
    - /portfolio/animations/
    - /portfolio/graphics/
    - /portfolio/programming/java/
    - /portfolio/programming/visual-basic/
    - /site/changelog/
    - /site/contact-me/
    - /site/links/
    - /site/plugins-used/
    - /site/polls-archive/
    - /site/search/results/
- Removed WordPress Plugins: 
    - WP-DownloadManager
    - WP-Email
    - WP-PluginsUsed
    - WP-Polls
    - WP-Print

[![lesterchan.net v5.0 - Light Mode](https://live.staticflickr.com/65535/49792688621_5f76f26ca7_c.jpg "lesterchan.net v5.0 - Light Mode")](https://live.staticflickr.com/65535/49792688621_29d77b0be9_o.png "lesterchan.net v5.0 - Light Mode")

[![lesterchan.net v5.0 - Dark Mode](https://live.staticflickr.com/65535/49792992797_f526ba7127_c.jpg "lesterchan.net v5.0 - Dark Mode")](https://live.staticflickr.com/65535/49792992797_8a189dc6a3_o.png "lesterchan.net v5.0 - Dark Mode")