TIL

You can quickly get an ordered list of ids or values by joining to a temporary table.

SELECT f.id, dbo.professors.* FROM dbo.professors
JOIN (VALUES (33),(33),(33),(90),(90)) as f(id)
ON f.id = dbo.professors.professor_id;

id  professor_id name
33  33           Sir Isaac Newton
33  33           Sir Isaac Newton
33  33           Sir Isaac Newton
90  90           Carl Sagan
90  90           Carl Sagan

It's been a good month for destructuring. Building on the previous revelation, you can set parameter defaults with destructuring.

function showConfig({ tabSize = 2, theme = "Nord" } = {}) {
  console.log(`Theme: ${theme}, Tab Size: ${tabSize}`);
}

showConfig({ tabSize: 4, theme: "Monokai" }); // Theme: Monokai, Tab Size: 4
showConfig({ theme: "Monokai" }); // Theme: Monokai, Tab Size: 2
showConfig(); // Theme: Nord, Tab Size: 2

I learned today that you can destructure variables as part of a function declaration or as part of a for-of loop:

function getHeight({ height }) {
  return height;
}
getHeight({ width: 10, height: 200, depth: 7 }); // 200

const points = [
  { x: 3, y: 4 },
  { x: 5, y: 5 }
];
for (let { x, y } of points) {
  console.log(`distSq = ${(x ** 2, y ** 2)}`);
}
// distSq = 25
// distSq = 50

Many linters check for functions to exist before they're referenced. With circular calling, you need to declare a function before it's defined. TIL this is called forward declaration.

var bind = function bindForward() {};

function ajax(url) {
  load(url).then(bind);
}

bind = function bind() {
  $("a").click(ajax);
};

When destructuring, JS only assigns the deepest nested keys:

const req = { query: { person: { first: "Chris", last: "Hallberg" } } };

const {
  query: {
    person: { first, last }
  }
} = req;

console.log(query); // undefined
console.log(person); // undefined
console.log(first); // "Chris"
console.log(last); // "Hallberg"

You can also assign names that don't match the keys you're grabbing. Just be careful with your brackets.

const req = { query: { data: "apples" } };

var { query: data } = req; // rename query to data
console.log(data); // { data: "apples" }

var {
  query: { data }
} = req; // destruct data from query
console.log(data); // apples

Warning: In browsers, name seems to be assigned to "[object Object]" somewhere along the line, so be careful.

I couldn't find any official way to get debugging info from the Oculus Quest since it only connects over Wi-Fi (if at all) and the SteamVR logs don't pick up anything.

So I dropped a text element into the world and used that as my string log. You can put this element inside the camera if you want it to be visible as a UI element, but I didn't do that.

<a-text id="log" value="Hello!" color="#000" align="center" position="0 2 -5"></a-text>

const logEl = document.getElementById("log");
function log(msg) {
  logEl.setAttribute("value", msg);
}

// For updating messages
function debug() {
  requestAnimationFrame(debug);
  log(blueGun.object3D.matrix.toArray().join(","));
}
requestAnimationFrame(debug);

// For everything else
try {
  // do a backflip
} catch (e) {
  log(e);
}

I have a few game concepts that involve pulling the player along or changing their view but trying to override the default WebVR camera is a pain.

If you do manage to get control of the camera (either with groups or with rigs) you need to then manually ensure you draw both eye "cameras" anyway. It's just more work that it's worth when you can move the whole world instead!

A heirachy like this makes this quite easy to do:

- scene
  - camera
  - world
    - hand controllers
    - all physical items

Thank you, Stefan Judis for the idea and encouragement.