WEBVTT 00:00.000 --> 00:12.000 Now we are going to talk with Lucy and Geome about outside of the beaten parts of CSS. 00:12.000 --> 00:22.560 Hi everybody, so as you may imagine we'll be talking a bit about CSS, but we'll be talking 00:22.560 --> 00:29.760 about something very important is that it's very difficult to write slides as you may be 00:29.760 --> 00:35.760 use some speakers and you know that the slides are never ready, so we decided today to try 00:35.760 --> 00:40.480 something else instead of just finishing two minutes before the presentation. 00:41.520 --> 00:45.760 What if we try to write the slides right during the presentation? 00:45.760 --> 00:52.000 It's like live coding, but with the slides, so we can call this live sliding if you want. 00:53.280 --> 01:00.000 It's very dangerous, so don't try this at home, but let's see what we can do soon. 01:00.960 --> 01:07.760 Hi, I'm Lucy part of the young and Lucy, so it could be nice if we called edit this HTML 01:07.760 --> 01:11.440 during the live, so can we do that? I don't know, we can try. 01:12.400 --> 01:21.040 Hi, Lucy and Geome and we are both friends. I change in genera, so we 01:21.040 --> 01:26.880 principally like food, and also we work on wizard print, which is a Python library 01:27.200 --> 01:36.720 from a HTML and CSS into PGF, so we also really like HTML, CSS, PGF, and specification. 01:40.080 --> 01:46.160 Maybe a bit weird, but it's normal. What's your screen? 01:46.960 --> 01:51.600 It's a Python library, you don't understand really well, you know, you work on that. 01:51.600 --> 01:52.560 Yeah, yeah, I know. 01:52.960 --> 02:02.400 So it's a free annotations software of course, so we can edit HTML, it's cool, but what is also very 02:02.400 --> 02:10.640 awesome is CSS, and with HTML and CSS, you know the originality of web development, also 02:10.640 --> 02:18.080 JavaScript, so we often need JavaScript for example, for this slide to do a nice animation and stuff like this. 02:18.160 --> 02:22.880 Yeah, but I don't think we need this. 02:22.880 --> 02:26.560 Oh, was your JavaScript for today? No, no, just good for today, so. 02:27.840 --> 02:33.760 Full HTML and CSS like. Yeah, so not everybody, but often. 02:36.000 --> 02:45.120 HTML, CSS, everybody is awesome, and what is also awesome also is web browser, because thanks to 02:45.200 --> 02:52.320 HTML, CSS, and often JavaScript, but not today, browser of super power, you can do a lot of stuff. 02:53.120 --> 03:03.840 Yeah, yeah, and what else? It would be cool if you could let's say edit the CSS, 03:03.840 --> 03:11.280 like we did with HTML. I don't know, maybe there's a button right here, we can open something, 03:12.240 --> 03:22.640 say the variables, and try to change this. What's your favorite color? Red? Oh, yeah. 03:23.360 --> 03:26.480 It was already red, so maybe we can try another one. 03:32.480 --> 03:36.720 Percol blue. Yeah, kind of works. 03:36.720 --> 03:43.200 Oh, everybody is blue now. Yeah, even this little blue. So nice. 03:43.200 --> 03:46.160 Someone likes SV here, or so. Yeah. 03:49.120 --> 03:55.040 Web browser also, and what is awesome too, is web tooling, because browser are not alone. 03:57.440 --> 04:02.400 There is a lot of different tools around web technology, like your favorite code editor, 04:03.360 --> 04:09.600 for it's index, but whatever you like, some library, like Perl, some framework, 04:09.600 --> 04:15.040 terween, and so on, there is a lot of tooling, and it's very cool, because it's a 04:15.040 --> 04:21.360 depending what you need, you may find a tool existing to do what you want, but you also can create 04:21.360 --> 04:25.680 your own, and you can do that, because there is open standard, like we thought before, 04:26.640 --> 04:35.760 and standards are also, yeah, of some too. So yeah, CSS is quite all I think, so maybe it's not 04:35.760 --> 04:44.160 that awesome. It's been created, I think, 30 years ago. It's actually also also, it wasn't designed 04:44.160 --> 04:51.760 for, let's say, TVs or projectors or smartphones, and so maybe it's too old now. 04:51.840 --> 05:00.320 But I think there is CSS too, in 1998. Yeah. And there is some other devices play, maybe. 05:00.320 --> 05:09.200 Oh, yes, sure, right. They thought about everything, incredible, so it means that in 1998, 05:09.200 --> 05:17.600 there was thinking about, bright, or even, overall, for a speech synthesizer. Wow, it's incredible. 05:17.680 --> 05:24.800 So, can we use this? Yeah, we can use it for several devices. Yeah. So bright screens, 05:24.800 --> 05:32.400 pitch synthesizer, projector, etc. Yeah. But also for print documents. Wow. So, 05:33.280 --> 05:40.160 do you know the difference between web page and a book? Do you know what a book is? Yes. 05:41.120 --> 05:46.800 Okay, correct. If you really look closely to the book, you will notice there is 05:46.800 --> 05:53.920 different pages inside. Yeah. With left and right pages, page number, sometimes a table of 05:53.920 --> 06:01.840 content, footnot, a lot of different stuff, and depending the layouting, you can already crazy ID. 06:02.640 --> 06:11.680 Yeah. And so, that means we can use HTML and CSS to create this book and print it document. 06:12.480 --> 06:22.240 So, can we maybe add some CSS to this slide? Maybe there's a button right here to say 06:22.240 --> 06:30.080 some styling that could be useful to print this slide. Yeah, so we can have margins and define 06:30.240 --> 06:34.400 the page size and things like that. And everything is done to that. So, it means that 06:34.400 --> 06:39.360 it's open standard that you can just implement them. So, maybe we can print this slide. 06:39.360 --> 06:45.360 So, we can try to do something. So, let's say what we've done? Yes, we've done everything. 06:45.360 --> 06:52.480 We don't want to lose our work. It's already late for the slide. So, yes. 06:52.480 --> 06:59.680 So, we say things that are HTML. Yeah. And maybe there's a tool. Yeah. Because browser 06:59.680 --> 07:05.120 are mainly to browse, but remember there is a lot of tool around web technology. So, 07:05.120 --> 07:12.400 do you know a tool that can create PDF from HTML and CSS? Maybe with a print, with a print, 07:12.400 --> 07:17.840 yes. Yeah, I think it, yeah. So, it's a tool. Never heard about it. Yes. 07:18.720 --> 07:33.280 So, maybe we can just try to HTML, slide shoot, live, PDF. Okay. Try. That's why that's hard to 07:34.240 --> 07:44.560 know where we're on this page. Yeah, yeah. And, no, it doesn't work. 07:46.960 --> 07:50.640 We're told you it's danger. It's very dangerous to do something to test. 07:52.480 --> 08:00.160 So, let's say it again. No, I know what I did wrong. Oh, yeah. Yeah, that's what we want. 08:04.240 --> 08:11.520 So, with the same name, so we can just use the same command line. Yeah. 08:11.520 --> 08:20.000 Say, for example, same name, not exactly the same name, but try to live. Yeah. Okay. 08:20.000 --> 08:28.320 Oh, yeah. And to relish with a print? Yes. Does it work? Still no error message, but you know it doesn't 08:28.320 --> 08:40.880 mean anything. Oh, yeah. So, we got you. Yeah. So, it's all, all slide. It's a tool. And page numbers. 08:40.880 --> 08:48.400 Page numbers. Whoa, incredible. And it's all a five because we say a five. So, yeah, everything is really nice. 08:48.400 --> 08:55.280 Next color, yeah. Yeah. Yeah. I think PDF is useful if you want the report in 08:55.280 --> 09:03.200 voices, but what could be very cool? Can we print that for, like, for real, we've, maybe, 09:03.200 --> 09:11.520 having a paper at the end? I have a printer for that. I think. Yes. But, oh, what in my pocket? 09:13.520 --> 09:20.000 That's a printer. A thermal printer? Yeah, a thermal printer. Maybe we can play it? Oh, yeah. 09:20.320 --> 09:31.840 Yeah. It starts. Yeah. Okay. So, we come, we come print the slides because it's colored. 09:31.840 --> 09:36.800 And maybe we need some different layout. Yeah. Because the thermal printer is all black and white. 09:36.800 --> 09:43.120 So, can we maybe add a style specific for, is actually the printer? Yeah. You mean, like a button 09:43.120 --> 09:49.600 we had just right here with some style just for the thermal printer. Let's say everything is black, 09:49.680 --> 09:55.200 because it's black and white. And we have this strange size because, yeah, it's a bit different than 09:55.840 --> 10:01.680 normal pages. So, maybe we can try to actually print them. Let's try that. Oh, yeah. 10:01.680 --> 10:08.960 And what's very cool? So, we are already at the HTML. So, we can specify which style we want. 10:08.960 --> 10:15.840 So, thermal, because thermal printer, you know, real-onge. And now we have a new PDF. 10:16.800 --> 10:23.840 We have a very different layout. Yeah. So, we have a very soft slide here. Yeah. 10:24.880 --> 10:33.120 Let's print them for, for real. Like the life printing now. Okay. Whoa, whoa, whoa, okay. 10:33.120 --> 10:40.480 Everything's cool. We can try it. Does it work? Print doesn't ever work. 10:41.440 --> 10:48.560 Oh, oh. Oh. So, if you want to slide, you can print slides just for you. And then the slides. 10:48.560 --> 10:52.720 We just wrote during the presentation. So, it's called occurs. 10:57.440 --> 11:01.680 Wow, amazing. So, you can try printers too. 11:05.680 --> 11:10.320 Very beautiful. So, yeah. If you want, if you want to slide, you can 11:10.480 --> 11:15.280 that's then we can print them for you and also have nice t-cutters. 11:15.280 --> 11:23.360 So HTML, CSS, web technology, also, in CSS, there is a lot of 11:23.360 --> 11:26.560 feature you can know about when you do web development. 11:26.560 --> 11:30.400 But there is also a lot of feature you don't know about, specifically for 11:30.400 --> 11:34.960 page media with some instruction, we show page number, but you can do 11:34.960 --> 11:38.000 footnot and a lot of different things. 11:38.000 --> 11:43.200 And the anti-operability as we in the talk before is very nice, because 11:43.200 --> 11:47.840 you can act all the tool, create your own, and do whatever you want. 11:47.840 --> 11:51.520 We show with a print to print the PDF, but there are other 11:51.520 --> 11:56.160 projects which are very cool like pages and diviostide, which are also 11:56.160 --> 11:59.280 free open source software. So if you want to print 11:59.280 --> 12:01.760 PDF, you can also use them. 12:01.760 --> 12:06.320 And don't hesitate to go outside the bit and parts of CSS in the web. 12:06.320 --> 12:08.560 It's very cool. Thank you. 12:08.560 --> 12:10.560 Thank you. 12:16.800 --> 12:20.720 Thanks for this amazing presentation. Do you have any questions, folks? 12:20.720 --> 12:24.000 Do you have a few minute for questions? 12:24.000 --> 12:27.200 You can put two as in the greatest too. 12:27.200 --> 12:31.600 Don't be shy. 12:32.240 --> 12:35.520 One question. Can you show us the question? 12:35.520 --> 12:39.520 Why should we use this instead of just printing from the browser? 12:39.520 --> 12:41.520 Oh. Can you repeat the question? 12:41.520 --> 12:46.480 The question was, why should we use a print to say the printing from the browser? 12:46.480 --> 12:49.200 Because there are lots of features that are not supported by 12:49.200 --> 12:53.120 browsers for printing, like let's say footnotes, for example. 12:53.120 --> 12:56.880 If you want footnotes for a real book, you can use a browser for that. 12:56.880 --> 12:59.600 So you have to use specific tools. 12:59.600 --> 13:04.800 And a lot of different features. 13:04.800 --> 13:06.800 Any other question? 13:06.800 --> 13:11.280 Can you give more examples of other features 13:11.280 --> 13:15.280 if you'd like to see those in browsers? 13:15.280 --> 13:17.840 So I have to. 13:17.840 --> 13:22.160 Yeah. So there are different features that are not in browsers. 13:22.160 --> 13:24.640 Let's say for example, the leaders, when you have a table of 13:24.640 --> 13:29.040 contents, you have the little dots between the title and the page number. 13:29.040 --> 13:31.760 So that's something you won't have in browsers. 13:31.760 --> 13:33.760 You have the way you define page breaks. 13:33.760 --> 13:37.360 So if you want to avoid page breaks between different sections, 13:37.360 --> 13:40.480 or false page breaks between different sections, 13:40.480 --> 13:43.040 you don't have the features in the browsers. 13:43.040 --> 13:44.960 And it's very difficult. 13:44.960 --> 13:47.760 When we created with a print at the beginning, 13:47.760 --> 13:50.880 we tried to use a regular browser to do the work, 13:50.880 --> 13:53.600 because we didn't want to write it from scratch. 13:53.600 --> 13:57.840 And the thing is a web page is very different from a book. 13:57.840 --> 14:01.600 And everything in browsers assumes that just one 14:01.600 --> 14:04.960 rectangle and you display things on one rectangle. 14:04.960 --> 14:08.880 And it's very difficult to use browser and add these features, 14:08.880 --> 14:10.960 because it's not the way that is designed. 14:10.960 --> 14:15.120 So yeah, a lot of features come in browsers, 14:15.120 --> 14:19.280 but it's much slower than what we can do in the search and so. 14:19.280 --> 14:30.800 I understood this is a Python library. 14:30.800 --> 14:33.840 Is there any possibility to have it as a JavaScript library? 14:33.840 --> 14:39.760 So you could embed it in a browser and then maybe use it from a web page. 14:39.760 --> 14:44.000 To be honest, there are other tools that do that already. 14:44.000 --> 14:46.400 So if you want to do this, basically, 14:46.400 --> 14:48.640 yes, it's a quite good library for that, 14:48.640 --> 14:51.360 because it relies on the browser. 14:51.360 --> 14:54.000 It adds some polyfields to support the features 14:54.000 --> 14:55.760 that are not supported by the browser. 14:55.760 --> 14:58.720 And so if you want to use from a browser, 14:58.720 --> 15:00.560 you don't have to use with a print. 15:00.560 --> 15:05.280 Yes, would it design to work set aside and not in the browsers? 15:05.280 --> 15:08.400 Maybe you can, but there are better tools for that. 15:08.400 --> 15:11.040 So don't choose with a print for that. 15:12.000 --> 15:15.360 One nice question. 15:18.000 --> 15:19.840 Okay, thank you all for coming. 15:19.840 --> 15:21.840 Thank you.