 Okay. So, three minutes late, but anyway, let's roll with it. So, this is going to be the last session at today, at this year's Meta Refresh. And I'm super excited to have Vincent Hardy with us. Vincent's the director of engineering at Adobe. And I think yesterday was at Sovix Talk that he had a slide which said, the web is an amazing platform. And Vincent's job title is very cool because his team is the web platform team. So that's a really cool title to have. And I think part of it is because as he's put it, a web and graphics guy, he works on the SVG working group, defining the standards and developing them further. And I think some of that is going to be reflected here. So, I'm really chuffed to have you. Is it on now? Yeah. It is. All right. Thanks. Thanks. So we're saying thank you very much for the very kind introduction. Yes. Yeah, it's a real pleasure to be here. Thanks for having me. It's a pleasure to conclude this conference. I really enjoyed the conference. Seeing that everybody seems to be here, I think everybody enjoyed the conference equally. I really liked the talks. I learned a lot from the different sessions, seeing what people do, what type of prompts we're facing as web developers. I also enjoyed the networking and talking to people. I think, and I hope you'll relate to that. You learn as much from the sessions as we do from the people we meet at the conference and comparing notes, seeing what other people do and, again, the problems they face. So as Raoul said, I'm a graphics and animation and web geek. I've been working on graphics for a long time. And that's really what I want to share today with you and talk about what's possible on the web today, what's coming, and what will be possible in the two distant future. I thought I would start with, you know, why graphics? You're an audience of graphic designers. I think you're all sold on the need for graphics. But I think very often we lose sight when we're constrained by technology that there is more possible. And the reality is that the web has been a little bit constrained on the graphics side for a while. And graphics are really important because in, you know, everything we do when we communicate, visual information is really king. You know, I forgot the exact numbers, but there is this, those studies that talk about, you know, when you talk to someone, when you're trying to communicate, you know how much of the communication is actually visual and how much goes through the, you know, the voice and what your intonation when you speak and how much is in the transcript of what you say, basically the email. And you really, the bulk of the communication is visual because we're visual animals. We've grown and evolved to take cues from what we see. So that's why graphics are really important. So I grew up on graphics. I've heard Asterix is famous in India. Is that true? Do you guys know this? Right. Very good. So I grew up on comics and really liking that for storytelling because this is the other thing I'm really interested in is, you know, when you communicate, you know, graphics are really good for expressing what you want to say, but you also want to, you know, give a story. For the longest time, I felt a little guilty that I enjoyed, you know, comic books so much until I read a book by Scott MacLeod explaining his book is called Understanding Comics and it's a really beautiful piece of work. It's actually a comic book itself, but it's about visual communication and narratives and its ground in, you know, the history of using images and text combined. So when we set out at Adobe on this idea of talking about web graphics and the history of web graphics and, you know, the unfolding of what's possible, we thought we would do it as a narrative. We would, you know, make it a story and also we would make it a story that actually uses web graphics so we would, you know, drink our own champagne. That's a polite way of saying we're eating our own dog food. So what you're seeing here behind the login screen is actually in a browser. So the whole presentation is running in Chromium. And as we've seen, you know, throughout the conference, you know, I was really amazed by the quality of the slide and the design of the presentation. It would be really nice if all of those could actually, you know, not always be PowerPoints or keynotes but, you know, really built on web graphics. And I think we're getting close to that point or we can in many cases and I hope in the next few years, you know, we'll see those beautiful presentations all done in HTML and published in HTML right at the time of the conference or shortly thereafter. So let's start. So I'm going to start with the thing, co-operates. Okay. So the story starts, the story of the graphical web starts, you know, in the early 90s and we started with HTML and it's pretty terse, right? I mean, you've got HTML is not a lot of graphics capabilities. You have three types of graphical objects in HTML. You've got a box. You've got text and you've got images and that's it. And so that's where our starting point is. And the other thing we thought in putting the story together that I need help from a little character to go through the story. So meet my help. This is Div. So do you know what Div stands for? What is it? Yes. So it's the HTML element. It's not the abbreviation of Div. It is the HTML element. And I'll prove it later. It is truly an HTML element. So Div is going to go through the journey with me. So Div, are you ready? All right. So we're pretty well set in 1995 but I think that's a joke, right? I thought you can talk. Sorry, just a little nostalgic. Where to from here? Well, so we're back in 1995. We only have three types of graphical objects and very little rendering controls. I think anywhere from here would be better, really. You got it. Though I don't see how it can get better than this. Whoa, hubba hubba. Hello there, Div. Welcome to 1996. I'm cascading style sheet. I can add more style to your bland little world. I'm prettier and more approachable. All right. So do you know that CSS looked like that? And she's pretty nice, right? So CSS 1996. When the web began actually, there was this really clear direction that it was very important to separate the semantic information. So the information you want to convey from the way it would be presented to the end user. I think that's a really big foundation for the web. And I think at the heart of why it's been very successful, it was a very important architectural decision. Other systems like Java or other things, technology that existed at the time, took a different approach. There was no real separation like this. This architectural decision made it possible to have on one hand the thing you want to say be accessible by servers, by screen readers, they could be displayed on screen, et cetera. So it was one problem is defining the semantic and the other problem was how you would present it. So there were multiple styling system in competition and CSS is the one that stuck. So we went through CSS one, which was pretty limited. Then with CSS two, we added a bunch of features, but the spec was not quite there yet. There were lots of interoperability problems. If you go several years back, CSS was one thing people loved to bash on, almost at the same level that people bash on IE6 today. And CSS 2.1 is one really, the CSS working group clarified a lot of the details about the spec to get a much better interoperability and worked a lot on testing so that now we enjoy a fairly substantial level of compatibility between browsers. At the same time, CSS 2.1 brought a lot of new features, better rendering control and better typography with web fonts. So the feature is evolved. And that was a really huge step forward in terms of being able to render graphical information on the web. But at the heart of it, if you combine CSS and HTML, you're still dealing with those three basic graphical objects, which is box, images, and text, and that's pretty limiting. So I think there is clearly a need for more, and that's what Dave's going to talk about next. CSS, you've really made me a better person. Don't take this the wrong way, but it's time I look for more interesting shapes that can scale. It's not you, it's me. Oh, you're looking for SVG. We're good friends. Ah, okay. You count as an interesting shape. I'm not only an interesting shape. I'm every interesting shape. Check it. Wow. You're vector graphics. Scalable vector graphics. Want to see? Whoa. Awesome. So SVG really filled that gap is, you know, going beyond the box, you know, really beyond the constraint that HTML has. It's not a CSS constraint. CSS is a styling system and a rendering system. The constraint came from HTML. The semantics of HTML expressed those basic elements. There's no shapes or anything like this, and that's the gap that SVG is meant to fill. SVG, just like HTML, works with CSS, so it can be styled. SVG, just like HTML, has DOM access, so you can script it the same way. It has interactivity. So it's really the graphical side of HTML, if you'd like. If we could go back in time, I think I'd much rather have SVG be developed as part of the HTML working group effort, so that we have actually one syntax that has both, you know, the basic HTML elements plus the graphical syntax for it. But, you know, I think we'll get there. There's, you know, a lot of, you know, inlining of SVG. This presentation actually uses a lot of inline SVG, so we started having a lot of really good support for it. There are really important characteristics of SVG and why it's actually a very key standard for the web today. One is that, you know, we've talked about it. It's high DPI with, you know, the multitude of device sizes, but also device resolutions. SVG really feels an important role. I mean, you don't want to carry around, you know, zillions of bitmaps at different sizes and resolutions where you can express the graphic in vector format. And very often, you know, if you did a survey of the graphics on websites, a lot of them, like a really huge percentage of those graphics can actually be expressed as 2D graphics. And there's really no good reason for not making them 2D graphics. Now, so that's kind of the bloat side of the argument. The other reason why SVG is really important is accessibility. We had really good talks about accessibility during the conference. But if you imagine, say, you know, easy data visualization, for example, if it's expressed as a bitmap, it's a black box for a screen reader. I mean, the best you can do is probably a little bit of a description saying, you know, line chart here, and that's all you're going to get. Whereas if you express it with something like SVG, you can make it accessible, and the semantics is retained in the graphics. So if you navigated the DOM for this, you'll hit a bar which will have, you know, some description or title attached to it that, you know, can be accessible to various technologies. You can find what the numbers are, et cetera, et cetera. So it retains a lot of the semantic. And by the same token, it can be, you know, looked into by search engines. So it's really a foundation for expressing really nice graphics on the web. Now this is still the 2D plane. You know, if you look HTML, SVG, CSS, you know, great features. You can do filter effects, shadows, gradients, you know, masking, blend modes, all that stuff. But it's still in the 2D world. And there is, you know, a big evolution of web graphics was taking it to 3D. This has been great, SVG. I was thinking it's time to look for something with, you know, a little more dimension. Three dimensions? Well, why didn't you say so? Let me help you get a little perspective on things. Aw, man. I've been mooned. Welcome to the Z-Axis, Div. I'm 3D Transform, and things just got deep. Like, have you ever wondered if we're all just a bunch of 1s and 0s? Flicking switches on and off for eternity. Wow. What does it all mean? It means we can view things from every angle. Hey, I can see my house from here. So CSS Transform were introduced first on, you know, HTML and CSS elements. And now there is a single CSS Transform spec that unifies all notions of linear transformations in HTML, CSS, and SVG. That's a really important evolution. This scene here is all built with CSS Transform, CSS3 Transforms, and it's the illusion you have of a real 3D space is because we arrange, you know, 2D surfaces so that you get volume, like, you know, the little rectangular shape at the bottom. Those are all flat surfaces that are moved into a 3D space. That's a huge feature for creatives. With this you can do a lot of fun things in narration, like so. But you can also do very nice effects in UI, like UI enhancing features. There was a talk yesterday where the speaker was insisting that subtle effects in user interface make a big difference. 3D Transform can enhance user experiences this way. If you flip something around, for example, if you actually have a 3D Transform and you do apply perspective, you've got a much more natural feel to the transition, and that makes it easier for people to understand, and therefore it's a better user experience. So, oh, that you said, that this is a really important evolution on the web in, like, increasing the palette we have for developers to do more things graphic. Now, so far all I've talked about is really declarative. So I've insisted on saying, you know, for web graphics it's very important to have the styling system, abstractions, graphical objects, or symmetrical objects that would apply the style system to. But sometimes this is not necessarily what you want to do. There are times where you want, you know, more precise control, or you want to actually do things at the pixel level. And we have technologies for that as well on the graphical web. I'm starting to dream big now, 3D. I want even more out of my graphics. I want to control them on a granular level. If you want granular, you want pixels. Whoa, that's freaky. I'm 2D Canvas. And I can do more than create shapes and colors. I'll let you manipulate the particles in this universe. Okay, it's a little scary, isn't it? So that constellation is an example of using Canvas 2D, I think, in an appropriate way. So, you know, we're talking about how it's important to retain information on the web page so that it's accessible through screen readers or through a search engine. There is a case like this where if you want to render it visually, you know, there's a zillion little particles that you want to arrange to create the effect you want. But semantically, none of those particles really carry any meaning. You really don't want to have a dumb node for every single circle, for example, that you draw. This would be like real dead weight on your page. Even if the browser could handle it, that would still be a bad idea. So that's an example where the abstraction really is a Canvas element that you can draw into. And you could say, you know, the Canvas element is my galaxy guy or something like this. Right, and that's enough semantic for it. And then you can draw and control every pixel that goes into Canvas. Now, Canvas is really a black box for the web. I mean, that's a level of webiness it has, right? It's a rectangular set of pixels, and you can use different contexts to actually touch the pixels you want to draw or read. So the context we use here is called the 2D context, and it's a default one. It's defined in a spec in Dallas 3C, and it has excellent support across browsers. Now, there are other 3D contexts. Other contexts you can use, and you could imagine many contexts, different drawing APIs to actually touch those pixels. At the end of the day, this is all those APIs you have, and they may be very powerful, but what they do is they touch pixels and they read pixels, and that's what is visible from the website of things. So let's see the other type of graphical context we have, and Dave's going to talk about that now. How realistic can we get here? Are we talking mind-blowing effects? Because I'm thinking like Spielberg here. For that, you need to go further into space. I won't lie. This is a little weird. I am WebGL. Here, you can experience real-time advanced visual effects and 3D geometry. All right. Are there movie buffs here? Do you guys know what this is? Yes, exactly. A 2001 space Odyssey. That's a monolith. This is an example of using Canvas as well. The psychedelic shape you see in the colors you see in the background, this is done with WebGL and a shader. The shape, the monolith, is a very simple 3D shape. It really doesn't do justice to what WebGL can do, because with WebGL, you could draw a full-blown car with all the details and texturing you'd want. The point we're trying to make here is that you can define complex models in the realm of WebGL. Have the API do all the computation and at the end touch the pixels to the way you intended into this big bag of pixels that the Canvas provides. So again, it's very appropriate here because there is no tool in SVG, CSS, or HTML to do 3D models. And that's for the monolith part. And for the shader part, really, it's the kind of visual effect that you cannot express with tiled elements, really. So you need a technology like shaders to express this type of effects. So there is a lot of use cases for Canvas, but the key thing to remember is that once you opt into Canvas, it's kind of the escape hatch, right? You're saying, okay, so the most important thing for me is my rendering and controlling pixels, and the level of accessibility of that area is going to be fairly limited compared to regular Web content. And that can be fine for things like game, but you have to be very mindful that this is a type of decision you make when you opt in for Canvas versus other graphical solutions. And now we're going to go back to, actually, the world of declarative features for graphics, and we'll follow Div there. Ready I am, master. I'd like to try to bring these effects to the real world. Try. There is no try. Just head back and give it a whirl. Uh, am I dead? Don't be afraid, Div. I'm blend modes. Simple opacity can't do this. Right, so, you guys know blend modes well as graphical designers. This is what you use in Photoshop or GIMP or any graphics package, really, where it's a very common tool. What blend modes really do is you take the color of the background and conceptually put that in a blender. Then you take the color of the thing you want to draw, and you also put that in the blender, and you imagine that your blender has many buttons that control different ways of mixing the colors, right? And here we pushed the multiply button so that you get this effect that's not possible with opacity and translucency. So it's very common for graphic artists to use blend modes. They're very used to apply them, and it's, you know, conspicuously absent on the web. So that's one of the things we're bringing to CSS. There is work in the CSS working group. There's a spec for this, and implementation has started on, you know, in browsers. Here you're seeing it actually applied live in a custom build of Chromium. That's accessible from html.dub.com if you want to play with it. It's extremely simple to use. It's just a blend mode property, and you set it to multiply, overlay, screen, whatever you think is useful. Now, you may wonder, you know, well, why would I really need this as part of CSS? Why don't I just apply my blend modes in Photoshop and then use that image into my content? So there are several reasons. One is that once you, if you apply things in a graphics authoring package and export as bitmaps, well, all you have is, again, a bag of pixels, and you can't really make any sense of it. And you lose flexibility. So for example, here the shape is actually, the shape color, the ghost, has varying shape color. So it varies from blue to kind of slightly purple. But as the color animation is going on, the blend is still happening. So I don't need to go reopen Photoshop for every single step of the color animation and generate the effect I want. I can just express that I have a CSS color animation on the shape and then specify the blend mode I have and all the graphical magic happens. So it's actually quite powerful in itself. So that's for blend modes. Very simple, but yet I think powerful feature for the web. Now there's something that has even more flexibility and something I'm very excited about that's coming next. Okay, this is progress, but what about distortion? What about all the cool effects I can picture in my head? Oh, that princess is in another castle. Welcome, D.F. We've been awaiting your arrival. What is this place, Princess Shader? It's where I bring it all together. Here I can do vertex distortion and per pixel color manipulation. So that's called CSS shaders. And CSS shaders is one of the variations of filter effects on the web. So if you pick this spec called CSS filter effects, 1.0, that's in the works, there are three levels of filters. There are basic filters, which are starting to be pretty well implemented. They're on iOS, they're in Chrome and Chromium, and they're coming to the other browsers. You can do things like drop shadow, grayscale, CPU toning, very basic, pretty fine filter effects, and you can specify parameters on them. So that's kind of nice. And then the second level of filter effects is SVG filters. So in SVG, you have filter primitives, where you can, like, Gaussian blur, you can do an FA composite, color matrix, all kinds of things like this. And you can arrange those filter primitives into a composite filter, and then apply that to your content. So if you remember using Photoshop 4, for example, when you were doing, I don't know, an inset shadow in Photoshop 4, you used to apply your blur, then do a masking, then you would clip things, and there was multiple steps of operations you would do in Photoshop 4 until you had the desired effect. Think of SVG primitives as that level of functionality. They basically allow you to do every single step of those things you used to do in Photoshop, combine them into one effect, and then apply that to your content. So that's very powerful. There is a third level of filter effects that we call custom filters or CSS shaders, which harness the power of the GPU. A lot of devices and computers today have a GPU, and GPUs are able to run those little programs that are graphical mavericks called shaders. And the shader is something that runs really fast on a lot of pixel or on a lot of coordinates. There are two types of shaders. One is called vertex shader. That allows you to distort geometry. So for example, if you give it a sphere, in your vertex shader you could distort the different coordinates on your sphere to give it a rougher look, for example. And the second type of shader is called pixel shader, where at the end of the processing prompt line, once the rendering engine has computed the color of pixels, it feeds that pixel by pixel to the Franklin shader, and the Franklin shader has an opportunity to actually change the color values for each of the pixels. And that's very powerful. You can do all kinds of manipulations. Here the little princess, looks like a frog really, but usually it's princes or frogs, but that's odd. Anyway, the kind of floating skirt, the distortion of the floating skirt is done with the vertex shader. It's actually the basic shape is a circle, a circular shape, and we just apply a vertex shader to make it kind of float. Later on, I'll show you a demo of this in action on a prototype tool. So that's the end of the journey. Combined with all our friends, this is where we explore the limits of the graphical web. This is what I'm talking about. Now let's get creative. Yeah, so that's the hope. You can use all these features, a lot of them you can use today. Well, it depends on what your browser target is, of course, but in the spirit of progressive enhancements, the fraction of browsers where you can use a lot of these features is growing every day. You can use SVG starting from IE9 and then back on all the other browsers for a long time. Of course, CSS and HTML, you can use everywhere. 2D is available widely, WebGL is around the corner, and then the other features like blend modes and custom filter effects are in the works and coming soon to a browser near you. I want to show you that proof that I actually use CSS HTML5 graphics to build this. So I'll do an inspect element on div. I'm going to do something pretty cruel to do. I'll take it apart. So this is one, so you see div is actually a div. I don't know if you can see that, but here. Div, that's my div. Inside div, we find inline as UG content. It's here, and for example, I'll pick this one. It's head. Since it's a DOM and everything, I can manipulate the DOM and I can do something like removing an element. And now div looks somewhat different. So that's for div. Same thing for CSS. We can go manipulate it, change colors, for example. So I can fill color on the CSS lady and change its color to white, for example. She's got a, yeah, not so great look, but she looks different, certainly. But that's kind of powerful things you can do, and this is, again, available in a browser. This presentation is actually available online. You can go to the graphical web.org, and that whole presentation will run in whatever browser you have and will gracefully degrade. It will tell you if it hits a feature that's not available. It will tell you where to get it, but you can go through the whole story on the browsers, on any of the browsers. So div, as I was saying, is an HTML element within line SVG. CSS is used around the presentation for all kinds of things. Colors, styling of the graphics is done with CSS, and a lot of the animations is done with CSS animations. You see the little things that are happening in the background here, like blinking eyes and moving circles. This is all done with simple CSS animations on CSS transforms or colors earlier for the blend mode character. SVG, so to manipulate the SVG content, we use a library called d3.js. Anybody use d3 here? Yes, do you like it? Yes, it's lovely, isn't it? So it's been developed by Michael Bostock. He now works at New York Times. He's a data visualization wizard. He's done multiple iterations on developing data visualization frameworks. d3 is his latest conception, even though it's several years old now, but it's kind of the result of several iterations on designing great data visualization frameworks. And that's what we use here to manipulate SVG. It's really powerful, and it works with HTML and SVG alike, so check it out. It's a very nice way to do data visualizations, but also all kinds of things graphical. Next one, 3D transforms. The effects are really cool, I think. You can move things around in various ways, but it's very simple. It's just a 3D transform, and it's applied at the top of basically the scene that the DOM tree represents. So there's not a lot of rocket science there. It's just a simple property applied to the content. Then canvas. We use processing.js. Anybody ever use processing? Yes, a few hands? Yeah. Likewise, I'm a big fan of processing because of where it came from. Casey Reyes and Ben Fry were an artist and a data visualization guy, but it's really people who define their tool, their creatives. They didn't find the tool that they wanted for doing creative graphics at the time on Java, and they went out and built it. They built their language, called processing, and then built the implementation of all the libraries in the driving community around it. It was all Java-based, but now there's processing.js that lets you run processing files on Canvas on the web. We used it because it has a lot of libraries, like particle systems, etc. So it's very convenient, and you can do things like this Galaxy guy we did for this presentation. Now, WebGL, the... I don't know the percentage, but I'd assume it's at least 80% of any WebGL content I've seen is using 3.js, so if you're intending to do WebGL content, unless you're a really big fan of doing all the boilerplate yourself, I would really advise using 3.js. It's a great library, very powerful, and of course here we used a tiny fraction of what it's capable of, but if you go to the 3.js website, you'll find a lot of really cool, very sophisticated content with it on top of WebGL. And then BlendModes. BlendModes is very simple. It's just one property. It's called BlendMode. It's applied to the element. No magic here. And then finally, Custom Filters, I'm going to jump into a demo in a moment. And then, finally, this has been done by CJA on our team. It's a really wonderful creative who works at Adobe in our team. So he's done all the heavy lifting on this presentation. He's worked with a bunch of people, like voice artists, etc., to do the character and the dialogues we have. And we had a lot of the people in our team who work on the specific features, kind of contribute to writing the right shaders and debugging the features we were working on. So this has been a team effort. And I'll show you a few more things. A few more demos. All right. So, the next demo is on Chrome. I'll show you something called CSS Filter Lab. So, this is a tool. It's an experimental tool. Again, this is available online. If you do Google CSS Filter Lab, you'll end up on this. You'll see it on Chrome. What this tool is, is kind of a playground for filter effects. So what you see on the right-hand side is actually HTML content. And I, you know, for it I can select text. And you can apply a filter effect, so the filter property to the content through the user interface. So the user interface exposes two types of filters. So what I was talking about, and then the custom filters. So let's start with the built-in filter. You can do things like a blur. And so the UI shows you both the syntax that you would put in your CSS for that, the element you're trying to blur. And it gives you a set of parameters that you can play with. So I start, you know, we'll start with a heavy blur. And I say that at the end the transition effect, for example, would like to remove any blur effect. So if I now play this, I'll have a transition I might want to do in a user interface. And this little tool gives you the syntax that you would have to put in your CSS animation effect. All right. So those are basic filters. You get things like saturation or grayscale, for example. So we could start you know, the effect was a full grayscale and then say that at the end we remove the grayscale. If I play it again, it's going to go from blurry and gray to crisp and colorful, which is what we want. All right. So those are for basic filters and those are again available starting to be available on phones. Actually, I have that listed. I have this on my iPhone. I have a mobile version of this tool on my iPhone that I can show you. Unfortunately, I was not able to set up my computer to replicate my phone. But I can show you after the talk. The other type of custom filters we have is custom filters. There are a number of things you can do with custom shaders. This is the crumple one. So this looks like crumple paper. But it's still CSS, still HTML. So I can still search the text or select it. And I can do all kinds of things. I can move it in 3D. Thank you. And same thing. I can do animations on it. So I can say that at the end of the animation, I don't want to have any of that effect. I want to have no rotation. So basically I want to be back in working order and then what have I done? Okay. Well, it's reversed. So you can do a little effect like this. It might convey some specific meaning for a particular user interface. You can do things like a page curl. I really like this one. Or you can change the curl direction, play around with this. You can do things like scrolling effects or unfolding effects like curtains is kind of fun one. I can turn this into a little curtain effect and have your content unfold. Another one would be a scroll, rolling scroll. I could do an effect where I start here. I'll start on my first animation frame. I'll start being rotated. I'll say scaled a little less. And then at the end of the animation, I will have unfolded be back to normal like so. And again, I could have a little reveal moment in my user interface, for example, to show the end scrolling of the scroll. All right. So you get the idea and the UI lets you play with it and then cut and paste the content. That's the way I actually use this myself when I do presentations which I write in HTML5. I actually use the filter lab to kind of prototype effects that I use and then I cut and paste the code and put it into my cell sheets for the particular transitions I want to have. And then check it out. It's on html.odw.com. The other demos I want to show you is another example that CJ just did. There was a conference in San Francisco this week, late this week on Thursday, Friday, called Devil's Reconf. One of the beauties of conferences is that you can attend some and you can attend some at the same time because they're video recording. This for Devil's Reconf will be posted very soon. And I really encourage you to check out CJ, Christopher Gaiman's talk. He covers a lot of ground on the future of online reading experience and the kind of features you can do. I picked one of the demos he showed at the conference because this is all built with SVG and just are available in browsers except one. So this is using SVG images and I have a little bit of physics engine going on here and I can use this to do storytelling. So here the idea that CJ wants to demonstrate is he can use regular web features or features that are about to hit the web to create a very different user experience and something that can scale, adapt to many devices, etc. So that's another example of something pretty creative that you can do on the web or will soon be able to do. So we're really heading towards a much more creative environment and I'm really looking forward to see what you all come up with and the kind of really creative content we'll see. So we've heard a lot of talks during this conference that I really enjoyed about design thinking and how to have a lot of empathy for your users and I couldn't agree more that those things are really important. Adobe will actually apply those principles when we come up with our products especially in the edge tool family that we're working on in our organization. But I think there's also something about play. I think play is really important. It's very important to sometimes not think too much an experiment. I think those two things go in hand. Sometimes just go have fun and explore with technology just push it, try to do things and maybe one day you'll find a use for it. So I wanted to show you just to conclude this talk with two little experiments that I did myself. I had fun doing it and I thought I would share those with you. It's called Quotes and I'll just let you listen to it actually because there's music. Bit me up after this. Thanks. I'm glad you enjoyed that. It's also a little solemn and I wanted to end on a lighter note. It's the end of the conference. It's party time. One of us you go meet friends family and have fun and I have a little demo that's a little bit like party time. It's called audio eggs and I'll share what that is. So one of the things I find really cool with Web Graphics is generative art. It's something you find a lot in the processing community that we were talking about earlier. Basically the idea of generative art is computers are really good at rerunning the same thing over and over again and you can change the parameters, have a little bit of randomness in them and that's what I've done here. All those eggs are generated dynamically from very basic shapes. The egg shape itself is just two busy curves where there's a little bit of randomness on the control points. They've got slightly different shapes. The colors are slightly varying again randomly and the eyes as well get shifted a little bit so they all have a slightly unique look. There's no two shape that are the same so I actually select one character like zooming on one and then I'll reload the page. Do you see that it's not the same? I'll do it again. Look at maybe this guy. When I reload the page it should not be the same. Is it different? All right. Anyway, I thought this was fun and at the time I was trying to learn a little bit about the Web Audio API so I thought I'd combine the two and this is what it camp was. That concludes my talk. Thanks a lot for listening. Have fun. Go check out Thank you. I have three questions for you. One is you showed that the ghost, right? What is the difference? We can easily achieve that using correct me if I'm wrong we can easily achieve that using color transition and CSS opacity transformation. I mean, how blend comes here? Yes. When you do opacity the combination you get between the background and the foreground is just a linear interpolation of the two colors. It's basically alpha times the first color plus 1 minus alpha the second color. The blend mode lets you do things like multiplying the two colors which gives you a different result. The multiply effect you cannot get with opacity because it just doesn't combine the color components that way. The next thing is you have used many libraries 3.js, progressing.js 3.js on those libraries conflict with each other. Your question is do you use libraries and are there conflicts? It depends on how you use libraries but here it's loaded in a way that there's no conflict. Also, it's a little bit of an unusual situation. The narrative was trying to hit on all of those different aspects. Typically, I'd expect that you use one or maybe two but not certainly not all of what was there in this presentation. As every library doesn't support it. They're meant for different things. There are different libraries for different aspects of CSS like templating or DOM access. Final thing is what is the performance aspect? I hope you wouldn't have measured it but what would be the performance on browsers and how will it work on others? I guess this should be a Chrome canary version. It's actually a custom build because we have the blend modes in there but if you try a canary build most of the content actually runs in it. Is it possible for us to get this built by any chance? Yes. If you go to hml.adb.com you'll find you go to the web standard section and then there are sections on blend modes, filter effects, etc. and there are pointers to the builds that you can experiment with and then there are things that you can do with the browser. Thanks. It was an awesome presentation. Thank you. Hi. Big fan and great talk. Thanks a lot. So when I started my career somewhere in 2004-2005 that's when Firebug just launched and Jake Berry was just about getting popular. And that was good because then I figured for the next five years or so I've grown with the industry with the browser and things are happening on a daily basis that every browser developer is trying to catch up. What kind of advice would you give to these people because frankly I find it hard to talk to them and tell them to pursue a career when there are 50 things and half of it hasn't been standardized yet. What would you tell these guys? So is your question about... It's very overwhelming, it's very intimidating the amount of stuff that you can do with front-end engineering right now. So what would you tell to somebody so on the overwhelming part it's hard, I mean I agree and I have the same feeling even though I didn't just start but I still feel it pretty overwhelming. There's a number of things people can do especially with social media today you can follow people or on top of what's happening people like Paul Irish or Divya Menyan or like some of the luminaries in the field or have pretty good guidance about what's happening on the web. Then if you're... if people are wondering about like what feature is available where and the kind of level of support there are good resources like can I use it's a great place to go check what the level of support is or Quark's mode is another one that you can go check and certainly that really resonated with me because it was said several times during the conference I'd encourage people to even though it's overwhelming to remember to think for themselves so it's not because your friends are using this cool new next generation JavaScript library that you should we see that a lot for example when people use nothing against jQuery mobile but a great library but it's not always the right tool so if people make the choice to use what their friends are using or they hear you know it's not necessarily the right thing so Eric thanks Well as a person that I believe touched that was touched web graphic very closely could you give us some sort of prediction what the web graphic will be in a year or two or three years what could we the web developers will how do you think where the web graphic will move in the next two or three years so my of course there's kind of things where and can you stop the video I alright I'll try so my hope more than my prediction is I will see features like declarative features come more and more to CSS so I like the expression 2D meaning that things like shader effects for example I really like because it's exposing to CSS so a fairly simple declarative way of reaching out to features something that's like hardwax already and a very powerful feature so I hope we're going to see more of those things in the at the CSS level now two or three years is actually a relatively short time for standards so if in that period we see CSS shader is being implemented and deployed in the in the major browsers I'd be very happy I'd be very happy if we see blend modes getting adoption and a new revision of the Canvas APIs I think that's really what we need I think we'll also need we'll also see a better adoption of WebGL I think WebGL is kind of unstoppable at this point so I think we'll see all the security issues I think will evolve and then they will get enabled in browsers the other thing is on typography and layout I didn't talk about this but in our group at Adobe we have different themes we work on so graphics is one the other one is layout and I think layout will evolve a lot in the next two or three years because there's been a large number of specs a huge effort being put in things like a grid layout at Adobe we've worked on something called CSS regions which I think is really essential for separating content from the layout like the gentleman who talked earlier today was showing how when you do responsive design you may want to rearrange your content in different ways but a region is a really key tool for that because it lets you define flows of content separate from where it fits on the page it's more layout than graphics but I expect those things to become more mainstream excuse me hi you're talking about the security aspect of the WebGL and all how security is like you're directly accessing the GPU from a browser what is the current status of the security of all these features so I'll start with WebGL WebGL had a number of problems so the number of attacks you could make with WebGL one for example would be I'll create a crazy shader with variable names that are so long that I'm going to cause overflows and crashes in the GPU system so this has been addressed by like doing shader rewriting no browser implementation takes a shader and presidential GPU nobody does that all the shaders are actually statically parsed rewritten, analyzed, variable names are changed and then once that part is secure then they're put on the GPU there are other issues with drivers that were just not secure enough so that's been addressed by blacklisting a number of drivers so WebGL is just not available when you're hitting those drivers and then there has been issues basically denial of service attacks so if you start having something that takes too much time on your GPU then basically it locks up your system so the Kronos group has been working on like watchdog solutions and different operating systems have different measures against this for example Windows has actually system level APIs to try to reset the GPU but there are things that have been worked on on Kronos to address those issues so my understanding is following Kronos as closely but my understanding is that there's been enormous progress on the security aspects of WebGL and it's now ready to be enabled and safely so for CSS shaders when we proposed the feature there was a gap in security so there's one thing that we didn't realize when we brought the feature that people could do something called timing attacks and basically that was giving them a way to infer what information was being displayed on the screen which is a security breach and that's been addressed in the standard currently and there's no known security issue at this point on CSS shaders it's on the par with WebGL at least for the type of risk you may have from a shader hello it might have been already told but I would like to repeat that it was very pleasing and very educative thank you I had a question around the SVG part of it where you started focusing on the S and the V part of the graphics and why it's good you also touched upon accessibility at that point I'm not convinced it would make sense here it's actually you're addressing a particular sense visual or audio even though you can add attributes or you can add more semantic description I don't see them blending and making sense for someone who has a visual issue visually complaining the picture I don't think adding any semantic description would add value that's a good point I understand your point is accessibility is not the reason why you would pick SVG in that case the reason why we use SVG in this case is because of DOM access and the styling system more than accessibility because it's a whole experience and at that point you're beyond a data visualization where the accessibility argument is actually prime but here it's not the main reason but have you seen examples or have you used where actually it added a lot of accessibility value yes I do in previous life I worked at Oracle on a data visualization solution and we had so we're doing all kinds of visualizations for Oracle products and Oracle being the company was very strict on having accessibility and it was we had all the hooks in place for SVG so you could with a screen reader actually goes through the visualization and actually get pretty detailed information about the different aspects of the graphic and that was really easy to do in SVG and excruciatingly hard in other technologies so yes essentially you can set it up so that it will go to the information rich parts of your graphics and it's really helpful for a screen reader hi great talk I have a question about CSTS3 regions how is the progress considering that design is like Eric Meyer don't like it Harry Meyer don't like regions yeah okay I didn't realize he didn't like it but I thought he had comments on some aspects of the spec I don't think it's a blanket statement he said that the flow data flow is not proper in CSTS3 regions alright I can't really comment on that because I haven't seen the argument I doubt it's just a blanket statement saying that it's it's not really a blanket statement I agree but it was something along those lines he said he said it on the big web show okay I'll have to check it out thank you but I disagree let me just elaborate on this so the thing is people have sometimes preconception on regions I don't know if it's a case here for EMI you may have valid arguments I don't know but sometimes people think regions have been proposed by Adobe from a background in print and it's totally not suitable for the modern web it couldn't be less true that perception because the way it originated at Adobe was totally not from the printing side of the company but quite the opposite from people were doing online digital publishing for the web and had been doing it for years and they came up with regions because they were solving a big need for them when they were trying to lay out content responsively and have the layout adapt to different aspect ratios and device resolutions and they found that the ability to separate the flow of content from the places where it was going to be a layout was an essential tool to achieve that and there's consensus really that this core feature of separating the name flows from where it will end up on the page is really needed because without that ability really you're left in HTML where you have to break down content in elements statically so there is a binding between the content you want to display and basically boxes where it's going to fit because that's what it is where you start using flows like regions has you actually you make a lot fewer assumptions on my content and then I'll have a set of boxes where I need to flow but if you reduce the size of one box and the flow is going to just go and be pushed further down on the following boxes the chain of regions and that's an essential tool there's been a lot of debate about the syntax and how far we push certain aspects of the features but I haven't heard recently many objections on the core concept of needing to separate those two things because clearly having the content bound to specific boxes I don't think a good thing so my question considering Adobe Brackets and the animation stuff you showed today and your hints at Chrome OS am I wrong to assume we're getting the impression that the web will replace desktop applications at some time because it seems like we could end up with Photoshop inside the web browser um yeah that's probably going to take a while but uh I mean certainly I don't think it's a replacement I think it's an evolution my personal take on it but it's not necessarily representing Adobe's perception of the company but I think we're evolving towards your model where if you look at the desktop applications for example on like Office Suite one with the transition to the web is a lot of failed attempt to just redo word on in a browser and that just it fell in itself, it was just too heavy weight the thing that I think is successful is Google Docs because Google Docs says ok we're not going to try to do a word processor where you can write a book, we're not going to try to shoot for that but a lot of our users actually don't write books they write one or two or three or ten page documents but not much more so we're going to address this well and then we'll use the web for what it's good at so like for collaboration features and things like this so there's fewer features there are other features and it's kind of a different experience and a different model I think the same will happen with creative tools cool thanks ok so I'm sure there's lots more to learn and I'm sure you want to talk more but that's closed for now and you can continue connecting both outside as well as over the internet thank you very much thank you so quick