A step by step guide on setting up a new A-Frame project in React

A-Frame is a great way to get into developing VR, especially for those who come from a Javascript background. For those who dont know what A-Frame is, here is the official description taken directly from the first paragraph of “What is A-Frame” on their website:

A-Frame is a web framework for building virtual reality (VR) experiences. As originators of WebVR, the Mozilla VR team developed A-Frame to be the easiest as well as the most powerful way to develop WebVR content. As a fully open project, A-Frame has grown to be one of the largest and most welcoming VR communities.


An unofficial cheatsheet and FAQ

A -Frame React Stories Demo

A-Frame is a simple, lightweight yet powerful tool to build awesome web VR applications. If you are not familiar with A-Frame and want to know more, click here to go to the official site and see all the demos. This article will cover the fine print that is not included or extremely hard to find in their docs, and what we learned when we built the npm module: aframe-react-stories.

<a-assets> can ONLY live inside <a-scene>

<a-assets> cannot be placed inside <a-entity>. It can only be placed inside <a-scene>. If you’re using a library like react or a framework like angular, this may cause you some trouble…


Including takeaways, tips, and tricks

React VR hello world starter

Getting Started

Getting started with React VR is extremely easy. Follow the steps in the documentation linked below and you’ll get the hello world running in 5 minutes or less.

X, Y & Z axes

If you look inside the <text> tag in “index.vr.js” file, you will see an item called transform, like this:

transform: [{translate: [0, 0, -3]}]


Tips on quickly debugging async bugs

When a bug occurs in a complex web asynchronous promises and ‘unpromisifiable’ callbacks, it can kill a lot of brain cells trying to debug it.

Here is an example taken from this twilio blog post about a async, await.

var request = require('request');function getQuote() {
var quote;

request('http://ron-swanson-quotes.herokuapp.com/v2/quotes',
function(error, response, body) {
quote = body;
});

return quote;
}
function main() {
var quote = getQuote();
console.log(quote);
}
main();

In this example, the console will log “undefined” instead of the expected quote. The response from the request will come after the rest of the code gets executed.

Simplest way to debug

The simplest…


Quick basic tutorial on the “Fetch” api

Fetch: ES6’s more elegant version of AJAX that uses promise. It is often confusing when you first use it for anything that is not a simple “GET” request. Here is a link to the docs about “fetch” on MDN:

The basic structure of Fetch:

fetch(<url>, {parameters object});

The parameters object is where you include all the content of your “request”. For example: commonly used parameters like method, headers and body all belong in there. Here is an example fetch at its simplest form:

fetch('/', {
method: 'GET'
});

Let’s try something more complicated:

fetch('/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({body: …

And their solutions

MongoDB and Mongoose are commonly used with Node JS projects. In this article, you’ll find a small list of pitfalls that can be easily avoided and save you hours of debugging time.

If you are new to Mongo and Mongoose, I highly recommend the Mongoose quick start guide:

Everything in this article will be loosely based on the examples given in the quick start guide.

Pitfall #1: Overthinking the guide

When reading the quick start guide, adding a kitten named ‘Silence’ feels like creating a new collection instead of inserting a document into the kitten collection.

So this:

var silence = new Kitten({ name: 'Silence'…


Plus bonus tips on escaping

Typically in Angular, you have a main view, and multiple models. Life is great until you have one function written in the main view that is supposed to manipulate the content in a child model. How do you do pass that function to the child component? For those who are unfamiliar with Angular, passing data between the components is often confusing.

At the end of this article, there are some bonus tips on getting rid of the errors that often pop up when concatenating links.

The Starter Code:

It all starts with the main view. You probably have something like this:

.controller('appCtrl', function…


Four steps to avoid debugging hell.

Example problem: Run a filter on every value of a tree of numbers in breadth first order, and return an array of values that are true. The filter takes in two arguments: value and depth; and returns true or false.
This problem will be done this in javascript.

Step 1, Figure out what the problem is:

Sometimes the problem is easy, most times it’s vague. Grab a whiteboard or a notebook and draw, list, or scribble all the important points of the problem until you have a good idea of what the expected output is.

For this problem, let’s make a list of all the important stuff:
-Traversing down…

Alexander Schnapp

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store