ericvicenti

Intro To React

Today we will walk through the creation of our first React web app!

Why React

Coming Soon

Create your first app

First you'll need node.js and a JavaScript editor like atom.

ericvicenti

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDBA8xNyek5IXUX5ZHu+7edB8gtPWK9TEXMDn63c8n9KWCIOeYNYMBTRZeNpdIbpZjnmoJLe1r/La5VFK+fFNAdVyTL7Lq/nPSD/aPUWa7K+uu8vd4Sf2DbJDdfRk66REEjuuD37rOi/l/SCMHlxTNm3/eUM7a6/48NZwggdItnCHlVX6Tyg3v2bAkWWRocLfVUS+mnPQQ1dkALJ8/6GxX4bCIUxnTXWmbubmBOnkEiiJIH9fb1oQk7wTHI6XKqpaYBD8eaODOlQPjV88XKMx0w7s/V3e6bjq0tRMo74TQx9fLNCqPWCMIupJmDCCbRQsyyfA8BVfCxLN8k5avRr3wL eric@mbp

ericvicenti

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDDCFlcFe09b6HOIi5w/JtDEeFHVVCXSyOSjHH3JTOa0P5fZlNkwdO5Jy2SAXaMkNVaVi+wVOHV9y3EzLEMF0iM5+HTYI3Hhky34CcFe2VZzHFXhTREyqe8sBC2vdZCMt1xbUWhMAJpE896P4wz5s5stCBm4iO5KGnwyoEXluD8woeL6+nNXpxwOoY560vKHxj0FDhiLihA6UpO8Rllf8oMeyxu0NoUMH8i1po1UzAOW0i7RjMk3a1gAbVvCGbLPXwxXjtH1gFNL9WmQYw/btBbOfOgb7GICsax8Sbua31cph3/e2LxbQZhBIIm+rTV4b9LsUMxuuhhryjXPtPnXeE9 root@hyperion

ericvicenti

#
# Qt5 WebEngine Kiosk Runner
# deps: apt-get install python-pyqt5.qtwebengine
#
import sys, os
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import QApplication, QWidget, QBoxLayout, QPushButton
from PyQt5.QtWebEngineWidgets import QWebEngineView

ericvicenti

import React, { forwardRef, useRef } from "react";

const Input = forwardRef((props, ref) => (
  <input type="text" ref={ref} className="input" {...props} />
));

function doSideEffect() {
  alert("hey, focused!");
}

ericvicenti

Problem 1 - Fake Accounts

To mitigate this, the non-shitty network should require a verified phone number. This is far from a complete solution, but most people have one and only one phone number.

Eventually, authorities could be established who vet the real identity of a user, and provide an additional badge of authenticity. (aka Twitters "blue chekmark")

Problem 2 - Meaning of Karma

It is generally a good idea to keep a rating for every user, so that content produced by assholes can be hidden.

ericvicenti

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD50UfBsc1TsZF2H2eeJNjEyzUYxJC8ZsCWwSQCOiUUMLVoOESn/wRDO1PYKC/mswRWy5Tgx0hpSIQdgY2HBS5Exnm1rjey8QNbd4Rm0lT+9QeikRoCgsCRwes3YcDsNWltL6XEAKCFlobQrTZMH/zwd44jU5bBW9JMcTs3fJ+ybIzdrM2fqiLPTlr86rIUDTW6lJHJi9X7SgAPj7Ml9Rqo379B2SExALOyrjfB36vis7CkOrkEE79FeJJcvQo7JFM6NoYDLmsbXOuQAn1O8PMWxiCWOHVgFDy/p7pUpGu1gxv7Ra4zXsHAMjzJyifj89bPyyr1Y81AZtcnL6QsIkZb ono@ono-maui-restaurant

ericvicenti

import Animated from 'react-native-reanimated';

const defaultApplyValue = (v, dest) => v.setValue(dest);

export default function useAnimatedValue(currentValue, applyValue = defaultApplyValue) {
  const [val] = useState(new Animated.Value(currentValue));
  useEffect(
    () => {
      applyValue(val, currentValue);

ericvicenti

-----BEGIN PGP PUBLIC KEY BLOCK-----

mQGNBGECaCcBDAC0v1pxNonLk02TAncNgi3QZvqmvvOLzdr2kPSCQM+8O3w9xN8Z
WnO7MdeF7fH9yuUvLI9vrDQrE7qhdLB29nvqiDesfzhVgbijOZjKgYfeyk894/6V
xdkrZXhs2pdkYKXp5aFc/ceMpDk0F9RaWv/8nAkB9vSJSByMujj+BehQKjNRGppI
Aa555S3pv4INluElRFkF9EVKmdzSVNMjVXx+9VwNy7uy1aaMTyAXM/ilcljvxjWS
XEOFO8k50A2Q14KYhtT8/IwDBqXu3SvZGpXFmkgicX0yNobKJ0E1Mc1DPBsh584X
4zt8Gt2rdaXHA1/RWzxdY7lQLzpz47S0VDZcfP1U0Z10lMJN9yj7r6hh3Zn1vj2u
Gl0x8fzJ2rY4csFmD9o7UUsFG+2JA9qbveVTvGmomqLgfqOZwE+6mw06tipHQu3r
DIX+eeK8mEQzUSzEmZHC4FhB3LO1RlCu5ZQIr5mnuqGUc/ZpRwdmp6liHrGHxzUA

ericvicenti

const fs = require('fs');
const net = require('net');

async function isSocketInUse(socketPath) {
  return new Promise((resolve, reject) => {
    const clientSocket = new net.Socket();
    clientSocket.on('error', e => {
      if (e.code === 'ECONNREFUSED') {
        resolve(false);
      } else {