var vs let vs const
var declares a variable that is scoped to either the global or function scope, whichever is closest. Variables declared with var can be re-assigned with new values. Declaring multiple variables with the same name is legal. var variables are hoisted at the top of its scope, which means you can reference the variable before it's declared.
let declares a variable that is scoped to the closest block or function. You can optionally initialize them with a value. You cannot re-declare a let variable with the same name. You can re-assign values.
const basically follows the same rules as let, but you must initialize with a value, and you cannot re-assign a value.
Generating a sitemap
A sitemap is a page on your site (usually served at /sitemap.xml) that tells search engines which pages are worth looking at on your site. In theory, such guidance should help with search engine optimization (SEO).
So for fun, I built a sitemap generator! At a high-level, it's a breadth first search on the anchor tags reachable on a page, starting with the page you deem as the "root" as the input. Since anchor tags can either be relative or absolute, the generator must take this into account when forming links to put in the sitemap. For example, an href="/food" should yield a <url>https://doversoul.org/food</url> entry. Another thing it considers is whether or not an anchor ponits to something within the site or external.
While the tool is fairly simple, it should be effective for Doversoul for a while. An improvement down the line could be to automatically update the sitemap as new navigation or content get added, but we can cross that bridge if/when we get there.
File resizing with FFMPEG
The journey to serving less bytes continues. Since my last post, I've added a few more images on my food page and was serving ~6.7MB. One thing I knew was suboptimal was the fact that all of them were bigger than they needed to be given the CSS styles applied (i.e, a small-ish constant width).
Once again we can use FFMPEG...this time to help with resizing!
ffmpeg -i FILE.webp -vf scale=1024:-1 FILE.webp
The '-vf scale' applies a applies a scale filter to effectively a single video frame), where the horizontal length is 1024px and vertical length is sized automatically (indicated by a negative number) to keep the original aspect ratio.
Choosing 1024px was more trial-and-error than anything. I chose a file at random and tested first with 128px- and 512px- scaled outputs, but both ended up losing too much detail. 1024px just so happened to work out pretty well, so the rest of the images on the site got the same treatment..
Resizing resulted in the food page serving ~1.6MB, which is about a 4x reduction. I'll take it! Shoutout to FFMPEG for making powerful media manipulation tools for developers.
WebP conversions with FFMPEG
Performance is not my biggest concern for Doversoul at the moment. However, serving 25MB+ of food pictures (all JPEGs) was not cool. Third-party image optimization services exist, but that seemed like overkill. There had to be some low hanging optimization fruit to pick - either through compression or conversion or resizing. Sure enough, I learned about WebP files, which are generally more economic to consume than JPEGs and PNGs.
Converting to WebP was super simple using FFMPEG:
ffmpeg -i FILE.jpeg FILE.webp
Here's some Bash to convert multiple images at a time:
for name in *.jpg; do ffmpeg -i "$name" "${name%.*}.webp"; done
With WebP, the total image payload size of the food page reduced by more than 5x!
doversoul.org
This is a static site that's powered by Nginx, hosted on basic Vultr compute. I want to learn how things work, which this setup allows me to do. Want to serve a file? Configure the rules yourself. Read Nginx docs. Google stuff. How do I serve a font of my choosing? Find an open-source repo of typographies. Browse options until one speaks to me. Learn the CSS syntax to make it work. How to make the server perform well enough? Implement strategies to cache files that shouldn't change much. Run Lighthouse reports on your pages, and decide what feedback is worth taking further action.
How do you approach the Static Site Problem™️ ?