 Well, this is awkward. So far, Dev Diary has been exclusively Paul. And now I'm here. I kind of snuck into the series because I actually built something on the Chrome Dev Summit website. And I wanted to show you what I did because I think it's really exciting. So the last few weeks, I've been playing around with VR and WebVR a little bit. I'm just dabbling. I'm just trying things out. And Paul and I thought it would be a really cool opportunity to build a 360 image of the SFJ center into the Chrome Dev Summit website for that people, if they are not able to join us live tomorrow, they could actually at least see what the venue looks like and get more of a feel of the space that is available to us. And that's exactly what I did. So if you go into the Chrome Dev Summit website, developer.chrome.com slash devsummit, and go to the Location subpage, it's so as before it's still the same website that Paul built. But you have this tiny cardboard button. And if you click it, we load the 360 view of the SFJ center. On a desktop, with just normal desktop, you can just use your mouse to pan around and get a feel for what the surroundings look like. If you're on your phone, you can actually just hold the phone in your hand and move around and have this as a magic window into a different location. You also have a cardboard button that if you have a cardboard, you can put your phone inside it and actually move your head around to actually feel even more like you're there. And if you have a proper VR device, you can actually use that to get into the location and use a proper like an Oculus Rift or the HTC Vive or whatever you have. And use that to actually take a look inside. So as I said, this is sadly just a stereoscopic, just a 360 image. So many acronyms. 360 image, it is not a stereoscopic image. The perception of depth won't actually be real, but you will have like, this is basically a big 3D sphere with a texture on the inside that you can look around and to give you at least the feel of you looking around, but not actually a feel of depth. So how do I do this? How this, this is actually a good example of how to do progressive enhancement with web VR because if you don't have anything, it still works with mouse and panning and you can just use your mouse to look around. It's already a pretty good experience. So let's dive into the code a little bit. Mostly I'm working with VR View, which is a great library that a colleague of mine wrote, which uses the VR Polyfill and the VR Boiler Plate. So VR Polyfill basically polyfills the web VR API for your browser while the VR Boiler Plate does the progressive enhancement story to go from just a canvas where you can pan around to cardboard to actual VR devices. So if you go into the component sections where Paul has written different things like the video handle that does the fading, the moving in and out of big picture mode to small picture modes of the video, I wrote a new VR component and it's actually mostly a lot of animation and class JavaScript, but most of what it does is it checks if you are on the depth summit location subpage and if so, it will fade in the button or rather, if you're not on the depth summit location subpage, it will just not do anything. And then we hijack the master to inject our little button and do transitions and all of these kind of things is not rocket science right here. And the interesting thing is basically the two lines of the on click handler. If you click on that button, we will hide the button because it needs to go out of way and also we'll load a script. So that means we will load a script on click. This is usually not recommended because it will mean that if you click it, there will be, especially if you've never loaded the script, it will take a lot of time until action takes place. However, I thought that it's probably not gonna be every single visitor on the website is going to go into the VR experience. So both forcing the data onto the user and loading it ahead of time just because didn't seem like a good idea. So I just wanted to load it on demand. And the web VR script is again, mostly about hijacking. So this is where I use VR view, the library, and I hijacked the master to inject a new iframe where inside I'm gonna have the canvas with the 360 image and everything. This is all the things that the web VR does for me. And it's basically one call. So what I'm doing is I'm saying, create a new player for me, web VR police, put it into the VR view ID elements and use this image that we have. And that's basically all I have to do. And with this code, it already worked. And after that, I took a little bit of a close look into web VR because the amount of data we were transferring was quite big. And it turns out that web VR actually bundles the chakra player, which makes sense because it also has support for playing videos in web VR or in a VR space. And chakra player is a module that basically does adaptive streaming, it tunes down the quality depending on how much bandwidth you have at your disposal. But we're never gonna play a video here. So delivering that code to the user is just going to waste. So I'm basically vendoring the entire VR view into third party or third party folder here. And I commented out a lot of requires that were in there and just recompiled the entire thing and shrunk the code down. So I think at this point, when GZIP we are now delivering 100 kilobytes of code and 250 kilobytes of image data, which I think it's still a lot of data, but it's acceptable most of the time on mobile and it will load quick enough most of the time. Other than that, it's very basic code. I did find a nice pattern which is creating functions that create promises for both request animation frame and transition end. So calling transition end promise on an element will give you a promise that resolves when transition end is fired on that element. And it allows you to just do these chains, chains as in chains, you chain promises together. So I call transition end promise on the masthead and when that is done, I append a child, I do a double raft and then I do again a class adaptation and do transition end promise again. So this is basically how I can just more or less declaratively do animation sequences without using the actual web animation API, which is somewhat of a nice work on it. It's not as powerful, but it makes stuff a little bit more readable than having multiple levels of indentations because it's a double raft and all these kind of things. If you like this, let me know. If you have questions, let me also know. I am at Dasurma on Twitter. If you wanna join us tomorrow at the SFJ SNS Center in person, come by, it's gonna be great. If you can't use the features on the Chrome Summit website to get notifications when we're gonna go live, everything's gonna be live streamed. Subscribe also to this YouTube channel because we have more great things here that are gonna come out regularly. So thank you for watching and hopefully see you tomorrow.