DEV Community: Edvinas Pranka

[App/OpenSource] Find the best runway for takeoff or land

Edvinas Pranka — Fri, 23 Jul 2021 13:38:39 +0000

Hi developers! 😍

Just released a new open source project based on my previous project:
https://dev.to/epranka/app-airportdb-api-service-c7j

The new project lets pilots to easily find the best runway for takeoff or land based on wind data.

Runway calculator app: runway.airportdb.io

📖 The source code: epranka/runway-app

About

On the main page of the application, enter the airport ICAO code from that you want to take off or land.

After entering the airport ICAO you will be redirected to the result page.

In the first part of the result page, you will see the airport name, last METAR update date, METAR data itself, and wind direction.

A little below is the main information: runway suggestions. All runways are sorted by two properties. In the first place, you will get all runways that have headwind, in the second crosswind, and the last tailwinds. Every group of runways is also sorted by cross-wind in ascending order. So the first runway in the list should be the best option because it should be with a headwind (if exist) and with a minimal crosswind.

And the last part of the page shows the minimal airport runways map. Green arrows show the headwind runways and the yellow arrows - crosswind runways. Also in the background, you will see light blue arrows which represent wind direction.

Any feedback or suggestions are appreciated! 😊

[App] AirportDB API Service

Edvinas Pranka — Mon, 19 Jul 2021 07:32:30 +0000

Hi developers! 😍

Recently I released the new airport database service! 🎉🎉

👉 Check it out here: airportdb.io

It contains about 60k airports data in JSON format, with runways, frequencies, navaids and countries information.

That replaces the GitHub airport-db about I write a time ago.

Maybe you will be interested to create some app that uses this API.

API is free! ❤️

If you create something I would be love to feature your project on airportdb.io page.

Now the API have only one endpoint to get airport by its ICAO code. But If you need some additional endpoints, let me know. Or maybe you want to join contribute this project too? 🤔

📖 You can read more about it: airportdb.io

Any feedback or suggestions are appreciated! 😊

The simple and useful trick for Google Maps!

Edvinas Pranka — Thu, 07 May 2020 16:13:52 +0000

Hi developers! 😍

Recently I found one simple but very useful trick in the Google maps. I hope it will be useful for you too. 😉

You can add the google maps direction link without using any Google API. Just putting the simple URL. And this method is completely free. 🎉

https://google.com/maps?daddr=<put your destination>

For example this is a direction to the New York City

In HTML it looks like this:

<a href="https://www.google.com/maps?daddr=new york city">
    Direction to the New York City
</a>

Are you know the other interesting tricks for Google Maps? Share it in the comments below. 👇

⭐ Follow on Twitter
⭐ Check my GitHub
⭐ Let's connected on LinkedIn

Feedback and questions are very appreciated! ❤️

Make it fullscreen!

Edvinas Pranka — Wed, 29 Apr 2020 15:06:02 +0000

Hello everyone! ✋

The new app again! 🎉

Today I present the web app that helps you to create a fullscreen background of any color or image. You can use it to create the background or cover on a computer screen, projector, or any multimedia device. You can even make the green screen of your multimedia 🎥

👉 Check it out here: f11.now.sh

In the F11 app you have the three options:

Select the image by putting their URL
Select the custom color using the color picker
Select the color of presets

When you select your option which you like, the background comes to the screen. To toggle fullscreen mode press the F11 on your keyboard. To hide the instructions box, just click on it. To go back, press ESC on your keyboard or move the mouse to the right top corner of your screen.

I hope you will find it useful for you 😊

📃 Source code on my GitHub repository epranka/f11-app

Have ideas on how to improve it? Feel free to share it on the GitHub Issues 😏

⭐ Follow on Twitter
⭐ Star on GitHub
⭐ Let's connected on LinkedIn

Feedback and questions are very appreciated! ❤️

GitHub based airports API service

Edvinas Pranka — Tue, 21 Apr 2020 08:08:07 +0000

Hello developers and enthusiasts! 😍

Recently I created the API service directly in GitHub. Maybe it was interesting to you, or give you some amazing idea.

👉 Check it out here: epranka/airports-db

This is a JSON database of airports which contains about 56k airports with their runways, communication frequencies, navaids, countries, and regions information. The database is not 100% accurate because can have older data, so do not use it for a real flight or very sensitive applications. But it works well to get basic information about the airport.

The API service has one endpoint to get the airport information by its ICAO code.

You can request data by the following URL:

👉 https://raw.githubusercontent.com/epranka/airports-db/master/icao/<enter your ICAO>.json

For example, to get information about the John F Kennedy International Airport:

https://raw.githubusercontent.com/epranka/airports-db/master/icao/KJFK.json

How it works? 🤔

The main idea of this API is that every airport has its own JSON file placed in icao directory. And when you request the airport info by its ICAO code, you simply request the airport JSON file in the repository directory. So now it has about 56k airport files. Please don't tell the GitHub administrators about that 😁

⭐ Follow on Twitter
⭐ Star on GitHub
⭐ Let's connected on LinkedIn

Have ideas on how to improve it? Feel free to share it on the GitHub Issues.

If you have any questions, feel free to ask in the comments below or contact me directly. Any feedback is appreciated 😊

The example response of KJFK airport:

{
  "id": "3622",
  "ident": "KJFK",
  "type": "large_airport",
  "name": "John F Kennedy International Airport",
  "latitude_deg": "40.63980103",
  "longitude_deg": "-73.77890015",
  "elevation_ft": "13",
  "continent": "NA",
  "iso_country": "US",
  "iso_region": "US-NY",
  "municipality": "New York",
  "scheduled_service": "yes",
  "gps_code": "KJFK",
  "iata_code": "JFK",
  "local_code": "JFK",
  "home_link": "http://www.panynj.gov/CommutingTravel/airports/html/kennedy.html",
  "wikipedia_link": "https://en.wikipedia.org/wiki/John_F._Kennedy_International_Airport",
  "keywords": "Manhattan, New York City, NYC, Idlewild",
  "runways": [
    {
      "id": "244968",
      "airport_ref": "3622",
      "airport_ident": "KJFK",
      "length_ft": "12079",
      "width_ft": "200",
      "surface": "Concrete - Grooved",
      "lighted": "1",
      "closed": "0",
      "le_ident": "04L",
      "le_latitude_deg": "40.622",
      "le_longitude_deg": "-73.7856",
      "le_elevation_ft": "12",
      "le_heading_degT": "31",
      "le_displaced_threshold_ft": "",
      "he_ident": "22R",
      "he_latitude_deg": "40.6488",
      "he_longitude_deg": "-73.7647",
      "he_elevation_ft": "13",
      "he_heading_degT": "211",
      "he_displaced_threshold_ft": "2696"
 ...

Empty App - The simple HTML sandbox in your Developer tools

Edvinas Pranka — Wed, 15 Apr 2020 15:00:36 +0000

Hello developers! ✋

Today I present my recently created simple project which I called Empty App. It’s practically nothing but an empty <body /> tag in your browser 😳

The reason ? 🤔

I created the empty "website" because I needed the simplest HTML sandbox in a real browser without any <iframe /> which are usually used by CodePen or other sandbox apps. It helps me to fastly developer or test the simplest HTML and CSS structures directly in the browser using the default Developer Tools.

App ? 🤔🤔

Yeah. I called the empty <body /> tag - App. It is not a full-featured app like CodePen, but it has a very simple and very useful feature: DOM state save.
When you change the DOM, everything in the <body /> tag will be kept on page refresh. So you can close the browser and continue your work later 🍒

Check it out there: https://emptyapp.now.sh 😎

The simple example 🔨

Let's open the Empty App by the link above.

Firstly we see the default message. It's a simple usage guide.

Now open the Developer Tools by clicking the F12 key and go to Console tab.

To clear the screen, enter the command app.clear()

Go to the Inspector tab. There we see the empty <body /> tag

Let's do something cool! 😍

Add the Roboto font:

Add the simple image and title

Style it!

And got the result!

Try to refresh the page. Your work will be kept.
To reset the page (show default message), use the following command in the console: app.reset()

Thanks for your time. Happy coding! I hope you will find it useful as well 👍

You can check the full source code in my GitHub repository epranka/empty-app

If you have ideas on how to improve it (new features, bugs and etc...) feel free to share it on the GitHub Issues.

Follow on Twitter, GitHub, and let’s connect on LinkedIn

Feedback and questions are very appreciated.

Top of descent calculator

Edvinas Pranka — Tue, 07 Apr 2020 13:05:02 +0000

In my free time, I often flying with the X Plane 11 simulator and recently I thought to create the Top of descent (TOD) calculator, to calculate descent path. TOD is the point when the aircraft should start to descent to approach or any other target altitude. The calculator which I created is not strictly accurate, because it just depends on aviation rules of thumb and simply trigonometry. But it is sufficient for the initial decision.

The calculator can be found on https://descent.now.sh

Here I shortly discuss how the calculator works.

TOD point is just a distance, how much nautical miles (or other units) take the descent procedure from altitude A to B.

The main parameters we should have are origin altitude, destination altitude, and glideslope:

By simple trigonometry formula, we can calculate the distance:

Usually, when aircraft descending, it not only decreases altitude but reduces speed too. By the rule of thumb, 1 nautical mile for a speed reduction of 10 knots is a good value to start with. So we include it to the distance calculation:

The same rule of thumb is used to add the wind impact on distance. 1 nautical mile for 10 knots of head or tailwind.

Now we know how much distance takes the aircraft descent. But we need to calculate how fast we should descent to maintain the glideslope profile. The descent speed is called vertical speed (feet per minute) and is calculated by the following formula:

The source code of the calculator can be found at my GitHub repository github.com/epranka/descent-app

If you have any questions, feel free to ask in the comments below or contact me directly.

Follow on Twitter, GitHub, and let’s connect on LinkedIn

Clear the 301/302 redirection cache (Chrome)

Edvinas Pranka — Tue, 24 Mar 2020 08:31:40 +0000

I think many web developers and server administrators had been facing the 301 redirection cache. I had facing it very often until I learn the lesson...
I hope it helps you and you learn something from me, not from your mistakes 💥

👉 For example, when you configure the SSL certificate and make the 301 redirection from HTTP to HTTPS, but something goes wrong, you don't have the ability to enter the HTTP version again. Browser caches the 301 redirection and redirects you to HTTPS.

👉 The second example is when you changing the website domain. If you redirect from the old domain to the new domain with the 301 redirection, browser caches it too, and prevent's you to enter the old domain.

👌 How to avoid that? Use the 302 redirection as long as everything works as it should. Then, and ONLY then, change the 302 redirection 301. Why? ❓

📚 The definition of 301 and 302 redirections:

301 - means that the resource (page) is moved permanently to a new location. The client/browser should not attempt to request the original location but use the new location from now on.

302 - means that the resource is temporarily located somewhere else, and the client/browser should continue requesting the original URL.

The 301 is a permanent redirection. Even if you remove the redirection from the server, your browser continuously redirects the resources to the new domain or HTTPS, because of the hard cache.

So the 302 is not hard cached by the browser and you have the ability to access the old version if you remove the redirection from your server (website).

💀 How really dangerous is the 301 in production? It is very simple. If something goes wrong and you release the 301 redirection to the production, your client's browsers permanently cache this redirection and you will have to tell all the clients to clear the browser cache. This is a 💩

🤔 Okay, what I can do if my browser caches the 301 redirection? Every website developer know the Chrome Developer tools (F12) and a Right-Click on the Refresh button

😟 But I can tell you that is not enough. Suppose you badly redirected the old domain to the new domain with the 301 redirection and you want to clear the domain cache. You must do it on the old domain because the old domain is redirecting. But you can't access it... The only thing to do is to clear the whole browser cache and even cookies, but no one wants to do it.

😎 There is a trick on how you can access the old domain (or any redirecting URL).

Before going to the website open the Chrome Developer tools (F12).
Go to Network tab
Check the Preserve log checkbox
Clear the log

🚀 Now enter your old domain URL and navigate to it. Of course, it will be redirected to the new domain. But in your Network log, you will have the old domain redirection request and you will have the ability to clear the domain cache by clicking the request with Right-Click and select the Clear browser cache. After that, your 301 redirection will be removed. But please remember that you must remove the redirection from your server before.

In the screenshot above I redirecting the non-www to the www domain.

❤️ Thanks for reading this. I hope it was helpful to you. Feedback and questions are appreciated.

🙏 Follow on Twitter, GitHub, and let’s connect on LinkedIn

Bin2Dec converter

Edvinas Pranka — Sun, 23 Feb 2020 21:45:29 +0000

Today I present my simple project called Bin2Dec. The idea came from Florin Pop app ideas repository, which can be found there florinpop17/app-ideas.

How it works you can see in the animation below. Check the live version too on bin2dec.now.sh

I implemented it with the Create React App boilerplate. The full source code can be found on my repository epranka/bin2dec.

The following function converts the binary string to a decimal number.

  const calculateDecimal = binaryString => {
    let decimalResult = 0;
    for (
      let i = 0, j = binaryString.length - 1;
      i < binaryString.length;
      i++, j--
    ) {
      const digit = parseInt(binaryString[i]);
      decimalResult += digit * Math.pow(2, j);
    }
    return decimalResult;
  };

Maybe you have the ideas on how to improve it?

Bonus

I created the inverted version of this converter too. It converts the decimal to binary. Check the source code on epranka/dec2bin and live version dec2bin.now.sh

Thanks for reading this. I hope it was interesting to you. Feedback and questions are appreciated.

Follow on Twitter, GitHub, and let’s connect on LinkedIn

Currency exchange web app in ~100 lines using the CRA (Create React App)

Edvinas Pranka — Mon, 17 Feb 2020 16:36:51 +0000

This tutorial describes how to create a simple currency exchange app in just about 100 lines of code using the Create React App boilerplate.

To see it in action check out this live demo.

🛠️ Preparation

First, create the react app. I call it "rates".

$ yarn create react-app rates

Run the command in your root

$ yarn start

Your web app will be available on http://localhost:3000

⚓ Fetching the currencies rate

For currency exchange data we will use free API on exchangeratesapi.io

We will load the latest data of the currencies rates.

Install the swr and unfetch libraries. It helps to easily fetch API.

$ yarn add swr unfetch

Create the fetcher function outside the App component

// src/App.js
import React from "react";
import "./App.css";
import fetch from "unfetch";

const API_URL = "https://api.exchangeratesapi.io";

const fetcher = async path => {
  const res = await fetch(API_URL + path);
  const json = await res.json();
  return json;
};

// function App...

Add useSWR in App component to fetch data

import React from "react";
import "./App.css";
import fetch from "unfetch";
import useSWR from "swr";

 // API_URL = ...

 // const fetcher = ...

 function App() {
  const { data: currencies } = useSWR("/latest?base=EUR", fetcher);

  return <div>Welcome to your Currency exchange app!</div>;
 }

Now we have the currencies rates in currencies.rates variable.

To see the JSON data of currencies rates you can open the API url directly into your browser: https://api.exchangeratesapi.io/latest?base=EUR

The ?base=EUR query is used to get all rates relative to EUR currency.

💄 Add the UI

For ui, we will use the material-ui design system. Install it:

$ yarn add @material-ui/core

Create the UI for our currency exchange app in the App component.

// ...
import {
  Container,
  Paper,
  Grid,
  TextField,
  Select,
  MenuItem
} from "@material-ui/core";

// ...

function App() {
  const { data: currencies } = useSWR("/latest?base=EUR", fetcher);

  if (!currencies) {
    return null;
  }

  return (
    <Container className="currency-exchange-container" fixed>
      <h1>Currency exchange</h1>
      <Paper
        className="currency-exchange-paper"
        variant="outlined"
        elavation={1}
      >
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField type="number" />
          </Grid>
          <Grid item xs={6}>
            <TextField type="number" />
          </Grid>
          <Grid item xs={6}>
            <Select>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
          <Grid item xs={6}>
            <Select>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

Now, look at the following code snippet. We create the currency selection box by iterating over all possible rates from our API data. Since we fetch rates relative to EUR, so we should manually add the EUR item, because it doesn't exist in rates object.

  <Select>
    <MenuItem value={"EUR"}>EUR</MenuItem>
    {Object.keys(currencies.rates).map((rate, key) => (
      <MenuItem key={key} value={rate}>
        {rate}
      </MenuItem>
    ))}
  </Select>

When the currencies are not loaded, we just return null, because of currencies rates is undefined at that moment.

  if (!currencies) {
    return null;
  }

Add some styles to App.css

h1 {
  font-weight: 300;
  color: #636363;
  margin-bottom: 3rem;
}

.currency-exchange-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.currency-exchange-paper {
  max-width: 350px;
  padding: 30px 30px 40px 30px;
}

.MuiInput-root {
  width: 100%;
}

⚙️ Add logic

Now we add the inputs state to our App component

function App() {
  const { data: currencies } = useSWR("/latest?base=EUR", fetcher);

  const [fromValue, setFromValue] = useState(1);
  const [toValue, setToValue] = useState(1);

  const [fromCurrency, setFromCurrency] = useState("EUR");
  const [toCurrency, setToCurrency] = useState("EUR");

  const handleFromCurrencyChange = e => {
    setFromCurrency(e.target.value);
  };

  const handleToCurrencyChange = e => {
    setToCurrency(e.target.value);
  };

  const handleFromValueChange = e => {
    setFromValue(parseFloat(e.target.value));
  };

  const handleToValueChange = e => {
    setToValue(parseFloat(e.target.value));
  };

  if (!currencies) {
    return null;
  }

  return (
    <Container className="currency-exchange-container" fixed>
      <h1>Currency exchange</h1>
      <Paper
        className="currency-exchange-paper"
        variant="outlined"
        elavation={1}
      >
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField
              type="number"
              value={fromValue}
              onChange={handleFromValueChange}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              type="number"
              value={toValue}
              onChange={handleToValueChange}
            />
          </Grid>
          <Grid item xs={6}>
            <Select value={fromCurrency} onChange={handleFromCurrencyChange}>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
          <Grid item xs={6}>
            <Select value={toCurrency} onChange={handleToCurrencyChange}>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

Also, add the two following functions for currency exchange

  const convertFromTo = () => {
    const fromRate =
      fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
    const valueInEur = fromValue / fromRate;
    const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
    setToValue(valueInEur * toRate);
  };

  const convertToFrom = () => {
    const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
    const valueInEur = toValue / toRate;
    const fromRate =
      fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
    setFromValue(valueInEur * fromRate);
  };

One function converts currencies forward, and other - backward. In both functions, firstly, we convert currencies to EUR, because all rates we fetched from API are relative to euros.

The last thing is to add the React hooks which run the rates exchange after the input change.

  useEffect(() => {
    convertFromTo();
  }, [fromValue, toCurrency]);

  useEffect(() => {
    convertToFrom();
  }, [toValue, fromCurrency]);

Here is a full App.js file

import React, { useState, useEffect } from "react";
import "./App.css";
import fetch from "unfetch";
import useSWR from "swr";
import {
  Container,
  Paper,
  Grid,
  TextField,
  Select,
  MenuItem
} from "@material-ui/core";

const API_URL = "https://api.exchangeratesapi.io";

const fetcher = async path => {
  const res = await fetch(API_URL + path);
  const json = await res.json();
  return json;
};

function App() {
  const { data: currencies } = useSWR("/latest?base=EUR", fetcher);

  const [fromValue, setFromValue] = useState(1);
  const [toValue, setToValue] = useState(1);

  const [fromCurrency, setFromCurrency] = useState("EUR");
  const [toCurrency, setToCurrency] = useState("EUR");

  const handleFromCurrencyChange = e => {
    setFromCurrency(e.target.value);
  };

  const handleToCurrencyChange = e => {
    setToCurrency(e.target.value);
  };

  const handleFromValueChange = e => {
    setFromValue(parseFloat(e.target.value));
  };

  const handleToValueChange = e => {
    setToValue(parseFloat(e.target.value));
  };

  const convertFromTo = () => {
    const fromRate =
      fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
    const valueInEur = fromValue / fromRate;
    const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
    setToValue(valueInEur * toRate);
  };

  const convertToFrom = () => {
    const toRate = toCurrency === "EUR" ? 1 : currencies.rates[toCurrency];
    const valueInEur = toValue / toRate;
    const fromRate =
      fromCurrency === "EUR" ? 1 : currencies.rates[fromCurrency];
    setFromValue(valueInEur * fromRate);
  };

  useEffect(() => {
    convertFromTo();
  }, [fromValue, toCurrency]);

  useEffect(() => {
    convertToFrom();
  }, [toValue, fromCurrency]);

  if (!currencies) {
    return null;
  }

  return (
    <Container className="currency-exchange-container" fixed>
      <h1>Currency exchange</h1>
      <Paper
        className="currency-exchange-paper"
        variant="outlined"
        elavation={1}
      >
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <TextField
              type="number"
              value={fromValue}
              onChange={handleFromValueChange}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              type="number"
              value={toValue}
              onChange={handleToValueChange}
            />
          </Grid>
          <Grid item xs={6}>
            <Select value={fromCurrency} onChange={handleFromCurrencyChange}>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
          <Grid item xs={6}>
            <Select value={toCurrency} onChange={handleToCurrencyChange}>
              <MenuItem value={"EUR"}>EUR</MenuItem>
              {Object.keys(currencies.rates).map((rate, key) => (
                <MenuItem key={key} value={rate}>
                  {rate}
                </MenuItem>
              ))}
            </Select>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
}

export default App;

✨ Finished!

Congratulations! You have done the currency exchange app using the CRA (Create React App).

The full source code you can find in my repository epranka/rates.

Live demo.

Thanks for reading this. I hope it was helpful to you. Feedback and questions are appreciated.

Follow on Twitter, GitHub, and let’s connect on LinkedIn

Let's connect on LinkedIn

Edvinas Pranka — Mon, 10 Feb 2020 09:21:55 +0000

Recently I created my LinkedIn profile 😎
And now, I want to connect to peoples from this awesome community, to start one more journey! 💫

Are you using LinkedIn? Let's connect on it too 👫

Post your LinkedIn profile below and maybe you find the interesting connections too 🙏

This is mine linkedin.com/in/epranka 👈

How does your code sound?

Edvinas Pranka — Wed, 05 Feb 2020 19:41:55 +0000

As a developer, I love listening to music while coding. The orchestral music allows me to focus more on what I do. And one day I noticed my fingers dance on the keyboard by the music rhythm. Like playing the piano. Every word or symbol in the code was written with harmony. And then I thought... how it could sound... The code I write every day?

And the idea was born. ⭐

Go to live on soundcode.now.sh, put your code and enjoy how it sounds! 🎶

How it works

Firstly, we load the sound fonts of the instruments which are used in this little orchestra. When you paste or write your code (or using our example), we parse it using the TypeScript AST parser to individual nodes. Then the composition begins.

The mood of the code

By code source, we determine the mood of the code. The more cheerful words in the code, the happier the mood and vice versa. The mood of the code is used to set the musical scale. If happy, a Major will be likely selected, if sad - Minor.

Chords

By the code source and with some easy math we choose which chords progression play from the determined musical scale.

The Melody of the piano

Each piano note is the TypeScript Token. With some math, we set the note, pitch, duration and time when to play. The special symbols like ,.+-/*, etc are excluded and used in the other instrument

Other instruments

Each instrument has its notes. Some just looping the notes of the chord, while others play specific notes by the source code. For example, the Cello always plays the active chord root note, when Harp only plays at the special characters or Chorus at the strings.

You can check the full source code in my GitHub repository epranka/soundcode

If you have ideas on how to improve it (new features, bugs and etc...) feel free to share it on the GitHub Issues.

Follow on Twitter, GitHub, and let’s connect on LinkedIn

Feedback and questions are appreciated.