profile

Welcome To Slater!

More Slater Scripts ๐Ÿ“š

Published about 1 month agoย โ€ขย 2 min read

๐Ÿ‘‹,

โ€‹

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:

  1. The global file (https://slater.app/5348/9939.js) is loaded on every page.
  2. 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.

โ€‹
โ€‹
1295 Canyon View Rd, Midway, UT 84049
โ€‹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!

๐Ÿ‘‹, We were excited to be invited to Webflow's livestream, Add AI to your Webflow builds with these Webflow apps. It did not go as planned. ๐Ÿคฆโ™‚๏ธ Aron's project was deleted prior to the demo but also open in another tab. Although it appeared to still be functioning properly, the project files were inaccessible. You can see the breakdown here. (Get a free month subscription using the code "wipeout".) ๐Ÿ‘€ We are working on several tasks based on feedback from users like you. The minification of your...

3 days agoย โ€ขย 2 min read

๐Ÿ‘‹, The idea of a community library has been part of Slater's vision from the start, but it took a couple of tries to get it right. The code is now written and we have moved our focus to populating the library with useful scripts. If you have a valuable script to contribute, please add it to your personal library and document it with Slater Documentation. We will review your scripts and reach out if your script is something we want to include. ๐Ÿ‘€ You have probably head about Devin, the first AI...

11 days agoย โ€ขย 2 min read

๐Ÿ‘‹, We are big fans of Ran and the giant role he plays in the #nocode space. Pleased to see that he uses Slater! Have you tried out his courses? Ran Segall @ransegall An Ai coding companion for Webflow. Slater is a new tool for designers who don't write code. Have you tried it yet? 6:0 AM โ€ข Mar 28, 2024 1 Retweets 69 Likes Read 3 replies Are you using the Library tab? What code snippets are you saving? Would you like any improvements? Javascript 101: Arrays of Objects We had issues with...

25 days agoย โ€ขย 2 min read
Share this post