Using VS Code and GitHub with Webflow

hey ben here with the visual dev fm today i want to show you how you can use github and vs code with webflow how that works how you can manage code write code here in in vs code instead of having to write in webflow and then work with it in a webflow project so um here's kind of what we're working with i built a webflow project already this is my style page where i've got things kind of set up you can see i've got this texture card is the x of x and i've got a sample card image and a get new card button and so what we want to do is we're going to use an api to randomly get us a card and to return and tell us what you know what it is the value and the suit and then the image so i found this cool api um this shuffles the cards you can see this draws the cards this is what we're going to look at and you can see replace a deck id with new to create a shuffle deck and draw cards from that deck in the same request so if we copy this and just paste it here in a new tab and just type in new here you'll see that it tells us it says true cards it's the four of diamonds the four of diamonds and then it gives us an image even uh to use for diamonds perfect so we're in good shape so this is what we want to use right and so if we want to take this um and use it with project we're probably going to need to write some custom code and then what's a good way to do that so here's what i'm going to do i'm going to jump over to vs code and i'm going to actually open up my finder window and i'm going to go to my document so pull this over here you see i have a github folder in here i'm just going to make a new folder and i'm going to call this you know pick uh pick a card okay and so now i have it here i'm going to open it up actually going to go back here uh so now over here in vs code i'm going to add a folder and i'm going to go to my documents and i'm going to go to github and i'm going to choose pick a card you see that's empty and if i open a terminal terminal so i can say new terminal and vs code one of the cool things that it will do is it will say documents it will it will navigate you right here to where you should be but if you want to you could say cd type in cd and you can drag over the folder that you want to navigate to just right in here and then hit enter and it's going to get you to the directory you want to go to if it doesn't start you in the right directory right so now i'm in the directory i've got a folder so what we're going to do is we're going to jump into github okay so a lot of people use github a lot of people think of github as being scary it doesn't have to be scary it can actually be a lot of fun um and really fun to work with so what we're going to do is we're going to click up here and we're going to create a new repository i'm just going to call this you know pick a card um and then you know my repo for the picky card project give it whatever kind of description that you want to use this we need to make it public and then what we want to do is create the repository so i'm just going to click create and we're rolling so um so i want to create a new repository in the command line so i'm just going to copy this right here and by clicking that button and then i'm going to roll back over to vs code and then here i'm going to make sure i'm in my pick a card folder and i'm just going to paste this and hit enter it initializes my folder with for github and i'm good to go so um if you've not used command line a bunch if you command k you can clear all that's there so now i'm set and i'm ready to go and when i use this you can say create a new repository on the command line and then you can you can create a readme so it did create a readme file and a readme file in github is just something that's going to show on the home page where you can explain your project if you want to um and give us some details so this is just a markdown file and we can explain this later so but um now that we're here what i want to do is i want to go over to settings once i'm in settings i'm going to scroll down to github pages so in github pages what i'm going to do is select the none and just choose master okay well that's one problem i don't like that term um and so i do want to rename my master branch or to something else so what i'm going to do i'm going to just kind of copy and paste this you don't have to do this but i just think it's the right thing to do um i'm going to copy and paste and i'll put this in the video description um i can run this and now you can see my master branch is main or i'm now in the main branch and then what i can do when i'm over here um branches so to explain this uh you can have many different branches you see i now have master and main um this is something that you would use if you're working with a bunch of people in code so if you had five or six people committing code to github you would have this base code that you wrote that kind of makes your app go or your website go and then what would happen is someone would create a new branch which would you know create a basically a copy of the repo in that moment in time and then they would work on it there in that branch add any changes and then they can merge that back in so take the changes they've got they've made and merge that back in so it doesn't mess with anything that's happening typically github starts with a master branch we're just going to get rid of that so here i can go to branches and the default branch i can make main and update that yeah i understand that's going to make the default branch change and then um you know i can just absolutely remove this branch so um if i you know i could switch back and forth here but later um i'll remove this branch so in fact let's just view all branches here and on master let's just delete master was deleted so now um it's just a language thing that i think is important but i wanted to spend time on it and show you if it's important to you how you can change that so um link in the show notes to the code i used to do that and also to a page that teaches you how to do this so now i'm on main this is good okay so let's go back to our settings uh we have a public repository and now we're gonna go to github pages and we're gonna choose our source as a main and we're just going to you know uh choose it and save all right so um if i scroll back down here now you'll notice i have a web address for this repository it's really cool so you see there's nothing here now because i've committed nothing to my repository um but we're gonna get there so let's jump back over to code you can see i've just got the readme and if i go to my local machine where i've got this folder pick a card i've just got the readme and some get files that initialize this so i'm good to go so what i need to do is start a new file so i'm going to click new file and i'm going to call this you know pic.js i guess um that's what i'm going to use so this is how i'm going to work or where i'm going to work and then i need to write some code i sort of got started here so i'm going to go ahead and pipe this in where essentially i have this um you know this data this function that i've already been working on but what i want to do is write my function right here so um let's take a look at the api uh i don't mean this to be a javascript course by any means the imagination but we do want to take a peek and see what's happening here so you see it gives me cards and then all these values so i just need to write some quick javascript that's going to help me get these values and return them on my webflow page so let's get started um first things first here i'm going to uh i'm going to i'm getting you can see i've already using a jquery get and i'll have a link to this github repository so you can get this code if you want to use it but this is the address i was using back over here this uh in fact except right here i'm drawing two cards i just want to draw one and this gives me one card here um and so i'm making this call to get that data now i need to write some code so what i'm going to do is i'm going to say give me a constant and we'll call it suit so we can get the suit and we'll say that equals data dot cards and since it's an array we'll have to do open bracket put a zero in there and then do suit to get the suit and then we'll save it okay and then just to see if this works what we want to do is we'll just quickly console.log and we'll say suit and we'll save it so now basically what we're doing is we're using jquery to get this api endpoint we're setting a variable from that endpoint with the suit and then we're going to console log it so now here comes the fun part we get to start learning now if i'm going to go down here in my console and if you're not using the vs code terminal that's fine but we're going to say i'm git and add and then just do a period what this is going to do is it's going to stage all your changes everything that you've changed if you're working with just one file you could literally say git add pic you know dot js if you wanted but we'll say git add period and it adds it and stages that change and then we'll say git commit and we'll do dash m and then we're gonna open quotes and put a message and we'll say um added uh our file and logging the suit uh to check if this works so just kind of being descriptive in case anybody else wanted to see what was happening like this is typically meant when you're working with other people so they know what changes you're making or to remind yourself later what was i doing um so i do that and then i'm to say get push and it's going to push this up to github so now if i switch over to my browser and i go to github you can see i can refresh the page here and now i have pic.js here added our file and logging suit to check if this works and i can click into the file hey here's the code we wrote really cool and you can see if i click here i can get the specific commit and it'll actually show me the difference you know if you're adding and subtracting it will show you you know what's happening you can even come in here and add notes if you want but this is that specific command so i'm going to jump back to my code and remember we had this site that was created we didn't have any files but now if we add pic.js here you'll see that oh hey now we're getting somewhere um we have this code that's being served up by github so if we copy this and come back over to our project our github project i'm just going to go to the home page and then down here at the bottom instead of writing my code like normal what i would do is i can just do like a script and the source equals source equals this right here and then close this [Music] and now we can save it we save our project and we publish it so let's come back here and refresh and then let's open our console and we see one message hey it is logging we got no errors that's good it is console logging the suit so that's let's go back to our code you can see yep it got the suit out of there and it logged it so now we have spades so let's keep going um let's let's write some more code it's gonna be really similar we'll say create a new constant and let's call this one value and we'll you know give it equal data cards um and we'll once again select from the array and we'll say i think in this it's called value this is where i'm getting if you're wondering where this is coming from uh here so you can see we're going for the data jumping into the cards and we're saying give me the suit this is the value so we'll just save that value here and then down here again i like to always just when i'm starting just to know that i'm doing things right um you know let's console log it just to make sure that this is working so let's console log the value now and then we save it i'm going to save it here and then we just go through the same process let's get add period let's get commit m added in the value and then let's get push and so now it pushes this up to github and so if i roll over here back to github and i refresh you'll see i have a new uh new commit added in the value and if i click here you'll see that now okay um oh i consoled log something twice so that's terrible um i didn't even realize i did that okay but you can see that there and if i go back let's just jump right back um if i go back to my code hold on um and i click on added in the value you can see this it shows me what was added i added this value i had it suit again for some reason then i added value so you can see it shows me the difference in what i wrote and if i come back to my code here and i refresh it i have that change right so if i were to refresh this page hearts 10 hearts so i'm console logging that twice but i'm getting the value i'm getting you know all those pieces so let's try to finish up our code here so console along the suit console logging the value let's create one more constant and we'll call this image and it will equal the data dot cards and then once again the array and we'll say we could just do image if we wanted or you could do images let's look at the structure and see why so now in here um there's just an image which we can pull or if you jump put images you could choose whether you want the svg or the png for now i'm not going to be picky i'm just going to choose image and then down here i'm going to choose this and let's just console.log the image and make sure we have everything so once again we get add something to get used to get commit m uh added in i could spell in the image perfect and then let's get push and it pushes it up uh then once again just to be difficult not to be to their horse but let's jump back over let's go to github and you can see now um added in the image if i refresh you can see it's here and if i refresh this code hey it's not there yet what's going on you can see here in github it takes a second for everything to push out to your site that you're using so there is a little delay when you're when you're working here but i can come in here and see that okay now i'm grabbing the image i'm console logging that image uh and if i jump back not to my profile but back here you can see the difference where i added in the image and if you see here this little orange indicator this means you know it's processing here working on getting this change out pushed out but you can see let's go look in here in the in the difference here i call i removed suit i added image i added in a constant for the cards uh image so we're getting there um in the back over here you see green check mark and if i refresh now i've got my image here so if i refresh here i'm console logging the suit the value and the image so let's jump back into webflow on my page so i'm on the home page i have a couple things i have your card is the x of x and so if you choose this i've got an id of value and on this one i've got an id of suit and then inside here i've got an image with the class of card and an id of image so what i want to do is just pass these values just write them back to the page so what i'm going to do is i'm just going to jump in here and i'm going to say document and then use the old faithful get element by id and then let's open this up and we'll say let's get the suit and then what we're going to do is we're going to do dot inner html um and we're save equals suit and then to make this easier we'll just copy this paste it let's get the element by id let's get a value and then that's gonna actually be value and then one more time we're going to get an element id we're going to get element id we're going to get image but instead of enter html it's going to be source and that's going to equal image so let's save this and let's get add period hit commit then added a message uh wrote elements to the page and then let's get push so it's going to push it all up to github and when we flip back over to our repo we can refresh it the road elements to the page it's really good and if we jump in here we actually see now all of our code you know we've got our constant that's suit cons that's you know value const that's image and we're console logging those still and then we're getting these elements by id and writing them to the page so let's jump back over and let's take a peek at you know the difference here you can kind of see yeah just added three new lines nothing really huge you can see that some of the code is missing if there were no changes there may not show you all of it so you can click up and see there if we jump back to the repository too something really cool as you see our changes are live you can see that uh and actually here we'll show you the languages involved so how much javascript how much html how much css um so in your environment of github pages so now if we come back over here um when we we refresh this you can see now we've got all of this written and if we replay refresh this here your card is the ace of hearts it's great so this is actually working just the way we want it if i refresh the page ace of diamonds ace of clubs seven of spades ace of hearts seven of hearts you know as you refresh it just gets you a new card it's just like hitting that end point every time so uh what we can do here is what i want to do is i just want to make this where this element refreshes the page so people don't have to hit refresh so down here i'm still using a button i'm using an html embed and you've got i've got a function here new card so all i'm going to do is jump back into vs code and i'm going to create a new function so i'm going to call it function and then i'm going to call this new card and then here i'm going to you know open and close and then all i'm going to do this is real easy i'm going to say location dot reload and then just like that and then save it very prettier formats that for me you can see even vs code is telling me what's new and then the other thing i want to do before i finally commit this is i want to quit console logging values that's something we don't want people to see you know in the final version of the site so let's remove those console logs and let's save and then we'll once again we'll get add add that period we get commit added reload function and then we remove the console log [Music] and then we'll get push and then once again it's going to jump right up take care of us if we jump back over to github and refresh added reload function and remove console logs awesome so if we jump in here you can see this is kind of our final code what it's looking like um you know we can jump back here and um get into the commit so let's jump into the commit itself um let's go in here you can see removed these three lines added these new lines okay cool cool cool um and i want to show you this commit this commit stuff because here you can see there's a specific commit and this is going to come into play later when we're serving this up so um now that we're we're working this i mean this is works great right like i can refresh get a new card if i click let's uh do a hard refresh get a new card oh that's see that works now perfect i can click that it refreshes the page this is all working the problem is this file that's being served up right here this is not anything that's really super like it's not on a cdn so like if we're using production you know maybe not the best thing so what we want to do is look at js deliver and with github it is [Music] slash cdn.jsdelivered.net you know so github slash user slash repo at version file so we can do it that way um you don't have to use this at version so essentially what we're gonna do is we're going to grab this and let's copy and paste it we're not going to save this but just so you can see let's paste this here so that's what that's what we have right now this is telling us to use this so let's paste this here just so we can see the difference right and so g github user would be your username so for me it's right victor repo in app version right now i'm just going to do pick a card and then the file would be pic.js so now i can copy this address and if i open it up over here oh it fell to fitch to fetch uh riley richter pick a card at latest from github interesting so so what's what's happening here okay so real quick easy way to do this um is if we jump in here uh pick a card um and then what we want to do is go back into github and if we click on this we're going to get this version so we can say at this commit so we'll just copy this commit id here and then if we jump over here and we say pick a card and we include the at symbol and we include that specific commit it's going to get this specific version of the file so now if we do this oh i loaded the wrong one a pig card at sorry uh at this here so now if we hit this endpoint we should see our specific version you see this is fed over a cdn now and now that we have all of our functionality done we're going to serve up the cdn version of the file so we'll go back into webflow and instead of using this github source we'll just swap it with this js deliver it should help this load quicker and you know take advantage of that js deliver cdn it won't change any of the functionality so we can see it's still calling making that call reload works just fine and if i view the page source you can see i'm using that js deliver file now how what you know how how do you go about doing this and as far as like updates well if i make an update because i make an update and push i'm calling that specific commit so that means whenever i do push code like if once i get to production and i'm done with the meat of the work if i do make changes i'm gonna have to jump back into github get the latest commit and just paste that into webflow which is fine you know it's just replacing this string right here and typically what i do is instead of placing this here i you know i'll save this remove it save it go to my project settings and then in my custom code i just add it to you know every page especially if i'm using it in a lot of places on the site you know maybe for you know if you're only using it one or two places it's not as big a deal uh but you know this still works but it's now being served here and it's one place and i can just come back and change the specific commit if i make any changes and it's going to you know it's going to pull that version now you can there are like with jsdeliver there are ways to bust the cache and get the latest version and do all kinds of different things and you can read up on all of that i don't want to get into that here because it feels like it's a little in the weeds but this allows you to write code in vs code in fact i'm going to remove these and then um commit this to github and then serve it with webflow so um you know no republishing webflow a million times you can just you know you will have to get get add git commit get push but i really feel like this is so much easier and then you can do all kinds of things so you can create new files and you could you know say style.css and you could actually include a css file here in your repo and then you can call i do this quite often if i have custom code i have javascript and i have css and then this way i can just include these i'm here and typically when i work i have a couple of different things one i will have actually for each project i might have two repos so i'll have one repo that is looks a little bit you know like like this and has my public files and in my readme i would explain what this is for link to the site these files for this xyz i make sure my client knows about it or whoever i'm working with but then i also might have a private version of the repo where i've got stuff i use during development um that they may want to bring back and use i've got stuff like i document my zaps in here or my integromat scenarios i say you know i use markdown and a language called gherkin which you can look up um but you know you can say you know you know if uh you know uh in fact i think you could just do this one like jerking like this um you know you can say you know when uh you know given a scenario you know when and there's a whole official way to do this when a user and user submits a form and this isn't super proper right now but you can clean it all up and look it up then you know zapier fires and x step and then you know then the next step and i try to document these so you know clients will have access to zapier but this also gives them written documentation of what all the zaps do uh that way if we come back in six months and they're like hey we need to do this you can what was i thinking like when i did this it's a great way for even yourself just to be able to kind of see what you're up to so anyhow this is kind of my method of working in github and chase deliver if for some reason you need more instant feedback a good way to work is to um code sandbox i don't know if anybody uses this but code sandbox uh if i can type io and you can pull up a dashboard and create a sandbox and just create static html and here you can write html and javascript and get more instant feedback sometimes i do this if i'm just trying to if i'm really in the weeds and really lost or trying something super experimental but if it's something pretty standard like what we did today where you know i'm gonna get this make a call and set some constants and write it to a page it's pretty standard uh and so i don't have to go real far out of the way to uh to work on that so i'll work mainly here but anyway i hope this video helps people who are looking to add some code on top of their no-code experience and if you have any questions you know as always feel free to hit me up

Channel: Ben Parker

Views: 1,378

Rating: 4.9047618 out of 5

Keywords: nocode, no-code, low code, visualdevfm, visual developer, webflow

Id: K9PWmroCooU

Length: 31min 58sec (1918 seconds)

Published: Sun Aug 23 2020