Published by Joost Baaij on 2 October 2020
Today saw the launch of a new Space Baby: Straal Atelier Valmeer. An online brochure and sales tool for a sandblasting company. I used the Jamstack for it.
Find it at www.straalatelier.com
It’s a great example of a Jamstack website. But what is Jamstack? It consists of the most ubiquitous languages on the web: HTML, CSS, and JavaScript. That helps ensure that the website will work everywhere. There are no special requirements to host it. Jamstack focuses on speed, security, and rapid deployments.
text continues after image
As usual I used Hugo to create this website. I decided to put in a little extra effort and create custom shortcodes for sections that require it. It’s not hard at all! Should have done that way more. I also incorporated stuff I recently learned, and did an extensive round of Search Engine Optimization (SEO).
My customer is acrive on Instagram. But I didn’t want to use the official toolkit, being overkill and containing trackers. So I copied the nine most recent photos in a grid, similar to the Instagram layout.
It was also a perfect chance to use the CSS grid
specification.
We need a custom shortcode and a small database.
<section class="grid">
{{ range $.Site.Data.grids.instagram }}
<figure>
<a rel="nofollow" href="{{ .URL }}">
<img loading="lazy" src="{{ .image }}" alt="{{ .alt }} ">
</a>
<figcaption>{{ .caption | safeHTML }}</figcaption>
</figure>
{{ end }}
</section>
- image: /images/instagram/117308071_317385412740144_5385496135660911575_n.jpg
alt: Sodastralen
caption: '<a rel="nofollow" href="https://www.instagram.com/explore/tags/sodastralen/">#sodastralen</a>'
URL: https://www.instagram.com/p/CD2J6vqn5Pr/
- image: /images/instagram/117440032_2999361750176124_5278278729190427663_n.jpg
alt: "Voor/na"
caption: '<a rel="nofollow" href="https://www.instagram.com/explore/tags/voorna/">#voorna</a>'
URL: https://www.instagram.com/p/CD3McWqHJYG/
Some text. This is a Markdown template.
{{< grids/instagram >}}
More text.
I should maybe add the database content to a parameter or something.
There’s a new image format in town: webp. It’s better than the old formats, because the files are quite a bit smaller. Smaller is good!
I decided to copy each static website image to webp and use standard HTML to offer both versions to the browser. Modern browsers understands the format and use it. Otherwise the old format is still there as fallback. Also, I took the oppurtinuty to wrap all images in a figure
, for semantic captions.
In HTML, it looks ilke this:
<figure>
<picture>
<source type="image/webp" srcset="/path/to/image.webp">
<source type="image/jpeg" srcset="/path/to/image.jpg">
<img src="/path/to/image.jpg" alt="Image">
</picture>
<figcaption>A great image</figcaption>
</figure>
Which as a Hugo custom shortcode looks like this:
<figure>
<picture>
{{ with .Get "webp" }}<source type="image/webp" srcset="{{ . }}">{{ end }}
{{ with .Get "jpg" }}<source type="image/jpg" srcset="{{ . }}">{{ end }}
{{ with .Get "png" }}<source type="image/png" srcset="{{ . }}">{{ end }}
{{ if .Get "jpg" }}<img src="{{ .Get "jpg" }}" alt='{{ .Get "caption" }}'>{{ end }}
{{ if .Get "png" }}<img src="{{ .Get "png" }}" alt='{{ .Get "caption" }}'>{{ end }}
</picture>
{{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>
Some text. This is a Markdown template.
{{< figure webp="/path/to/image.webp" jpg="/path/to/image.jpg" caption="A great image" >}}
More text.
I found that these headers give me what I want in a website:
Cache-Control: public; max-age=60
Referrer-Policy: no-referrer-when-downgrade
Strict-Transport-Security = "max-age=31536000; includeSubdomains; preload"
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
The HTML for these isn’t asthetically pleasing, but every website needs sharing icons. I always rely on the free favicon generator.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#bebcaf">
Done.
My workflow to get it all live hasn’t changed much recently. The key to success is using Netlify. Every change I make is deployed instantly, even stuff I’m only trying out.
The usual PageSpeed and https best practices are included by default as well:
bundle CSS and JavaScript
minify HTML, CSS and JavaScript
HTTPS only with HSTS headers
gzip compressed responses
all the cache headers: ETag
, Cache-Control
HTTP/2 with preload
plus some easter eggs
██████████████████████████████████████████████
███▄─▄█─▄▄─█─▄─▄─█─▄▄─█─▄▄▄─█─▄▄─█▄─▄▄▀█▄─▄▄─█
█─▄█─██─██─███─███─██─█─███▀█─██─██─▄─▄██─▄▄▄█
▀▄▄▄▀▀▀▄▄▄▄▀▀▄▄▄▀▀▄▄▄▄▀▄▄▄▄▄▀▄▄▄▄▀▄▄▀▄▄▀▄▄▄▀▀▀