Flight Tracking with aviationstack Real-Time Flight Tracking API

By scotchsponsored

aviationstack is a suite of API used in tracking flight data. This is useful for individuals who are interested in building a flight booking or tracking system.

Features

  • It’s free to get started, so you can evaluate if this is suitable for your needs.
  • Very efficient and easy to use API.
  • Built by apilayer, so you know you’re in safe hands.

Using aviationstack

After creating a free account over at their website, make sure to get your API key as this is needed to make requests to the API.

The base endpoint for all requests is:


https://api.aviationstack.com/v1/?access_key=MY_KEY

Note: you should replace MY_KEY with the API key you get from the site.

Every future request has an endpoint associated with that endpoint.

  • /flights lists all realtime flight.
  • /h

Source:: scotch.io

Create a CSS/JS Countdown Timer

By Chris on Code

I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto advancing a user to the next episode. It was a button with a countdown.

I thought “Can we make that in CSS?!” Let’s go ahead and make it!

What We’ll Build

Here is our countdown timer. You can use this for a number of things. Advancing a user through your UI is the main idea here.

Final CodePen: https://codepen.io/chrisoncode/pen/JjdPyer?editors=1000

The Technique

We’ll be letting CSS handle the animations since CSS animations are far more performant in browsers than letting JavaScript handle the animation. The steps for creating our countdown timer look like:

  1. Create a stack of numbers
  2. Create a JavaScript interval for every second
  3. Move the stack

Source:: scotch.io

Recreate the Spotify Album Page with Tailwind CSS

By Chris on Code

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a “utility-first CSS framework” that I initially wasn’t sure about. Our HTML gets pretty busy when using Tailwind, but I’ve found it’s not that bad of a tradeoff.

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

Let’s recreate something with Tailwind so that we can practice.

What We’ll Build

I’ve found some things around the web to rebuild with Tailwind. For this article, we’ll build Spotify’s album page UI.

We tried building this on a Twitch stream.

Source:: scotch.io

Recreate Google.com with Tailwind CSS

By Chris on Code

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a “utility-first CSS framework” that I initially wasn’t sure about. Our HTML gets pretty busy when using Tailwind, but I’ve found it’s not that bad of a tradeoff.

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

Let’s recreate something with Tailwind so that we can practice.

What We’ll Build

I’ve found some things around the web to rebuild with Tailwind. For this article, we’ll build Google’s home page at google.com. Let’s get started!

We tried bui

Source:: scotch.io