Tuesday Tips | How to Determine Where to Put Logic for Jamstack Websites

Today is August 25, 2020, and for this Tuesday Tips episode we're covering How to Determine Where to Put Logic for Jamstack Websites

Let's dive in!

----

A very common blog logic is displaying posts or events on your website based on the date. We may want to not show a post if it is in the future or change how a past event is displayed. When looking at a Jamstack website this can be confusing as there are several places in the build lifecycle that this logic can occur. And each occurrence comes with its own limitations.

----

The first option is to hardcode the elements by physically adding or modifying them in the HTML files. This is the most reliable as it happens before the website is built. However, this is also less than optimal: who wants to change their website manually every time a post needs to be published or an event passes?

----

The second option is to write structured data and do the logic at build time. Using a headless CMS or other ways to store data files, such as Markdown, we can utilize a static site generator to build our website. The generator would then use logic during the build process to display what we want. So, we could use conditional logic to say if the post is in the future do not display it or if the event has passed use the grayed out styles.

The issue with this process is that once the website is built it will not change until the next build. So, if we build the website today and have an event tomorrow, our website on the following day would still have it as an upcoming event. We could solve this issue by automating our build process every day or even every hour.

----

A less readily available option would be to do the logic with edge workers that would execute on a CDN request. The render function for our website would then update the website files every time a user requests it. This feature is still in the works but the ideal end goal is that it would perform nearly as well as a static site but allow for updates on each request.

----

The last option is to pass data to the front end and then execute the logic. For example, we might use an HTML data attribute for our event or post. Then, using this attribute, we could conditionally style the event using front-end JavaScript. This would not require a new build but could seem a bit clunky on the code side. However, if the performance is not affected and your user experience is working well then this might not be an issue.

In the end, it all comes down to the data you are trying to display, when it needs to be updated and how much manual work you are willing to put in each time.

----

Today’s Tuesday Tips was adapted from a post on CSS-Tricks.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

--- This episode is sponsored by · Anchor: The easiest way to make a podcast. https://anchor.fm/app

Episode source