Creating a simple weather app with Open Weather API

How do you get the weather? You could use an app or create your own. First, you need a way to get weather data. You can use an Application Programming Interface to get the data that you need.

Creating a simple weather app with Open Weather API

Where can you find APIs to use in your projects? Try ProgrammableWeb. It is an API directory that lets you find the right API for your project. I found a weather API called Open Weather. Open Weather allows you to get the current weather data, hourly or daily forecast and more.

With Open Weather, I created a simple weather app. It gets the current temperature, daily forecast (highs and lows) and weather conditions. Then, it tells you if the weather was right for riding a bike.

Getting Started

Before writing any code, I looked at Open Weather’s documentation. It explains how to use their API. They include examples using different programming languages like JavaScript. These examples are helpful were helpful to learn what I could do with the API.

On their examples’ page, I found Weather.js. Weather.js fetches data from Open Weather for you. It makes it easy to get weather information from Open Weather.

Building the App

Before building the app, I researched other weather apps to get an idea of what I wanted mine to look like. Then, I sketched out an idea on paper.

I chose to use HTML, CSS and JavaScript. Since I am familiar with Bootstrap, I used it as well. I built my prototype with Bootstrap’s starter template. Then, I wrote my own JavaScript file to fetch data from Open Weather using Weather.js.

Open Weather has weather icons. Weather.js doesn’t use those icons. I looked at the JavaScript and wrote code to get the icons.


Weather.Current.prototype.icon = function () {
  return this.data.list[0].weather[0].icon;
}

Now, my app shows the current and forecast temperatures, weather icon and conditions.

Bike Weather App Screenshot

What to do differently

Open Weather returns weather information for a specific location. Instead of hardcoding the location, I would use the location of the browser. Right now, I used Bootstrap for the UI. I would use a different tool for handling layout like FlexBox or CSS Grid.

Visual Studio Code Tips

Every programmer has their favorite code editor. Your favorite editor may change as you hear about new ones. My new favorite is Visual Studio Code. Visual Studio Code is a code editor for Windows, Linux and Mac OS from Microsoft.

Visual Studio Code Tips
Photo by Sarah Pflug from Burst

With VS Code, I can open Markdown files for editing. Or write code for many programming languages like PHP, JavaScript or C#. A good code editor lets you customize it.

Customize VS Code

How do you make it work for you? The simplest way is to change the theme. Themes change the look and feel of the editor. VS Code lets you select themes from the marketplace or write your own.

When you first install Visual Studio Code, it won’t do everything that you need it to do. Extensions help you to get the features and functionality that you need. You can also use settings and customizations inside VS Code to make it support the way you work.

Visual Studio Code Tips and Tricks

When you are first getting started with VS Code, visit Visual Studio Code Tips and Tricks. This guide helps you to be productive and start using it quickly.

What else can Visual Studio Code do?

It can be challenging to know everything that VS Code can do. You can find out more by checking out VS Code Can Do That?! You’ll find a list of things that it can do. Like Prettier, Node.js Debugging, JSON Intellisense or search user settings.

Planning a project with your team

Project planning is hard. When you need to plan a project, don’t do it alone. Ask your team to help you plan the project. By including them, you get buy in and a better plan.

Planning a project with your team
Photo by Sarah Pflug from Burst

1. Plan with your team

Schedule a time to meet with your team. Explain the project and work out how to get it done. By working with your team, you get your team interested in the project and avoid having to rework your plan.

2. Get everyone involved

Ask questions. Each person has different experience and insights into how to approach the project. Make them feel like they are part of the process.

3. Work with your team to define the tasks

Have them help you define all tasks needed to complete the project. When you have all the tasks figured out, ask them for estimates. They should be able to give you realistic estimates not guesses.

Projects get completed by teams. Start by planning with your team. Get them involved by asking questions and finding out what tasks are needed. By working with your team at the beginning, you can create buy in and enthusiasm for the project.

Need more project management tips? Check out 10 Practical Project Management Tips.

Why use HTML and CSS over JavaScript?

When you build for the web, you have to make many different choices. What am I going to build? What tools are I going to use? The number of tools, frameworks and libraries available can be overwhelming.

Why use HTML and CSS Over JavaScript
Photo by Nicole De Khors from Burst

JavaScript is no exception. You have a wide variety of JavaScript frameworks or libraries to choice from. Should you use these technologies for every project? HTML and CSS can now do many things that you once needed JavaScript to do.

What is the Lean Web?

The Lean Web is a set of simple web development principles. Best practices for building the web with HTML, CSS and JavaScript. Chris Ferdinandi who wrote the Lean Web encourages you to embrace the web as a platform. To let the browser to do what it does best.

Chris gave a talk on Lean Web at WordCamp LA 2020.


The Three Lean Web Principles

Principle 1. Embrace the Platform
Use HTML over JS, CSS over JS and use the browser for what it is good at. Does that mean you shouldn’t use new tools and technologies? No. You need to decide when you should use them and why.

Principle 2. Small & Modular
Look for small, focused tools that do one thing really well. Use APIs, native browser methods or alternative tools lie Svelte or Preact. Use utility-first CSS to prevent redundancy in your stylesheets.

Principle 3. The Web is for Everyone
Not all browsers support native features. You can use a polyfill to replicate the feature. As developers, we make choices that can break the web for some people. Chris suggest using the A11Y Project to make sure that everyone who wants to use your web applications can.

Summary

You don’t want to avoid using new tools, frameworks and techniques in favor of old ways of doing things. When you are building any project, you have to make choices on what to use. Sometimes, HTML and CSS is the better choice.

Write Better Documentation for Your Code

Do you write documentation? Most developers love to write code. They write code that solves problems. It helps people to get something done. If they write documentation, it is quickly written. A task to be completed so you can get back to writing code.

Write Better Documentation For Your Code
Image by Christine Sponchia from Pixabay

How do you choose a new framework? You look at the features to see if it does what you want. Then, you read the documentation. If it is hard to read or non-existent, you’ll get frustrated and choose a different solution.

If you want people to use your code, you need to write great content.

How do you write better documentation?

  • Decide who you are writing it for
  • Decide what you are going to include
  • Make it easy to use
  • Keep it up to date
  • Read great documentation

Decide who you are writing for

You need to know your audience. Are they developers, clients or customers? Developers want to know how to use your code. Or what can they do with it. Your clients may want step by step instructions on how to use it.

What are you going to include

Decide on what you want them to know. Create a list of questions or items that you need to cover. A technical audience may want to read tutorials, how-to-guides and/or references. Beginners learn better with simple step by step instructions. For everyone, you may want to include videos as well.

Make it easy to use

No matter what you are writing, decide how you are going to organize it. If you are writing a tutorial, you may want to start by explaining what you are planning to talk about. Use formatting styles like headings, bulleted or numbered lists and bold or italics. Formatting styles help guide the reader through your documents.

Keep it up to date

Developers make improvements and changes to their code. When they do, the documentation needs to change as well. Plan time to update it. Apps and other projects fail because the content isn’t kept up to date.

Read great documentation

You can learn how to write better by reading. These style guides show you how to write great developer content.

More Resources