How Googlebot sees your JavaScript
#699 — August 1, 2024
🏖️ 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
JavaScript Weekly
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 sponsor
Announcing TypeScript 5.6 Beta — The first beta of the next major version of TypeScript is out. Region-prioritized diagnostics (VS Code only, for now) is a particularly interesting addition.
Daniel Rosenwasser (Microsoft)
IN BRIEF:
Porffor is an experimental ahead-of-time JavaScript compiler/runtime that compiles to either WASM or native. Its developer has just gone full time on the project thanks to support from GitHub co-founder Chris Wanstrath.
React Conf 2024 has shared all the talks from its Las Vegas event back in May.
Ryan Dahl explains what Deno got wrong about HTTP imports and how it’s moving forward.
RELEASES:
Bun 1.1.21 – The JavaScriptCore-based server-side JavaScript runtime improves its Node.js and Remix compatibility.
📒 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)
Node.js’s Experimental Support for TypeScript — In this pull request, Node merged an experimental ability to transpile TypeScript into JavaScript, ultimately letting Node directly ‘run TypeScript’. No type checking is performed and, as Matt Pocock explains, TypeScript-only features are a no-go.
Sarah Gooding (Socket)
Ever Felt Compelled to Answer with Certainty When You Weren’t Sure? — Don’t stifle innovation with this toxic behavior. Thoughts on how to fix this—as a leader or individual contributor.
Test Double sponsor
A Different Way to Think About TypeScript — “a very expressive way to operate over sets, and using those sets to enforce strict compile time checks”
Robby Pruzan
📄 Reading from the Clipboard in JavaScript Raymond Camden
📄 Why Unknown Types Are Useful – TypeScript’s unknown, specifically. Michael Uloth
📄 Flexible Network Data Preloading in Large SPAs Matteo Mazzarolo
🔈 Why the Creator of jQuery Uses React and TypeScript Syntax․fm
📄 Highlights from Git 2.46 Taylor Blau (GitHub)
🛠 Code & Tools
emoji-picker-element: A Lightweight Emoji Picker — An emoji picking control, packaged as a Web Component. You can also add custom emoji to it. GitHub repo.
Nolan Lawson
STRICH: Fast and Reliable 1D/2D JS Barcode Scanning in Your Browser — You don’t need a native app to scan barcodes! Try the free demo app or sign up for the free, full-featured 30-day trial.
STRICH sponsor
☎︎ 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
PythonMonkey: Embed a JavaScript Engine into the Python VM — If you need to use Python but want to run JS, this gives you a way to do it with Mozilla’s SpiderMonkey engine. It now supports the CommonJS module system too.
Distributive Corp.
📅 Calendar Link: Dynamically Generate Event Links for Calendars — Generate event links for Google Calendar, Yahoo Calendar, Outlook, etc.
Anand Chowdhary
The Only Production-Ready AI-Powered Backend Code Generator — Build new services, extend your existing applications with Amplication AI. Go from idea to production in four minutes.
Amplication sponsor
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
json-to-csv-export: Generate Downloadable CSV of JSON Data — You’ve got some data in JSON, you want users to be able to download a CSV of that data.. GitHub repo.
Coston Perkins
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!