Two Asks πŸ™


​

​

πŸ‘‹,

​
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!

​

Happy coding!

πŸ€™ the Slater Team

​

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

Welcome To Slater!

Slater resources, updates and community activity

Read more from Welcome To Slater!

We're back from a company-wide summer pause (or winter pause for our Southern Hemisphere team members). Edgar Allan is hitting it's numbers! Let's look at some new Community Library scripts: πŸ‘€ Dynamically loads HTML content based on a random number. This is a quick script we wrote to give a dynamic intro into a soon-to-be-released https://edgarallan.com. https://slater.app/community_library/random-content-aee7f7f2-3ab8-4e6f-887e-ea54cad0ebbf From Jared Malan ✍️ Create a variable for your...

We're rolling into a holiday week in the US. If you need an animated American flag to celebrate, look no further. But! We have users from all over the world. For those outside of the US, try updating the code to make an animated flag of your country (hint: use AI). If you make one, please share. We'll get it added to the Community Library. πŸ‡ΊπŸ‡Έ Render and animate an American flag on a canvas with dynamic waving effects....

We're adding new community library scripts each week. Let's take a look at some of them. πŸ‘Ύ An interactive swarm Create a dynamic grid of squares that react to mouse movement, simulating a swarm-like effect (is it a swarm?). This code is the scaled back version of something we did for a client. We'll show you the finished experience once that projects launches. Play with the example: https://slater-original.webflow.io/swarm Review the code:...