teleren/devto huggingface dataset:
Eyes tracking and open source
Published: 2020-05-25 19:56:54

Hello everyone, I'm here to solicit your acquaintances! 

My uncle has amyotrophic lateral sclerosis, which causes him to lose the use of his muscles.
Today he can hardly move at all. He has always liked computers and video games. 
We would like him to enjoy it as much as possible, so I did some research around eyes tracking to see what was available on the market. Unfortunately, I don't know much about it. 
I stumbled upon tobii.com products that would be really perfect but much too expensive. 
So I'm calling you to find out if someone knows this field and would be able to advise me in what exists on the open source side so that I can make the use of windows possible thanks to eyes tracking.

Thank you in advance
Critical Rendering Path 
Tags: webdev, html, css, javascript
Published: 2020-05-25 19:47:11

Measure then optimize, That being said, the following course/documentation from (Google and Udacity) will explain what is **critical rendering path** (CRP) and how it is related to web performance. 
👉 [Course / documentation link](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)
GFTW Hackathon: Need some inspiration? - A Web Monetized Image Gallery
Tags: gftwhackathon, webmonetization, intersectionobserver
Published: 2020-05-25 19:45:58

Welcome to part two of my mini-series! This little app demonstrates how one can change the payment pointer based on what is in focus on a webpage, making use of the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). But let's take a step back first. 

What is Web Monetization really about? What fascinates me about it is that it allows for an alternative business model for the web. Instead of platforms being the only players benefiting from content, consumers stream micropayments to content creators, for example with the help of a [Coil](https://coil.com/) membership and extension. Social media platforms could offer their services without selling advertisement space by introducing a revenue sharing scheme, for example [probabilistic revenue sharing](https://coil.com/p/sharafian/Probabilistic-Revenue-Sharing/8aQDSPsw). 

For this demo, created on [Glitch](https://glitch.com/), I didn't go as far as probabilistic revenue sharing, I didn't even create a platform. I created a static page that shows images, just like Instagram but not as pretty. While you scroll through the gallery, different images come into focus. As soon as 75% of an image are in focus, the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) picks up the payment pointer that is included in the HTML wrapping the image and changes the content of the monetization meta-tag. Since the demo images are taken from [unsplash](https://unsplash.com/), the micropayments are streamed to charity. 

{% glitch wm-intersection-observer-demo app %}

A longer article about this demo, including a video, can be found on [Coil's blog](https://coil.com/p/sabinebertram/Web-Monetized-Image-Gallery-Intersection-Observer-Demo-/HY5nl9NT).

This demo could easily be converted into a platform, where users can post images together with their payment pointers. If an image is exclusive, it could be blurred out for users who don't have Web Monetization enabled. That way, there is no censorship. The platform creator can decide whether they ask for a payment to host the image or they implement probabilistic revenue sharing, which is a fun project on its own. 

I'm curious to hear about and see implementations of other ideas using the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) together with Web Monetization.
Null and undefined in Typescript - short explanation
Tags: typescript, javascript, tutorial, beginners
Published: 2020-05-25 19:35:58

Typescript has two special types, `null` and `undefined`. They have the values null and undefined respectively. With Javascript, it is not possible to explicitly name these types and operations using these two values are one of the most common reason for runtime errors. We sometimes want variables in our code to hold undefined or null values but many times this happens by mistake. 

By default, in Typescript `null` and `undefined` are assignable to anything, meaning they can be valid values of every type we want to use. Like in the example below:

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

If we are going to use the `--strictNullChecks` mode, the examples above will throw and error and the only types we can assign these two to are `null, undefined and any`. `Undefined` behaves a bit special and can be assigned to the type `void` too.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ryptifjusqnz9mk1pva.PNG)
 
*Photo source: Annie Spratt/ @anniespratt on Unsplash*
How to Join Arraybuffer sliced into one ArrayBuffer?
Tags: javascript, discuss
Published: 2020-05-25 19:35:02

Suppose I have ArrayBuffer(90) of one-file, Now I sliced ArrayBuffer into array according to offset of (30).

It will look like this at (Client-1)
[ArrayBuffer(30), ArrayBuffer(30), ArrayBuffer(30)]

I sent this Small chunks to another client2(One by one) where I kept this chunks into Array. ==> var buffer_area=[];

So buffer_area will denote like this at client2 :
(3) [ArrayBuffer(30),ArrayBuffer(30),ArrayBuffer(30)]

My dilemma is how to join/merge/append this array of ArrayBuffer 
into one whole ArrayBuffer so it will look like ArrayBuffer(90).

Is there any way to do that : Join Array of ArrayBuffer into one whole ArrayBuffer?
💬 Create well-formatted console.log() messages using string substitution  
Tags: javascript, beginners
Published: 2020-05-25 19:30:38

Use string substitutions tokens in your console.log() calls to create well-formatted messages. 

Each substitute string (%o - object, %s - string, %d - integer, %f - floating point value ) in the message will pull in the next argument of the console.log(msg,arg1,arg2).

For example, the following example will pull in the String "Iain", followed by the String "Freestone" and finally the integer 39

console.log("User %s %s is %d years old.","Iain","Freestone",39)

Outputing - "User Iain Freestone is 39 years old."

```javascript
let users = [
  {
    firstname: "Joe",
    lastname: "Bloggs",
    age: 45
  },
  {
    firstname: "Jane",
    lastname: "Doe",
    age: 34
  }
];

users.map(user =>
  console.log(
    "User %s %s is %d years old.",
    user.firstname,
    user.lastname,
    user.age
  )
);

// User Joe Bloggs is 45 years old.
// User Jane Doe is 34 years old.
```

If you enjoyed this little snippet you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
TS: How to override properties with type intersection
Tags: typescript, javascript, tutorial
Published: 2020-05-25 19:25:40

Hi, let's imagine the situation. We have type
```typescript
type A = {
  a: string;
  b: string;
}
```

We want to get a new type using an intersection. It's just what we thought
```typescript
type AB = A & {
  b: number;
};
```
But it's not working☹️

Of course, we can use interfaces instread
```typescript
interface A {
  a: string;
  b: string;
}

interface AB extends A {
  b: number;
}
```
But how do that with types? Let's create a new utility type that can help us

```typescript
type Override<T1, T2> = Omit<T1, keyof T2> & T2;

type AB = Override<A, { b: number }>

```

Pretty easy and very helpful. 🤟
Snapper or Budget Snap?
Tags: googlesheets, googleforms, taxdeductions, software
Published: 2020-05-25 19:14:49

Original post: https://www.redeving.dev/2020/05/snapper-or-budget-snap.html

Small software project using Google Forms and Google Sheets. I call it Snapper for now, but I used to call it Budget Snap. Not sure which way, but since only I use it.... I've used it for a couple years now. Figured it would go good here.

Since I have to collect receipts for tax purposes (rental expenses, reno, etc.) and we all know how much fun that is, especially when we "accidently" allow those receipts to build up (for a year!) Then you have to organize, enter data one way or the other, tabulate, and of course produce a report. 

For a long time I dithered, trying in a few different languages and frameworks to get something simpler and easier. I wanted something cloud accessible, on the phone, but not relying on a 3rd party. I'm not comfy with having that data on someone else's server. Aside from Google. As I said before, I use the Google-verse daily, for a lot. 

So since I know I always over-complicate things at the start and (usually!) wind it down for a final, much simpler way, I finally decided to use the tools at hand. Duh. 

So I made up a Google Sheet spreadsheet with the appropriate item headers for deductions categories. I also had some cells do a constant auto-update so my report for my accountant is auto-magically generated, and visible to me at all times. Note:  when I was looking up info on cell formulas (those memories were archived ages ago!) a lot of what I found when I explicitly looked for "google sheets how tos" didn't work. But when on a lark I put it exactly like an Excel spreadsheet, they worked flawless. Rabbit holes! 





Then I went to Tools -> Create a Form. This produced a form that I can share, or access on my phone. I have Chrome put a shortcut on my phone to jump right to the form.




Now, when I'm out and about, usually in the car right after I buy something I need to keep the receipt for, I pull up the form, and as you can see from the pic, I take a picture of the receipt as well (by camera, upload, pdf). This goes to my google drive account auto-magically too, and is linked to the spreadsheet. 

I use the date/time-stamp that is automatically added to the spreadsheet as a key whenever I want to do something (even externally later). 

Then at the end of the year, I copy and rename it to the appropriate fiscal year (and print of course plus backups) and delete all the entries of the original spreadsheet and start the new year. 

Eventually I want to be able to print the spreadsheet as a big report with the pictures, not just the filenames printed as well. I just haven't had the time to do anything with that part yet. Back burner.

Simple, but works great for me!

Cheers!
Proteja su aplicación de los ataques CSRF
Tags: seguridad, devops
Published: 2020-05-25 19:03:46

Se explican los ataques y mitigaciones de falsificación de solicitudes entre sitios
Originalmente publicado en https://omerxx.com/csrf-attacks

"CSRF es un ataque que obliga a un usuario final a ejecutar acciones no deseadas en una aplicación web en la que está autenticado actualmente. Con un poco de ayuda de la ingeniería social (como enviar un enlace por correo electrónico / chat), un atacante puede obligar a los usuarios de una aplicación web para ejecutar acciones a elección del atacante ".
Qué es
La falsificación de solicitudes de sitios cruzados, "CSRF" o "XSRF", es una vulnerabilidad común en las aplicaciones web. Implica enviar solicitudes maliciosas desde un dominio externo al servidor de fondo, realizando acciones en nombre de la víctima. El ataque supone una cookie válida de una víctima autenticada.
GhostDB - An Ultra Fast Distributed Cache
Tags: octograd2020, devgrad2020, showdev, go
Published: 2020-05-25 18:46:11

![GhostDB](https://dev-to-uploads.s3.amazonaws.com/i/05ye1pfw0lk60ky03ade.png)

## Overview of my Final Year Project

GhostDB is a distributed, in-memory, general purpose key-value data store that delivers microsecond performance at any scale.

The primary purpose of this system is to speed up dynamic database or API driven websites by storing data in RAM in order to reduce the number of times an external data source such as a databse or API must be read.

GhostDB provides a very large hash table that is distributed across multiple machines and stores large numbers of key-value pairs within the hash table. However, it's more than just a big hash table. GhostDB has multiple levels of on-disk persistence in the form of point-in-time snapshots and an append-only-file used to restore a cache node if it crashes, concurrent crawlers that will automatically evict stale data, fine grained metrics, and if configured correctly, can serve 200k requests per second from more than 1.5M concurrent keep-alive connections per physical server.

Users of GhostDB can configure GhostDB nodes on machines they have control over. The clients application servers will be capable of interacting with GhostDB through the GhostDB SDKs much the same way their application servers may interface with a MySQL or MongoDB instance.

Our SDKs are available for Python and Node.js (PyPi and NPM respectively) and are simple to use. With just 4 lines of extra code in your application servers, you are able to achieve up to a 25x increase in data retrieval speeds when compared to databases such as MongoDB and MySQL.

### Making GhostDB distributed

This was one of the significant challenges my project partner (Connor Mulready) and I faced when developing GhostDB. As the nature of this system is to cache data, we didn't feel that building a truly distributed system was necessary. Instead, GhostDB is client side distributed, meaning no nodes in your cluster know about each other. The client decides what node data should be sent to based on the hashes of keys. This means that in the event a node fails, only k / n key-value pairs must be reassigned to new nodes(where k is the number of keys and n is the number of nodes). When the node that failed comes back online, we don't need to reassign all the key-value pairs back to that node as the node will rebuild itself if persistence is enabled. 

We achieved this distribution through multiple layers of abstraction over an AVL-tree.

## Where is GhostDB now?

We haven't just stuck GhostDB in a repository to gather dust. We believe it offers more features than some caching systems out there and has it's place among these systems. 

Just today, we have released the first version of GhostDB for Linux which is available to download for free on our site [www.ghostdbcache.com](www.ghostdbcache.com). We will be continuing the development of GhostDB into the future to take it a step further and make it bigger and better, with plans for a CLI and a central log storage and cluster monitoring platform.
Humble Book Bundle: Work From Home by Wiley
Tags: webdev, beginners, codenewbie, startup
Published: 2020-05-25 18:36:41

**[Humble Book Bundle: Work From Home by Wiley](https://www.humblebundle.com/books/work-from-home-wiley-books?partner=repsup)**

Get ready to work from home productively with ebooks like Online Teaching at Its Best: Merging Instructional Design with Teaching and Learning Research, Rituals for Work: 50 Ways to Create Engagement, Shared Purpose, and a Culture that Can Adapt to Change, Excel 2019 for Dummies, and more.

Pay what you want and support charity!
Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Optimize Page Rendering with useMemo
Tags: tutorial, javascript, ionic, react
Published: 2020-05-25 18:31:56

####[🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆](https://buff.ly/35bAMIf) 

This video just came out of my own observation of multiple page re-renders in the sample application I was working on as part of this series.

I know that getting obsessed with page renders can get to be problematic, but what I observed provided an easy way for me to talk about `useMemo` and `useCallback` React Hooks.

>Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

In the Tab Application in Ionic Framework, the tabs are loaded and kept in the DOM, so you will see page renders happening on all of the tabs as you switch tabs. In this video I show how you optimize some of the rendering in in the tabs for better performance as the application becomes more complex.  

{% youtube NeZnF6qsLSQ %}

#### Video Series
[Goto Playlist for Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor](https://www.youtube.com/playlist?list=PL2PY2-9rsgl3aYbgV5Y_jFkCH7WWsiP-f)

#### React Documentation Referenced
https://reactjs.org/docs/hooks-reference.html#usecallback
https://reactjs.org/docs/hooks-reference.html#usememo
I made my dev.to content into a website to find a new job
Tags: projectbenatar, showdev, hugo, stackbit
Published: 2020-05-25 18:29:10

After discovering [this post](https://dev.to/stackbit/project-benatar-publishing-dev-powered-websites-with-stackbit-lfo) and [this post](https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5), I decided to use this tooling to get a very simple job done to help me look for work.

## Context

I've been using dev.to a little over the last year, and a lot more over the last month. It makes sense for me to use this content in my job hunt. I also had a languishing personal page. Originally made as a little experiment with hugo, it hadn't seen love in a while, and due to some jankey usage of high quality photos performance wise it was pretty bad. I'd been meaning to overhaul it for a while, and when the dev.to x stackbit collab came to my attention, it was a perfect fit.

## Goals

1. Use the content I've written, and will be continuing to write, to prove I know at least a few things about programming.
1. Get that content wrapped up neatly with a contact page, a statement that I'm looking for work, and a brief about me
1. Use my daveparr.info domain
1. Make the website more performant than it's current iteration
1. Use a clean, simple, slightly professional theme

## Method

1. Read the instructions in @ben 's [post](https://dev.to/devteam/you-can-now-generate-self-hostable-static-blogs-right-from-your-dev-content-via-stackbit-7a5)
1. Go through the creation flow
1. Assign the domain in netlify (I had a netlify hosted JAMstack previously, and my domain was already loaded in there. YMMV)
1. Clone the project @stackbit created from GitHub, and follow the [readme](https://github.com/DaveParr/daveparrinfo/blob/master/README.md) they left there to help you authenticate correctly
1. Update the [boilerplate stuff](https://github.com/DaveParr/daveparrinfo/commit/d8836e723d49ccd13f5655e7f58346dfa4ade17f)
1. Push the changes back to GitHub
1. Profit

## Hiccup

I was a little surprised when my local copy suddenly got all my blog files [that I then just commited]
(https://github.com/DaveParr/daveparrinfo/commit/1987c701187b45a85d8b0448a8c577c47ab8b2ac), but that seemed to be ok. Pretty sure I've not broken anything :)

## The End

Goals achieved, faster website, with better styling, that will be kept more up to date.

## P.S. 

If you are reading this _on_ my [website](daveparr.info), this is all actually managed through a headless CMS called [dev.to](dev.to). You can use the link to my profile on the left of this article. If you are reading this on dev.to you can see my running website at [daveparr.info](daveparr.info).
GFTW Hackathon submission: Money Chat
Tags: gftwhackathon
Published: 2020-05-25 18:22:08

## What I built
Money Chat. A monetized chat application.


### Submission Category: 
An Experiment. Users can earn money when chatting. Or they can chat to group and just pay to the platform.

## Demo
https://dfoderick.github.io/money-chat/

## Link to Code
{% github https://github.com/dfoderick/money-chat %}

## How I built it 
It is a react web app. Messages are exchanged through a back end server. User logs in with a name and (optional) payment pointer.

There are 2 operating modes:
1. Group Chat
By default when chatting to everyone logged in, you are paying the platform and your payment pointer is not used.

2. Peer chat
When someone else connects to you then they pay you using your payment pointer. When you connect to someone else then you pay them. UI shows where payments are going (i.e. platform, user A, user B, etc).

## Things I learned
Basic monetization to platform with group chat can be enabled. Peer chat is somewhat of a different animal and additional considerations have to be taken into account. 

## Additional Resources/Info 
Uses https://github.com/guidovizoso/react-monetize
Functional football players
Tags: javascript, functional
Published: 2020-05-25 18:18:24

# Intro

A short blog on how you can simplify your code by using a functional approach.
Moreover, I will try to help a team manager by using a functional approach (e.g. filter, map and reduce)

## Players and functions

A team manager want to extract some insights from a list of players, like the age of the players or the players that playing in a specific position or some statistics. 
Let's see how we can help him with some functional constructs.

The players list is the following (I am a little bit biased):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ojj9zljy9rft8sp7cwxv.png)

## list all the ages - **map**

The team manager needs a list with the players ages. As data manipulators we can isolate the ages!

*First approach*: Extracing the ages by using **for** constructs

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

In all the above cases we had to initialize an array, using map there is no need, plus the code looks more readable.

*Second approach*: Using **map**

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

In both approaches the result is the same (the list of all ages):

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

## Team needs a left back! **filter**

Team manager said that there is an urgent need for a left back, again as data magicians we can do that easily!

*First approach*: using **for**

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

*Second approach*: Using **filter**

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

In both approaches the result is the same, but in the second approach the code is claener and there is no need for array initialization:

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

(Go for tsimikas! :) )

## Useful stat - **reduce**

The team manager wants to know the sum of players ages (don't ask why...). Let's help him! This time we are going to give him only the functional approach, reduce!

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

How the reduce works: 

- the first argument is a callback function that performs the desired calculation between all the array elements, the intermediate caclulations are stored in *acc* (also the final result at the end)

- the second argument is the initial value of the *acc*

you can understand reduce better through an example:

In our case the reduce is going to perform the following:

- in the first iteration, the value of the *acc* is 0 (the initial value)
the *next* variable contains the age of "roberto carlos" the age of the first player in the list, then an addition is performed 0 + 35 = 35, this is the new
*acc* value

- in the next iteration the *acc* has the value of 35 and *next* 24 (the age of the second player), so the *acc*  will be updated with the valye 59

- the process is repeated till the end of the list, at the end will have the sum of all ages

Cheers!