I’ve Got 99 Problems – but Deploying My Rails/Angular App to Heroku is No Longer One of Them:) PART 2

So where was I? Oh yeah, I left off at changing my problem js file extensions to ‘.es6’ so there would be no problem with new JS6 syntax. This definitely helped, but in it’s place sprung another problem. Only the images that were not hooked up to the database on my site were showing . So I used my noggin and realized that I never migrated my database to Heroku! DOH!

When I tried to run ‘heroku run rake db:migrate’, the migration kept aborting with this message:

PG::UndefinedTable: ERROR:  relation "users" does not exist

I definitely had a table called “users” so that didn’t make much sense. I did a little digging and found out that postgres (the database Heroku uses) does not like tables relating to other tables that have not been created yet. The table being created was referencing a table that was created on a later migration. I know it’s not a good idea to mess with the names of migration files, but I did anyway. Rails timestamps migration files, so I just had to change my “users” file timestamp to a date before the file in question.

So I tried the migrate command again and got the same error. Strange. My migration files had quite a few additions which later became subtractions. I decided that I only really needed three migrations for three tables. Since I had a good seed file which could recreate everything I needed, I decided to recreate only the migrations I needed. This would allow me to reset the database and start from scratch. I deleted the schema and development.sqlite3 files so there would be no references to the old migrations. Now I could recreate my database and schema file.

$ rails db:drop db:create db:migrate db:seed
// This will delete the entire database, losing all data
// recreate a new database and runs the migrations
// db:seed will seed the database from seeds.rb

I had a brand spanking new schema and database, ran my local server and everything was running smoothly. So I ran the heroku migration command again and got THE SAME ERROR!! WTF?!? After googling for a bit, it hit me. I didn’t push the new changes to heroku! Often times it is the simple tasks that one might forget to do that causes errors. Note to self: if you are banging your head against the wall, stop for a minute and think of the steps you would normally take. Save yourself some time and energy. The first change to the “users” migration file name probably would have worked if I just slowed down a little.

After trying to migrate to Heroku again, it worked! Now my site is up and running, and I’m feeling good! Hopefully this helps fellow programmers out there that get stuck – and have sore heads! As always, thanks for reading!

I’ve Got 99 Problems – but Deploying My Rails/Angular App to Heroku is No Longer One of Them:) PART 1

I’ve been trying to deploy my app Medidate to heroku for a while. I sort of let it go a couple of months ago, but I’m using the app on my portfolio site, so I wanted it to work. It works fine when deployed locally, but Heroku does not likey. I’ve deployed straight up Rails apps with no problem. Angular definitely made it a lot harder. This sort of thing can make a developer go crazy, perhaps contemplating throwing their laptop through the closest window. Of course I would never do that! But other less even keel people might:) I am using Rails 5, AngularJS 1.6, and Bower for dependencies.

I was actually able to deploy to Heroku, however, nothing was working. What I mean by working – none of my styles or javascript files were showing up. I just had a white page with a few non-styled links in the navbar. I assumed it was an issue with the Asset Pipeline in Rails and how it was compiling in Heroku. A friend had a similar issue (from what I hear, many people have trouble deploying Rails/Angular apps), and he said a great gem to try out was ‘ngannotate-rails’. This gem basically fixes any dependency injections issues in Angular files when minified. This helped a lot of other devs – not me though.

I needed to precompile my assets for Heroku. I found this little line of code to do that:

RAILS_ENV=production rake assets:precompile

That did not run and was aborted. The reason?

ExecJS::RuntimeError: SyntaxError: Unexpected character ‘`’

Hmmm. Since it’s a JS error and the character is a backtick, I thought it might have something to do with ES6 syntax, which I used a bunch in my code. After Googling around it looked like my assumption was correct. The answer? I needed more gems of course! Sprockets and babel-transpiler would take care of translating any new JS6 syntax that the Rails precompiler (Uglifier) was having trouble understanding. Unfortunately, that didn’t do the trick and I started to change my files error by error by converting any ES6 syntax to the old style. It’s all a learning process right. Ugh.

I used some great advice via Stack Overflow on how to track down bugs when compiling – run the rails console, then type:

JS_PATH = "app/assets/javascripts/**/*.js"; 
Dir[JS_PATH].each do |file_name|
  puts "\n#{file_name}"
  puts Uglifier.compile(File.read(file_name))
end

This will show you which files are causing the errors. After going through one file, I thought I might be missing something in regards to babel. Luckily I was! I had to add the .es6 extension to my problem js files. After I did this, everything was good. But not for long:( Stay tuned next week for the continuation. Flashbacks of watching an episode of Scooby Doo and seeing ‘to be continued’. I hated that!

Adding a Gradient to a Background Image with CSS

I’ve been building a portfolio site for myself and came across a small problem. I wanted the navbar to be transparent on the hero part of the page, however, the text in the navbar wasn’t showing up very well with the background image that I was using. Take a look…

Portfolio-site screengrab

Background image without gradient at top

Notice the navbar text. Not very clear if you ask me. What to do? If I had a bit of gradient at the top, that would let the text pop more. Of course I could use Photoshop to transform the image, but being a developer, I wanted to do it with code. It turned out I could accomplish what I wanted with CSS. I have to admit, even though I’m a Full Stack Developer, CSS has never been my thing. But I have to say it’s been growing on me lately. The CSS for my background image looked like this:

.background {
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-image: url('../images/road-trees.jpg');
}

Pretty simple. The color of gradient at the top of the image should be within the image that I was working with. I found a cool extension for Chrome called ColorPick Eye Dropper that gives you a color picker that you can use for whatever website you’re on. I used this to find a nice dark green in my image. The CSS is quite simple. You just have to add a linear gradient to the background image styling like so.

.background {
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-image: linear-gradient(
      rgba(18, 39, 32, 0.9),
      rgba(255, 255, 255, 0)
    ),url('../images/road-trees.jpg');
}

The first value of the linear-gradient represents the top of the image and the second, you guessed it, is the bottom. The last value of the rgba is the opacity. As you can see, the second value is white with an opacity of 0, which makes it transparent. This gives us the final product.

TJ portfolio hero

Image with CSS gradient at top

I’m not a designer, but I know that looks better. Everything is popping nicely. Happy coding:)

Make Navbar Links Active With jQuery

I am working on a single page portfolio site for myself and wanted some functionality with the navbar. In particular, when a link on the navbar was clicked, to not only to navigate to that portion of the page (duh), but also to make that link active. Other than HTML5 and CSS3, I’m using Bootstrap and a neat little jQuery plugin called scrollTo for smooth scrolling, you know, so the page doesn’t jump around on each click.

The first thing we’ll do is setup the navbar.

<div class="navbar-wrapper">
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#top" class="navbar-header">
            <h1 class="brand">TJ Hill</h1>
          </a>
        </div>
        <nav class="navbar-collapse navbar-default collapse" id="main-nav" role="navigation">
          <ul class="nav navbar-nav navbar-right nav-margin">
            <li class="active"><a href="#top">HOME</a></li>
            <li><a href="#about">ABOUT ME</a></li>
            <li><a href="#skills">SKILLS</a></li>
            <li><a href="#projects">PROJECTS</a></li>
            <li><a href="#contact">CONTACT ME</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

The main part of the navbar we’re looking at is the unordered list section with the links. Notice the home link is set to active already. To access the clicked link with jQuery we’re going to use a click event and we need to specify what our event handler is looking for. With the code from above we can see it’s a list element that is a child of an unordered list. Just in case we have other unordered lists in our html, let’s make it super specific. It will look something like this: $(“ul.nav li”). This can be written many ways but this is the current standard. Next we need a click function and the callback function. Here’s the full event handler:

$(function() {
$("ul.nav li").click(function() {
    var anchor = $(this).find('a').attr('href')

    $.scrollTo(anchor, 800)
    // remove classes from all
    $("nav ul li").removeClass("active");
    // add class to the one we clicked
    $(this).addClass("active");
 });
});

$(this) is the link that was clicked. We want to access the href of the anchor tag of the link that was clicked. To do this, we’re setting a variable called anchor to the closest anchor elements’ href attribute. This variable be used in the scrollTo function, which takes two arguments. The first is the id where we want to scroll to, and the second is the speed in milliseconds. Next, we’re removing the active class from all nav links, basically resetting them. Then we use jQuery’s addClass method to add an active class to the clicked link.

In our css file we can set the active rule to anything we want. We can change the color, underline, make it bigger, you name it. Although jQuery is declining in use, it still is the most used JavaScript library and very useful.

On a side note, if you’re used to using ECMAScripts 6 arrow functions, don’t use them with jQuery yet. They are not supported with all browsers and didn’t even work in Chrome. I found out the hard way and wasted a few hours. Don’t make the same mistake;)