​

You can now use OpenAI's latest and most powerful language model, GPT 4o, with Slater AI. We've been testing GPT 4o this week and Slater AI's capabilities are better and faster than ever! Along with the new model, we implemented several improvements to Slater AI. Slater AI will now give more Slater and Webflow relevant answers since we give Slater AI contextual understanding (h/t tdlabs.ca). We also improved the messages parsing (h/t @jeffamcavoy).

​

Slater Sessions

Slater Sessions are back! In this Session, Witt breaks down the different flavors of Slater scripts.

​

​

Javascript 101: Loading Scripts

In keeping with the Slater Session, let's break down the different ways of loading Javascript in Webflow. Slater scripts can be loaded in one of two ways: loading a script (Simple Script) at the bottom of the DOM or dynamically adding a script (Smart Script) to the DOM on the DOMContentLoaded event. Here are the differences and implications of each approach:

1. Loading a Script at the Bottom of the DOM

Description:

• You place your simple script <script> tags just before the closing </body> tag of your HTML document.

Pros:

• Improved Initial Page Load: The browser can render the HTML content without waiting for the scripts to download and execute, which can speed up the initial page load time.
• Deferred Script Execution: Since the script is at the bottom, it executes after the DOM has been fully parsed. This avoids blocking the rendering of the page.

Cons:

• DOMContentLoaded Timing: If your script is large or the network is slow, the DOMContentLoaded event might be delayed because it waits for all scripts at the bottom to execute.
• Less Control: You can't easily control exactly when the script starts executing, other than it being after the DOM is fully parsed.

2. Dynamically Adding a Script on DOMContentLoaded

Description:

• You wait for the DOMContentLoaded event, then use JavaScript to create and append a <script> element to the DOM. This is how we handle the Smart Script.

Pros:

• Precise Control: You have precise control over when the script is loaded and executed. This can be useful if your script depends on the DOM being fully available.
• Non-blocking: Since the script is added after DOMContentLoaded, it does not block the initial HTML parsing and rendering.

Cons:

• Slightly More Complex: This approach is slightly more complex to implement than simply placing the <script> tag at the bottom.
• Initial Load Time: The script starts loading only after the DOMContentLoaded event, which can slightly delay the availability of the script.

Key Differences

1. Execution Timing:

• Bottom of the DOM: The script executes as soon as the browser reaches the bottom of the HTML document.
• DOMContentLoaded Event: The script starts loading and executing only after the DOMContentLoaded event fires.

2. Blocking Behavior:

• Bottom of the DOM: If the script is large or slow to load, it can delay the firing of the DOMContentLoaded event.
• DOMContentLoaded Event: The initial rendering and the DOMContentLoaded event are not blocked by the script, as it begins loading only after the DOM is ready.

3. Control:

• Bottom of the DOM: Less control over the exact timing of script execution.
• DOMContentLoaded Event: Greater control over when the script is added and starts executing.

Practical Considerations

We recommend you use the Smart Script as your default. It makes managing your Javascript effortless. Add the Smart Script to your global footer and then you can add files to Webflow pages, write Javascript, and handle Staging and Production code all from your Slater editor. Occasionally, you may run into special timing or scope considerations. In those cases, you can add a simple script to your project.

Does that all make sense? We hope so but let us know if you have any questions.

​

Your projects, supported by Slater

Before we go, we want to show a really cool GSAP project by Hunter Harralson @ pushrefresh.com. Beautiful work, Hunter!

Are you working on something worth sharing? Please do!

🤙 The Slater Team

​

​

If Slater helps you create better websites, please support the team behind it.