Wipeout!


πŸ‘‹,

​

​

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 code in production will be a setting that you can toggle on and off.
  • Better support for Single Script pages
  • Faster production script creation in regions outside of the US
  • Support for Webflow localization

How can we make Slater better for you? Reply to this email or join our Slack.


Javascript 101: Fetching Data with an API

This week, we've been working with several APIs. Using an API is magical! To give you a taste of this magic, we're going to use Javascript's fetch to perform a GET and POST request to an external API.

Let's use the JSONPlaceholder API, which is a free fake API for testing and prototyping.

Fetching Data from an Open API

// Fetch all posts
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(posts => {
    // Process the posts data
    console.log(posts);
  })
  .catch(error => console.error(error));


// Fetch a specific post
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(post => {
    // Process the post data
    console.log(post);
  })
  .catch(error => console.error(error));

​

Sending Data to an Open API

const newPost = {
  title: 'New Post',
  body: 'This is a new post created from the Fetch API',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newPost)
})
  .then(response => response.json())
  .then(post => {
    // Process the new post data
    console.log(post);
  })
  .catch(error => console.error(error));

Here's a breakdown of what's happening:

  1. fetch('https://jsonplaceholder.typicode.com/posts') fetches all posts from the API.
  2. fetch('https://jsonplaceholder.typicode.com/posts/1') fetches a specific post with the ID of 1.
  3. We create a new post object newPost with a title, body, and user ID.
  4. fetch('https://jsonplaceholder.typicode.com/posts', { ... }) sends a POST request to the API with the newPost object in the request body.

Note that JSONPlaceholder is a fake API, so while you can send POST requests, it won't actually create new resources on the server. However, it's a great resource for testing and learning purposes.

Open up the console in your browser and paste in the code to see it work. Like magic, you will get and post data to JSONPlaceholder. Getting data from a commercial API may take a little more work but it isn't that much different from what we do in this Javascript 101.

Let us know what APIs you want to use! 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!

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