Horses on Rails 2020 - Part 1

so here we are at the horses on Rails website it's up at github dots tongue I - RC / horses on Rails and we want to clone this repository we're gonna do so with this clone button the first thing though I want to mention is an interesting feature of github which is that for a variety of different languages and frameworks github will actively monitor your repositories for security vulnerabilities so you can see here it says they found potential security vulnerabilities in your dependencies and this happens anytime you're working in like an open source ecosystem so if you have a rails project or a JavaScript project it'll look at for rails it'll look at the gem file for JavaScript it'll look at the package JSON and anytime a known security vulnerability is in one of those packages it'll alert you to that and it can even do really cool stuff as in it will automatically create pull requests to fix your problems so there's a little bot called dependable and it will tell me to bump up but the versions on my dependencies because there are security vulnerabilities in the versions that I'm currently using so it's not a big deal for us because we're just deploying the store own personal machines but it's a handy feature of github and I thought I would mention it because it's you know it's highlighted right here that there's security vulnerabilities in this repo so they won't affect us because we're not going to deploy this and you know probably later on this week I'll go through and I'll start pulling in those pull requests that are auto-generated by the defendant bot what we want to do is we want to go to this clone you want to switch over to HTTPS because you're not a contributor to this repository you just want to clone it so you want to grab the HTTPS URL I'm gonna grab the SSH one because I am the owner of this repository and then from a terminal we want to do a get ya clone and then paste in in your case it'll be the the HTTPS and mine is the SSH run that in the terminal so it's gonna be a git clone and then I don't want to do it just in my root folder though I want to specifically first navigate to where I put my rails apps so once I've navigated there now I'm going to get my git clone and I already have a folder called horses on Rails so I'm just gonna call it horses 2020 you don't have to add that extra argument if you just do git clone and then your HTTP it'll put it into a automatic folder called horses on Rails and then I can navigate to that folder so there's a few things that we're gonna want to do here one of them is we're gonna want to add that folder to vs code so I'm going to navigate to where I just cloned that repository I'm gonna find it in my list there it is I'm gonna say ok and then within that repository if you are running a different version of Ruby compared to me then there's a few files that you'll want to to deal with Ruby because Ruby versions change over time and because there can be deprecating changes rails tries to make it so that if you were to sort of try to revive a repository months later years later and tried to get it running there are a few things put in place to ensure that it'll run in the same way as it did when you first created in the past one of those is the gem file and the gem file lock which should have lost all of your gem file dependencies to the versions that you were using when you created this application so that if you try to revive this application at a later date you'll revive it at the same versions of all of the different dependencies and the other is the Ruby version and so just to simplify things this repository was created with Ruby 2 6 3 we could change that to match our repository or or sorry our version of Ruby or we can just delete that file and then the other place that we need to go is into the gem file the Ruby versions mentioned there as well we can just remove that line or again update it to match our version of Ruby we're now going to run bundle install if you get a error that your version of bundler doesn't match the version that this system was bundled with you will have to delete your gem file lock which is something that you don't often want to do because again that file exists to lock you to all the specific versions of gems that existed when we first created this application but it's actually okay in this instance to remove that because we're not too far away in terms of version numbers from the versions that are actually specified in this gem file whenever you're dealing with any set of dependencies these days whether it's in the rails ecosystem or the JavaScript ecosystem a lot of the projects out there follow what's called semver or semantic versioning and that's just sort of like the idea of having three different numbers associated with your version where each of the three numbers has a specific semantic meaning the rightmost number is like the patch release so for like small fixes and security updates that's the number that's gonna change and if the project is following semver it should never break anything to upgrade to a new patch release right that should just be a drop-in replacement no breaking changes its security fix it's a patch the next step over is like the minor release this is when new additions are being pushed into the system and you might also get deprecation notices here where they're gonna be told like something is changing in the future that is going to be a breaking change in those warnings that that may start popping up and then the major number here that's four major versions and that can include breaking changes and sort of all bets are off if you upgrade to a major version in terms of your application might need fixes in place to work with that new version so we're not too far off in terms of rails this was created with rails 6.0 point-o our version of rails is is not too far away so we're gonna run bundle install if that fails on you then try deleting the gem file dot lock and running bundle install again so that goes and it fetches a bunch of dependencies for me all the standard rails ones after running so the next step was we navigated to our folder and then after that do a bundle install after the bundle install is successful we're gonna do a yarn install that'll grab all the JavaScript dependencies then we need to set up our database so we're gonna do a rails DB migrate then we want to populate our database so we're gonna do a rails DP seed but before doing that I also and maybe we should have done it before the bundle install but it'll be okay what I also want to do is this repository is sort of done this is a previous version of this project I want to take us back in time to a time when the repository wasn't done so maybe even after the bundle install will do that we may need to run bundle install again but it shouldn't be a big deal what we want to do is we want to do a git checkout to create a new branch and specifically we're gonna call that branch like back in time if we just did get checkout - be back in time that would branch off of whatever branch were currently in which would be master but what we specifically want to do is we not we don't just want to branch off of master we want to branch off a version of master from the past and so if I go look at my repository here I can look at the commits there's a very specific commit that I want to start with which is this one right here I sort of know where I want to get to in this repository and it's it's this commit right here before I started messing with the schema every commit in yet is identified with a particular hash so it has a unique identifier and you can see beside each one of these commit messages is a hex number if I click in on that particular commit you can see that's the full hex number right here hex number that it uniquely identifies or fingerprints this commit in most repositories I mean we could check out and we could specify that entire large number but we don't actually need the whole thing because in any given repository you probably only need like the first seven digits or so and that would be like unique enough to identify that particular commit and so if we look here when they give us the numbers just in the list of commits those they only show us the first seven digits or six what is it seven and so if I go through here and I just grabbed those first seven copy them that's what I want to check out so I'm just gonna pause the video here so it can do what it needs to oh no it's done okay so even if yours is not done I'll give you all some time to catch up on this but yeah the next step here is I'll do a git status I'll do a git add and again commit to to get these changes into place and then I'm gonna go and do this this line here get checkout - be back in time and then that particular version after we do that we're gonna have to run bundle install again because we're going back in time it'll run way faster because we just went and got all the gems so they'll already be in our system then we'll run yarn install then we'll do the migrate and then we'll do the seed so all all pause until we're done all of that so we've run all of these commands which should mean that we can do a rails s at this point you fire up the server we can also do a little bit of an exploration oh yeah the other thing we need to do is I didn't go and remove in this one oh I did okay so there's no Ruby version file here but the gem file needed to change okay so I just needed to make sure that I still had deleted that Ruby version and that my gem file didn't include the Ruby version because I initially made those changes over on master and if we poke around this repository there's a few places where I like to visit a rails repository for the first time to get sort of a general sense of what this repo has to offer the first place is in the DB folder there is a schema file which is a ruby description of the database so this will give us an idea of what we've got in this database we've got two tables a breeds table where a breeds simply has a name that's the only sort of special property for the breeds and then horses the horses have names and they are also associated with a particular breed and so a horse has a breed ID which is a foreign key so that gives us the sense of the database that's sort of under the hood here if we go to the app models folder we should see a model for each of those things a breed which has many horses a horse which belongs to a breed and the next place I tend to look after schema and the models is the routing system because that gives us an idea of sort of the surface area of the URL that are present in this application I look at the routes we can see that we have a route route so when we just go to just / localhost 3000 that's gonna go - it looks like a breeds controllers index action and then we're using the resources command but we're only asking for one of the restful resources for each of the breeds or the horses we just want the show page so that's the that's the member route that displays an individual either breed or horse by ID so for this one it's gonna be like slash breeds slash some ID and for this one will be slash horses slash some ID and if we go to the controllers we can see those so we're expecting and breeds for there to be a show and an index action and for horses there will only be a show and so there's breeds who are listing all the breeds or at least loading them all up ordered by name and when we show a breed we just find it by ID and then for horses we just simply find a horse by ID so if we go over to the application itself we should see that happening go to localhost we give it a second to do as various rails caching stuff there's the first time we visit localhost it takes a little bit of time and then after that we don't take up as much time so we have this overarching link at the top that just goes back to this homepage here's the breeds that have been instantiated in my database at least and then for each one of those breeds there is a certain number of horses so this is the index view of breeds it's showing all of them this is the show view of breeds it's showing all the associated horses and then for any given horse I can click in to a page which right now just shows the horses name so there's one fix that I know that needs to be made and it's just uh there was a bug in this application it's a minor bug that's in the layout file for the views if I view source here we can see that this h3 here is is red and that's because the h2 above it never closes so I've got a little bit of invalid HTML just because I forgot to close the h2 here so we're gonna fix that up before we do anything else that's in the app views layouts folder application layout that's right here at the end of this line here right before we yield in each individual view I just need to close that at h2 so that's a small little fix I reload that is no longer red and the h2 is now closed visually nothing will change on the website it's just a little fix that needed to go into place I will open up another terminal here and just add that fix into place because it'll show up as a prism so I'll add that and commit it close so the next thing I want to do is I want to show you how to add new properties to database tables or models that already exist because up to this point in the course we've been sort of fully creating our model assuming that we know all of the properties that that thing already has here we saw that in our database we had a horse which only has the name I want to add some more properties because I want to eventually pull in a styling framework we're gonna use boma CSS framework to style these horses as little cards but I want there to be a little bit more to a horse beyond its name and so what we're gonna do is we're gonna use migrations so when we first sort of created both a breed and a horse we did so with a rails generate model and not made a migration for us if we look in the migrate folder we would see the migrations that did those things the create horse and the create breeds so one way to make a change here would be to go in and just like add to this migration we can see here we're creating a string we could add other rows here and then we could delete the sequel database and we could run rails DB Meier it again that's not the proper way though because the whole point of migrations is to capture incrementally over time the changes that are being made to your database so that those changes can be shared across the team and so we're gonna at the command line do a rails generate migration and I'm gonna do something I'm going to ask you not to hit enter because I'm gonna undo what I'm about to do but I'm just gonna generate a blank migration I just to show you what that is so don't hit enter there we'll fix that up in a moment so if I do a rails generated migration I just give it a name into my migrate folder a new blank migration is going to be placed did you like refresh that or something I just click through here yeah there it is it's just a blank migration in this change file I could put in any number of changes and I could just go to the rails guide on migrations and sort of say like well how do I make like a change that maybe alters the name of a column or adds a call them more removes the call and I could put them all in here and that would be fine so that's one way of doing it I'm gonna delete that one and show you another way if I do rails generate migration I can name the migration in a very specific way and rails will pick up the fact that I want to do some additions so the sort of the style of how I name my migration is add X to Y and then I specify what X is and then I give it a type and so Y here is going to be horses I want to add to the horses table what do I want to add I want to add a column that's gonna be the X and so we're gonna start by giving a horse an age and then specifically I'm gonna call out that age as a particular type and in our case this will be an integer and this pattern it can be written in either camel case or in Spain case so I could have an all lowercase and it could be like like add age to horses or it could be in camel case either way as long as I repeat the thing that I'm adding after the fact and give it a datatype so when I run this rails will pick up the fact that I want to modify horses I want to modify it by adding an age and that age is an integer so I can hit enter here it generates a migration for me it's a very simple migration I could have written this myself right but again when there is a shortcut I tend to learn those shortcuts and make use of them so I'm gonna do this a few times I'm going to go back to the mic command prompt and I'm gonna add like a top speed to horses and I'm gonna make that top speed a decimal number and again I could have stacked each one of these into a single migration but I'm just putting them into multiple migrations so that each migration describes one atomic change to the database and so that created for me another migration which is just an add call and the horses top speed s Immel and then finally because we are dealing with horses in the future where genetic modification of horses for racing purposes has run rampant we have a number of legs that horses have and it is a whole number of integer and then if I look at that file looks the same as the others they're all add column statements each one of them generated by a Rails T migration and then naming the migration in that add X to y pattern and then specifying the data type of what is being added top speed was a decimal you got it yeah top speed decimal paper just for a little variety and then recall that these migrations themselves they don't actually make the change to the database until we run them and so I need to do a rails DB migrate to actually run any outstanding migrations so rails will pick up the fact that there's three migrations that haven't yet been executed and it will execute all three of them adding the age top speed and the number of legs to my horses and if we now go back to that schema file that we looked at earlier so I can do a ctrl P and I can say DB schema or scheme that'll use the fuzzy finder to open up my database schema and now we can see that our horse table is larger than it was before the neat thing about rails is because we have this schema file there are gems that will draw erd diagrams for you from your schema so you just put the gem in and that's another way when you're coming to a rails application for the first time you're like oh what is what does this database look like well it can be sort of helpful to look at the schema but then you have to sort of untangle all the foreign key references if you put in the the gem the one I use in the past was called Rails roadie but I know there's a few others it'll just generate PNG which is the erd for your schema so for example when you're starting up your project one of the things I asked for is to provide me with an e or D well you can go out and build all of your database using migrations and then you can just generate your ERD using that gem if you if you choose you can do it the other way around as well if you want so those things have been at it that's great I now want to go to like it's not picking up many of the changes here that's a little weird I'm I'll just do my get work at the command line oh there your lagged for some reason vs code added new properties forces and I'm open up the seeds file my DB seeds file because right now we are creating five breeds we're using faker fakers already plugged into this app in the gem file we create fake horse unique fake horse breeds and then we create horses by name we now want to add some other things to those horses specifically I'm gonna add an age I'm just gonna use a rubies random number generator pseudo-random number generator here instead of faker so I just say a random number these horses they start racing at age three and they can race right up until they're three hundred and forty eighth birthday there I need some commas in here to make this valid that's a comma that's a comma there number of legs and so here we have anywhere from like the one legged hopping horse right up to the twenty seventh leg ultra horse and then we have the top speed and here I'll just generate some kind of weirdo number based on pi 3.14159265 a random number from I don't know 22:56 so a few bits of randomness in there so that we can have horses that have different ages and different numbers of legs and different top speeds so that we have something to display about these horses when we display them I'm thinking now it might have been nice to have even more information but we'll go with this for now at the top of the seed script we destroy all the horses and all the breeds and so we should now be able to run this seed script at the command line with a rails DB seed it will delete all the existing greets and horses and then recreate them and now the horses that creates will have those extra properties in place so I still created five breeds I still created 75 horses which makes sense because that's 15 horses per breed across five breeds and even if I went back to the application we wouldn't see the name or the age or the number of legs yet because that's not in the view yet one of the things we do know is that horses are displayed in two places they're displayed when we go to the individual breed page it shows horses by name and also when we click on a particular horse it shows a horse there what I would like is I would like to have a nice little card to display this horse information and I want on the breeds page a nice collection of cards and then on the individual page just a single card and what I mean by card is we're gonna use the boma framework which is a CSS framework similar to bootstrap there's a bunch of these out there I encourage you to experiment with some of them during the term I imagine many of you have already used bootstrap before so you might want to use something like Puma or semantic UI or materialise there's a whole bunch of them out there they all have different looks and feels and pros and cons I really like Puma it has a whole bunch of like built-in components that I can make use of one of which is a card it also has a very nice grid system that's based on flexbox so we're gonna use a card similar to maybe this one right here where there's some text up top and then some separation down below and it's down below that we'll put like the age and the the top speed and things like that the other thing is is that we want this to be splayed in two places right we want the horse information displayed on the horse show page but also on the breeds show page and we don't want to have to repeat ourselves you don't want to have to style out the horse in one place and then replicate the styles again in another place if you've worked with a JavaScript UI framework you know all about components which are a way of defining the HTML structure of a thing that can then be replicated in many places and rails has something similar to components which it calls partials so we're gonna create a partial for a horse that we can use in multiple places on this page we're going to render that component or the partial for the horse over and over and over once for each of the horses but on the individual horse pages we'll render it just once so we're gonna do that by going to the views horse's folder and I'm gonna create a new file here and I'm gonna name this file underscore which is what all partials start with which differentiates them from other regular views and then I'm gonna name it after what I am going to associate with this partial is I am this is a partial specifically for something that comes from our horse model and then dot HTML air B is our standard view extensions and you can sort of think of these parcels almost like functions for HTML so we're taking some replication out of potentially two locations in our code and we're gonna be able to pass in some data into this partial we're gonna pass in an object of type force and we're gonna be able to access that object with a horse variable so for example we could I just put a paragraph tag in here output the horses named by just going to course taught me a very simple partial that's just gonna take the horse object that's being passed into this partial and display its name using an ARB echo inside of a paragraph tag and then I can make use of this partial in the two places where I said we wanted to one of them being in the breed show page to display a bunch of horses and then one of them being in the horse show page to display a single horse so I'm gonna go into you here show I'm gonna remove what was in there initially just noting the fact that we have an act for spherical that's where the horse being displayed is currently being stored is in that at horse variable where is that coming from well that's coming from our force controller right that's this thing right here so the show loads up that horse variable so I'm going to delete that line there and then here I'm just gonna say render and I'm gonna render that horse variable again a little bit of rails magic here because of conventions and because we followed them what rails is gonna do it's going to look at this object and say okay that's an object of type horse in the horses view folder is there a horse partial named horse and there is and so it'll then take this variable it'll hand it off to that horse partial and make it known as horse instead of a horse and so if I go to this show page here for an individual horse there is the horse name and if we look inside of it it's being displayed inside of a paragraph tag like we asked for we also want our horses to be displayed on this breeds page right now we are displaying the horses by going to the breed going to its associated horse collection looping over them and sort of dropping down links to each horse page instead of having to do that again I can rely on rails conventions and just say render horses and again the magic kicks in and rails says you've got a collection what's that collection full of it'll look inside it'll see that the collection has horse objects model objects of type horse it'll then look in the view horses folder see if there is a horse partial there is and it'll render it over and over one for each horse in this collection and so if I go back to this view file what does it not like nil is not oh yeah it's not horses it's sorry its breed dot horses right because that's what we have inside of this page we have a particular breed it's the breeds horses collection that we want to get to so I was able to see that here because I noticed it was nil sign nil is not an active model compatible object no it's it's read horses that I actually want and there they are all of the horses one paragraph after the other being displayed now they're not links so I can just go in and make them links so I go to my partial initially it'll be a little bit awkward because there'll be links on the page that they actually link to so it'll have a link where we're already at that page but we'll fix that later on so here we are we've got a link to it's going to use the name of the horse and it's gonna link to that horse inside of the partial so that when we reload this page all of our links come back when we click in we're there and then this is the awkwardness is like it's still a link but it's just a link to this page that we're already on so what we'll put an if statement in later where we can see like do we want the link or not but for now we'll just keep it sort of consistent across the tube so again here's what my partial looks like currently just a paragraph tag echoing out a link and then when I'm using it on the breeds page I'm rendering read horses so rendering the collection and when I'm using it on the show page I'm just rendering that horse variable yes I can so there's the partial does anyone have any questions or confusions or things that aren't working on your machines at this point here we're going to bring in four so add this in here saying like added a simple horse marshal so now I want to show a little bit about how we might bring styling into a rails application and I'm gonna do it in there's a bunch of different ways that you can bring in CSS into a rails application simplest way or one of the easiest ways is in your app assets folder any stylesheet you put in the Style Sheets folder it's just automatically loaded so you could download various frameworks and just drop them into that stylesheets folder and that would work there's also sometimes gems that are set up that you can add to your project so for example there's the bootstrap gem when you add the bootstrap gem it automatically adds bootstrap to your application I'm not sure if there's one for boma there could be what we're gonna do is an even simpler fix which is if we go to boma I oh so that's bul ma dot IO and we go to the documentation and the overview and the start there is a single file that we can drop into our layout to get bulma in place and so that is if you go down to the starter template you will see a link tag we're just gonna copy that and one other tag so I'm gonna go to my application layout that's in my app views layouts folder and below where I have my stylesheet and JavaScript tags that rails is provisioning I'm just gonna drop in what I copied and pasted from that layout which is just gonna load bulma up from a CDN a content delivery network and so it's gonna load up the latest version of boma to get newer versions I would just have to update that URL it's sort of a very simple way to get a work into your application boma is what's called a responsive framework and so for responsiveness to work well on mobile devices we also have to add a meta tag to our head to make it so that on mobile devices the device doesn't just try to show the whole desktop app like zoomed out sometimes when you are on your phone and you go to a website it looks like a very zoomed out tiny version of a desktop app and you have to sort of scroll with your pinch zoom in with your fingers to see it that's because they don't have this meta tag that we're about to add so this is the response of viewport meta tag that always has to be present when we have a responsive layout and it's just a weight of hinting to the browser that the width should be set to the device width and that the initial scale is one it can also be used there's a modifier and here we could prevent zooming you could like not only set the initial scale to 1 but fix the scale at 1 you know sometimes see that you'll get to a mobile website where like the pinch zoom just doesn't work and that's because they've used the viewport to restrict it but we're just going to set it up so that the width is the device width and the initial scale is 1 and that will make it so that the responsiveness works well that this thing will work on mobile devices we go back to our actual application we're gonna notice that this Styles that are present in this app the sort of the default styling that web browsers give to things is gonna be stripped stripped away the font is gonna switch over from a serif font you know serif where you have the little hanging pieces off of your characters to Ahsan serif font and the styling of things like headers and whatnot is going to sort of disappear so if I reload this looks like that everything has the same font size including h1s and h2s and everything is now lost sort of the default margins I'm up in the top so the left corner here and what I want to do is I want to go back to that little template and I'm gonna grab two tags here I actually know what they are I'm just gonna type them in one of them is that bulma assumes that everything is going to be wrapped in a section with a class of section so I'll put the end section over here and then it further assumes that we're gonna have a div with a class of container and that div is gonna be closed up here and then I can just poke these things in a little bit as well so a section with the class of section and a div with the class of container both of those are gonna add different amounts of sort of margins and padding in place and make it responsive so that there'll be specific breakpoints where sort of the the default width of the stuff that's on the screen is going to change based on the size of the viewport being used and then within there I've still got my h1 my h2 and the yield which is my individual views like that got the got the margins and padding back in place that's lovely we lost the styling on the h1 and the h2 this is because by default boma sort of like strips everything down to sort of one common look and feel and then you build your styles back up again by adding classes this is also the thing that was sort of like the bootstrap way we style our pages not so much by writing CSS but applying specific styles to elements in the pattern that the framework dictates and so for boma that means that we can go here and look at elements and specifically title to see how we start in style titles and we do so with we have two different classes the title class and the subtitle class those can be applied to anything so they could be applied to headers but they could also be applied to like paragraph tags or whatnot to get the same result and then boma operates on this idea of classes and then other classes that are like modifiers so title and subtitle are two classes but then you can get different sizes of titles by adding like is one or is two or is three beside those things and so I'm gonna go here the h1 and I'm gonna give it a class of title I'm gonna say is one get sort of the biggest of the titles and then here I'm gonna say class sub title is maybe y'all pick up or we'll see what what it looks like if I go back to my application just to see what those look like there's my horses on Rails and there's the subtitle associated with them if I go just to the home page there are a few other places where I might like to drop back in some Styles one of them is this thing here so I'm gonna leave my application layout behind after giving it the title and the subtitle on the h1 and the h2 I'm going to go to the index for the breed there's an H there's an h3 in there and so I will give it a class of title I'll say it is a three like so seems a little too big for me I'll say is a for the one thing I miss when I'm operating in boma that I get in bootstrap our little helper classes to push things around so bootstrap gives me little tiny modifiers that can add margins above or below or left or right we don't have those in boma and so if I want to separate out this from this which I do I need to write some CSS myself well that's a good opportunity to show you where we can add our own CSS in a rails framework so I'm going to do two things I'm gonna go back to my application layout and I'm gonna wrap the h1 and the h2 in a header tag so that I have something to modify so let's see if there's any default styling on that header tag or yeah I get even less of a margin no that's okay so here's my header it's wrapping my h1 in my h2 where I can go put my own custom CSS or s CSS if you're so inclined is in my app asset style sheets folder this isn't really anything that has to do specifically with breeds or horses so I'm just gonna create a new file in here and I'm just gonna call it styles dot s CSS we can put plain old CSS in here but it'll also support sass which is a sort of a variant of CSS that compiles down to regular CSS we'll talk about that in more depth later on in this course for now we're just gonna go to the header and we're gonna say margin-bottom to ram ram and i need to spell margin correctly that's crucial I was telling you the class that I started to see people using Ram instead of em when I peek at people's CSS and I didn't really know the difference and so a student came to me after class and told me that the difference between Ram versus M is is that when you use an M it's like a multiplier of your parent so if you're inside of a container that has a font size of 16 - M is going to give you 32 and if it's a ram it's a modifier of the body and so Ram is more consistent because it doesn't just depend on who your parent is it's always just going to be a multiplier of that base body size you have and and bomas are gonna be what sets up our our base body font size so with that in place we have a nice little space out here and so yeah any new CSS that we want to have custom CSS not just boma class space yes we can put in this file the command prompt I can do a git ad and I can say added the CSS framework with some application layout styling and then I want to just visit the other two show pages to give eventually I don't need any styles there yet but I'm gonna give those styles eventually so here in the show page where this breed name is I can say class title this is in the app view breeds show page so I'm gonna say app title is four and a class of your title is five we'll see how that looks this gives us the ability to make the distinction between like the semantic meaning of the tags that we're using in our application and the styling of those tags the semantic meaning of like an h1 versus an h2 h3 that has meaning to bots like Google so Google will look at an h1 and think that that's like an important distinction of like this is what this page is about this might be like the overarching like header thing whereas an h2 will have slightly less prominence in terms of semantic meaning for the document but then here you can see I'm not always pairing the same number like the size meaning with semantic meaning so it gives them the ability to sort of separate those two things out a little bit so if I click into an individual breed page there is the name of the breed and then the horses of the breed are displayed down below so a little bit of styling I now want to get into this idea of having some cards for my horses and then we can really see the benefit of having that partial because I will only have to implement that in one place and have the card displayed in multiple places once here and once over here on the show page so if I go to MoMA and I go to the component specifically to put component called card I can see let's see here some of what I want I go to my partial control P and to search for underscore force and I want the one that's in my current projects which is here yeah so I've got a div with a class of card I've got a div with the class of card content and inside of that I've got a paragraph with a class of title sometimes when you're working with these kind of frameworks you can get heavily nested structures they all suffer from a little bit of like div itis and that you have lots and lots of divs that have no semantic meaning that are only there for styling purposes that used to bother me it doesn't bother me anymore I've gotten over it what else do I want I want a card footer in here I can close up my card inside here what else do I want I'll put the breed of this horse horse dog breed name and in a moment we'll put in some information for the footer I'll just leave this view for a second I'll come right back to it I just want to make sure things are looking ok here look a pretty card so there's like the card it's got some drop shadow on it there's the title of the card there's the the breed being displayed that's happening because of the div with a class of card the card content and the card footer I go back over to Bulma I want some sort of footer items like this and so each one of those is a footer item a class of card footer item and so I can put in a paragraph tag with a class of card footer item and then I can just like replicate those just go over here yeah three and inside of each one of those that's where I want to display my properties of my horses like their age their number of legs their top speed and so I can do that like this I can say well maybe you'll do this age and I will echo out the horse I always want to type our sources I don't know something's wrong with my muscle memory today horse dot age and then here I will say legs legs and that'll be for stock legs or number of legs and then lastly I have those b3 card footer items that will be displayed below the card content later on in this course we might add like images to horses we might like put a card image in at the top of the image might add a description of the horse we might put that in there as well but for now this is enough to get us to the point where we have something that looks like a card like that lacy is a hundred and eighty six year old horse with ten legs and a top speed of a hundred and sixty kilometers an hour let's put in kilometers an hour there we are yes let's do that let's do a dot round two decimals that's better you never know though like in like the cutthroat business of futuristic horse racing some of those decimal places might actually be important but for now we'll just say two is good enough all right so that's a a horse on its own remember we're also using this partial for the collection of horses on the breed page and that's not going to look too great right now we're gonna have to do a little bit of an improvement there oh the other thing we should do is maybe just make it so that I can get back to the breed page by linking to the breed that's here breed should be a link to the horse breed there we are I've changed that up so that it didn't just display the breed name but we used the link to where the breed name was the link text and the horse breed was the target for the link now I can click on that so I mean looks okay but it's not really what I wanted what I want for these cards is how we typically see cards laid out together is sort of in a column based manner right like if you think to this idea of cards they were first popularized by like pinboard and then they sort of went everywhere on on the Internet we sort of want a certain number of columns and we want the horses to sort of be stacked within those columns and so what I'm gonna do is in boma we have a column system which is a way of making columns and the way we do that is we have a div with a class of columns and then inside of it we have individual column elements and so over on my not my horse show page but on the breed show page I want to wrap everything in a class of columns and then I think there's like an is multi-line multi modifier they don't put that in it'll just keep putting more and more horses calling after column it's beside each other with multi line it'll wrap them and do some fun flex boxy stuff so that as I sort of work on different devices on a mobile device we might only have a single column but are not just off the Vice we might have multiple columns so we're saying we're wrapping our horses in columns and then back to the horse partial we're going to make it a column so I will say class column you can see what I mean now about divided us right we're getting deeper and deeper here in terms of our nested structure losing that final div in the bottom there so I've wrapped the entire card in a column and so that's lovely here's Bolton Cash and Isabel they're side by side maybe we could do a little bit better with how we're styling this information down here like maybe the words agent legs and speed are maybe they're bolded but nonetheless they're or maybe we always ensure that like the number comes down below we won't get into the finicky details of the styling right now you can see on most of these columns we've got four to a column but we don't we don't have a number that's evenly divisible by four so because of flexbox and the final column we we have three which is which is nice if we still go to the individual horse pages we've still got this overarching you know one big column which is nice as well I think I should probably wrap it in columns just to make it more consistent that's the horse show page so even though it's just a single element it's now an element of type column which expects a class of columns as a parent and that should fix this little bump out here yeah that was bothering me the alignment so that was in my app views horses show I wrapped the render in a columns there does anyone need to see any one of my views right now the partial or the the partial air and I'll put all of this up on to I'll put all this up on to what should we call it github I still sometimes revert to be ours I don't know if that's like the worst thing in the world but there we are that makes things look a little bit more consistent for me yeah yes so the breeds show is right here which has the columns and then there is multi-line modifier on that is - multi-line and if we didn't have that is multi-line then things would not work as nicely we just assumed that we were columns all in one long row and then if I go over to full ma and I just look at my type of graphic helpers do I have typographic helpers in Bowl nah I do texts wait yeah I want like some some medium bold text wait please and I want that on my horse on my strong so I'm getting finicky here but that's just sort of how I get when I work with styling I guess I don't even need that to be a strong tag I could just make that a paragraph tag oh and I'll get rid of my BR y a paragraph tag class text weight semi old let me just see what that's looking like Oh yuck okay let's not go there I'm not gonna get finicky right now because I'm just breaking things maybe it was me putting a paragraph inside of a paragraph that did that yes but then it'll I don't want my age to be bold I just want the text to be bold maybe it should just be a span let's see let's see what we got here sort of now the ers not working okay forget it I'm not gonna be Kyle finicky styling person right now because that's not the point of today's lecture is it all right and the nice thing we can see now is we do have built-in responsiveness so if I do go to my dev tools with a control shift I if you're in Chrome the same thing will get you there and I go to a little mobile responsive button which is in the top right corner of the dev tools again that's the same in both Chrome and Firefox you can either pick from a list of devices and be like well I'm on an iPhone it seems like their devices are a bit old in terms of numbers but it gives you an idea of like on a device that is of a smaller screen size things have collapsed to a single column right and I can also just sort of fold it in and out all right so on a large on a large desktop we're gonna have at most four columns so there's sort of a maximum size so that on really really large screens we don't go too huge and make people like turn their heads while we're there looking at our web page and then as the screen size decreases you get to a breakpoint where we go from four to three columns from three to one and then one collapses down to a point and then it's got a minimum size on it as well so we can we can support screen sizes down to about 280 300 ish and then beyond that tiny size of a screen that's not going to look as nice anymore but there you go that's that's really what I wanted to show today which is sort of how easy it was to bring in a frame were like like boma make the application look quite nice again the problem with all these frameworks is like the issue with boma are with bootstrap when it got really popular is when you used it like it was very obvious that your website was like a bootstrap based website because it looked like all the others now with boma you're gonna look like all the other boho based websites but for prototyping specifically it just gives you the ability to create sites that look nice without having to do any of the design yourself I personally am NOT a designer when I need really nice design and I work with a designer and when I'm just prototyping stuff I work with one of these frameworks because it makes me look a little better than if I was just doing my my hand created CSS so we're gonna continue next class with this same application we're gonna continue with horses on Rails there's not much more that I want to show you here there is the idea of maybe a little bit of interactivity from the user perspective maybe the ability to add comments on horses and beyond that I'll just think if there's anything else that we really need to add beyond what we learned today which was partials and styling but if if anything we'll just do a little bit of interactivity giving the use of the ability to fill out a form submit that form and add to maybe a comment table for particular horses the other thing that I was going to say is I do have a video that I made last term it's not a video that I recorded in class it's just one that I recorded over the weekend and then I sent it to the class and it has to do with pulling data into your intro project some students are going to be pulling data in from like an API other students wanted to know like how can I pull data in from like a web page like building like a web scraper so you have a web page that doesn't have an API but you want to pull a bunch of data in from that and so I made a little video that talks about JSON API consumption and web scraping it's just under an hour long and so if you're either having issues with the API consumption you want to see how that might operate in a rails context or if you have a website that doesn't have an API but has structured data that you want to scrape from your API or from that website into your database that would be a video I'll post that up on learn and then the other thing that I will mention about the project is some students get confused about the fact that there's an API behind the scenes and they wonder if that API has to be part of the entire thing like as the user is navigating around the page is that API being hit and the answer is no what you want to do is to build a seed script that will hit that API a bunch of times pull in a whole bunch of data to populate your database similar to what we're doing with faker right now and then just have that as a bunch of static data and build your website around that and so that could be done again with an API or with some web scraping and if any of you picked the starwars CPI for your project well you get a little bit of a bonus because that's what I cover in this particular video so it's a fairly simple API though and I sure to show how you can navigate a few of the associations to pull in not just one bit of data but to traverse some associations all right so that's all I got for you for today thank you very much for coming to class and listening to me talk about horses

Channel: Kyle Geske

Views: 817

Keywords: Ruby, Rails, Ruby on Rails, Bulma, Bulma.io

Id: T0PmtPoNrdA

Length: 74min 35sec (4475 seconds)

Published: Wed Feb 12 2020