Project NibbleSprouts

Joash Gobin

Jul 4, 2024

3-minute read

Table of Contents

This website theme is meant to be used to create a scalable and reliable educational content website. Fast web pages help students find what they need without much execution overhead. Special thanks to Luke Smith, Eric Murphy and Primeagen for the inspiration.

This website theme is:

fast
eco-friendly
reliable
agile
Lean
user-centric
the other corporate buzzwords

Below are some of the features supported by this theme.

System font stack

Why wait for fonts to download when you can use the ones that are already there? The coolest system font stacks can be found at Modern Font Stacks.

Youtube videos

You can easily embed Youtube videos. Join us in the war against web bloat:

Code blocks

Coding is essential to the modern STEM student and those who neglect such an important skill are bound to be less capable in the digital age. Syntax highlighting is supported via Prism JS:

#include <stdio.h>

int main(){
    printf("Hello world");
    return 0;
}
hello.c

Typesetting

Mathematics and the problem solving skills it develops in students are irreplaceable in an age where our devices become smarter and we become less smart. Mathematical typesetting is powered by Khan Academy’s $\KaTeX$ library: $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

where $b^2-4ac$ is referred to as the discriminant.

Multiple choice questions

We can easily add MCQ’s to encourage active participation in a lesson and give students instant feedback:

Challenge

1) Water is polar.

True
False

2) Ice is a liquid.

False
True

Bootstrap SVG image headings

We forked the Bootstrap Icons repo and created headings from them. These headings are for creating more visual interest and saving the need for having large placeholder images that serve no purpose in the story being told on the web page.

Responsive images

Hugo can be configured to generate WEBP images of various dimensions to be displayed on the web page and so we configured it to do that. Here is a sample:

View

Staring at all the web bloat

Hand-rolled CSS

The only correct way to do CSS is by making selectors for the website at hand. Taking the generalist route of catering for every possible website has led to the creation of bloated CSS libraries and frameworks.

Tables

For easy addition of tables that scroll horizontally, we have a shortcode:

**Table 1** *This is the table title*
Column 1	Column 2
Value 1	Value 2
Value 3	Value 4

Server-side compression

We use brotli and gzip compression with nginx. In the server block of the nginx site configuration file for the website, we have:

gzip on;
gzip_min_length 1100;
gzip_buffers 4 32k;
gzip_types text/plain application/x-javascript text/xml text/css;
gzip_vary on;


brotli on;
brotli_static on;
brotli_comp_level 11;
brotli_types *;

The resulting files sent over by the server can have less than half of the original file sizes. This is particularly useful for students who have poor internet connection as less data being transferred means faster load times and better user experience.

Conclusion

We have the tools to make better websites. For far too long the education industry has been plagued by slow software and soydevery. Continue the good fight.

Support us via BuyMeACoffee