 Hello everyone and welcome to being back at the Bite Size Talk since we had a bit of a break over Easter and today we start the series with Maxime from Sekira Labs and he is going to talk about how to use HecumD to present slides and off to you. Thank you Fran for the introduction. So hello everyone. So I'm Maxime Garcia working at Sekira Labs and I'm going to present like one of the tools that we use like quite often during the hackathon and everything. So sorry for all that. So which is like HecumD and reveal.js. So basically okay let's start with the presentation mode because I think this is the most like common stuff. So the usual disclaimer I'm mainly covering like my own usage within like NFCore or what I usually do like on the side but you can do much more so don't hesitate like to investigate and explore. Like I think it's kind of fun. Yes this kind of messy but it sounds okay so first markdown because all of the stuff that we're doing is in markdown and what is markdown? Markdown so it's a lightweight markup language so it means that it's using small tags like to do stuff but most of the time like it's used just like tiny symbols as the tags and the key point is readability because if you can like read it like this is markdown and it's kind of understandable like at the same time like what you're seeing here is what you see there and you can understand what you see and what you read. So for me that's one of the key points in markdown is readability. If you compare that to latex or some other language which are like less readable markdown is like super high in readability and it's super easy to convert into HTML and then PDF and it's widely widely used in all of the NFCore documentation and the NFCore website. So you've noticed like some tiny issues there on the side but I will come to that like later don't worry about it. So quick links like for markdown I will of course share the slide like later so it will be like super easy to follow the slide to follow the links and everything. So quick links I think like I have like one first like quick reference like to the markdown syntax which is like fairly simple a more complete like markdown sheet sheet which kind of like goes way more into detail and then some more documentation for the Github flavored markdown which is like like kind of an extension about the regular markdown. What is HackMD? So HackMD is a tool like for real-time collaboration of markdown document it's widely used during like hackathon and NFCore byte size presentation and basically what it means that I can like edit a tool I can edit like a document so just like that so real-time edit and if someone else has the same like URL as I we can all edit the same document exactly like what we do with Google and it's all in markdown so it's super easy to do that and HackMD has like the possibility to use reveal.js which is an HTML presentation framework which we also use widely during the hackathon and for that I use a lot for the byte size presentation and reveal.js is like another tool and it's HackMD made it possible to use reveal.js and it's in the presentation mode so what you do is when you have your presentation what you can do you can share in slide mode and if you share in slide mode then what you can have is directly your presentation in in slides and that's all so to pass from one slide to another once you're in like slide mode you either use the arrow on your keyboard I'm pretty sure it works also with the arrows here oh yes it does or you can also use the spacebar reveal.js allows you to really like do a section and subsection so you can really do like a lot of stuff within reveal.js you can use fragments so if you want to have like multiple steps in a slide that that got revealed like one after the other or stuff like that but usually what I do is like super simple slide so how to actually like use reveal.js to present so within markdown so first it's super simple I link like how to create a slide deck which is like the HackMD documentation for it and basically the most important part is to follow syntax and the most important part in following syntax is to separate the slide you need to have like one empty line three dash and another empty line and that's all and then what I do usually is I use like one or two so h1 or h2 or h3 for detail subcital and subcital and that's all you do as you want sometimes you might need to have like small text so I usually use like html tags so small to or small text or big if you need big but usually I just need like to make things smaller what I do also sometimes if I need like some really small text I use also font I think there is like a font tag that you can specify like the size of the font so that's super simple if you want to include a picture so if it's available online you can like link it as usually as you would link like any picture in markdown you just need like to know the syntax for it or what you can do is is like you can use HackMD directly to upload your picture so if I do there I go like insert image go into my download I can insert like one document and here it is my document should be inserted and here it is I have it in my slide so as you can see it's super easy to upload a file from your computer directly to HackMD and this is the syntax like to have like a picture in markdown in HackMD we can also use font awesome which is what we use a lot in NFCore to have like some I know what is causing that so I will explain that later sorry about that font awesome is resources that allow you to use like simple like simple icon for different stuff so you can have like here for server so but you can have I think there was also GitHub should be like something well more known Facebook should work as well and so and you have like a lot of burn or a lot of different things like cloud globe should work so if you know it like it's super easy to use what we can do but that is like regular like so yes simple let me put back what I did before okay background this is like fairly you like this is super useful like whenever you're doing a presentation you might want to change the background of your presentation so what I usually do there is that I use like this dot slide like command and I specify which is my data and background we can add some opacity if we want but using a data background opacity so I use like here zero five but you can have like more or less so zero eight zero one so you can really play with that let's go back to five an important thing also we can do with reveal.js is export as PDF so this we can do only when we're slide mode so let me show you that to you and here when we're in slide mode if you scroll down we can see some links like we can see that okay I made some change like a few seconds ago I can see that NFCore is owning this node because of course I made this node in the NFCore organization I can edit back the node or I can also print the node so if I print it okay so it's going like to try to print the everything as it is and what we want actually is to print everything as a PDF so I'm printing to file as a PDF and okay and it's printing so I should have my file saved like on my side and basically it's kind of like efficient because you really get like one page per slide I've noticed like from time to time some issue mainly like if you have like pictures like here that are like way too big so from that case I would recommend like to go back and forth in between from like what you have on your screen and what you have like in your PDF and try to scale down your picture or make like have your picture of the next page or stuff like that but apart from that it should work like fairly well most of the issues that can happen like in this case is that because you're not following the proper syntax what we can do more with HackMD you can include your own like CSS slide so your own CSS style so this is what I did here and I'm guessing this is what is causing me like the kind of issues that I had there I just have been trying that out like yesterday and yes yesterday I didn't have this kind of issue so I don't know where it's coming so I will have a more look into that but basically what you're doing is just like saying that okay I want HackMD to include like this CSS this file from like ID and this part is exactly like correspond to like a document there so this is fairly like good and you can also use that to include like a slide deck for example like what I'm doing here in this presentation I'm including the last slide deck and what's in doing if I go like on the page for this slide I can see directly like what is linked here but definitely I can see here this is like my own like review.js style and okay I have like all my style like into like an HTML like tags and all of the CSS that correspond to this slide which could like help you what I really oh sorry what I really like about like doing that is like you can add like your own custom stuff and what I like about doing that is adding like a multi column possibility and that helped me like using like div within like I'm using divs within like a div multicolon to present like different like here I'm just presenting like three lists into like three columns and that's all you could really like do whatever you whatever you want then I have like some more tips when in doubt like if you have like any issue don't hesitate to add like more break line I've noticed that it's something that works a lot in my case because I noticed that reveal.js and I can be like the combination between the two is very very like dependent on the break line and the syntax and it expects you like to follow like the proper syntax and sometimes it's not working very well if something is not working like reload or relaunch if you can you can also like you didn't mark down if you're like if you're thinking that something is not working printing works like much better when you're using Chrome and also following the proper syntax the less HTML the better as well I think the div works well but apart from that I'm not sure I think I noticed some issue with tables and stuff like that so it's something that that you really like need to look for it oh and also what you can do in reveal.js you can set up your username so here in my case my username is maxulis and that leaks me direct me like to myself otherwise if you're not used if you're if you haven't set up like your own username you will have like a like something like that which is more or less like ununderstandable and as I explained you can also link like directly like another slide which is what I did just here so I think I'm good for questions so I can like open everything. Thank you. Now anyone who wants to ask a question can do so I enabled you to unmute yourself are there any questions from the audience I had a question is it possible to add like video files to reveal.js syntax yes definitely reveal.js is basically just like it's just HTML that is presented within.js so you can link youtube stuff I don't do that often because most of the time I'm assuming like a presentation should be like shared easily like in in other settings so I usually don't like like to include videos but you can do that I think I did that like in previous like presentation I think like other people have done that definitely I think if you have a look at all of our presentation on NFCore you will find like some that link videos. Okay thanks. Are there any more questions? I will not include the CSS anymore in the stuff that was like super convenient because you don't need like to have your own style but yes it's or maybe I will try like to figure out what is unreliable. Maybe a question from my side or clarification this is free software right? Yes definitely this is free tool I think like we have something like because we have an organization so we might have something there oh yes we have a team plan I have no idea what it is there like for NFCore but we have a team plan there but if you would want to use it privately or oh yes you can use it privately like I use it privately as well where I have like yes I'm making like my own list of book to read or that I will share with friends so yes you can make your own stuff like exactly I use it like I have like a couple of presentation as well and yes you can have your own workspace and have like everything you can have like private not and public not so yes you can do some stuff perfect thank you and there is also a link from James which explains the difference I guess between free and paid version of HackMD so that's good because yes I had definitely like no idea what is the difference between the two of them okay cool thank you very much are there any more questions it doesn't seem so then I would like to thank Maxime again for the nice talk today and all of you for listening and of course as usual the John Zuckerberg initiative for funding our Bitesize talks thank you very much thank you