A Little Bit of Stable Diffusion

I’ve been looking into the infinite canvas as a design element. Applications like Figma, Excalidraw and Miro have perfected its implementation. Since most of my experiments use art as the subject, my most recent builds on a previous experiment – Artist Search Widget. Built using the Google Knowledge Graph Search API, it takes advantage of one of its key features, predictively completes elements in a search box.

For now, I’ve just set up the basic user interface and implemented a simple (albeit buggy) drag and drop feature.

Avocado, No Toast

Four years ago, I had the honor of running a hands on workshop at the second annual Afrotectopia Conference, held over a jam-packed summer weekend in August at Google NYC. The workshop was called, Intro to WebVR with A-Frame. WebVR was a JavaScript API that allows VR experiences to run in a web browser on VR headsets, mobile phones and tablets, and regular computers. It has since been deprecated and replaced by the WebXR Device API. At the time, I chose to teach the workshop participants A-Frame for a couple reasons:

1. Accessibility (cost and open source ecosystem)

2. Easy to share and publish content

A-Frame is an abstraction of three.js, another JavaScript library that uses WebGL API to render 3D graphics in the browser. Simply put, it is an HTML webpage that includes the A-Frame library, making it super simple for a newbie to get started.

Intro to WebVR with A-Frame (August 2019)

Participants worked on a live coding project where they learned the basics:

1. Create a simple virtual reality website (using HTML)

2. Learn the basics of the A-Frame library

3. Work with primitive shapes like cubes and spheres (which they later swapped out for 3D assets)

Why Learn (and Teach) VR?

As a former architect,  urban planner and now product-minded  technologist I found myself uniquely poised to harness my spatial design and thinking skills. At the time, I was teaching a software engineering immersive course and my focus was squarely on the browser. Building and teaching others how to build this simple game was my initial foray into leveraging my body’s physical inputs — head and eyes — to interact with the computer.

How Can I Build Avocado, No Toast?

To learn how to set up a boilerplate WebVR project using the A-Frame library, check out the step-by-step instructions here.

Writing Commit Messages

I’ve recently started working at a startup company in New York City (read: four days) and as a new Software Engineer to the team, I’ve been thinking about the good practices I want to put in place for myself and the engineers who start after me — to make their on-boarding process easier. Today, I had to commit a few minor changes I’d made along with the assistance of my Tech Lead, to the product I’m going to be working on over the coming months.

In the past, I’ve written commit messages using what I thought was a standard format:

$ git add .
$ git commit -m "initial commit"
$ git push origin <branch name>

On one of the many on-site job interviews over the past two months, I learned about a different method of committing code. First, commit each file individually, then:

$ git add app.js
$ git commit

That’s it! This command opens up vim editor where you write your commit message. If you’re not used to vim, this part might be a bit tricky but just follow me :-)

1. Press the letter i to enter insert mode

2. Start typing the title of your commit message

3. Once completed, hit ESC

4. Finally, press :wq to save the file and exit the editor

When writing a commit message, convention is to summarize the entire commit on the first line in less than 50 characters, leave a blank line, then a detailed explanation of what’s been changed.

Afrotectopia Festival 2019

This year, I was fortunate to be able to participate in the Afrotectopia Festival at Google NYC. If you haven’t heard about or attended this conference, I strongly recommend you do.

Another Amazing Creative Coding Festival

Last year, I attended my first Creative Coding Festival at NYU ITP and vowed to become a repeat attender. So, when the call came out for workshop presenters a few weeks ago, I jumped at the chance to give a talk on WebVR with A-Frame (an easy to use and open source virtual reality web framework). The code cane be found here.

Creative Coding Festival NYC

The workshop focused on setting up a basic interaction for a simple WebVR game application.

Talking Heads

Janelle Monae's 'What's Your Frequency?' at 29Rooms vs. Lynn Hershman Leeson's “Mirror Face Woman,” 1966

React & Mapbox | A Map Made in Heaven, Part 3

In the previous post, React & Mapbox: A Map Made in Heaven, Part 2 we walked through creating the Map Component and importing it into the App Component. This post explains how to fetch external data from the New York City Open Data website.

Fetching Open Data with axios

React relies on third party libraries to fetch data. Today, we'll be using a library called axios, a promise based HTTP client for the browser and node. Let's install the module now, create the folder and file that will contain our database logic:

$ yarn add axios

For this project build, we are going to use an API endpoint of NYC Post Office open source data.

NYC Open Data

Grab the API Endpoint and look over the list of field names. These are the column names for the properties available on this dataset. The Socrata Open Data API documentation has more details on how to filter and query the incoming data.

Step 1 — Import axios

Here, we're using axios instead of the native fetch API. Install axios in the Map Component with the following:

import axios from 'axios'

Similar to fetch(), axios returns a JavaScript promise; however, now you don’t have to resolve the promise two times, because axios already returns a JSON response for you. Furthermore, when using axios you can be sure that all errors are caught in the catch() block.

Step 2 — Set the initial state to contain a property called postoffices

constructor() is basically a function that invokes when an instance of our class gets initialized. When we call super() we're basically saying invoke the same constructor function that the React library defines for their constructor. In addition to that initialize a state for this component in which buildings is a property and set its value as an empty array. We can then set the state any other time in our application using .setState().

constructor(props){
  super(props)
  this.state = {
    postoffices: [],
    this.state = {
    ...
    }
  }
}

Step 3 — Use 'getPostoffices()' to make the NYC Post Offices API call

getPostoffices(){
  // fetch API data in here
}

First, we’ll set the API endpoint to a const as a global variable in our Map Component.

In the getPostoffices(), we'll load the POST_OFFICE data. componentDidMount() is invoked immediately after a component is inserted into the DOM tree and is a good place to instantiate the network request.

const POST_OFFICE = 'https://data.cityofnewyork.us/resource/bdha-6eqy.json';

axios
  .get(POST_OFFICE, {
    // this limits the number of objects returned to 10, as per Socrata documentation
    params: {
      $limit: 10
    }
  })
  .then((response) => {
    const postoffices = response.data;
    this.setState({
      postoffice: postoffice
    });
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

The response we get from the API contains an object called data and that contains other objects. The information we want is available in data.results, which is an array of objects containing the data of individual landmarks. In the promise of that request we set the state of this container component to have landmarks be the value returned from the response. Any time setState is invoked the component re-renders.

Call the getPostoffices() function inside of the componentDidMount() method:

componentDidMount() {
  this.getPostoffices();
}

Alternatively, this can all be done inside the componentDidMount(), combining the previous two steps.

The Eyes Have It

The other night I was watching an old Alfred Hitchcock movie called Spellbound starring Ingrid Bergman and Gregory Peck. The movie interested me because some of the set design was a collaboration between Salvador Dali and Hitchcock himself.

This particular "dream sequence" in Spellbound (see image 1) reminded me of the production designs of Josef Svoboda, the Czech artist and scenic designer, for Laterna Magika (see image 2).

Shortly after becoming familiar with the works of Svoboda, I came across this instagram post from a concert goer for Katy Perry's Witness Tour concert. I'm still figuring out who designed it, maybe Es Devlin.

React & Mapbox | A Map Made in Heaven, Part 2

In the previous post, React & Mapbox: A Map Made in Heaven, Part 1 we walked through creating a Mapbox account, creating a react application using the Facebook tool – create-react-app – and creating a simple App component. This post will walk through building out a Map component and importing it into the already existing App component.

Step 1 — Creating the Map Component

Install react-map-gl, a wrapper for Mapbox GL that was created by Uber.

In Terminal, run the following code:

$ yarn add react-map-gl

Uber has provided some boilerplate code to get us started. Let’s break down the following lines. First, we need to import React methods and the Component class from the React library. Then, import React methods from the Mapbox library; we're going to be using the Popup and Marker methods.

Next, we instantiatiate the component we're creating. In this case, it’s called Map and it’s extending the React Component class. As you know, a React component can access dynamic information in two ways: props and state. Since a component is able to decide its own state, in order to make our Map component have state, we must give it a state property and declare it inside the constructor method.

import React, {Component} from 'react';
import ReactMapGL from 'react-map-gl';
    
class Map extends Component {
    
  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  };
    
  render() {
  
     const { viewport } = this.state;
     
    return (
      <ReactMapGL
        width={viewport.width}
        height={viewport.height}
        latitude={viewport.latitude}
        longitude={viewport.longitude}
        zoom={viewport.zoom}
        
        onViewportChange={(viewport) => this.setState({viewport})}
      />
    );
  }
}
    
export default Map;

The render method is what renders the component to the browser, so it controls what is displayed for this component. From this function, we return what we want to display. In this case, we are rendering the Mapbox map component <ReactMapGL /> and including the viewport properties.

The onViewportChange callback is fired when the user interacts with the map. User interaction and transition will not work without a valid one.

The export exposes the Map class to other files. This means that other files can import from this file in order to use the Map class.

The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly. Therefore, in the public/index.hmtl file, add the Mapbox stylesheet to the head:

<!-- index.html -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />

Step 2 —Complete the ReactMapGL Component

Use the following Github repo as a guide and set the Mapbox token variable in the index.js.

const MAPBOX_TOKEN = '';

There are several ways to provide a token to your app. In this example, we're passing it as a prop to the ReactMapGL instance

Another recommended way is using the dotenv package and put your key in an untracked .env file, that will then expose it as a process.env variable, with much less leaking risks.

Put the API key in a .env file:

REACT_APP_MAPBOX_ACCESS_TOKEN='key in here'

Then, set the MAPBOX_TOKEN variable as follows:

const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

Interactive Map Properties

This component renders MapboxGL and provides full interactivity support. It is the default exported component from ReactMapGL and we need to set up the following properties on the map:

• mapStyle: several basic templates are already provided by Mapbox here, but you can also design your own on their Studio Platform

• viewport: you can specify latitude and longitude of the object that you want to define the center of your map, as well as how zoomed in on that object you want to be.

• mapboxApiAccessToken: once again, it’s important to obtain your unique token to access the Mapbox API

render() {

...

    return (
      <ReactMapGL

        ...

        mapStyle="mapbox://styles/mapbox/light-v9"
        onViewportChange={(viewport) => this.setState({viewport})}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
    );
}

Step 3 — Import the Map Component into the App Component

import Map from '../Map';

...

    <div className="App">
      <Map component={Map} />
    </div>

React & Mapbox | A Map Made in Heaven

What is Mapbox?

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. A WebGL map brings the possibility to render vector tiles on the client side, this way we get all the data accessible on the browser and we can interact with pretty much everything on the map.

Step 1 - Create a MapBox account

If you don't already have a Mapbox account, sign up for one here.

In order to show maps from Mapbox you need to register on their website in order to retrieve an access token required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.

Later we will use the dotenv package module to hide your environment variables (in this case, our Mapbox access token) and then we’ll put that in our .gitignore file so that hackers can’t abuse our tokens.

Step 2 - Create Directory

Create a directory to initialize the map. Here, I'm using create-react-app to create a skeleton React project. The following code creates a new directory to store the app you're about to write, then cd into the folder.

$ create-react-app my-react-map-project

or

$ npm init react-app my-react-map-project

$ cd my-react-map-project

It will create a directory called my-react-map-app inside the current folder. Inside that directory, it will generate the initial project structure:

my-react-map-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Inside the package.json file, you will see several scripts have been provided that allows you to run several commands from Terminal:

yarn start. Starts the development server.

yarn build. Bundles the app into static files for production.

yarn test. Starts the test runner.

yarn eject. Removes this tool and copies build dependencies, configuration files and scripts into the app directory. Beware: If you do this, you can’t go back!

You will also see that several dependencies have been installed: react, react-dom and react-scripts. Use yarn start to start a server that will serve the React application. This opens the app at http://localhost:3000.

The browser should now display the words "Hello World!"

Now, modify the App Component to reflect the following changes in the return().

import React, { Component } from "react";
import "./style.css";

class App extends Component {
  render() {
    return (
      <div className="App">Hello World</div>
    )
  }
}

export default App;

Our environment is set up and now we're ready to develop our map component.