๐,
โ
We pushed up a handful of updates yesterday. Quality of life improvements, bug fixes, and more Slater scripts!
Slater still works the same, but now you have more flexibility in how your JavaScript is loaded in your Webflow project. If the Slater Single Script is working for you, feel free to skip the details.
The details: Slater has two types of projects, connected and unconnected, and manages two environments, staging and production. Sometimes you may need more control over the timing or scope of your JavaScript.
Connected vs. Unconnected Projects
The Slater Single Script is a connected project that manages staging and production environments. It uses JavaScript's dynamic import to load the correct JavaScript file on the corresponding Webflow page. With the Slater Single Script, you can add, update, or remove files all from Slater without needing to publish on Webflow. However, you may encounter an issue if your file needs a global scope. (I have only seen this be an issue if you added an External Script.)
If you need global scope, you can add a single file using the new Slater scripts.
Staging vs. Production Environments
Slater allows you to make updates to the staging environment and push to production when your JavaScript is ready. Again, you don't need to publish on Webflow to save your changes. To load the correct environment file, Slater uses the DOMContentLoaded event.
If you need to load your JavaScript differently, you can now add a simple staging or production script.
โ
โ
Last week, we promised a Slater Session video, but work at Edgar Allan got in the way! (We'll get that video for you soon.) Want to know what the team is working on besides Slater?
โ@witt is working on an AI experience for a VC clients and edgarallan.com.
Pabz is building a Wes Webflow app.
โ@kevin is designing the Wes Webflow app.
โ@jared is kicking off a project with a Series C startup.
โ@mason is developing business for Edgar Allan (EA).
โ
โ
Javascript 101: JS Import
JavaScript imports are a fundamental aspect of modular programming in JavaScript, allowing developers to organize code into reusable and maintainable modules. There are two types of imports in JavaScript: static imports (using the import statement) and dynamic imports (using the import() function). Since we use dynamic imports in Slater, we'll focus on them.
Dynamic imports allow you to load modules asynchronously, meaning you can import files only when they are needed, rather than loading them all at once. This can improve performance, especially in large applications where loading all modules upfront may not be necessary or desirable.
Here's an example of what the Slater Single Script looks like:
// This file was generated by Slater.app - Loblollyโ
โ
โ// Global -> โ
import('https://slater.app/5348/9939.js?v=198015')
โ
โ// About -> โ
{
let pages = ["about"];
let paths = window.location.pathname.split('/')
let path = paths[paths.length - 1]
let itemPath = paths[paths.length - 2]
if (pages.includes(path) || pages.includes('detail_' + itemPath) || pages.includes(itemPath + '/item')) import('https://slater.app/5348/9938.js?v=648512');
}
In this example:
- The global file (
https://slater.app/5348/9939.js) is loaded on every page.
- The about script (
https://slater.app/5348/9938.js) is loaded only on the "about" page.
Dynamic imports can improve performance because you load only the code you need for the current page or feature. Advanced users can also split code into separate modules, export functions and variables from those modules, and import the exported functions and variables into other files as needed. This modular approach can make code easier to maintain and reuse.
A potential downside of dynamic imports is that they add network requests, so an excessive number of files can impact load times, especially in low-bandwidth or high-latency environments.
So, that's imports. What do you want to learn about next?
Happy coding!
โ
๐ค The Slater team
โ
๐ If Slater helps you create better websites, please support the team behind it.