Vitaly Friedman: Dirty little front-end tricks - JSConf Iceland 2016

thank you thank you so hello everyone this is going to be interesting apparently many people like a dirty B front end and C tricks so that's pretty cool now it's not going to be easy because you know I don't want to do the hard work so you you're going to do the hard work the way we're going to do it because they are really dirty I have to warn you first the things are going to see you will not be able to unsee and I don't take any credit or responsibility of what happens next once you saw them right they are really bad like seriously bad so we'll see how it goes now the way it's going to go just to be a bit more fun I brought some chocolate with me so I'm going to post challenges and we're going to probably cover like 10 or 15 challenges and if you think that you have a good idea just shout and I'll try my best to throw the little piece of chocolate at you I don't take any credit or responsibility of whether I hit you or not right again but this is going to be fun alright so let's go now this is me this is how you stole flag back in the day things do change over time I currently do live in Vilnius in the Vienna which is why this check out is from Vilnius Lithuania but I'm still editing most of the stuff and smashing and also I do a lot of consultancy these days they spend a lot of time in companies and companies real fun sometimes especially the enterprise-e corporate and you know this kind of thing because they tend up to find to kind of come up with really interesting pragmatic solutions to anything right people can solve everything seriously in a interesting creative way so let's see all right you ready that doesn't sound very exciting you have to talk to me already all right this is better all right so let's have some simple stuff that's not too complicated I think so here's the task for you right so what if you need to nest one link inside another for example inside notes footnotes or articles when you want the entire excerpt to be linked but you also want the excerpt to contain potentially contain links which lead to another site right so you might encounter things like that right I have a product image maybe or product description so you have a block of text right which is a link but at the same time you might have links inside of that paragraph which should stay links as well now how would you do it without JavaScript can you have nested links in HTML that's not very clear to me at this point so if you say yes you have to tell the eye how you do it anybody button and an anchor inside not sure about that okay somebody said object who said object all right so here we go I'm trying my best here come on seriously so there are many solutions right so one thing that we could do potentially is of course use position:absolute to put the link on top of the paragraph and also use that index to kind of make it work but you know we can use object type because it's fancier why well if we actually try to nest a link inside of another link what browser is going to do is assume that you're stupid and it's going to close the first thing for you but it's not going to reopen it so in the end you end up with this part of the paragraph not being a link anymore right which is the problem now we can solve it why well how well by just putting up the anchor inside of the object tag why the hell would you do that because object behaves very much like SVG or iframe if you think if you like so the browser will actually just ignore whatever is inside so it won't say it's so dirty everything that's inside objects so dirty I'm not even going to touch it so I'm going to keep it as it is so it's going to work just as expected right now I don't say that this is cool and this is you there's something that you should do but it's useful to know this because if you encounter situation when you can't use JavaScript for some reason kind of close link opening closing opening then you can actually use it and in fact if you want to make it work in older ie you can use conditional comments inside object which is probably the worst thing I ever said in my life but you know this does work and if you feel really comfortable with this or uncomfortable you can look at the kittens if you do feel comfortable you can read the entire article which the entire thing or again you can just use position:absolute on top of the paragraph but object is really awesome for two reasons actually first of all because everybody hates it and second of all because you can actually embed SVG's in a very smart way now there are many ways of embedding SVG on the page right um you can do it in line you can you know you can just use image source and background image and so on but have you tried to embed an SVG file on the page using the object tag this is awesome right why well first of all if you actually embed it in the regular way just by using image source or background I'm kind of cold and sorry dense kind of blocks as access to the SVG path so if we have an SVG on SVG file it contains some paths that we want to you know change the thickness of or change the color we can't do it if we embed it this way right we can inline it but then it's not cacheable which is a problem we can also base64 it but it's again the same story so what can we do well this is the best thing we can do sitting by actually so we can embed it as inside of the object tag using just a proper type attribute and then inside of the object SVG thing inside of the SVG file we can use media queries and JavaScript and CSS and whatever you like and this CSS can be styling can actually style the actual path on whatever we have in the SVG just you know on hover or whatever whatever you want to do now this works really well in even in those old browsers right that's pretty cool it's good to know that we can use that all right here's another one now by default we know I mean we're going to have lots of them so get ready by default broken images look freaking spectacular right so if there is actually any way to improve the experience by changing the styling if images are actually broken right because this is what we're getting most of the time if an image cannot be loaded then we're going to get this little placeholder finger with a broken image inside it does not very you know cool can you change it how mm okay tough drop I see who said that okay I'm pretty good today I'm seriously right so here's the interesting part that you need to know now the image element if you look in the spec you'll find lots of really interesting stuff in there the image element is a so-called replaced element it's an element whose appearance and dimensions are defined by an external resource make sense however absolute elements should not work on it unless the image cannot be lauded so even the image can not be lauded the before and after two tournaments will be applied and they will not be applied if an image is loaded right so we can do all kind of starting to improve the experience of the you know broken images without doing too much at this point and it just works we just apply before and after to image and voila you're done I see a lot of excitement in here it's great it's going great right so this works really well okay but maybe this is not too practical so let's talk about something really practical something that you probably should be using every single day on every single project so we like fluid type right and we often have to implement fluid typography to make sure that everything scales up and down beautifully as designers intend to do it right now how do we do it well if you wanted to be really fluid you will probably tighten up the font size together with the VH OVW unit right so all the time whenever the browser is Croesus the window whenever the browser window increases you also will have the increase in the font size it's great but then you know it can even grow infinitely and it can become very very small which is kind of not what we want we want to have nice boundaries right this is what would love to achieve and we wanted to be reduced kind of scale up and down nicely but not necessarily proportionally just growing like nuts or getting smaller we wanted to be kind of in control now the problem is following now we could use something like this right okay just set the font size being the calc of 1 M plus 1 plus 1 BW right we we double use of course 1% of the viewport width right now that works but then in that case 1 am why do we it well because we want to have kind of minimum font size right that's okay that helps us but not quite now now we can do something like this when we just included like for VW and for the agent to be mean for example and we'll all scale up and down but what if we're talking about the pro graphics scale we don't just want something to grow we want to have a specific kind of not breakpoints but specific docking points where the type will grow to wards so converge towards right so what if we wanted to choose a font size of 16 pixels at the screen resolution of 400 pixels and then we wanted to transition to 24 pixels at a resolution of 800 can we do it without the break point a lot of excitement in the room oh great all right no but seriously can indeed have any like a problem like this before or design a country wants to have a nice typographic scale like 1/3 or minus 3rd or whatever and you have to build it how would you build it so it scales down and are beautifully everywhere no don't have but no actually it's a bit more complicated I just need to use a little formula to make it work so that a second that's okay that's okay it's going to fun in reality it's not that complicated so of course what do you have again we have a special boundary I say between 400 pixels and 800 pixels and you have a specific size like growth between starting font size and final font size right so you just plug it in here you've got kind of the maximum subscreen size minus minimum screen size where you're talking about like the spectrum that you're walking at and then here at this point you're kind of subtracting 100% 100 PW minus 4 horn pixels at this point you are getting to the area like what is where am I either lower lower boundary or in the upper boundary right and then you multiply it with difference between the maximum font size and mean font size and you add the minimum font size and you're done that's really not complicated right so the only thing you have to do is you have to define all these four values you've set them and you're done right and then this is what it looks like so you have your modular scale right and all these headings including typography like the body copy as well are just going to flew it and kind of grow naturally without you having to do anything without even single media query and without flexbox without anything just with one little property that's really cool right we actually published an article about this which you can also read on so in just in case you're wondering calc is really damn good well supported except you know who but we're used to it right but this is not quite what you want sometimes I mean that's cool if you can just grow and and if the font size can grow and actually become smaller but what about the line height because as we know from the Fogg Rafi the smaller the font sizes or the small the line lengths is the small the line height should be as well and the other way around the largest their length is the taller the line height should be as well can we fix that maybe you want to have something like this right automatically without JavaScript without too many you know fancy mate we're breaking points just we want it to be fluid and just right again we have the same problem exactly right we have these two boundaries let's say we have a minimum line height one point free at some point if it's smaller than that it's just not going to work well right and also if you're going to worry above 1.5 it's going to be too wide right so we have this nice boundary between 1.3 and 1 to 5 and we just need to define where it's going to operate so it's going to operate maybe in a layout between 21 mm sent to 35 amps you plug it in the formula you do a little bit of math right you plug it's the formula and you're done it's exactly the same story just for the line height we're here we've got we got the full range of paragraph width in here 35 minus 21 then some point in here we we just look at the account we need to open numerator to see how close we are to the upper boundary and then we also need to multiply it with the difference in terms of wine height to get to this proper factor and then we also add the minimum phone line height at this point and we're done right and that's really really amazing and in the end you get this which without media queries again without flexbox without anything it just works right and if you actually make the window a little bit smaller please whatever yes that's okay we saw it already just move on I'll get the life yes/no or whatever but it will actually work as expected all right here's the next one so how do you make sure that a multi-column table both a row and a column are highlighted on hava and on tap now highlighting the current draw is easy we can just use TR hover but what about the column this is what we want right we want to be able to kind of tap on 22 and we want both the column and the role to be highlighted without JavaScript who was that okay not my best one yeah we can just use two the ones because this is the best thing you can have in CSS so this has a few magical properties which just work everywhere and like like amazing area all the time apes or elements and be flexbox if you can't do something with in CSS try flexbox if it doesn't work try more flags box if it still has a more type Sedonas this is my strategy for everything I'm sorry I succeeded so far so please try the two now how can we do it with two elements without JavaScript all right this is really nasty maybe you should not be using CSS for this but you can write so we can create huge pseudo and on top of that table that we have with a negative top value of half of that value then we hide the pseudo elements with overflow:hidden put on the table then we use negative that in next we can actually copy paste the content and we've got it and then we can of course also use make also focus upon focus that montage start maybe with a bit of JavaScript right but when I saw this for the first time in my life I literally freaked out and even cried a little bit just a little bit because you can apply to the element to the classes and can apply to the classism to the elements can apply to the elements and to the elements probably and it can apply to the classroom see the classes so at this point what we're creating is we have this table creating huge through the element that covers the entire table with a width of hundred percent because this is the maximum width right and with the height well we don't know what it's going to be so we set it in ten thousand pixels then we actually just move it all up to minus five thousand pixels so it's kind of centered and then we use you know we put it to the left well just so it's you know just to be sure and then we use background color current color just because we can and then we can use that index minus one so we kind of push the content to the top so above the table so we can copy/paste it and we're done right and we can also of course apply to th as well if we want to it's actually really simple now you don't need to ask you for that right that's pretty cool now this is not that bad this is not too dirty let's talk dirty so who has a pleasure of eventually building email layouts maybe responsive email layouts a few people so these people who are building responsive emails can you please come after the talk in here so we can hug you because this is really really bad I mean this is really really difficult now first of all it's not because you know we don't have proper CSS support not because we don't have proper job oh we don't have JavaScript at all images are not loaded usually what if alt and we have to deal with things like Outlook and other very similar creatures which is no fun at all and you want to make it responsive good luck because Google Gmail does not support media queries because of security reasons they say but they will know if they are not intending to support media queries so how would you then build a responsive email that works well in Gmail now especially if you know if you're opening an email that looks broken it's not like you're going to go to desktop to seen in defense of you you're just deleting it right so well let's be fix it in fact when you're talking about responsive email it feels like we're really going back in time when things used to be you know mmm ie 6 & 7 & 8 things like that because most of the time still today although every second almost every second email is opened on mobile they still most of the time so email designers and developers to come up with very interesting techniques including background coloring for example because images are not loaded by default except if it's Gmail so they will be covering kind of coloring the background cell because of course you're using table layouts at this point just in case table layout so we can actually color every cell now sometimes you can be really creative with it I was working with a guy who was in a project but it was really important for them to actually display an image even if image is not displayed or cannot be displayed in email client hmm so it was really really important like it was a button it couldn't be just a button obviously it couldn't be just you know itself it should had to be an image that had to be displayed they came up with really interesting idea again you will never forget this but of course you can transform or convert an image into an HTML table by you know for every pixel that you have in an image you can convert it into 1 x 1 TD with that background color it's going to be a big huge HTML of course but if you set it if you do it right and you put an anchor around that table it will work in Outlook right so this is what people come up with now this is really bad I'm not encouraging you to do it but just in case you need to do it some people can come up with really interesting ideas right so this is like you know but we can do some stuff because we have type of properties that actually behave properly so we can do you know if you have let's say if you have let's say like to here four columns I think of six no no here four and here - right if you want to move from four to two columns you know with tables we can do this we just have to display them as block instead of table cell and set the width properly right if we want to kind of move the columns around we can also do this by just using the table header open table footer group properties there are four of them there will footer group table header group table caption and table cell of course and something else and the interesting part is if you look into the spec and it's probably the best thing you can do like spec is best evening lecture you can have right it's so fascinating sometimes because you know with flexbox we can reorder components or reorder kind of things in the layout and Dom that's great but we could do that with table properties as well because if we have let's say free problem three elements a b c and we want to have we can't use media queries for example for gmail but we want to reshuffle them or reorder them to be a c we just have to define B as stable footer header group a as table cell and C a stable food group and they're going to reshuffle because the header always lives above the table the food always seems below the table and table cell in between and table caption between the table cell and table for the group right so we can reshuffle up to four elements in a very high can dirty way if we want to make it work for you know all the clients so that's great we're going to use these kind of things everywhere and sometimes you also need to use of course this little thingy well just in case you're wondering just for Yahoo because they are otherwise doesn't understand classes so we need to put it in the attribute selector so that's kind of nice in a way but this is what you will end up with in the end right but this is not quite what we want because we want to make it work in Gmail so let's say we have a four column layout and a large screen we want to make it two columns in a small screen on a small screen or maybe even simpler we have two columns from large screen and one column on the small screen right we just want to stack things in Gmail today we can make it work or do you know how to make it work now this is really really bad I mean people who watch me at this point will be totally devastated and go facepalm all the time I think but we can make it work with calc with with ant marks with so can you tell me who is going to win if we set this on our CSS box so we set the width on 320 pixels we set the min width on 480 pixels and marks with on 160 pixels who is going who think that width is going to win who thinks that men will mean which is going to win good thing that marks which is going to win who is literally wondering what the hell I'm doing here so this is really interesting because the answer is it depends so if we look into the spec which is again and very interesting lecture that they can actually read at night you'll find read a lot of interesting stuff for example if the width value is greater than the max with marks with winds now that we understand that makes sense right because marks which kind of restricts the growth or restricts the width right let's make sense however and that's the interesting part if the mean weight value is greater than the width or max width then mean with winds okay let's read it again if the min width value is greater than the width or max width then mean with winds we can abuse it in so many different ways right so let's say we want to make it work in Gmail without media queue so how how can we do it like this yes okay that's okay just bear with me this is going to be fine now what the hell are we going here we want to build a two column layout that stacks and grows below 480 pixels so below 480 pixels one column above 180 pixels two columns we cannot use media queries for this right so how do you make it work well with this we set we set min with some 50% max with 100% and we've as a calque of 480 pixels minus 1% which is our parent element x 480 why the hell would you do that right so basically this is like a two column desktop version at this point and this is like a one column mobile version 480 pixels is our break point and obviously hundred-percent refers to the parents to the width of the parent so what are we doing here our goal is to create a value bigger than our max with all smaller than our mean with so instead of with mean with all max width is going to be applied right does it make sense so why does it make sense so here we go let's say we have again the breakpoint is 480 pixels so with a parent of 500 pixels you know it's more than 480 pixels right so what do we have here mean width is going to be 50% which is 250 pixels max width is than 500 pixels and the width is - 9600 pixels right now at this point minutes is going to win because if the minutes value is greater than the width or max-width min which is going to win okay right so the code it is let me see it's 150 pixels because it's loud it's not larger than max width but it is larger than width so it has to win all right on the other way around if we go below 480 pixels so we have let's say 400 here we've got 200 pixels here we've got former pixels and here we've got 38,400 X and fallen pixels and because max width always restricts the width marks which is going to win right and you're done right and you could say well this is not fancy enough maybe we could do something else maybe we can use you know JavaScript if javascript is not supported and the answer is of course you can right how can you do this well what if you wanted to build a real-time wall like tweets to tweet a wall in an email when you send it out can you make it work of course you can now the question is how external CSS now you can do better than that but that goes in the right direction you can you deserve one I think anybody else now obviously we can reference an image which is going to live on the server which is going to be updated every two seconds and we then are going to crop it and we're going to animate it a little bit right so it appears as if it was live and it's kind of life just maybe with a five-second you know delay more or less right and it kind of works right that's pretty cool so that's you know not a big deal in fact this is what what they did for the email design conference template and it's actually really right that's pretty cool in fact if you really indeed do have to deal with responsive email there are two resources I highly recommend one is their responsive email patterns and the other one responsive email resources and this technique by the way is not for me but from Remy Parmenter thanks Remy so that's dirty but it's you know it works alright here's the next one so you want to add a background to inline text for headings but the text should be petted along both the left and right edge of each line now the left and right wedding will only apply to the very first and very last line so if you apply petting and you have you you know your text surrounding it some here you've got your padding right and here you've got your padding but here you've got no padding and here you've got no painting either right so how would we fix it sorry negative margin potentially yes but then here you've got double padding Oh box shadow okay so what's that then why are you sitting so far okay I'll try again later all right in fact we can do this just for you so I hope it's okay yeah so we can do this by just using the Bookshare method when we just put the boxer on both sides and we're done right so we're kind of drinking a little bit but it's really CSE just just adding a boxer on the both sides and then you don't have really petty but you kind of looks like you have painting right well that's pretty cool and it's really simple now let's go something go a bit more interesting ways maybe let's see okay I do want to not this one but just a second sorry okay no so here's the interesting one which is just really useful in many scenarios so what if you want to use a full with the element in a fixed width container right for example when you want some content to extend beyond the boundaries of the container this is what you want sometimes you want to have like Elias landing page and you have your container where the text lives and of course you want to restrict it because otherwise the time the line length is going to be too too big but that image could be kind of breaking out of that layout right so how do we do it we W all right well you can have full screen that's not a problem the problem is forward that you actually do want to make sure this kind of outside but you don't want to close the first deep open like you know put the image inside and then reopen the other div again right so this is what you of course could do well first of all you want to restrict your container then you have your diff and then you have your piece over the images and so on and what you will have to do then potentially it's just close the div and then reopen open the image and then close open the deep again right but that's not nice I mean in fact I mean an areas that's not difficult right sorry negative more that's good I like it keep going okay all right that's okay all right so in fact negative margins work quite well here to release our child element from its container I'm very proud of the phrasing we need to know how much space series between the container and the viewport edge right and we can calculate it just by using calc again right how again does it work well we can just use negative V I don't mean here I've got two margins right basically we are pulling the content out but with minus 50% with minus 50 VW first and then we put it back with 50% on the parent right of course in the width and it just works again everywhere so just we're just pulling it out and then we're pulling it back with outside of the scope of container and then kind of back so it doesn't you know set a good price full screen right and the problem however is if we do this we end up with this little bugger right and so before because this happens we actually need to also put all four hidden on all four X hidden as well and then we're really done right so in many scenarios you would be using you know really closing the diff and then reopening it but you either you really don't have to you can just pull it out and it will work I think there was something white wouldn't work but it's my guy I would need to check it out but it's a good one yeah all right okay let's see what else let's go something all right this is fun okay this is very practical so you want to implement how much time do I have actually oh no time mm okay then I have to do just one okay I mean but it's really not a big deal seriously so just last one so happy hour fun I'm sure you did I mean you'll get all the slides anyway what is the best way to encode and one times one pixel would you use JPEG for that would you use a gif for this we do use the PNG what would you use why smaller give it smaller is it hmm let's see so that's interesting some people have nothing to do on the weekends welcome one times one pixel give just in case you can't see it here this kind of waving at you I don't think that you realize and we could think well this is not a big deal this is not that difficult I mean this is not really like you know it seemed kind of simple uncompressed pixel is just one bit right oh four bytes depends again depends on how we see it so if you look at the black and white is going to be one bit grayscale 1 byte grayscale and alpha channel 2 bytes RGB 3 bytes RGB a 4 bytes right that's okay and you could think well so that's it right this is it well not quite if you want to encode it using give or leaf or JPEG or whatever and that case you will need to do a bit more work because as it appears every image format specifies not only you know the actual image but also how to interpret the data and also has some metadata in it so for example the width and the height and the number of bits per bytes of ice per pixel and so on so if you look specifically into what they contain you'll find that there is a magic number which is like a user agent string in browsers right it's kind of a fixed identify which they kind of communicate whether it's a gif or JPEG or PNG or anything else it also has some decoding details like all profiles orientation gamma dose per pixel has some arbitrary metadata potentially like things like time stamps copyright notices or coordinates and some overhead stuff like markers and checksums or even pairings for consistency just to make sure that whenever the image is transmitted it's always actually correct in the correct shape and if you look inside you know into the hex bond dump of it this is what you will find right this is a PNG this is a few markers even if it's just you know one x one pixel and they differ and the different size as well and some people really spend time analyzing this so this is a gif right and this is Debbie P and it turns out if you look into the table and compare what different pixels have different values right which is important to know but in fact this most one is give for white and everything else too right and then you could say well this is not interesting enough what about you know a color it's like a real color so if you actually put and go and explore like there's not just one x one pixel but let's say ten thousand pixels nine ten thousand pixels what's going to be the smallest and the answer is well it depends of course but in that case the smallest is going to be PNG which is interesting by the way the reason why we didn't include jpg and here is because JP cannot be transparent and it was all about transparent pixels right all right well okay so no more time right are you sure oh yes this is brilliant okay so let's do this so that's what else oh my god okay this is what this one is really useful to so baseline ring or vertical written right every designer gets on somebody else's nerves when it comes to basically like the perfect vertical reading how do you do it how do you make it right there are so many great frameworks of course you could use but do you have to use them because you can actually make it really simple now in the answer is one thing you just have to keep in mind now if I don't know if you can see oh wow they're actually supposed to be like a little grid behind so it depends really on how you implement it now very often if you think about the vertical reading you think about the lines living between the grid lines right so you have this lines like the you have agreed and these lines of text should be sitting right between them right and they're kind of the same distance between when they start in between when the end or you could do it slightly differently where you just put the text on that line in the grid and it's unlikely that you can see it's to be honest but that's okay I will explain it anyway so we tend to actually really most of the time use just a multiple of line height everywhere use it for pairings and margins and sometimes even border width right but we can align to the by base line instead right so for this to work we just need to calculate the offset and then shave the content by that offset so what does it mean so let's say we have this lines right imagine we have lines we have lines everywhere right here right we have lines in here everywhere and here is a line and here is a line and that line is right where the texts it's all right right here not in here just below it but actually right there which I'm really bad at this right where it's it's all right in that case this is what we can do so by default how does it work but default browser center the cap height as they define it between the grid lines so the height of the cap height is the height of a capital letter above the baseline again baseline is where the text sits so we can shift it by half the difference between line height and cap height why well because the tips text sits right between those lines so if we just take half of that line for example and we remove the top of the line height then we actually have the text sitting right on the base line okay this didn't go as expected all right we just need to determine the cap height and then offset the entire thing a little bit down and then we have to pull it back with margin negative margin at the bottom that's okay just a second so this is how it's going to work so we have our line height define power formstack we could have different typefaces for example right and we have different font sizes in the end we're doing pixels here we're using pixels here but you can of course transform them into e/m units later so it's more flexible it just for us to be easier it kind of to follow easier simpler so we have the font sizes and then we just have to kind of refine it with cap heights a little bit with the formula you will see in a second so once we define them we just plugged in a formula and it works right so how exactly does it work in the end we have this little sauce mix in where we define the font size and cap height an offset and returns that actual offset by again using that formula which I said before where we're kind of using the half of the line height minus cap height times font size right it will make sense just don't have time to explain everything right and the only thing we have to do is kind of put that off so once we define the offset calculated the offset we just need to push it a little bit down so it sits right on the baseline in order to do this we use we can use this and this is really like a magic trick most front-end developers will will freak out at this point because you can use margin top and margin bottom and it could you know weed here you have you have offset so you're pushing all the text a little bit down to see it on the baseline and design it out of you know not to screw up everything you have to pull it back with margin bottom for the for the when the paragraph ends right for example if you have a set the paragraphs you want them all to be sitting right right so what you have to split back so you still have this consistence in terms of how the lines and how they go so once you have this you might be wondering what the hell is going on here and you are free to leave at this point it's like two minutes left so how does it why does it work because we have collapsing margins in CSS if you look into this back in the evening at night you'll be able to find some really interesting facts about how it works as it turns out collapsing margins are not always collapsing margins so they work differently with positive and negative margins you have two positive margins the bigger one will win and like imagine you have a margin bottom and you have a margin top right I mean if you're doing CSS you will know this stuff if you have two positive values on two consequence paragraphs the one with the bigger value will win if you have two negative margins the lower well I'm the one that is more negative is going to win if you have one positive and one negative they're going to add so the Marches will sum up we can abuse it in so many different ways right because this is exactly what we can do and what we are doing here anyway right we have always positive one and another one is negative and this is exactly what we can use so they will be added up and they will maintain this vertical written that we want so what do we have in the end only one problem we have only one problem if an element doesn't have a border no padding and this first child has a margin that margin will flow out of the parent right because we define the negative margin but the actual parent has no you know has no padding so it's going to flow out so we need to put all four hidden on it that's okay if you could see the lines you will see that all of this text is sitting on right on this on the grid line without us having to do anything without any media queries without anything just works using a little bit of you know cook calc is like magic it's like you know flexbox calc and you don't that's all you need to know what CSS person seriously if you want to learn more about this and just use the mixin here we go right implementing baseline reading in CSS doesn't take much time at all so this in mind I'm very sorry I have to give away some chocolates just just because you okay who is really desperate in desperately needs chocolate now oh these people all right these people they want chocolate all right okay sorry so I'm taking up the time that was really bad I'm sorry all right so you can just pick it up later that's easy all right so I've got like the the slide deck is public it's already on slide deck so you can download it and with that in mind thank you and if you want to talk more about dirty stuff and CSS and not necessarily say such a dirty just come to me and we'll talk all right thank you

Channel: JSConf

Views: 32,816

Rating: 4.9537816 out of 5

Keywords:

Id: DQk9TqO5ets

Length: 42min 17sec (2537 seconds)

Published: Mon Sep 19 2016