 How many of you have seen some kind of geek manifestos? I think I see one of them right there at the back, right? That's why Geek Tower, I think, right? That's why Geek Tower, yeah, it was why Geek Tower. So we thought that, hey, you know, we could do something as a community. So it took about, so sometime last year we reached out to a lot of people. So you can probably go to thegeekpath.com and we reached out to a lot of people. And we collated something like what it means to be geeks. And it is a simple single page. You can download it. You can download the manifesto as a PNG file, high resolution PNG file. You can print it and do whatever you want with it. Is it? Yeah, it's like totally high resolution. Totally. Totally. Totally. You have several versions as well. And most importantly, they are all available on GitHub. Or is it? Yeah. Always wipe off. So talking about, so this section, this time, so yeah, a huge thanks to all the people who have helped us do it. But the contributor list doesn't end here. If you are printing the posters or creating or a variation of it, let us know, we will tweet it and we will add your name to the contributor list. So go ahead and print it and have one at your office. Oh yeah, we exist in Twitter as well. Like as always, not a snapchat yet, but keep bots. So go ahead and tweet us. I'll take it, I'll take it, I'll take it. This was at Terusel, they printed a poster. This was a free saver. So Chian we'll talk about later. So how do you think, this is a one page website, right? So how do you think the CSS was done? Very quickly. Diligently. So usually, you know, when I do CSS, I'll use a CSS preprocessor and then I'll use like normalize CSS and I'll have like partials in CSS. But this time, Chian and I, who coded the website, I think he did most of the posters on SVG that we'll talk about later, we decided to go really, really, really simple. And this is how our CSS looks like. So as you see, because we had like only like one page, we decided to go ahead and just style the tags itself. It's really, really, really short and tiny. And it's responsive as well. So you see, it's really, really simple. How many of you use IDs in your CSS? This is where you see slight variations. How many of you use IDs in your CSS? Yeah. Well, I am like, Chian used this, but I'm from the camp, like IDs are for JavaScript, but I guess to each his own. There are no right or wrong. Just use what it works. Lots of media queries, download after download. And there you go. There we have some classes, not too much. We use a lot of SVG, which Chian will talk about. And a super simple CSS. But there you go. Yeah. So go ahead and download it and take some stickers. How many of you don't have the stickers? Maybe we should just pass it around. Yeah, just pass it around. Just pass it around and take one and download it and tweet us your photo. And Chian will tell us more about the SVG side of things or even how you can edit it. Okay, I'll edit it. Edit it. Okay. Wait, what is this? What did you do with SVG for starters? Oh, yeah. Oh, it's zoom. Yeah, where is the SVG? The SVG. Where's the SVG? It's wrong too. Actually, we should just look at the GitHub. Yeah, the GitHub. Oh, you made one SVG version and one SVG version? No, there's no CSS. No, it's just SVG. It's the best like molecule format. So the SVG is kind of difficult. So I provide like a raw SVG thing. Anyone here who edits your own SVG? Yeah. Yeah, like manually. Oh, by who? I'll send you up to the... That's hard for a man. Not in my cup of tea. So this is the army of the... Oh, man. ...exported version of the... ...from the editor itself, which is... Yeah. Now, I optimize it. He will talk about that. Then... Where's the optimized version? She wants to speak louder. The optimized version is here. Yeah. It's a really big problem. Yes. Yeah, this is the optimized version. How do we optimize it? It's... Wow. Now there are the hood. Wait, what do I do? Well, I guess like what I did is always like go to SVG. I normally use ONG. Anyone knows SVG or everything? So it's just a website that you can drag and drop in SVG file and then you optimize SVG. So if you see the differences... It's always like stripping out a lot of attributes and tags. Like, say you don't really need the first line or sometimes you don't even need the dot type. Sometimes you just... All this weird stuff like XML space, preserve. Sometimes you can just remove that. So it's a lot of all these things. I usually like modify it myself. Sometimes I'll remove this few rule non-zero. I don't know what it does but yeah. Somehow I remove it, it works okay. Fine now. That's what I always do. And then sometimes... Well, the good thing is SVG, ONG is sometimes they will like combine all paths into a single path. So that's like a pretty nice part about SVG, ONG. There's a command line tools for this SVG go. It's based on this guy, SVG go tool thing. So there's a command line tool for this. It does more crazy stuff. You can configure almost every single thing. Removing ID is removing all the shit stuff. It's pretty good. And then... But then I also provide this editable SVG. So the thing is like for this poster, I convert the text into paths. So if I convert text into paths, then you can't edit text anymore, right? So I have to provide another SVG which includes the text. So you see like the text are actually inside. Like b-bow is inside. So it's kind of difficult and I have to like make this SVG in a way that is like editable by other people. So I am expecting like other designers to like import this SVG into their editor, make some changes, change some colors, change the fonts if you want to change the font. Yeah, I hope that this file format or this format would be editable enough. So any one of you who are designers feel free to try and make some changes. So there were a lot of like challenges for this because it's not easy to do this kind of stuff like this formatting. Like all these like different font sizes and different line heights. Yeah, you can try it yourself. It takes a lot of time. We will take it for interest. Yeah, even then like you see that sometimes the line height is a bit wrong. Sometimes it feels wrong. Sometimes it feels right. You can like adjust anyway you like. So that's pretty much like that. What is this? Why do you install Pinterest? So you can save the Pinterest. Okay, so if you see carefully this whole, whoa, okay. Okay, okay, what is this? So it's an IMG that points to the SVG file and then down there there's one more. Actually, this is kind of broken. Anyway, yeah. So this is kind of like another IMG with a base 64. Whoa, okay, base 64, yeah. So this is like, I kind of like try to play around with this. So from the SVG file, I try to create a wallpaper of it that adapts to your current screen size, screen dimensions. So on your mobile, you will look like, you know, you will just grab the screen size from your mobile and then generate it. I can show the code. It's kind of like, how did I do it? Is it everything here? Oh yeah, it's everything here. So I have to like take care of like device pixel ratio because so I could actually like just generate the SVG another SVG out of the SVG itself. It's actually easier because it's scalable already, but I kind of like have to generate like a raster image out of a vector image because, you know, so that you can save it to your phone. So it's like no choice, right? You can't like set SVG as a wallpaper. Actually, you should, right? Yeah, can't screenshot. This is for like, you know, for the lazy, you know. You can't write, it won't be scalable. You can look at the screen saver at the Twitter account. Go to a Twitter account. Like you like right click save as wallpaper. It will be just like one, but if you go to the Twitter account, there are examples of like... Yeah, Twitter account? Yeah, the Twitter account, the second last tab. Twitter account. Yeah, like this one, you see, it will generate according to the screen size. Oh yeah. Yeah, and that's the current screen size. So if on your phone, whatever, for fun, it's actually just for fun. They've got another suggestion. SVG is an open source software called InScape. Oh yeah, that's an editor that can... Well, the thing is I want it to be just generated on the fly, on the page itself. So rather than me like exporting the SVG file from my editor one by one in every dimension for every screen sizes in the whole world, so that's just too much work. So I just programmatically generate the wallpaper. Okay, itself. So I use... It's lazy, but lazy also have to code. So I use like canvas and stuff, all the usual canvas, this is a bit JavaScript though. So yeah, so anyway. It's okay, it's okay. You're on your own, you're on your own, you're on your own. You're on your own, you're on your own, you're on your own. So yeah, a lot of math there, a lot of weird math. Some spacing in between the wallpaper and stuff like that. It's just yeah, it's a lot of weird stuff. And then what did I do? And then, oh yeah, if I resize the window, whatever, screen width, yeah. So it's kind of cool. So it generates this... So you would just grab this image, put it into canvas, and then regenerate the whole image with like the spacing around it. So if you see this, so this is like a poster size, right? But here it's not poster size anymore. So this is like an actual image. That's also not centered. I think you need to refresh it while doing the projector stuff. It's a bit too... Why is it not centered? Refresh it? Hey refresh, refresh, refresh. We generate refresh. Oh I refresh the page. Refresh the page. Is it? Why? Is it a projector thing? Okay. It's not... It's kind of... Yeah. Yeah, why? So this is... Yeah, feel free to raise bugs on GitHub. Issues on GitHub or... Yeah, anyway... This is why it's on GitHub guys. Anyway, we're all developers, so give us full requests. Yes, full requests, full requests. Yeah, took me some time though. You actually contributed a lot. It's just a lot of math, like, you know, like... First put the image in the canvas, and then like position it to the center, 50% off, whatever, like, yeah. And then make sure that there's enough padding around here, so that, you know, there's space for your menu, your Mac menu, but whatever, yeah. So yeah, that's pretty much it. And then there's a download thing, and this is another cool thing, I guess this is not really CSS, like that's the download attribute. It's pretty new. I think the Safari in 10 points, yeah, just release it, yeah. So the cool thing is like, if you put wallpaper right, and then you click it right, you actually download as wallpaper of PNG. So it follows the name that you set. So it's kind of like cool. Yeah, so it becomes the file name. Yeah, kind of, yeah, it becomes wallpaper of PNG. Whatever you put there, as the value of the attribute, it will just follow it. So kind of, it's kind of weird. Let's try to put the value in it, it will somehow, it works like that. Yeah, it's somehow not documented, I think. Anyway, because most people just put the attribute that download attribute, no value, and yeah, you download some with some weird file names. Yeah, what file name? Yeah, you can try. So it's more consistent that way. Actually, I have used download attribute like a miracle as well. Yeah, it's not commonly involved. Yeah, I've used it before. It's really useful when you have server rendered pages, and you want to name them differently. Yeah, I mean like the old way is like sending a different HTTP header. Yeah, yeah, but you don't need to... OctagStream or whatever. The old way is to send the OctagStream header thing to force download the thing. Now it's like just a attribute. Why don't you support my line? So... Uh, yeah. That's pretty much it. Okay, yeah. Oh, and then I also somehow managed to calculate the file size of the image. Actually, how did I calculate the file size? Like math.o... Okay, okay, okay. Okay, math.1. Oh, yeah, math.1. Based on the length times 3 divided by 4 divided by 1000 kb. Yeah. It's not very accurate. And then different browsers will generate different file sizes, which is weird. Different encoders, I guess. Different... Yeah. And then it's... What is this? It's going out. It's going out. Yeah. Oh, okay. Okay. What the... It's going out. It's going out. Yeah, that's pretty much it. Yeah. Yeah. Yep. Yeah, that's all. Thank you. Thank you. Thank you. Thank you. Thank you. Anyone have any questions for... Questions? No, no, no. Questions. Questions. Questions. Questions. Oh, now it works. Okay, now it works. Okay, this is how it should work. Probably the inspector thing. Okay, wait. Wait, wait, wait. Probably the inspector thing. Yeah. Is that all, inspector or mess with your script? I think so. No, you can't mess with it. Oh, okay, off. Yeah. Okay. Okay. You got a mark down. Yeah, even about the full... Full text of it, like... Yeah. Yeah. So, if you're going to do anything you wanted, everything is dedicated to the public domain. So, just do whatever you want. And see us. See us. What are you doing? Why do you need the dresser? Oh, I have casserole because the view is neutral. Oh, wait, wait, wait. I think there's also this thing. This thing that I try, which is a... Webkit text stroke. So, it's like text stroke outline and then the text shadow. Kind of cool. You can get the text stroke also with the text shadow. Yep. Text stroke with the... Oh. But you have to position like four sides and... Not so real, I would say. Just don't give it an offset for it. And then you make... Oh, the spread. Don't blur it. Yeah. And then the spread. So, it's taking away the view. Oh, okay. So, on the CSS art symbol, the view is... Right, right. Monalisa. So, this is the spread. Monalisa. Yeah, pretty cool. Quite easy. Getting better. If I've got a couple of minutes, I would like to let Tom show people how to export SVG's better. Yes, SVG's better. Oh, okay. So, there's a neat little trick there. The word spacing.