Tagged “netlify”

A beautiful, responsive, print-friendly résumé template from Max.

Some points of note:

• Accessible (WCAG AA)
• uses the h-resume Microformat
• uses a Spellcheck Linter
• Search Engine Optimized (meta, JSON-LD, etc...)
• Built with Eleventy
• Netlify-ready (although hosting choice is up to you)
• Critical CSS Inlined
• Print Styles

In cases of emergency, many organizations need a quick way to publish critical information. But existing (CMS) websites are often unable to handle sudden spikes in traffic.

Fantastic effort by Max Böck here, stepping up during the COVID-19 pandemic to provide this Eleventy template for organisations to use to publish critical information as lean, resilient, static HTML pages.

A pain point of the IndieWeb is that it's sometimes not as convenient to share content as it is on the common social media platforms… That’s why I wanted to improve this process for my site.

This was a fantastic walkthrough by Max. And based on this, I’ve just finished implementing an easy-bookmarking feature on my own website.

I already use this site to save Bookmarks so I’m hooking into that. For the bookmark-saving form, I’ve used Stimulus rather than Preact. But otherwise this is very much based on Max’s superb tutorial.

Here’s my bookmarklet code so that future-me can create a new browser bookmark, edit it and paste this in.

javascript:(function(){var title = document.getElementsByTagName('title')[0].innerHTML;title = encodeURIComponent(title);var selection = '';if (window.getSelection) {selection = window.getSelection().toString();} else if (document.selection && document.selection.type != 'Control') {selection = document.selection.createRange().text;}selection = encodeURIComponent(selection);new_window=window.open('https://fuzzylogic.me/bookmarker/?title='+title+'&body='+selection+'&url='+encodeURIComponent(document.location.href),'Sharer','resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=680,height=700,location=0');})();

Incidentally, this process also provided a great way to dip my toes into the world of Netlify Functions and their supporting tools, netlify-dev and netlify-lambda.

There’s more to be done but I wanted the first bookmark created with my shiny new system to be a link to Max’s original tutorial – and this post is it.

Many thanks, Max!

“I’ll just make a few small tweaks to my website…” said I. Cut to three sleep-deprived days later and I’ve rebuilt it, SSG/JAMstack-stylee with Eleventy and Netlify and entirely re-coded the front-end. Silly, but so far so good, and it’s greasy fast!

So yes, I’ve just updated my website from being a dynamic, LAMP-stack affair which used Perch CMS and was hosted on Linode to being statically-generated using Eleventy and hosted on Netlify.

It mostly went smoothly. And the environmental and continuous deployment boilerplate that Netlify provide are fantastic, and will be a real time-saver over my current “set up and maintain a Linode server” approach.

In terms of challenges and troubleshooting, I did have to find a solution to the issue of FOUT on repeat visits. It seems this was happening as a result of Netlify’s interesting approach to asset caching which works well for most requirements but wasn’t so great for self-hosted webfonts. My solution was to add specific headers for .woff and .woff2 files in my application’s Netlify config file.