“change sketch routes” PR walk-through

cassie walked me through a web editor issue that i was having a lot of trouble with. i learned a ton, so i’m documenting the process here.

we wanted to change sketch routes so that sketch URLs included the sketch username because that just makes more sense!

screen-shot-2016-11-30-at-5-51-42-pm

but within the editor, there are client-side routes and server-side routes.screen-shot-2016-11-30-at-5-53-56-pm

screen-shot-2016-11-30-at-5-53-28-pm

cassie explained the difference between these:

  • the server-side routes—which live in server.routes.js—render html. when a user initiates a session, they get data via these routes.
  • the client-side routes—which live in routes.jsx—render a react.js view. when a user doesn’t need a whole new session but just needs some data populated from a small portion of the editor, the interaction usually just makes an ajax request. an ajax request means that the entire page doesn’t have to refresh, so the new content gets loaded more quickly.

there is another set of server-side routes: the api routes, which are internal to the server-side. these endpoints serve JSON data, which is then used to populate react views on the front-end. we didn’t mess with api routes for this PR, but they’re important to know about.

in order to create our sensible new sketch routes, we edited 7 files in total but these were the 2 most important ones:

  • server/routes/server.routes.js
  • client/routes.jsx

so, in order, here’s how we did things:

  1. create a server-side route— /username/sketches/id —the response calls the function renderIndex() which renders the whole appscreen-shot-2016-11-30-at-5-49-53-pm
  2. create a client-side routescreen-shot-2016-11-30-at-6-07-31-pm
  3. then, we had to make sure that all the places in the web editor where you’d click to navigate to a particular sketch—from the sketch list, or to clone a project, or to share a project, or to create a new project, or to save a project—used the correct route to get the sketch you wanted. this is the kind of navigating within the app, as opposed to getting data from the server, that happens via ajax requests. here’s a photo of a link in the sketch list view so you have a sense of what i mean:screen-shot-2016-11-30-at-6-14-15-pm
  4. here’s how we changed the route in the SketchList.jsx file:screen-shot-2016-11-30-at-6-44-54-pmline 28 says: “if props.username is not undefined (so, it exists), then use it to build the route in line 68. otherwise, use props.user.username to build the route.”
  5. rinse and repeat for other places within the front-end where sketches are accessible from. review the pr to see them in detail.

things i found challenging:

  • knowing which react components had access to which props
  • the significance of step 2/the client-side route
  • wrapping my head around the api routes and how the JSON files at their endpoints ultimately get back to the front-end

ajooba!

is the project i’ve been working on with surya. it’s a website that hosts a video and tool that lets users dig into network packets. we’re getting into crunch time, so i’ve started filing issues in the repo to help me keep track of stuff i need to do/write. surya made a little annotated map of the app structure to help me wrap my head around everything:

├── app <- contains all the src for the front end
│   ├── App.vue <- The main ‘app page’. Contains the Toolbar and Console components. Will also contain the viz stuff when i get to t.
│   ├── Stack.vue <- old stuff that ive just left here for ref. right now
│   ├── components <- All the components of the app
│   │   ├── Console.vue  <- all css in _console.scss
│   │   ├── Sniffer.vue <- all css in _sniffer.scss
│   │   ├── Stack.vue <- old stuff that ive just left here for ref. right now
│   │   ├── ToolBar.vue <- all css in _nav.scss (meant to rename it but forgot!)
│   │   ├── third-party <- testing some libs not used yet
│   │   │   └── vue-drag-resize-rotate.vue
│   │   └── tools <- testing some stuff not used yet
│   ├── filters <- vue.js helper functions for formatting text
│   │   └── index.js
│   ├── main.js <- First thing to get loaded. This loads App.vue and has socket.io connections to the back end
│   └── store <- vue.js app state management stuff
│       ├── actions.js
│       ├── getters.js
│       ├── index.js
│       ├── modules
│       │   └── toolbar.js
│       ├── mutation-types.js
│       └── untitled\ folder
├── index.html
├── main.js <- back end main script
├── network-scripts <- back end scripts
│   ├── pcap-filters.js
│   ├── pcap-parser.js
│   └── tcp-test.js
├── package.json
├── static
├── styles <- csssssss

two paths

  1. a useful, practical app to automate uber incentive tracking, store data, and help prevent wage theft
  2. a speculative project, grounded in research, about facebook users as workers that imagines ux elements (buttons, etc.) and policies that would enable organizing and enshrine user/worker protections in law

notes from my meeting with alex

what i brought to the meeting:

things that have happened in the world:
– nodapl facebook check-ins
– instacart strike
– korryn gaines case, baltimore police and facebook collaboration

synthesis:
– re: korryn gaines, i am interested in facebook users mobilizing on the platform to demand accountability, much in the same way as workers would organize to leverage collective power to make demands of employers. however, when i share this with others, it doesn’t totally click. people don’t immediately “get” the facebook users as workers connection, even though after you say it, there is some recognition that it is possible.
– re: instacart, people working within the constraints of the platform itself to call attention to/organizing against/making demands around the misuse of the platform
– re: nodapl, using the platform itself to make demands around misuse of the platform or what the platform should be used for
– working within the constraints of these platforms feels like a kind of hacking that’s interesting to me

people doing work in this space:
– you
– turkopticon
– lightbeam
– do you know others?

these are potential starting points for my work:
– uber driver api (interesting because access is discretionary)
– chrome extension
– do you know existing organizing patterns? communication patterns?

my goals:
– i want to make something rigorous, but where outcomes are not the same as a commercial project. that puts this in “art” world? but where i can ask good questions
– you know how to ask good questions and how to know which questions are worth asking…

these are questions i have for you:
– what are the organizing affordances of these platforms that’s different from IRL organizing, aside from scale which is the one everyone points to

—————————————-

what i took away from the meeting:

Michelle Miller, coworker.org
Robyn Caplan, D&S

Facebook

– way of defining harm
– is there a precedent in consumer protection law?

**dedicated users**
– who wants to be advocated for?
– probably not casual users/earners

Uber
– what does “active” mean? different things on different platforms
– what does it mean that a customer or employee can be “deactivated”
– inventing new language, new vocabulary to obscure responsibility/accountability
– talk to companies who have access to the Driver API
——–> automate incentive tracking, prevent wage theft
——–> 3rd party account of drivers meeting expectations

Urban Hail
– Uber cut off their API access

System design critiques
– common in physics; people who worked on the atom bomb
– what are the ethics of working on grocery supply systems when those are mapped to human/employment systems?
– costs (political, human) of this mapping

Discretionary calls
– norms around being public square in conflict with norms around being a corporation

– discretionary access to controlled APIs (like Uber driver API, which has information about routes and fares) as a way of wielding power

Repos to review

the past few weeks

  • djt was elected president
  • i participated in 32 hours of training with tactical tech and mozilla leading up to working in the glass room, an exhibition and workshop space i’m so excited about
  • the tisch restroom policy committee met to start drafting a statement and signage plan for gender-neutral bathrooms throughout the building. it’s been heartening to work with professors and administrators who care about making tisch work for their trans and gender non-conforming students and colleagues.
  • i saw anna deveare smith’s tremendous show, notes from the field. trying to channel her generosity and energy the next four years++

undoing the demos

this is where i’ll collect quotes from wendy brown’s book undoing the demos that i think are relevant to my project of something something organizing, digital platforms, and labor:

“The transformation of labor into human capital and of workers into entrepreneurs competing with other entrepreneurs obviously obscures the visibility and iterability of class to an even greater degree than classical liberalism does. It also eliminates the basis for alienation and exploitation as Marx conceived them.” -p65

“Third, when everything is capital, labor disappears as a category, as does its collective form, class, taking with it the analytic basis for alienation, exploitation, and association among laborers. Dismantled at the same time is the very rationale for unions, consumer groups, and other forms of economic solidarity apart from cartels among capitals. This paves the way for challenging several centuries of labor law and other protections and benefits in the Euro-Atlantic world and, perhaps as important, makes illegible the foundations of such protections and benefits.” -p39

project studio road map til semester end

MEETINGS/OUTREACH

  • meet with alex 11/8
  • follow up with media justice center

RESEARCH/SYNTHESIS

  • read 3 papers ahead of 11/8 meeting
  • pull quotes from ‘the undercommons’
  • pull quotes from ‘undoing the demos’
  • go back to my performance of politics paper and the undercommons

WRITING

  • start conceptual scaffolding for thesis:
  • why labor has changed (wendy brown)
  • modes of resistance (the undercommons), discussion of the differences/overlaps between art, tech, spec design, advocacy
  • outline of existing tools in this space/inspiring projects
  • outline of existing opposite-inspiring projects

DESIGN

  • prototype a chrome extension for facebook? uber?
  • prototype an automated script for facebook? uber?
  • prototype an ad for facebook? uber?

ALREADY DONE

  • apply to d&s workshop on labor