an hour with react.js official tutorial

note

note that there’s nothing particularly interesting about this, I just followed the https://beta.reactjs.org/learn/tutorial-tic-tac-toe official tutorial for the most part.

the only issues with the official tutorial that I ran into were

1. I needed to put in “import React from “react”;” at the top of App.js (it was only at the top of index.js for me) and

2. I needed to use <React.Fragment> and </React.Fragment> instead of <> and </>. So I guess that the “shortcuts” don’t work for me. (Perhaps I am using an old version of node or react, I don’t even know how to check)

onwards

I made this in the course of about an hour (+/- another 30 mins installing things >_<) ! It was really satisfying, since it’s a tweak on the existing tutorial (I also only got halfway through that ^^;)

video of my first “app” πŸ˜€

the tutorial is reasonable to speed run if you already know some programming concepts. but i really liked the “learn by doing” approach (and also the nod to the other approach of starting from the basics, which i really admire but struggle to implement. i’ve never e.g. read through every function of every module of scipy)

how i got here (yadda yadda)

after apparently deciding to redo my entire resume in jekyll, i also decided to procrastinate my looming thesis deadline (also my entire room reorganizing which exploded my room into our common living room) by futzing around with react.

unfortunately all the react tutorials are like “start out with a zillion files!” but after following https://www.w3schools.com/react/react_getstarted.asp “React directly in HTML”, aka React with just one file, I felt a lot more confident. Especially reading the last line on the page “If you want to follow the same steps on your computer, start by stripping down the src folder to only contain one file: index.js.”. I felt a lot better.

But the promise of tic-tac-toe lured me to the official tutorial, and I’m glad. (I also had a bit of competitive spirit to egg me on, from my coworker. Though I had a definite advantage having spent so much time on scrapy and css selectors the past two weeks).

notes on speed run: mapping react to general programming concepts

so the following are my notes. they might be wildly representing the actual concepts so take heed. it will be fun to read later about how off i was understanding what was actually going on.

passing parameters to functions

curly braces denote “props” or properties, and functions can take them in when they are called (with the special syntax, triangle brackets with a slash at the end, />). aka

<Square value=”1″ />

calls the Square function and passes the value in, that is

function Square({value}){ blah … }

handling clicks

well, in the button (or other element) declare the “onClick” should be handled by a function of your choosing.

function handleClick(){ blah ... } 

< button 
  className='square'
  onClick={handleClick}
>

Finally,

normal variables (that store their own value and can be changed)

apparently there is a “useState” syntax for what i think of as normal variables.

const [value, setValue] = useState(null);

This means that there is a variable value, which can be changed by a function of our choosing, specifically setValue().

finally

this is my final code for my “put X’s on a grid, and be able to remove them”. Basically, I create a variable “is X set”. I’m either changing the “value” of the square to a ” ” (blank space) or an “x” depending on the flag “is X set”.

import React from "react"; // FIXED by adding this line, why is official tutorial broken  

import { useState } from 'react';

//note: value is discarded
export default function Board() {
  return (
    <React.Fragment>
      <div className="board-row">
        <Square/> 
        <Square/>
        <Square/>
      </div>
      <div className="board-row">
        <Square/>
        <Square/>
        <Square/>
      </div>
      <div className="board-row">
        <Square/>
        <Square/>
        <Square/>
      </div>
    </React.Fragment>
  );
}

function Square() {
  const [xIsSet, setXIsSet] = useState(true);
  const [value, setValue] = useState(null);

  function handleClick(){
    console.log('clicked');
    if (xIsSet) {
      setValue('');
    } else {
      setValue('X');
    }
    setXIsSet(!xIsSet);
  }

  return (
    < button 
      className='square'
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

that’s all folks

other life news

got my first job/internship rejection, which is good, means i finally got an application in. or at least that’s the mindset i’m working on (new year, new me?)

will try to get a dozen more in this week and not be attached to any particular outcome. there are groups i want to work with, but i need to remember my own work (on counter-trafficking with machine learning — more on this later) is cool too

Pandemic Diary #88 – the end? (24 Jan 2022)

i’m starting to approach the end of the pandemic i feel…

i went out to a restaurant earlier this week and ate and haven’t bothered testing after. today was in a zoom call in a (mostly empty) classroom and took off my mask just to be viewed more clearly. i don’t really think too much about COVID when i’m thinking about traveling anymore, nor quarantining for a week. i still took two tests spaced apart.

i still appreciate not getting colds, so i will probably keep masking for a while. i worry about my parents. but i rarely look at case counts anymore. i checked wastewater levels and they’re going down.

i still won’t likely go clubbing for a while. but it no longer feels like a scary lethal disease. i don’t hesitate to just drop into stores whenever, or feel a heightened awareness of how close people are to me. i go to the climbing gym and will stick around even if it’s pretty crowded. for sure there’s no sense that perhaps packages or takeout food will be contaminated.

i think if i have forgotten a mask, i still wouldn’t go into a store or climbing. but my roommates certainly will. perhaps just force of habit at this point.

i’m in fact planning on having regular house parties with food. i’m not sure exactly how that will work, perhaps i’ll just have randomized testing. but i miss randomly meeting people and having interesting conversations and dreaming big. doing something to actively counteract the shrinking size of social circles and the migration of hanging out to the internet.

it’s weird to reflect on how this really prolonged the student stage of my life and exacerbated / amplified existing trends of being “behind” in my life (is that a thing?). i spent a whole two years prioritizing family, and now back in boston it feels like i’m still in year 4 of my PhD, but really i’m in year 6 (!). trying to close out my PhD also feels like admitting defeat of making something of use out of my PhD. impacting the world. having some grand vision of the future to get other people to buy into. a sense of excitement and opening of doors and possibilities, replaced by a sense of moving on.

perhaps appropriate given it’s lunar new years. let go of past self, welcome in a new self for this year. as my roommate put it: being brave enough to pursue the things that made me happy and make me laugh inside

creating a (semi-custom) avatar for livestreams (e.g. chibi avatars) using posenet demo

Example avatar

blah blah background info

This past weekend I looked into how to create an avatar, like the chibi ones that people use for livestreams, per the following instructions:

Become a grass virtual Youtuber and stream yourself. Demonstrate that you can control the model. The stream should have a minimum length of 2 minutes.

https://puzzlefactory.place/puzzles/touch-grass-challenge-impossible

I did this as part of MIT mystery hunt 2023, specifically the scavenger hunt. I put way too much time into it in some sense, but also the point of mystery hunt is to make friends and have fun for me, and this scavenger hunt certainly helped a lot with this.

Instructions

They have a great demo where you can actually just drag-and-drop a SVG in to change your avatar!

https://pose-animator-demo.firebaseapp.com/camera.html

And they provide several SVG examples here:

https://github.com/yemount/pose-animator/tree/master/resources/illustration

Unfortunately, whenever I ungrouped to edit the illustration, and then regrouped again in Inkscape, the file did not work. So all I could do was change the entire objects to the same color and call it a day.

Some details of inner workings

You can see the posenet tracking here:

Screenshot of Posenet close up — on the left, note the feature tracking in red, as well as the cyan tracking of the eyes and other points

And if you open the example SVG files, they look like this:

Under the hood: What the SVG file looks like

Further details

I haven’t run it, but the code is open-source and available here:

https://github.com/yemount/pose-animator/

I think shared my screen with OBS Studio — I just did screen share of my entire desktop, (which sort of defeats the purpose of a virtual avatar…) but obviously you can crop and resize with obs studio so that you are not in the image.

Or have more time than 30 minutes and actually install and run the software… πŸ™‚ I’ll update if I ever do that. Or if I ever figure out how to edit the file in inkscape to create a truly custom avatar…