Now we are going to talk with Lucy and Geome about outside of the beaten parts of CSS.
Hi everybody, so as you may imagine we'll be talking a bit about CSS, but we'll be talking
about something very important is that it's very difficult to write slides as you may be
use some speakers and you know that the slides are never ready, so we decided today to try
something else instead of just finishing two minutes before the presentation.
What if we try to write the slides right during the presentation?
It's like live coding, but with the slides, so we can call this live sliding if you want.
It's very dangerous, so don't try this at home, but let's see what we can do soon.
Hi, I'm Lucy part of the young and Lucy, so it could be nice if we called edit this HTML
during the live, so can we do that? I don't know, we can try.
Hi, Lucy and Geome and we are both friends. I change in genera, so we
principally like food, and also we work on wizard print, which is a Python library
from a HTML and CSS into PGF, so we also really like HTML, CSS, PGF, and specification.
Maybe a bit weird, but it's normal. What's your screen?
It's a Python library, you don't understand really well, you know, you work on that.
Yeah, yeah, I know.
So it's a free annotations software of course, so we can edit HTML, it's cool, but what is also very
awesome is CSS, and with HTML and CSS, you know the originality of web development, also
JavaScript, so we often need JavaScript for example, for this slide to do a nice animation and stuff like this.
Yeah, but I don't think we need this.
Oh, was your JavaScript for today? No, no, just good for today, so.
Full HTML and CSS like. Yeah, so not everybody, but often.
HTML, CSS, everybody is awesome, and what is also awesome also is web browser, because thanks to
HTML, CSS, and often JavaScript, but not today, browser of super power, you can do a lot of stuff.
Yeah, yeah, and what else? It would be cool if you could let's say edit the CSS,
like we did with HTML. I don't know, maybe there's a button right here, we can open something,
say the variables, and try to change this. What's your favorite color? Red? Oh, yeah.
It was already red, so maybe we can try another one.
Percol blue. Yeah, kind of works.
Oh, everybody is blue now. Yeah, even this little blue. So nice.
Someone likes SV here, or so. Yeah.
Web browser also, and what is awesome too, is web tooling, because browser are not alone.
There is a lot of different tools around web technology, like your favorite code editor,
for it's index, but whatever you like, some library, like Perl, some framework,
terween, and so on, there is a lot of tooling, and it's very cool, because it's a
depending what you need, you may find a tool existing to do what you want, but you also can create
your own, and you can do that, because there is open standard, like we thought before,
and standards are also, yeah, of some too. So yeah, CSS is quite all I think, so maybe it's not
that awesome. It's been created, I think, 30 years ago. It's actually also also, it wasn't designed
for, let's say, TVs or projectors or smartphones, and so maybe it's too old now.
But I think there is CSS too, in 1998. Yeah. And there is some other devices play, maybe.
Oh, yes, sure, right. They thought about everything, incredible, so it means that in 1998,
there was thinking about, bright, or even, overall, for a speech synthesizer. Wow, it's incredible.
So, can we use this? Yeah, we can use it for several devices. Yeah. So bright screens,
pitch synthesizer, projector, etc. Yeah. But also for print documents. Wow. So,
do you know the difference between web page and a book? Do you know what a book is? Yes.
Okay, correct. If you really look closely to the book, you will notice there is
different pages inside. Yeah. With left and right pages, page number, sometimes a table of
content, footnot, a lot of different stuff, and depending the layouting, you can already crazy ID.
Yeah. And so, that means we can use HTML and CSS to create this book and print it document.
So, can we maybe add some CSS to this slide? Maybe there's a button right here to say
some styling that could be useful to print this slide. Yeah, so we can have margins and define
the page size and things like that. And everything is done to that. So, it means that
it's open standard that you can just implement them. So, maybe we can print this slide.
So, we can try to do something. So, let's say what we've done? Yes, we've done everything.
We don't want to lose our work. It's already late for the slide. So, yes.
So, we say things that are HTML. Yeah. And maybe there's a tool. Yeah. Because browser
are mainly to browse, but remember there is a lot of tool around web technology. So,
do you know a tool that can create PDF from HTML and CSS? Maybe with a print, with a print,
yes. Yeah, I think it, yeah. So, it's a tool. Never heard about it. Yes.
So, maybe we can just try to HTML, slide shoot, live, PDF. Okay. Try. That's why that's hard to
know where we're on this page. Yeah, yeah. And, no, it doesn't work.
We're told you it's danger. It's very dangerous to do something to test.
So, let's say it again. No, I know what I did wrong. Oh, yeah. Yeah, that's what we want.
So, with the same name, so we can just use the same command line. Yeah.
Say, for example, same name, not exactly the same name, but try to live. Yeah. Okay.
Oh, yeah. And to relish with a print? Yes. Does it work? Still no error message, but you know it doesn't
mean anything. Oh, yeah. So, we got you. Yeah. So, it's all, all slide. It's a tool. And page numbers.
Page numbers. Whoa, incredible. And it's all a five because we say a five. So, yeah, everything is really nice.
Next color, yeah. Yeah. Yeah. I think PDF is useful if you want the report in
voices, but what could be very cool? Can we print that for, like, for real, we've, maybe,
having a paper at the end? I have a printer for that. I think. Yes. But, oh, what in my pocket?
That's a printer. A thermal printer? Yeah, a thermal printer. Maybe we can play it? Oh, yeah.
Yeah. It starts. Yeah. Okay. So, we come, we come print the slides because it's colored.
And maybe we need some different layout. Yeah. Because the thermal printer is all black and white.
So, can we maybe add a style specific for, is actually the printer? Yeah. You mean, like a button
we had just right here with some style just for the thermal printer. Let's say everything is black,
because it's black and white. And we have this strange size because, yeah, it's a bit different than
normal pages. So, maybe we can try to actually print them. Let's try that. Oh, yeah.
And what's very cool? So, we are already at the HTML. So, we can specify which style we want.
So, thermal, because thermal printer, you know, real-onge. And now we have a new PDF.
We have a very different layout. Yeah. So, we have a very soft slide here. Yeah.
Let's print them for, for real. Like the life printing now. Okay. Whoa, whoa, whoa, okay.
Everything's cool. We can try it. Does it work? Print doesn't ever work.
Oh! Print is so nice! So, if you want to see a slide, you can print slides just for you.
And they are the slides we just wrote during the presentations. So, it's collector's.
Wow. Amazing.
So, you can try to print yours too.
See?
Yeah. It's very beautiful.
So, yeah, if you want the slide, you can tell us
and we can print them for you, and also have nice t-cutters.
So, HTML, CSS, web technology, also.
In CSS, there is a lot of feature.
You can know about when you do web development,
but there is also a lot of feature.
You don't know about specifically for page media,
with some instruction, we show page number,
but you can do footnot, and a lot of different things.
And the anti-operability, as we in the talk before,
is very nice, because you can act all the tools,
create your own, and do whatever you want.
We show with a print to print the PDF,
but there are other projects, which are very cool,
like PGS and DVO style, which are also
free open source software.
So, if you want to print PDF, you can also use them.
And don't hesitate to go outside the bit in both of CSS,
in the web, it's very cool.
Thank you.
Thanks for this amazing presentation.
Do you have any questions, folks?
Do you have a few minute for questions?
You can go to us in the greatest, too.
Don't be shy.
OK, one question.
Can you show us a question?
We're really reading questions.
Why should we use this instead of just printing from the browser?
Oh.
Can you repeat a question?
The question was, why should we use a print to set the printing
from the browser?
Because there are lots of features that are not supported by
browsers for printing, like let's say footnotes, for example.
If you want footnotes for a wheelbook, you can use a browser for that.
So you have to use specific tools.
And a lot of different features.
Any other question?
Yeah.
Can you give more examples of other features
and if you'd like to see those in browsers?
So yeah, I have that.
Yeah, so there are different features that
are not in browsers.
Let's say, for example, the leaders,
when you have a table of contents,
you have the little dots between the title and the page number.
So that's something you won't have in browsers.
You have the way you define page breaks.
So if you want to avoid page breaks between different sections
or false page breaks between different sections,
you don't have the features in the browsers.
And it's very difficult.
When we created with a print at the beginning,
we tried to use a regular browser to do the work
because we didn't want to write it from scratch.
And the thing is, a web page is very different from a book.
And everything in browsers assumes
that just just one rectangle and you display things on one rectangle.
And it's very difficult to use browser
and add these features because it's not the way that it is.
So yeah, a lot of features come in browsers better.
It's much slower than what we can do in a print so.
I understood this is a Python library.
Is there any possibility to have it as a JavaScript library?
So you could embed it in a browser
and then maybe use it from a web page.
To be honest, there are other tools that do that already.
So if you want to do this, basically,
it's quite good library for that.
Because it relies on the browser.
It adds some polyfields to support the features
that are not supported by the browser.
And so if you want to use from a browser,
you don't have to use with a print.
Yes, would it design to work set aside
and nothing to the browser?
Maybe you can bet there are better tools for that.
So don't choose with a print for that.
One nice question.
OK, thank you all for coming.
Thank you.