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


Welcome to the hindi news analysis by Shankar Ayes academy. The list of topics chosen for today's discussion along with the page numbers is given here for your reference. Let us start today's news analysis. In this discussion, we shall see these two articles which appeared on editorial page in today's hindi newspaper. These two news articles talk about recent India-China tensions and how border issues in the past and present have been dissolved. The syllabus for this discussion is given here for your reference. If you see, we have discussed about recent standoff between India and China many times in the last two weeks. So in this scenario, many number of accusations have been directed towards the government and the prime minister for being silent regarding the standoffs. So although terms this silent diplomacy or quiet diplomacy. So in this context, we shall see what is silent diplomacy and did India always follow this silent diplomacy. Firstly, if we analyze the pattern of resolution of past standoffs, it show that a quiet or silent diplomacy played a key role in unlocking the complicated standoff situations. Here, author gives a 2013 example when Chinese troops have set up tents on India's side of line of actual control near the Debsan Plains. At that time, the UPA government, which was in power, was publicly blamed for being silent regarding standoff. But what happened was India privately conveyed to China that if standoff did not end an upcoming visit by the Premier of China at that time to India would be cancelled. So India took a hard stand by directly conveying to China that if you don't stop incursions near line of actual control, the visit of China's Premier will be cancelled. So if you observe, India was keeping public rhetoric calm and steady. But at the same time, it displaced strength and gives the adversary, that is China here, a way out. It was the preferred solution in 2013. Otherwise, China would not have retreated from the line of actual control. So this approach was shared by former national security advisor, which we discussed in 3rd June, Hindu news analysis. So simply put, what India does during quiet diplomacy is it keeps public rhetoric calm and steady, but at the same time, it displays military strength and gives a chance to adversary to back out. So similar thing happened in 2014 during NDA government. There was a standoff at Chumar. China was constructing a five-kilometer road in Chumar area. The road was from Chebsi in China to Chumar, where India has strong domination. So this led to a standoff between India and China. Interestingly, this standoff coincided with China's President visit to India. The then government was severely criticized because the visit was happened as planned. But India quietly but forcefully stopped the Chinese road building by deploying more soldiers and outnumbering China's presence there. As a result, Chinese army withdrew and both sides disengaged. Further, both sides followed a moratorium into patrolling into contested areas to ease tensions. Here moratorium means a temporary suspension of patrolling into contested areas to ease the tensed atmosphere there. Here, author says that had government announced about moratorium publicly then, there would have been a big public uproar in the country. So in addition, a similar approach was used in the 72 days standoff at Doklam in 2017 also. So based on these three examples, you can infer that India practices a quiet or silent diplomacy with its neighbors. So ultimately what happened in all these three examples is, the objective of India was achieved in all the three cases, where China faced firm resistance from India and it was prevented from changing the status quo in standoff regions. So the both UPA as well as the current India governments have followed an approach of quiet diplomacy along with strong military posture, plus giving a way out to the adversary, that is China. And coming to current standoff, the same approach is being followed here as well, where India has made two points very clear. One, India will agree only to restore status quo. Second, India will not stop its infrastructure development in the area until China withdraws its installed infrastructure on its side of LAC. So know that China already established artillery, bombers, jammers, etc., on its side of LAC. As a result, India is also developing its infrastructure on Indian side. So currently, there is an enormous asymmetry which is benefiting China in the border area. So because of this asymmetry, there is a high level of strategic mistrust between the two countries. This mistrust can be addressed by a proper and a continued communication between both sides. Based on this, recently many important decisions to resolve the standoff has been discussed by both India and China. As a first step, partial disengagement of troops from some points of LAC is agreed by both the sides. Five locations of conflict in western sector in Ladakh have been identified which includes patrolling points, Chuchul and Pangong Lake. Further, a broad plan of holding series of talks has been agreed to take forward the disengagement process. To have a continued communication, there is also a proposal of having formal meetings once or twice a year by COPS commander level. This ensures a better interaction between two armies at higher level. So this is the scenario so far. Let us wait and see how India's silent or quiet diplomacy will work this time. There is one more news article in today's newspaper in which the opposition criticizes the government for not briefing the opposition political parties. In this news article, a comparison was drawn between Prime Minister Jawaharlal Nehru and Prime Minister Narendra Modi. See in 1962, when China attacked India, the Prime Minister Nehru was demanded by the opposition to convene a parliamentary session to discuss the ongoing India-China war of 1962. Then the Prime Minister Nehru accepted, listened to, blistering criticism of his policies. So in this context, the author of this comment article says that opposition and the media are righteous to hold the government accountable for not providing information regarding the standoffs. However, he further says that issues should not be politicized considering the national interest. Here, author provides a solution saying that government should keep the opposition informed. Further, government should proactively engage with media and should maintain public rhetoric, calm and steady. Another author talks about 24x7 demand for information on social media and many times misinformation or fake information is being circulated widely on social media. This is same with the recent standoff also. Here, author says that government should ensure what is being reported on media and social media is well-informed and not speculative or exaggerated. While concluding, author says that the broader objective should be protecting India's security and India's interests. And by taking lessons from the past, we should follow quiet diplomacy coupled with strong military to resolve border disputes and giving a way out to adversary. This is all about these news articles which appeared on different players of today's Hindu newspaper. In this discussion, we talked about silent diplomacy. We have seen examples where silent diplomacy worked. Later, we talked about opposition, criticism on present government and how media and social media is provided with wrong or fake information and how is it spreading in the country. Have a look at the displayed practice question. Let us move ahead with this news article. The next discussion is going to be based on this news article which talks about National Institutional Ranking Framework. So the latest version of this NIRF named the India Rankings 2020 of Institutions of Higher Education was released by Ministry of Human Resource Development yesterday. In this context, let us discuss in brief about this National Institutional Ranking Framework and its relevance in higher education sector. The syllabus for this discussion is given here for your reference. So the first question is what is NIRF and what does it mean? See as the name suggests that is NIRF National Institutional Ranking Framework. It outlines a methodology for ranking higher education institutions across the country in different domains of knowledge. Simply, it provides a framework which places higher education institutions in a leaderboard. This framework was launched by Ministry of Human Resource Development in 2015. The methodology for this framework is drawn from the recommendations by a core committee set up by Ministry of Human Resource and Development. So what does that methodology include? See it broadly includes parameters like teaching, learning and resources, second, the research and professional practices, third, graduation outcomes, fourth, outreach and inclusivity and the last one, perception. These five broad parameters have been further subclassified into suitable subheads and know that each of these five broad heads has an overall weight assigned to it. For example, TLR has a weightage of 30%, research and professional practice 30%, graduation outcomes 20%, outreach and inclusivity 10% and perception 10%. The subcategories or subclassification of each of these five parameters is given here for your reference. Kindly have a look. In addition, know that this NIRF ranks institutions from nine different domains of knowledge, namely university, engineering, management, etc. In this year, that is 2020 rankings, one new domain called Dental has been introduced, bringing the total tally to 10 categories or 10 subject domains. So this is all about NIRF and its brief background. Now a question may arise, so what is the relevance of this NIRF and how is it useful? See firstly, these rankings are important as they act as a guide to students for selection of universities based on set of criteria. Further, it helps universities to improve their performance on various ranking parameters and identify gaps in research and areas of improvement. Additionally, the ranking of institutions at national level instill a competitive spirit amongst institutions to perform better and secure higher ranking international ranking. As we already said, today's news article discusses about the latest version of these rankings, that is India rankings 2020. According to it, IIT Madras, followed by IISC Bangalore and IIT Delhi are top ranked institutions in India. If you recollect, on 10th June, we discussed about QS World University rankings 2021. When we were discussing that news article, we said that India's best, including the IISC and most IITs have slipped in the global list and Ministry of HRD outlines that this slippage is due to high weightage given to perception parameter in most international rankings. It means that QS World University rankings give high weightage to the perception parameter in ranking and know that this perception is a subjective manner, so it is very difficult to ascertain whether these international rankings reflect the reality or not. And coming back to today's news discussion, that is NIRF, as we have already discussed, 90% of parameters are completely objective and fact based, while only 10% is based on subjective matter of perception. See, when we were discussing about the different parameters in NIRF, we said that teaching and learning gets around 30%, research gets around 30%, graduation outcomes gets 20%, outreach and inclusivity gets 10%, and perception has only a weightage of 10%. So thereby, you can infer that the NIRF rankings are mostly objective based when compared to the international ranking, that is QS World University rankings 2021. So this is all about this news article. Have a look at the displayed practice question. Let us move on to next news article. This news article says that the US President Trump issued an executive order authorizing sanctions against individuals involved in ICC, that is International Criminal Court. See, now that ICC is investigating whether US forces committed war crimes in Afghanistan or not. So in this scenario, US government has put a lot of sanctions, including economic and travel sanctions against the employees of ICC. In this context, let us discuss about international criminal court and other international adjudicatory bodies. First, we shall see what is ICC. See, this ICC or International Criminal Court was established in 2002 by international community or governments of various countries, mainly to prosecute war crimes, genocide and crimes against humanity and crimes of aggression. This body is headquartered in Hague of Netherlands. In addition, know that ICC is established and governed by an international treaty called the Rome Statute. This was initiated in 1998 and came into force in 2002. And the ICC in 2002 became world's first permanent international criminal court. It investigates and tries individuals charged with gravest crimes of concern to the international community, like genocide, war crimes, crimes against humanity and crime of aggression. Through international criminal justice, ICC aims to hold those responsible for their crimes and to help prevent these crimes from happening again. ICC has jurisdiction only if a member state is unable or unwilling to prosecute atrocities itself. So, thereby it means that the ICC only complements and not replaces the national courts. In the current context, know that United States has never been a member of this court. Though Afghanistan is a member of this ICC, it has argued that any war crimes should be prosecuted only locally, that is in Afghanistan only. And coming to India's membership, know that India is not a party to Rome Statute and hence it is not a member to ICC along with US and China. Recently, Malaysia has ratified the Rome Statute and became the 124th state party to ICC. In addition, know that ICC is not a UN organization, but it has a cooperation agreement with UN. As a judicial body, the ICC does not have its own police force or enforcement body. So, it relies on cooperation with countries worldwide for support, particularly for making arrests, transferring arrested persons to ICC detention centre in Hig, freezing suspects, assets and enforcing sentences. So, this is all about ICC. Know that it is founded by Rome Statute and it is headquartered in Netherlands, that is Hig of Netherlands and India is not a member to this body. Next, we shall discuss about one more international adjudicatory body called International Court of Justice or in short, ICJ. You might have heard about this ICJ or International Court of Justice in Kulbushan Jadav case. If you are aware of Kulbushan Jadav, you might have heard about this International Court of Justice. International Court of Justice is the principal judicial organ of the United Nations. It was established in June 1945 by Charter of the United Nations and began to work in 1946. Importantly, know that the headquarters of this ICJ is also located in Hig of Netherlands. Further, ICJ is one of the six principal organs of the United Nations. The other five are General Assembly, Security Council, Economic and Social Council, Trustorship Council and Secretariat. All these five bodies are located in U.S. The only principal body of U.N. located out of U.S. is ICJ, that is International Court of Justice. So what is the role of this court? See, this court mainly concerns with settling legal disputes which are submitted to it by the states. Further, it gives advisory opinions on legal questions which are referred to it by U.N. organs and U.N. specialized agencies. Generally speaking, it deals with subject matters like maritime disputes, sovereignty, natural resources, trade, treaty violations and treaty interpretations, human rights, etc. The court is composed of 15 judges. They are elected by U.N. General Assembly and Security Council for a period of nine years and the judgements of this court are binding upon the parties which are concerned. Coming to membership, all the members of U.N. are parties to the statute of ICJ and non-members may also become parties. Even if a country is not a member of U.N., it can be a member of ICJ. Therefore, you can infer that India being a member of U.N. automatically becomes the state party to ICJ. So, this is all about International Court of Justice. Here, know that ICJ is a U.N. body. It is headquartered in Hague of Netherlands and every U.N. member state automatically becomes a member to ICJ. Next, we shall discuss about permanent court of arbitration. See, the permanent court of arbitration, or PCA, is an intergovernmental organization established by the Convention for the Pacific Settlement of International Disputes. This was concluded at Hague of Netherlands in 1899 during the first Hague Peace Conference. The aim of this body is to provide a variety of dispute resolution services to international community. Here, note that this was the first permanent intergovernmental organization to provide a forum for the resolution of international disputes through arbitration and other peaceful means. Here, PCA amounts to misnomer. As the name suggests, it is not a court. Rather, it is an organizer of arbitral tribunals to resolve conflicts between member states, international organizations, or even private parties. So, it means there is no permanent court in PCA. There is only secretariat which sets up temporary tribunals whenever required. This PCA is headquartered in Hague of Netherlands. Now that you would have known that all the three bodies which we have discussed today are headquartered in Hague of Netherlands. They are ICC, ICJ, and PCA. Coming to its relation with United Nations, note that PCA is not a U.N. body or U.N. agency. When it comes to India's membership, India is a contracting party to this convention and know that all decisions of this PCA are called awards which are binding on all the parties in the dispute and have to be carried out without any delay. So, this is all about these three adjudicatory international bodies which are ICC, ICJ, and PCA. Here, importantly, know that these three bodies are headquartered in Hague of Netherlands and India is a member to only two of these three bodies which are ICJ and PCA are not a member to international criminal court. That displayed practice question will be discussed at the end of session. Next, let us take up this question. This question is based on this news article which says that National Human Rights Commission has submitted the midterm report on universal periodic review to United Nations Human Rights Council. So, what is this universal periodic review? See, UPR is a unique mechanism of human rights council to examine and assess the human rights situation in every U.N. member state. This is done through peer review mechanism. See, here know that UPR has assumed a central role in the advancement and monitoring of human rights in all member states. Additionally, know that this universal periodic review has the potential to enhance state accountability towards sustainable development goals. This periodic review is undertaken in cycles of four and a half years each. And coming to a report submitted by NHRC, it says that the NHRC has reviewed the implementation of 152 recommendations given by UPR working group and accepted by Indian government in September 2017. This news article mentions one recommendation among 152 recommendations of UPR working group. It is to continue studying the possibility of universal basic income as a way to further reduce poverty. For this, the National Human Rights Commission has noted that UBI is under examination and active consideration of central government. So, in this context, it becomes important to know about NHRC as well as UNHRC. If you recollect, we have covered National Human Rights Commission on our 6th June Hindu News Analysis. On that day, we said that NHRC is a statutory body established by Protection of Human Rights Act of 1993. It was established for the protection and promotion of human rights. Additionally, on that day, we discussed about the recent amendment to the Protection of Human Rights Act of 1993 and the changes made through the amendment. So, to get a detailed understanding of National Human Rights Commission, we recommend you to watch that video. And talking about UNHRC, know that it is an intergovernmental body within the UN system. This Human Rights Council replaced the former United Nations Commission on Human Rights. Coming to its membership, this council is made up of 47 UN member states which are elected by UN General Assembly. It is responsible for the promotion and protection of all human rights around the globe. Further, it addresses situations of human rights violations and makes recommendations on protecting the human rights. Now, look at the given question. It states that with reference to UNHRC, which among the following statements is or are not correct or incorrect? The statement one, it is a part of UN Secretariat which is a principal organ of UN. Here, statement one is incorrect because UNHRC or Human Rights Council was established in 2006 by General Assembly and it reports directly to UN General Assembly and not UN Secretariat. But remember that there is one more body called Office of the High Commissioner for Human Rights. In short, known as UN Human Rights is a part of UN Secretariat. When discussing about ICJ earlier, we said that the UN Secretariat as well as General Assembly are principal organs of United Nations. So the Human Rights Council reports to General Assembly while the Office of High Commissioner of Human Rights reports to UN Secretariat. Importantly know that these are completely distinct entities. So the statement one is incorrect because the UNHRC is a part of UN General Assembly and not UN Secretariat. Coming to statement two, it says that currently India is a member to this council. Yes, statement two is correct since India was elected as a member country in 2019 for a period of three years. Therefore, the correct answer is option A, one only since we are supposed to identify not correct statements. Let us move ahead with this news article. This question is based on this news article which talks about Asiatic Lions and Wildlife Institute of India. See in our yesterday's news analysis, we discussed about Asiatic Lions, their population, their geographical spread and conservation status as well. We also said that the population of Asiatic Lion according to 2020 census is around 674 in Gir Protected Area Network. But today's news article says that the data regarding the population of Asiatic Lions might not be correct. This is because of the use of an outdated methodology for counting lions and not including the true mortality due to canine distemper virus. Further, the news article also mentions of Wildlife Institute of India. So in this discussion, we shall see in brief about Wildlife Institute of India. So the Wildlife Institute of India, shortly WII, is an autonomous organization under Ministry of Environment, Forest and Climate Change. It was established in 1982 with headquarters in Deharadun of Uttarakhand. Coming to its functions, it mainly offers training program, academic courses and advisory in wildlife research and management. This institute aims to nurture the development of wildlife science and promote its application in conservation in consonants with our cultural and socioeconomic milieu. This is all about Wildlife Institute of India. Here know that this is an autonomous body under Ministry of Environment, Forest and Climate Change and headquartered in Uttarakhand of Deharadun. Dear aspirants, do not confuse the Wildlife Institute of India with Wildlife Trust of India. See, the Wildlife Trust of India is a leading non-governmental nature conservation organization. It is committed to the service of nature. It is aimed to conserve wildlife and their habitat and to work for the welfare of individual wild animals in partnership with communities as well as governments. So while Wildlife Institute of India is an autonomous body under Ministry of Environment, Forest and Climate Change, Wildlife Trust of India is a non-governmental organization. But both the bodies contribute to the protection and conservation of wildlife. Now look at the given question. It states that with reference to conservation and protection of wildlife in India, consider the following statements. The statement one, the Wildlife Trust of India works to conserve wildlife and its habitat and to work for the welfare of individual wild animals in partnership with communities and governments. If the statement one is correct, as it is the main objective of Wildlife Trust of India. Coming to statement two, the Wildlife Trust of India is an autonomous organization of the Ministry of Environment, Forest and Climate Change. This statement is incorrect because the Wildlife Trust of India is not a government body, but it is a non-governmental organization. So the statement two talks about Wildlife Institute of India and not Wildlife Trust of India. So the correct answer is option A, one only, since we are supposed to identify correct statements. In this context, we shall discuss one more animal welfare organization called Animal Welfare Board of India. Know that this is a statutory advisory body on animal welfare laws and promotes animal welfare in the country. This body was established in 1962 under the Prevention of Creality to Animals Act of 1960. Importantly know that this Animal Welfare Board of India was started under the stewardship of late Srimati Rukmini Devi Arun Dalek. She was a well-known humanitarian and animal rights champion. This Animal Welfare Board of India was initially headquartered in Chennai. However, its headquarters were shifted to Ballabh Gurd of Haryana for better coordination between Environment Ministry and the Board. So this is all about this news article and question. Let us move ahead with this news article. Have a look at the given question. This question is based on this news article which mentions Chief Economic Advisor. So here three pairs are given. The first one, Chief Economic Advisor and the corresponding ministries are given on the right side. That is, Ministry of Commerce. Second one, Office of Economic Advisor, Ministry of Finance and Economic Advisory Council to the Prime Minister under Ministry of Finance. Here the correct answer is option D, one, two and three because all the three pairs are incorrect. The first one, Chief Economic Advisor functions under Ministry of Finance. As we all know, the Chief Economic Advisor is mainly concerned about preparing the economic survey and budget. Second one, Office of Economic Advisor. See this Office of Economic Advisor is an attached office of Department for Promotion of Industry and Internal Read under Ministry of Commerce and Industry. So the second pair is also incorrect. Coming to third one, Economic Advisory Council to the Prime Minister. See it is an independent body set up to give advice on economic and related issues to Government of India specifically to the Prime Minister. At present, it is chaired by Dr. Vivek Debroy, who is a Niti Ayag member. So the third pair is incorrect since it does not functions under Ministry of Finance. Therefore the correct answer is option D, one, two and three since you are supposed to identify incorrect statements. Let us take up this news article. This news article appeared in page number six that is editorial page of today's India's newspaper. The Gandhi's, Mandela's and Kings of today. This article beautifully relates the times of Gandhi, Nelson Mandela and Martin Luther King to the current scenario. We recommend you to read this news article and make a list of examples discussed here. This will help in your main's answer writing, especially when it comes to essay. Let us take up practice questions for today's session. So the first question is, to which of the following organizations India is not a member or a state party? First one, International Criminal Court, International Court of Justice, Permanent Court of Arbitration. See, we have discussed in-depth about these three bodies and we all know that India is not a member to ICC. So the answer is option A, one only. Let us take up main's question. Evaluate the efficiency of silent diplomacy in unlocking the complicated standard situations in border areas. Do you think it will be efficacious in current tensions among India and China along line of actual control? Here the question has two parts. First part, we have to evaluate the efficiency of silent diplomacy. And second part, we have to see whether the silent diplomacy is efficient in current tensions along line of actual control. So for the first part, you can write about three standard of situations we have discussed today. And coming to current situation, you can talk about what is the exact scenario happening today and what are the decisions taken by both the countries and how silent diplomacy will be helped. Here you can also add about Nepal also. We all know that Nepal came up with a new map claiming India's territory. They're even passing an amendment to their constitution in this regard. But if you see India is maintaining very steady and calm pace, which amounts to silent or quiet diplomacy. You can add Nepal point of view also here. And you can add your own viewpoints also. Let us take up one more main's question. The ancient Indian educational institutions at Nalanda, Wallaby and Taksila or Taksila were world famous for their quality of education and attracted many foreign students. But today our higher education institutions are not among top global institutions. Discuss the measures taken by government of India to revamp the quality of our higher educational institutions in India. So here you can briefly mention about the universities of Nalanda, Wallaby, Taksila, et cetera. And coming to current scenario, you can talk about the present ranking framework that is NIRF, QES world rankings. And main crux of answer you can talk about institutions of eminence scheme. We have covered about this scheme in our recent analysis how government is helping higher education institutions to become world class institutions. You can write about all these points, more investment in education about 5 to 6% of GDP and amendments to UGC Act as well as Medical Council of India Act. You can end positively using schemes like IOE, NIRF and other related schemes. Dear aspirants, please write answers and send them to us and post them in the comment section. We will get back to you with necessary feedback within short time. With this, we have come to end of today's news analysis. If you find the session resourceful, click on the like button and show your appreciation in the comment section. And don't forget to subscribe to our YouTube channel. Thank you.