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.  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 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.  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.  But semantically, none of those particles really carry any meaning.  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.  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.  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.  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


Well, this is my second video on the PingPod 700. I did the first video showing the unboxing and then I plugged it in the charge and just tell you what happens when you charge. You get a little nice looking battery charging symbol right there of a battery charging and up in the corner here you got a blue light. The blue light eventually turned off. I'm assuming that means it's fully charged. Really wanted to record the first time it started up but as soon as I unplugged it from the wall it booted into Android. So we'll record the boot time again at the end of this video but for right now let's just have a look at how it runs. Tap the power supply. It turned on pretty fast there from sleep mode. Now I drag that way. Okay, let's see responsiveness. So going from desktop to desktop seems to be pretty responsive. So let's see here we got standard apps, browsers. So this is my first time turning it on so I really don't know what's on here. Looks like you got the Google Play which is good. Okay, so now that we got that I guess let's just jump in and try playing, let's see do we have a YouTube application in here. Let's see what's installed by default. So let's just open up the browser and browse something. Oh right, I don't have. Probably be good if I hook to my Wi-Fi. I'm going to pause and hook to my Wi-Fi real quick here. Okay, now that I'm on my Wi-Fi let's search and we'll try films. Photos by Chris came up in the search, that's nice. And on my website there everything seems to be loading pretty quick. I'm a pretty snappy little tablet here. Everything looking good here. Let's go into my photos which are set to detect that I'm on a mobile device. And oh it didn't detect this as a mobile browser, that's interesting. On my phone it would have went into a mobile view. So for some reason my website is not detecting this browser as a mobile browser but still it's loading just fine. Oh look the video I uploaded earlier, let's click play and see how that plays. Okay, so that's loading pretty good. In fact I think it's loading better than my Arcos tablet which was probably twice the price of this one. So yeah, video is loaded well, Wi-Fi connected no problem here in Android, everything seems very snappy. I don't have much to show in here, I don't know if there's any install games by default and I personally don't like installing too many apps on my devices, I just don't trust most of them. But like I said we do have the Play Store so we do have the Google Play so we can install stuff from there. I haven't set up my account yet on this but I should be able to access my Gmail, got a voice recorder by default, Google Talks installed. So far I'm very happy with the performance of this, let's see, home button there and that's it, I just wanted to quickly show this so let's actually power it down and restart and see how long it takes to do that.  While it's booting I want to say I did notice that a lot of most Android voices I've used in the past, when you first, let's see maybe a long press to turn this on, there we go, there we go, most Android devices want you to set your Google account in a second they turn on, this one did not do that, which is actually kind of nice but something I'll have to do myself, you get a nice little ping pod splash screen there and then the standard Android splash screen there with a little animation going and should have been timing this but I'm sure you can look at the time on the video when I started and when it finishes so there we go, it boots relatively fast I think and it's connecting to my wifi already so that's just a quick little look, oh you know what, let's have a quick look at the camera as long as we have the device going, oh hey, pretty smooth video for a cheap little tablet like this, zoom in, so everyone say hi, okay, great and back up probably, there we go, so that's it, next video we'll boot off the SD card and see, I don't even know what version of Linux is on that SD card that it came with, we'll have a look at that next, in the next video. So for now, I hope you enjoyed this video, please visit FilmsByChris.com, that's Chris with the K, check out the links in the description and I hope that you have a great day.


Cigarette lockdown ban. Big brands still suffering as smokers choose cheap.  The legal multinational's market share of the sale of cigarettes went from 70%, pre-ban, to 33%, in ban, to 50%, post-ban, a survey shows. The prohibition did not prevent smoking either. 85% of smokers kept smoking during the cigarette ban. Only 8% quit and half of those who stopped smoking indicated they started smoking again once the ban was lifted. This data is provided in the latest National Income Dynamics Study, Coronavirus Rapid Mobile Survey, NIDSCRAM. Tobacco sales were prohibited between March 25 and August 17, as part of the government's response to the COVID-19 pandemic. There were about 6.7 million adult smokers in SA before the start of the lockdown, the report estimates. The average daily number of cigarettes smoked by smokers decreased from 7.9 cigarettes in 2017 to 6.5 cigarettes during the sales ban and up to 8.8 cigarettes after the ban. Adjusted for inflation and expressed in constant November 2020 prices, the average price of cigarettes increased by nearly 200% between 2017 and the highest point it reached during the sales ban. Total expenditure on cigarettes, equivalent to a total gross turnover of the tobacco industry, changed from an annualized R32.1bn just before the ban to an annualized R72.9bn at the peak of the sales ban, and fell to R31.3bn once the prohibition was lifted. The sales ban hurt the multinationals, British American Tobacco, Philip Morris, and Japan Tobacco International, but greatly benefited the non-multinationals, of which the prominent companies are Gold Leaf Tobacco Corporation, Carnilinks, Best Tobacco Company and Amalgamated Tobacco Company. Whereas the multinationals had an estimated market share of more than 70% pre-lockdown, this decreased to 33% during the sales ban. After the sales ban was lifted, the market share of the multinationals recovered to just more than 50%, the report said. Very sharp increases in the retail prices, more than 400% at the peak of the sales ban, together with the 70% increase in sales volumes, meant that the total estimated gross turnover of the non-multinationals increased very sharply during the sales ban. Even after the lifting of the ban, the total gross turnover of this group is probably more than double what it was before the ban. The National Treasury budgeted that R15bn would be collected from tobacco excise taxes in the 2020-21 financial year. The 20-week sales ban means the government lost about R5.8bn during this period. There are no angels in the industry. All tobacco companies, both the multinationals and the locally-based companies, have been accused and slash or found guilty of various kinds of wrongdoing, said the report. The non-multinationals, which more than the multinationals have previously been found to sell cigarettes at prices at which it is impossible for the full tax to have been paid, have benefited disproportionately from the ban. Because they already had well-established distribution channels into the illicit market before the ban, it seems likely that the sales ban has entrenched that market. The researchers estimate that if there is one tobacco-related death for every million cigarettes smoked, the decrease in the quantity of cigarettes smoked during the 20 weeks of the sales ban is likely to have prevented about 2,300 future premature tobacco-related deaths. A large increase in the excise tax at the start of the lockdown would probably have yielded a similar outcome, in terms of a reduction in cigarette use and a decrease in smoking prevalence, as the sales ban, said the report. However, it would probably have been less disruptive and yielded more revenue for government. That the already well-established illicit market became more entrenched during the sales ban has complicated the task, for SARS and other law enforcement agencies, of reducing the illicit market. Clamping down should be a national priority, said the report.


Kill this guy right now, puffy puffy. How am I alive? No, no, no, no, no, no, run bro!


I know you're young and you're looking for a job. You may not even care about looking or learning about the child labor laws, but ask questions. Find your worth when it comes to employment. Working in the fast food industry, it was something new. I was dealing with a lot of cutting machines and cutting equipment, things like that, cutting vegetables and meat, things like that, something I had no business doing at all. However, being introduced into the child labor laws and things of that nature, I found out that many young people such as my age or my classmates or people a little older to me and a little younger than me are doing the same exact thing, something they shouldn't be doing. However, their bosses tell them to do it and we do it because we want money. That's not the way to go about it.


Hello everyone, my name is Juan Pinarieta and I'm going to talk about using AI to build the next generation of human computer interactions. So, first of all, just a little bit about me. I have several years of experience using AI tools to build new interaction models such as voice, hand tracking and computer vision. I work on the Echo Show, the first generation multi-model Alexa device. And then also I work at Facebook, an ARBR organization, building an assistant for several of their devices like portal, Oculus, and later the Raven Stories, as well as I did some AI work explorations there with them. Today I'm working at Merlin Mind, which is a company, an educational company, building the next generation assistant for K to 12 teachers. And we are trying to incorporate a lot of these learnings to build this new experience. Finally, as you can tell by my picture, I'm a sci-fi comics fan, love to figure out how to interact with computers with big hands. So this comes in handy when developing new human computer interactions. So the first thing we think about when building a new computer-human interaction model, we think about building the future like a minority report where you use your hands, your voice to interact with a system. Like this is the ideal vision that we all aim for and that we all dream for. Another example is the examples of the movie here where the character interacted with an AI assistant purely via voice and the conversation was perfect, emotional and very natural. However, today the technology looks more like this where you have some remote controls, something in your head, and it's not as beautiful as we have seen in these other movies. Another example is like when you interact with voice, there's always these elements that sometimes don't get it right. So you have to repeat yourself a lot and you have to make sure that you talk in a precise manner so that the system can understand you. So today I'm going to talk about some lessons that I have based on my experience for using AI tools to build new human computer interaction models. I'm not going to dive deep into the technology itself. I'm going to focus more on how to build this experience and from a product management perspective how, what are the insights and the lessons that you need to take care when building these experiences. So the first lesson is a very obvious is like make sure you focus on solving a problem and not a technology. So that's the first thing. Second, make sure you measure cognitive load to evaluate impact. Cognitive load is the amount of mental processing that a human needs to do to take an action and this is one of the most important metrics when deciding what type of interaction are you going to pursue. The third one is consistency is king, making sure like users have a consistent experience and no known patterns, use known patterns is very critical. And the third one is learn how to make trade-offs of coverage versus deep experiences. So we're going to go to one by one in this presentation. Okay, so the first one, solving a problem. Understand what problem you are solving for. So this is kind of like an example when people start like developing the smart appliances, they were developing these apps that you can use to control your lights, for example. The existing experience was very simple. It's like what to switch and turn on the light. However, the solution that was developed wasn't necessarily easier than the previous one, right? Like there wasn't really kind of like a problem to turn on your light when you're in your room. It actually made it a little bit worse. You have to take off your phone, unlock your phone, find your app, authenticate and then you can be able to turn on the light. You also had to hope that the Wi-Fi is not down so that the light actually turned on. So there wasn't like a lot of problems that you were solving with these initial smart appliances. But to be fair, there was a problem. There were some people that really liked these smart devices to turn on their lights when they were away from home, right? Like where you didn't have physical access to the switch and you used technology as Bluetooth or network connected smart devices to support that. Now, that is a problem. It may be a small problem, but it's still a problem. However, when you start thinking about brother, like if you add voice, this may be solving a larger problem, which is like, oh, maybe you can turn on your lights when your hands are not available. Maybe you are cooking, you have the baby on your hands. So you start focusing on a little bit of a larger, more common problem that may be able to help you. But still, up to today, this is still not the ideal kind of like solution to the common usage of turning on your lights, which is you are entering a room and you have the switch right next to you. So potentially, like what a lot of companies are moving on is to try to figure out how do you turn on the lights just when the person enters the room and you have that person to do anything, right? And here, I mean, you are basically, you could enable potentially use presence detection using machine learning algorithms, not only sensors of movement sensors, because movement sensors can be triggered by anything, but like just detect when a human is in the room, either via voice, via cameras. So there's potentially a little bit of a larger problem that you can solve. So my point here is that you need to kind of like focus on what is the problem that you are solving for the user, how big is that problem, and how does technology help you solve that problem. So really, when you're building or using AI to build different human-computer interactions, you really need to focus on what is the problem that I'm solving on right now, and then think about what technology I'm going to use to solve that problem in the best way possible. Here's an example of one of the best cases of AI technology on everyday usage, right? Which is a basic usage search. Google, for me, has done one of the best jobs for implementing or adding voice into their experiences into the search bar.  The use of voice here has really helped you try to search very fast in a very reliable way. So I think this is an example where you are focusing on solving a problem and using the technology to do it. Alright, so focusing on solving a problem, that's point number one. Point number two, measure cognitive load. So you would say, okay, how do you measure the impact of the different problems that are happening, right? So impact is not always time, saving time, or less physical steps. It's a lot about cognitive load. So let's take an example so you can see what I mean. Let's take an example. A person wants to listen to music. Okay, so today they can either go to Alexa and ask, hey, play a specific song by a specific artist, or they can go to their laptop or mobile phone and try to find a song that they want to play and click on it, right? It's obviously that going to your laptop or your mobile phone will take a lot more steps because you have to get your phone, open the app, authenticate, actually find the song and play. But there's a lot of hidden cognitive load on both of these processes. For the first one, the user needs to understand, okay, what song do I want? What mood I am in? What was the name of that artist? What was that song name? Otherwise the system may not recognize what do you want to play, right? There's a lot of cognitive load on making a decision about a specific song, a specific artist. On the other hand, if you're in your laptop, there may be too many options and you don't know what's good, what's not, and you end up scrolling through thousands and thousands of songs before you actually pick one. This is the problem that a lot of companies like Netflix and other media companies have because they have so many options you never know what to watch, okay? So how do you improve this experience using AI, right? So lower cognitive load is about building trust on the system by executing simple actions. So let's take an example. So in the example of what I want to listen to music, the simplest command that you can play or you can educate your users is to just say play music. So if you educate your users, just say play music and trust the system that the system will play the music that you like in 90% of the cases. How to achieve this, right? You can do it first. You can build machine learning models to predict what's the next back song that the user would like. You can use context like location, time, analyze the mood based on the vocal chords. You can understand previous history of what that person has listened in the past. And you can also enable something we call Phosis Search where the user can just say or can like just sing a little pieces of the song and you can match it to existing songs. So all of these are using kind of like these different matching machine learning algorithms to reduce the cognitive load of the users to really have to memorize what specific song they want. Okay. The second thing you can do is to reduce failure recovery. Trust in the system is a lot about how easy it is for me to recover, how costly it is for me to take a second shot. In the music example, the user can easily say next or maybe they can have a button in the UI that says next song or I don't like this song. And Alexa or the AI virtual assistant can easily pick a different song and the cost of actually failing is very low. One example, for example, when this doesn't happen is on videos. If you pick one video, the cost of failing of picking a specific video is very high because you are not going to be able to kind of like evaluate how good the video is within 30 seconds. So picking a video takes a lot more cognitive load and it requires a lot more prediction and algorithms here. So but developing UI and systems to help you recover easily. It's another way to build trust in the system and reduce cognitive load. The third one, it's you can help the user create this and be way different options. If the system has low confidence about which option to pick, the system could potentially show, okay, which one of these three options will you want to choose? And that will help the user gain more trust in the system and reduce cognitive load. But as I said, it was all about helping the user understand what is the simplest command that you can say. So you have to memorize or ask for a specific song and give him trust on the system that the system will provide the right answer. And in this case, we have applied to music, but then you can apply that to many different other use cases, such as like maybe opening apps or offering different things. All right. The third point here, consistency is skin. Okay, so what do I mean by this? So the first thing here is don't make people learn more than once. Here, let's take one example. How will you access your apps in an augmented reality system? If you have to design an augmented reality smart glasses, what in what way would you allow the users to open your application or app stores, right? You can use voice. You can just say open my app stores, or you can also use hands recognition using computer vision to try to open the apps. So now you have to select which gesture you have to use. If you see the existing behavior of users on their mobile phone, most of the apps are open when you swipe up, right? That's how you access apps. So if this is something that people have already learned that they're already using on their phones, it makes a lot of sense to try to replicate it on on the smart glasses in the same way. Okay, so don't make people learn more than once. Just use what they already know. There's one example. There's one example. For example, Keiichi Masuda have built a lot of hyper reality videos. These are concept videos. In this case, for example, he's not using the hands recognition to swipe up. He's using, if you notice, like the hands opening to actually access the apps. And there could be many reasons why he made that choice. It may be that the hands recognition when you swipe up is not reliable enough. So users are kind of like getting frustrated because it doesn't work all the time. So in this case, for example, he chose that way. But ideally, if the reliability and the performance of both gestures are the same, you should pick whatever users already know. Here's another example. Like how will you invoke a voice assistant with your hands in an AR world? So in this case, there's no pattern or no common usage of invoking an assistant user with your hands. Nobody has done that. You only use your voice. So if you have to use hands, if you want to allow the user to invoke the assistant in an environment where they don't want to say open, like, hey Siri, or they don't want to say, hey Google, how will you do it? So you use common mental models that can help the user try to associate those gestures with the action that you want to take. So in this example, for example, Keiichi Masuda used opening your hand. When you open your hand, you access Google.  It's kind of like a similar behavior. It makes a lot of sense. I mean, it's not something that you do today, but it's easy to understand because it's a common mental model in typical history or science fiction or comics books. So that's where like a lot of the influence of comic books come in handy when you have to teach new interaction models to users. So built on top of common mental models is very important. Lastly, use or try to create the standardized patterns. So in here when you want to build something that needs to be consistent across different experiences, try to use common standardized patterns. For example, Google does this very well where they have recommendations for what to do next, what's your next best action. And both when you are on your phone, you have these little bubbles that appear there or what are the recommendations that the machine learning algorithm is giving to you. And they also show when you are interacting with Google Assistant, this help the user really quickly understand what is that for. Because if they use it on the phone, they can quickly use it on the Google Assistant, on the Home Assistant. And they don't need to kind of like processing, oh, what will that bubble do and what do I do when I click on it. So you reduce the cognitive load of making that decision and this is super helpful for the user. So consistency is key to develop common mental models to create common patterns and always try to standardize them across experiences so that you reduce the cognitive load of the user. Okay, so that's point number two. And the last point that I'm going to the last lesson I have, it's how to make trade off between coverage versus developing deep experiences. Okay, and what do I mean by that? So a lot of times when you're building an experience, you need to understand what is the job that you're fulfilling and who are you replacing. So let me give you an example to tell you what do I mean here. So for example, in my current company, our job is to help teachers and tether from their laptop during class. A lot of teachers developing their, develop their class behind a laptop. And we want to build an assistant that helps them walk around the room, engage one more with teachers and use different interaction models to do this, like including voice, remote and different other interaction models. But what are we replacing today? So if we want to help the teacher move away from the laptop, we need to understand, okay, what are all the actions that are doing today? They're giving presentations, setting up timers, asking questions to Google, writing notes, et cetera, right? And how they are doing it today. Today, they're using their laptop with a mouse. Sometimes they have a clicker, maybe to manage presentation. Or sometimes some of them also have existing voice assistants that allows them to play music or set up timers via their voice. None of these are perfect solutions today. Also, they are like different type of devices that they have to interact with. And this costs a lot of cognitive load for teachers, right? When they have to be focused on engaging with students. So, but what I mean here is that if I want to build a solution for these teachers, I need to make sure that I have coverage of all these experiences. If I don't cover all these experiences and the teacher has to rely on their laptop or existing devices for some of them or the majority of them, then I'm not going to be able to replace the current or fulfill the job and replace their current solutions. So I need to make sure that my solution helps them across all these different activities, even if they are a little bit light. So, for example, with MerlinMind, we are using both voice and remote control to help them develop all these activities. And we're mixing some of these, we're allowing them to use multiple interaction models depending on what the teacher wants to do. But we need to make sure that we cover all the different aspects of the classroom activities. Otherwise, the teachers are going to have to pull back into their existing solutions. So the key question is, how do I do that? If I have to build experiences for all the activities of a teacher here, I need to spend a lot of resources which I may not have. So how do I prioritize this? And what are the trade-offs that I need to make here? So one of the trade-off is, how do you decide what can be a light integration versus a deep integration? So let me take you an example. In our music example, Alexa, when they build music, they integrate directly with Spotify, Pandora, and each of these services uses ML models to personalize your results. As we saw before, teachers or students or users want to trust on the system to get the best song. But this involves a large group of people and a lot of resources to develop. So if this is not one of my main activities within my use case, in my case, a school, I can choose to do a light approach. For example, leveraging a browser and opening YouTube. I can develop a very limited experience to play music via voice, but trying to do it in a light way. And those are the trade-off that I need to make about which of these actions or these activities I need to have a wide coverage versus developing in a light way so that I can start testing my solution. So in our case, for example, this is some of the ideas that we have had about how to solve a teacher's problem. And in some cases, we have chosen to do more deeper integrations. In some cases, we're doing some more lighter integration, relying on existing tools. But hopefully this allow teachers to kind of like use one solution that covers most of their use cases. Okay. So here are some ideas about how can you kind of like think about where do you make these trade-offs? You can start thinking what activities can be covered by 80% with a light approach, right? Maybe like music, for example, teachers may have like 10 or 20 different playlists that they may play in the classroom. They don't want to play specific songs, so we can offer playlists like curated playlists by YouTube and we start with that. And that's something that we can start offering so they have something in place that fulfill the job that they are doing. The other one is also you can think about is it easy to educate my users on the limitations? Is it easy to explain to them, hey, we are only offering this limited amount of use cases that will help you cover most of the experiences that you have in class and get feedback on that and try to understand whether that's good or not. And the third point as well is like how can you learn? Like if you choose to do a light activity to get coverage, how can you learn when do you need to invest in a more deeper integration? What type of metrics are helpful to understand where do you need to go deeper? In this case, it can be understanding what users are asking for. If a lot of users are asking for specific RDAs or maybe they are just asking for things that they want on their personal Spotify, try to gather that data to prioritize a deeper integration when you have resources. So that's point number four. So as I said, these are the four learnings that I have had in my career when using different AI tools to build human-configuring interactions. Always focus on solving a problem, don't focus on developing a technology. It's very critical. Measure impact on cognitive load, which means building trust on the system by developing simple actions. Consistency is key. Don't make users have to learn something new. Don't like use existing patterns and try to use common mental models when you're building different interactions. And the final one, know when you have to make trade-offs on coverage versus deep integration so that you can have a whole experience for the user. I want to give one more lesson. My dad always told me, don't do good things that look bad. And lately we have seen a lot of privacy news, a lot of privacy issues that a lot of the big companies are having. Because sometimes we haven't been that transparent with the users. We haven't been that open or we haven't kind of like, we haven't stopped thinking about is this something that will look bad for the user and try to explain it. So make sure that you always think about what data are you collecting? Like does the user know you're collecting that data? How can you be more transparent to the user and always put the users in control when you're using AI to build new interaction models? I think just building trust on the system is the most important. And part of that trust is making sure that users feel in control of their experience and what data is being tracked. So I just want to close with this guy. I don't know how many of you know him. His name is Alan Kay. He is the leader of Xerox PARC. Xerox PARC was an R&D kind of like lab that existed early in the 80s, I believe, where they did a lot of experiments. And they actually invented the mouse, invented the visual OS systems that we use today, that Windows and Apple Mac OS is based on. And a lot of the things that we use today came out of that laboratory in those days. He said something early on that I always take with me is like the best way to predict the future is to invent it. So go and start experiment yourself. That's it. Thank you very much. As I said, I work on Merlin Mind and we're hiring people. So if you're interested or you just want to connect, please reach out to me on my LinkedIn or here's my email where you can contact me and find out more about me. Thank you very much. It's been a pleasure.


1. If I were not perfectly sure of my power to write, and of my marvelous ability to express ideas with the utmost grace and vividness. So, more or less, I had thought of beginning my tale. Further, I should have drawn the reader's attention to the fact that had I lacked that power, that ability, etc., not only should I have refrained from describing certain recent events, but there would have been nothing to describe. For gentle reader, nothing at all would have happened. Silly, perhaps, but at least clear, the gift of penetrating life's devices and innate disposition toward the constant exercise of the creative faculty could alone have enabled me. At this point, I should have compared the breaker of the law, which makes such a fuss over a little spilled blood with a poet or a stage performer, but as my poor left-handed friend used to put it, philosophic speculation is the invention of the rich, down with it. It may look as though I do not know how to start. Funny sight, the elderly gentleman who comes lumbering by, jowl flesh, flopping in a valiant dash for the last bus, which he eventually overtakes, but is afraid to board in motion and so with a sheepish smile drops back, still going at a trot. Is it, did I dare not make the leap? It roars, gathers speed, will presently vanish irrevocably around the corner, the bus, the motor-bus, the mighty monter-bus of my tale. Rather bulky imagery this. I am still running. My father was a Russian-speaking German from Ravall, where he went to a famous agricultural college. My mother, a pure Russian, came from an old princely stock. On hot summer days a languid lady in lilac silks. She would recline in her rocking chair fanning herself, munching chocolate, all the blinds down, and the wind from some new mown field making them billow like purple sails. During the war I was interned as a German subject, Johnny Bad luck, considering that I had just entered the University of St. Petersburg. From the end of 1914 to the middle of 1919 I read exactly one thousand and eighteen books. Sample complete. Ready to continue?


Dreams bigger than the moment when things get extremely hard.  My dream is here. This is the train This is the zone. I do this every day. I don't do this when I wake up and I'm winning I do this when I'm losing also. I do this every day. I do this on Sunday every day This drink this train does not stop. It is a one-way. It's a one-way track. I have a one-way track mind guys It runs that way guys. It's all good. There's nothing negative in it It's positive all the way, but this light is my dream. What's your dream? Everybody right now write it down What's your dream? And by the way some of you it may be I don't know it truly may be I don't know Like that may be your dream. See you may have already hit it You need a new one one of the cool things I love about my wife is that we're able to keep dreaming every day It never ends one of the craziest things that has allowed us to keep moving is how crazy our dreams get and when we shared our dreams with other people, you know what they told us you're stupid So we stopped sharing them 2018. I'm sitting in a dealership made 2.5 million dollars being a GM Told me that or the owner told me that I was making too much money because I took a store from making a million to 12 million And he said that he'd never envisioned paying anybody that much and I said well I'd never envisioned you making that much either so but he said well I mean it's just you know, would you think we're paying you too much surely you can understand So he's he talked to me about what he thinks I should make I shook his hand and I walked away He called me back the next day and he said no we'll keep your pay the same I said off. I started my own business and I went all in listen to me He called me three days later, and he said I'll pay you more. I'll pay you more than you were making Why would somebody with me why you know why people get greedy don't ever get greedy understand this Okay, every single person in this room guys. It's not about money. It's about making an impact You know the reason why we're able to sell so many cars and make so much money in that dealership was because I love my people That's why my people that work for me all average 30 grand a month. They made a lot of money, and I love watching them It's all I cared about I'm gonna tell you this right you're made for something great And by the way, I was a worst salesman in the history of time And I was able to do a lot of this stuff Most of the successful people that you look up today were living out of their car Okay, one of the things that I do whenever I go to study somebody number one I see how great they are today, but I want to know the backstool.  It was awful. Okay. It was awful I am telling you right now all you need is one little taste of something that you to remind you that man This is what I need by the way if anybody in here really wants to really go to the next level Seriously no no no go into a nursing home and walk in there cuz right now you're wanting to start your own business You guys got your own deal by the way some of you guys in here have reached mad amounts of success Do you know there's a lot of people in here that have a lot of money in the bank and they're still in here training guys Listen, I just spent 30 grand going to a pet Patrick Bet David event in Miami with me and my wife 30,000 for training for three days. I'll never stop my money means nothing I care about me and her the way that we think what we're able to do what how great are we? Okay, how great is my team am I giving the tools that they need to succeed? I want you to think about this right? How do you scale and grow? How do you guys move? Well, how do you move the biggest part is you got to have a dream You got to have something that makes you want to wake up and go There's a saying that I say that I sleep with my shoes on okay And what that means is that I literally sometimes don't want to take them off because I'm so excited to get them Back on in the morning and go one of the things that I have to do is slow down because I want to win so much I never take for granted one second go into a nursing home and go ask him say hey I want to ask you so obviously you're here. It's the end of your life, right?  I'm thinking though that this is probably where they're gonna hang out until they go meet Jesus Okay, so I'm like I would say something like so tell me about your life, right? Do you have any regrets and most of the time massive amounts? You'll see tears break into the eyes.   It's yours.


I absolutely loved it when I read it. I had no interest in YouTube. Maybe it sparked my interest. Keep watching to find out what I'm talking about. This is Kyla Denigno. So today we're talking about the book, Life's Two Shorts. Because life is too short, record that YouTube video while you're thinking about it. Do it, do it, do it. This book was written by Abby Jimenez. The genre of the book is fiction. The theme of the book is romantic comedy, okay? So my favorite character in the story is Brent. Brent is Vanessa's half-brother. And so the reason why he is my favorite character is because Vanessa has this really tragic story. But she is upbeat, she's quirky, she's pushing along, she's making the best of it, right? So when you get to see her, you get to see this baby that she's taking care of and you just fall in love and you're like, oh, I'm rooting for you, Vanessa. But then, so when you really get to see this different side of Vanessa, you get to see that, oh, she's taking care of the family.  Oh, she is paying for the house that is living in that the sister Annabelle was living in and Brent lives across the street. So it's like he's a part of the family but he's so on the outside that she gets to have a different relationship with him. Brent is a supporting character. Like Vanessa and Aiden are cute and then you have Grace but I think you would be missing something if you didn't have Brent, if you didn't have his little comments, his little sarcasm, his little cheekiness. And so that's why Brent is so important to the story because he really helps us to see more about Vanessa, right? It's one of those characters that if they weren't in the book you would be missing that. Actually, YouTube is a really big character in the book too but Brett was my absolute favorite, okay? And by far, and this is a spoiler, I love the fact that Brett comes around and at the end of the story, Vanessa can be proud of him because when you have siblings and you tend to be the one who's always asking for money or needing something or wanting to be bailed out, when something works out for you and you can be proud of yourself and your family can be proud of you, oh, that's the best, okay? That is the absolute best. Another little spoiler is that Vanessa is a YouTuber. She makes a video, it ends up going viral and so then she keeps recording and you get to see her different relationships that she has with people and how YouTube plays a part of it. And so life's too short. I mean, come on, I had to review the book. She's a YouTuber, I'm a YouTuber. It just made sense, right? So would I reread this book? Yes. In fact, this is my second time reading it, right? So I just started doing book reviews in March, 2022 and I sat there and said, what books have you read that you love that you need to talk to people about? And this was one of them because I loved it. I absolutely loved it when I read it. I had no interest in YouTube. Maybe it sparked my interest. I don't know, I can't tell you, maybe my journal would know. But this book was reread for this book review and I absolutely love it and will miss it.  And so yeah, I definitely would reread this book because this was a reread to do the book review. So absolutely very, very good book. So I will see you next time on Kyla's Reading Day. Bye.


I was wild in 94, 95. I was like, wild. There was a bouncer on the back door of Camden Palace. It was alleged that I run up to him. I've tried to shoot him with a sawn-off shotgun. Prison for me was just non-stop conflict with the Shrews.  Like, that's what I'm going to get. It's going to, I'm going to accept that for you. I've jumped up.     All the fellas have come out of the wing with tools and they're expecting us all to run off. Yeah! Let's go, let's go, let's go. And then you're like, yeah, let's go, let's go. You've got a time in your life where you're going to accept to be getting life at some point. Yeah, I was going to get life. It was, it was just, it's happening, isn't it? You get nicked for them shootings, that you're either getting not guilty or you're going away forever.


Here are our players of the week for week one. We're gonna name a few of these guys and we're gonna start off with who else? Then the Amish rifle Ryan Fitzpatrick had a big week against the Saints play action right there boom Completed to one-of-one to Sean Jackson for the touchdown. Let's break down that play You're gonna see Jackson circled in the bottom of your screen being covered by cornerback Patrick Robinson Fitzpatrick knows that this is zone defense. So after the play action He sees Robinson let go of Jackson because his assignments to cover down low Fitzpatrick knows that the linebackers in the safeties Can't catch up to Jackson those a deep ball for the touchdown He also did some work on the ground with his legs You're gonna see right here Cameron Jordan is the guy that is circled on the bottom of your screen That's because this is gonna be a read pass Option he's gonna fake it to Peyton Barber and depending on what Cameron Jordan does if Cameron Jordan pulls in and goes After Barber then Fitzpatrick is gonna keep it and run it into the end zone for the touchdown But if Jordan stays then he's gonna hand it off to Barber and it's gonna be a running play But let's just see what happens right here. You see that Jordan bites on it He's going after the running back right there Fitzpatrick sees that and immediately by instinct pulls in the ball runs it in For the touchdown does magic with that amazing beard of his 21 of 28 417 yards for touchdowns passing one rushing touchdowns as you just saw there 156.3 QB rating, but the most important stat he pulled off an improbable win against a favored New Orleans Saints 48 to 40 in the Superdome our second player of the week is gonna be Tyreek Hale He did it all on offense on special teams Just a simple route right there Patrick Holmes completes it to Cheetah But because of his speed he could get away and run it in for the touchdown seven receptions 169 yards to receiving touchdowns and one kick return touchdown, which was actually a 91 yard punt return for a Touchdown our third player that we're gonna highlight probably isn't gonna get a lot of attention But it's gonna be Denzel Ward the cornerback for the Cleveland Browns the rookie cornerback Who should have a good career if he plays like this two interceptions Ben Wilde this burger rolls out to his right Ward undercuts the route gets the interception now Let's break that down and see exactly what happened and why ward is gonna be a good corner for years to come Ward on the top of your screen It's a zone defense for the Brown so whoever is in Denzel Ward's zone He has to cover them, but Ward the whole entire time looks at Rothesburger more so than he does the receiver that he's covering He sees him in his peripheral vision You see right there the zone that he's gonna cover But Rothesburgers eyes are looking towards Antonio Brown and as soon as the mannerisms show that he's gonna throw towards Antonio Brown Ward knows that he takes the risk to go out of the zone and undercut the route and get the interception Six tackles two interceptions and he led the Browns to a tie 21 to 21 versus the Pittsburgh Steelers and our fourth player of the week is a bad man Aaron Rogers the whole entire night the Bears were rushing at least five to try to get pressure on Rogers But Rogers could read the man coverage throws a beauty of a pass to Devonte Adams over the Bears cornerback For a big game now. Let's look at the game winner to Randall Cobb again The Bears are gonna rush five on this play Rogers knows as man coverage has some solid protection by the Green Bay offensive line But look at the perfect ball placement by Rogers to Randall Cobb throwing it on the outside shoulder So that the defender cannot get to the ball only the best of the best can throw passes like these And Cobb is gonna get the completion does wonders with yards after the catch Make some defenders miss and in for the game winner and the Packers get that improbable comeback Down 20 to nothing and Rogers is our last player of the week 20 of 30 286 yards passing three touchdowns and he led the Packers to a 24 to 23 victory over the Chicago Bears and if you found this video entertaining makes you guys like this Video leave a comment down below. Let us know who your players of the week are for week one Also, make sure you guys subscribe to this channel to get updates on when we come out with more of these kinds of videos Where we break down film of the players of the week