The term “hat trick” has an interesting etiology. It comes from British cricket. A bowler, having retired three batsmen in a row, would be rewarded with a hat, compliments of the batting team.

Generalizing to other sports, “hat trick” refers to an individual player scoring three times in a game. And going beyond sports, we could use the term to refer to any exceptional performance involving three similar events or components.

We write “HAT” in capital letters because it is an acronym for “Hugo,” “APIs,” and “Tailwind.” The “HAT trick” is a software stack for building scalable, high-performance websites. This is the software stack behind the online edition of Data Science Quarterly.

Hugo is a fast static site generator written in Go. It works from layout and content files to generate website files accessed through a content delivery network (CDN). Hugo does not require connection with a database or back-end server. Hugo is a scalable, high-performance site generator, able to serve websites consisting of hundreds of thousands of pages.

Hugo static sites are much easier to build than dynamic, database-dependent sites. To generate content for a Hugo site, authors can use a text editor writing in Markdown, a markup language that is easy to learn. Numerous themes or website templates are available to get started with Hugo. Jain (2022) is an excellent source for learning Hugo. Extensive resources are available at Awesome Hugo.

APIs are the A in JAMstack, which refers to “JavaScript,” “application programming interfaces,” and “markup.” APIs extend the static-site-generator world of Hugo, adding interactivity and access to external resources.

Tailwind is a library for constructing cascading style sheets (CSSs). Developers can draw on open-source examples of website navigation bars, buttons, and other styling components. Tailwind coding is accomplished within HTML web pages. Tailwind represents a flexible CSS alternative to Bootstrap, Material Design, and Bulma. Numerous user interface and design components are listed at Tailwind Awesome.

Hugo, supported by developers from The New Dynamic, is the foundation for the award-winning news site RETROREPORT. A convenient starting point for the HAT trick is the Congo theme for Hugo, which utilizes Tailwind.

Most news organizations and journals have limited resources. They need to focus on investigative journalism and writing. They benefit by having online sites that are easy to develop and maintain. The HAT trick is well-suited to online news organizations and journals.

There are other approaches to building online news sites and journals. When frequent user-driven interactions with a database are required, dynamic frameworks shine. The top four dynamic frameworks, as shown in recent JavaScript surveys, are React, Angular, Vue, and Svelte.

The Data Science Quarterly political research site, relies on Vue. The New York Times, a showcase for interactive visualizations, leverages the power of Svelte and D3, and documents technological advances relevant to journalists at NYT Open.

Developments in website software suggest a hybrid static/dynamic approach going forward. Note the growth of Next.js as a complement to React and SvelteKit as a complement to Svelte. We prepare as much content as possible up-front and pull in new data only as needed. The New Dynamic provides open-source software for Hugo and JAMstack.

Recent developments in the Hugo ecosystem were discussed at HugoConf 2023.

Reference #

Jain, Atishay. 2022. Hugo in Action: Static Sites and Dynamic Jamstack Apps. Shelter Island, NY: Manning. [9781617297007]

Return to Reviews