How Googlebot sees your JavaScript

August 1, 2024 By Mark Otto Off

🏖️ Hi! Just a quick note to say that we’re taking next week off for a brief summer break. We’ll be back with our next issue on August 15.
__
Peter Cooper, your editor

How Google Handles JavaScript In Its Indexing Process — Once, if you wanted Google to index your content, it needed to be right in the HTML and not dynamically rendered with JavaScript. Things have changed, but how much? MERJ and Vercel analyzed over 100,000 Googlebot fetches in an attempt to empirically demystify Google’s approach.

Zecchini, Moore, Siddle, Ubl (Vercel)

Garbage Collection and Closures — When three JavaScript experts get together and all learn something new about how JavaScript works when they encounter a memory leak, it pays to listen. An interesting quirk to be aware of.

Jake Archibald

Tracing: Frontend Issues with Backend Solutions — As Developers, we often hear complaints like, “This page is taking too long to load. It’s a front-end issue. Fix it.” But what if the problem isn’t on the front end? How do you trace issues through your stack? Watch the step by step guide.

Sentry

📒 Articles & Tutorials

Benchmarking AWS Lambda Cold Starts Across JS Runtimes — It’s from the Deno team so it may not be surprising that Deno was fastest, but they share their methodology and results for Deno, Node, Bun and AWS’s managed Node runtime and they weren’t all that far apart.

Zinkovsky and Jiang (Deno)

🛠 Code & Tools

☎︎ International Telephone Input — A very mature option that offers all the trimmings you’d expect: accessibility, type definitions, flags, automatic country selection, automatic formatting, and more. GitHub repo.

Jack O’Connor

JS-PyTorch: A PyTorch-Like Library for JavaScript — Recently renamed from JS-Torch, this brings some of the magic from Python’s popular PyTorch library to JavaScript for training and testing neural networks in particular. We linked to it earlier this year, but it has added GPU support thanks to GPU.js.

Eduardo Leao

  • React Virtuoso 4.8 – Complete React virtualized rendering list/table/grid family of components. Now with horizontal list support.

  • 🎨 Chroma.js 2.6 – Simple color manpiulation library, now with tint and shade functions.

  • Ky 1.5 – Simple HTTP client based upon Fetch for browsers, Node & Deno.

  • YouTube.js 10.2 – Unofficial client for YouTube’s internal API.

  • tween.js 25.0 – JavaScript/TypeScript animation engine.

  • ArangoJS 9.0 – Driver for the ArangoDB graph database.

  • is-online 11.0 – Check if the Internet is reachable.

  • sql.js 1.11 – SQLite compiled to JavaScript.

🥳 And a bit of fun..

p5.js is a popular ‘creative coding’ library that takes a lot of inspiration from Processing. p5 makes it easy to create digital art and interactive experiences without a lot of boilerplate (check out how simple this ‘smoke particles’ demo is, for example).

p5.js v1.10.0 has just landed, but the reason I wanted to mention it is because of how much fun I’ve had throwing AI generated code at the online p5 editor, and if you have access to tools like ChatGPT, you can do it too.

For example, give ChatGPT a prompt like:

Write some p5.js code that renders the JavaScript "JS" logo.

Copy and paste the result into the editor, and:

It’s not perfect, but it’s pretty good for a first try (and easy to ‘fix’ by hand).

Different LLMs take totally different approaches. Consider what Anthropic’s Claude 3.5 gave me, for example:

Eeek..

Well, anyway, there’s a lot of fun to be had, and you can prompt LLMs to improve the results or customize things as you wish. Have some fun with it, it’s pretty cool what you can produce.

We’re taking a week off now, but will be back on August 15!