Keeping it simple on the cutting edge, with Ada Rose Cannon

Ada is a developer advocate and senior developer at Samsung. Previously a PlayStation developer, Ada now dedicates her time to pushing the limits of WebVR, and experimenting with client-side APIs.

Time Stamped Show Notes

0:47 – When Ada isn’t writing code, she’s usually attending conferences, speaking at events, or watching films. She’s really interested in WebVR, so she enjoys spending time trying out new demos and playing video games.

1:07 – Right now, Ada is really interested in the WebXR API which is being managed by the Immersive Web Community Group. It allows you to build fully immersive experiences and works with almost any VR headset that can connect to a browser.

1:39 – Ada is also interested in HTML and how developers can start building dynamic software using declarative technology. Lately, she’s been researching web components to see how to build modern web apps using HTML, CSS, and JavaScript.

2:12 – Despite a few teething issues, Web Components are gaining traction. Ada uses a combination of the official Polyfill and the ShadyDOM CSS polyfill.

3:19 – One of Ada’s favourite libraries right now is A-Frame. It’s essentially a web component wrapper for three.js, and three.js is an abstraction library for WebGL. Ada says that three.js makes writing raw WebGL easy.

3:55 – Anyone with experience only in HTML can learn A-Frame quite easily and start building with VR. Ada thinks it’s amazing that A-Frame uses web components but doesn’t actually use any of the scoped CSS or ShadowDOM aspects of it. The custom components A-Frame generates aren’t used to change anything in the DOM; they just add elements to the three.js scene in JavaScript.

5:42 – Ada would like to see developers building suites of web components rather than full websites, so that designers who know CSS and HTML can use them to put together full layouts.

6:12 – When Ada was a child, she used to make simple games in the browser using IE5, Firefox, and One Day. This is what inspired her to get into graphics.

7:15 – After working as a Playstation developer, Ada moved to The Financial Times where she improved her web development skills and had the opportunity to work on some VR projects.

8:06 – You can already build augmented reality projects in the web using libraries that give you access to the camera and accelerometer.

8:17 – The WebVR Standard was recently renamed the “WebXR Standard” to include mixed reality, augmented reality, and virtual reality. Ada thinks that it will form part of the standard toolkit of the web in the future.

8:54 – AR hardware is going to be the future of immersive media, because many people don’t like the isolation of VR.

9:31 – Glitch has become an invaluable part of Ada’s workflow. It’s an online code editor like CodePen or JS Bin, but with access to a full virtual machine with a Node environment setup.

10:13 – Ada loves that Glitch allows you to “remix”, meaning you can get a copy of a project’s source code, edit it, build something of your own, and then share it again.

11:01 – Because Ada does a lot of rapid prototyping, she became frustrated setting up new build environments all the time. She also didn’t like explaining everything to other devs before they could work on her code.

11:53 – This frustration caused her to change her approach. Now Ada uses HTML, CSS, and JavaScript on the frontend and doesn’t transpile any of her code. She uses ES6 if she’s building something that needs to work only in a few browsers, and adds a transpilation step if it needs to work across many browsers.

14:41 – Ada is really excited about Comlink by the Chrome team. It allows you to expose an API through post message and provides an asynchronous API to your function calls. Not only does it work between a web worker and the main page, but it also works across domains. This is incredible because it means we can make API’s that work entirely in the client side without touching the network. Plus, with service workers, you don’t even need an active network connection to make an API request.

18:27 – Ada is interested in developments in Web VR, new ways to think about the declarative web, and anything that changes the way developers work on the frontend or in the browser.

19:12 – A talk by Jeremy Keith inspired Ada to rethink the power of declarative languages. She believes that the beauty of HTML is that it is forgiving. Rather than using HTML as a render target, she uses it to describe what she’s building. Then she uses CSS for styling, and JavaScript to bring everything together.

Quickfire Questions

22:16 – Best advice about programming
It’s more important to get something out there that works than it is to get it perfect.

23:09 – Habits for writing better code
Use linting to create neat, readable code. Get to know your tools well and set them up in a way that suits your process. Become comfortable with CSS.

25:03 – Book
“JavaScript Patterns: Build Better Applications with Coding and Design Patterns” by Stoyan Stefanov.

25:29 – Inspiring devs
Lea Verou. Her Mavo library is amazing and so is her book, “CSS Secrets”.

26:00 – How to learn to code from scratch
Get started with a basic A-Frame setup; tweak it, have some fun with it, and then expand upon it.

26:47 – How to work smart
Compartmentalise your code into reusable chunks. As soon as you build something that you’ll need more than two times, make it reusable.

Tools, Tips, and Books Mentioned

• WebXR

• Immersive Web Community Group

• Web Components

• Polyfill

• ShadyDOM

• A-Frame

• three.js

• WebGL

• Glitch

• CodePen

• JS Bin

• Node.JS

• ECMAScript 6 (ES6)

• Comlink

• “JavaScript Patterns: Build Better Applications with Coding and Design Patterns,” by Stoyan Stefanov

• Mavo

• “CSS Secrets,” by Lea Verou

Contact Ada

• Twitter: @Lady_Ada_King