This section of the course is going to be all about refinements and how we can polish up our application I created a new item in our Icebox called Final items prior to launch and I've gone through and listed off a number of things that I would like to finish up before the application is marked as complete and we push it up. I want to take a little bit different approach on this. I'm going to record myself and build a number of screencasts showing how to build each one of these items, however, instead of simply moving on to the next video. I want you to go through this list and try to go and build these in yourself. Each one of these items I think is relatively explicit but I'm going to go down the list one at a time just so you can get a feel for what I'm asking you to do. It's completely up to you. You can move on to the solution videos if you want to but I find it personally, incredibly helpful when you can challenge yourself to do new things and to stretch yourself. That's how you get better, that's how you can learn how to improve. Let's talk about some of the things that I want to do.

I want to have a new custom scope for blogs right now by default, it's showing them with the one that was updated the very latest in the very back which is kind of the opposite of what we want. I'd say implement a recent scope so that it shows the blog posts that were created last so the newest ones are at the top and the oldest ones are at the end which is pretty much the standard way that that would be. Next, we already have the concept of blogs and having a topic but we haven't really built that out yet. So, one will have to require all blogs to have a topic and then I'm also going to talk about how we can build out our topic. We need to have an index page for our topic and for our show actions and they should both utilize the blog layout. I think that's the most logical. Then also add a topic widget. Inside of the blog layout put a call that's going to show all of the topics. If you are writing about development one could be Rails and the other one SQL and if you click on it it should go to the topic show page. There should be a link right on the side of all the blog pages where you can click on any topic and then go see those related topics. Or, I should say the blog posts for the topic. Next, our blog status update in the form. Right now we have the concept of a draft or a published status, but we haven't added that to the form. I'd say, go add that to the form in the form of a radio button. Also, we need to have a way of tying our topics to blog. The most logical approach with this would be to wire up a new form element inside of the blog form where you can pick the topic that you want the blog to be related to. Next, we have a database table for skills. Let's add that and render those on the profile page. I'm going to put mine on the about page, you can put them anywhere that you would like but show off what skills that you'd like to showcase along with the percent that you have on those. I personally would recommend using something like a bootstrap progress bar in order to do it. Next, we're going to add additional information on the about page and I think that I'm even going to put a card around it. It's up to the look and feel that you're wanting to go with but I'm going to do something like that and update the information. Feel free to explore bootstrap and see what kind of things that you want to do. To give you a little bit of a hint on what I have planned. I think that I'm personally going to add some collapsible units so I could do something like click on something like, I don't know books that I've written or jobs that I've had and if I click on the button those items will scroll down right below the button so that whoever's looking at the page would be able to see it. Next, we have our bootstrap fonts but I'm not going to be happy with keeping that so let's implement a custom font and you can go to fonts.google.com to find all kinds of cool and free fonts you can integrate. Next, we're going to add the card class to our about contact pages, just because it's a little bit easier to read. You remember very early on when we started talking about controllers and the params hash? We had our source tracker and we had it built out. Right now we have it on all the footers but nothing's actually being shown. Let's update that so that the source tracker can be shown on the blog and the portfolio pages. Just as a quick review on what that is. That's where you can pass in, in the URL a ? followed by q= and it will pop up so if I did something like this...

it would track it and it would capture that the user was sent from Facebook and then we can show that on the site on multiple pages and it follows them around. I'm not going to put it on the application layout. Instead, I'm going to put it only on the portfolio and the blog layouts and feel free to put it wherever you'd like. I think I'm going to put mine in the blog widget sidebar along with at the top of the portfolio layout. Next, inside of our blog show pages, I want to add some breadcrumbs. Something that would say like, 'home/topic', and if you click on the topic you can go see other blog posts related to that topic. Then the name of the blog that you're currently on I think something like that would be cool. Next, we've already implemented fontawesome. But I want to update a number of our links especially on the blogs for actions. Right now we simply have text that says draft or edit or anything like that. I want to add icons for those. I think that's a much better user experience, even if you're the only one who's ever going to see it. I think it's more intuitive to go with icons as opposed to text. Next, let's talk about how we can use a partial for admin blog actions right now whenever we're rendering out all of our blog posts. We're going to have this on the blog index but we're also going to have it on the topic show because remember with the topic show I want you to render out the blog post for that topic, this page here for our topic show page is going to be pretty much identical to our blog index page. The only difference is going to be topic shows are going to be filtered to only show blog posts for that specific area, for that topic. But I think it's going to be smart to render those admin items so that we already have it set up so only you as an admin are going to be able to see the items like draft and edit and those kind of things. But we also need the ability to have those only called from a partial just to make things a little bit better on a code organization standpoint. One thing I forgot that I just remembered is we need to update a blog scope, so only admin users see draft posts. Because remember right now we don't have this filter so you could put up a draft and anyone who visits your site is still going to see it. We should be able to hide those. I'm going to put that right here. Then I am not 100% happy with the design of the blog header. You can definitely keep yours, but this is something I have on the list because this is going to be my own portfolio as well. I'm going to update that and I think it would be a good exercise. If you do want to have a different Nav because you can see how easy it is to simply swap out designs and classes when you're using bootstrap. Next, we're going to talk about a markdown integration. Right now if you type in code or you type in if you want to have italics, bold, different paragraphs in your blog post the kind of things you'd expect to have in a blog post. Right now it all gets mushed together and that's because Rails simply takes all the content and simply prints it out on the page and that's it. But let's talk about how we can integrate marked down. I recommend for you to be able to go and research it and see the different things that you can implement in order to get that working and so just like we use markdown for our readme on github you can actually integrate that very easily. I'll show you. If you can't figure it out I'll show you how you can do it in just a couple of minutes with Rails. Lastly, I want to integrate a favicon, right now you can see that by default our site simply has the default document favicon and I want to walk through and have one of our own.

That is a lot of work but I think that you'll be surprised that even though it's going to take some time to polish it up this is a very standard process. Once you have an application that's functional and you deliver it either to your boss or to a client. One of the first things they're going to do is go through it, send you back a full list of changes something like...

this list right here and then you have to go and implement them. So, I wanted to kind of mimic that process. Like I said I definitely recommend for you to not go on to the next guide, and to take down this list right here and try to build these all out yourself. I'll include this full list in a text format inside of the show notes so that you can just take it and then go through them. Then after you have tried either successfully or unsuccessfully then you can go through the next set of lessons where I walk through how to implement each one of these items. So great job. Good luck in going through all of that and I'll see you in the next guide.

Task List

• Recent scope for blogs
• Require a topic for blogs
• Topic index and show
• Topic for blog widget with scope for topics with blogs
• Blog status update in form
• Topic for blog form page
• Skills on about page
• Additional Information about page
• Custom font
• Card design for about and contact
• Source tracker on blog and portfolio
• Breadcrumb on blog show
• Icons for actions on blogs
• Update blog scope so only admin users see draft posts
• Partial for admin blog actions
• New blog header
• Markdown integration
• Favicon integration