github linkedIn

The blog of Ada Rose Edwards

Simple WebVR Demo, Hello Metaverse

WebVR demo built with A-Frame

Over 100 people in the same Virtual Reality experience!! πŸ”—

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 πŸ”—

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 πŸ”—

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 πŸ”—

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 πŸ”—

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 πŸ”—

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.

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. πŸ”—

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.

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 πŸ”—

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 πŸ”—

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 πŸ”—

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

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 πŸ”—

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

360 Degree Video in the Web πŸ”—

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

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. πŸ”—

Push messaging powered messaging web app.

Accessibility and Contrast Bookmarklet

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.

Starsword Web App

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

Sci-Fi swords and Progressive Web Apps

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.

What's in a Number?

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

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

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.

Const & Immutable Objects

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.

Animation Performance - Follow Up

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

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

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

Animation Performance

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.

Audio visualisation in WebGL

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

No more posts.