Welcome To Slater!

Slater > Codesandbox

Published 16 days ago • 1 min read


Before Slater, we at Edgar Allan used Codesandbox. It's a incredible tool. Full stop.

We invested in building Slater because the Codesandbox solution was a hack and we didn't feel comfortable shipping our clients' websites with a Codesandbox script. This week Codesandbox updated their pricing and broke a lot of Webflow projects. :(

If this is you, crack open Slater again. If this is someone you know, forward this email to them.

👷🏻‍♂️ Product Updates

We're adding polish to the new UI--a lot of small updates to add more sparkle. We're overhauling the Webflow Designer App. And we're back at the Community Library.

JavaScript 101: The DOM and DOM Traversal

Today, we’re going to learn about DOM traversal. But before we dive into that, let’s first understand what the DOM is.

DOM stands for Document Object Model. It’s a way of representing a webpage in a structured hierarchical way. So, if you imagine a webpage as a tree, the DOM is the blueprint that shows all the branches and leaves of that tree. Each branch or leaf is called a “node”.

DOM traversal is the process of moving from one node to another in this tree-like structure. For example, you might want to find a specific paragraph (node) in your webpage (DOM), or you may want to change the color of all the headings (nodes) in a certain section (branch of the DOM).

Now, you can do DOM traversal using either raw JavaScript or jQuery. We include jQuery because it is already a dependency of Webflow and it makes writing Javascript easier.

  1. JavaScript:

JavaScript is the basic language that all web browsers understand. When you’re doing DOM traversal with JavaScript, you have to use specific methods like ‘getElementById’, ‘getElementsByClassName’, ‘getElementsByTagName’, etc.

For example, if you want to select an element with the id “myDiv”, you would write:

```var element = document.getElementById(“myDiv”);```

2. jQuery:

jQuery is a library built on top of JavaScript to simplify certain tasks, including DOM traversal. It provides easy-to-use methods like ‘.parent()’, ‘.children()’, ‘.siblings()’, etc.

To select the same element with jQuery, you would write:

```var element = $(“#myDiv”);```

One major difference between raw JavaScript and jQuery is that jQuery is generally shorter and easier to write. However, raw JavaScript doesn’t require any external libraries, so it may load faster on a webpage.

DOM traversal is a key part of web development, allowing you to select, manipulate, and change elements on a webpage. Go to Slater and try selecting nodes and traversing the DOM.

Happy coding!

🤙 The Slater team

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

113 Cherry St #92768, Seattle, WA 98104-2205
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!

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...

3 days ago • 2 min read

Let's cover two topics in this email: Announcing the New Slater experience Javascript 101: Loading JavaScript and Understanding Document Ready Events New Slater We will be releasing a major update to Slater in the next few days. Paid users have been using the new Slater editor for the last month or so. Now, the rest of the app will get a similar UI refresh and all users will get access to this new experience. Along with the UI refresh, we will be releasing Documentation and an improved...

about 1 month ago • 2 min read

Let’s do three things in this email: Welcome new users Provide you a sneak peak of Slater Documentation Teach you some Javascript basics. Welcome new users! 🥳 Documentation We’ve finished development on Slater Documentation and will be sharing it once we complete some improvements in other parts of Slater Documentation lets you document your code with Slater AI. Slater Documentation should help you as the person who wrote the code but we’re adding it for two big, separate...

about 1 month ago • 1 min read
Share this post