Navigating Remix in the Rockies! Robert Stupay

uh so today uh i guess the first thing i'm going to start with before i get into the presentation is this better okay uh is that um we're launching a usability study so if any of you want to contact us at the end there'll be a link to our our medium article about this talk and the links to a form to fill out or you can contact us on twitter if you want to help us with any usability studies we're going to do at devconnect and on the world to defcon to get remix better and better and uh so with that i'll get on to remix and the rockies remix for hackathons so um yeah so uh hackathons like you gotta learn stuff quickly and you gotta collaborate with uh your fellow team members who you may not have met before and you gotta import code from other projects and you gotta use normal development tools for debugging and and you gotta deploy to multiple chains properly and you gotta make a prototype and show the judges who probably may or may not have any experience or have any patience left because they've been judging too many projects already and you also need to know where your files are stored so let's get going so faking it until you're making it which is part of remix uh so the first thing you got to know is we have a tutorial tool right inside a remix that can help you learn solidity and learn remix and learn some design patterns and a bunch of interesting things here's this interesting one we just put in called the remix the solidity beginner course i'll go through that a bit more and uh so in the beginner course you know it's all these examples taken from solidity by example which is a website you all should know about when you have solidity questions or you need to know like how to make that loop again or what's the syntax for this or that you can go there he's got videos but we've got some instructions about his examples walking you through them and giving you a little chance to try coding and it'll correct it uh and so the other thing to know is that people sometimes complain when their browser crashes where do the files go because remix is not a google doc because google you like you sign in and it saves it on google servers uh but in remix there's no servers it's just saved to your local storage well it is out of the box so um and local storage is limited in size so either you gotta save it on local storage uh but soon it's gonna get bigger with index db which is gonna be in the next release but you can use that now on remix alpha if you just want to use remix out of the box save to local storage but if your browser crashes you still lose your work unless you save it uh which i'll get into in the next few slides about saving it remotely with dkit on github um but anyway uh or you can save it to your hard drive using remix d uh so if you're developing a small project just use the out of the box one and and use re and use d get to push to a remote repo and if you're using uh a larger one use alpha and then you can also just push to github to share your code and if you want to use uh to make it uh store on your uh hard drive then use remix d so here's a remix and this is how you connect to remix d you go to the file explorer and then you click the uh enviro the workspace you select connect the local workspace you get this modal then it tells you some info about how to get the remix d script running in the background and you get that's the command line so the cool thing is like remixed is d is going to break the security uh sandbox between the browser and your hard drive but you're specifying which folder on your hard drive and which instance of remix you're running so you're limiting the scale of the breach of the security sandbox uh so then if you want to share your information you load up dkit which is another plugin by the way does everyone know how to load up a plugin in remix uh oh see this little well anyway the bottom left of the screen this is called the icons panel this is the side panel and this is the main panel and at the bottom left of the icon panel there's a little plug so click that plug and the plug and manage will come up or you can also load up plugins in this part over here also if people have any questions just interrupt me so anyway uh you can put your github settings in there then you can clone a repo and uh you can clone a repo what's going on here you can quantum repo anyway it has all the get functionality and so you can push and pull and clone and share your work and make prs on the shared repo that you're working with your teammates on how much time do i have left by the way okay uh so what's this one about this one is um yeah so i just pulled in this repo uh and uh so now i made a little uh update and then i can see the changes and if i click over here on this uh this is the gridmix dot sol if i click on grid mix and the next one i can see the diff and then so then you can push and make the pr's and if you want to get a gist does everyone know what a gist is so if you want to push a gist publish a gist in remix you go to the file explorer you right click on a folder or a file and you can publish it just you do have to have your get uh your github credentials set up in the uh settings panel which isn't below the plugin the plug here it's a little gear down here also you can change the themes and remix to make it a light theme or dark theme and save your eyes or burn your eyes depending on your preference and then also like you're in a hackathon you make some code but you gotta justify your code so a good way to do that is using uh nat spec comments and these are this uh the section up here to nat spec this is like a solidity uh kind of comments that get compiled and put in the compiled contracts metadata and then uh you can use a pro uh plugin called the uh ethdoc generator and the d stock viewer that you uh you know you put up ethdoc here and you'll get these two plugins load them up and with a compiled contract uh you get this stuck and this has taken the uh it's taken the at dev uh comment and it's making that the description of what this function's about so you can take this and uh explain it to your teammates or unfortunately you can't export this file so in a way sometimes you have to like grab screenshots and explain them that way and if you want to import files to remix which you will need to do either dependencies or files to edit if you want to uh import files to edit on the home tab you got these buttons down at the bottom or you can also use the sourcify plugin to fetch uh verified contracts but when you use the just the github the ipfs and the https uh a moda will come up and it will ask you uh you know what the address is if you're importing dependencies or libraries just in your solidity files you just put the import statement and if it's an npm package it's going to go out to unpackage uh and then it's going to grab that and put it into remix in the depths folder so like in a typical file it's this you know you here's the uh import statements and that's enough you don't have to have them loaded remix will go out and get them also you should know about this wizard from open zeppelin so you can uh grab your coin contracts and uh you know set up the uh different functionality and then click the open and remix button and then it will open up a version of in remix and when it does it opens up in this workspace called code sample so probably when you're like gonna work on your uh project you need to set up your own workspace so you'd probably just copy this file and put it in your own workspace and go to town and if you want to work with hard hat devs and you're working on remix then you have to have running remix d and in the compiler there'll be a little thing says compile hard hat and then you can also also when you do that you get a this remix compiler config file that hard hat compiler will read because the compilation is actually happening on the hard hat project and then gets uh pulled up in remix and you can deploy to a hard hat chain too so you could be having a like the rest of the devs can be working on a hard hat you could be working on remix and it's all copacetic uh you need to have a debugger to get to the debugger do a contract do a transaction and then click debug debugger comes up and you can step through transactions you can use the slider over here you can check out what the uh local solidity locals solidity state variables you can um put break points and jump to breakpoints and we have the console.log functionality now so when you just use the at the import statement in your solidity file use import consult that use this line and then you can put your console logs and then the result will be in the remix terminal which you can't read down there but you will on your own machine uh deploying talk to l2s is simple you just um select the l2 you want uh and uh in metamask so what you choose uh injected web 3 in the environment of the deploy and run and you just get some local currency because you can't do that you can't deploy without some currency so get the currency choose the l2 in re in metamask and you're set there's the injected three web three and you choose the network of your choice in this one i'm deploying to kovan on optimism and i'm still deploying there and you probably need to get your front end together and to get the front end together you need your api and to get your api you go to the solidity compiler and you select the abi button down here and that will get your api copied and you can just put that in your front end and in remix it's kind of cool because if you can't get your front end together you can just show them remix and since it's a gui you can see the function and you put in your input and you hit transact and you can show them oh that works and they'll say okay hopefully and that's it