…directly - we're not going to attach it to an element. But the fact that it's being loaded & registered with Stimulus is enough to activate Turbo on our site. What the heck does that mean? It's like magic: give the page a refresh…

…commit everything first... in case the new package installs an interesting recipe: Ok, let's install the new package: composer require symfony/ux-turbo See that "ux" in the package name? Symfony UX is a set of libraries that add JavaScript functionality to your app.…

…Temporarily, give this an id called company_name so we can target it. Now, anywhere else on the page - so how about down here in the footer - edit as HTML and paste that Turbo Stream. In this case, we want the target to be company…

…same project as the first tutorial, though I did make some changes, like adding a review system below each product... and upgrading some libraries. Now that we have this running, let's install Turbo and activate Turbo Drive to instantly eliminate full page refreshes. Woh.

…is just an HTML element like a div, and so it renders normally. Though, for styling purpose, turbo-frame is an inline element by default. However, when we click a link... it's busted! It says "Content missing". And in the console: The response did…

…shine. All the fundamentals are in place - AssetMapper, Tailwind & Stimulus - so today is... almost a victory lap. We're about to get a huge bang for our buck thanks to a library called Turbo. Right now, our site, of course, has full page refreshes. Keep…

…is a big difference compared to a traditional web app. But, it's also what makes Turbo so fast: re-parsing all that JavaScript over and over again on each page load takes time! However, if you put JavaScript into the body of your page…

For day 24, strap in for a quick adventure. We've learned that Turbo Streams are custom HTML elements that you can throw onto the page anywhere... and they execute! But there's another way to use Streams that's actually more commonly-documented, even…

…redirect, the frame system followed that redirect, found the frame on the next page, and updated this area. The normal Turbo Frames behavior. Then our stream caused the quick stats area to update... and it also re-updated the reviews area... because, right now, our…

…submitForm()... yea, we're not going to need this at all. The turbo frame will handle the form submit all on its own. And thanks to these changes, one of the targets up on top - modalBody - is no longer used. So we can remove that…

…a chat app where you want a new message to render as soon as the other person sends it, Turbo Streams can help. Streams are another way to enhance your page. So they're an extra feature - like frames - that you can choose to add…

…looked in the response for the with the id, found it and used its HTML. If you inspect element and find the turbo-frame, you can see the src="" attribute is still there, but now it's filled with content. At this point…

…unaffected. Frames are super cool, but I do want us to keep something in mind: they're an "extra" feature. Turbo Drive gives us the single page app experience. Frames give us the ability to make the user experience even better. But using frames does…

…it does modify the URL, which gives us normal browser behavior, like clicking back and forward. Speaking of back and forward, Turbo Drive has a feature called "snapshots". Let me refresh the page real quick. As you navigate to a new page, it stores a …

…then updated the page with the new HTML? Well, that's exactly what Turbo Drive does. And it's a huge step towards making our app feel like a single page application. Turbo itself is... just a JavaScript library! It has nothing to do with…

…is how it jumps around. Every time we click a link, it jumps back to the top of the page. Boo. That's because Turbo is reloading the full page. And when it does that, it scrolls to the top... because that's usually what…

…It made an AJAX request for Page 2, our app returned that full HTML page - including the header, footer and all - but then Turbo Frame found the matching mix-browse-list inside of that, grabbed its contents, and put it here. And though…

…the frame. Ok, the src starts set to /admin/product/new, which means that when we open the modal, we see the contents of the turbo-frame from that page. Fill in some data and then submit. Hmm, the src changed to /admin/product/. Well…

… element. Ah, the problem is that, even though we closed the modal, the turbo-frame still followed the redirect to the product review page. Then, like it always does, it looked for a with id="product-info…

…Copy the modal code, remove it, create a new method below called closeModal() and paste. Then, back up inside the turbo:before-cache callback, say this.closeModal(). Repeat this for Sweetalert: copy all of the Sweetalert code, create a new method called closeSweetalert(), paste... and..…