In the last dev online meeting (Jun 25), we decided to give my proposal in #989 a go.
The goal of the in #989 described vanilla frontend transformation process (VFTP) is to remove third-party ballast like Bulma CSS and FontAwesome and instead use what the web platform has to over natively. Following, a list of our main goals:
The layout must be customizable by the user via a custom CSS file
The frontend design shall be more functional, useful, and less obtrusive
As requested in this meeting, I will outline a short action plan with checkboxes in the following section. Each checkbox will represent a PR. This issue will accompany the VFTP and, therefore, contain more and more checkbox-type entries over time. This more checkboxes over time approach aims to start fast and become more specific over time. Therefore, the following section is constantly WIP until the VFTP is finished:
[ ] Replace all FontAwesome icons with their native SVG counterpart (with zero percent JS)
[ ] Write dev docs on how to implement SVG icons easily
[ ] Add a non-functional test that secures frontend data size
[ ] Upfront, adjust frontend styling issues that have nothing to do with Bulma (Bulma stays, for now)
[ ] Switch to Bulma min version (same feature set > 650 KB less CSS data to transfer) See "Milestone 1" below.
[ ] Use best design practices for improving given frontend layout [1], [2], [3], keeping Bulma (for now) and using Bulma's CSS variables to shape the UI into something with a cleaner, more minimal, and appropriate for our use case
[ ] Introduce color blind friendly color scheme [1], [2], [3], [4]
[ ] security: use JS module to isolate JS from third-party JS and don't expose JS to global namespace.
[ ] further sub-tasks, TBD
[ ] Add a non-functional test that secures frontend data size
[ ] Step-by-step, remove Bulma and switch to a "classless" approach. Use semantic HTML tags or recommended W3C HTML patterns
[ ] many sub-tasks, TBD
Milestone 1 (branch: 4lm/vftp-m01):
[ ] Switch to Bulma min version (same feature set > 650 KB less CSS data to transfer) Will not do this! Was a false positive. The normal Bulma CSS version is gzipped 71 KB, and the minified version is gzipped 68 KB. I don't want to make the extra effort to implement a CSS mini-map for the minified Bulma CSS version only to save 3 KB if we get rid of Bulma in the end anyway.
[ ] Replace all FontAwesome icons with their native SVG counterpart (with zero percent JS)
[ ] Write dev docs on how to implement SVG icons easily
[ ] security: use JS module to isolate JS from third-party JS and don't expose JS to global namespace.
[ ] Add a non-functional test that secures frontend data size
Milestone n ...
Please feel free to comment, criticize, praise, or add suggestions. Concrete development work is also very much welcome if someone wants to work with me on this.
In the last dev online meeting (Jun 25), we decided to give my proposal in #989 a go.
The goal of the in #989 described vanilla frontend transformation process (VFTP) is to remove third-party ballast like Bulma CSS and FontAwesome and instead use what the web platform has to over natively. Following, a list of our main goals:
As requested in this meeting, I will outline a short action plan with checkboxes in the following section. Each checkbox will represent a PR. This issue will accompany the VFTP and, therefore, contain more and more checkbox-type entries over time. This more checkboxes over time approach aims to start fast and become more specific over time. Therefore, the following section is constantly WIP until the VFTP is finished:
[ ] Switch to Bulma min version (same feature set > 650 KB less CSS data to transfer)See "Milestone 1" below.Milestone 1 (branch:
4lm/vftp-m01):[ ] Switch to Bulma min version (same feature set > 650 KB less CSS data to transfer)Will not do this! Was a false positive. The normal Bulma CSS version is gzipped 71 KB, and the minified version is gzipped 68 KB. I don't want to make the extra effort to implement a CSS mini-map for the minified Bulma CSS version only to save 3 KB if we get rid of Bulma in the end anyway.Milestone n ...
Please feel free to comment, criticize, praise, or add suggestions. Concrete development work is also very much welcome if someone wants to work with me on this.