DEV Community: I'm Luis! \^-^/

Simulating movement through a Map using React

I'm Luis! \^-^/ — Sun, 17 Jul 2022 18:21:23 +0000

Almost exactly 3 years ago, I wrote an article explaining how to move a car on a map, like if you were an engineer at Uber. In part 1, I explained how to make the movement happen, and in part two I explained how to rotate the icon to make it look more realistic, so it always points in the direction the car is going.

I've written a lot of code since then, so I thought I'd make a series of articles explaining how I'd implement those things today. I no longer use React classes very often, I tend to use TypeScript more often, and I even wrote my own library for working with maps, which I'll use for this tutorial. The end result will look like this:

I will cover:

Rendering a map
Preparing a path and its distances
Finding the current distance
Finding the appropiate coordinates for that distance

All with examples!

A basic map

So let's start with a basic map. In my previous tutorial, I used a wrapper for Google Maps, but the library I wrote is a wrapper for 3 popular libraries: Google Maps, Mapbox and Leaflet. You can choose the one that fits best for your project, or you can use your own.

npm install react-maps-suite

Once installed, you can render a basic map. We'll render a map using Google Maps, with a default center and a zoom level of 15.

import Maps from "react-maps-suite";

const defaultCenter = {
  lat: 18.562663708833288,
  lng: -68.3960594399559
};

const defaultZoom = 15;

function App() {
  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    />
  );
}

export default App;

The default center are the coordinates of the Punta Cana roundabout, in the Dominican Republic, and the default zoom is close to 21 which is the maximum zoom level that Google Maps allows.

The Path

We need a path for our marker to run through. A path will be a list of coordinates (an array of lat/lng). You may already have this in your application, so you can skip to the next step.

You can generate a line with this tool, or we can create one manually by clicking on the map and putting together the list of coordinates. Let's add an onClick on the map and log the pair of latitude / longitude of that place we clicked:

import Maps from "react-maps-suite";

const defaultCenter = {
  lat: 18.562663708833288,
  lng: -68.3960594399559
};

const defaultZoom = 15;

function App() {
  const onClick = ({ position }) => {
    console.log("clicked on", position);
  };

  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
      onClick={onClick}
    />
  );
}

export default App;

Once we have a list of coordinates, we can put them together in an array:

import Maps from "react-maps-suite";

const defaultCenter = {
  lat: 18.562663708833288,
  lng: -68.3960594399559
};

const defaultZoom = 15;

const defaultPath = [
  { lat: 18.562093938563784, lng: -68.40836660716829 },
  { lat: 18.560995497953385, lng: -68.40230123938906 },
  { lat: 18.56022251698875, lng: -68.39839594306338 },
  { lat: 18.559408849032664, lng: -68.39431898536074 },
  { lat: 18.55916474788931, lng: -68.39187281073916 },
  { lat: 18.558920646396807, lng: -68.39049951972353 },
  { lat: 18.557984920774317, lng: -68.38942663611758 },
  { lat: 18.55794423693522, lng: -68.3884395832001 },
];

function App() {
  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    />
  );
}

export default App;

These coordinates are now ordered in the way we put them together, meaning that we start at index 0 and end in path.length. As time progresses, we need to store something to do a lookup and find where we're supposed to be (for instance time or distance). If you have times at specific coordinates you can use time, but I'll use distance for this tutorial. Let's calculate the distances for all of the coordinates from index 0:

import Maps, { computeDistance } from "react-maps-suite";

const defaultCenter = {
  lat: 18.562663708833288,
  lng: -68.3960594399559
};

const defaultZoom = 15;

const defaultPath = [
  { lat: 18.562093938563784, lng: -68.40836660716829 },
  { lat: 18.560995497953385, lng: -68.40230123938906 },
  { lat: 18.56022251698875, lng: -68.39839594306338 },
  { lat: 18.559408849032664, lng: -68.39431898536074 },
  { lat: 18.55916474788931, lng: -68.39187281073916 },
  { lat: 18.558920646396807, lng: -68.39049951972353 },
  { lat: 18.557984920774317, lng: -68.38942663611758 },
  { lat: 18.55794423693522, lng: -68.3884395832001 }
].reduce((result, item, index, array) => {
  if (index === 0) {
    result.push({ ...item, distance: 0 });
    return result;
  }

  const { distance: lastDistance } = result[index - 1];
  const previous = array[index - 1];
  const distance = lastDistance + computeDistance(previous, item);

  result.push({ ...item, distance });
  return result;
}, []);

console.log(defaultPath);

function App() {
  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    />
  );
}

export default App;

Basically, index 0 will have distance 0 (we begin here), and then we add up the distances between each index. Now we can calculate the current position, since our array has distance 0 and the distance goes up progressively. This distance is calculated in meters.

For the sake of testing, you can draw this path on the screen using Maps.Polyline. To render things on the map, we place its subcomponents as children:

function App() {
  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    >
      <Maps.Polyline path={defaultPath} strokeColor="#4287f5" />
    </Maps>
  );
}

Calculating the current position

Our array of coordinates has distances, so we need a distance to find the progress across the path. In order to calculate a distance, you need time and speed (remember d = v*t?). Our speed will be hardcoded, but it can also come from your app. We can have the time in the state and a setInterval to make it increase every second:

const DEFAULT_SPEED = 5; // m/s

function App() {
  const [time, setTime] = useState(0);

  const increaseTime = useCallback(() => {
    setTime(time => time + 1);
  }, []);

  useEffect(() => {
    const interval = setInterval(increaseTime, 1000);
    return () => {
      clearInterval(interval);
    };
  }, [increaseTime]);

  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    ></Maps>
  );
}

Now that we have time and speed, we can calculate the distance where in at every moment:

  const distance = DEFAULT_SPEED * time;
  console.log(distance);

As you can see, every second the distance goes up by 5 (check the console):

Now we can make a function to take a distance and a path and find the appropriate coordinates. We will have a path that looks roughly like this:

const path = [
{ position: ..., distance : 0 }, // index = 0
{ position: ..., distance : 10 }, // index = 1
{ position: ..., distance : 20 }, // index = 2
{ position: ..., distance : 30 }, // index = 3
{ position: ..., distance : 40 }, // index = 4
];

If our distance is 25, it means we are between index 2 and 3. We can't use the coordinates of index 2 or 3 though, because we already passed index 2, and we haven't reached index 3 yet. So we need to interpolate the current position, by calculating the progress between the two coordinates of index 2 and 3. There's a utility function called "interpolate" that allows you to do that. Here's the full code:

import { interpolate } from "react-maps-suite";

function getPositionAt(path, distance) {
  const indexesPassed = path.filter((position) => position.distance < distance);
  if (indexesPassed.length === 0) {
    return path[0];// starting position
  }

  const lastIndexPassed = indexesPassed.length - 1;
  const nextIndexToPass = lastIndexPassed + 1;

  const lastPosition = path[lastIndexPassed];
  const nextPosition = path[nextIndexToPass];

  if (!nextPosition) {
    return lastPosition; // distance is greater than the ones we have in the array
  }

  const progressUntilNext = // a number from 0 to 1
    (distance - lastPosition.distance) / nextPosition.distance;

  const currentPosition = interpolate(
    lastPosition,
    nextPosition,
    progressUntilNext
  );

  return currentPosition;
}

Now we can use the calculated position to render the items on the map. The React Maps Suite allows you to render markers using the Maps.Marker component. Putting it all together we should have:

function App() {
  const [time, setTime] = useState(0);

  const increaseTime = useCallback(() => {
    setTime((time) => time + 1);
  }, []);

  useEffect(() => {
    const interval = setInterval(increaseTime, 1000);
    return () => {
      clearInterval(interval);
    };
  }, [increaseTime]);

  const distance = DEFAULT_SPEED * time;

  const position = getPositionAt(defaultPath, distance);

  return (
    <Maps
      provider="google"
      height={400}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    >
      <Maps.Marker position={position} />
    </Maps>
  );
}

function getPositionAt(path, distance) {
  const indexesPassed = path.filter((position) => position.distance < distance);
  if (indexesPassed.length === 0) {
    return path[0]; // starting position
  }

  const lastIndexPassed = indexesPassed.length - 1;
  const nextIndexToPass = lastIndexPassed + 1;

  const lastPosition = path[lastIndexPassed];
  const nextPosition = path[nextIndexToPass];

  if (!nextPosition) {
    return lastPosition; // distance is greater than the ones we have in the array
  }

  const progressUntilNext =
    (distance - lastPosition.distance) / nextPosition.distance;

  const currentPosition = interpolate(
    lastPosition,
    nextPosition,
    progressUntilNext
  );

  return currentPosition;
}

export default App;

This should make the marker render on the map and move at 5 m/s.

Final thoughts

Playing with maps is fun! I learned all this while building a simulation engine that was running on Google Maps.

My future articles will cover:

Customizing the icon
Pausing, adjusting refresh rate (frames per second), speed, direction (forward or backwards), jumping in time.
Dragging new items on to the map from a sidebar using React DnD
Shape manipulation
Line of sight

I hope you found this useful :) I will reply to any questions in the comments.

A Simple TypeScript Class to query information from DynamoDB

I'm Luis! \^-^/ — Mon, 16 May 2022 17:40:33 +0000

I wrote a wrapper for DocClient which I think some people might find useful. The main purpose is to simplify retreiving and inserting data, especially for Lambda functions that call DynamoDB. You can see the code here.

It requires the aws-sdk, lodash and uuid, which you can download with:

npm install aws-sdk lodash uuid

It also assumes that you use id as your main key, which is most likely the case.

Let's see how it works, maybe you find it interesting!

Constructor

You need to start a new instance of the class with the name of the table:

const posts = new DynamoTable('posts', 'us-east-1'); // the region is optional

One of the advantages of storing the name in the class is that you can use the same variable for both production and development.

const posts = new DynamoTable(isProd ? 'posts' : 'dev_posts', 'us-east-1');

Methods

This instance now contains the following methods:

addItem(item)
updateItem(item)
deleteItem(id)
getItem(id)
batchGetItem(ids)
batchWriteItem(ids)
scan({ nextToken, limit, filter })
simpleScan(filter)
scanAll(filter)
query(index, queryExpression, nextToken, limit, filter)
simpleQuery(index, queryExpression, filter)
queryAll(index, queryExpression, filter)

Let's see how to use them!

Inserting

You can add single items with addItem. It will automatically generate an ID if you pass one.

import DynamoTable from './DynamoTable';

const posts = new DynamoTable('posts', 'us-east-1'); // the region is optional

async function main() {
  const post = {
    title: 'New post',
    content: 'I am the body!'
  };

  const newPost = await posts.addItem(post);
  console.log(newPost);
  /*
    {
      id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
      title: 'New post',
      content: 'I am the body!'
    }
  */
}

main();

You can insert multiple items using batchWriteItem:

import DynamoTable from './DynamoTable';

const posts = new DynamoTable('posts', 'us-east-1'); // the region is optional

async function main() {
  const post1 = {
    title: 'New post 1',
    content: 'I am the body of post 1!'
  };
  const post2 = {
    title: 'New post 2',
    content: 'I am the body of post 2!'
  };

  await posts.batchWriteItem([post1, post2]);
}

main();

Updating

You can update a post using the updateItem, which allows you to specify the fields you want to update only. It also returns the full item so you can pass it as a response to your API.

import DynamoTable from './DynamoTable';

const posts = new DynamoTable('posts', 'us-east-1'); // the region is optional

async function main() {
  const postUpdated = {
    id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
    title: 'New post updated',
  }

  const newPost = await posts.updateItem(postUpdated);
  console.log(newPost);
  /*
    {
      content: 'I am the body!',
      id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
      title: 'New post updated'
    }
  */
}

main();

Retrieving

The class supports 4 ways of retreiving data: A single item, multiple items, and listing by scanning or querying.

The simplest one is getting a simple item using its ID:

import DynamoTable from './DynamoTable';

const posts = new DynamoTable('posts', 'us-east-1'); // the region is optional

async function main() {
  const post = await posts.getItem('7da9576c-a97c-47fc-a884-fbc7fda3ab3a');
  console.log(post);
  /*
    {
      content: 'I am the body!',
      id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
      title: 'New post updated'
    }
  */
}

main();

But you can also get a bunch of items using their IDs:

const items = await posts.batchGetItem([
  '767311af-b122-420d-9b7f-a5692dbfbd45',
  'd7fce7ab-252f-4b66-a1f8-fc940db14f5c',
]);
console.log(items);
/*
[
  {
    authorId: '1',
    content: 'Title 1',
    id: '767311af-b122-420d-9b7f-a5692dbfbd45',
    title: 'Post 1'
  },
  {
    authorId: '2',
    content: 'Title 3',
    id: 'd7fce7ab-252f-4b66-a1f8-fc940db14f5c',
    title: 'Post 3'
  }
]
*/

There are three methods to scan a table. A base scan method, which is friendly to the way you probably use scan. A simpleScan method which ignores pagination, and a scanAll method which will continue to retrieve data until there's nothing more.

The scan method accepts one parameter with 3 fields: nextToken, limit and filter.

nextToken tells DynamoDB to retrieve items after this key.
limit determines the maximum amount of items to retrieve.
filter can either be an object like { key: value } (for key = value) or expression and values (for something like attribute_not_exists(:example))

The method returns items (an array) and nextToken (a string or null).

You can retrieve all items from a table like this:

const postsScan = await posts.scan();
console.log(postsScan);
/*
  {
    items: [
      {
        content: 'I am the body!',
        id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
        title: 'New post updated'
      },
      {
        content: 'I am the body of post 1!',
        id: '7796b42d-4e20-4cc1-ab85-ca3240da5991',
        title: 'New post 1'
      },
      {
        content: 'I am the body of post 2!',
        id: 'fb4d00ab-ffd8-473d-8e5f-bb506506ab30',
        title: 'New post 2'
      }
    ],
    nextToken: null
  }
*/

You can do a scanAll to keep retrieving items until there are no more:

  const postsScan = await posts.scanAll();
  console.log(postsScan);
  /*
    [
      {
        content: 'I am the body!',
        id: '7da9576c-a97c-47fc-a884-fbc7fda3ab3a',
        title: 'New post updated'
      },
      {
        content: 'I am the body of post 1!',
        id: '7796b42d-4e20-4cc1-ab85-ca3240da5991',
        title: 'New post 1'
      },
      {
        content: 'I am the body of post 2!',
        id: 'fb4d00ab-ffd8-473d-8e5f-bb506506ab30',
        title: 'New post 2'
      }
    ]
  */

A simple simpleScan will return the first batch of scan, without pagination information.

Filtering

Before moving into queries, let's add an "authorId" key to our posts table so we scan and filter using it.

const postsToInsert = [
  {
    authorId: '1',
    content: 'Title 1',
    title: 'Post 1',
  },
  {
    authorId: '1',
    content: 'Title 2',
    title: 'Post 2',
  },
  {
    authorId: '2',
    content: 'Title 3',
    title: 'Post 3',
  },
  {
    authorId: '4',
    content: 'Title 4',
    title: 'Post 4',
  },
];

await posts.batchWriteItem(postsToInsert);

We can now scan and filter for "authorId":

const postsByAuthor1 = await posts.scan({ filter: { authorId: '1' } }); // expression would be authorId = 1
console.log(postsByAuthor1);
/*
{
  items: [
    {
      authorId: '1',
      content: 'Title 1',
      id: '767311af-b122-420d-9b7f-a5692dbfbd45',
      title: 'Post 1'
    },
    {
      authorId: '1',
      content: 'Title 2',
      id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
      title: 'Post 2'
    }
  ],
  nextToken: null
}
*/

For more complex, or even custom filters, you can use an expression and values:

const postsByAuthor1 = await posts.scan({
  filter: {
    expression: 'authorId = :authorId',
    values: {
      authorId: '1'
    }
  }
});
console.log(postsByAuthor1);
/*
{
  items: [
    {
      authorId: '1',
      content: 'Title 1',
      id: '767311af-b122-420d-9b7f-a5692dbfbd45',
      title: 'Post 1'
    },
    {
      authorId: '1',
      content: 'Title 2',
      id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
      title: 'Post 2'
    }
  ],
  nextToken: null
}
*/

Querying

Now we can create an index for our 'authorId' field, called 'authorId-index'.

const postsByAuthor1 = await posts.query({
  index: 'authorId-index',
  queryExpression: { authorId: '1' }
});
console.log(postsByAuthor1);
/*
{
  items: [
    {
      content: 'Title 1',
      authorId: '1',
      id: '767311af-b122-420d-9b7f-a5692dbfbd45',
      title: 'Post 1'
    },
    {
      content: 'Title 2',
      authorId: '1',
      id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
      title: 'Post 2'
    }
  ],
  nextToken: null
}
*/

query also accepts a filter, nextToken and limit much like a scan, for the results after the query.

You can also use simpleQuery like simpleScan:

const postsByAuthor1 = await posts.simpleQuery('authorId-index', { authorId: '1' });
console.log(postsByAuthor1);
/*
[
  {
    content: 'Title 1',
    authorId: '1',
    id: '767311af-b122-420d-9b7f-a5692dbfbd45',
    title: 'Post 1'
  },
  {
    content: 'Title 2',
    authorId: '1',
    id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
    title: 'Post 2'
  }
]
*/

simpleQuery doesn't deal with pagination (so there may be more items) and it accepts a filter as a third parameter.

You also have a queryAll method which does deal with pagination and keeps querying until all items have been retrieved.

const postsByAuthor1 = await posts.queryAll('authorId-index', { authorId: '1' });
console.log(postsByAuthor1);
  /*
[
  {
    content: 'Title 1',
    authorId: '1',
    id: '767311af-b122-420d-9b7f-a5692dbfbd45',
    title: 'Post 1'
  },
  {
    content: 'Title 2',
    authorId: '1',
    id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
    title: 'Post 2'
  }
]
*/

Deleting

You can delete an item using the deleteItem method:

const deletedPost = await posts.deleteItem('a46ec412-1e95-4c9c-a24e-1d4d15092d3f');
console.log(deletedPost);
/*
{
  authorId: '1',
  content: 'Title 2',
  id: 'a46ec412-1e95-4c9c-a24e-1d4d15092d3f',
  title: 'Post 2'
}
*/

Hope this is useful!

How to Use Toku's Illumass SDK to Query Pressure Data

I'm Luis! \^-^/ — Sun, 08 May 2022 18:48:00 +0000

Toku Systems is an IoT company that specializes in devices to measure pressure. These devices can be placed inside tanks, pipelines, wells, etc., and they collect data at a specific interval which goes to their servers.

Typically, you can access this information by accessing their plataform, which includes a user interface presenting you the pressure, temperature and battery of each device, and charts of how those things changed over time.

The other way to access this data is through code. For this, they use the @illumass/illumass-sdk, an npm package, for which I did not find a lot of documentation online. The goal of this article is to give a lucky reader an overview of how to use it, and save them time.

I'm going to use a Node.js function to replicate how the communication would look, so you can copy-paste it and see what happens!

Set up

Their SDK is an npm package called @illumass/illumass-sdk, so you can install it by hitting:

npm install @illumass/illumass-sdk

You can then import it in your code like this:

import { Illumass } from "@illumass/illumass-sdk";

const illumass = new Illumass();

async function main() {
  // ... code
}

main();

Logging in

At the time of writing, it appears that the only way to log in is with a user and a password, just like you log in into their platform. There seems to be code to create API keys but no way to use them. So we'll go ahead and log in with our user and password.

import { Illumass } from "@illumass/illumass-sdk";

const EMAIL = '';
const PASSWORD = '';
const SESSION_EXPIRATION = '5m'; // this parameter is optional

const illumass = new Illumass();

async function main() {
  try {
    await illumass.connect();
    await illumass.auth.login(EMAIL, PASSWORD, SESSION_EXPIRATION);
    console.log('Successfully connected.');
  } catch (e) {
    console.log(e);
  } finally {
    illumass.disconnect();
    console.log('Disconnected.');
  }
}

main();

This will FAIL if the user and password are incorrect.

Now that you're logged in, you can start querying! Keep in mind that in order to query data, we need to have a serial number, which usually looks like this: TIPXXXXXX.

Getting the latest pressure, signal strength, battery or temperature

To get the latest measurement, we need to list all measurements for the given serial number.

Here's an example to get all 4 measurements:

import { Illumass } from "@illumass/illumass-sdk";

const EMAIL = '';
const PASSWORD = '';
const SESSION_EXPIRATION = '5m'; // this parameter is optional
const SERIAL_NUMBER = 'TIPXXXXXX';

const illumass = new Illumass();

async function main() {
  try {
    await illumass.connect();
    await illumass.auth.login(EMAIL, PASSWORD, SESSION_EXPIRATION);
    console.log('Successfully connected.');

    const result = await illumass.signal.listByHolderKey(`/devices/${SERIAL_NUMBER}`);
    const pressure = result.items.find(item => item.data.signalTypeKey === '/signalTypes/processStaticPressure');
    const signalStrength = result.items.find(item => item.data.signalTypeKey === '/signalTypes/signalStrength');
    const temperature = result.items.find(item => item.data.signalTypeKey === '/signalTypes/deviceTemperature');
    const battery = result.items.find(item => item.data.signalTypeKey === '/signalTypes/batteryVoltage');

    if (pressure) {
      console.log(`Last pressure reading ${pressure.data.status.reading}kPa at ${pressure.data.status.timestamp}`);      
    }

    if (signalStrength) {
      console.log(`Last signal strength reading ${signalStrength.data.status.reading}dBa at ${signalStrength.data.status.timestamp}`);      
    }

    if (temperature) {
      console.log(`Last temperature reading ${temperature.data.status.reading}°C at ${temperature.data.status.timestamp}`);      
    }

    if (battery) {
      console.log(`Last battery reading ${battery.data.status.reading}V at ${battery.data.status.timestamp}`);      
    }

  } catch (e) {
    console.log(e);
  } finally {
    illumass.disconnect();
    console.log('Disconnected.');
  }
}

main();

This should always give you the information you need and it should match the platform's data!

How To Back Up Files to S3 And Delete Them Using Bash

I'm Luis! \^-^/ — Mon, 04 Apr 2022 01:26:54 +0000

You have a situation. Your machine is filling up with files - could be logs, could be important data that you no longer need after sometime, and you need to get rid of them. You don't want to delete them permanently because you're unsure if you're going to need them in the future. Why not back them up to S3, which is very cheap, and at the same time delete them from the local machine?

#!/bin/bash

time_in_the_past=604800 # 1 week in seconds
directory="./"
bucket_name=""
bucket_path="/"

current_time=$(date +"%s")
while read -d '' file; do
  mtime=$(stat -c %Y $file)
  difference=$((current_time-mtime))

  if [ "$difference" -gt "$time_in_the_past" ]; then
    echo "Backing up $file"
    aws s3 cp $file s3://$bucket_name$bucket_path && unlink $file
  fi
done < <(find $directory -type f -print0)

This script will read the files in a directory, check that they're older than a specified time, upload them to S3 and if successfully, delete them from the local machine. This script assumes you installed and configured the AWS CLI.

There are 4 variables at the top that control how it will behave:

time_in_the_past is a week in seconds, but you can change this to any value.
directory is the directory where the backups will happen.
bucket_name The bucket name in which the files will be uploaded. (a-z0-9_-)
bucket_path The path inside the bucket where the files will be placed.

You can save this file as cleanup.sh and then run it every X amount of time using crontab. To open crontab, you can run

crontab -e

Then choose your preferred editor (I usually go for nano). Then place the crontab line at the end:

30 6 * * sun /path/to/cleanup.sh

The 30 6 * * sun means every sunday at 6:30 am. You can visualize cron expressions with this amazing tool called cron guru.

Hope you found this useful! If you have any questions I can answer them in the comments.

How To Create a Status Dashboard with AWS Cloudwatch Synthetics For All Your API EndPoints using the AWS CDK

I'm Luis! \^-^/ — Sat, 15 Jan 2022 23:15:11 +0000

If you have an API that people can make calls to, you'd love to make sure that it's up and running at least 99.9% of the time. You probably know how big companies have public status pages, such as Netlify, AWS, Shopify, among others, in which they check the status of their own services and then let you know if they're down.

Not only this is useful for the people calling your API, but it's also useful for you, since you can notify yourself whenever your API or one of your endpoints is not working as intended, so the problem can fixed before anybody has a chance to complain.

This can be easily automated by using AWS Cloudwatch Synthetics.

CloudWatch Canaries are scripts that can run on a schedule to monitor endpoints. They can be used to replicate the behavior of a piece of code interacting with an API, but they can also mimic the behavior of a user interacting with an application. This can be used to make sure that your application is always up and running as intended.

Setting up the CDK

For this guide we'll be using the AWS Cloud Development Kit in Typescript. This is because using the AWS console can be a tedious process. You'd have to set up every endpoint one by one and their respective alarms. With the AWS CDK you can just define an array of endpoints, some parameters for each endpoint and then deploy everything with just one command.

The other benefit of this approach is that if you have to change the behavior of all the endpoints, you can also make the changes and just run one command.

For this guide, Harmony's API will be used, since I originally built this as a contribution for them.

Make sure you have the AWS CLI installed and you're connected to your AWS account.

So let's start off by installing the Typescript CDK if you don't have it already:

npm install -g aws-cdk

And create a new instance:

mkdir harmony-synthetics
cd harmony-synthetics
cdk init app --language typescript

And install other dependencies we're going to need:

npm install @aws-cdk/aws-synthetics @aws-cdk/aws-cloudwatch @aws-cdk/aws-s3 @types/puppeteer

Defining the endpoints

This is optional, but since we're using Typescript, we can define the type of the object that will store the API results.

Let's put it at models/index.ts:

export type RCPParam = number | string | boolean | { [key: string]: RCPParam };
export type RCPResult = 'string' | 'number' | 'object' | 'boolean';

export interface RCP {
  host: string;
  name: string;
  params: RCPParam[];
  result: RCPResult;
}

So the RCP contains:

host: The API URL that will be called.
name: A name for that particular host, which will be used to name the synthetic canary as well.
params: Parameters for the query string.
result: What to expect from this endpoint. If this is not what is returned, an error will be thrown.

Please note that this is adapted for Harmony's API and yours may be simpler or more complex.
This setup assumes that a 200 OK response will always contain a success response, and there's no need to check for an error in the returned object.

Now we can fill an array with endpoints. As many as needed, located at lib/methods.ts:

import { RCP } from '../models';

// https://api.hmny.io/ has these:
const MAINNET_S0 = 'rpc.s0.t.hmny.io';
const MAINNET_S1 = 'rpc.s1.t.hmny.io';

const methods: RCP[] = [
  {
    host: MAINNET_S0,
    name: 'hmyv2_call',
    params: [
      { to: '0x08AE1abFE01aEA60a47663bCe0794eCCD5763c19' },
      370000
    ],
    result: 'string',
  },
  // ... many more
];

Defining the Canary

We need to define the piece of code that will execute the API Call. In this process, we tell AWS what call we want to make and how to handle the response. This works with a Lambda that can take one of the RCP methods we defined above and execute them.

Once again this step is optional, but I defined the Typescript definitions for the Synthetics function, and you can find them here.

You can put them in models/synthetics.ts and re-export them from your models/index.ts:

export * from './synthetics';

So let's define the resulting lambda and go over how it works:

import { APICanarySynthetics, APICanarySyntheticsExecuteHttpStepCallback, APICanarySyntheticsExecuteHttpStepRequestOptions, APISynthethicsConfigurationOptions, RCP } from "../models";
const synthetics = require('Synthetics') as APICanarySynthetics;

type JSONResponse = {
  [key: string]: string | number | JSONResponse;
}

const handler = async function () {
  const method = JSON.parse(process.env.method!) as RCP;

  const payload = {
    jsonrpc: '2.0',
    id: 1,
    method: method.name,
    params: method.params,
  };
  const payloadString = JSON.stringify(payload);

  const stepName = method.name;
  const requestOptions: APICanarySyntheticsExecuteHttpStepRequestOptions = {
    hostname: method.host,
    method: 'POST',
    protocol: 'https:',
    headers: {
      'Content-Type': 'application/json',
    },
    body: payloadString,
  };

  const callback: APICanarySyntheticsExecuteHttpStepCallback = async (response) => {
    const json = await new Promise<JSONResponse>((resolve, reject) => {
      if (! response.statusCode) {
        return reject('Could not get status code');
      }

      if (! (response.statusCode >= 200 && 299 >= response.statusCode)) {
        return reject(`Status code out of range (200-299): [${response.statusCode}]: ${response.statusMessage}`);
      }

      let responseBody = '';

      response.on('data', (d: string) => {
        responseBody += d;
      });

      response.on('end', () => {
        if (responseBody.length === 0) {
          return reject('Empty response.');
        }

        const body = JSON.parse(responseBody);
        resolve(body);
      });
    });

    if (! ('jsonrpc' in json)) {
      throw new Error(`'jsonrpc' not found in body.`);
    }

    if (! ('id' in json)) {
      throw new Error(`'id' not found in body.`);
    }

    if (! ('result' in json)) {
      throw new Error(`'result' not found in body.`);
    }

    const result = json.result;

    if (method.result !== typeof result) {
      throw new Error(`'result' in body is not the expected type: ${method.result}`);
    }

    // all good at this point. Further validation can be added to account for the full shape of `result`
    // if it's an object.

  };

  const stepConfig: APISynthethicsConfigurationOptions = {
    includeRequestHeaders: true, 
    includeResponseHeaders: true,
    includeRequestBody: true,
    includeResponseBody: true
  };

  await synthetics.executeHttpStep(stepName, requestOptions, callback, stepConfig);
};

export { handler };

Should be stored at canary/index.ts.

This lambda will:

Receive an RCP method as a JSON string from an environment variable.
Define the headers and payload to be sent to the API, in the format that the Synthetics functions require it.
Check that we got a status code between 200-299 and an actual response.
Read the entire response.
Make some basic checks for how an actual response would look like.
Compare the expected result with the actual result.

So you can think of this lambda as an isolated piece of code that runs and verifies an RCP from the array you define.

Automating the creation of each Canary

Now we want to modify our stack file to loop through every RCP and create a Canary and alarms for it. This file ends in -stack.ts and is located inside the lib/ directory. It's auto-generated by the cdk script.

The first step however, is to define a bucket to store the logs.

const bucket = new s3.Bucket(this, `CanariesBucket`, {
  bucketName: 'canaries-logs-bucket',
});

Now we can loop:

let names: string[] = [];
methods.forEach(method => {
  // canary names cannot be longer than 21 characters and cant have uppercase letters
  let canaryName = method.name.toLowerCase();
  if (canaryName.length > 21) {
    canaryName = canaryName.replace('hmyv2_', '');
    if (canaryName.length > 21) {
      canaryName = canaryName.substr(-21);
    }
  }
  if (names.indexOf(canaryName) !== -1) {
    canaryName = canaryName.substr(-20) + '2';
  }

  names.push(canaryName);

  const canary = new synthetics.Canary(this, `Canary_${method.name}`, {
    canaryName,
    runtime: synthetics.Runtime.SYNTHETICS_NODEJS_PUPPETEER_3_1,
    schedule: synthetics.Schedule.rate(Duration.minutes(5)),
    test: synthetics.Test.custom({
      code: synthetics.Code.fromInline(fs.readFileSync(path.join(__dirname, '../canary/index.js'), 'utf8')),
      handler: 'index.handler',
    }),
    environmentVariables: {
      method: JSON.stringify(method),
    },
    artifactsBucketLocation: { bucket },
  });

  const successAlarm = new cloudwatch.Alarm(this, `Canary_${method.name}SuccessAlarm`, {
    metric: canary.metricSuccessPercent(),
    comparisonOperator: cloudwatch.ComparisonOperator.LESS_THAN_THRESHOLD,
    threshold: 90, // %
    evaluationPeriods: 1, // minute
  });

  const durationAlarm = new cloudwatch.Alarm(this, `Canary_${method.name}DurationAlarm`, {
    metric: canary.metricDuration(),
    comparisonOperator: cloudwatch.ComparisonOperator.GREATER_THAN_THRESHOLD,
    threshold: 30000, // ms
    evaluationPeriods: 5, // minute
  });
});

This loop will:

Generate a name, since certain characters are not allowed.
Create a Canary using the method name, that will run every 5 minutes, passing the code from the Canary, the environment variables and the bucket for the logs.
A success alarm that will alert you if it DOES NOT succeed 90% of the time in a 1-minute timeframe.
A duration alarm if it lasts more than 30 seconds in a 5-minute timeframe.

So the whole file would look like this:

import * as cdk from '@aws-cdk/core';
import * as synthetics from '@aws-cdk/aws-synthetics';
import * as cloudwatch from '@aws-cdk/aws-cloudwatch';
import * as s3 from '@aws-cdk/aws-s3';
import * as path from 'path';
import * as fs from 'fs';
// weird! can't use cdk.Duration
import { Duration } from '@aws-cdk/aws-cloudwatch/node_modules/@aws-cdk/core';

import methods from './methods';

export class HarmonyCloudwatchStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const bucket = new s3.Bucket(this, `CanariesBucket`, {
      bucketName: 'canaries-logs-bucket',
    });

    let names: string[] = [];
    methods.forEach(method => {
      // canary names cannot be longer than 21 characters and cant have uppercase letters
      let canaryName = method.name.toLowerCase();
      if (canaryName.length > 21) {
        canaryName = canaryName.replace('hmyv2_', '');
        if (canaryName.length > 21) {
          canaryName = canaryName.substr(-21);
        }
      }
      if (names.indexOf(canaryName) !== -1) {
        canaryName = canaryName.substr(-20) + '2';
      }

      names.push(canaryName);

      const canary = new synthetics.Canary(this, `Canary_${method.name}`, {
        canaryName,
        runtime: synthetics.Runtime.SYNTHETICS_NODEJS_PUPPETEER_3_1,
        schedule: synthetics.Schedule.rate(Duration.minutes(5)),
        test: synthetics.Test.custom({
          code: synthetics.Code.fromInline(fs.readFileSync(path.join(__dirname, '../canary/index.js'), 'utf8')),
          handler: 'index.handler',
        }),
        environmentVariables: {
          method: JSON.stringify(method),
        },
        artifactsBucketLocation: { bucket },
      });

      const successAlarm = new cloudwatch.Alarm(this, `Canary_${method.name}SuccessAlarm`, {
        metric: canary.metricSuccessPercent(),
        comparisonOperator: cloudwatch.ComparisonOperator.LESS_THAN_THRESHOLD,
        threshold: 90, // %
        evaluationPeriods: 1, // minute
      });

      const durationAlarm = new cloudwatch.Alarm(this, `Canary_${method.name}DurationAlarm`, {
        metric: canary.metricDuration(),
        comparisonOperator: cloudwatch.ComparisonOperator.GREATER_THAN_THRESHOLD,
        threshold: 30000, // ms
        evaluationPeriods: 5, // minute
      });

    });
  }
}

Running the result

Now we can compile the Typescript...

npm run build

... and then deploy the result to the cloud:

cdk deploy

And in a few minutes, you should have all your Canaries running.

You can see the full code put together on my Github and can run the command to deploy it on your AWS account.

How-To's For Pretty Much ANYTHING You Wanna Do To An Array in JavaScript

I'm Luis! \^-^/ — Sun, 08 Mar 2020 21:06:22 +0000

We all manipulate arrays, all the time. They're like a small database in your code, and you can do anything you want with it.
It's very easy to forget or not to know how to perform a particular operation. In those cases, we typically google how to do it.

So based on my experience, I thought why not compiling a list of things you usually want do to to an array?

Adding items

Adding a value at the end of the array

To add a value at the end of the array, we use the push method.

const animals = ["cat", "dog", "snake"];
animals.push("fly");
console.log(animals); // (4) ["cat", "dog", "snake", "fly"]

This method mutates the original array, so you DON'T have to reassign (const variable = variable.push("something")).

Adding a value at the start of the array

To add a value at the start of the array, we use the unshift method.
This sounds similar to the shift method, but that one removes the first element.

const animals = ["cat", "dog", "snake"];
animals.unshift("fly");
console.log(animals); // (4) ["fly", "cat", "dog", "snake"]

Adding a value at the nth position of the array

To add a value at the end position of the array, we use the splice method.

const animals = ["cat", "dog", "snake"];
animals.splice(1, 0, "fly"); // 1 is the index, 0 is how much to delete and "fly" is how much to insert.
console.log(animals); // (4) ["cat", "fly", "dog", "snake"]

splice can be confusing as it can add, replace and delete items. It depends on the order of the arguments. You will see more examples of splice in this list.

Concatenating / Merging arrays

We use the method concat to concatenate arrays.

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
const allAnimals = animals.concat(moreAnimals);

console.log(allAnimals); // (4) ["cat", "dog", "snake", "fly"]

This method DOES NOT mutate the array, so you have to create a new variable. This won't work:

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
animals.concat(moreAnimals); 

console.log(animals); // // ["cat", "dog", "snake"];

You can also concatenate multiple arrays by passing more arguments:

const animals = ["cat", "dog", "snake"];
const moreAnimals = ["fly"];
const evenMoreAnimals = ["donkey"];

const allAnimals = animals.concat(moreAnimals, evenMoreAnimals);
console.log(allAnimals); // (4) ["cat", "dog", "snake", "fly", "donkey"]

Removing items

Removing the first item

We use the unshift method to remove the first item:

const liquids = ["soda", "water", "apple juice"];
liquids.unshift();

console.log(liquids); // ["water", "apple juice"];

This function will mutate the array. So your original variable will change!

As the name suggest, this is the opposite of shift, which we saw above.

Removing the last item

We use the method pop to remove the last item:

const liquids = ["soda", "water", "apple juice"];
liquids.pop();

console.log(liquids); // ["soda", "water"];

This function MUTATES the array. Be careful!

Removing the nth item

We use the splice function to remove an item at a particular position.
Let's try to remove the water again:

const liquids = ["soda", "water", "apple juice"];
const index = 1; // the position of the water in the array
liquids.splice(index, 1); // the 1 means how many items to delete after this index

console.log(liquids); // ["soda", "apple juice"]

splice will also mutate the original array.

Removing under condition

The function filter can be used to remove under a certain condition. It uses a callback, which has to return true or false for every item to either keep it or filter it out.

This function will also create a copy of the array:

const liquids = ["soda", "water", "apple juice"];
const withoutWater = liquids.filter(liquid => liquid !== "water");

console.log(withoutWater); // ["soda", "apple juice"]

Removing duplicates

For a flat array of numbers / strings you can just create a new set and convert back to an array:

  const numbers = [1, 1, 2, 3, 4, 5];
  const unique = [...new Set(numbers)];

  console.log(unique); // [1, 2, 3, 4, 5]

Updating items

Updating the nth item

To update the index at the index n:

const liquids = ["soda", "water", "apple juice"];
const index = 0;
liquids[index] = "wine";

console.log(liquids); // ["wine", "water", "apple juice"];

Updating all items

To update all items we use the map method, which returns the updated item:

const liquids = ["soda", "water", "apple juice"];
const allWine = liquids.map(liquid => "wine");

console.log(allWine);

Retrieving items

Finding an item

We use indexOf the index in a flat list of strings or numbers:

const liquids = ["soda", "water", "apple juice"];
const index = liquids.indexOf("soda");

console.log(index); // 0

In a more complex array, we use findIndex:

const people = [
  { id: 1, name: "Kate" },
  { id: 2, name: "John" },
  { id: 3, name: "Alex" },
];

const katesIndex = people.findIndex(person => person.name === "Kate");
const kate = people[katesIndex];

console.log(katesIndex, kate); // 0 { id: 1, name: "Kate" }

To find the actual object only, without the index, we use find:

const people = [
  { id: 1, name: "Kate" },
  { id: 2, name: "John" },
  { id: 3, name: "Alex" },
];

const kate = people.find(person => person.name === "Kate");

console.log(kate); // { id: 1, name: "Kate" }

Checks

A particular item exists

We use includes to determine if an item exists. This is similar to indexOf, but it will give us a boolean instead of the index.

const students = ["Kate", "John", "Alex"];
const isAlexHere = students.includes("Alex");

console.log(isAlexHere); // true

Pro-Tip: You can also use this to reduce conditions like this:

  const userInput = "Alex"; // let's pretend
  if (userInput === "Alex" || userInput === "John") {
    console.log('it is alex or john');
  }

... to this:

  const userInput = "Alex"; // let's pretend
  if (["Alex", "John"].includes(userInput)) {
    console.log('it is alex or john');
  }

... especially when there are more people to check.

All items pass a condition

We use every to determine if all items pass a condition. It receives a callback, which will take every item and you have to return true or false based on the condition.

const people = [
  { id: 1, name: "Kate", age: 23 },
  { id: 2, name: "John", age: 25 },
  { id: 3, name: "Alex", age: 27 },
];

const isEveryoneAbove20 = people.every(person => person.age > 20);

console.log(isEveryoneAbove20); // true

Some items pass a condition

We use some to determine if at least 1 item passes a condition. It receives a callback, which will take every item and you have to return true or false based on the condition.

const people = [
  { id: 1, name: "Kate", age: 23 },
  { id: 2, name: "John", age: 25 },
  { id: 3, name: "Alex", age: 27 },
];

const isSomeoneAtLeast30 = people.some(person => person.age > 30);

console.log(isSomeoneAtLeast30); // false

Misc

Reverse

We use reverse to revert the order of an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 9];
numbers.reverse();

console.log(numbers); // [9, 7, 6, 5, 4, 3, 2, 1]

Sorting an array of numbers

We use the sort method to sort things. In a list of numbers, no arguments are required.

  const numbers = [3, 4, 7, 1, 2, 9, 5, 6];
  numbers.sort(); // [1, 2, 3, 4, 5, 6, 7, 9];

If you need to sort descending, you can just reverse the array:

  const numbers = [3, 4, 7, 1, 2, 9, 5, 6];
  numbers.sort();
  numbers.reverse(); // [9, 7, 6, 5, 4, 3, 2, 1]

Sorting an array of strings

To sort an array of people, we use sort with a callback function to compare two items.

My personal favorite is to use localeCompare.

  const names = ["Luis", "Peter", "Miguel", "Jaime"];
  names.sort((a, b) => a.localeCompare(b));

  console.log(names); // ["Jaime", "Luis", "Miguel", "Peter"]

Sorting numbers in an array of objects

We will again use sort but substract the numbers within our callback function:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  people.sort((a, b) => a.age - b.age);
  /*
    0: {name: "Luis", age: 15}
    1: {name: "John", age: 20}
    2: {name: "Johanna", age: 26}
    3: {name: "Alex", age: 27}
    4: {name: "Kate", age: 30}
  */

Sorting an array of strings

To sort an array of strings, we go back to localeCompare, but for each item pair in our callback function:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  people.sort((a, b) => a.name.localeCompare(b.name));
  /*
    0: {name: "Alex", age: 27}
    1: {name: "Johanna", age: 26}
    2: {name: "John", age: 20}
    3: {name: "Kate", age: 30}
    4: {name: "Luis", age: 15}
  */

Creating a copy

You can copy an array using the slice method:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  const peopleCopy = people.slice();

... or the spread operator:

  const people = [
    { name: "John", age: 20 },
    { name: "Luis", age: 15 },
    { name: "Kate", age: 30 },
    { name: "Johanna", age: 26 },
    { name: "Alex", age: 27 },
  ];

  const peopleCopy = [...people];

Copying is going to be important if you want to perform operations that will mutate the array:

  const originalPeople = [
    { name: "Luis", age: 21 },
    { name: "Vicky", age: 20 },
  ];

  const people = [...originalPeople];
  people.push({ name: "Luz", age: 35 });

  console.log(originalPeople, people);

  /**
    0: {name: "Luis", age: 21}
    1: {name: "Vicky", age: 20}
  **/

  /**
    0: {name: "Luis", age: 21}
    1: {name: "Vicky", age: 20}
    2: {name: "Luz", age: 35}
  **/

Accumulating values

We use reduce to loop an array while keeping track of a particular value.
It accepts a callback with two arguments: An accumulator, and the current value:

The accumulator will be the value we carry on throughout the process.
The current value is the present item beeing looped.
The return value is going to be the new accumulator value.

For instance, if you want to sum all the numbers of an array:

  const numbers = [1, 2, 3, 4, 5];
  const sum = numbers.reduce((total, current) => total + current);

  console.log(sum); // 15

This is how the average of a list is usually calculated:

  const numbers = [2, 3, 2, 3, 2];
  const sum = numbers.reduce((total, current) => total + current);
  const average = sum / numbers.length;

  console.log(average); // 2.4

Looping

Regular loops can be done with forEach:

  const couple = [
    { name: "Luis", age: 21 },
    { name: "Vicky", age: 20 },
  ];


  couple.forEach((person, index) => {
    console.log(person, index);
  });

  /**
    {name: "Luis", age: 21} 0
    {name: "Vicky", age: 20} 1
  **/

Hope that was helpful! If I missed something, please put it in the comments. :)

The problem with being born in the "wrong" country

I'm Luis! \^-^/ — Fri, 06 Dec 2019 03:07:41 +0000

On October 10, 2019, I received an email from Project Alloy, notifying me that I was selected for power grant to attent AWS re:Invent 2019, a conference being hosted in Las Vegas, Nevada. This is the greatest AWS event, and Project Alloy would cover my flight, my hotel room and my entry to the conference during all days of the conference.

Naturally, this was the greatest piece of news I had ever received. I told every single member of my family and all my close friends, and obviously, to my boss. I've been using AWS for a year now for every project at work, and this was a huge opportunity to learn and create connections with people who work on the same thing. All my years of coding and hard work were finally paying off and I was ready to boost my career, or so I thought.

Project Alloy paid for my flight to Las Vegas from Punta Cana, where I live, booked my hotel room and gave me access to the platform for attendees, where I was able to select the keynotes I wanted to attend. I spent hours trying to choose the sessions, because re:Invent happens at multiple hotels, and each hotel has multiple session types every hour.

So I had everything ready to go. The only thing I needed to attend re:Invent was a US visa.

In order to get one, I had to pay a fee of about 166.70 USD, collect as much evidence about myself as possible: bank statements, proof that I'm a student, letter of invitation from AWS, employment letter from the company I work for, and fill a form with a lot of information about myself, including social media details. I did all of that carefully, as I was taking this seriously and there was no other way.

The last thing I had to do is an interview with a US consulate officer. I was so anxious I didn't sleep throughout the entire night before the interview, but at the moment of the interview I was pretty confident, looking at the officer's eyes and replying very quick.

The answer was a sad "maybe when you graduate". Yes, she said no. She didn't ask for the evidence I brought, and seemed ready to say no from the beginning. Most questions were questions about me (who do you live with, what do you work on, when did you graduate), and not about the event, why I wanted to assist and whether or not I could afford to go or who's paying.

The decision could not be appealed, and the conference was 1 week ahead. There was nothing that could be done, not even re-applying.

That was not in my plans, but wasn't totally unexpected.

I did get tremendously depressed. My motivation to work and my motivation to continue with my projects and continue to learn was down to zero. Why work hard, why learn a bunch of stuff if I'm always going to be limited by my nationality, which is something I can't change?

Many people have told me they see me as an example as I've been actively coding since 2012, when I was 13. However, none of that seemed to matter because I had the audacity to be born in the wrong country.

I can't attend conferences in the US, Canada or Europe without going through the same visa process for each one of those countries, no matter if they're inviting me.

I had no plans to stay in the US and I was ready to present as much evidence as I could but none of it was asked.

I did end up reflecting, and thinking that maybe I should just work harder and use this to "boost" my motivation, so I can prove I'm not an "illegal alien" but someone who genuinely wants to learn and contribute in technology.

I notified the team at re:Invent and Project Alloy and they did tell me to re-apply next year, and I want to really thank them again for the opportunity. Even though I couldn't assist, they did as much as they possibly could, and they continue to work to improve diversity in tech. You should check them out.

I will apply next year, maybe I'll have better luck. In the meantime I'll continue to work hard and learn as much as I can. You might probably see more posts from me here :)

Thank you for reading! I don't usually write, but I wanted to let this one out.

Do's and Don'ts for people who are learning English

I'm Luis! \^-^/ — Fri, 09 Aug 2019 04:14:26 +0000

English is currently the global language of the world. Some people are busy talking it, and the others are busy learning it. People from different countries all around the world communicate using English, and that includes us, who sometimes don't even a have a translation for some of the terms we use in tech.

But learning English can be challenging and fun. Especially because we all want to write and speak good English. For most of us, non native speakers, the goal is to speak and write like a native speaker, or at least be really decent speakers.

I've been learning English since 2012, and I'm still not at the level of a native speaker, especially because I haven't traveled yet and most of my interactions are on the Internet. This is the case for many, but it is still possible to write good English and sound pretty decent, and based on feedback, I think I've done good progress.

So here are some tips to improve your English skills.

Don't...

Think you have to know everything

You don't have to understand every word you read or you hear in a conversation. It is OK to understand the rest based on the context. Many times you will know what a word means because you've repeatedly will read or hear it, but you won't know how to translate it to your native language.

Think you have to understand everything

Sometimes you will listen to a song, a low quality audio or a person with a different accent than the one you're used to hear and you will not understand what it's said. Don't think you necessarily have to and don't beat yourself up because "you haven't made enough progress" (I've done this). Some songs are tricky to understand even to native speakers, and the same applies for some accents and obviously, low quality audios. To overcome this, think of some songs, accents or audios in your native language that you're not able to understand, and think that someone who's also learning your native language would not understand them either.

Be afraid to ask the other person to repeat, rephrase or slow down

Most people will understand that you're a learner and they will be nice to you so that the communication can be effective. There's no shame in asking them to repeat, slow down, and ultimately, rephrase what they're saying so that you can understand it.

Be sure to memorize the phrases you will use to ask people to repeat, rephrase or slow down, so that you don't get stuck thinking about how to properly ask!

Do...

Use WordReference.com

It's the best dictionary online if you speak Spanish, Portuguese, French, Italian, Arabic, Chinese, Russian and more. It'll not only teach you what a word means, but in what context you should use it. Some words are offensive, some words are only used it a particular place or have different meanings depending on where you use them.

In addition, some words are used in formal contexts or in way too informal contexts, and some words are archaic. This dictionary will tell you.

Finally, it supports phrasal verbs and expressions.

Have a list of words you've learned OR need to learn

This is not useful for absolutely everybody. However, having a list of words that you've learned or you need to learn is pretty useful to practice. The most common advice for learners of any language is repetition.

Write your code in English

Writing your variables, functions, files and comments in English is a great way to practice. This will not only benefit you, but will also benefit the community in general, because most people will be able to read your code. Most of the people who will read your code are probably familiar with English to some degree, so coding in English is coding for the entire world, and we code for humans.

Have your computer and devices in English

This will help you quickly learn terms and how to use them, and will keep you familiar with English all day.

In addition, most sentences will probably take up less space!

Write and speak, read and listen lots of English

Practice makes perfect. Great ways to practice through repetition are:

Listening to music in English
Tweeting in English
Writing articles in English (It doesn't matter if the English is a bit broken. There's a lot of broken English on the Internet and most people don't mind!)
Talking to your Google Assistance / Siri. This way you can see how much the machine can understand you!
Assist to conferences.
Listen to the Ladybug Podcast.

Pick an accent

THIS IS OPTIONAL. You don't need to sound native. This is particularly good for advanced speakers, but if you really want to sound native, you have to pick an accent of the English language. Most learners will have the accent of their native languages, so people will notice you're not a native speaker when they can't recognize your accent or when they notice that you sound spanish-ish or italian-ish. The way to sound native is by picking an accent and sticking to it, learning how the words are pronounced, what terms they prefer to use and sometimes the voice tone. The most common people will pick is the General American Accent, which you probably recognize by now. But if you're already surrounded by English speakers, it's preferable to pick their accent. Well, your brain will do that, unconscionably.

I'm hoping this article will help someone! If you're learning English or you had to learn it, drop some tips in the comments section!

Let's play with Google Maps and React - Making a Car move through the road, like on Uber - Part 2

I'm Luis! \^-^/ — Tue, 02 Jul 2019 01:01:14 +0000

In my previous article, I explained how to make a marker move through Google Maps. In this one, I'd like to explain how to customize the icon and make it face the direction it's going on the road.

Here's where we left:

Customizing the icon

In order to customize the icon, we need to use the icon property, which allows us to set the url, size and anchor.

    const icon = {
      url: 'https://images.vexels.com/media/users/3/154573/isolated/preview/bd08e000a449288c914d851cb9dae110-hatchback-car-top-view-silhouette-by-vexels.png',
      scaledSize: new window.google.maps.Size(20, 20),
      anchor: { x: 10, y: 10 }
    }

The url prop is a link to the image. If it has a transparent background, much better.
The scaledSize prop will scale the image. In this case, to 20x20 pixels (where the first parameter is the width and the second is the height). In addition, the size prop can be used, but it won't scale the image proportionally.
The anchor image will determine specifically where in that point the image will be displayed. Picture this as a Cardesian coordinate system, where the center is your lat/long, and you can move the marker using the x and y keys. Now the car appears on the road!

Orientation

Now we need to make the car face the direction where it's headed. Right now, it does move, but it still look kinda static, right?

I apologize in advance, but I'm about to show you a hack. The Google Maps SDK for Javascript doesn't have a property where you can change the rotation of the marker. Instead, you'll have to modify the image and rotate it with CSS. Not very funny, but it's not that bad!

The degrees

Before rotating, we need to calculate how much we should rotate the image in degrees. The image that I'm using already has 90 degrees of rotation, so that needs to be taken into consideration. Google has a function that does the job for us. It's window.google.maps.geometry.spherical.computeHeading.

As a reminder, we're rendering the car, which is between two lines, so we will use those two lines to determine where it's headed.

As a second reminder, we will update the marker's CSS, so we need to use componentDidUpdate to update the marker once its position has been set.

  componentDidUpdate = () => {
    const distance = this.getDistance()
    if (! distance) {
      return
    }

    let progress = this.path.filter(coordinates => coordinates.distance < distance)

    const nextLine = this.path.find(coordinates => coordinates.distance > distance)

    let point1, point2

    if (nextLine) {
      point1 = progress[progress.length -1]
      point2 = nextLine
    } else {
      // it's the end, so use the latest 2
      point1 = progress[progress.length - 2]
      point2 = progress[progress.length - 1]
    }

    const point1LatLng = new window.google.maps.LatLng(point1.lat, point1.lng)
    const point2LatLng = new window.google.maps.LatLng(point2.lat, point2.lng)

    const angle = window.google.maps.geometry.spherical.computeHeading(point1LatLng, point2LatLng)
    console.log(angle)
  }

Now we need to find the marker's element and rotate it. Remembering that the marker already had 90 degrees of rotation.

  componentDidUpdate = () => {
    const distance = this.getDistance()
    if (! distance) {
      return
    }

    let progress = this.path.filter(coordinates => coordinates.distance < distance)

    const nextLine = this.path.find(coordinates => coordinates.distance > distance)

    let point1, point2

    if (nextLine) {
      point1 = progress[progress.length -1]
      point2 = nextLine
    } else {
      // it's the end, so use the latest 2
      point1 = progress[progress.length - 2]
      point2 = progress[progress.length - 1]
    }

    const point1LatLng = new window.google.maps.LatLng(point1.lat, point1.lng)
    const point2LatLng = new window.google.maps.LatLng(point2.lat, point2.lng)

    const angle = window.google.maps.geometry.spherical.computeHeading(point1LatLng, point2LatLng)
    const actualAngle = angle - 90

    const markerUrl = 'https://images.vexels.com/media/users/3/154573/isolated/preview/bd08e000a449288c914d851cb9dae110-hatchback-car-top-view-silhouette-by-vexels.png'
    const marker = document.querySelector(`[src="${markerUrl}"]`)

    if (marker) { // when it hasn't loaded, it's null
      marker.style.transform = `rotate(${actualAngle}deg)`
    }

  }

}

Thank you for reading!

Let's play with Google Maps and React - Making a Car move through the road, like on Uber - Part 1

I'm Luis! \^-^/ — Wed, 26 Jun 2019 14:00:17 +0000

Let's pretend you're an engineer who works at Uber (unless you're an engineer who works at Uber). You have the task to animate a car, moving through the road, as it reaches its destination. So you're going to use React (Uber in the web uses React). How to do it?

Our tools

For this guide, I'm going to use Create React App with react-google-maps, which is a wrapper for the Google Maps library, so you know what to do:

npm install react-google-maps

Basic map

Let's start off with a basic map. The Google Maps library can be initialized like this:



import React from 'react';
import { withGoogleMap, withScriptjs, GoogleMap } from 'react-google-maps'

class Map extends React.Component {
  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
      </GoogleMap>
    )
  }
}

const MapComponent = withScriptjs(withGoogleMap(Map))

export default () => (
  <MapComponent
  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px`, width: '500px' }} />}
  mapElement={<div style={{ height: `100%` }} />}
  />
)

I'm not going to go into the details of how to initialize react-google-maps, but instead I'll focus on the logic for the movement. If you want to learn how to set it up, you can read their guide.

The main props I'm using are defaultZoom, which sets the zoom for Google Maps. The higher the zoom the closer to the ground, and defaultCenter, which sets the main geolocation for the map.

That should load a basic map at the Punta Cana's roundabout (close to where I live).

Latitude and Longitude

Before starting to draw on the map, we need to understand what latitude and longitude are. Latitude and Longitude are units to represent a geographical location. The latitude number can go from 90 to -90, where 0 is the equator, and the longitude number can go from 180 to -180, where 0 is the primer meridian.

Basically, with the latitude you control your vertical position, with the equator in the center, and with the longitude you control your horizontal position, with the prime meridian in the center.

You don't really need to understand how coordinates work in order to manipulate Google Maps (thanks Google!). Google provides you with tools to measure distances, calculate where an object is facing and more, and you just pass them the coordinates. If you're interested in digging deeper, you can read more in Wikipedia's article.

Markers

A marker identifies a location on the map and usually uses the icon we all know for locations:

A marker can be placed at a specific location, knowing its latitude and logitude. We can place a marker in the middle of the roundabout like this:



import React from 'react';
import { withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps'

class Map extends React.Component {
  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
          <Marker position={{
            lat: 18.559024,
            lng: -68.388886,
          }} />
      </GoogleMap>
    )
  }
}

const MapComponent = withScriptjs(withGoogleMap(Map))

export default () => (
  <MapComponent
  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px`, width: '500px' }} />}
  mapElement={<div style={{ height: `100%` }} />}
  />
)

Polyline

The Polyline component draws a line on the map based on the path prop, which is a list of coordinates. We can draw a straight line, using two coordinates, which would be the ends of our line.



import React from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Polyline
} from "react-google-maps";

class Map extends React.Component {
  path = [
    { lat: 18.55996, lng: -68.388832 },
    { lat: 18.558028, lng: -68.388971 }
  ];
  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
      >
        <Polyline path={this.path} options={{ strokeColor: "#FF0000 " }} />
      </GoogleMap>
    );
  };
}

const MapComponent = withScriptjs(withGoogleMap(Map));

export default () => (
  <MapComponent
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `400px`, width: "500px" }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />
);

We just drew a straight line across the roundabout! I wouldn't recommend doing this while driving though.

But what about a curvy line? Well, I have bad news. Curves don't exist. They're just a bunch of straight lines together, giving you the illusion that there is a curve. If you zoom enough, they will always become visible. So let's make a curve, by adding enough coordinates.



import React from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Polyline
} from "react-google-maps";

class Map extends React.Component {
  path = [
    { lat: 18.558908, lng: -68.389916 },
    { lat: 18.558853, lng: -68.389922 },
    { lat: 18.558375, lng: -68.389729 },
    { lat: 18.558032, lng: -68.389182 },
    { lat: 18.55805, lng: -68.388613 },
    { lat: 18.558256, lng: -68.388213 },
    { lat: 18.558744, lng: -68.387929 }
  ];
  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
      >
        <Polyline path={this.path} options={{ strokeColor: "#FF0000 " }} />
      </GoogleMap>
    );
  };
}

const MapComponent = withScriptjs(withGoogleMap(Map));

export default () => (
  <MapComponent
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `400px`, width: "500px" }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />
);

And that's how you draw a curve! By adding even more coordinates we can make the straight lines less noticeable.

Animating

This is where the fun starts. Let's add a marker at the end of the path. That would represent our car and the path that it progressed.



import React from "react";
import {
  withGoogleMap,
  withScriptjs,
  GoogleMap,
  Polyline,
  Marker
} from "react-google-maps";

class Map extends React.Component {
  path = [
    { lat: 18.558908, lng: -68.389916 },
    { lat: 18.558853, lng: -68.389922 },
    { lat: 18.558375, lng: -68.389729 },
    { lat: 18.558032, lng: -68.389182 },
    { lat: 18.55805, lng: -68.388613 },
    { lat: 18.558256, lng: -68.388213 },
    { lat: 18.558744, lng: -68.387929 }
  ];
  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
      >
        <Polyline path={this.path} options={{ strokeColor: "#FF0000 " }} />
        <Marker position={this.path[this.path.length - 1]} />
      </GoogleMap>
    );
  };
}

const MapComponent = withScriptjs(withGoogleMap(Map));

export default () => (
  <MapComponent
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `400px`, width: "500px" }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />
);

Now we need to prepare the logic for our animation. We will have a bunch of straight lines and we need to place the car inside the path. We can separe the logic into 4 steps.

Calculate the distances between the first point and each coordinate. This assumes that the coordinates in the path are ordered.
Set a velocity, and calculate the distance that the car has progressed over time.
Using the calculate distance, we can use the full path and get the path which the car passed.
Animate the last straight line, where the car is currently on.

Calculating distances

Google provides us with tools to calculate distances between 2 coordinates. The function in question is google.maps.geometry.spherical.computeDistanceBetween

We can perform this step before mounting our component. It'll calculate the distances between each coordinate and the first element in the path:



  componentWillMount = () => {
    this.path = this.path.map((coordinates, i, array) => {
      if (i === 0) {
        return { ...coordinates, distance: 0 } // it begins here! 
      }
      const { lat: lat1, lng: lng1 } = coordinates
      const latLong1 = new window.google.maps.LatLng(lat1, lng1)

      const { lat: lat2, lng: lng2 } = array[0]
      const latLong2 = new window.google.maps.LatLng(lat2, lng2)

      // in meters:
      const distance = window.google.maps.geometry.spherical.computeDistanceBetween(
        latLong1,
        latLong2
      )

      return { ...coordinates, distance }
    })

    console.log(this.path)
  }

Setting a velocity and calculating the distance every second.

Now into physics. Let's say we want our object to go 5 meters per second. To do that, we need an initial time, and a velocity. Let's console.log this distance every second.



  velocity = 5
  initialDate = new Date()

  getDistance = () => {
    // seconds between when the component loaded and now
    const differentInTime = (new Date() - this.initialDate) / 1000 // pass to seconds
    return differentInTime * this.velocity // d = v*t -- thanks Newton!
  }

  componentDidMount = () => {
    this.interval = window.setInterval(this.consoleDistance, 1000)
  }

  componentWillUnmount = () => {
    window.clearInterval(this.interval)
  }

  consoleDistance = () => {
    console.log(this.getDistance())
  }

This will console.log a number that increases by 5 every second, just like the velocity of our car.

Let's put or current progress together:



import React from 'react';
import { withGoogleMap, withScriptjs, GoogleMap, Polyline, Marker } from 'react-google-maps'

class Map extends React.Component {
  path = [
    { lat: 18.558908, lng: -68.389916 },
    { lat: 18.558853, lng: -68.389922 },
    { lat: 18.558375, lng: -68.389729 },
    { lat: 18.558032, lng: -68.389182 },
    { lat: 18.558050, lng: -68.388613 },
    { lat: 18.558256, lng: -68.388213 },
    { lat: 18.558744, lng: -68.387929 },
  ]

  velocity = 5
  initialDate = new Date()

  getDistance = () => {
    // seconds between when the component loaded and now
    const differentInTime = (new Date() - this.initialDate) / 1000 // pass to seconds
    return differentInTime * this.velocity // d = v*t -- thanks Newton!
  }

  componentDidMount = () => {
    this.interval = window.setInterval(this.consoleDistance, 1000)
  }

  componentWillUnmount = () => {
    window.clearInterval(this.interval)
  }

  consoleDistance = () => {
    console.log(this.getDistance())
  }

  componentWillMount = () => {
    this.path = this.path.map((coordinates, i, array) => {
      if (i === 0) {
        return { ...coordinates, distance: 0 } // it begins here! 
      }
      const { lat: lat1, lng: lng1 } = coordinates
      const latLong1 = new window.google.maps.LatLng(lat1, lng1)

      const { lat: lat2, lng: lng2 } = array[0]
      const latLong2 = new window.google.maps.LatLng(lat2, lng2)

      // in meters:
      const distance = window.google.maps.geometry.spherical.computeDistanceBetween(
        latLong1,
        latLong2
      )

      return { ...coordinates, distance }
    })

    console.log(this.path)
  }

  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
          <Polyline path={this.path} options={{ strokeColor: "#FF0000 "}} />
          <Marker position={this.path[this.path.length - 1]} />
      </GoogleMap>
    )
  }
}

const MapComponent = withScriptjs(withGoogleMap(Map))

export default () => (
  <MapComponent
  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px`, width: '500px' }} />}
  mapElement={<div style={{ height: `100%` }} />}
  />
)

Rendering the trail in real time

Now we need to render the car in real time. We have a bunch of straight lines, and the car will be within two of them. So we will move some logic to our state and update it every second.

First, let's add progress to our state and make our Polyline and Marker follow that state.



  state = {
    progress: [],
  }



  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
          { this.state.progress && (
            <>
              <Polyline path={this.state.progress} options={{ strokeColor: "#FF0000 "}} />
              <Marker position={this.state.progress[this.state.progress.length - 1]} />
            </>
          )}
      </GoogleMap>
    )
  }
}

Now we can change or consoleDistance to moveObject and extract the part of the path that the car already passed:



  componentDidMount = () => {
    this.interval = window.setInterval(this.moveObject, 1000)
  }



  moveObject = () => {
    const distance = this.getDistance()
    if (! distance) {
      return
    }
    const progress = this.path.filter(coordinates => coordinates.distance < distance)
    this.setState({ progress })
  }

Putting it all together we have:

As you notice, the car "jumps", because we're adding the lines that were already passed, but the car is within the last element of progress and the remaining elements of this.path. So to make the animation smoother, we have to know the progress within those two lines, and then find the coordinates within those two lines. Google offers us a function to do that, found at google.maps.geometry.spherical.interpolate.

Completing our moveObject function, we have:



  moveObject = () => {
    const distance = this.getDistance()
    if (! distance) {
      return
    }

    let progress = this.path.filter(coordinates => coordinates.distance < distance)

    const nextLine = this.path.find(coordinates => coordinates.distance > distance)
    if (! nextLine) {
      this.setState({ progress })
      return // it's the end!
    }
    const lastLine = progress[progress.length - 1]

    const lastLineLatLng = new window.google.maps.LatLng(
      lastLine.lat,
      lastLine.lng
    )

    const nextLineLatLng = new window.google.maps.LatLng(
      nextLine.lat,
      nextLine.lng
    )

    // distance of this line 
    const totalDistance = nextLine.distance - lastLine.distance
    const percentage = (distance - lastLine.distance) / totalDistance

    const position = window.google.maps.geometry.spherical.interpolate(
      lastLineLatLng,
      nextLineLatLng,
      percentage
    )

    progress = progress.concat(position)
    this.setState({ progress })
  }

And now it looks smooth!

Our result would be:



import React from 'react';
import { withGoogleMap, withScriptjs, GoogleMap, Polyline, Marker } from 'react-google-maps'

class Map extends React.Component {
  state = {
    progress: [],
  }

  path = [
    { lat: 18.558908, lng: -68.389916 },
    { lat: 18.558853, lng: -68.389922 },
    { lat: 18.558375, lng: -68.389729 },
    { lat: 18.558032, lng: -68.389182 },
    { lat: 18.558050, lng: -68.388613 },
    { lat: 18.558256, lng: -68.388213 },
    { lat: 18.558744, lng: -68.387929 },
  ]

  velocity = 5
  initialDate = new Date()

  getDistance = () => {
    // seconds between when the component loaded and now
    const differentInTime = (new Date() - this.initialDate) / 1000 // pass to seconds
    return differentInTime * this.velocity // d = v*t -- thanks Newton!
  }

  componentDidMount = () => {
    this.interval = window.setInterval(this.moveObject, 1000)
  }

  componentWillUnmount = () => {
    window.clearInterval(this.interval)
  }

  moveObject = () => {
    const distance = this.getDistance()
    if (! distance) {
      return
    }

    let progress = this.path.filter(coordinates => coordinates.distance < distance)

    const nextLine = this.path.find(coordinates => coordinates.distance > distance)
    if (! nextLine) {
      this.setState({ progress })
      return // it's the end!
    }
    const lastLine = progress[progress.length - 1]

    const lastLineLatLng = new window.google.maps.LatLng(
      lastLine.lat,
      lastLine.lng
    )

    const nextLineLatLng = new window.google.maps.LatLng(
      nextLine.lat,
      nextLine.lng
    )

    // distance of this line 
    const totalDistance = nextLine.distance - lastLine.distance
    const percentage = (distance - lastLine.distance) / totalDistance

    const position = window.google.maps.geometry.spherical.interpolate(
      lastLineLatLng,
      nextLineLatLng,
      percentage
    )

    progress = progress.concat(position)
    this.setState({ progress })
  }

  componentWillMount = () => {
    this.path = this.path.map((coordinates, i, array) => {
      if (i === 0) {
        return { ...coordinates, distance: 0 } // it begins here! 
      }
      const { lat: lat1, lng: lng1 } = coordinates
      const latLong1 = new window.google.maps.LatLng(lat1, lng1)

      const { lat: lat2, lng: lng2 } = array[0]
      const latLong2 = new window.google.maps.LatLng(lat2, lng2)

      // in meters:
      const distance = window.google.maps.geometry.spherical.computeDistanceBetween(
        latLong1,
        latLong2
      )

      return { ...coordinates, distance }
    })

    console.log(this.path)
  }

  render = () => {
    return (
      <GoogleMap
        defaultZoom={16}
        defaultCenter={{ lat: 18.559008, lng: -68.388881 }}
        >
          { this.state.progress && (
            <>
              <Polyline path={this.state.progress} options={{ strokeColor: "#FF0000 "}} />
              <Marker position={this.state.progress[this.state.progress.length - 1]} />
            </>
          )}
      </GoogleMap>
    )
  }
}

const MapComponent = withScriptjs(withGoogleMap(Map))

export default () => (
  <MapComponent
  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px`, width: '500px' }} />}
  mapElement={<div style={{ height: `100%` }} />}
  />
)

Now we only have to change our path and our velocity to make it look even better. This is what would change depending on the route and the driver.

With a better path (generated with this amazing tool), at 100km/h, we have:

For Part 2 we will customize the car icon and make it face the direction where it's going!

Let me know if you have any questions :D

I want to invite you to the Caribbean Dev Conference

I'm Luis! \^-^/ — Sat, 29 Sep 2018 02:44:46 +0000

I'm going to the Caribbean Developer Conference and I want to see you there! The Caribbean Dev Conference is a brand new event in the Caribbean where hundreds of developers will gather to meet new people, learn new things and have a great time in one of the best places of the Caribbean. This is an event where everyone is welcome.

Yes, but who's going??

The event will have speakers from several companies, countries and backgrounds:

The full list is available on their site so you can read more about everyone of them.

Where and WHEN?!

The event will be held from October 24th to October 27th, on Hard Rock Cafe Hotel y Casino Punta Cana. It's a 5-star hotel and one of the most visited hotels in the Caribbean:

The event will not only have talks but also two workshops, where you can learn about Ethereum for Web Developers and Angular.

The event supports diversity and has financial aids for people who don't have the means to attend.

It's sponsored by Microsoft, Google, Github, EBM, Twilio Netflix, Google, Transferwise and more!

You can learn more or buy tickets on their website.
You can also check it out on Eventbrite.

Hope to see you there! I'll take my DEV T-Shirt with me :)

Disclaimer: I am not affiliated with the organizers of this event nor its sponsors. This is not a paid ad and no one asked me to write this

[Challenge] Can you play with your language's syntax without breaking it?

I'm Luis! \^-^/ — Thu, 06 Sep 2018 02:49:57 +0000

Four years ago I was so bored I made this:

<?php
$lol = "lol";
define("HAHA", $lol, 1);
class ha
{
    public function result()
    {
        return 'This will be the result!';
    }
}
class idk
{
    public function lol()
    {
        return array(0, new ha() );
    }
}
function lol()
{
    return array( new idk() );
}
echo ${HaHa}()[0]->{${$lol}}()[1]->result();

This still works on PHP 7.1! Can you do it with your favorite language?

NOTE: This is just for fun. Don't do this while actually coding!