teleren/devto huggingface dataset:
Classic Mario bros game controlled with hand gestures made with javascript
Tags: javascript, handtracking, game, webcam
Published: 2020-08-16 13:39:38

---
title: Classic Mario bros game controlled with hand gestures made with javascript
published: true
description: This weekend project was made combining two open source projects Full Screen Mario and Handtrack.js.
tags: javascript, handtracking, game, webcam
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9ifefphgo2l0gzjjeux8.png
---

Hi there!

My name is Miquel Camps, I'm a freelance web developer based in Spain, you can find me on [twitter](https://twitter.com/vivirenremoto) and [linkedin](https://www.linkedin.com/in/miquelcamps/).


**Information**

My idea was to combine these two cool projects to be able to play Mario with hand gestures.

**Video**

Short - Just gameplay

{% youtube HXHiuzeHI30 %}

**What problems I found?**

- There are some factors that can affect the hand tracking: light, position of hands, distance from webcam.

- Sometimes handtrack.js detect your arm or face as a hand.

- There is some lag, you can notice it when you jump sometimes it can take 1-2 seconds.

**Play**

I recommend you to use a computer with firefox/chrome browser.

[https://vivirenremoto.com/mario/](https://vivirenremoto.com/mario/)

**Credits**

- Full Screen Mario by [Josh Goldberg](https://twitter.com/JoshuaKGoldberg)

- Handtrack.js by [Victor Dibia](https://twitter.com/vykthur)

**How I made this**

By pure chance I found these two amazing projects Full Screen Mario and Handtrack.js, then the idea came to me.

The handtrack.js library returns the position of the hands found from the webcam with their current position x-y and size height-width in pixels.

Then I read the code of Full Screen Mario to know how I can simulate the move left, right, jump and stop.

I did a little dirty trick with the jump move, maybe is not the best solution but it usually works, the handtrack.js returns the height of the hand if I detect the hand is over 140 pixels then Mario jumps, but it doesn't work well in some conditions like if you are too close or far from the webcam.

I divided virtually the screen width into three parts: move left, neutral, move right.

Finally I implemented the controls to connect the game with the hand gestures.

Here sounds easy but it took me all night long haha.

**Final message**

I hope you like it, get some inspiration and it would be great if you can share it to your family and friends who ever play once Mario Bros to bring back some good memories.

**Disclaimer**

Mario, Super Mario Brothers, and all associated games and media are property of Nintendo and/or Nintendo of America Inc., and are protected by United States and international copyright, trademark and other intellectual property laws.
How to host api and frontend sepaparetly while using the same domain ??
Tags: help
Published: 2020-08-16 13:35:51

I have express API repository which is currently hosted in Heroku along with its documentation site written in `ejs`.

But now I'm planning on separating the docs website with gatsby and moving it into another repo and hosting it on Netlify while the API service still remains in Heroku.

Here is the end goal :
```js
//example domain: example.com

"/" 
// example.com/ : serves the docs website.(Netlify)

"/api"
// example.com/api : serves the API services. (Heroku)
```
Can someone help me with how to implement this in the actual application? I am not very familiar with separating hostings while using the same domain.
What is a service worker and why should you use it?
Tags: react, serviceworker, offline, pwa
Published: 2020-08-16 13:26:55

# **What are service workers?**
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They can do loads of tasks. The specific one we are gonna talk about is offline caching.

I am just a beginner to Service Workers, read them about in depth [here](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).

## How do they work?
A service worker usually mimics a caching server (from what I've understood so far). It downloads the assets used to run a webpage and then it automatically sets up a server with the static assets when you're offline. The offline version is automatically downloaded the first time you visit the app.

## How do I know if they're enabled on a website?
In most cases, the service workers render a different component than the actual sites. For instance, Twitter mobile version has a service worker set up which shows you're offline, that's pretty cool right?!

## How do I set it up in my website?
They are to be found in `serviceworker` object inside `navigator` function in VanillaJS. Here, I'll teach you how to set them up in ReactJS. Before setting them up make sure your app runs over an HTTPS connection. Service workers can be used to hijack connections and filter responses. Powerful stuff. While you would use these powers for good, a man-in-the-middle might not. To avoid this, you can only register for service workers on pages served over HTTPS, so we know the service worker the browser receives hasn't been tampered with during its journey through the network. 

For setting them up in your React App built using CRA template, you need to open your src folder and make sure you don't touch the `serviceWorker.js`. When your service worker's integrity is made sure of, open up `index.js` and change the following line.

```
serviceworker.unregister()
```
to
```
servieworker.register()
```

Yes, it's THAT easy. I was shocked too. But if you're in the development server mode, offline caching won't work, since you're running the app locally.

After when your app is in production, you can just visit the app once and forget to turn on your network connection next time you visit it. If your app has some sort of CRUD functionality with any database, you can also set it up to take the instructions and do them once you're online.

This is one of the best practices of PWA. After a lighthouse report I got a PWA badge.

If you stuck till here, thanks! This is my first blog post ever! It feels really great to write. Might do this more often.
[#Beginners] Gradient Background Generator Project⚡
Tags: html, css, javascript, showdev
Published: 2020-08-16 13:24:44

>“Practice patience to get the results but don't be much patient to take actions.”
― Amit Kalantri

*I have done many projects and I think doing projects is the best way to sharpen your skills. Building projects helped me bring together everything I was learning. Once I started building projects, I immediately felt like I was making more progress. The more you do the more you learn. So today I'm going to share with you all my very first web project which I have made a year back to learn the functionality and interactivity of javascript. From this project, I have learned that how javascript interacts with HTML and CSS. It was a very good experience for me.*


*This project is small, simple but effective as it includes some basic idea of how javascript works with HTML and CSS collectively.*


###**HTML**
*Basic structuring of the project*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ni8wd5861dg4by7cuokj.png)

###**CSS**
*Styling the content of the project* 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3qb2fqknc7fsg164kye.png)

###**Javascript**
*Very few lines of javascript code but it made me realize how things are actually working. I got to know more about the Document Object Model(DOM) and how to manipulate it and much more.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sat07r2e0vykzgecnncu.png)
--------
####**Here's the final view of the project looks cool, isn't it?**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dea98it545chc9zt4np9.PNG)

*It will give the linear color gradient value for the background which could be used in CSS to save time*🕙


##**[Demo](https://gradient-background-picker.netlify.app/)**🚀

You can get the files for this project on my GitHub page🚩 
{% github https://github.com/satyampandey24/background-picker %}


Thank you😊 and feel free to share your first project in the comment section📪

**I'll soon share my React project with you all.**

Stay safe, stay motivated✨😇
Comparing Values of Objects in JavaScript 🧭
Tags: javascript
Published: 2020-08-16 13:21:45

JavaScript has only two data types. One is `Primitive`, and the other one is the `non-primitive` data type. Primitive data types consist of 

- `undefined`
- `Boolean`
- `Number`
- `String`
- `Symbol`
- `null`

And `Non-Primitive` data types have only one member, i.e.,

- `Object`

More about JavaScript data types [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).

Comparing primitive data types is easy. We can quickly compare two primitive data types using the equality operator. But it doesn't work for non-primitive types. Because primitive data types are compared by their values, while objects in JavaScript are compared by their reference, so, the simple equality operator will only check if the location of the two objects is the same or not. We'll understand it with a code example here.

## Checking two Objects using Equality Operator

Suppose we have two objects, i.e.,

```javascript
let obj1 = {key1: "a", key2: "b", key3: "c"}
let obj2 = {key1: "a", key2: "b", key3: "c"}
```

We can see both the objects has the same key and values. Now if we try to write a function using the equality operator.

```javascript
let isSame = (object1, object2) => {
  return object1 === object2;
}
```

If we run this function and provide `obj` and `obj2` as parameters, the function will return `false`. 

![1](https://i.imgur.com/Ti7fuqG.png)

But if we define another variable that refers to an already defined object, it'll return `true`.

 ![2](https://i.imgur.com/396LNrM.png)

Here, `obj1` and `obj3` refer to the same memory location, and hence the function returns `true`. 

Now I think we are much clear why we shouldn't use the simple equality operator while comparing two objects. 

Multiple ways can be used to compare two objects. Let's see with examples.

### Code Example 1

```javascript
let areEqual = (object1, object2) => {
    return 
    object1.key1 === object2.key1 && 
    object1.key2 === object2.key2 && 
    object1.key3 === object2.key3 //and so on
}
```

This function will return `true` if two objects are equal. This code works, but it is way too static. We have to manually change each value for every different object having different key-value pairs.

To ease our work, we'll use the `JSON.stringify` method.

## What is JSON.stringify

The `JSON.stringify` is a JavaScript method that converts a JavaScript object to a JSON string. 

### Syntax

```shell
JSON.stringify(value[, replacer[, space]])
```

The `value` specifies the value that has to be converted. The `replacer` and the `space` are optional arguments. You can check [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) article to know more about this method.

### Code Example 2

```javascript
let areEqual = (object1, object2) => {
  return JSON.stringify(object1) === JSON.stringify(object2) 
}
```

As we can see, that code is just a single line, and we can use this function with any two objects. We don't have to manually set up the parameters that are to be checked. 

I hope you liked the article.
Remove duplicate Objects within an Array by Object key.
Tags: javascript
Published: 2020-08-16 13:21:44

A quick and easy way to remove duplicate Objects within an Array of Objects by key.

```javascript
function removeDuplicateObjectsByKey(array, fieldToDuplicateCheck) {
  const newArray = []
  const arrayKeys = []

  array.forEach((item) => {
    // check if we don't already have the value within the arrayKeys array
    if (!arrayKeys.includes(item[fieldToDuplicateCheck])) {
      // push this value to the arrayKeys array
      arrayKeys.push(item[fieldToDuplicateCheck])
      // push this object to the newArray array
      newArray.push(item)
    }
  })

  // return the newArray with the filtered out duplicate objects
  return newArray
}

// A test array of objects. In a real world situation you would have more than just the 'name' key on the objects
const initialArrayOfObjects = [
  {
    name: '🐑',
  },
  {
    name: '🐑',
  },
  {
    name: '🐫',
  },
  {
    name: '🦕',
  },
  {
    name: '🦕',
  },
]

// will filter out the duplicates by the 'name' field
let removeDuplicateObjects = removeDuplicateObjectsByKey(initialArrayOfObjects, 'name')
// [ { name: '🐑' }, { name: '🐫' }, { name: '🦕' } ]
```

[Github Gist](https://gist.github.com/lukethacoder/e45199df67514ec0d7576f6fd897a376)

Cover Photo Credits to [Charl Folscher](https://unsplash.com/@charlfolscher)
Laravel 7 short-cuts to writing foreign keys 
Tags: laravel, database, tips
Published: 2020-08-16 13:16:19

Hi everyone,

Today I want to write about a quick tip to use when writing foreign keys in Laravel 7.

This method will help you write shorter migrations and make your code more readable.

For our example, I am going to use the `user_id` which is very common but this can be applied to any foreign key.

In the past we would write something like this:

```php
$table->unsignedBigInteger('user_id')
->index();

$table->foreign('user_id')
->references('id')
->on('users')
->onDelete('cascade');
```
Hmm, pretty verbose right?

The good news **Dear reader** is that we can write now like this:

```php
$table->foreignId('user_id')
->index()
->constrained()
->onDelete('cascade');
```
Much nicer and easier to read, I hope you enjoyed this tip **Dear Reader**.

If you find it useful share it on social with your friends.

Have a nice day.

Credits:

Image cover: [Long Road](https://upload.wikimedia.org/wikipedia/commons/a/a1/Long_Road_to_El_Chalten_%285452083285%29.jpg)
Dart – Interesting facts about String Interpolation
Tags: dart, flutter, coflutter, stringinterpolation
Published: 2020-08-16 13:11:46

In this post, we will learn a few interesting things about String interpolation in Dart.

**1. Syntax:**
The value of an expression can be placed inside a string using:

**${expression}**
```
final coflutter = 'Coflutter';
print('Hello ${coflutter}. Your name has ${coflutter.length} characters.');

// Hello Coflutter. Your name has 9 characters.
```

**2. If the expression is a single identifier (variable), the brackets ({}) can be omitted.**
```
final coflutter = 'Coflutter';
print('Goodbye $coflutter.');

// Goodbye Coflutter.
```

**3. if..else inside the bracket**
I don’t recommend this because it will make your code more difficult to read, but here I just show you what the language can do.

```
final password = 'password';
print('The password is ${password.length > 8 ? 'OK' : 'weak'}!');

// The password is weak!
```

**4. Complex expression inside the brackets**
We can even put a complex expression inside the brackets. In below example, we define an anonymous function to return the length of the provided string, then we call that function and pass “password” as a parameter.

I also don’t recommend this since it’s hard to read your code. 

```
final password = 'password';
print('Password length is: ${((String pwd) {
    return pwd.length;
})(password)}.');

// Password length is: 8.
```

**5. Object**
If an object is placed inside the brackets, Dart internally calls toString() on that object. So that you don’t need to call toString() yourself.

Check another blog here if you want to learn more about [How to print an object in Dart](https://coflutter.com/dart-how-to-print-an-object/).

```
class Student {
  final String name;
  final int age;

  Student(this.name, this.age);

  @override
  String toString() {
    return 'Student: {name: ${name}, age: ${age}}';
  }
}

final student = Student('Coflutter', 30);
print('Info: $student');

// Info: Student: {name: Coflutter, age: 30}
```
This post is also available on [Coflutter](https://coflutter.com/dart-interesting-facts-of-string-interpolation/), [Medium](https://medium.com/nextfunc/interesting-facts-of-string-interpolation-in-dart-e168ae014f1a) and [Linkedin](https://www.linkedin.com/pulse/dart-interesting-facts-string-interpolation-phuc-tran/).
What's your favorite payment API?
Tags: webdev, discuss, ecommerce, api
Published: 2020-08-16 12:48:12

---
title: What's your favorite payment API?
published: true
description: 
tags: webdev, discuss, ecommerce, api
cover_image: https://swipesum.com/magazine/wp-content/uploads/2019/02/ThreeLogos.png
---

The massive growth of digital payments has made sending and receiving money convenient, fast, and affordable, thanks to online payment providers like [Paypal](https://developer.paypal.com/docs/api/overview/), [Square](https://developer.squareup.com/docs/) and [Stripe](https://stripe.com/docs/api). 

What's your go-to API when it comes to implementing payment functionality in your app and why?
Upptime: Unlimited, free and open source uptime monitor, powered by GitHub Actions
Tags: actionshackathon
Published: 2020-08-16 12:42:17

![Screenshot of status page](https://dev-to-uploads.s3.amazonaws.com/i/63wvl44ajo7kf6a4obwg.png)


### My Workflow
- GitHub Actions is used as an uptime monitor
  - Every 5 minutes, a workflow visits your website to make sure it's up
  - Response time is recorded every 6 hours and committed to git
  - Graphs of response time are generated every day
- GitHub Issues are used for incident reports
  - An issue is opened if an endpoint is down
  - People from your team are assigned to the issue
  - Incidents reports are posted as issue comments
  - Issues are locked so non-members cannot comment on them
  - Issues are closed automatically when your site comes back up
- GitHub Pages are used for the status website
  - A simple, beautiful, and accessible PWA is generated
  - Built with Svelte and Sapper
  - Fetches data from this repository using the GitHub API


### Submission Category: 
DIY Deployments


### Yaml File or Link to Code
https://github.com/koj-co/upptime


### Concepts

#### Issues as incidents

When the GitHub Actions workflow detects that one of your URLs is down, it automatically opens a GitHub issue ([example issue #15](https://github.com/koj-co/upptime/issues/15)). You can add incident reports to this issue by adding comments. When your site comes back up, the issue will be closed automatically as well.

<table>
  <tr>
    <td>
      <img alt="Screenshot of GitHub issue" src="https://raw.githubusercontent.com/koj-co/upptime/master/assets/screenshot-issue.png">
    </td>
    <td>
      <img alt="Screenshot of incident page" src="https://raw.githubusercontent.com/koj-co/upptime/master/assets/screenshot-incident.png">
    </td>
  </tr>
</table>

#### Commits for response time

Four times per day, another workflow runs and records the response time of your websites. This data is commited to GitHub, so it's available in the commit history of each file ([example commit history](https://github.com/koj-co/upptime/commits/master/history/wikipedia.yml)). Then, the GitHub API is used to graph the response time history of each endpoint and to track when a site went down.

<table>
  <tr>
    <td>
      <img alt="Screenshot of GitHub commits" src="https://raw.githubusercontent.com/koj-co/upptime/master/assets/screenshot-history.png">
    </td>
    <td>
      <img alt="Screenshot of live status" src="https://raw.githubusercontent.com/koj-co/upptime/master/assets/screenshot-live-status.png">
    </td>
  </tr>
</table>
Centos 7 Install Redis cache
Tags: redis, devops, wordpress, php
Published: 2020-08-16 12:40:59

When your project is growing you will need a proper cache, now there are several different options available in the market including services like Cloudflare, Akamai, and Imperva But if your project isn't that big and you don't want to pay or you want the cache to be stored on your infrastructure, therefore we have several options, but today we will have a look at Redis free solution.

Redis is a useful open-source in-memory data structure storage. It can be used in many possible ways for example it can be used as a database, cache, and message broker and supports various data structures such as Strings, Hashes, Lists, Sets, etc. It provides high availability via Redis Sentinel including monitoring, notifications Automatic failover. It also can provide automatic partitioning across multiple Redis nodes if you have installed and configured them with Redis Cluster.

We at www.amberit.org, have created automatically installation script for Redis, this script we have hosted on both our hosted GIT and Github difference is that our hosted GIT is free of use and with unlimited abilities.

To fastly install Redis without spending a lot of time copy-paste commands Just run in the terminal this command as a root user and wait for 1 minute until all is installed, at the end you will see our www.amberit.org message with success once all is done. What is in the script you can find in both Gits mentioned below and also in our full article.

Command for automaticall installation: 

sudo yum -y install git ; git clone https://www.amberit.in/linux-scripts/centos-7-install-redis.git /srv/ ; chmod +x /srv/amberit-redis.sh ; /srv/amberit-redis.sh ; rm -rf /srv/amberit-redis.sh


Full article: https://www.amberit.org/k1/centos-7-install-redis-cache/ 

The script in our GIT where we maintain it: 
https://www.amberit.in/linux-scripts/centos-7-install-redis

Git, that is free of charge without limitations and soon with test servers: https://www.amberit.in

The script in our GitHub repo: https://github.com/rpdataSIA/Centos-amberit.org-redis

Hosting, domain name registration, Digital office, VPS, VDS: https://github.com/rpdataSIA/Centos-amberit.org-redis
Low-code platform startup - Request for feedback
Tags: showdev
Published: 2020-08-16 12:31:45

Hello friends,

We will be launching our startup https://getfastCode.com in a couple of months. 

fastCode helps professional web app developers significantly reduce the time it takes to develop a web app. We are currently supporting Spring Boot on the back-end and Angular (and Angular Material) on the front-end. It's a free platform.

I would love to get your feedback on whether you think that fastCode will be useful to you and for what use cases.

Thank you very much for any feedback you can provide us.