GPT 4oooooo!


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.

video preview

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.

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: 👀 Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released https://edgarallan.com. https://slater.app/community_library/random-content-aee7f7f2-3ab8-4e6f-887e-ea54cad0ebbf From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. 🇺🇸 Render and animate an American flag on a canvas with dynamic waving effects....

We're adding new community library scripts each week. Let's take a look at some of them. 👾 An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: https://slater-original.webflow.io/swarm Review the code:...