profile

Welcome To Slater!

Slater Community Roundup - New Slater and Loading Events

Published about 1 month ago • 2 min read

👋,

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.



113 Cherry St #92768, Seattle, WA 98104-2205
Unsubscribe · Preferences

Welcome To Slater!

Sign up for early access and weekly resources in your inbox

Slater resources, updates and community activity

Read more from Welcome To Slater!

This weekend, Slater experienced an outage. While we make every effort to ensure Slater's uninterrupted operation, occasional server issues may arise. But! The key takeaway from this weekend's incident is that the production scripts on your clients' websites remain unaffected even if a Slater outage occurs. Slater scripts are exceptionally resilient and you can trust Slater to provide Javascript functionality on your client websites. Our in-house Javascript and Surf guru, Witt, re-recorded a...

3 days ago • 2 min read

Before Slater, we at Edgar Allan used Codesandbox. It's a incredible tool. Full stop. We invested in building Slater because the Codesandbox solution was a hack and we didn't feel comfortable shipping our clients' websites with a Codesandbox script. This week Codesandbox updated their pricing and broke a lot of Webflow projects. :( If this is you, crack open Slater again. If this is someone you know, forward this email to them. Product Updates We're adding polish to the new UI--a lot of small...

16 days ago • 1 min read

Let’s do three things in this email: Welcome new users Provide you a sneak peak of Slater Documentation Teach you some Javascript basics. Welcome new users! 🥳 Documentation We’ve finished development on Slater Documentation and will be sharing it once we complete some improvements in other parts of Slater.app. Slater Documentation lets you document your code with Slater AI. Slater Documentation should help you as the person who wrote the code but we’re adding it for two big, separate...

about 1 month ago • 1 min read
Share this post