Now that Mastodon is more of a thing, I thought I’d set up a static embed of Mastadon posts within Hugo, similar to what I did for Twitter posts. With the static embedding, I wanted to remove all requirements for JavaScript, and remove all third-party requests on behalf of the users here. In short, this speeds things up, and saves you from worrying about cookies & tracking, or needing to make exceptions to the site’s CSP.

Embedding tweets with the usual setup is a bit annoying. You end up using Twitter’s JavaScript, which takes a while to render the content. You probably have to do the GDPR dance for your users too (I honestly don’t know the details), since it’s possible they include cookies / trackers, etc. I made a “simpler” version which uses a preprocessor and Hugo Shortcodes to embed tweets as images. It’s easy to use while writing, the preprocessor generates images using Chrome / Puppeteer as needed.

My Hugo theme had a jQuery-powered dynamic table of contents. I thought it didn’t make much sense to keep the jQuery library (even a small version) if I’m just using it for that. So, out it went, and in went a JavaScript version with Intersection Observer. This is based on Ben Frain’s version, simplified a bit since we get the table of contents statically embedded. Code The full code (in layouts/partials/article.

Having to choose between “too loud” and “too quiet” sucks. Unfortunately the Spotify web UI has an annoyingly short volume slider. Fortunately that’s easy to fix with a bookmarklet. Before: After: Drag this bookmarklet to your browser bookmark bar, and click on it to expand the volume slider. The code is pretty straightforward, it just changes the CSS slightly. Spotify volume Here’s the code in more understandable JavaScript: function() { var a = document.

Want to know what level of CO2 you have in your meeting room or office-space? Want to know when you need to start ventilating air to stay productive? Here’s a simple calculator that works out how much CO2 people produce (when they’re not overly active), and what level of CO2 that produces in a closed space. Simple calculator Room size [in meters]: (wide) x (long) x (high) Number of people: recalculate

While it’s possible to redirect a whole site from Blogger to the exact same URLs, redirecting to similar URLs is hard. Let’s say you want to redirect: from: https://yoursite.blogspot.com/2012/01/blogpost-name.html to: https://newsite.com/blogpost-name The way to do this is to drop a snippet of JavaScript into your Blogger site’s template. Adding a redirect like this also makes it impossible for you to view your blog, so be careful :-). Also, adding a redirect like this means you won’t be able to edit your site’s theme using the simple tools (you’ll need to edit the HTML) - usually that’s no big deal since you want the old site to disappear, right?

How to make JavaScript-based sites work well with search is something I’ve been getting asked about a bit, so in the spirit of having open discussions, I set up a public working-group to discuss how things are working out :) Feel free to join and/or send folks there! https://groups.google.com/forum/#!forum/js-sites-wg (archive.org) My goal is to figure out how things are working out for sites at the moment, what tricks they’re doing to “fix” search, and what we need to change or document on our side.

An update (March 2016) on the current state & recommendations for JavaScript sites / Progressive Web Apps [1] in Google Search. We occasionally see questions about what JS-based sites can do and still be visible in search, so here’s a brief summary for today’s state: # Don’t cloak to Googlebot. Use “feature detection” & “progressive enhancement” [2] techniques to make your content available to all users. Avoid redirecting to an “unsupported browser” page.

Sometime you don’t need to host code, you just want to post it in a blog post. Google Code Prettify (archive.org) does this really well, either per post, or across the blog. 1. Copy the script tag. Here’s what you need to copy into either your template, or into your post: <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" ></script> 2. HTML-encode your code There are a bunch of HTML encoders (archive.org) online, I haven’t found one that I’m really a fan of.

Here’s a simple trick to view nofollow links in Google Chrome. Just drag and drop the following link to your bookmark bar and hit it whenever you want to see links with the rel=nofollow HTML microformat: Nofollow? This bookmarklet inserts a tiny bit of CSS into the top of the page you’re currently viewing. The CSS is similar to that which is used in other nofollow highlighting methods (archive.org): a[rel~=nofollow] { border:1px dashed #852!