Project NibbleSprouts

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:

Loading video

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 highlight.js:

#include <stdio.h>

int main(){
    printf("Hello world\n");
    return 0;
}

hello.c

Copy

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:

What do you think?

1) Water is polar.

False
True

2) Ice is a liquid.

True
False

This is feedback on the question

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

RSS feeds

Students can easily subscribe to any subject or sub-section in the “Learn” section of this website. RSS is a great way for them to keep an eye on the subject, course or topic they are studying without having to visit the website and navigate through all of the content. Here are some examples:

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 *;

Copy

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