πŸ‘€ Github?


​

​

Do you use GitHub? As the industry-standard platform for code management, it allows you to save snapshots of your code or even automate code deployments to external systems.

This week, we quietly rolled out a new GitHub integration, now available to all our paid users! With this feature, you can seamlessly manage code and enhance your workflows directly within our platform.

Watch the video to learn how to set up GitHub in Slater.

video preview​

h/t Jason Roach & Pierre Lovenfosse​

​Join our Slack if you want to help guide Slater's roadmap​

​

​

Javascript 101: Using an API

One of the best things about the web is its ability to connect with other websites. Let’s take some time to explore how that works! I found a free API we can use to get real-time weather updates for our location. With that we can build an interactive weather element that can add a personal touch to your website.

Step 1: Get Your Weatherbit API Key

  1. Sign up for an account on Weatherbit.io.
  2. Go to your API dashboard and copy your API key.

Step 2: Set Up the HTML Structure

Let's add a weather element to your footer. In Webflow, add `data-selector="weather"` to a footer element. We'll use it to populate the weather response.

Step 3: Write JavaScript to Fetch Weather Data

In Slater, write a JavaScript function to call the Weatherbit API and fetch weather data based on your city.

  1. Function to Fetch Weather Data: Use fetch() to make an API request to the Weatherbit API.

async function getCurrentWeather(city) {
const apiKey = 'YOUR_API_KEY'; // Replace with your Weatherbit API key
const baseUrl = `https://api.weatherbit.io/v2.0/current`;

try {
// Add the units parameter to get temperature in Fahrenheit or Celsuis
const response = await fetch(`${baseUrl}?city=${city}&key=${apiKey}&units=I`);
if (!response.ok) {
throw new Error(`Error: ${response.status} ${response.statusText}`);
}

const data = await response.json();
return data.data[0];
} catch (error) {
console.error("Error fetching weather data:", error);
}
}

​

2. Display the Weather Data: Extract and display the weather type, temperature, and icon.

async function displayWeather() {
const city = "Atlanta, Georgia"; // Add your city
const weatherContainer = document.querySelector(`[
data-selector="weather"]`);
​
const weatherData = await getCurrentWeather(city);

if (weatherData) {
const temperature = weatherData.temp;
const weatherType = weatherData.weather.description;
const iconCode = weatherData.weather.icon;
const iconUrl = `https://www.weatherbit.io/static/img/icons/${iconCode}.png`;

weatherContainer.innerHTML = `
<img src="${iconUrl}" alt="${weatherType}" />
<p>${weatherType} and ${temperature}Β°F in ${city}</p>
`;
} else {
weatherContainer.innerHTML = "<p>Could not fetch weather data. Please try again.</p>";
}
}

You can update the html to customize how the temperature is displayed. Want to see the code on a site? Scroll to the bottom of https://boldo.webflow.io.

To recap, we have two functions that do the following:

  • API Request: The getCurrentWeather(city) function makes a GET request to the Weatherbit API, specifying the city name and units in Fahrenheit.
  • Display Function: The displayWeather() function is triggered when the button is clicked. It checks if the user has entered a city name, fetches the weather data, and then displays it on the page.

If you add weather to the bottom of your website, let us know on Twitter.

​

​

Your projects, supported by Slater

πŸ‘€ Edgar Allan's own Witt and Felix built wick.io.

​

πŸ€™ 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!

πŸ‘‹, In August, we launched a novel approach to a marketing site with ask.edgarallan.com. Since then, we've been focused on determining whether we built a winner or a loser by refining our data analytics capabilities. So far, the results look promising: check out this update. Alongside ask.ea, we’re also enhancing our data analytics for Slater.app. What does that mean? Over the next several months, we’ll be rolling out updates based on your feedback and user data. Stay tunedβ€”we’ll share our...

We’re taking a break from our usual JavaScript content to share some exciting news: Edgar Allan has released a new book, How to Grow & Scale Your Business With Webflow. Created in collaboration with Webflow, this book is a must-read for anyone building a business with Webflow. Filled with insights from 3x Agency of the Year winner Edgar Allan, it’s a playbook for individuals, pro-lancers, and small agencies growing alongside the revolutionary site-building platform. For our Slater users, we...

Slater now has 7389 users. 2060 of you haven't created a file yet. 😱 These numbers got us thinking – we want to make Slater easier and more helpful to all #nocode developers.We’d love to hear from you: Did you find it challenging to get started with Slater? Are there specific areas where you could use more guidance? Do you use JavaScript often in your Webflow projects? Or is Slater your first time exploring custom code? What would help you feel more confident writing JavaScript in Slater? Are...