I saw this incredible demonstration recently and was seriously impressed.

It’s powerful AI from none other than Google DeepMind, the geniuses behind that god-level chess-playing program, AlphaZero.

They’ve conquered the mental realm of chess and Go (unfortunately), so now they’re trying to conquer the physical realm of sports.

(And by the way, they’ve been working on AlphaCode, to destroy all programming jobs — should we be worried?)

And they’re already well on their way: The robot destroyed every single player it faced, at the beginner level.

55% of every intermediate-level player it played against.

For a sport like tennis, not only does the AI need sophisticated algorithms for intelligent decision-making.

It also needs physical components for quick reactions and precise movements to adequately make those decisions in the real world.

So this is the biggest problem that makes it impossible for an expert system or classical algorithm to have any chance:

How can we track this tiny, rapidly moving ball, predict its trajectory, and respond quickly and accurately according to the rules of the game?

Well, like in every problem in Computer Science and programming, it all comes back to input, processing, output.

Inputs

We only need visual input here.

And of course, you know the standard way computers receive visual input.

So the robot has multiple high-speed cameras to constantly capture images at an impressive rate of 125 images per second.

All these images are rapidly fed into a neural network that tracks the ball’s position in real time.

With this position, it can calculate key variables like speed and trajectory.

Processing

For processing the robot has two levels of control.

First there are the low-level controllers, a bunch of specialized neural networks trained to execute specific table tennis skills: backhand drives, forehand topspin… basically anything you could normally do with the ball as a human.

Then we have the high-level controller for more abstract decision-making. It processes the inputs to decide which atomic skill to perform.

I think it’s just like how our brains have regions for higher-level processing like the prefrontal cortex, and then other regions like the motor cortex for lower-level for planning and executing motion.

Output

All that processing would be useless if it couldn’t do anything in the real world; It needs to move.

That’s why the robot has a powerful IRB 1100 robotic arm, allowing it to easily reach almost any part of the table to quickly strike the ball.

In a way you could say the low-level controllers are the output of the high-level one’s processing, but they also do their own processing.

It can be better

It beat all the beginners and much of the intermediates.

But how many advanced players did it beat?

Zero.

It was just too slow for those masters.

One reason for this is that it takes quite some time for the sensors to read input, and also for the actuators to carry out the output in the real world.

It also seems to have issues with balls that are too low/high, or have too much spin.

Early beginnings thought, and overall it’s a great system showing off serious progress being made in AI and robotics.

In this article, we’d see how easy it is to launch and deploy a Laravel server on Vultr.

Vultr is an independent cloud computing platform that provides a range of services to help businesses and developers build and deploy applications.

What does Vultr offer?

• Cloud computing instances (servers): These are virtual machines that you can use to run your applications.
• Managed databases: Vultr offers managed database services for popular databases like MySQL, PostgreSQL, and MongoDB.  
• Object storage: You can store large amounts of data in Vultr’s object storage.
• Bare metal servers: If you need more power and control, Vultr offers bare metal servers.  

How to deploy Laravel on Vultr

Head over to the Laravel page to get started:

Select Deploy.

You’ll need to create a brand new Vultr account if you haven’t already.

You’ll also need to add a payment method to deploy your servers.

Once you’re done with account setup, it’s time to get down with business:

1. For Type, choose Optimized Cloud Compute – Dedicated CPU

2. Choose your preferred location – Vultr has powerful server instances running in all continents
3. Choose Laravel for the Image – this should already be pre-selected.

4. Server Settings: You’ll create an SSH key to use with the server instance. This guide will help with the key creation.

5. Server Hostname & Label: Enter your preferred name – I chose laravel1.
6. That’s it for setup, it’s time to Deploy Now

Once everything is done, you’ll have a fully functional Laravel server up and running in Vultr!

To prevent a page refresh on form submit in React, call event.preventDefault() in the submit event listener.

App.jsxCopied!

import React, { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    
    // Simulate form submission by clearing input fields
    setEmail('');
    setPassword('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email
        <br />
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          required
        />
      </label>
      <br />
      <label>
        Password
        <br />
        <input
          type="password"
          value={password}
          onChange={handlePasswordChange}
          required
        />
      </label>
      <br />
      <button type="submit" style={{ marginTop: 16 }}>
        Submit
      </button>
    </form>
  );
}

export default function App() {
  return <LoginForm />;
}

We use the Event preventDefault() method to stop the default action of the event from happening. In this case, that action was a page refresh, so preventDefault() prevented the page refresh on the form submission.

App.jsxCopied!

const handleSubmit = (event) => {
   event.preventDefault();
   
   // Simulate form submission by clearing input fields
   setEmail('');
   setPassword('');
 };

preventDefault() is a property of an Event object, which lets us access and modify event-related data.

We use the onSubmit prop to add a submit event listener to the form; this listener runs when the user clicks the button to submit the form.

All we did here was reset the form, but of course in the real world, you probably want to make an AJAX request to a server with the form data.

App.jsxCopied!

const handleSubmit = async (event) => {
  event.preventDefault();

  const user = {
    email: email,
    password: password,
  };

  try {
    const response = await axios.post('http://your-api-url.com', user);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }

  setEmail('');
  setPassword('');
};

For the button to submit the form, we must set its type prop to submit

App.jsxCopied!

<button type="submit" style={{ marginTop: 16 }}>
  Submit
</button>

With type="submit", the browser also submits the form when the user presses the Enter key in an input field.

Remove type="submit" from the button to prevent page refresh

To prevent page refresh on form submit in React, you can also remove the type="submit" from the button.

When is this useful? You may want to show an alert message or something before submission. In this case, we wouldn’t want type="submit" since it submits the form on button click.

App.jsxCopied!

import React, { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = () => {
    // Perform custom actions before form submission
    alert('Are you sure you want to submit the form?');

    // Simulate form submission by clearing input fields
    setEmail('');
    setPassword('');
  };

  return (
    <form>
      <label>
        Email
        <br />
        <input
          type="email"
          value={email}
          onChange={handleEmailChange}
          required
        />
      </label>
      <br />
      <label>
        Password
        <br />
        <input
          type="password"
          value={password}
          onChange={handlePasswordChange}
          required
        />
      </label>
      <br />
      <button type="button" onClick={handleSubmit} style={{ marginTop: 16 }}>
        Submit
      </button>
    </form>
  );
}

export default function App() {
  return <LoginForm />;
}

We used type="button" on the button, but that’s as good as not having a type attribute. It doesn’t do anything on click.

Key takeaways

• To prevent page refresh on form submit in React, call event.preventDefault() in the submit event listener.
• Set type="submit" to ensure the form submits on button click or Enter press. Remove it when you don’t want this.
• Remove type="submit" when you need to do something after the button click before submitting the form, e.g., show a dialog, make an initial request, etc.

The “unexpected reserved word (await)” error occurs in JavaScript when you use the await keyword in a function that is not specified as async. To fix it, add an async modifier to the function to mark it as async.

Here’s an example of the error occurring:

index.jsCopied!

function getName() {
  // ❌ SyntaxError: Unexpected reserved word
  const str = await Promise.resolve('Coding Beauty');

  return str;
}

Note: As this is a syntax error, the function doesn’t need to be invoked for it to be detected, and no part of the code runs until it is resolved.

The async and await keywords work together in JavaScript (hence the commonly used term, async/await); to use the await keyword in a function, you must add the async modifier to the function to specify that it is an async function.

JavaScriptCopied!

// ✅ Use "async" keyword modifier
async function getName() {
  // ✅ Successful assignment - no error
  const str = await Promise.resolve('Coding Beauty');

  return str;
}

Fix “Unexpected reserved word (await)” error in nested function

If you’re using the await keyword, it’s likely that you already know that it has to be in an async function. What probably happened is that you nested functions and mistakenly ommited the async modifier from the innermost function containing the await keyword.

For example:

JavaScriptCopied!

// ❌ SyntaxError: Unexpected reserved word
export const createTask =
  async ({ description }) =>
  // ❌ "async" keyword missing from innermost function
  (dispatch) => {
    await fetch('https://example.com/tasks', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ description }),
    });

    dispatch({ type: 'taskCreated', description });
  };

For await to work, the deepest function in the nesting hierarchy is required to be specified as async. It won’t work even if any or all of the outer functions are marked as async.

So we resolve the error in this case by adding the async modifier to the innermost function:

JavaScriptCopied!

// ✅ No error
export const createTask =
  async ({ description }) =>
  // ✅ Innermost function marked as async
  async (dispatch) => {
    await fetch('https://example.com/tasks', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ description }),
    });

    dispatch({ type: 'taskCreated', description });
  };

In this example, we should be able to remove the async keyword from the outer function, as it isn’t performing any asynchronous operations with await, but this depends on whether the caller of createTask() is expecting it to return a Promise or not.

Here’s another example where this mistake frequently happens; using await in an array looping method:

JavaScriptCopied!

// ❌ SyntaxError: Unexpected reserved word
async function processPhotos(photoIds) {
  const data = await Promise.all(photoIds.map((photoId) => {
    const res = await fetch(`http://example.com/photos/${photoId}`);
    return await res.json();
  }));
  
  // process data...
}

Like in the previous example, the error occurs because the async keyword modifier is absent from the map() callback, even though it’s present in the function that calls map(). The fix is the same, add async to the map() callback.

JavaScriptCopied!

// ✅ No error
async function processPhotos(photoIds) {
  const data = await Promise.all(
    photoIds.map(async (photoId) => {
      const res = await fetch(`http://example.com/photos/${photoId}`);
      return await res.json();
    })
  );
  // processing...
}

Use await at top level

If you’re trying to use await at the top level of your file, you’ll need to set the type attribute to "module" in the script tag referencing the file in the HTML. This works when your code runs in browser environments.

For example:

index.htmlCopied!

<script type="module" src="index.js"></script>

Now you’ll be able to use await at the global scope in your file, e.g.:

index.jsCopied!

console.log(await Promise.resolve('Coding Beauty'));

If you’re using Node.js, you’ll need to set the type attribute to "module" in your package.json file.

package.jsonCopied!

{
  "name": "cb-js",
  "type": "module",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  // other fields...
}

If there’s no package.json in your project directory, you can create one with the following command

ShellCopied!

# NPM
npm init -y

# Yarn
yarn init -y

The await keyword will now work at the top level of your project files.

To convert hours and minutes to seconds in JavaScript:

1. Multiply the hours by 3600 to convert it to seconds.
2. Multiply the minutes by 60 to convert it to seconds.
3. Add these seconds to the seconds time value to get the total seconds.

For example:

JavaScriptCopied!

function toSeconds(hours, minutes, seconds) {
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds(2, 15, 10)); // 8110

console.log(toSeconds(1, 5, 30)); // 3930

We create a reusable toSeconds() function to easily convert the hours and minutes to seconds.

The function is quite easy to understand; 1 hour equals 3600 seconds, so we multiply the hour value by 3600 to get the seconds equivalent. Similarly, 1 minute equals 60 seconds, so we multiply the minute value by 60 to get the seconds equivalent.

After this, we add the equivalent seconds values to the seconds argument to get the total seconds.

We could rewrite the function to accept the time values as named properties of an object, instead of as multiple parameters.

JavaScriptCopied!

function toSeconds({ h: hours, m: minutes, s: seconds }) {
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds({ h: 2, m: 15, s: 10 })); // 8110

console.log(toSeconds({ h: 1, m: 5, s: 30 })); // 3930

This approach makes it easier to understand the role of each value passed to the function, a

Convert HH:mm:ss to seconds in JavaScript

Sometimes the time input to convert to seconds is a string in a time format, like HH:mm:ss. To convert to seconds in this case, we’ll separate the individual time values by the separator (: in this case), cast them each to numbers, and perform the same time conversion steps done in our previous examples.

For example:

JavaScriptCopied!

function toSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

console.log(toSeconds('02:15:10')); // 8110

console.log(toSeconds('01:05:30')); // 3930

The input string here is in the HH:mm:ss format; the hour, minute, and second values are separated by a colon (:) and are each represented by a minimum of 2 digits.

The String split() method splits a string into an array of substrings separated by a given separator in the original string. We pass a colon as the separator to get an array of the individual time values.

JavaScriptCopied!

const timeStr = '02:15:10';

console.log(timeStr.split(':')); // [ '02', '15', '10' ]

After getting this array, we use the map() method to transform each time value into a number. The map() method takes a callback and calls it on each element of an array and uses the result to populate a new array. For our scenario, the callback is simply the Number() constructor, so each time value in the array is converted to a number.

JavaScriptCopied!

console.log(['02', '15', '10'].map(Number)); // [ 2, 15, 10 ]

Note

This:

JavaScriptCopied!

const [hours, minutes, seconds] = timeStr.split(':').map(Number);

is equivalent to this:

JavaScriptCopied!

  const [hours, minutes, seconds] = timeStr
    .split(':')
    .map((str) => Number(str));

The second one is longer, but it makes it clear exactly what arguments are passed to the map() callback. In the first one, map() automatically passes 3 arguments to its callback, which could be problematic if the callback returns a different result depending on the number of arguments it receives, for instance, a parseInt() callback.

We then use a destructuring assignment to unpack the number array values into separate hour, minute, and second variables.

JavaScriptCopied!

const [hour, minute, seconds] = [2, 15, 10];

console.log(hour); // 2

console.log(minute); // 15

console.log(seconds); // 10

After doing this, we perform the same multiplication and addition we did in the first example, to convert the hours and minutes to seconds and get the total seconds.