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:47.680 Oh! Print is so nice! So, if you want to see a slide, you can print slides just for you. 10:47.680 --> 10:53.920 And they are the slides we just wrote during the presentations. So, it's collector's. 10:57.760 --> 10:58.560 Wow. Amazing. 10:59.760 --> 11:01.120 So, you can try to print yours too. 11:01.120 --> 11:02.400 See? 11:05.440 --> 11:06.320 Yeah. It's very beautiful. 11:06.320 --> 11:10.840 So, yeah, if you want the slide, you can tell us 11:10.840 --> 11:15.280 and we can print them for you, and also have nice t-cutters. 11:15.280 --> 11:21.800 So, HTML, CSS, web technology, also. 11:21.800 --> 11:24.400 In CSS, there is a lot of feature. 11:24.400 --> 11:26.560 You can know about when you do web development, 11:26.560 --> 11:28.280 but there is also a lot of feature. 11:28.280 --> 11:31.440 You don't know about specifically for page media, 11:31.440 --> 11:33.800 with some instruction, we show page number, 11:33.800 --> 11:38.040 but you can do footnot, and a lot of different things. 11:38.040 --> 11:41.160 And the anti-operability, as we in the talk before, 11:41.160 --> 11:45.240 is very nice, because you can act all the tools, 11:45.240 --> 11:47.960 create your own, and do whatever you want. 11:47.960 --> 11:50.160 We show with a print to print the PDF, 11:50.160 --> 11:53.640 but there are other projects, which are very cool, 11:53.640 --> 11:56.240 like PGS and DVO style, which are also 11:56.240 --> 11:57.520 free open source software. 11:57.520 --> 12:01.880 So, if you want to print PDF, you can also use them. 12:01.880 --> 12:05.640 And don't hesitate to go outside the bit in both of CSS, 12:05.640 --> 12:07.680 in the web, it's very cool. 12:07.680 --> 12:08.680 Thank you. 12:08.680 --> 12:09.520 Thank you. 12:09.520 --> 12:10.040 Thank you. 12:10.040 --> 12:11.040 Thank you. 12:17.040 --> 12:18.680 Thanks for this amazing presentation. 12:18.680 --> 12:20.800 Do you have any questions, folks? 12:20.800 --> 12:24.120 Do you have a few minute for questions? 12:24.120 --> 12:27.320 You can go to us in the greatest, too. 12:27.320 --> 12:27.920 Don't be shy. 12:27.920 --> 12:33.200 OK, one question. 12:33.200 --> 12:34.400 Can you show us a question? 12:34.400 --> 12:36.080 We're really reading questions. 12:36.080 --> 12:39.520 Why should we use this instead of just printing from the browser? 12:39.520 --> 12:40.040 Oh. 12:40.040 --> 12:41.320 Can you repeat a question? 12:41.320 --> 12:45.440 The question was, why should we use a print to set the printing 12:45.440 --> 12:46.520 from the browser? 12:46.520 --> 12:49.240 Because there are lots of features that are not supported by 12:49.240 --> 12:53.160 browsers for printing, like let's say footnotes, for example. 12:53.160 --> 12:56.880 If you want footnotes for a wheelbook, you can use a browser for that. 12:56.920 --> 12:59.600 So you have to use specific tools. 12:59.600 --> 13:01.320 And a lot of different features. 13:04.880 --> 13:05.680 Any other question? 13:05.680 --> 13:06.680 Yeah. 13:06.680 --> 13:11.320 Can you give more examples of other features 13:11.320 --> 13:12.880 and if you'd like to see those in browsers? 13:16.320 --> 13:17.880 So yeah, I have that. 13:17.880 --> 13:20.720 Yeah, so there are different features that 13:20.720 --> 13:22.240 are not in browsers. 13:22.240 --> 13:23.840 Let's say, for example, the leaders, 13:23.840 --> 13:25.160 when you have a table of contents, 13:25.160 --> 13:29.160 you have the little dots between the title and the page number. 13:29.160 --> 13:31.920 So that's something you won't have in browsers. 13:31.920 --> 13:33.920 You have the way you define page breaks. 13:33.920 --> 13:37.480 So if you want to avoid page breaks between different sections 13:37.480 --> 13:40.680 or false page breaks between different sections, 13:40.680 --> 13:43.080 you don't have the features in the browsers. 13:43.080 --> 13:45.080 And it's very difficult. 13:45.080 --> 13:47.920 When we created with a print at the beginning, 13:47.920 --> 13:51.040 we tried to use a regular browser to do the work 13:51.040 --> 13:53.720 because we didn't want to write it from scratch. 13:53.720 --> 13:57.960 And the thing is, a web page is very different from a book. 13:57.960 --> 14:00.440 And everything in browsers assumes 14:00.440 --> 14:05.000 that just just one rectangle and you display things on one rectangle. 14:05.000 --> 14:07.720 And it's very difficult to use browser 14:07.720 --> 14:10.960 and add these features because it's not the way that it is. 14:10.960 --> 14:15.720 So yeah, a lot of features come in browsers better. 14:15.720 --> 14:19.320 It's much slower than what we can do in a print so. 14:23.720 --> 14:30.840 I understood this is a Python library. 14:30.840 --> 14:33.880 Is there any possibility to have it as a JavaScript library? 14:33.880 --> 14:35.720 So you could embed it in a browser 14:35.720 --> 14:39.840 and then maybe use it from a web page. 14:39.840 --> 14:43.960 To be honest, there are other tools that do that already. 14:43.960 --> 14:46.480 So if you want to do this, basically, 14:46.480 --> 14:48.720 it's quite good library for that. 14:48.720 --> 14:51.440 Because it relies on the browser. 14:51.440 --> 14:54.040 It adds some polyfields to support the features 14:54.040 --> 14:55.840 that are not supported by the browser. 14:55.840 --> 14:58.800 And so if you want to use from a browser, 14:58.800 --> 15:00.640 you don't have to use with a print. 15:00.640 --> 15:04.120 Yes, would it design to work set aside 15:04.120 --> 15:05.360 and nothing to the browser? 15:05.360 --> 15:08.440 Maybe you can bet there are better tools for that. 15:08.440 --> 15:10.920 So don't choose with a print for that. 15:14.640 --> 15:15.480 One nice question. 15:18.200 --> 15:20.160 OK, thank you all for coming. 15:20.160 --> 15:21.160 Thank you. 15:21.440 --> 15:23.240 Thank you.