lesterchan.net 4.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 and Tailwind UI components for the design of the site. Using PurgeCSS to keep the CSS file size small.

Tailwind UI uses Alpine.js, 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, UsersOnline, Search, and Archive pages in React.

The charts on Analytics page is done using Chart.js. Date manipulation by date-fns. moment.js is too bloated. Lodash for general purpose JavaScript utility.

The build is done using Webpack (previously was using Gulp). Each of the pages above is an entry point by itself. I have another entry point called “script” for the general JavaScript used throughout the site.

Linting is by ESlint with Prettier as code formatter.

Search is now done natively in Algolia. 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 to be released.

And last but not least, Dark Mode support via Tailwind CSS 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
lesterchan.net v5.0 – Light Mode
lesterchan.net v5.0 - Dark Mode
lesterchan.net v5.0 – Dark Mode