​

​

​

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 state machine inputs by input name. This script comes in from @jeffamcavoy who is launching a Rive Animation course. Check it out if you want to add more movement to your Webflow project.

​https://slater.app/community_library/rive-input-create-variable-by-name-f49bb354-7684-4dc9-8b9a-68860ce31b41​

From jeffamcavoy​

​

📜 Smooth scrolling setup using Lenis library with scroll event logging. @SarkisBuniatyan posted a simple way to add Lenis to your Webflow project. The only faster way--one that gives you full control--is to grab this script and add it to your active Slater project.

​https://slater.app/community_library/lenis-smooth-scrolling-352b7c92-921d-44e8-a051-c462dd64043d​

From Jared Malan​​

​

Javascript 101: Javascript Math

Let's build off of the random dynamic loading script highlighted at the beginning of this email. To create that experience, we needed to generate a random number. Luckily this is fairly trivial because of Javascript's built-in math capabilities. Some of the Math functions are super useful (e.g. random numbers, rounding) for even the most basic Javascript developers. Others will only be used by the most seasoned.

Basic Arithmetic

You can use the standard arithmetic operators for basic calculations:

let a = 5;
let b = 2;
​
console.log(a + b); // Addition: 7
console.log(a - b); // Subtraction: 3
console.log(a * b); // Multiplication: 10
console.log(a / b); // Division: 2.5
console.log(a % b); // Modulus (remainder): 1
console.log(a ** b); // Exponentiation: 25

Math Object

The Math object provides several properties and methods for mathematical constants and functions.

Constants

• Math.PI: Returns the value of π (3.14159...)
• Math.E: Returns the value of Euler's number (e)

console.log(Math.PI); // 3.141592653589793
console.log(Math.E); // 2.718281828459045

Rounding Functions

• Math.round(): Rounds to the nearest integer
• Math.ceil(): Rounds up to the next largest integer
• Math.floor(): Rounds down to the next smallest integer
• Math.trunc(): Truncates the decimal part

let num = 5.7;
​
console.log(Math.round(num)); // 6
console.log(Math.ceil(num)); // 6
console.log(Math.floor(num)); // 5
console.log(Math.trunc(num)); // 5

Random Numbers

• Math.random(): Returns a random number between 0 (inclusive) and 1 (exclusive)

console.log(Math.random()); // e.g., 0.4971539834831

To get a random number between a specified range:

functiongetRandomInt(min, max) {
returnMath.floor(Math.random() * (max - min + 1)) + min;
}
​
console.log(getRandomInt(1, 10)); // Random integer between 1 and 10

Absolute Value

• Math.abs(): Returns the absolute value of a number

console.log(Math.abs(-5)); // 5

Trigonometric Functions

• Math.sin(), Math.cos(), Math.tan(): Sine, cosine, and tangent functions (arguments in radians)
• Math.asin(), Math.acos(), Math.atan(): Inverse trigonometric functions

console.log(Math.sin(Math.PI / 2)); // 1
console.log(Math.cos(0)); // 1
console.log(Math.tan(Math.PI / 4)); // 1

Other Useful Functions

• Math.sqrt(): Square root
• Math.pow(): Power
• Math.exp(): Exponential function (e^x)
• Math.log(): Natural logarithm (base e)
• Math.max(), Math.min(): Maximum and minimum values from a list of numbers

console.log(Math.sqrt(25)); // 5
console.log(Math.pow(2, 3)); // 8
console.log(Math.exp(1)); // 2.718281828459045 (approximation of e)
console.log(Math.log(Math.E)); // 1
console.log(Math.max(1, 5, 3)); // 5
console.log(Math.min(1, 5, 3)); // 1

This should give you a good starting point for working with math in JavaScript! If you have any specific questions or need more details, feel free to ask.

​

Your projects, supported by Slater

Let's hear it for @jeffamcavoy again!

Jeff McAvoy | The Rive Guy @jeffamcavoy 😱😱😱 With @splinetool's variables feature, I assumed they'd be updateable at runtime but I didn't think I'd be able to figure it out. Thanks to @Slater_App, I did! Type in the input field to display your message in 3D! https://creative-jam.webflow.io/spline-variable-update 3:50 PM • Oct 9, 2023 4 Retweets 64 Likes Read 9 replies

​

​

Also thanks for including us in this AI tools rundown ​heyanirudhgoel​! Check out the other tools to supercharge your workflow.

Anirudh Goel @heyanirudhgoel @relume_io 2.) https://slater.app/ - Slater — a code editor that harnesses the power of AI so you can take your projects to the next level. @Slater_App Anirudh Goel @heyanirudhgoel 1.) https://www.relume.io/ - Describe the company in sentence or two and get the full wire frame @relume_io 12:55 AM • Jul 10, 2024 0 Retweets 2 Likes Read 1 replies

​

​

​

Happy coding!

🤙 the Slater Team

​

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