In light of my ever growing list of self-hosted services, where LDAP isn’t applicable to all of them, there is a need for an all-in-one dashboard-like page. This also serves as the homepage of my API instance。
To make it a little bit more interesting, I decided it should have Chart.js to display corresponding statistics of that service. Also instead of traditional html + css, I decided to learn something new.
What I’ve Learned
Sassy CSS (SCSS) is a CSS preprocessor designed to improve CSS coding experience. Before then I was mixing SCSS with SASS (Syntactically Awesome Style Sheets), and it turns out they are not identical.
Nesting and Variable
CSS is behaving CSSly
SASS is the most concise one
SCSS is SASS with CSS syntax, which is also the reason why I chose it (who doesn’t like closing semicolons!).
Inheritance, Function and Mixin
There are also many other features introduced in the official guide that I don’t use currently. In short, SCSS drastically improves the reusability and that’s absolutely crucial.
Jade is a html template engine, which allows you to produce html without opening/closing all the annoying tags. Indentation is crucial in Jade.
After learning Jade, it looks like I could’ve got used to SASS too.
Build Automation using Gulp
Another objective of building this page, is to explore more npm packages, in this case, it was the amazing gulp.
Using gulp I achieved:
SCSS was compiled into browser-readable CSS(gulp-sass).
Js files were translated into browser-readable versions(via gulp-babel) with all dependencies(via gulp-browserify) and combined into a single js file(via gulp-concat).
Both CSS and JS are all minified to improve loading speed, but gulp-sourcemaps still allows them to be reverted back during console debugging.
Reduced amount of configurations needed (previously I was using babel, uglify and browserify separately).
On 18 May I migrated to Gulp 4 which required some modifications to the config file.
A dashboard was built, with charts to display the number of feeds/events generated in the past 7 days by my TTRSS and huginn services (more services to come).
On 31 July, a new graph which displays wangqiru/ttrss docker image’s pull counts is added. This utilises node-cron, axios and sequelize.
SCSS was learned with practice, a style is only stylish when it’s reusable.
Experience in using Gulp was gained, which will save me some time in future building.
More node.js practices were done while developing the backend. Also bugs in existing code were discovered and fixed along the way. Improvements were also implemented due to richer node.js experience.
The end product looks easy to produce but the journey is what makes the destination beautiful.