πŸ“£ Community Library!


​

πŸ‘‹

Do you know Jack over at Webflail? Jack helped us a lot in getting Slater off the ground. In those early days, he repeatedly emphasized the need for a community library. Well, today (finally!), we are announcing a community library! Shout out to Jack! :) With the launch, we have included JavaScript snippets from Corey Moen, Digipop, Jeff McAvoy, and yours truly.

You can watch a demo of the community library here.

video preview​

​

Or you can check it out yourself: https://slater.app/community_library.

Do you have useful scripts? Add them to your personal library and send us an email. We'd love to include them.

​

Javascript 101: rrrrregex

Regex or Regular expression is a powerful tool that allows you to search, validate, and manipulate text based on patterns. Regex is widely used in various programming languages and is particularly useful for tasks like form validation. (Before AI, using Regex was an absolute nightmare but with AI assistance, 😍.) In this 101, let's focus on using regex to validate a user's email address.

Need to validate phone numbers, websites or LinkedIn Urls? Check out the Community Library.

What are Regular Expressions? A regular expression is a sequence of characters that defines a search pattern. This pattern can be used to match, locate, or manage text. Regex is language-agnostic, meaning you can use similar patterns in JavaScript or most other languages.

Let's examine a JavaScript function (also found in the community library) that uses regex to validate email addresses:

function validEmail(email) {
  const re =
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

  return re.test(email);
}

Want to know what the Regex does? I'll translate a bit to get a sense of how Regex works but we won't be exhaustive:

  1. ^: Asserts the start of the string.
  2. ([^<>()[\]\.,;:\s@quot;]+(\.[^<>()[\]\.,;:\s@quot;]+)*): Matches the username part of the email.
  3. |: Or operator.
  4. The username can also be: quot;.+quot;: Anything inside double quotes (for emails with spaces or special chars).
  5. ...

🀯 Had enough? Use Slater AI to write your Regex.

Here's how you might use this in a web form:

function validEmail(email) {
  const re =
    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

  return re.test(email);
}

$("#email-el").on("blur", function () {
  let email = $(this).val()

  if (!validEmail(email)) {
    // This email is invalid. Throw an error.
  }
})

If you add this to a form, you can run the following tests email and see how the regex responds:

  1. ​user@example.com βœ…
  2. invalid-email ❌
  3. ​first.last@subdomain.example.co.uk βœ…
  4. "space allowed"@example.com βœ…
  5. missing@tld ❌

Regex is great for validating user input but it can do so much more. Maybe we can dig into another use case in a future 101.

Want to test your regex, check out a playground like https://regexr.com.

Keep exploring regex! It's a skill that will serve you well in the Webflow world.

​

Your projects, supported by Slater

The Rive Guy is always creating cool Rive animations with Slater. Go check him out on Twitter and use one of his community library scripts.

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