🖊️ Chris is on vacation this week enjoying the delights Germany has to offer, so it's the editor of JavaScript Weekly at the helm this week!
__
Peter Cooper, your editor

Together with  Progress KendoReact
🚀 Frontend Focus

#​694 — May 28, 2025 | Read on the web

CC BY 4.0 licensed image by Google from here.

Ways to Ensure Your Content Performs Well in Google's AI Experiences on Search — This is a rather new area to think about, but Google has been showing how keen it is to introduce more AI into its Search product, so a sort of modern variant of SEO is beginning to emerge. These guidelines are simple, but this is a growing area to keep an eye on.

John Mueller (Google)

💡 Mike King's How AI Mode Works and How SEO Can Prepare for the Future of Search goes into far more detail on this topic, and is probably the more interesting read!

Try KendoReact Free, npm-Install Available! — 50+ robust KendoReact components, including React Data Grid, DatePicker and DropDownList. No sign-ups, trials, or licenses required - you can use KendoReact Free in production, to experiment, or to quickly see what it's all about!

Progress KendoReact sponsor

HTML5 Elements You Didn't Know You Need — If you read MDN on the regular, you might not need this article, but roundups like this are always popular nonetheless. Max digs into dialog, details, summary, meter, output and other elements here.

Max Prilutskiy

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

How to Move a Modal In On a… shape() — Making a modal open and then come flying into view along a defined shape, the modern way. It’s a neat effect.

Chris Coyier

React, Visualized: A Visual Exploration of React Concepts — A visual explainer of numerous core React concepts, including modern React 19 features like actions, transitions, and Server Components. There’s a lot to enjoy here if you're a visual learner.

Tyler McGinnis et al.

Ship SaaS Subscriptions Fast with Drop-In Billing from Clerk — Add subscriptions to your SaaS in minutes — learn how with Clerk Billing’s drop-in UI and Stripe-powered setup.

Clerk sponsor

🤖 Building a React App with GitHub Copilot — A good walkthrough, complete with video, if you prefer, of bringing together several of GitHub Copilot’s features for building a modern JavaScript app quickly.

Kedasha Kerr (GitHub)

Creating an Animated Product Grid Preview with GSAP and clip-path — Now that GSAP is entirely free to use, you might be more prepared to bring its animation powers into your Web design arsenal.

Gwen Bogaert

You Can Style alt Text Like Any Other Text — I certainly didn’t know this was possible.
Andy Bell

🤖 Running GPT-2 in WebGL: Rediscovering the Lost Art of GPU Shader Programming
Nathan Barry

Scroll-Driven Animations Inside a CSS Carousel
Geoff Graham

Securing a Form on the Internet: Still Pretty Difficult
Curtis Collicutt

🧰 Tools, Code & Resources

ForesightJS: Predictive Mouse Intent Library — An interesting concept, with the entire page acting as a demo of sorts. The idea is to decrease latency by prefetching data or pages as soon as you think a user might be heading in that direction. Your mileage may vary and it’s less useful for touch devices.

ForesightJS, Inc.

Cap: A Lightweight, Modern Open Source CAPTCHA Alternative — This solution boasts a method called “proof-of-work” which attempts to make automated CAPTCHA solving more expensive. It uses a Web Component and you can try out a few demos here. GitHub repo.

Cap

+80% Daily Productivity With an All-in-One MySQL IDE for Web Devs — Code faster, test easier, deploy smarter. Don’t fall behind. Try dbForge Studio for MySQL and boost productivity now!

Devart sponsor

snapDOM: Captures DOM Nodes as Images — A fast and accurate DOM-to-image capture mechanism to capture any HTML element as a scalable SVG image, preserving styles, fonts, background images, etc.

ZumerLab

Ruffle: A Flash Player Emulator — Built in Rust, Ruffle targets both desktop and the web using WebAssembly. It’s a retro idea, but if you have old Flash content to bring back to life, it’s an option. There are some demos to enjoy.

Ruffle

Docusaurus 3.8: The Docs-Oriented Static Site Generator — The popular React-powered site generator offers a variety of build performance enhancements but, most notably, ‘future flags’, a way to opt-in to forthcoming Docusaurus v4 changes ahead of time to be more prepared for the future (or at least test if you are).

SĂŠbastien Lorber

▶️ Videos from Google I/O

As mentioned in last week's issue, Google annual I/O developer conference recently took place. Now we've got a whole playlist of web related talks to share from the event.


Performance Debugging in DevTools — Paul shares a look at the reimagined Chrome DevTools Performance panel, showing off new features, how they work, and how to use them to make performance gains.
Paul Irish

What's New in Web UI — An engaging, roughly ~50 minute update on the current “Golden Age of Web UI”, running through a packed feature list of things we can now do to enhance the visuals of the web platform.
Una Kravets

Web Animations Today and Tomorrow — A 20-minute exploration of the latest advancements in web animation, including view transitions, scroll-driven animations, and more.
Bramus Van Damme

Client Side Web AI Agents to Build Smarter Future User Experiences — Google’s Web AI lead shows us what an “agentic internet” might look like. It’s a glimpse at how local LLMs will perform actions on a user’s behalf through text or voice interfaces, entirely in the JavaScript stack.
Jason Mayes

Do More with Chrome DevTools and Less CTRL + TAB — Here’s a look at how an AI assistant within DevTools will reduce context switching — helping with styling, network, sources, and performance.
Matthias Rohmer

📰 Classifieds

bit.dev - open-source tool providing AI-powered development workspaces, fostering architectural clarity and enabling zero-overhead composable components.

Ipx.