profile

Welcome To Slater!

Your production scripts are safe with us

Published about 2 months agoย โ€ขย 2 min read

๐Ÿ‘‹,

โ€‹

โš ๏ธ 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 getting started video. If you haven't synced up Slater with Webflow yet, please watch and give Slater a go.

Everyone at Edgar Allan loves Witt's how-to videos. We want to do more of them. What subject matter would you like him to cover?


JavaScript 101: More DOM Traversal

โ€‹Last week, we learned about the DOM (Document Object Model) and how we can get started navigating or "traversing" the DOM. This week, let's dig deeper into this concept with "this". When interacting with the DOM, like when a user clicks or mouses over an elment, "this" refers to the element that the event happened to.

For example, let's say you have a button on a webpage. If you attach a click event listener to the button, "this" inside the event handler (the function that runs when the event happens) will refer to the button that was clicked. Let's see this in action:

โ€‹

document.querySelector('button').addEventListener('click', function() { 
  console.log(this); 
});

โ€‹

Here, when you click the button, `this` will be printed out to the console, and `this` will be pointing to the button that was clicked.

This can be super handy when you want to move from the element that triggered an event to a nearby element. Imagine you have a list of items, and each one has a delete button. When a delete button is clicked, you want to remove that item from the list.

โ€‹

let deleteButtons = document.querySelectorAll('.delete-button');
for (var i = 0; i < deleteButtons.length; i++) { 
  deleteButtons[i].addEventListener('click', function() {
     this.parentNode.remove(); 
  }); 
}

โ€‹

In this example, when a delete button gets clicked, the function runs. Inside the function, "this" refers to the delete button that was clicked. `this.parentNode` is the parent element of the delete button, which would be the item in the list. The `.remove()` method gets rid of the item from the DOM.

Now, let's talk about how this works in jQuery, a JavaScript library that is bundled with Webflow and makes DOM traversal a lot simpler. With jQuery, "this" works the same way. Here's how you'd write the previous example using jQuery:

โ€‹

$('.delete-button').click(function() {
  $(this).parent().remove();
});

โ€‹

In this jQuery example, `$(this).parent()` selects the parent of the delete button that was clicked, and `.remove()` gets rid of it from the DOM.

"this" is a really powerful tool in JavaScript that makes traversing the DOM a whole lot easier. It lets you refer to the element that triggered an event, and from there, you can move to other elements nearby.

Go try to use "this" in one of your Webflow projects and let us know how it goes!

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