Snowbeat

At Nation we took pride in our websites being efficient and fast loading, but large third party libraries have to cover a wide range of use cases, which invariably lead to bloat and code being loaded that would never be used.

My solution was to create a central library of code for our most common use cases, which did what we needed and little more. This library was a little more hands on, in that you created the HTML and CSS that the library classes hooked into. This approach resulted in minimal code being loaded, and time to first paint being very low.

The library contained a number of different classes, such as accordions, custom dropdowns, infinite scroll functionality, slideshows, and video players. Each was simple to set up and use, and documentaiton was provided with examples to ensure everyone could onboard as quickly as possible.

An animation library was also included, which had two modes - one to prioritise CSS transitions and use JavaScript animations as a fallback for properties that required it, and another that simply used JavaScript for everything. Both modes were visually identical, but while CSS was optimal for performance, sometimes JavaScript mode was required depending on what was being animated, for example WebGL animations, and in which environment it was being run in.