👋,

​

Let's cover two topics in this email:

• Announcing the New Slater experience
• Javascript 101: Loading JavaScript and Understanding Document Ready Events

New Slater

We will be releasing a major update to Slater in the next few days. Paid users have been using the new Slater editor for the last month or so. Now, the rest of the app will get a similar UI refresh and all users will get access to this new experience.

Along with the UI refresh, we will be releasing Documentation and an improved Library. We discussed Documentation last week. The new Library now uses the same structure as a File. You can use the Slater Editor to create and improve code that solves common problems in your Webflow projects. And then when you need to use that code, you have access to it across all your Slater projects.

* Your old library items will not show up but you can still access them in the Legacy editor.

JavaScript 101: Loading JavaScript and Understanding Document Ready Events

Let's discuss how to control when your code runs, particularly in relation to when your web page loads. This is where "document ready" events come into play.

A “Document Ready” event is an event that fires when the DOM (Document Object Model), or the structure of your webpage, is fully loaded. This is important because JavaScript and jQuery code often manipulates the DOM, and therefore we usually want our scripts to run only after the DOM is fully loaded.

In pure JavaScript, we use the `DOMContentLoaded` event. It is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This means that `DOMContentLoaded` can fire earlier than another load event: `window.onload`, which fires when the entire webpage, including all dependent resources like images have been loaded.

Here's how you can use these two events:

document.addEventListener("DOMContentLoaded", function() {
  // your code here
}

window.onload = function() {
  // your code here
}

​
You may see other load events as well. For example with jQuery you can use the `.ready()` and with Webflow, you can use the `Webflow.push()`.

$(document).ready(function() {
  // your code here
});

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api
});

​
With Slater, we run the correct file (staging vs production) after the `DOMContentLoaded` event fires, as you can see in the Slater ingle Script code. I've added comments to help you follow how we load your Javascript.

// Set version number. You can update to bust cache.
let v = "1.0"; 
// wait until DOM has loaded
document.addEventListener("DOMContentLoaded", function () { 
  // define function
  function loadapply(e) { 
    // Add script tag to the DOM
    let t = document.createElement("script");
        t.setAttribute("src", e), 
        t.setAttribute("type", "text/javascript"), 
        document.body.appendChild(t), 
        t.addEventListener("load", () => { 
          console.log("Slater loaded Apply (Slater.app/1/1) 🤙") 
        }), 
        t.addEventListener("error", e => { 
          console.log("Error loading file", e) 
        }) 
  } 

  // Define the correct file based on URL
  let src = window.location.host.includes("webflow.io") ?
      "https://slater.app/1/1.js" : 
      "https://assets.slater.app/slater/1/1.js?v=" + v;
  
  // Run the function
  loadapply(src); 
})

Because we load your code when the `DOMContentLoaded` event fires, you don't need to use a load event in the Javascript you write.

Understanding these functions and knowing when to use them is key to ensuring your JavaScript or jQuery code runs smoothly and at the right time.

Let us know if you have any questions about load events or any other Javascript concepts.

​

Until next time, happy coding.

- The Slater team

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

​
​
1295 Canyon View Rd, Midway, UT 84049
​Unsubscribe · Preferences​

​