Ada.is

Adding physics to Virtual Reality and Augmented Reality scenes greatly improves the illusion of immersion. For VR it gives the user the…

This guide came together to cover how the physics work in the Augmented Reality Basketball Game:

bARsketball

Shoot some hoops in your own home with Augmented Reality! xr-basketball.glitch.me

The component I use for physics is called [aframe-physics-system](https://github.com/n5ro/aframe-physics-system) this works best with ammo.js but needs a bit of configuration to use.

A beautiful VR garden with peaceful music. Listen with headphones for the full effect.

An augmeted reality roller coaster you can design yourself in your own home.

Shoot some hoops in your own home with Augmented Reality!

These 4 new features are easy to use and will greatly improve your AR experience

AFrame has had the ability to work in AR for a long time but it was pretty difficult to do it well requiring developers to interface with WebXR directly. Recent upgrades to AFrame make it easier provide new components so you can do high quality AR on the Web easier than ever before.

To get started quickly remix the example the below, for more information about how the different pieces work carry on reading:

Many Websites provide multiple language variations allowing users to comfortably use the site without relying on machine translation. When you making this website into a Progressive Web App you have a choice to make:

Do you have a single PWA for all languages or do you make a PWA on a per language basis?

It’s easy to mistakenly apply the restrictions of Apps to PWAs, due to the additonal cost and work required in submitting your native app to app-stores many companies provide a single app which can be configured from the inside.

Embracing the spirit of responsive design and accessibility to support the next generation of devices

Embracing the spirit of accessibility & responsive design to support the next generation of devices

Year on year devices get more varied and integrate into our lives in different ways. There is a trick to supporting these new devices on the web (at the end of the article 😉.) But it’s important to learn from our past mistakes.

Before responsive design

In 2007–2010, during the start of the mobile phone boom, the web was facing a fork in the road. These devices were able to access the standard desktop-only web. This new mobile format of devices gave web developers a problem. How do you support both large screens with mice and keyboards, and small touchscreen devices?

Using AFRAME, THREE.js and WebXR to build a game during a 4.5hr live stream.

Here is a .gif (jiff?) of the final game, click here to play the game. It uses the WebXR DOM Overlay API, and the WebXR Hit Test API. So right now the best way to play it is in Mobile Chrome or Samsung Internet Beta.

A virtual ball being shot into a virtual basketball hoop.

If you want to watch all four-plus hours of the live stream the URLs are here:

Part 1: https://youtu.be/ee7PPDmPuqY

It’s really useful but there are a few pitfalls to avoid.

IFrames are really useful for WebXR. Often WebXR web pages are large with a lot of code and many 3D frameworks default to taking up all the available space on the page. IFrames solve these issues by letting you put all the XR code into another webpage, which can even be on a different domain, they also let you choose exactly how much space they take up on the page and can be used with Flexbox and CSS Grid.

There are some very important things to be aware of before you can get it working though:

My Three Fave Tools in my Web Development Swiss Army Knife

I’ve been doing this for a long time so here are some tools you may not have seen before.

These tools are not ones I use everyday but they have got me out some really sticky situations. I hope you find them useful too.

1. ngrok

Ngrok gives you http tunnels to your local machine. Letting you test your local environment on devices not connected to your local network. This is incredibly useful for when you cannot attach the device to your local network.

My first major PR to Three.js

I recently made a relaxing koi garden demo, where koi fish swim around a VR environment. The two most notable parts of the scene are the 3D positioned audio which I wrote about previously and the 100s of fish which appear to organically swim around the trees.

The 3D models of the fish bend as they turn tight corners. This effect is great for organic models that travel along fixed paths such as birds or fish.

For my fish scene I had found a really cool demo which could be adapted for my needs. The author was willing to make a THREE.js example, but hadn’t got around to it. When I adapted it for myself I made it a general purpose module which can be brought in to abstract away lots of the complexities. I then submitted this to THREE.js as an example to be used by anyone.

Tips, tricks and getting started.

Audio is a fundamental way of adding important theming and immersion to games and virtual reality experiences on the Web. It’s not too hard to add but can do wonders for giving the user a wonderful experience. Resources like Freesound make it easier to find Creative Commons sound effects and music so there is no excuse to leave your experience silent.

I recently created a relaxing VR experience which made use of 3D spatial audio for it’s procedurally generated music. This article covers some of the things I learned when building the audio aspects of that experience.

HTML and Templates & JavaScript Template Literals

HTML and Templates & JavaScript Template Literals

HTML in the Web is often made of reusable components, composed by templates, making it convenient to edit the different parts that make up a website. There are many templating languages used in the web such as handlebars, Pug, Vue and JSX; these are primarily used for composing HTML. Modern JavaScript has templating syntax built in which can use for all kinds of purposes including composing HTML.

Push notifications have a terrible reputation but if done well can give your users a positive experience.

You know that thing where you go to a web site then before you can do anything you have to acknowledge the push notification request. Do you hate that? Yeah, me too.

Jo Franchetti even wrote an entire article about the crisis of websites bombarding people with permission requests and dialogs when they first arrive on the page.

A Crisis of Permissions

I ❤ the internet. By visiting a URL I can have access to information, learn new skills, interact with friends, shop…medium.com

Make your app a Web Share Target to enable

This was a feature I had set aside an afternoon to implement but in the end it only needed a moment and made the experience significantly better.

Web Share Target allows your Web App to receive URLs from the operating systems just like native apps do.

In the video below I use the share button in Samsung Internet to share the website’s URL with my Web App, which then retrieves and displays the associated feed information from the website.

Samsung Internet 12.1 Beta adds support for Augmented Reality — here’s how to try it out today

Edit: This has now landed in Samsung Internet stable. You can download here.

Last week we told you about our latest Beta, 12.1, which offers a host of quality-of-life improvements for end users. We’re also really glad to announce that with this beta we are also shipping modules for the WebXR Device API that enable Augmented Reality (AR) content to be built right in the browser: including the “hit test” module. Hit testing allows you to detect the position of the real world at a single point on the screen which can be used correctly position virtual objects in the real world.

A bad practice but sometimes there is no alternative.

Last time we introduced about Deno and discussed how it compares to node, like node, Deno is a server side code-execution environment based on web technology.

Node uses JavaScript with commonjs modules and npm/yarn as it’s package manager.

Deno uses Typescript or JavaScript with modern javascript import statements. It does not need a package manager.

To import a module as usual in deno you reference it by URL:

We can’t guarantee our users have a good internet connection but we can still be helpful when they don’t.

In ideal conditions the user will always maintain a good connection to the web but things are seldom ideal. Fortunately since we’re been building a web app we have a service worker which has the capability of caching network responses.

If the network fails or takes too long to respond we can then use these cached responses to show the user the page they were looking for, letting people continue to use the app despite not being connected. Unfortunately our cache isn’t always perfect. Sometimes the user will be trying to go to a page which hasn’t been cached yet.

Going places in VR

In VR, with an advanced headset, one can explore a scene by walking in the real world. We’re often limited to the size of the room we’re in but the VR world can go on forever!

When you add a virtual method for moving around the scene, it lets users explore your VR scene even if their headset or their environment doesn’t allow them to walk around. This is sometimes called locomotion or teleportation.

In this example, I’ve used a guide line to show where the user is going to jump to:

Smoothly adding, removing, resizing and reordering elements

A common misconception in Web Development is that the DOM is slow. The DOM, short for Document Object Model, is the structure of the Web Site which your code interacts with. If you were to ask me whether the DOM is slow I would answer that, like most things in computer science, it depends on the circumstances.

What makes changing the DOM slow is once you have changed an element the browser has to measure the new size of each element, then has to redraw all of the elements that changed. This is always moderately expensive but modern browsers are smart about caching these calculations, invalidating as little of that cache as possible once a change is made and only doing the calculations at the last possible moment. So if you make a change to the page the browser won’t measure the new sizes until you request for it to measure them or it has to redraw the page for the next frame. If nothing has changed then it does not need to remeasure, it can use the cached values.

I built this demo as a quick experiment when we were working on an Internal Samsung product. One feature I implemented was the menu where items reveal themselves as you scroll down.

This is a perfect use case for IntersectionObserver, the API which tells you when things enter the screen.

You can try this demo live on glitch, and I have pasted a GIF below:

The final demo

Writing the Demo

First build the HTML and CSS, which in this case is a list:

HTML

<ul>

Using IntersectionObserver and history APIs

In the previous article we built a magazine style page layout of horizontal scrolling panes using only CSS and HTML, link to the demo. This works really well and is great experience with touch and mouse.

Horizontally Scrolling Panes with clean HTML and modern CSS

This used to be a really hard problem, new CSS tools make it simpler. Here’s how it works…medium.com

There are some improvements we can make by being aware of what the user is currently looking at. The two which are most important are displaying what article is currently in view in the navigation element ( <nav> ) and ensuring that the history is correctly updated so that the back and forward buttons work.

This used to be a really hard problem, new CSS tools make it simpler. Here’s how it works…

Isn’t it nice when the tools you work with get better and better when you’re not looking? That’s what it feels like working in the Web some days.

Many years ago when I was still a front-end engineer on real products, I helped maintain a very popular newspaper site. It was one of the very early Web Apps designed to be responsive and touch first.

Since it was a newspaper the aesthetic had pages sat next to each other which could be swiped between with a flick of a finger.

Writing the shader, generating the surface details.

Generating a water effect, part 1. SVG and Canvas

This is a 3 part breakdown of how this water effect works, you can view the finished demo here…medium.com

In the first part of this series we looked at generating the texture that goes on top of the water which looks like this, using SVG and canvas:

Output image of the first article. A tiling pattern made of black blobs.

We can now use this texture when writing our shader.

A guide to remote debugging with Samsung Internet

As desktop browser developer tools improve continuously, the responsive design modes are incredibly useful for testing out designs on other screen sizes such as tablets and mobile phones. For web developers, it can be tempting to rely on these tools for full end to end development, but I want to highlight the important of testing on real devices.

Real devices can often surprise you with the amount of available screen space. The browser’s chrome, the bits surrounding the screen to assist with web browsing such as URL bars and menu bars as well as the phone interfaces, will further reduce the amount of space available.

This is a 3 part breakdown of how this water effect works, you can view the finished demo here: https://a-toon-ocean.glitch.me/

Source code for this first part is at the bottom of the article.

It was partly inspired by the water effects in Zelda Wind Waker.

Screenshot of the finished demo.

The first thing we need to do is make a good texture for the water. This is a picture to make these lines on the surface of the water. If you look carefully you’ll see it is a repeating pattern, but the picture is carefully designed to hide that fact and there are tricks we can use later on to hide it further.

Basis Universal is a new image format designed to produce very small file sizes and to be decoded on graphics cards instead of on the CPU, making it very fast to decode and perfect for WebGL scenes. Support for this is very new and requires the latest THREE.js 106.

As a demonstration of how efficient Basis is, I bought an 8000×4000px¹ image to be my skybox. Normally this would take a long time to download and take up a lot of texture space. Basis is both smaller to download and takes less space in memory whilst the game is running, allowing games to have 6–8× more textures!

A mistake consistently made by some of the biggest websites shows they are thinking about responsive web design incorrectly.

On this Samsung Internet blog we often talk about building progressive web apps, one cornerstone of building web apps is responsive design. Responsive websites can behave correctly regardless of screen size. It is the recommended behavior for website’s from the UK governments digital service team:

Making sure your service works well on mobile

Your service should work well on all mobile devices. Evaluate your options carefully to find the most suitable solution… www.gov.uk

Using the CSS Houdini Paint API to show a 3D Model!

Using Houdini Paint API to Render a 3D Model

That’s f*cked up

— Daniel Appelquist, co-chair of the W3C Technical Architecture Group

The demo in this article uses the Houdini paint API, which is a part of the larger Houdini spec. Houdini is still coming to browsers but is ready to try out.

In this article I hope to inspire you to try out the Houdini Paint API. It’s really fun, and you can see just how powerful it is. Here I do something which looks cool but isn’t the most optimal way to show 3D models in the Web, but I hope it inspires you to see how far you can take the Houdini APIs.

Web Workers in the Real World

Comlink simplifies using web workers and makes them safer to use but beware these hidden costs.

I wrote this article whilst building a demo website which uses both expensive physics and an expensive SVG filter. It was important that it felt really tactile on mobile devices, so it had to run very smoothly.

Running both the physics and the SVG filter in the same thread was too expensive so I moved the physics into a Web Worker to take advantage of the available resources.

Ever feel like you live in a terminal?

I don’t mean an airport terminal (I’m stuck in the SFO terminal whilst I type this.)

I ‘m talking about the computer terminal, to run command line applications. When I am doing development it feels like I run the same few commands over and over again.

If you are a terminal power user you probably run multiple windows or a terminal multiplexer like tmux (pictured) to compartmentalise your work into different sessions in each one you will probably run the same few commands, one to view the state of something and others to modify it.

NB! Update 10/2019, The Linux on DeX project is not being continued I will continue looking for a solution for using a single phone as a development maching with DeX.

Last year I wrote about how you can use a phone for web development using an Android Linux Terminal and a simple editor I’d made as a Progressive Web App. It worked pretty well but had some drawbacks, for example you couldn’t debug Samsung Internet on the DeX you had to use an external laptop.

Since then Samsung has released Linux on DeX as a beta which addresses many of the issues I had previously. I was lucky enough to borrow a Note 9 from work to test out how well I can port my work flow to only need the DeX.

Isomorphic ES Modules

Earlier I demonstrated how to build a Single Page App which shares templates with the Server Side Code. (See the video below.)

We share the web app’s templates to enable the first page load to be pre-rendered on the server. This practice lets Web Apps start faster and be more resilient to network failure.

In the live coding session we use the new EcmaScript (ES) Modules because it allows us to share code directly without using work-arounds such as making bundles using WebPack or Browserify.

How do I fix this?”

I get asked this question a lot.

Often it is in response to me refusing to speak at a conference because it does not meet our team’s Diversity & Inclusion policy. I will decline to speak at a conference if the line up is all white men or if there has been little to no effort by the organisers to ensure that attendees from diverse backgrounds are able to attend.

I won’t speak at a conference just to be the token woman speaker, either. Even though it may appear to help, at that point it is often too late for your conference to be appropriately diverse to conform with our policy. I would prefer be chosen for my technical skills, rather than because I make your conference look good.

How I built a game in a week

I tried to make a game mostly using tools available on the web.

Being so short on time I built it out of off the shelf parts carefully picking my tools to build it rapidly. This blog post will introduce the tools I used and the difficulties with joining them together to make a game.

You can play it right now, in your browser with no download. It is very short, after all I only had a week to make it:

I wake up with Anxiety

Test Game Engine for integrating A-Frame with Twinery. Guide the character around to answer the door.ada-game-engine.glitch.me

Here are a few of my favourite things you may not have heard of.

This article introduces some cool things I have been playing with recently that have excited me. The thread which ties them together is getting communities of sites to work together across domains, but powered by the front end.

The three topics I will cover are:

a service: IndieAuth

a front end library: Comlink

a pattern: APIs as Web Components.

Each one provides a new way to think about how websites and APIs can be built to work together.

Human Friendly Colours using HSL

(If you are already familiar with HSL jump to the end for some fun tips.)

If you are a web developer you are probably accustomed to colours which look like this:

#ff0000

red

rgba(255, 255, 255, 1)

The hexadecimal colours and the rgba colours use amounts of Red Blue Green to describe colours. This is a nice analogue to how the pixels in the screen are lighting up but it makes picking a colour not very human friendly.

Being fast and light: Using binary data to optimise libraries on the client and the server.

The Web has Native support for parsing and editing Binary data. This can be very efficient for example this is how I sync the state of 170 Virtual Reality users in the same venue without bringing down the network.

The first time I built this demo it performed the syncing with JSON over websockets.

ws.send(JSON.stringify(state));

ws.addEventListener('message', function (message) {

or: How I Learned to Love the Web

Note: This article is written outside of my role as Developer Advocate for Samsung Internet but that is where I come from.

An article was recently published and raised an interesting problem ‘how does a front end developer learn JavaScript today?’ It’s a nuanced problem and like many nuanced issues leads to many flame wars on twitter.

What do we mean by this question and why ‘today’, how has it changed?

When I began <b> <i> <center> and <table> ruled the roost. There wasn’t a huge amount to learn.

Progressive Web Apps are in flux at the moment, these are the opinions of someone who has been working on web apps before they got conflated with Service Workers and new web tech.

Other people’s recent thoughts on the issues I will also talk on

Regression toward being mean - Jeremy Keith

State of the Gap by Remy Sharp

Before I begin,

I will be referring to work done at the Financial Times but my views do not represent the opinions of my employer the Financial Times.

This is a bookmarklet to run on any page to analyse the contrast of the text on a page and highlight elements which may have readability issues.

This project was grew out of a piece of work I did for general page analysis but I thought this component was interesting enough to explore as a standalone tool as it doesn’t need to use any 3rd party service to perform the analysis.

The project page is hosted on GitHub pages: Contrast Widget.

<caption>Screenshot of Contrast Widget</caption>

A major Science Fiction blockbuster, in a Franchise I am a big fan of, hit cinemas a short while ago.

In a furore of brand fan-girl-ism and being unable to afford to buy a Force-Effect lightsabre of my own, I did what any reasonable developer would do and I built my own.

This was a quick one afternoon project and I wanted to break down what went into it.

End result: https://ada.is/starsword/ - Open on your phone, put up the volume, turn it on, wave it around.

Source code: https://github.com/AdaRoseCannon/starsword

More accurately, what can be represented by a JavaScript Number object?

Recently on twitter I saw a question about adding on a Gigasecond (1 Billion seconds), and how it seems inappropriate you need to convert times and dates to milliseconds, thus making 1Gs into an even larger numbers. But 1Gs in ms (10^12 seconds) fits easily in the range of numbers available in JavaScript. This got me thinking what are the limits of what can be represented by natural numbers in JS.

What is the range of numbers in JS?

This talk was initially based upon the talk I gave at the Extensible Web Summit but I have expanded it to encompass animation performance in general.

This page will ask for microphone access for a demo further down the page. (spoiler!!)

Slides: https://gh.ada.is/animation-performance-slides/

SOTB5 - Animation performance on the web - Ada Rose Cannon from London Web Standards on Vimeo.

Other talks from State of the Browser 5, by some truly excellent speakers London Web Standards Channel

ES6 introduces the const keyword. One issue I’ve seen raised a few times by people who are skilled with Javascript but unfamiliar with ES6 is confusion because when an object is defined using const it is not immutable.

The goal of this blog post is to go into detail about const and cover some ways ES6 handles immutability.

One question I’ve been asked a few times recently is in the following situation:

```javascript

// This Array will be populated later

const myArray = [];

I and someone from slack tried implementing an accordion with the techniques discussed in my previous post.

This did not work as expected. It had a kind of bouncy effect. This seems to be especially noticable in the accordion case because the change of height is very large.

Example:

http://jsbin.com/becudutuxe/4/embed?output

The reason for this error is that as the transition progresses, from the start (t=1) to the end (t=0), I had made the assumption that at t=0.5 the shrinking element would be as proportionally small as the growing one is large.

For my talk at the Extensible Web Summit I had limiited time because I had put off working on it until the last minute. I also wanted to run and pause javascript in the slides and because of these constraints, I figured it would be quicker to roll my own solution than to use a pre-existing presentation framework such as slid.es.

End result: https://www.1am.club/~ada/ews-slides/; it has some issues, but for this situation the slides only needed to work in Chrome.

Setup

I started off with a custom yeoman template I’d made based upon the gulp webapp generator. It adds es6 transpiling with traceur and browserify (through traceurify). This boilerplate setup allows me to very quickly prototype webapps with es6 and scss.

On Monday 20/04/2015 I gave a ligtning talk at the extensible on animation performance in the browser.

These are the notes from the talk prose-ified.

Link to the talk. Talk notes are displayed on mobile.

Just saw @slightlylate and @timberners_lee here, trying to not panic.— Ada Rose Cannon ♥ (@AdaRoseCannon) April 20, 2015

In the Browser we have a goal to reach 60fps, which gives us 16ms to render a single frame.

Jank is when the frame takes longer to layout and render than 16ms.

[Glitch Bunny] is an audio visualisation. It uses input from the microphone via webaudio and maps it onto a bunny.

Sorry it appears video is not supported in your browser.

Later support for google cardboard and better lighting was added. The source code is [Here]

Why?

I wanted to do some interesting data visualistation. I had a half finished guitar tuner I was writing (never did finish) and that inspired me to hook it up to that. The challenges were mostly in getting and maintainging 30-60fps on mobile whilst fourier transforming audio and mapping it to a 3d object.