Dec. 21, 2023, 10 p.m.
Astro goes full on View Transitions
Explore Astro's latest features: lightweight SPA router with cross-page animations, form support, and simplifying web development tools.
Baptiste's Web Dev Journey
Hey there!
I am a big fan of Astro, and I carefully follow what they release. A few months ago, Astro 3 was released and brought many exciting features, the most important being a lightweight SPA router with cross-page animation capabilities.
Back then, I built a demo to showcase Astro's new capabilities. The demo is an e-commerce website using Server-Side Rendering to display the most recent products and the new SPA mode leveraging the recently added View Transition API to make shiny transitions of shared elements between pages.
Before version 3, Astro’s purpose was only to build static websites. Thanks to Astro Islands, pages could be made partially reactive, but the whole website remained a Multi-Page Application (MPA): each time one user clicked a link, the entire page was reloaded.
Because of this, Astro wasn't suitable for all kinds of websites. On an MPA, a chatbot element reloads whenever a link is clicked, which is inconvenient.
Enabling SPA mode with View Transitions
The SPA mode brought by Astro 3 is effortless to opt in; only a few lines of code must be written:
---
// src/components/AppHeader.astro
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>{title}</title>
<ViewTransitions />
</head>
You must render the <ViewTransitions /> component on every page you want to activate the SPA mode. In most cases, it will be on every page of your website.
By default, Astro will apply a fade transition between pages thanks to View Transitions. It comes with a few built-in transitions you can use instead of the fading effect, like sliding, and you can create your animations with declarative JavaScript code.
I found the default behavior clean enough and didn't want to customize it more. If you made amazing animations with View Transitions, I would love to hear about them, even if you didn't use Astro—I'm open-minded!
Support for HTML forms
With Astro 4, released on 5 December 2023, View Transitions now support forms. When a form is submitted and targets the website's domain, Astro will intercept the submission, make the request with fetch, and swap the page's content with the response.
When I worked on the e-commerce demo with Astro and SPA mode a few months ago, I felt that Astro needed to intercept form submissions to make the whole user experience perfect. The user experience is consistent and delightful now that it has been implemented!
Look how clean the transitions between the authentication states are! And I had to write absolutely zero code to make this work! I only had to upgrade to Astro 4.
Both sign-in and sign-out forms are plain old HTML forms targeting an API route of the website. The sign-out form is as simple as:
<form method="POST" action="/api/sign-out">
<button type="submit">
Sign out
</button>
</form>
This is just HTML code that always worked on The Platform and I used to write when I started developing websites with PHP. Nowadays, front-end frameworks return to more straightforward solutions, relying on browser capabilities – which are increasingly important – and I can only be happy with that!
Make things simpler
Some say the JavaScript community lost ten years creating heavy front-end frameworks to return to The Platform.
Writing Astro code differs from writing PHP code with no front-end framework. Tools like Turbo or Unpoly exist to make server-rendered pages interactive, but I don't find the integration to be as seamless as Astro is.
The real benefit of Astro is that I can still use the JavaScript tools I like and am proficient with. I can use TypeScript and XState. I can use Panda CSS, made for a JavaScript environment. I can encapsulate code in components easily. I can use React Aria to build with good accessibility primitives.
I hope the future of Web Development will be to make things simpler and nearer to the browser while keeping a good developer experience and an excellent user experience.
My Web Dev Journey
Screencasting
I revived my YouTube channel after taking Aaron Francis' screencasting.com course. My previous setup was rough, and recording a video was a pain because I was discovering every step of the process. We all need to start somewhere, but it feels good to step up!
I highly recommend Aaron's course. He covers every step of creating a screencast, like content preparation, light, sound and screen setups, recording, and editing. It was insightful, and I even released a video to show my VS Code setup for screencasting based on what I learned in the course.
I released a video about sharing state across Astro Islands with Nano Stores. This is the same topic as today's newsletter issue, so check it out!
AI and LLMs for video creation
When I release a video on YouTube, I want to provide subtitles of great quality to my viewers. YouTube automatically generates subtitles, but they are only sometimes good. I want a straightforward description using my own words. I also want to provide chapters to split the video into meaningful chunks. Some people don't know it, but it's a manual process.
I tried several online AI tools to generate subtitles, descriptions, and chapters for me, but I wanted more. I knew I had to experiment with LLM as everybody talked about it for several months, and it was the perfect opportunity.
I call Whisper with OpenAI's API to transcribe the video. As Whisper doesn't always recognize technical words, I pass the raw transcription to GPT-3.5 to enhance it. I give a list of specialized words to GPT so that it recognizes them. This is an instructive project, and it feels so nice to add some AI intelligence to a product with little prior theoretical knowledge of AI.
I have yet to add the description and chapter generation features for now, but I will work on them to make my life easier alongside releasing new videos.
I talked about it on Twitter and shared more technical details. I tried Remix and loved it! Especially the automatic revalidation of page data after a mutation.
Tech podcast in French
I'm starting a tech podcast in French with a good friend, Paul Rastoin. We settled on the "Parlons Dev" name, which means "Let's discuss development" in French.
We'll talk about tech, web, and development. We always had great technical discussions since we met, and we decided to share them with others by turning on the camera.
We released our first episode discussing npm packages releasing and GitHub repository security with the Dependabot. You can find it on our website parlons-dev.com. Bonne écoute à mes amis francophones !
We expect to release at least one episode per month.
This is all for today! I thank you for reading the first issue of my newsletter. See you next year, and happy Christmas!
Best,
Baptiste