 And I just want to call out the transcription service. It's been incredible this whole time. I was, when I wasn't mesmerized by Sarah Swaden's talk, I was watching, and she got every word. So impressive. All right. Let us, therefore, create a new guild of craftsmen, free of the divisive class pretensions that endeavored to raise a prideful barrier between craftsmen and artists. Put this up a little bit more. This was the manifesto of Walter Gropius, founder of Bauhaus in Weimar, Germany. His manifesto called for the collaboration of artists and craftsmen, which ushered in that balance of form and function that we now call modern design. Bauhaus was a German art school founded in 1919, and it existed briefly during the tumultuous peace between World War I and World War II. Visionaries at the time saw opportunities to use art and technology to advance society, and it was with this outlook that Walter Gropius founded Bauhaus. His goal was to redefine the way that art was taught across the country. If you wandered through Ikea or Target today, a tubular steel chair or flat-packed furniture may not seem all that special, but in the early 20th century, these were revolutionary ideas for the mass production of goods, and it stemmed from Bauhaus. Gropius and the other masters turned their noses up at art history, taking an ahistorical perspective to painting. The educational tradition was to copy the works of classical artists like Rembrandt, Da Vinci, and Gentileschi, and the masters there ignored this tradition, and their attitude pushed the boundaries of what art could be. Instead, they explored the concepts of color, shape, and media as though they were in kindergarten, discovering it for the first time. Abstract and graphic, non-objective art intentionally evaded the sensible taste of the bourgeoisie in this attitude still persists today. Our most notorious artists are still often the most subversive. Think about Marina Abramovich, Ai Wei Wei, or Banksy. This focus on basic forms and primary colors also applied to graphic design, and the rules of Gestalt, layout, and typography that were established from this stripped-back approach to creativity are still studied and practiced by designers to this day. When I was in Berlin last year, I got to visit Bauhaus archive, which tells the history of the school and collects and exhibits artifacts from its past. And it got me thinking about how I could apply some of their ideas to the web. The designers of the avant-garde experimented with new tools, new revelations of psychology and science, and new means of production. And this landscape was prepping them for a burst of creativity and innovation. Today, the internet has once again changed the fabric of our society, and you've already seen some pretty great art coming from that over these last two days. Just think back to Sarah Drasner's amazing color animated paintings and undulating fire. It's very cool. Yet nearly a century after the fact, we're only just now able to apply even some of the most simple concepts of the Bauhaus to the web with some new specifications from the W3C. So there are five topics that I want to explore today. Viewport units, yes, again. Transforms, grid, shapes, and blending modes. And I'm going to apply these to various works by artists of the avant-garde. So starting out, let's talk about Kurt Schwitters. He was a Dada artist who used psychological collage, which he called Mertz, to reject the reason and logic of the bourgeois capitalist society in order to make sense of the world using found objects. And these collages for which Schwitters is best known can get pretty abstract. So I'm going to focus on something a little bit more down to earth. While I was at the Vancouver Art Museum, I got to see some of Schwitters' work up close, including this issue of Mertz, which was typeset by Ella Sitzke, who is a frequent collaborator with Bauhaus. And I thought it would make for an interesting typographic experiment for the web. So I spent an afternoon putting this web-based reproduction together. And it's pretty close in reconstruction, but the real beauty of it is that it's shockingly consistent at any screen size, which I will show you now in Firefox. All right, so we've got the page here. I have it designed. And if we switch into responsive mode, let's grab this one. Let's do the iPhone 4, since that one's a short one. There we go. Okay, so when I resize it, then you can see that there's a break point in there, but the text stays exactly in place. So in order to recreate this magazine cover and make it so fluidly responsive, I used Viewport units. Keith Grant covered these pretty well yesterday, but let's recap for those of you watching from home via YouTube. So, or maybe Vimeo, I don't know. So these are units of measurement that are relative to the width of the viewport. Basically, one viewport length is equal to 1% of the screen length. There are four kinds of viewport units today, but today I only have time to talk about two. VH is relative to the viewport's height, and VW is relative to its width. And so you can use viewport units to size all kinds of things, which you'll see throughout the presentation, but it has a particularly interesting effect on typography. Are you sensing a trend here? Sizing type based on the viewport offers a much more nuanced type size because it isn't given a specific pixel height and nor is it relative to any other font size like you may be used to with M's and REM's. And instead, it gets bigger and smaller depending on the dimensions of the viewport. So let's think about the old way of sizing type for the screen. There's kind of a lot going on here, so just focus your attention on the main part here. Here I've sized my text in points, not viewport units, and I've designed this for mobile first, so on an iPhone size display it's looking pretty good. But when that screen size increases, then the line length increases while the type stays the same size. And with this justified type, it clearly just looks wrong. So we can't really fix this with breakpoints because I need so many of them because I wanna make sure that this looks fine at every screen size. And the instant I start increasing that width, then that justification starts to get out of control. And so I'm trying to be especially picky here to say stay true to the typography of that original, and I want this to look as good as it can at every screen size. So as you saw when I sized with viewport units instead, that text acts almost like an image or an SVG when it's being resized. So there's a lot of attention to detail that I put in here that I don't have time to dig into right now, but it holds true at any screen size no matter what size it is. And that justification is constant, the design is consistent. And again, I'll show you real quick in the browser. So yeah, it's almost like it's resizing an image instead of actual text, but you can select it like actual text. Thank you. So that said, let's talk about accessibility. Sarah Swaden has covered this a bit, and so did Keith. Basically, I'll just read this quote out for you. I've gotten some constructive, highly appreciated accessibility feedback from my blog readers about using VW for font sizes. Basically, don't. Generally, I agree with that. I don't think you should use them for most text. Most of the time you should use something more like Keith's M-based modular system, but I do think there are scenarios such as this one where art direction demands that text flows in a certain way, but these are also gonna be scenarios where you're more likely to sweat the details, so you really should make sure that it's readable at all your different supported screen sizes. And again, as Keith and Sarah talked about, another way to mitigate this problem is to combine viewport units with a text-based unit like M's using calc. So for the viewers watching at home, be sure to check out those other two talks by Sarah and Keith. Another place that viewport units come in handy is that sidebar on the left there. Its width is set to 20 VW, and the content inside has been rotated, which I'm gonna cover in a little bit, but just know that its height is also set to 20 VW. So since they are both using now a relative unit to that viewport width, and so the height of the contents is responsive to the relative width of the container. So this isn't something that you can do with percentages or pixels. It's unique to viewport units. Browser support is pretty good. Internet Explorer and Edge don't support VMAX, but everything else does work. Other browsers are pretty good, but Opera Mini doesn't support them unfortunately, so if that's a browser on your list, you'll need to figure out how that's gonna fall back. You'll see viewport units used throughout this presentation, but now I wanna talk about transforms. Transforms are CSS functions that you can use to manipulate the geometry of elements. You can rotate them or skew them or move them around in your design. They've been standardized for a long time now, but it's still not something that I see on the web all that often, and I wonder why that is. I think part of it is that transforms can be tricky to work with. When you apply a transform, it doesn't affect the document structure around it. So you can sometimes run into problems like overlaps. And so this is why it's important that that sidebar container width matches the content's height because that sidebar is actually kind of acting like a dummy column, and it's a reserving space for us to transform content into. So it took a little bit of engineering to make this happen, and I'll walk you through it, Sarah Swaden style. So for those of you who don't speak German, I will fill you in. This is publishing information, and so therefore I put it in the footer element. And when I optimized this design for mobile, I decided that the footer should go at the bottom of the page. And as screen sizes get bigger, I can move this information into the sidebar to match that original design. I'm gonna run through this fairly quickly, but I'll stop at the places related to transforms. So here we go. All right, so here I've rotated the issue information on the left using the rotation transform, and the transform origin is the point where the element would be rotated around. Normally that's in the dead center of the element, and I changed it here to the top left because that keeps the text positioned inside the row that I created. All right, so now I've rotated the whole thing minus 90 degrees, and once again I've changed that transform origin so that the element rotates around the point that I need it to. And the next thing I did was slide it down its full length, and I did that with a second transform called translate. This is the same transform that Will Boyd used to make those fish move back and forth yesterday. Using translate is similar to moving elements around by their margins, except remember that transforms don't affect the document flow, so it doesn't affect the elements around it like margin does. Keep in mind that even though we're moving this element from top to bottom, we have to be considerate of its axis, which hasn't changed. So what we think of as the top of the element right now is still the right end, and the bottom is the left. So if we're moving down, that means moving left along its x-axis, and so that's why I've used the transform x function to move left the full width of the footer element. And also notice how that translate function is added onto the same transform property as our rotation transform, so you can see that we can have multiple transforms, multiple transformations on an element. After that, we'll finish up with some extra margin. Et voila. So in the end, we have vertically oriented text with viewport units and transforms. But that's enough about Kurt Schwitter's. Let's move on to one of my personal favorites, Jan Cichold. He was a German typographer who is so inspired by the Bauhaus exhibition of 1923 that he became one of the leading practitioners of modernist design. He would eventually go on to write the new typography, create layout systems for Penguin books, and design posters for Phoebus Pulasst, a movie theater in Berlin. So take a look at his movie poster for a German film called The Woman with No Name. Check out that title. It looks like it's zooming off into the distance, but we can replicate that to some degree using transforms. And to do so, we're going to switch up into three dimensions with a transform called perspective. There are two ways to apply perspective. One is on an element-by-element basis, again, using the transform property. In this way, each element has its own perspective or its own vanishing point. The other way is to declare a perspective on a parent element using the perspective property, not the transform property. Every child element transformed inside this will share the same vanishing point, so it'll all kind of coexist in the same world. In recreating Chickle's poster, let's start with that title. So there are two parts to it, the title, The Woman with No Name, and the subheading in red, which says part two. So yes, there was a part one before this. These two elements share the same vanishing point, so we're gonna use a perspective property on a containing element. When you use perspective, you have to set its length, but it can be a little bit tricky in figuring out what that should be. That length indicates the simulated distance you are away from the 3D plane, which is just really kind of a complicated way of saying that it sets the intensity of the 3D effect. So a high perspective value, as you see in that second item there, that means you're further away from the 3D plane, so the distortion is low, and a low perspective value, like in the bottom, means that you're closer to the element so that distortion is a lot more noticeable. Perspective is different than Translate Z and that perspective doesn't really change the apparent size of the element. Translate Z changes how far away from you the element is, so an element that's further away, for example, is gonna look smaller. That doesn't really happen with perspective. And so for me, I like to think of it as zoom versus dolly. When you zoom in with a camera, you stay in the same place while the lens closes the distance to your subject, and that picture's gonna change slightly depending on how far away you are. That's kind of like perspective. Dollying is just the fancy term for physically moving the camera back and forth, and that's Translate Z. And when you combine them together, you get a dolly zoom. This is sometimes called the vertigo effect after Alfred Hitchcock's movie, but it's been used throughout film and television to emphasize something disconcerting. Here you can see Frankie Mune is in Malcolm in the middle using it to good effect. And now we can kind of recreate this with CSS, so I don't have a lot of time to go into the detail now, but I did wanna show you a quick example that I threw together. Are you ready to enter the Frankie zone? So it's a pretty simple demo, you hover over it, and it does a little bit of a dolly zoom effect. So I tried to do something that was somehow more disconcerting than Leah Varuse's creepy eye demo that she had yesterday. And dolly zoom is good for that. If you look at his nose, for example, it actually is on a separate plane, so it kind of comes a little bit closer to you. And his ears also are on a separate plane, so they kind of go behind and they blur as they come out of focus. So, pretty fun little thing. Let's get that off there so we don't accidentally see that again, except in our nightmares. Okay, if you wanna know more, I did write about it on my blog, so go to RevoltPuppy.com and you can hunt it down in the archives. All right, so getting back to the poster design at hand. For my header, I set the perspective and then stacked up a couple of transforms for the optimal look that I was going for. And then here's the result. So the text now has some perspective. This isn't exactly the same as Chick-Old's perfect vanishing point, because he was simulating a perspective and we're using a real 3D perspective. And we'd have to extend those lines basically into infinity in order to actually make them meet. And that brings a whole batch of rendering issues of its own. But it still does create an interesting effect and it foreshadows the surefire adventure of the woman with no name. I also added a transition so that when you hover over the graphics, the perspective animates and some of the images come into focus similar to the Frankie zone. So I'll show that to you. So here we have, especially if you look at the top right photo, when you hover over it, then that sharpens up and comes into focus. So kind of a neat little effect there going on. All right, so transforms can be challenging, but at this point, browser support is really good. So Internet Explorer has a caveat with nested 3D elements, but other than that, I think we're more than ready to add this kind of stuff to our toolbox. Moving on, let's talk about Pete Mondrian, who in 1922 could still get away with that mustache. He's probably the most widely recognized artist of the six presented here today. He was a notable member of the De Steele movement and his paintings of rectangles are the model of modernism in two dimensions. Mondrian's composition paintings create a graphic tension and balance with nothing more than basic shapes and primary colors laid out into a grid. And I felt this was the perfect example to try out CSS's first true layout system, grid. So if you'll recall from Jen Kramer's talk about grid, you'll remember that designers have struggled for years to hack grid layouts together, including using tables, floats, and flex boxes. And we've gotten pretty good at it, but grid is coming and it's a new and easy way to create real two-dimensional grids on the web. Your grids can be pretty complicated, but the CSS can be quite concise and much more predictable. For this composition, I've started out with a bunch of divs, and then I put the new display grid property onto the container. And next I need to specify the dimensions of my grid area so I'm gonna count up the columns and rows and size them to fit. So in this case, we're looking at three columns with three specific measurements and four rows. Writing this out in the CSS is pretty straightforward. I put each measurement into the grid template one by one and separate them with a space. And finally, I specified the grid gap, which keeps the grid cells from crashing into each other. You can specify the horizontal and vertical gaps separately. So finally, we have a grid system free from cantankerous, collapsing margins and double padding issues and all that junk. The browser automatically assumes each grid section will be one unit and it flows automatically from left to right, top to bottom. So if your grid sections fit where the browser already expects them to fit, you don't need to declare them. If you take a look at A there, it's the first section that fills up a single column and a single row. So we don't actually have to tell the browser to do anything in our CSS. If your grid section spans more than one column or row, so take a look at E, which spans two rows, then you need to declare the start and end values explicitly. And the end values are the number after the column or row you want to span. So if you end on row four, as we've done here, you declare grid row end five. The final code that we need to create this grid is pretty clean and in a lot of cases we don't need to explicitly declare some of the values. So remember, we don't have to declare anything for A, we also don't have to declare anything for F and G. For B we only need to declare the start values because the end values are automatically assumed and for E just the row values because those column values are handled automatically by the browser. And you can clean it up further with the shorthand grid column and grid row properties which again, Jen showed you. So check them out, viewers at home. This is basically all that's needed to recreate Mondrian's composition two in red, blue, and yellow. And I will show you that in Firefox Developer Edition. If I can find my mouse. There we go. Oh, come on. All right, there you have it. And again, I sized these grid sections with viewport units and so no matter how you size it, they all stay perfectly proportional no matter what size or dimensions as Mondrian intended and no scrollbars. So viewport units are pretty cool and so is grid. Then we'll just go back to Mondrian there. All right, so the good news is grid is actually supported in Internet Explorer 11, believe it or not. The bad news is it and edge are the only browsers that support it in a usable way and it's using a prefixed legacy syntax. So it's kind of like what happened to them with Flexbox where they jumped out of the gate and they had a good implementation and then the working group said, ah, we're changing everything. So poor Internet Explorer, they finally won a battle. So as far as the other browsers go, Safari has it unprefixed in their technology preview. So it's gotta be coming soon, right? And Chrome and Firefox, I've been sort of following their implementations and those are also getting pretty close. So you can use the grid for both of them today as Jen had told you if you enable the right developer flag. So grid has been a long time coming. I think I first heard about it in 2010 or 2011. I was super jazzed about it and now we're coming up on 2017 and so I share your frustrations but this is something that's very important and so we need the browser vendors to really take their time and get it right the first time. Bauhaus was an important school in design history but it wasn't without its flaws. Women were encouraged to attend but then often discouraged from pursuing their passions and they were rarely given proper recognition. Marianne Brandt managed to push through the gender barrier and eventually became the first woman to join the metal working program and eventually she even became its deputy head while her male counterparts were prolific after World War II Brandt remained in obscurity until after her death. She worked in many different media but she isn't known for graphic design so instead of recreating something that she made I thought I'd design a page about her and show off a particularly notable creation of hers which is this gorgeous little tea infuser. So this design brings everything together. It's using grid for layout, viewport units for grid unit sizing and there's even a transform rotation tucked away in there and I've also included the last thing that I'm going to talk about. Take another look at that teapot and not just because it's a beautiful little product but notice how the text flows around it following its roundness. That's because I've created a shape. Shapes are a new way for text to render on a web page. Instead of strictly following the edge of a square or rectangle only shapes allow us to flow text around and inside circles, triangles and any other arbitrary shape we can think of. The specification breaks these concepts up into a few modules but I'm just going to cover this first one because it's the only one that any browsers currently support right now. If you've been in this industry long enough circles probably still feel a little bit magical. Thankfully we've moved on from stamping them out in Photoshop and since then border radius has become a reliable way to turn all of our social media avatars into circles. Of course border radius is only an illusion even though these images appear perfectly round text still flows around the containing square. With shapes a circle can actually be a circle. To create a shape you must first float your element so that text will float around it and then use the shape outside property to define your shape. Your shape can be based on any shape box including the content box, the padding box, the border box or the margin box. And you can even just use the shape box as the shape definition. So for example if I set border radius to 50% in the shape box to content box the browser now uses the circle as the shape so that's pretty nice. Some of the shapes that you can create are ellipse, circle of course or inset box or you can create something more complex with polygon similarly to when Leah created a polygon clip path yesterday, same kind of thing. Text will ignore regular margins but you can set a shape margin to keep text from crowding your shape. And shape outside and shape margin intersect with the shape box meaning that shapes and shape margins can go outside the shape box but anything beyond the shape box boundary is gonna be ignored. So if you take a look at that A there is not being pushed back by the shape margin. That's because it's outside the shape box. So in a way shape margin actually makes our shape look a little bit more like this. So the shape I use here is pretty simple but it makes a nice impact on the appearance of the design. If a browser doesn't support shapes then text still flows around it like a normal float, no problem. Looking back at Chick-Old's poster he used a triangular or trapezoidal shape to present the theater information in the lower right hand corner. In the future we'll be able to put text inside shapes like these using the shape inside property but right now no browser supports this but nevertheless I've still managed to replicate this effect by thinking outside the box a bit. Instead of using one triangular shape I'm using two triangles floated in either direction and the text flows around them giving the illusion of being inside a triangle. And here's the final result. So it doesn't have the trapezoidal shape with the box but at least the effect kind of comes through a little bit. Shapes are under consideration for edge and Firefox but are supported in other browsers and again it's really easy to start using them today as a progressive enhancement because they just fall back to normal floats. Herbert Bayer is counted among the second wave of masters who taught at Bauhaus and as a group they distilled the theories of the old masters into teachable concepts that they could integrate into their own coursework. Bayer essentially helped the school walk the talk by ushering in German standardization and new typography including his typeface universal which I'm using throughout this presentation. This is a calling card Bayer would leave behind when he wanted to make a connection and it is by far not one of Bayer's most notable works but when I saw it I thought it was a perfect excuse to talk about blending modes. Blending modes are one of those things that have been in Photoshop for a long time but have finally come to the web. Technically color blending applies mathematical operations to the color components of image pixels on overlapping layers. Apologize to the transcriptor there. But what that means to you is that you can quickly create some textural effects. There are five groups of blending modes darken modes create darker pixels. Lighten modes will lighten pixels. Contrast modes will both darken and lighten at the same time increasing contrast. Composite modes are based on the components that make up a color where it's the whether it's the colors hue saturation or luminosity and there's also a color composite mode which uses both hue and saturation of the source so it kind of combines two of those into one. And finally the comparative modes are a little weird and you probably won't use them that much but they're often used to compare and align two images. There's a lot here but I'm just gonna share with you a few that I think are especially useful. And I'll demonstrate how they work on one of buyers. Later works called Chromatic Twist 1970. This is gonna be our bottom layer which we'll call layer B. And I'm going to blend this texture on top of it and you'll see how the different tints and shades change based on which blending mode you choose. We'll call this layer A. So first let's take a look at the multiply blend mode. This mode is called multiply because it literally multiplies the properties of the color on the top layer with the layer below it. And this is how that function looks. A is the top layer, again that grid of grays that I showed you and B is the bottom layer buyers colorful screen print. X is the resulting color once the two layers have been blended together so X equals A times B. And this is done by breaking up the color components into red, green and blue, converting their luminosity values to a scale between zero and one. And then multiplying those values together. Then the browser converts back into RGB and recombines the new RGB values into the new color. So this might be a little hard to discern that's not black, it's kind of a dark blood color. But yeah, point is all this creative stuff is just math underneath. More practically though what you need to know about the multiply blend mode is that the darker the pixel on top is the more likely it is to show through at its full value. So if the pixel on the top layer is black it becomes completely opaque. And if it's white it becomes completely transparent and the image on the bottom layer shows through. Everything else in between darkens to some degree. So you can kind of think of it like casting a shadow across the bottom layer. Shadows always darken and never lighten. The opposite of multiply is called screen. And as you can see in this demonstration a top layer pixel that's white is opaque this time. While a black pixel will become completely transparent. And everything in between becomes lighter to some degree or another. And so this is kind of like shining a bright light on your subject. But if screen is the opposite of multiply why isn't it called divide? Well because again if you look at the math you can see that we're not actually doing any division here. Instead it's taking the inverse of the inverse of A times the inverse of B. Getting back to Bayer's calling card it consists of three images offset and superimposed on top of each other. Each time the image is reprinted on the card the inks mix together covering up more of the paper which means it makes the result darker. And so that means we're going to use the multiply blend mode. There are two ways to apply blending modes in CSS. Mix blend mode is a way to blend HTML elements together. And background blend mode blends between multiple background images on a single element. So let's give it a try. I couldn't find the original source of Bayer's calling card so I found another portrait of a European man that we can try this out with. Here's how it looks in the CSS. So I've positioned them similarly to the way that Bayer did using the translate x transform and then I blended the images together with mixed blend mode set to multiply. And that's it. Here's the result. So with blending modes I can change the particulars of this effect. I can shift them back and forth or change the blend mode if I want. And I don't have to go back into a graphics editor and reprocess a new version. And I'll show you one more example. Judith Karris was a Hungarian photographer who applied the modernist ideals to photography employing strong use of lines in bird's eye perspective. She was interested in both social documentary and industrial landscapes. And this is especially evident in her portrait of fellow student Adi Berger with the Bauhaus facade superimposed on top of it. It makes for an interesting effect and it's one that we can replicate today with yet another blending mode. And this time we'll use the one called overlay. So this formula is starting to get pretty complex. But if we look closely, its constituent parts actually look pretty familiar. What it's saying is that if a pixel is dark, use multiply and if a pixel is light, use screen instead at half strength. So you can kind of see that working out there. Looking at this example, you can see that the darker pixels make the image darker while the lighter pixels make the image lighter. And there's a block there on the right that's 50% gray. You can't see that now. That's become completely transparent with this blending mode. So with this photo here, Karris has overlaid one photo on top of another. Both layers have pretty good contrast. So I'm going to use overlay to ensure that I have strong darks and lights but they don't completely overpower one another. And again, I didn't have the original negatives that Karris used. So I dug up another photo of Adi Berger who tragically was killed in Auschwitz. And I also found a public domain photo of the balconies of the Bauhaus building in Dessau. And once again, I positioned my images the way that I want them and then blend the balconies together with the overlay blend mode. And here's the result. So it's a pale shadow of Karris's original but you kind of get the idea. And this is just the beginning when it comes to blending modes. If you'd like to learn more, I have another talk online all about them along with other ways to mix color on the web and it's called painting the perfect sunset. And I've also written a couple articles for a list of part about the subject. So you should check those out too. Browser support for blending modes is decent but edge has been slow to implement. Currently it's listed as on the backlog. Safari supports both mixed blend mode and background blend mode but it doesn't support the composite blending modes which are the hue, saturation, luminosity and color. These artists of the early 20th century avant-garde and many more showed the world the way that design was done. But they didn't just create the frameworks by which we still design today. They were gleefully experimental, interdisciplinary and subversive. They collaborated together and argued with one another about best practices and it pushed art and craft into a new century. We're well into a new century ourselves and I encourage you to follow the examples of the modernist masters, not just in recreating their works but in exploring the possibilities of how art and technology can create better designs. Thank you very much. If you have any questions, please come up to me afterwards and I would love to chat with you about it. My name is Justin McDowell. My website is at RevoltPuppy.com and you can hit me up on Twitter at RevoltPuppy. Thank you very much. Test, test, great. So many mics. I got three mics. Only one works. I'm sure what works. That was great. Really pushing us to see things differently. Cool. So until this mic situation gets resolved, we'll do this back and forth. But how do you see this type of design's perspective making this way to the web and what were some of the problems and surprises that you run into as you try to apply this to your work? Well, I think I was kind of replicating a lot of the works of the old masters, but there's someone, Jen Simmons is doing some really great work, some more practical work. I definitely recommend checking out her talks. She also does a Mondrian with grid and her implementation is very different and so it's worth checking out how that works. The issues that I ran into, I mean, there's a lot. There's like one for everything. Like with blending modes, one of the big issues is you'd love to blend the background with mixed blend mode and then have text on top of it stand out, but that text ends up getting blended in along with that element and so, I mean, that would be so great to be able to isolate the child elements, the text elements and so that they stay at their full normal blend mode and then the background overlays but there's not currently a way to do that. I mean, that's one example. Doing the Frankie's own thing, I had to do different things depending on the browser because like Chrome's rendering of the animation, when it goes back and forth, it just like starts cropping off text in these bizarre, unexpected ways and I just chalked it up to a browser bug and so I had to disable a certain, I think I disabled maybe the blurring on it or something like that just so that it would work correctly so they've all got issues that either need to be sorted out or solved in some other way but they are also a lot of them still fairly new and experimental so. Make sense. It'd be really cool to start to see how that could inform our design, obviously not for every website use case but really neat ideas on how to make sort of the web a little different. One question from the audience, how does transform perspective and translate properties handle screen sizes, changing screen sizes? Oh, I guess I could have showed the chick old movie poster in the responsive mode. I mean it's gonna be something that you're gonna have to test but when I was doing it, it actually held up pretty well and I think maybe because I was using viewport units in that as well and so when I size it down, then the images just kind of squished a little bit more closely together but there are, using perspective is something that you're gonna wrestle with because it'll change where on the page your element is and then you'll scale it up and you'll have to move it and shift it around to get it exactly where you want so again, more challenges there. We seem to handle them very well. Thank you so much, Justin, for your talk.