← Back

Project Description

Refactor the codes for InkyFingerz, using modern tools, especially template engine and static site generator.

Project Objective

In the end, the project will have:

  1. Much less reptition in terms of developer experience. For example, the developer won’t have to copy and paste Header and Footer for each of the three pages.
  2. The output should be roughly the same as current version. For example, there will be separte files for each page (static!).

Technology

I’ll use 11ty for the static site generator, and use liquidjs for template engine. 11ty is compatible with a dozen template engines including Nunjucks, liquidjs, Mustache, ejs, pug and more. I’ve used ejs and pug before, like, I’ve had a go at them. So it won’t make much difference even if I learnt a new one. On the website, 11ty shows supported features for each engine, and liquidjs and nunjucks had the most supported features. I won’t need most of them, but still! I chose liquidjs because it is actively being maintained, whereas nunjucks had its lastest release 2 years ago.

Plans

v1.0.1 Done

This update is only about CSS and HTML. Do not touch anything about Javascript (animation).

HTML

  • Now “shared components” of each page, like Header and Footer and more, form the base template of the website.
  • Then, each page’s “content” is injected via liquidjs.

CSS

  • Using global variables now for some colors and font names.
  • I thought I’d use SASS and all, but I don’t think it is necessary. All the problems that SASS solves were already solved by me using pure CSS. So no need to go back, unless my purpose is to practice SASS.

v1.0.2

Refactor Javascripts. (But tbh I don’t think I’ll do it. No gain in it).

Summary

The biggest change made was use of template and injecting contents to it. It was fun using eleventy and it is a good framework. And it was a great fun to play around on Inky Fingerz website, reminded me of good old days! I’ll soon deploy it so you can have a look too.

Update

Okay so it is deployed on https://jsheiban.club/Inky_Fingers/ or click here. But keep in mind that the website has a few large files (not ideal), so it may take a long time to load. Will fix that later!