Ada.is

Integrating Augmented Reality Objects into the Real World with Light and Shadows

Wed, 06 Apr 2022 00:00:00 +0000

Using the WebXR Light Estimation API we can make 3D objects appear to be physical parts of our real environment by having real lights affect virtual objects and virtual objects casting shadows onto real surfaces.

JavaScript scope and closures

Thu, 31 Mar 2022 00:00:00 +0000

JavaScript is almost famous for some of it’s weird behaviours around variables. This goal of this article is to make it so that you will never be surprised by the value of `this` or why a variable seems to not change when you set it somewhere else.

Add RSS Feeds to your website to keep your core readers engaged | Samsung Developers

Fri, 14 Jan 2022 00:00:00 +0000

RSS is a well established but often well hidden web technology.

Non-cryptographic uses of SubtleCrypto - Web APIs | MDN

Fri, 07 Jan 2022 00:00:00 +0000

This article does not discuss the cryptographic uses of the SubtleCrypto interface. An important thing to take away from this article is don't use this API for production cryptographic purposes because it is powerful and low level. To use it correctly you will need to take many context specific steps to accomplish cryptographic tasks correctly. If any of those steps are taken incorrectly at best your code won't run, at worse it will run and you will unknowingly be putting your users at risk with an insecure product.

Game Physics on the Web in AFrame

Fri, 24 Sep 2021 00:00:00 +0000

Game Physics on the Web in AFrame Adding physics to Virtual Reality and Augmented Reality scenes greatly improves the illusion of…

XR Koi Garden

Wed, 22 Sep 2021 00:00:00 +0000

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

RollAR Coaster

Wed, 22 Sep 2021 00:00:00 +0000

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

bARsketball

Wed, 22 Sep 2021 00:00:00 +0000

Shoot some hoops in your own home with Augmented Reality!

Use new Augmented Reality features with just a few lines of code with WebXR and AFrame!

Wed, 11 Aug 2021 00:00:00 +0000

Use new Augmented Reality features with just a few lines of code with WebXR and AFrame!

Multiple Language Installable Web Apps using a single Manifest File

Tue, 03 Aug 2021 00:00:00 +0000

Multiple Language Installable Web Apps using a single Manifest File

Future Focused Responsive Design

Mon, 15 Mar 2021 00:00:00 +0000

Future Focused Responsive Design Embracing the spirit of responsive design and accessibility to…

Making an AR Game

Thu, 14 Jan 2021 00:00:00 +0000

Here is a .gif 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.

Using WebXR in HTML IFrames

Thu, 07 Jan 2021 00:00:00 +0000

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.

Three Powerful Tools in my Web Development Swiss Army Knife

Tue, 03 Nov 2020 00:00:00 +0000

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.

Curve Modifiers in Three.js

Thu, 29 Oct 2020 00:00:00 +0000

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.

Audio on the Web, for Games and VR!

Mon, 19 Oct 2020 00:00:00 +0000

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.

HTML and Templates & JavaScript Template Literals

Tue, 06 Oct 2020 00:00:00 +0000

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.

Redeeming Push Notifications

Wed, 30 Sep 2020 00:00:00 +0000

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.

Improve device integration for your Web App in just a few minutes

Tue, 25 Aug 2020 00:00:00 +0000

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.

AR in the Web, now in Samsung Internet Stable

Tue, 04 Aug 2020 00:00:00 +0000

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

Using node modules in Deno

Mon, 03 Aug 2020 00:00:00 +0000

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.

Making a useful ‘offline’ page for your web app.

Mon, 27 Jul 2020 00:00:00 +0000

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.

Using VR controllers and locomotion in THREE.js

Mon, 18 May 2020 00:00:00 +0000

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!

Animating DOM Changes

Thu, 23 Apr 2020 00:00:00 +0000

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.

Building a menu which reveals on scroll.

Mon, 23 Mar 2020 00:00:00 +0000

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.

Enhancing Multi Pane, Single Page Web Apps with Intersection Observer

Tue, 17 Mar 2020 00:00:00 +0000

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

Wed, 11 Mar 2020 00:00:00 +0000

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.

Generating a water effect, part 2.

Mon, 02 Mar 2020 00:00:00 +0000

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:

Testing your websites on real devices

Tue, 25 Feb 2020 00:00:00 +0000

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.

Generating a water effect, part 1. SVG and Canvas

Tue, 11 Feb 2020 00:00:00 +0000

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/

Using Basis Textures in Three.js

Fri, 28 Jun 2019 00:00:00 +0000

You can have 6-8x more images in your WebGL scene by using Basis Universal textures which are very efficiently compressed. This article describes how to encode images as Basis files and read them with THREE.js

Six assumptions which could break your website

Tue, 11 Jun 2019 00:00:00 +0000

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

Using Houdini Paint API to Render a 3D Model

Thu, 16 May 2019 00:00:00 +0000

The demo in this article show’s how to 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.

Web Workers in the Real World

Mon, 13 May 2019 00:00:00 +0000

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.

Speed up your work flow by turning command line tools into interactive dashboards

Wed, 13 Feb 2019 00:00:00 +0000

Ever feel like you live in a terminal? This guide is to show how you can make your commandline apps more friendly.

Web Development on a Phone. Updated for Linux on DeX.

Thu, 06 Dec 2018 00:00:00 +0000

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.

Example of running Three.js in a Houdini Paint Worklet

Fri, 27 Jul 2018 00:00:00 +0000

This example shows what can be accomplished with the canvas like powers the Houdini paint methods by using Three.js to render 3D text as the background image of a DOM element.

[Video] Ada's Twitch Tech Talks, Episode 2

Thu, 26 Jul 2018 00:00:00 +0000

A nice chat with Jo Balletti about what it's like mentoring at Codebar and experimenting with CSS.

[Video] Designing a WebVR game with A-Frame - Designer vs. Developer #18

Wed, 25 Jul 2018 00:00:00 +0000

In this episode, Ada Rose Canon tells us how she built a WebVR game in a week for the “Games Done Quick” event. She explains how she used A-Frame, Twinery, Archilogic, Glitch, Google Poly, binary, and a bit of JavaScript to create a game engine and a responsive virtual environment.

Isomorphic ES Modules

Fri, 15 Jun 2018 00:00:00 +0000

Earlier I demonstrated how to build a Single Page App which shares templates with the Server Side Code. 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.

[Video] DeltaV talk - A Rube Goldberg machine and new Web APIs

Tue, 12 Jun 2018 00:00:00 +0000

There are some exciting new developments happening in the web platform right now. New APIs such as CSS Grid, Web Components, Custom CSS Properties and the Web Animation API. Each on their own is a complex topic worth getting to grips with but what this talk aims to show is how they can be used with each other when used together the result is greater than the sum of its parts.

[Video] Ada's Twitch Tech Talks, Episode 1

Wed, 06 Jun 2018 00:00:00 +0000

Live Coding a Single Page App with Server Side Rendering making use of ES Modules and HyperHTML for importing templates in the browser and in the node server.

“Help! someone has pointed out my conference has diversity issues!

Mon, 16 Apr 2018 00:00:00 +0000

I get asked this question a lot. I hope to give some advice in this article.

How I built a game in a week

Mon, 12 Feb 2018 00:00:00 +0000

I tried to make a game mostly using tools available on the web. This is a guide to how I integrated these tools together to allow me to create a 3D RPG in a short period of time. With Twinery and AFrame.

Lessons Learned, making our app with Web Components

Tue, 23 Jan 2018 00:00:00 +0000

This is based on a case study where we built a suite of web components to allow anyone to make music visualisations and VJ for nightclubs. Introductory article to this project.

I made a game! 'I Wake Up With Anxiety'

Mon, 22 Jan 2018 00:00:00 +0000

Check out my very short game! No download, play it right in the browser. I made it to demonstrate integrating Twine with A-Frame to make a 3D visual novel in the web.

Raindrops on roses, whiskers on kittens, declarative web APIs and truly serverless web endpoints

Tue, 12 Dec 2017 00:00:00 +0000

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.

Virtual Reality for Web Developers

Mon, 04 Sep 2017 00:00:00 +0000

Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, we’ll look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.

A Rube Goldberg Machine

Fri, 01 Sep 2017 00:00:00 +0000

An introduction of upcoming web APIs, CSS Grid, Web Animation and Custom Properties. These new APIs when used together can bring a new way to use the web paltform to develop websites without the need for frameworks.

Human Friendly Colours using HSL

Thu, 24 Aug 2017 00:00:00 +0000

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

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

Wed, 19 Jul 2017 00:00:00 +0000

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.

[Video] Virtual Reality and the Future of the Web

Wed, 12 Jul 2017 00:00:00 +0000

New Virtual Reality browsers means we need to consider how the web platform is going to need evolve to take advantage of the benefits that Virtual Reality can bring.

[Video] Ada Rose Cannon | WebVR | Browser API Special, CSS Day 2017

Wed, 14 Jun 2017 00:00:00 +0000

VR is here, there are VR web browsers and new APIs to enable VR across a wide range of devices. The WebVR APIs rely on WebGL to render an immersive environment. This interactive talk aims to introduce a way of writing and controlling WebGL scenes with just HTML, accessible to web developers of all skills; no knowledge of 3D rendering required!!

[Guide] Writing software using a phone!

Mon, 29 May 2017 00:00:00 +0000

On setting an Android phone as a Desktop computer and using it for Web Development.

Simple WebVR Demo, Hello Metaverse

Sun, 09 Apr 2017 00:00:00 +0000

WebVR demo built with A-Frame

Over 100 people in the same Virtual Reality experience!!

Mon, 23 Jan 2017 00:00:00 +0000

At the recent LDNWebPerf I had the entire audience sharing the same Virtual Reality being able to see virtual reality slides where I dynamically added content to demonstrate capabilities of VR.

Virtual Reality and the Future of the Web

Tue, 03 Jan 2017 00:00:00 +0000

New Virtual Reality browsers means we need to consider how the web platform is going to need evolve to take advantage of the benefits that Virtual Reality can bring.

Doing VR on the Web - Presented at Dot JS

Wed, 21 Dec 2016 00:00:00 +0000

Virtual reality has come to the web! There are now browsers which work inside Virtual Reality headsets. Ada explores how VR can make our websites better and what do we need to take into account to make immersive experiences on the Web. - Paris, 2016

Putting the Progressive Web into Progresive Web Apps - Presented at FFConf

Fri, 25 Nov 2016 00:00:00 +0000

With new web technologies enabling a new generation of install-able app-like websites it is important to ensure the web carries on working for everyone. This talk will discuss the P in PWA, progressive web apps should work for everyone and should not let their app-like approach divorce them from the web.

Decoded Chats – Ada Rose Edwards on Progressive Web Apps

Thu, 17 Nov 2016 00:00:00 +0000

We invited Ada to chat with Chris Heilmann about the concept of Progressive Web Apps, what new technologies like Service Worker mean for the web and a few more of the technologies she explained in her article “The Building Blocks of Progressive Web Apps“. She had a lot of great insights into application development for the web and tips and tricks how to make them work for everybody.

W3C WebVR Workshop Follow Up

Mon, 31 Oct 2016 00:00:00 +0000

The W3C WebVR workshop, in in San Jose, was the first workshop on WebVR and was an incredible experience, many of the leaders in VR for the web took part to discuss how WebVR will evolve in the future. This covers some of the points raised and the direction WebVR is growing in the future.

The Web is not Fashionable.

Mon, 10 Oct 2016 00:00:00 +0000

or: How I Learned to Love the Web.
On giving vanilla web tech a go and how there is more to the web than knowing JS frameworks. Encouraging a focus on Progressive Enhancement

Loading A-Frame scenes faster by optimising image assets.

Sun, 18 Sep 2016 00:00:00 +0000

One can greatly make reduce the load time of A-Frame textures by using imageOpim a CDN backed image service to optimise resources on the web which can dramatically reduce filesize and loading time.

A-Frame Introduction - From view source conf, talk notes.

Tue, 13 Sep 2016 00:00:00 +0000

A talk to get started building VR in the web A-Frame lowers the barrier for entry to Virtual Reality in the web for the developer AND end user. Rapidly prototype and have fun with Web VR.

The Building Blocks Of Progressive Web Apps

Mon, 05 Sep 2016 00:00:00 +0000

Web apps can replace all of the functions of native apps and websites at once. They are coming more and more to the fore these days, but still not enough people are familiar with them or adopting them. Here, you will be able to find some do’s and dont’s on how to make a progressive web app, as well as resources for further research. I’ll also go into the various components and support issues surrounding web apps.

How to make Sky Boxes from A-Frame Scenes

Tue, 30 Aug 2016 00:00:00 +0000

Equirectangular images can be used as sky boxes and reflection maps. This is a how-to and a bookmarklet for generating Equirectangular 360 image maps from A-Frame scenes.

Adding physical rendering options to A-Frame's Standard Material

Thu, 25 Aug 2016 00:00:00 +0000

I made my first PR to A-Frame, this to add support for Normal, Displacement and Ambient Occlusion maps, as well as support to allow one to use their sky sphere as an environment map.

Yet another blog about the state and future of Progressive Web App

Wed, 01 Jun 2016 00:00:00 +0000

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.

[Video or Audio] JavaScript Air on Progressive Web Apps

Wed, 25 May 2016 00:00:00 +0000

A Progressive Web App "uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction." with Ben Kelly, Nolan Lawson, Henrik Joreteg, Kent C. Dodds and Ada Rose Cannon.

360 Degree Video in the Web

Sun, 15 May 2016 00:00:00 +0000

360 degree video spheres in the Web with Web VR. New cameras and the advent of VR heralds a new era of immersive video experiences.

[Notes & Slide Deck] - Push Notifications and Progressive Web Apps

Tue, 26 Apr 2016 00:00:00 +0000

Notes from talk at SDC, Introducing setting up progressive Web Apps with the Web App manifest, service workers & push notifications.

Messaging App for sending Emoji.

Mon, 25 Apr 2016 00:00:00 +0000

Push messaging powered messaging web app.

Accessibility and Contrast Bookmarklet

Fri, 12 Feb 2016 00:00:00 +0000

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>

Starsword Web App

Tue, 02 Feb 2016 00:00:00 +0000

Swing your phone around to make sounds with the Web Audio API, install with 'Add to homescreen'

Sci-Fi swords and Progressive Web Apps

Mon, 01 Feb 2016 00:00:00 +0000

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

What's in a Number?

Fri, 08 Jan 2016 00:00:00 +0000

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?

[Video & Notes] State of the Browser 5 - Animation Performance

Tue, 15 Sep 2015 00:00:00 +0000

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

Const & Immutable Objects

Mon, 13 Jul 2015 00:00:00 +0000

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 = [];

Animation Performance - Follow Up

Wed, 29 Apr 2015 00:00:00 +0000

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.

How I rolled my own presentation solution in a couple of hours with es6

Sun, 26 Apr 2015 00:00:00 +0000

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.

Animation Performance

Sun, 26 Apr 2015 00:00:00 +0000

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.

Audio visualisation in WebGL

Sat, 29 Nov 2014 00:00:00 +0000

[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.