👋,

​

​

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​

​