Garrick Aden-Buie- Making Extra Great Slides with xaringan, xaringanthemer and xaringanExtra

hello everybody i know people are coming in everyone welcome to the march meetup hope everyone's having a great march we're 10 days into march um coming up on a year on the uh u.s side of the pandemic hope everyone's doing well and it's healthy and is um getting excited for their vaccines and otherwise just making the most of their time to get a lot of use of r or any other type of data science or whatever else you have to do in life i know lots of people getting pulled many directions hope everyone's doing well and hopefully this meetup is a nice respite you gotta come and have some you know good our fun uh so we're gonna get started in just a few moments we'll do our normal announcements we'll have our speaker and i wish we could all go to the bar afterwards but i know that um hopefully soon uh things are looking good in this country hopefully hopefully the end of the year hopefully even before around the fall we'll be able to meet in person both for the meetup and for the conferences um maybe some workshops along the way uh we'll see how the year goes but it'll be great to see everybody again and so everyone knows once we do go back to uh in-person meetups uh we will do our best to live stream it in this hybrid format so people around the world usually we tried doing this a few years ago but the audio never worked out i think now after a year of doing remote stuff we hopefully figured out the audio and we'll be able to live stream right when it's happening in the future and of course you'll be able to see the recordings later but the more people we could have joined from around the world during the live sessions the better so i'll get started just a few announcements jobs if anyone's looking to hire we obviously can't shout out jobs in this format but you can go to the ny hacker slack and go to the job posting channel and post a job there over the past roughly 12 years i probably should have kept count of how many people have gotten jobs through this meetup but it's actually kind of impossible it's like it's not just through my announcements people meet each other and they get jobs i'm sure we i know for a fact we've gotten numerous people's jobs i want to say 100 on my watch that i've paid attention to probably more that you know just happens without me noticing so if you have a job you're looking to hire go to the job postings channel and announce it if you're looking to get a job go to the job postings channel and look for jobs it's as easy as that you'll find some good people um i know we can't do pizza together anymore we have the pizza paul we haven't updated the pizza pool in a year that's really hurting me we haven't gotten new data in a year so tonight my pizza comes from joe's pizza i hope everyone has some good pizza you're going to be eating i hope it's a delicious wherever you're from i see we have some people in dublin in india and france in seattle hopefully you all folks got good pizza wherever you are i know it's not new york pizza but we'll do good ah we have some new yorkers there uh thoughts on osmeg thoughts on de fara i love dufar it could be hit or miss let me say when it's miss it's good pizza when it's hit it's life-changing pizza so um i recommend it it's worth the wait i never had to wait more than like 45 minutes and then sometimes i walk up and get my slices in five minutes so it all depends on where you go we have someone from chile someone asked for shiny up for the pizza pool the data is freely available if you go to jaredlander.com data pizzapolldata.php go to generalander.com search for pizza you'll find there's a live feed of the pizza pool data so please make a shiny up of it it was the subject of a tidy tuesday i want to say last year at some point so grab that date it's on gerrylander.com data and have at it we have some people from london we have uh people all over the place 1am is too late for 1 a.m is not too late for pizza that's like prime pizza hours so i highly recommend 1am getting pizza that that works for me but people from canada with people all over the place all right i love this it's good to see everybody uh garrett people are loving your t-shirt the r studio kong t-shirt those are always a classic yep all right cool northbridge california boston no pizza night but you could go there's um in the north end i know the north end can be touristy but pizzeria regina the north van is actually quite legit and i do enjoy that place all right so chicago hope you're having some casserole to it for tonight all right we have some pizza and beer for somebody australia so australian pizza it's a thick nice doughy thing lots of toppings all right we're getting carried away and pizza i'll keep going but anyway if you have good pizza shout out to me let me know what you're eating let me enjoy it oh asme best pizza's in new haven are you asking for the best place in new haven you're saying the best is in new haven so i tell you my favorites in new haven but i'm not going to tell us the best in the country all right we're getting carried away with pizza as me and i can duke that out on twitter if we need to all right so since we can't be your person i'm loving the chat here in this window keep it up here in this window if you want to chat we also have the slack channel the slack channel for chatting about meetups is called monthly meetup chat i will put them here declaring you and i can have a little bit of a throw down after the whole bagel incident too as many said the best bagels are montreal they're good bagels montreal but they're not new york bagels so if people want to chat about the meetup or about pizza about anything go to the monthly meetup chat channel in slack you can ask and you can hang out and then you can throw shade at each other all you want um four questions since obviously we can't have a question answer session like we normally do ask your questions in that meetup channel i just pointed out or here in the chat window either one i will collate them and i will ask the questions at the end and hopefully we'll have some really good questions for garrick to show him a good time here so again if you have questions put it here in the zoom chat put it in the slack chat and i will collate them and put them all together the video for this event will be posted in a few days where all the videos are there at nyhakr.org i'll put that in here nyhakaar.org presentations dot we desperately need to redo this website i designed it years ago before blog down existed so it is markdown it's written unmarked on a multi-page markdown site but pre blog down and i designed it so it is open source it's on github at github.com if you want if you want to make a change make a change make it better we are currently working redesigning it but you know it takes us time so if you have something better let us know we are happy to have someone redesign that because i designed it and it's just not pretty next month may um we have an exact date i don't know the exact date i want to say may 17th no sorry april oh my god it's april we have two months planned april i don't have the exact date um but middle of april we have klaus wilkie and i hope i'm pronouncing his last both names correctly talking about using rust from r i'm super excited about that that's gonna be really cool um this is like sort of rcpp but for rust so it's the new modern compiled language last month we had andy grove talking about ballista which is written in rust and it just so happens that we have this nice rust thing going on next month would be klaus talking about rust and r so that will be really a lot of fun may will be james lamb talking about light gbm for those of you that don't know light gbm is a boosted tree algorithm it is a competitor of xgboost and of cat boost um it's really exciting depending on whose benchmarks you look at it's faster or more accurate but again benchmarks are benchmarks uh sabi and may and nice thing about light gbm it also works on the gpu so that's really cool um so does xg boost and cap boost um they all work on the gpu so that's uh it's a really nice touch to be able to do that and even with tidy models max and and julia's and davis's package and i know there are other contributors that can work on the gpu too it's really really cool so april we have klaus may we have james all right i saw someone asked about videos all the videos get posted to my hacker.org speaking of needing a new website there's a bug on that website that in order to see the link to the videos you need to zoom out them back in so that's not awesome so someone please help me do a pull request in the meantime if you can't use this poorly built website go just google youtube lander analytics we post all the videos up there that might be easier for you the meetup videos are there as are all the conference videos you have six years of nyr three years of rdc and rgov lots of videos up there and about eight years worth of ny hacker tons of videos really good source all right with all of that i think i covered everything we have pizza we have jobs we have the next meetups we have the chat windows we have questions then we have everything so with that i am very excited to bring in our speaker many people here have been using markdown for different ways for presentations i've been going through a whole source of different formats and presentations whether that was i o slides or city slidify or i think remark or one of the other ones i forget what it is even at this point i've gone through so many but now we have sharingan and that seems to be stolen all the hearts of all the people who are using it now and we have someone who's contributed so much to the sharing and ecosystem please everyone give a warm virtual welcome to garrick and i'll clap for everybody since they can't be clapping for you oh thank you very much all right should i dive in yes please do all right so i share my slides um well first of all it's wonderful to be here thank you so much jared and the new york open statistical programming meetup for having me um it's a it's a pleasure to get to talk about something that i really really really love which is making great slides making extra great slides with sharingan um so this is an actual sharingan presentation by the way so about a little bit about me uh my name is garrick aiden bowie um you can find me online at twitter at gerk or online at garrickettenbowie.com and um i work for our studios education team i primarily work on packages called greatness and learnr which help teach are using our markdown and interactive tutorials uh in my spare time i do a lot of work uh tinkering with sharingan slides and building extras and little things for them and also i have a couple other packages that i work on that you might be interested in or i've heard of like uh themes for our studio um uh an add-in for our studio that helps you work with regular expressions and an app that helps you extend uh our studio called shortcuts so definitely you know check those out if you want if you use our studio so um i have i have the material online for all of this you can try it yourself again later um i'm going to copy this link and put it into the chat but i'm also going to do a lot of sort of live coding today so the idea here is like maybe you can go back to this and reference it later and you don't have you can just sort of pay attention and and you know watch what i'm doing but also if you if you want to have like a whole environment that's ready to go that has all of the art studio stuff that you need i built a little docker container and um and you could use that to just get started and drop it into an environment if docker's your thing or if you like docker um so let's talk about sharingan so i realized like i want to talk about some cool things i built for sharing and i think first maybe we should just talk about what sharingan is right so let's have a little bit of a crash course first of all sharingan which is pronounced sharon again sharon gan sharingan sharon jen i i don't totally know i have settled on sharingan um and it's okay i think everyone has a slightly different way of pronouncing it i'm also kind of like so so sharing comes from uh there's uh uh okay i don't wanna offend anybody i it's a cartoon it has an anime thing that i i have barely any awareness of um but like a lot of the things in the sharingan package are like um call backs to this show that involves sharing good so uh so that's that's a little backstory but at the same time um everybody has no idea so it's totally fine just just uh lean into however you've been pronouncing it so how do you get sharingan the first you basically just install it from crayon like any other art package installed that packages sharing good cool and now you have the power of sharing again to make slides so i think the the one thing that sharing does slightly different than basically any other kind of um our markdown um the the one way that schengen kind of like doesn't quite fit in with the the rest of the our markdown ecosystem is sort of the pathway that it follows so a typical our markdown document that you're trying to convert into html starts as our markdown uses the knitter package to turn it into markdown and then pandock under behind the scenes will turn that mark down into html and all of this is sort of like controlled by the r markdown package that all just sort of happens for you sharingan does something slightly different and it cuts out pandock and instead basically you take your slides it turns into our markdown and then um they become an html web page but there's like the final step of going from markdown to html happens actually in your in the browser and this has a slight implication that sometimes certain things that you would do in a regular r markdown just don't work or there are extra things that are added in sharingan that also don't work in regular are markdown when you're using pandoc so i just want to say this like up front like there is when you're learning sharingan you are going to end up learning a little bit of a different syntax and we're going to talk about that today too so the first thing is uh is basically let's talk about what a slide what a presentation would look like with sharingan um so i have an rstudio window open over here hopefully this font and colors and sizes are okay for everybody to see this during the presentation if not just give me a bump it up or something like that in the chat um so here we have uh we have some slides this this yaml header looks pretty familiar it looks a little bit like the yaml header that you would have for a regular markdown document it has a title subtitle author institute date and then we have this output and this output format is specific to sharing and that's what actually makes the the html file that turns into your slides okay so and then in here you're going to write you're going to write things that become that become slides and i'm going to switch back to the slides to talk about that part so how do you make an actual slide one slide just one slide the first thing is you're going to have um three dashes just three dashes no more than three dashes that's it just three dashes three dashes on a line that makes a new slide that's how you define a slide break right there's some so this sort of looks like yaml again but this is a like slide specific information or sort of metadata like this changes how the slide looks um this changes how the slide looks or the settings of the slide then you have some slide content so some stuff that you're going to put in this slide and this is written in our markdown and then you can also have sort of continuation so a really common thing that you would do is have uh like show part of a slide and then like sort of pause and then fill in the next point of the list in the next point of the list and to do that you're gonna use two dashes only two dashes on a line and that creates a sort of small pause um and here's here's a slide so i'm going to switch back again to our studio and show you what this looks like how you would actually write this out because it's pretty interesting so sharingan comes with a cool r studio add-in i have this uh this file by the way is demo intro and um if i go to so i'm going to save it because i somehow changed it but if i go to add-ins and i'm going to type sharingan and there's an add-in called infinite moon reader so what this add-in will do is it will render your slides so first of all it renders your slides and then the second thing that it does is it will in real time update your slides while you were typing okay so let's try this out i'm going to recreate that slide that i've had before so i'm going to say knock knock right and then maybe i'll add another who's there and you can see that down here in the preview my slides are updating in real time so this is what makes kind of developing your slides with sharingan really fun and kind of exciting if i make a new slide um so if i make a new slide and i say hello over here you can see my slide stopped updating and that's because i have a new slide now so to sync everything up i have to actually save this file and when i do there's a small render step and now i can jump around you can even like move your cursor between slides and jump between those slides i can also add i'll do two dashes here to add a slide pause and say banana and i get something like this so you can kind of see what you're doing as you're going just keeping in mind that every time you add a new slide or a pause then you're gonna have to save your file so that you get a full re-render um okay so let's talk about some of the things that would go into the um into the slide properties so first of all you can you can have a class uh sort of key that you would put so this class is named because it's actually like the html class that the slide will get so later on when if you start messing with sharing and slides you start writing css you you know you can that that's the link is that you're going to write a class that covers your slide so um but there are some that sharing comes with uh sort of built in and that you can use right away so uh the first the the most sort of important ones are about position of the text in the slide so you can you can choose if you're so the default is to have left and that would be the kind of basics whenever you change the slide properties you have to save and do a full re-render again so you can have your your text on the left i can move my text to the right or i can put it in the center i can also choose whether or not it's going to be at the top which it already is i can put it in the middle and i'm saving and then i could put it at the bottom so if you want your text to be in a certain position let's say actually for this i'll actually put it in the middle and the order doesn't matter um middle right and you i think you can even put commas in here and it will still be fine you get the same answer so um so these so top middle or sorry yeah top middle bottom and left center right these are the ways you control the position of all of the text on the slide so everything that you add you know if i go to the next um this continuation you can see the banana is also on the middle right of the slide so that's pretty cool we've we've got we've moved our text around the next thing is you can choose a background for your slide so let's say the first thing we'll cover is background image so to use background image um you actually just type background dash image and i'm gonna say url and um i have a file here called banana.jpg and just once i save this and there's a re-render and now um now i have a background with a banana it's hard to tell though because uh like there's a little shadow right here like i know that there's my my thing changed and by the way let me show you in the files where this is all located so um inside of my project this file here is inside of demo and then inside of demo i've got banana and then i have this file demo intro so my slides are right next to to this file that i'm this image that i'm putting in here um this is another thing about sharingan is you can't necessarily have your files like all over the place like i can reference files that are relative to the current that are in the directory of the current slides but i can't go find a random file from somewhere else on my computer so you kind of have to organize everything into one folder which is probably a good idea anyway right okay so let's switch back and come back here to to our slide another property that we can use is background size so this is going to control how big the background is i'll say background size and uh i don't know 160 pixels by uh 160 pixels we'll just try that i don't know there we go we have a little tiny banana now um so this is like i always forget which one this is if this is like uh width let's find out i'll make this uh 400 so that's the width and this is the height but really just play with it until you get the right size i mean that's one way of doing this i could also go look and figure out how big my image is and kind of get the the sizing right but maybe 400 by 600 gives me close enough yeah my my bananas don't look so great but what if i want to have it be like the whole background of the slide um there are two options here contain is one of them so my slide will contain the image so it basically makes the image as big as possible until it's like out of the slide then um then it stops so my image is now as big as the background images as big as a slide or i can choose cover and now i am covering the entire slide and if you're familiar with css you'll notice these are actually this is a css property and the values that i'm choosing here are css property values so um you can you can actually go to mdn for example uh mozilla web docs i love this page for learning things about css and i could type in background image or we could try background size and you can click on this and you can see here these are these are the options that you could use um and you're in in this background size business right um and the last part then is also background position which is also a css property right so i can choose exactly how the the image is positioned and let's say i kind of figure out 400 pixels by 800 pixels this is a great way to get an image in like just the right spot that is nowhere close to the right let's try 500 um that's maybe a little bit better i need a i need wider is my problem 800x500 there we go okay this will work and now i can try background position and here you can again use things like top top left and my background will move up to the top corner or bottom right and you can see these actually kind of feel a little bit like the same classes that we were learning about before in terms of moving the text around but but very often honestly i just do contain i mean cover sorry i do cover to make sure the whole slide is covered and uh and that's usually a pretty a pretty great way to go um and and those are those are pretty much the uh the great images that you can use for um i definitely want to recommend this website which is where i got this image is called unsplash so unsplash has a lot of awesome images that you could use i think if i search for banana you know you'll eventually find something that looks very bananay and let's um pick out so let me show you a little trick here uh if you copy this you go to unsplash you find yourself an id or photo you like you're going to copy that this little id here at the end and then in this url i'm going to say https source unsplash.com and i'll put and then at the very end i'll put this id and when i say that um maybe it works usually it works it doesn't it's not working right now is it um i have an extra there is an extra t yes thank you and now it'll work like sometimes you have to actually go to the thing [Music] this is the fun part about live coding is that uh this always happens okay we're gonna move on there's there's a little trick there though that you can um get yourself i think maybe if i just go to source.com man i use this all the time i'm not sure why this is not happening right now but we're gonna we're gonna back oh there it is so we're gonna back out of this okay anyway try that at home and see if you can get it to work and then uh tweet me about how you figured it out uh and i'll go back to mybanana.jpeg stick with the files that are right here on my computer uh very cool all right so that's kind of the anatomy of a slide this is basically how you build up a slide except we need to learn a little bit more about what goes uh inside i'm going to skip that layout part but um but these continuations are nice because you can build up something that you want to talk about and show it off just one little bit at a time so let's talk about the con the what you're actually going to type inside the slide it's markdown um and it's pretty much like regular our markdown or markdown that you're used to if you've been using r so uh this is a real quick little demo um markdown is awesome because it lets you you get to like html stuff that looks great it's nicely um it's nicely formatted and then on the other hand you can actually just sort of type it out in a way that like makes sense if you're reading the actual uh the actual code but you don't have to like go through the whole process of like remembering which tag it is that makes something you know inline code or emphasized or or bold you know that kind of stuff um and also you can have it be rendered out into like a whole bunch of different formats so in this case uh we have this this sentence here the fuzzy bunny ran the fufu function and promptly disappeared fuzzies italics we have fuzzy here in italics because we put underscores around it we have fufu looks like code on this side and the output because we put it and we put backticks around it and then disappeared looks bold over here because we wrapped it in asterisks on either side so you can also make lists so you can write a list like this in your markdown you just put a dash and a thing and then you put a new line and make yourself a list which can also be numbered and the really fun part is you don't even have to count our markdown will let you your markdown will let you just put one and as long as it's a number you'll get you get a nice numbered list you can if you add by the way if you add little spaces between those lists you can end up with a list that has a little bit more room to breathe so if you um need to make your audience squint or want them to uh lean forward to see what you've written you can use this compact version or or you can spread everything out and let it breathe a little bit um you can make links links are great a great way to send people to go do other things and what's actually really nice in sharingan it will actually uh open the link in a new window for you so that your slides stay right here and a link to make a link you put the part that you want to be clickable goes inside of to square brackets like uh like that inside of two square brackets and then the link where you're going to end up goes uh inside of um parentheses after the square brackets um also i end up using like html things in um in markdown a lot so this this is like a very cryptic way of saying this is cool um okay you can also add images images basically are just like links except they link to an image and there's one little bit other other bit that you have to put uh uh an exclamation point in front of it so you say exclamation point square brackets and then the image that you want to go to um and you get to like put gifs gifs are great they're they are they work really well for your slides uh just don't leave them up for too long so that everyone's like okay we've seen this and now we're distracted by it and i can't stop watching this kid run into the wall this is uh definitely me okay so that was like super fast way of going through our markdown if you want uh to um if you want to learn our markdown in like 15 minutes this tutorial is amazing common mark.org help slash tutorial so i will copy that link and share it and um and i think probably people are starting to notice that there's some extra little bits going on in my slides right now um like those little arrows so we are going to get to that and we'll talk about how you can get those things in your slides too there's one more really big concept to learn about sharingan and that is uh the extra little bit that sharing it adds or that remark ads so technically remark is the library behind the scenes that does all of the take your mark down and turn it into actual html slides so there's one little bit that we have to learn about and um and that is how you make things like this so uh when you first start using sharing it feels a little bit like magic you don't really know where they came from but you just learn these sort of incantations and you figure out what to do so right now i have content on the left side of my slide and i have an image on the right side okay pretty cool let me show you how we did this so remark and sharing again give you this kind of syntax you say dot and then you follow it by some words in this case the the special words are pull dash left and then an open bracket so this has a sort of marked downy feel right but then this is the content and it it's also marked down that gets turned into like pretty html um but you you write our markdown or yeah mark down inside of these brackets and um and then there's also this other one pull right and if you put square brackets around something here's an image to the the book cover and i'll switch back and this is how you end up with uh with content on the right pulled to the sorry pulled to the left and then pulled to the right um and that's something that comes with remark by by default it's just you you get it and you get to use it right away um or be confused by it right away so like you can uh behind the scenes what happens is all of so your your our markdown gets turned into uh html so like you have paragraphs and here's this list that i created but around all of that by putting the dot um the dot bracket and then around the whole this whole chunk of content this whole chunk of content i have um i now have a div or so like an html container that is has the class pull left so this pull left basically just wraps everything inside of it in a container instead of a div called pull left and um and then pull right does the same thing and then the browser is the part where it gets laid out and put next to each other this is what i really like about sharingan and remark is that there's definitely a bit of a learning curve you're going to start end up you're going to like learn css and html a little bit but on the other hand um sharingan writes like very nice and clean html that is pretty easy to use and pretty easy to customize so it actually makes it kind of fun and you're not like hopefully you're not like super fighting your tools the whole the whole time so there's another way that you can do this so i just showed you a way that makes a whole block but there's a way that you can make just one little word or one section of words special and um so you might end up listening like this like this word is purple i mean the word is purple not the word purple is purple but the word is purple so you can make that word purple by putting dot purple square brackets around word so this is like literally what you would write in your in your slides and um i mean you could have written this by the way so it actually turns into like span around the word and turns into actual html um but but it's nice to be able to just write uh dark purple and then the thing so let's uh let's jump back to our our slides i'm going to let's see i'm going to stop my the last one i'm gonna start a new so i'm gonna do have you guys seen this the new command palette in our studio so i'm gonna actually type infinite moon reader and start up a new one here um and i'm gonna actually let's see i'm gonna type out okay so i'm gonna start with the this thing the tail of the flopsy bunnies all right so here we have the taylor's lapsy bunnies i'm going to give this a special i'm going to put this in a special container called title so now the tale of flopsy bunnies is in a special container called title and i'm going to create i'm going to put this in a special container purple which looks a lot like what we were doing before okay now nothing has changed right uh so what we need to do is we actually need to write some css at this point to to make this customized the way that we want it and um and this is like i think this is one of the coolest things you can do with uh with sharingan and that kind of makes it sort of fun so i can actually write a little bit of html so when you're writing um when you're writing css styles they go inside of style tags and and then i can actually put some css in here so i can do something like say title.title so this dot title is going to match this.title and i'll put braces open braces and then and then you get to pick css properties that you want to change so for example font size i can make it um let's see i'll use these units in css called m's and it's basically like one uh 100 and then two m's is like 200 percent and 3m is like 300 so let's see this in action so 2ms is 200 3ms is 300 for so if you write it like this where you put it inside of style tags you can actually update the um the css live and um and you can see what is going on with your styles as you're writing them cool so i can also say font style italic for example now i have an italic title and what if i want so i want to color purple so i'll do this again right i make a dot purple this is going to court this dot purple you know matches this dot purple and now i'm just going to color this pink uh no not pink um orange or red maybe make this 6m okay we'll make it actually purple so that our brains don't explode so there we go um okay so this is pretty cool uh that was kind of fun this is a good way to sort of practice your css in your html and kind of figure out um you know what you're doing uh with those but you probably don't want to be writing like you so realistically you probably don't want to be writing a whole ton of css and html kind of stuff um you probably what you want to do is like just pick a few colors make those colors the colors of your slide and um and then just move on with your life right so i'm very excited to share with you that uh i have a package for you to do just this it's called sharingan beimer sharingan themer and um you can also pronounce that however you want um and you get it by it's it's on crayons you can install it from crayon um and basically you're just going to take this little chunk and drop it into your uh your slides r d and you can um and then you have to do one little update to your yaml front matter but like hang on that's only if you already have slides that exist but you can actually start from um you can actually start from scratch so i'm going to do under here our markdown some new file our markdown i'm going to go from template and scroll through this list here and i'll find my so it's hard to see that but i'm selecting ninja themed presentation click ok and now you have a brand new slide presentation ready to go so maybe before we do that let me just show you real quick so the default for all of these things slide z play um so here's the default presentation style which looks fine it looks great it's a good starting point um it's okay there's carl there he is again okay so we get a feel for what what it looks like right um so when you open up the new themed ninja presentation i'm gonna clean this up and we're gonna just run i'm gonna knit this but i'm gonna actually need to [Music] make a new file name um let's see here and when it runs i end up in just a second this one takes a little bit longer for one reason okay so i end up with let me show you the part so i end up with a new presentation and uh it looks considerably different uh it's i've picked different uh fonts for the headers and for the the body text and um this this slide deck is actually designed to help you like pick out your colors pretty quickly and kind of walk through you know a bunch of different things that you would normally put into slides and would see so let's um let's just show you how easy this is i'm gonna go to coolers coolers so there's this um i love this page so i'm just going to click on generate up here we'll make ourselves a brand new palette let's i don't need to be walked through the whole thing okay so i'm going to pick this color i don't know no i don't like it hit space bar let's find some new colors that look somewhere something random okay so i like this blue i'm gonna copy this and i'll come over here and make that my primary color so there are a whole bunch of different styles that you can use you can just start typing once you've run library sharing and themer you can just do style and um which i need to actually run that real quick and then you can do style and see all of the different styles you can use but i'm gonna use this one called duo accent and i'm going to drop that style right here let me pick a secondary color this congo pink looks good and i'll make that my secondary color and okay so let's uh re-knit this and i will have in just a second a brand new uh presentation with totally different colors so yeah okay there's our secondary color it was a little bit of a different blue or primary colors a little bit different blue here's our the pink that we chose let's actually like flip this around just secondary and um primary just one more time but this is a really great way that you can kind of like get a whole uh a whole sharingan theme all at once and uh and kind of start from somewhere great right one more thing i wanted to show you over here is it also will automatically find so here's a gigi plot and this package also gives you um a theme for ggplot that will find what you have in your um you know the styles that you're using for your slides and give you a plot that matches exactly so it matches the fonts and things like that um and the colors of the the headers and things there's a lot more this package can do we don't have enough time to get into all of it but i highly recommend that you uh check this out um it it's a lot more fun than writing css if you're you know just starting out but i actually really like reading css so i know that i'm a little bit of a weirdo on that so let's um let's jump ahead again so here we go here's the next little bit how do you get these like extra cool fun things into your sharingan slides so a lot longest time ago i started with making this um this little add-in that was supposed to help teachers it's a little tiny uh countdown timer and so like you put this up and say okay everybody you've got three minutes to go work on this thing and then eventually it uh it counts down and keeps everybody on track and i had a lot of fun building this and then i started to realize like hey there's like really cool things you can do with uh sharingan slides and uh and it just sort of snowballed from there so to get sharingan extra this package doesn't exist on crayon it's on um it's on github so you have to use uh install github to get it it's at um g aiden bui and get extra and the basic idea is there's there's sort of a kitchen sink you sharing an extra and then you get like a curated list of the stuff that you probably want for everything um or you can individually piecewise pick out the add-ins and extras that you want and uh and then you just make money um profit so let me show you these really quick uh we'll just walk through them really quick hopefully the documentation can guide you through how to actually get them into your into your slides so the first one is tile view or overview so this one when you add it to your slides and press o it gives you an overview of all of your slides this is super helpful when you're writing it's super helpful when you're talking and you realize like hey i'm gonna jump ahead a little bit you can look uh look around and see okay this is the one i want right it's a tile view next is editable so i'm actually open this up editable is a really fun way if you're like teaching live this is good if you're talking to a class or doing or brainstorming this is another great thing so it actually gives you it makes sections of your slide editable now like the editing like lives in the browser and it will stay there if i come back to this slide but it won't like show up for somebody else and um and you can also there's a way you can clear it so you can actually like check this out things that i like pizza and things i don't like when my favorite pizza places clothes that's a very very sad face but for that one right awesome so editable is really cool um next up panel set panel set is a really fun way of getting more into your slides so people you like we end up using this a lot for things where you have some r code maybe this r code creates a plot i don't want to like create a whole second slide for this like you could you could skip over this if you wanted to but like we could also just sit here and focus on it and maybe i want to switch back and forth between the two so it gives you a way to do that so these are like it's sort of like tabs in um or the tab set and regular our markdown and in fact panel set actually does work in um in general our markdown and uh and you can actually use it in places like blog down and other things where uh tab set isn't already there um oh wait also one really cool thing about this is if it's inside of a sharingan slide it hijacks the left and the right arrow so if you come into a slide with panel set when you press the right arrow it will walk through the panels instead of the slides so you can use that as a way to go through the the slides and then it almost feels like they're just like extra slides for free like how cool is this okay sharingan share again for sharing good so you'll occasionally want to share your sharing in slides and um and this gives you a way to on the one hand there's a function that helps you embed the slide somewhere in an iframe so put this on your website for example and on the other hand you include it in your slide deck and then you end up it gives you this little bar which only shows up if the slide deck is embedded in another page and um this gives you a way to walk through slides um going like forward and backwards there's sharing control so you can um click this little button and then people can share it on you know reddit or something i don't know um but uh but this kind of makes cause if you just encounter a random iframe with slides it could be hard to tell like what am i supposed to do with this am i supposed to click it i don't know so that's neat here's another one search i just added this last week maybe the week before but it gives you away you press uh control f and you can see this opened up the search bar down here and i can type things and as you type them it searches your slides for those things that you are typing and maybe i look for a document and it kind of moves through the slides so to get this into your slides you just have to use this little function you drop that into your slides pretty cool um and then this this one i just added this week uh with some really big help from um matt or kenton who did a lot of work on this to make this happen but you can actually draw on your slides now too so this is called scribble you click this little button and you can draw on your slides so and then this those drawings stay there when you come back to them later um well at least just while you have the slides open um and then let me show you so you can also uh webcam is another one you get your webcam into your slides for the just one last thing to show you there are some extra things that help you build slides so there's a uh there's an extension called tachyons and that brings in tachyons which is like a whole collection of these utility classes and um if you have tachyons in your um if you have tachyons it makes it easy to sort of like you don't have to write a bunch of css you can just sort of like compose things of course you have this like really weird thing that you have to learn so um it has this like kind of syntax where for like width 50 you would just use a class of w50 and um and then now i have i made that like width of 50 maybe i'll make it with 70 and i can make it gray by typing mid dot mid gray and i can make it like avenir font by typing dot avenir and i can make it let's see a little bit bigger and a little bit more spread out and i'll make it a little bit bigger and i'll put a little padding on the right and then um i know i have this little bit down here that i want to move around so i'll do like that like width of 30. sounds good right i'll move this up and what if i wanted this to be absolutely positioned on the right bottom there we go and i want to make this part i'm going to put that on the right there we go i'll put that the text to the right i'll make it italic and gray and uh and now i've just thrown together a pretty cool slide that looks almost perfect except i want this to be bold and maybe i want it to be also uh blue so that there we go this is a perfect slide so um i i have a whole bunch of resources and things and links inside of my slides and inside of the that webpage that i shared and um and would be happy you know to interact with anyone on twitter or talk to anyone about all of this and thank you for letting me show you far too many things in such a short period of time thank you very much i think that was a awesome fast tour de force um i will give you a virtual clap cause i know other people here i'm sure they're applauding based on what they're saying here um let's see yeah there's a lot of great a lot of great questions a lot of people just saying awesome wow so uh thank you uh very much about that uh please thank you audience for liking such but thank you garrick for that amazing presentation thank you so i'm gonna dive into the questions do you have more to show or is that everything you had no there's more there's so much more it's a little bit ridiculous yeah so the um sharing an extra page has a whole list here are all of the extensions that i've added um i i just made one today while putting those those slides together so uh there's always new stuff coming in here that's great i know i've used made good use of your packages um when i made this question sharing i'm gonna uh my second time at switzerland i use a lot of your uh your packages so let me dive into all these questions we have um so there's a lot coming at you um so the first one is let me just move this over here is there something that we can edit in the slide class area that'll modify the size of the code in the slides like make it smaller i think you did answer this question do your things but i'll let you have at it yeah definitely um okay so we might as well let me make something really quick so like sometimes you have r code right and uh quick what's your favorite function that does something but not too much lr unit okay all right so here i've got uh okay got this so this is a i'm glad you asked because i love showing this off so don't look at your slides in the viewer click the show a new window and now you have it open in your browser and now you can click inspect element so i right clicked on that little thing and i'm going to make this so that it's easier to see okay so i right clicked on this code here and i clicked inspect element and it automatically pops up right here so you can start to see this is like the css that's been applied and this remark code line i can try here something random like font size uh 1.5 and you can see you can mess with the font size right there and this is a great way to tinker and eventually you would go okay i need to put this somewhere so i'm going to copy this rule i'm going to go back to my slides i'm going to make a css chunk so i'm going to do three back ticks instead of saying r i'll say css and i don't want to see it so i'll say echo equals false and i'm just going to paste that thing right there and um and hit save and um and uh well i mean it should have i don't know why it didn't update but that generally works so i'm gonna i'm gonna follow that one up can you do that just for one slide yeah no and yes so you can't do it for just one slide um by what i just did you have to do a little bit of extra work so make big uh code so i'm going to make it i'm going to give my slide a particular class like big code i don't like this make when i say actually just big code right and then big code class so the big code class and then anywhere underneath the big code class remark code line i'll save this and it's because i have it open over here but now if i come in here and click inspect element again you can see this rule is now being applied so you could do that so basically you do that first slide by creating a class for the slide and then having it sort of inherit from that great all right thank you then we will continue on our journey of questions um can you source other code files in a sharing presentation yes yeah absolutely so it's still it's still r there's still our markdown so you can do all that kind of stuff um yeah absolutely and some of these are gonna be random i'll try to punch them together as much as i can in a thematic way with something random um why are you running our studio server locally i'm running it locally so that i can show you our studio and switch between my browser and i don't have to like open a whole new um zoom sharing business i always get lost when i happen so plus i made a little docker container that just has this and nothing else so i know what i'm showing you works at least right now it was a good thing to have docker going yeah um does let me make sure we get this right can markdown translate does remark js translate markdown image of side def sizes can you specify that it definitely the size of us of an image in a slide yes ish i'm not sure you know what i end up doing is i do something like this like i put a container around the image or you know you eventually and when you're using our markdown or sharingan you'll eventually want to do something like actually use an image and say jpeg and um actually use an image tag where you can put classes and say width equals 50 a little bit easier um yeah but i don't know it it that's probably one of the that feels like a pandock thing yeah and pandoc doesn't let you do it typically but i often use um i make a chunk and then use knitter include graphics and that gives you a lot of control yeah i don't know if that works either yeah that's one of those things that um might just not quite work out all right let's always wait to experiment um all right let me go back to the top here um all right i'm missing hold on and i've lost a whole bunch of the questions that's okay because i have a lot and i'll fix it um when you're showing sharingan theme is there a way to set the default ggplot theme to use that theme uh yes um but but it's really just a a ggplot way of doing that so i think it's set theme and then you give it the sharingan themer theme yeah so it's kind of the sort of normal way that you would set that so there's a whole section on the flat two themes on the package website and um and somewhere here it is a little bit interesting because you do need to use the show text package um and at some point so i wrote this and then like maybe a couple weeks later uh thematic hit the streets and um and i was like oh man why did i spend so much time doing this um and at some point i'm gonna rewrite all this to use thematic because thematic is just amazing can you tell me a little bit about them not everyone here is going to know about that i know it's came out it's styled i'll let people know yeah so thematic is kind of a nice way that you can make gg plot themes so it does this kind of thing where um in this case i picked up you know i made a i made a plot that picks up what your what styles you're using in your sharingan slides but um thematic does that for basically any kind of our markdown document or for uh any basically any shiny app too so um or even you can even use it for picking up your styles that you use in for your theme in r studio and and then get a really nice gigi plot that looks awesome uses the same fonts uses the same colors matches perfectly and it takes like one line which also is the same thing theme sharingan does but um theme sharing game is basically just in sharing slides all right so we're going to have who wrote thematic we're going to have a talk about it yes yeah person's awesome carson sievert is uh reading that one all right carson's gonna have to give a talk here then all right we'll make that happen all right uh question how do you continue a list number from the previous slide you had like numbers i guess one two three four how do you have five on the next slide i think if you start the it should work if you start the list with that with the number that you want to start with that's the one it picks up so the first one matters the rest of them just need to be numbers so there's no way to automatically go from like four to five you need to know what ends up for yeah yeah yeah at some point you gotta do a little bit of bookkeeping all right uh let's see um this is technically a question what is this witchcraft i don't know [Music] speaking of lists um how do you customize a sub list like you want the sublist item to be alphabetical or roman yeah that one feels like very uh remark i guess maybe one thing i would say sometimes you just sort of have like when you're using markdown sometimes you have to let go of some of those very particular things that you want and um but you can always fall back to html you could do letters for sure um and your sub let's do a just start a aaa for all of them i'll make it a b c d um yeah i think so yeah and i think it should do eyes like eyes and i i i i b v i i think it does that yeah yeah um someone asked them based on what you said i'm gonna guess the answer can you make your code highlighting pink can you make okay so code highlighting is handled through sharingan uh let me see if i have a so there's inside of your sharingan moonreader has a highlight style and there's so this uses highlight.js it's a little bit tricky to figure out where all this stuff comes from but there's an option here and that you can set and you can pick a whole bunch of different themes and um this might be a good time to show the there's a whole wiki page for sharingan that like helps you figure some of these things out that are more sharing and related and then there's a whole remark wiki page for the remark library behind this somewhere in here um syntax highlighting and there's this highlight language but at some point i just go to highlight highlight js highlight js.org and you can pick all of these from the usage uh i forgot somewhere in here there's a demo where you can try all the different themes there it is so you can pick out from all of these and um it is not the easiest thing because you have to kind of guess what what the name is that you're gonna like plug into the other thing but um like i don't know like and then you just change that here like grayscale yeah otherwise you have to kind of write your own styles when you change something in yaml with a live the live slides update you have to actually rebuild them if you change something that high level yeah you have to click save and then it will re-render yeah for like any of the basically it's all the little stuff like when you're writing inside the slide that all will all kind of update live also if you're there's like a certain range of things you can do where it updates and then there's a point where it's like i can't i can't quite figure this out just save and then it re-renders and then boom you got um you got your new slides and um definitely the part where you're switching between slides live um i think if i like in this case like were you i don't think i've ever run it anymore but yeah when you um switch between slides by just clicking around like that is a lifesaver uh that is pretty annoying to do otherwise oh yeah that's a very helpful thing um [Music] how did you get the bouncing arrow for the code like when you moved your mouse over the code a little bit yeah so that's there's let's see where am i sharing an extra stuff um [Music] so that is i have a little page sharing an extra i have a little page here called it's add extra css styles and um it's this hover code line is the one um but it's a small little thing they're little little things like that that i keep adding basically if i if i do something for more than two presentations uh it ends up in sharing an extra because i don't want to have to remember how to do it again it's a nice way to do it they have to remember that you put it in there already yeah sorry i was trying to figure out how i did something in our markdown and i was searching search and searching and i found two different people reference solutions that i built that no longer work that's how long ago i didn't know i solved it twice at one point but i don't remember always the best all right continuing on um [Music] is there an easy way to hide slides you may not you may not you may not want to share you want to share but not presented this time yes absolutely there is a uh there's an easy way to do that let's say decided like this one i can put here at the start of the slide exclude true and um and when i'm done that slide is gone done yep there's and there's even like if you search the issues in the sharingan uh repo github repo there's a really neat solution for a way that you can do this programmatically but for right now i'll just show you the easy way yeah i've done something like that like i said a global variable at top and like then i did like um an inline variable all right this one just came in i'm going to ask you before i ask other ones because it's fresh here um can you create a definition box for an academic presentation like like in beamer yeah absolutely uh you just have to write it yourself all right pretty much i'm gonna follow that one up uh can't is there like an algorithm uh style that you don't have to write yourself no there is that no can we put enough i think yeah i mean those kinds of things are perfect for the the um sharingan page there there are built-in themes from sharingan package directly and i have this feeling that um they're one of them i think the the higgy height i'm not sure how you pronounce that um package or theme so it's probably this one this has like a whole bunch of cool things that you can you can add um that that probably has something like that that sounds really familiar so that would be i've heard people ask for that max on your team asked about this like i wanna be able to put an algorithm that was more of a book down in general more than even sharing again right and you you can't put i didn't show it here but you can get uh latex or latex math and code or math into into your slides as well um i don't i don't do that that much anymore but but it's possible speaking of like things you could put in here um yeah can you switch to font what'd you say well i saw a whole bunch about embedding things in the slides like can you get a shot from the slides like a plotly or a digraphs or whatever yes absolutely it just things start to get a little weird sometimes um so the the trick that i would offer there is look for there's a package called widget frame and um and widget frame kind of takes your html widgets and like packages them up really nicely so that you get just like an iframe with just that thing and that usually works really well but um and there's like certain things okay so there's one weird thing that happens with sharingan that kind of messes things up sometimes and it's really nice for presentations but uh but not so great for um for the html widgets which is okay so i have this slide here if i resize my my viewing window for this slide you can see like everything basically stays the same size it just scales up and down which is really nice that that happens and that's really cool except that rescaling step breaks a lot of um a lot of other javascript sometimes sometimes it breaks other javascript that's trying to figure out where the mouse is located and so like sometimes tooltips aren't the greatest and other things um but i would kind of point out also i like i i have these slides but i spent a lot of time jumping out into browser windows to like actually look at specific things and i think that's a really nice flow in in sharingan and like if it doesn't fit in the slide you know it's okay just like open up a browser when like another tab and uh and show it there um more inserting can you switch to fonts that are installed locally or not google fonts yes sort of okay so another little thing i kind of glossed over just a little bit is that ultimately uh okay well on the one hand you have your slides and you're just showing them to yourself or like what i just did i'm presenting them here to everybody um but then there's this next step of what happens after when you're going to deliver your slides and like put them online or make them available for other people to see so if it's just for yourself you can use fonts that you have installed locally if you're like i'm going to use my own computer to present this and and it's it just needs to work while i'm showing it and then after that i don't really care then you're cool then everything's fine it'll all work locally it should be fine if you uh if you need it to work on the web then you're entering the world of making it work on the web and at that point it becomes a whole different story and honestly like you're best off using um you're using best off using fonts that are already served by somebody else on the web google fonts is a great place to do that but there are lots of other places where you can find fonts and um and i highly recommend uh like don't bother figuring out just find someone who has the font online and um and go with that i have seen one time i recreate it once to embed the fonts in a self-contained sharing file there is a way it's doable but i remember it was not trivial yes no not not so not so much fun yeah you might as well print pdf that's another great way you can do this we just had a question can you show how to print these slides to including this panel set options yeah okay so um there's another package that's pretty new um called what was it called uh it's called sharingan builder and um let me do so oh here i have a link to it over here so sharing builder um it's uh being put together the whole idea is like how do you go from a sharingan presentation to like a whole bunch of other stuff making images making pdfs that kind of thing and i highly recommend you check this out um i contributed a function to this i wrote a function that would um that handles panel set and like you know like walks through each slide printing each slide and every panel and then at the end staples it all together and gives you back a pdf and um and it actually works like really well um it's nice but otherwise it's kind of a printed pdf can be difficult uh the other thing you can do is for for best results definitely open your slides in chrome print from chrome that will usually be the best but i'm a big fan of firefox and um printing doesn't work very well there this is now going to be self-serving we have more questions but this self-serving people give us a lot of sharing and presentations please do it in self-contained it's available now there's an option now it's super slick now were you the only ones who worked in a self-contained option no no i kind of watched from a distance all i do is make feature requests after feature requests i contributed nothing other than that's not true i did a lot of stress testing and i did a horrible solution years ago that made ua want to cry um everyone if anyone's ever going to give me a slideshow and this goes for if you go to conferences use a self-contained option this way it's a single file so here's a folder especially for us we have to host these things at my hacker single file works so much better please folks please please please single file self-contained equals true i'm not begging you eric you already said it to us that it was getting self-contained because otherwise we have to print the pdf uh your slideshow isn't so much more single slideshow but otherwise we have to print a pdf and that's not necessarily great so self-contained folks please please please do it that's my my uh public service announcement please so let me get back to the questions um this is a little more like an f an academic what is the best way to include references in slides yeah you know that one's a little bit tricky um that one's a little bit tricky i don't um i've definitely i've used like this the site the citr cider package um a couple other things i've made my own hand rolled solution i feel like i've seen this mentioned in the sharingan wiki somewhere um it's uh yeah package slater yep that's a good one but yeah i'm it's been a long time since i've that's one of those things that you eventually just like uh i'll do it slightly differently and then you just sort of cut there it is all right so here bibliography and say there i was looking for this bibliography and citations so there's a ref manager i've used that too that's really nice yeah right there you have it um and back to inserting um can you embed a lernar in sharingan yeah you can i've seen it done um i don't remember the link at the moment um but yeah you definitely can you have to put in iframe and you have to do a little bit of work to like make things work in the iframe um yeah but so i work on that package too and i would love to make it easier to put those kinds of things into slides that's really nice yeah um continuing sort of on this theme how about a logo on all slides yeah you can do that that one i i didn't show but that's uh one of the extensions that uh you can actually get a little embedded logo on basically every slide uh just just like out of the box like hey give me a logo on every slide and um and then that works so that one that extension is called logo it's very creatively named um uh you might need to update the documentation um i think somebody documentation for if you want to hide a logo it's high dash logo but it's actually hide underscore logo yeah yeah that's a good point that tripped me up two days ago so oh yeah right under it's i underscore i forget i remember seeing that and thinking i've solved it so i underscore works but you have a website somewhere where it says hide dash logo so yeah i don't know i'll try to find it again i'll send it to you if i can find it again oops yeah i bet it's in here somewhere it was somewhere i'm like hey this isn't working let me go back to my old code i had for three months ago oh there it is all right that's what happened to me it's probably in the function documentation i think so also psa to everyone like don't write your own package down clone just use package down i mean i love this website but i basically made um it's pretty much like i have to manually update every little piece whenever i change things so not the best oh thank you for doing so that we don't have to yeah um i'll continue onwards um can sherigan's slides be parameterized like other markdown documents yeah absolutely that's a great question and you totally can um yeah you can totally do use parameters and sharing it can you right i feel like you can i think you can i might i might have done it but you have to be able to yeah boy but what if you can't [Laughter] and i just said that very convincingly but i'm pretty sure you can really want to try it now let's see is it going to work it works hey yeah yeah because it's still um yes okay this all makes sense it's still it still uses our markdown render so you still use our markdown render for everything um what you what happens though is the output format itself is what figures out how to like cut out pandock from the as the middleman and um and that's what makes the difference uh yes so you can totally do something like arm markdown render pick out these slides uh demo intro and then i could say params list thing uh equals goodbye and this is not going to work as well as i think it's going to is it but uh it worked and then i have to go find the yes intro view and web browser there it is great parameters work i love live testing them on the fly yeah all right um the countdown timer is that part of sharing an extra no that's a separate package called countdown uh not on crayon but it's under uh my github yeah and that's that's something i go ahead is that that's different than the there's a timer that comes in the presenter now it's automatically a sharing gun right yes yeah so if you push p in sharing and you get these presenter notes and it gives you a little timer and there is also a timer built into sharingan itself which you can have show on like the bottom of the slide i think um like it'll show here and like every time you change the slide it resets and so countdown from like 30 or something um but the countdown package has uh the countdown package has uh it's like customizable you click it to get it started and um and if you can even make it play sounds which is nice like at the end it goes will that work in other marketing documents is that just for sure i'm good no that works everywhere yeah that'll work in other places too i was moving on to the next questions if you had follow up you know yeah sure um then are there any extras for presenter mode so for presenter mode i have this one that uh like i spent a while working on this and i was like very excited about it um called broadcast which if you're so you start out by like you open up your slides when you have broadcast installed in your slides it um it gives you this so you have uh it adds a button to presenter mode called broadcast and when you click it it is supposed to give you an id and like identify this particular like this particular browser and then you can share that it gives you a link and you can share that link with other people and whenever you change your slides their slides change too so they can look at it locally but um and then like advance with you and you can move around like any time you change your slide it'll jump to the slide that you just changed too the problem is you need a middleman and the middleman in this case is a library called peerjs and the middleman all it does is it just like you know you have two people and it says okay i'm gonna you guys i'm gonna connect you and then once you're connected you're good but that middleman server part is pretty flaky and at some point i would love i mean if anyone wants to help this would also be awesome but i would love to set up a pure js server that would handle all of that and like i could run it or someone some benevolent benefactor in the in the community could run it for me and uh and we could all connect our slides yeah i feel like a public benefit company would do that type of thing yeah you know yeah i think i know one of those one of those people um and then someone i just mentioned uh maybe you want to show people how to clone these this way they can have like their speaker notes as separate from the presentation yeah so if you're let's see you press c to clone and um firefox is going to yell at me you probably won't see what happens next i'm going to say allow wait wait wait am i i'm just going to do it again press no stop let me out uh how do i get come on just let me okay anyway the point is you have to finish fighting fighting your browser um it will let you it'll create another window and then those two windows just on your computer will talk to each other so you press c to clone and then once you've cloned then you um then on one of those you pick one to like share with everyone else and then you look at the other one and you can press p on the other one and see your presenter notes um i i have but i've also like doing this for large workshops um and other things using sharingan in the end i usually show my own screen and uh and don't because it just ends up being too confusing like which which one is one that people are seeing and um it gets hard to debug quickly so if you really want to i use the notes all the time i'm always dedicated screen separate that's you know everyone has different things um then there's a question okay you sort of you've seen yeah i saw a couple that kind of pull off of that which is how do you if you want to figure out um like what things can you do uh they're question marks so typing question mark will show you this doesn't look so great let me find another one uh question mark here that also doesn't look so great [Music] where is all right question mark here we go so when you do question mark it will show you uh a list of keyboard shortcuts that you can use there's like a bunch of other things you can do um like um making your slides go backwards which is hilarious um but okay and then the other one so that's a help menu the other one is how do you get um presenter notes so if i want presenter notes for this slide about my about the banana i'm gonna say like this you you put so instead of the three dashes to create a new slide you're gonna put three question marks and now you're kind of like attaching presenter notes to this section of the slide and i'll say um this is a joke that most people know and then demo intro let's see okay and then if i go to that slide and press p um those notes show up right here which is uh which is pretty cool and pretty helpful but again if you if like if you uh if you're sharing your slides um at the same time if you're sharing the same screen that you're like presenting with then uh then that makes it kind of that's kind of hard to do so balances and treatments oh yeah that's why i like uh notes this way i can have those funny jokes myself do they laugh at me or with me yeah but also i guess it is a good thing to do i should point out too that it's good to do for people who are going to look at your slides later like they can come through they can hit p read the slides and you know as you like move through it you know and then they can see what you're let's see see what you know what you were going to say yes oh yeah and it's like when you have an incremental slide the notes show up incrementally also that's a nice touch yeah except they like kind of stack on top of each other which is what the content does as well so the content stacks and the notes stack too so you know i have the notes from the first part of the slide and then the notes from the second part um yeah and you know in general it can be hard to get like a ton of stuff in here but it's you know good for reminders a lot more space than i have slides that had almost no space yeah all right um we'll have a few more i know we've been going on for a while um is there a way to make a save template uh like you always keep doing the same exact stuff so instead of copying and pasting you know make a template for yourself yeah definitely um and i highly recommend doing that because ultimately you're going to want to write so sharing and themer can write out a csv file or css file for you right so like it creates a css file you you might want to like just carry that css file around instead of the the actual code or something like that um and the the best way of doing that is to create and then well okay so first you have to create a package which uh sounds like a lot of work but it it's you know it doesn't have to be like earth shattering and also you don't have to share it with anyone really you can just put it on github or share it with yourself and then inside of that r package you're going to create a template and our markdown template and um and and then that way you can make that kind of happen i was wanting let's see there's probably a thing in the like definitive r markdown guide about templates um but then i don't have off the top of my head here we go here it is yep so i'll share that with everybody so that's actually how um that's how for example i made a template that is uh my see when i do new our markdown document that's how i have a template here called uh ninja themed presentation and that's how the sharingan template is shipped as well so yours almost always answers yes um let me just wrap up those last few um someone's having trouble getting code highlighting you sort of went over this you might just say tell me you went over this um can you show us customization options for code highlighting and how to do code highlighting when you're using a special theme i guess that goes back to the whole yeah let's see so i think on second thought i think what we're talking about is something that this might take a second so somewhere in here so you can um i don't know if i actually included it in this so there's a there's a way that sharingan gives you to where'd it go do let's try this one so let me find this in my slides um so here and um i'm gonna just scroll this over okay so there's a way that you can highlight individual lines of code and kind of say like okay i want you to like focus on this right now like if i want to have a part of my slides that's saying we're gonna focus on um on gapminder so i'm going to put a comment at the end and then two carrots kind of like two little eyes looking in that direction and when you save this you'll get a line highlight so the default is to make it like this bright yellow color and um and then so in sharing in themer i think we can change this by saying so all of these next time show off that there's like a ton of different options here for sharing and themer so this is inside this like style function and you can kind of like just look through all of these things and find what you're looking for in this case we want to change how code looks and we want to highlight it so code highlight color is going to be the thing that we're looking for and then at this point then you have to pick something and um i'm just going to like guess at some rgba guess at some colors like very red and not much else but very low alpha and when that updates we'll jump back here so there we go we have a new line highlight color or code highlight color yeah great hopefully that answer that person's question um the handwriting notations on code for some of the slides is that done a scribble yeah no so i uh i have yeah so i often what i'll do is i'll take a screenshot of the slide something like this i'll take a screenshot of it send it to the ipad draw on it on in like um what do i use goodnotes something like that and then um send all of those drawings back and then put them in as background images so that's uh that's the whole process i cheat uh entirely but so you can see it kind of like here's the original and i can interact with it because it's actually code and then here's the image and uh you know if it happens quickly enough you don't even notice but you can see i messed up the i changed the slide number after i did that so oh yeah brutal right that that's the kind of little detail that i'm like but i am not going to fix that no i don't blame you that's someone just that was someone photoshopped it not that's fine all right um can you publish sharing inside our studio connect i yeah yeah i think so you get it yeah cause like everything goes to connect connect and handle anything yeah connect's amazing great great product it really is um can you add an image inside a panel and have it cover the whole panel like a background size cover does yeah yes absolutely and yeah whoever asked that question basically sketched out the how you would do that too so you would um we could like where did my thing go where is your your where's duty hauser um this guy all right [Music] sorry i have like keyboard shortcuts to do so this thing what if i make uh all right i'm just gonna open this and a new thing and look at inspect element and so i have this span right here uh something like this okay here's what we're gonna do so i have this thing i'm gonna give this this is i'm gonna get rid of this image because i don't need it and then i'm gonna get rid of all this stuff too so just i'm cheating to just jump straight so i have this div i need the div needs to have a height uh and a width so i'm gonna make it like 400 pixels tall and you can't see it but there it is and then background image is going to be doogie.jpg and you can see now i have a doogie there and it's repeated but i can do background size cover and now i have just doogie and i could kind of like you can fiddle with this more and position um css yeah it's going to need some css like that looks pretty cool and then at this point you uh copy this rule go back to your slides and um and drop it in i'll call this like duty get rid of that stuff in the middle and [Music] make a little oops echo equals false and we're back wonderful just like that but yeah that's the basic idea make a div put a background image on the div cover it and it's just like a slide except it's smaller but the what is needed there is it needs to have a width and a height to make that work you didn't put a width in there oh i did i cheated because it's actually here in this class yeah but um but you could also do with 30 percent like that and um come on back dude there we go nice yeah all right then we'll call this the last one i know we had a lot um can sharingan work as a shiny document as a regular app or as like an html document that we could publish on shiny apps that i o no no no so that's where yeah what's that can't do runtime shiny no no i don't think uh yeah i would be amazed if that worked and i would love to hear about it but i don't think so um because the problem is like sharing or so like underneath so this is where you get into like that it's not our markdown anymore it like comes out as a um as remark and like some weird stuff happens in the browser basically if you like try to look at the slide file like if i find the actual html and open this in the editor um this kind of gives you a sense of what you're looking at so you have like there's a bunch of stuff that like sets up your slides and everything and then you have this big text area and you'll notice this is basically your um your mark like what you wrote in our markdown but it's turned into like not armor just regular markdown and um and and then when you load this in the browser remark goes in finds that text area processes the markdown and turns into actual slides so like if shiny somehow magically worked in there i would be amazed yeah i agree that'd be tough this isn't real markdown all right one more question came in i'm going to let it slide in um it's not really sharing this is actually useful the command palette shortcut how do you get it to work in firefox because that's the shortcut for incognito window yeah yeah control control shift p and it comes up so this is where you this is where i practice my um my windows keyboard shortcuts because that's usually what it falls back to in the browser um but yeah that like i do that all the time i i like i actually before i presented just now like practice bringing up the command palette a few times so that i had the muscle memory because otherwise i always end up opening a a new private window and you're like ah all right then this is since you mentioned a keyboard this is because the people want to know they want to know about your keyboard switches on that clacky mechanical keyboard yeah right yeah i am i i just like i just got into the world of mechanical keywords so i started out with um a kikron and um and uh and i thought like hey that's so silly like who wants like led lights that change colors when you're typing and it turns out i do very much i love it it's so nice yeah i just got now i just need to find a good like a good wrist rest because uh it's too high go split keyboard get one of the ones like the split keyboard has a wrist rest built in i just went split keyboard this week huge difference has a wrist rest built in and the keys angle downward properly uh it's a game changer yeah all right yeah when i i'm i'm about to get bit by the bug i think so oh yeah thank you all right so um thank you very much that was wonderful you guys are almost spent almost as much time on questions as you did on the presentation maybe more so thank you for that everyone a big virtual round of applause in the chat window for garrick that was a fantastic talk i'm doing a little golf clap for you hopefully that's um loud enough for you sorry to have a real audience here so everyone the talk will be up on um ny hack r within a few days remember we have the april meetup we have the may meet up they'll be announced very shortly um coming up soon and just everyone thank you very much to garrick that was fantastic i hope everyone had us a good night and i'll see you all next month bye everybody bye everyone thank you so much thank you garrick

Channel: Lander Analytics

Views: 1,891

Rating: 4.9444447 out of 5

Keywords:

Id: FHy6NseH8yk

Length: 96min 3sec (5763 seconds)

Published: Thu Mar 11 2021