This was something I could not find anywhere - apparently people just ‘know’ how to do it. I didn’t and I couldn’t find anything that taught you how. But I have something now and you can take a look. This is how your users can ‘favorite’ in your website. It works great for any kind of social network or if they want to follow certain topics. What kind of association is it? First you need to decide what kind of association you are going to have with this ability of users to favorite. You probably have two models, a User model and the model the user can favorite. For this example, we’ll do a Team. You want users to be able to follow certain sports teams which means you have something like a Team model. If the two can be directly joined together, then you most likely need a has_and_belongs_to_many...

How to set up the Slick Carousel Slick is just that- slick. It’s an awesome way to include an image slider/carousel in your website without adding heavy code to your site. What makes it so great is it’s easily customizable. You have full access to the CSS and JavaScript files and Ken Wheeler added a few things to make is plain easy. Only problem is, there are a couple things missing from the documentation and it can be hard to set up initially. This will walk you through getting it set up from a blank website. First thing to do is to download Slick (and come back here). If you already have a website up and going, then you can just copy over the files. You can also use the CDN so you wouldn’t have to download but I don’t recommend it as it’s more confusing and you have no...

Create an image carousel with AngularJS and Slick! This post will utilize Slick’s AngularJS version of their sliding image carousel. This is also geared towards those who are still trying to learn AngularJS and JavaScript (or those who got lost with the documentation). If you look through the Github repo and README you’ll notice there is some lack of documentation. This post will help walk you step by step to getting your own carousel up and running. However, I do assume that you have some knowledge of AngularJS. There are several AngularJS carousel’s you could apply this to but I like Ken Wheeler’s Slick the most and I think it’s the most ‘editable’ of any of them, so it’s my personal choice. But let’s get started. First create an empty folder in which your carousel application will live. Get in to this directory and run bower install angular-slick. While you’re...

Last step - setting up your custom domain for Jekyll. This last part can be a little confusing but it’s actually more confusing with the service you registered your domain with. But here’s a quick rundown: Custom Domain with Github Pages Remember that your site is hosted on Github, not Jekyll, so this will actually require working more with Github Pages than Jekyll. I’m sure you’ve come across their instructions, but if not, here is a link. Here I’ve consolidated it all as theirs goes across a few pages. Adding a CNAME It’s as easy as it sounds. In your text editor, create a file called CNAME - no file extension, just all upper case CNAME. In this file write your domain. I just wrote ‘www.trevordjones.com’. Then add and commit, then push it to Github (gh-pages of course). Ok, that’s all you need to do on this end. Setting up...

Showing your users’ favorites: This is a continuation of my favorites post where I showed you how to create the appropriate tables in your database so users can favorite . . . whatever. In my case, it was favoriting certain leagues and teams for soccer. But it can be a ‘like’ button or anything like that. Now if you want their favorites to show up on a certain page, here are a couple ways to do that. In this post I’ll go over the routes file and in later posts I’ll show you what the controller and model could look like (I’m sure there are several ways to code this up). Routes file Create a place for your favorites to live in your routes.rb. You can do a couple things here. I wanted my URI to look like favorites/leagues but I could have also made it leagues/favorites. Here is how...