…then hit this button again. There is the backdrop. Why was it missing the first time? It's actually a bug in Bootstrap 5.0.1 when using Turbo. But don't worry, it's already fixed and will be available in 5.0.2…

…Our goal is simple but bold! I want to be able to trigger a toast notification from any template or from a Turbo Stream. Start by creating a new template partial: _toast.html.twig. I'll paste in a structure that's from Bootstrap's…

…Ah, here's the problem. When we submitted the add to cart form into the frame, our controller redirected and the turbo frame followed that redirect. This request is the POST to /cart... and this is the Ajax request for the redirect. That response does…

…disabled form to give us the exact effect we want. Scroll up, log out, then go to the registration form. This form does not live in a Turbo frame. But it still gets the new submit behavior! Yup, with just a few lines of code…

…you can see it down here in the network tools. It then looked for a cart-sidebar turbo frame on that page because it wants to find which part of this page it should render inside of the cart-sidebar frame. But... in this case…

…then scroll back up to the top of the requests. Cool. Turbo - which doesn't know or care that we're doing this prefetch stuff - made its Ajax call like normal. But when it did, our browser was smart enough to instantly pull that from…

…prefetch that page via Ajax and saved it to the snapshot cache? Then, assuming the user does click that link, Turbo would show the page instantly via its preview system. Is that possible? Well, not officially. But thanks to some clever people on the Internet…

…taken right before the new page is "swapped in". Thanks to our new fade out functionality... it means that snapshots are taken when the page has the turbo-loading class! In other words, snapshots are taken when the page has low opacity! Thanks to this…

…Vue or some other frontend framework Laziness: loading controllers lazily By the end, you'll be able to build anything on your site with Stimulus. And once you have, you'll be ready to give your app a SPA (single page app) feel with Turbo!

…with AssetMapper! Install & Running Tailwind CSS Intro into Stimulus & Turbo for JavaScript & an SPA (single page app) feel Create a JSON API endpoint All-important "service objects": a quick tour of using them and creating your own Say hello to MakerBundle Let's boldly go!…

…for us: the MakerBundle! Run: symfony console make:entity For the name, use Starship. We're not using Symfony UX Turbo, so answer no to that question. This already created a Starship class in the Entity/ directory and a StarshipRepository class. We'll talk about…

…but not then redirected back to /login... The problem here is Turbo. It's capturing the form submission, and sees the redirect is an error, so it just stays on the current page. Not the greatest experience... While Turbo works well with normal Symfony forms…

…form_end(form) }} below it, and put a special {{ form_widget(form) }} between them to render all the form fields. Move our submit button just before form_end(): Because when Turbo is enabled, page navigation happens via AJAX requests, and, I know that sounds crazy…

…bundle and symfony/ux-turbo can all be upgraded to the next major version. Let's go ahead and do that in our composer.json file. Find phpdocumentor/reflection-docblock and change to ^6.0. Next, stimulus-bundle, change to ^3.0. Finally, ux-turbo…

…browser's network tab or in the web debug toolbar (WDT). This behavior ensures compatibility with tools that rely on the HTTP specification, like Symfony UX Turbo. This works because, in our controller, we're passing the $form object to the Twig template. If we…

…importmap.php file. This is, effectively, the new package.json: the home for 3rd party packages. And hey! It already added Stimulus and Turbo! Those are two of the packages from package.json that we do need. Will this work? Refresh and... kinda? We don…

…mixes in our system. So let's create a new class called VinylMix. Then answer no for broadcasting entity updates: that's an extra feature related to Symfony Turbo. Ok, here's the important part: it asks which properties we want. We're going to…

…the response right back inside the modal. Because... of course! That's the whole point of a Turbo frame. It keeps the navigation inside itself. Before we talk about what happens on success, I want to perfect this. My second requirement for opening the modal…

…done! The data-turbo-frame="modal" would load that page into the modal. But since we've done that before, let's try something different. Delete the href, change this to a button, remove the data-turbo-frame attribute... and change the yellow colors to…

…button to an a tag and set its href to the app_voyage_new route. It's a normal tag that would take us to that page. But now add data-turbo-frame="modal": Check it out. Refresh and click. Instead of changing the page…