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…

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]}]

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…

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: …

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'…

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…

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…