teleren/devto huggingface dataset:
Try PicoNeo2Eye's EyeTracking
Tags: unity3d, vr, picovr
Published: 2020-07-21 03:20:38

Please let me know if there are any errors as this is a translation using DeepL.


#Initially.
I got the PicoNeo2 Eye, a VRHMD for BtoB and a stand-alone machine, for personal use, so this is for those who are interested in developing their own personal development in the same way.
![IMG_0584.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/8fc46276-b504-cd0d-bb12-1edb20e6c3a8.jpeg)

# About PicoNeo2 Eye
The PicoNeo2 Eye is a standalone eye-tracking VRHMD with Tobii's eye tracking sensor in it.
The general controls are similar to the OculusQuest, but the controller is electromagnetic rather than optical, so you can hold it to the back of your head for control.
However, compared to the Quest's controller, it has a slightly fluffy feel.
![IMG_0585.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/c8b2125c-7cf2-722c-87f0-d0609d97728e.jpeg)

![IMG_0628.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/ea1b405a-f42f-48e9-6951-2937c8ff438e.jpeg)

It's hard to see, but there are Tobii sensors on both sides of the lens.

# Demo Checking Environment
Untiy2019.4.1f
(The demo project is being developed in 2019.2.20f）

Demo Projects
https://github.com/picoxr/EyeTracking


Once you've cloned or downloaded your project, you can launch it in Unity

This window appears at the first start-up, but
Press Apply and wait a moment.
![pico01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/9e6db860-d5cb-3a3a-9c86-180d4df216dc.png)

By the way, if you set the build target to Android from the beginning, this window will not appear.


#build.
It's set from the beginning, but it seems to manage the build scene by number, so if you change the number, it won't start.

![pico02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/0dc328d8-1507-d66a-85df-b26402b866a6.png)

#Register your gaze information.
Before starting the demo, you need to register your line of sight information in the dedicated Tobii User Calibration app on the home screen.

<img width="721" alt="7.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/559c0f10-b0b8-a9cb-d32d-7c3c8ad754e1.jpeg">

#Experience the Demo.
Select "PicoEyeTracking" and the app will appear on the home screen with the controller.
It's best to start with the easy to understand "Eye Tracking".

![1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/f023039f-5c6f-1299-57a9-9672448419b2.jpeg)


#About Making Your Own App.
The Pvr_Unity_SDK is all you need for gaze information and eyelid opening and closing levels.

![pico03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/d10a8544-e7d9-53d3-e105-6a494d76aa38.png)

Check EyeTracking in EyeManager and it will work.
Foveated Rendering", which lowers the resolution of the area other than the point you are looking at, can also be set here.


#Tobii's SDK
If you want to use more advanced features, you will need TobiiXR SDK.
I'll write about it in a later post.
https://vr.tobii.com/sdk/develop/
Quick Guide to Destructuring in ES6
Tags: javascript, react, beginners, webdev
Published: 2020-07-21 01:12:11

# Basic Destructuring
Destructuring is a feature of ES6 that lets you extract variables from larger json objects
```javascript
const viewState = {
  latitude: -122.4,
  longitude: 37.78,
  zoom: 12
}

// Grab latitude and longitude from the viewState json object
const { latitude, longitude } = viewState;

console.log(latitude)  // -122.4
console.log(longitude) // 37.78
```

# Destructure and rename
```javascript
// Grab latitude and longitude. 
// Rename them to lat and long, respectively
const { latitude:lat, longitude:long } = viewState;

console.log(lat)       // -122.4
console.log(lon)       // 37.78
```

# Destructure props passed to a React component
```javascript
// sample props
{
	title: 'My Article Title',
	subTitle: 'A story of Destructuring'
}

// Without destructuring
const SimpleTitle = (props) => <h1>{props.title}</h1>

// With destructuring
const SimpleTitle = ({title}) => <h1>{title}</h1>
```
Use PHP CLI 7.3 on OVHcloud Performance hosting
Tags: php, ovhcloud, ovh
Published: 2020-07-21 01:11:42

[OVHcloud](https://www.ovh.com) is the 3rd website hosting company worldwide, 1st in Europe. They have a good product called [Performance Hosting](https://www.ovh.com/world/web-hosting/web-hosting-performance.xml) which includes a direct SSH access to the shared server.

My goal was to use [Ruckus Migrations](https://github.com/ruckus/ruckusing-migrations) on production the same way I do in my local development. Ruckus is a database migrations manager, it is inspired by the Rake database migration tools available with Ruby-on-Rails framework.

In today's version of the hosting, we can use PHP 7.3

```bash
/usr/local/php7.3/bin/php -v
# PHP 7.3.18 (cli) (built: May 20 2020 12:29:48) ( NTS )
```

Alias it to `php7` and source `.bashrc` so our current terminal re-loads commands present in it.
```bash
echo "alias php7='/usr/local/php7.3/bin/php" >> .bashrc
source .bashrc
```

And we are good to go
```
php7 ruckus.php db:migrate ENV=production
```

## My original solution

To use it, we need PHP 5.3 minimum. The default `php` command line on Performance Hosting was PHP 4. But actually, other versions of PHP are available. PHP 5.4.45 cli binary is available under the sweet name of `php.ORIG.5_4`.

If we try to use it directly, it will complain because it tries to use the `php.ini` configuration file used for PHP 4, so we should provide the 5.4 ini file. We can find it through the `phpinfo()` function.

So, after getting to know all these information, we are able to use PHP cli 5.4:

```bash
php.ORIG.5_4 -c /usr/local/lib/php.ini-2
```

But since we probably don’t want to memorize all of that to use PHP cli each time we need it, we should export it as an alias in our `.bashrc` file.

```bash
echo "alias php5='php.ORIG.5_4 -c /usr/local/lib/php.ini-2'" >> .bashrc
```

After re-sourcing our bash file

```bash
. .bashrc
```

We can now execute our scripts with PHP cli 5.4

```bash
php5 ruckus.php db:migrate ENV=production
```

<small>_Originally published on September 23, 2014_</small>
<small>_Photo by OVHcloud_</small>
How do you deal with SEO in React/SPAs?
Tags: help
Published: 2020-07-21 00:57:26

Hi everyone! Hope you are doing fine in this difficult times.

I'm writing this post because I haven't found any resource really covering this topic other than suggesting Server Side Rendering.

I wanted to know how do you React devs out there deal with SEO in your apps? I have read about using Helmet, but does it really make a difference? I tried setting up my meta tags there but when testing with www.heymeta.com they wouldn't show up. 

I wanted to know if there are some best practices to be used in React apps other than going with SSR. At this point I'm kinda afraid of offering my dev services only to find that my clients websites don't actually show up in search engines, lol.

Thank you very much!
【Finally…】Announcing the Official Launch of AskMakers v2.0
Tags: product, launch
Published: 2020-07-21 00:45:46

Oh…I am so sleepy…because I launched AskMakers 2.0 on Product Hunt and I have been monitoring it almost without sleeping😪

The first version of it was launched about 10 months ago.
I worked so hard on it and it got over 100 upvotes within 24 hours for the first time🤩

To make an app useful, I sent emails to ask successful makers to join AskMakers.
I am nobody, just a software developer from Tokyo (currently in Vancouver), however, some of them signed up on and support it!! Unbelievable🤯

Thank you [Justin](https://twitter.com/mijustin), [Hari](https://twitter.com/1HaKr), [Amie](https://twitter.com/hyper_yolo), [Jonathan](https://twitter.com/jonathanbull), and [Jaime](https://twitter.com/jtatsubana)😆

After that, it took 10 months until the launch of 2.0…
I always thought like I need to add more features to launch, and I felt like I can never launch it…I should not try to be perfect.

This post pushed my back very hard. 
{% medium https://medium.com/@kitze/the-saddest-just-ship-it-story-ever-b82707e37735 %}

Eventually, I decide to launch AskMakers 2.0!

{% tweet 1285379968344571905 %}

BTW, it's live on Product Hunt.
Please check it [AskMakers 2.0 - Ask experienced makers questions💡](https://www.producthunt.com/posts/askmakers-2-0)

## 🛠 New stack
I know most users don't care what kind of technology the product use but…yeah, I just did.
・Next.js for SSR
・Totally new design with Tailwind CSS
I used to use Nuxt.js and Bulma for AskMakers, but I wanted to make SSR and use React, so I chose Next.js.

## 🎨 Renewed UI
![Renewed UI](https://dev-to-uploads.s3.amazonaws.com/i/lzcibb4b7g1nyxo5bowk.png)
I have worked so hard to make it better for users to browse AskMakers.
I am not a designer so I did research, learned, and applied my new knowledge to AskMakers.

## 👨‍🎤 New featured makers
[Jonathan](https://twitter.com/jonathanbull) and [Jaime](https://twitter.com/jtatsubana) joined AskMakers 2.0.
Thank you!

## 🔍 Search questions
![Search questions gif anime](https://dev-to-uploads.s3.amazonaws.com/i/8e3h6birm1phtaalofpl.gif)

## 🚀 Categories
![Categories](https://dev-to-uploads.s3.amazonaws.com/i/vuuwihanrausxd9t5we8.png)

When I sent an email to @dinkydani21 about AskMakers, she told me the categories and search functionality are absolutely necessary for AskMakers.
I agree! What kind of web applications like this doesn't have these functionalities?
I wrote a code and implemented it ASAP.
Thank you for the kind feedback @dinkydani21 😊

## 💬 Comment on the answer
The discussion is very important, therefore I added the commenting feature!

## 📧 Email notifications
You receive an email notification when you receive an answer, an upvote on your answer, your answer gets bookmarked, or someone comments on your answer.
You can turn off the notifications on your setting page👌

## 🔮 More to come
I am very excited about the future!!
I talked with my friend @shyamady and I think I got a very promising idea for the v3.0.
Can't wait to show you!

Stay tuned👨🏻‍🎤
Input e Output (I/O)
Tags: beginners, ptbr
Published: 2020-07-21 00:32:57

**Input** é a entrada de dados em uma unidade de processamento. Estas entradas podem ser feitas por meio físico (hardware) ou lógico (software), esses dispositivos de entrada podem ser, teclados, mouses, webcam, microfones, softwares, entre outros.

**Output** é a saída dos dados que foram inseridos, após serem processados. Temos diversos tipos de dispositivos de saída, monitor, impressora, caixas de som, arquivos gerados por um sistema, etc. 

Esses dados são trocados entre dispositivo de entrada, local de processamento e o dispositivo de saída em formato binário (0 e 1).

O fluxo de **input** e **output** de maneira simplória é o seguinte:

Ao digitar uma letra no teclado (exemplo a letra *a*), esta letra será convertida para o formato binário (*01100001*), o dispositivo de processamento irá receber esta informação e armazenará em sua memória, quando o CPU estiver livre este código binário será direcionado para o seu processamento (por exemplo converter para maiúscula), com o processamento realizado, este dado binário (*01000001*) será enviado novamente para a memória, que fará o direcionamento para o dispositivo de saída apropriado.

![I/O](https://dev-to-uploads.s3.amazonaws.com/i/6irsvvt4fpnsd13v56fd.png)

Alguns links interessantes:

* https://www.youtube.com/watch?v=MMzdKTtUIFM
* https://www.youtube.com/watch?v=PYdHib45nu8&t=104s
* https://pt.wikipedia.org/wiki/Entrada/sa%C3%ADda#:~:text=Entrada%2Fsa%C3%ADda%2C%20sigla%20E%2F,de%20dados)%20ou%20retorno%20de
* https://pt.wikipedia.org/wiki/Arquitetura_de_von_Neumann#:~:text=A%20Arquitetura%20de%20von%20Neumann,podendo%20assim%20manipular%20tais%20programas.
Multiple User Types With Custom Data Fields for Django
Tags: django, python
Published: 2020-07-21 00:08:00

---
canonical_url: https://youtu.be/V3zRZ6XRols
description: How to add custom data fields to multiple user types with Django in a maintainable way that lets us easily use Django forms or DRF serializers. Features an exciting ending with a coffee cup!
---

{% youtube V3zRZ6XRols%}

How to add custom data fields to multiple user types with Django in a maintainable way that lets us easily use Django forms or DRF serializers. Features an exciting ending with a coffee cup!

Continues from where the "Multiple User Types | Django video finishes. [Watch that video at on youtube](https://youtu.be/f0hdXr2MOEA). 

Code from the video, with [full source code available on github](https://github.com/pydanny/multiple-user-types-django):

``` python
class SpyMore(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    gadgets = models.TextField()


class Spy(User):
    base_type = User.Types.SPY
    objects = SpyManager()

    class Meta:
        proxy = True

    def whisper(self):
        return "whisper"


class DriverMore(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    model = models.CharField(max_length=255)
    make = models.CharField(max_length=255)
    year = models.IntegerField()


class Driver(User):
    base_type = User.Types.DRIVER
    objects = DriverManager()

    @property
    def more(self):
        return self.drivermore

    class Meta:
        proxy = True

    def accelerate(self):
        return "Go faster"
```

Tell me what intermediate-to-advanced topic you want me to cover next!
Convert objects to string in JavaScript
Tags: javascript
Published: 2020-07-21 00:00:00

---
  title: Convert objects to string in JavaScript
  published: true
  tags: JavaScript
  date: Tue Jul 21 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-object-to-string
  cover_image: https://melvingeorge.me/_next/static/images/main-4bbdd132d6fcac4832c2e2fc3ab5c6e9.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-object-to-string)
  
To convert an object to string in JavaScript you need to overwrite the default `toString()` method in any object.

All the objects in JavaScript have a default `toString()` method defined.

But that doesn't do any good for us.

Let's say we have an object `John` with `name` and `age` properties.

```javascript
const John = {
  name: "John Doe",
  age: 23,
};

alert(John); // [object Object] 😟 Not good.
```

Because when we try to `alert(John)` it will show `[object Object]`. That's not useful for anything. But what if don't want to return `[object Object]` but return just the `name` property instead.

Well we can do that by overwriting the `toString()` method and returning the `name` property in the `John` object like this,

```javascript
const John = {
  name: "John Doe",
  age: 23,
  toString: function () {
    return this.name;
  },
};

// only name property is returned
alert(John); // John Doe

// If we try to call the default toString() method
// console.log(John) will return ==> [object Object] which is not useful at all
// Since we have overwrote the default toString() method it will return ==> John Doe
console.log(John.toString()); // John Doe
```

In the `alert()` method ,if you try to execute the code it will show `John Doe`. Yes, JavaScript internally calls the `toString()` method when `alert()` is called.

In the second case if we didn't overwrite the default `toString()` method in The `John` object it will return `[object Object]` which is not useful at all, Now we have a useful `toString()` method which returns the `name` property.

Now, Try executing `console.log(John.toString())` without defining a `toString()` method in `John` object and observe the result like this.

```javascript
// No toString() method defined
const John = {
  name: "John Doe",
  age: 23,
};

console.log(John.toString()); // [object Object]   ,😟 Not useful
```

### Feel free to share if you found this useful 😃.

---
Hello world
Tags: hello
Published: 2020-07-20 23:59:17

---
title: Hello world
published: true
description: 
tags: hello
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gbzjx02gn7ny3pdrx6c1.jpeg
---

Hello and welcome to my blog again. I have a bunch of articles I wanted to publish for a while, but work being work, and life being life, I never took the time to do so. 

Time is of course not something we can create, we need to choose what to do with it. And I finally am choosing to write.

So what's the plan? I'm restarting with a couple of refreshed old blog posts. And then I will start a live code series.

Thanks for reading! ❤️
Removing repetitions from Array using the class Set
Tags: javascript, typescript, codequality, node
Published: 2020-07-20 23:58:15

I was watching a course on Udemy and I figure out a very cool way of removing eventual repetitions of elements of an array.

It is the combination of the class **Set** with the **Spread Operator**.

## Set

Allows storage of unique values of any type.

Example of a set:
```js
const set = new Set([1, 2, 3, 3, 4, 5, 5])
console.log(set) // Set {1, 2, 3, 4, 5}
```

[Click here](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set) to know more about the class Set.

## Spread operator

It will serve to spread the elements of the resulting Set.

Example of how the spread operator works:
```js
const a = [1, 2, 3]
const b = [4, 5, 6]

const c = [...a, ...b]
console.log(c) // [1, 2, 3, 4, 5, 6]
```

[Click here](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator) to learn more about the Spread operator.

## Combining both

Now, we can combine both and remove the repetitions:
```js
const initial = [1, 2, 2, 3, 4, 4, 8, 8]
const set = new Set(initial)
const final = [...set]

console.log(final) // [1, 2, 3, 4, 8]
```
this Keyword in JavaScript
Tags: javascript, codenewbie, beginners, 100daysofcode
Published: 2020-07-20 23:52:45


## `this` keyword and functions

The `this` keyword in JavaScript is a property of an execution context, whether it is global, function, or eval. For regular JavaScript functions, `this` could change based upon how they were called.

1. By itself, `this` refers to the global object.
2. The new object, when used in a constructor.
3. The base object, when the function enclosing, was called as a method of the object.
4. `undefined` in case of **strict mode**.
5. In an event, `this` refers to the element that received the event.

We have used this behavior for so long that most JavaScript developers are used to it. Let's go over some examples:
### By itself, `this` refers to the global object.

```javascript
function foo() {
    return this;
};

console.log(foo()); // window object in a browser, global object for node execution
```

<br/>

### The new object, when used in a constructor.

```javascript
function Order(main, side, dessert) {
    this.main = main;
    this.side = side;
    this.dessert = dessert;
    this.order = function () {
        return `I will have ${this.main} with ${this.side} and finish off with a ${this.dessert}`;
    }
}
const newOrder = new Order("sushi", "soup", "yogurt");

console.log(newOrder.order());
// I will have sushi with soup and finish off with a yogurt
```

<br/>

### The base object, when the function enclosing, was called as a method of the object

```javascript
const myObject = {
    main: "butter chicken",
    side: "rice",
    dessert: "ice cream",
    order: function () {
        return `I will have ${this.main} with ${this.side} and finish off with ${this.dessert}`;
    }
}

console.log(myObject.order());
// I will have butter chicken with rice and finish off with ice cream
```

In the above example, `this` refers to `myObject,` and it can access the properties of the object.

<br/>
### `undefined` in case of **strict mode**

```javascript
"use strict";
function foo() {
    return this;
};

console.log(foo() === undefined); // true
```

<br/>
### In an event, `this` refers to the element that received the event.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>
<body>
    <button id="mybutton">
        Click me!
    </button>
    <script>
        var element = document.querySelector("#mybutton");
        element.addEventListener('click', function (event) {
            console.log(this); // Refers to the button clicked
            console.log(this.id); // mybutton
        }, false);
    </script>
</body>
</html>
```

We discussed arrow functions in the previous blog post and `this` keyword in the current one. The next blog post will combine arrow functions with `this` keyword to showcase how arrow functions behave differently than standard function expressions.
SASE: Secure Access Service Edge podcast on scaling  out your cloud config securely
Published: 2020-07-20 23:47:11

https://open.spotify.com/episode/4fO97ZBkrSVMbJ1TP0kmYX?si=rSLJFYDLQ9CEXX8R1eQ6Fg&context=spotify%3Ashow%3A0ygXSwK8d1kqNM7fjar2dq
Filter Log by Script Source
Tags: javascript, codenewbie
Published: 2020-07-20 22:51:53

<p>On any given website, your typical console might look like this:</p>
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924033/JS%20Bits/nSRl8SsKoK_xumqgl.png">

<p>Yuck! 🤮 We may not be able to control these messages if they're coming from a third-party vendor for instance. So what could we do to make things look at little neater?</p>
<p>DevTools provides a nifty way you can temporarily filter logs by script source. Check it!</p>
<p>Click the console side bar then click on one of the source scripts to see all logs originating *only* from that source.</p>
<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1600924034/JS%20Bits/wCZUhQNGRM_1_gzyewm.png">
<p>Now your log is clean as a whistle!🧼</p>

<h3>Links</h3>
<a href="https://developers.google.com/web/tools/chrome-devtools/console/log">Chrome Dev Tools Article on Log Messages</a>

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!