​

​

👋,

​
We love hearing from you. Two asks:

1. Give us feedback on what Slater features you'd like to see.
2. Send us cool projects that you are working on.

In regards to #1, we prioritize updates based on your feedback, so if you want something, let us know.

And #2, we love seeing what you're working! We'll continue to showcase your projects in this email and use them to help prioritize features and content.

​

Recent Updates

This week, we made several updates based on feedback from Kevin, Pablo, Leon, and others.

Most of the updates are quality-of-life improvements, but one stands out: you can now define the load order based on file names. Global files are loaded first, followed by files scoped to Webflow pages. Within these categories, you can define the order based on the file name, A -> Z.

*We may add drag-and-drop sorting if you find this feature useful.

With this update, you can ensure your helper file loads first and use helper functions in any of your other files. For example:

window.isMobile = function () { 
  return window.innerWidth < 767; 
}

To share your ideas and projects, reply to this email or catch us on Twitter.

​

Javascript 101: SPAs & Webflow

SPA or Single Page Apps are all the rage these days. You can't build a SPA with Webflow but you can create something that feels a lot like a SPA. To accomplish this, let's looks at the window.history API along with jQuery's load() method. This approach involves loading content from different pages dynamically and updating the browser's URL to mimic SPA behavior.

1. Load Content from a Page using jQuery load()

You can use jQuery's load() method to fetch and load content from a different page into a specific element on the current page. This allows you to dynamically update parts of the page without a full page refresh.

// Load content from another page into the #content element
$('#content').load('path/to/other-page.html #content-section');

In the above example, the content from the #content-section element of other-page.html will be loaded and injected into the #content element on the current page.

2. Update the Browser URL

To create the illusion of navigating to a different page, you can use the window.history.pushState() method to update the browser's URL without triggering a full page load.

// Update the URL without causing a page load
window.history.pushState(null, null, 'path/to/other-page');

Here, window.history.pushState() updates the browser's URL to path/to/other-page, but since the content has already been loaded using jQuery's load() method, the page doesn't actually refresh.

You can combine these two techniques to create a pseudo-SPA experience in Webflow:

// Function to navigate to a different "page"
function navigateTo(url) {
  // Load content from the target page
  $('#content').load(url + ' #content-section', function() {
    // Update the browser URL after content is loaded
    window.history.pushState(null, null, url);
  });
}

// Attach click event handlers to navigation links
$('a.nav-link').click(function(e) {
  e.preventDefault(); // Prevent the default link behavior
  navigateTo($(this).attr('href')); // Navigate to the URL specified in the link
});

In this example, clicking on a navigation link with the class nav-link will trigger the navigateTo function. This function first loads the content from the target page using jQuery's load() method, and then updates the browser's URL using window.history.pushState().

🤫 We're using this code and a lot of AI to build the next version of edgarallan.com. Hopefully, it comes in handy for you as well.

​

Your projects, supported by Slater

Scott built some incredible chart experience with GSAP. Take a look!

Scott @ Humphrey Design Studio @Scott_Humphrey I used @Slater_App and GSAP @greensock to rebuild a glitchy client slider that used finsweet custom slider dots and Webflow native slides. I love how easy it is to speak with slater ai and get the result you require. All while improving my own coding skills along the way 🙌 6:43 AM • May 23, 2024 1 Retweets 3 Likes

​

​

Happy coding!

🤙 the Slater Team

​

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