JavaScript

Privacy-preserving embedding of Tweets

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.

Dynamic table of contents with Intersection Observer

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.

Extending Spotify's web volume slider

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:

CO2 in your meeting room / office

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

Redirecting from Blogger with JavaScript

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?

JS SEO

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 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.

JS SEO in 2016

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.

Totally simple syntax highlighting in Blogger

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.

Seeing nofollow links in Google Chrome

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!

Adding user-friendly rel=nofollow markup (for IE too!)

The next step after adding CSS to highlight links with rel=nofollow is to give the user some information about what the symbol and the dashed line mean. Since CSS will not allow you to add tooltips and links, we have to resort to some javascript trickery. The up-side to this is that it will also display the markup on older browsers like IE 6. Adding this kind of markup to your site is pretty easy to do.