How to Clone a Website Using Chrome’s Dev Tools Part I

Ever want to copy a website? Well, it’s pretty easy – especially with Chrome’s Dev Tools! I find it pretty useful to go into someone else’s code to see how they’re doing what they’re doing. Then you can implement new cool features for sites you’re working on. I’m not going into complicated websites with API’s and the like; just a simple static site.

I’m going to be using Carbon Five’s website as reference. First head on over there, then right click on the page and select ‘view page source’. This will show us all the html for the page. Now just select all (command + ‘a’) and copy. In your text editor of choice (I’m using Atom), create an index.html file and paste the html there. You’ll see a bunch of files that are referenced in the ‘head’ of the document. We’ll have to copy the non-CDN local files into our text editor.

We’re going to open each file from the page source and copy file into our text editor.

Screen Shot 2017-07-02 at 3.41.31 PM

Create folders for each type of file, ie. javascripts, stylesheets, images, etc. We’re going to do what we did above when copying and pasting all of the HTML. Starting from the ‘javascripts/showup.js’ file in the head of the view source page document, click on each file, select all, copy (noticing a trend?) and paste into a newly created file in Atom. Name the file the same as the file you’re copying from. From here, let’s see where we stand by opening the index.html file in Chrome. Go ahead, I’ll wait…

Screen Shot 2017-07-02 at 5.24.47 PM

It should look something like this

Woah! All of a sudden we’re in 1995 and Nirvana’s on the radio! We’re getting the bare bones HTML here. Let’s take a look in the console to see what’s going on under the hood. Command + option + ‘j’ will get us there. Notice all of the errors.

Screen Shot 2017-07-02 at 5.30.38 PM

That’s a lotta red

There are a ton of files that can’t be found. There are definitely some files we haven’t looked at yet, but let’s focus on the ones we have. Our file directory must be different than Carbon Five’s. All we have to do is reference them a bit differently than we are.

Let’s look at the non-CDN files in the ‘head’ of our index.html page. They all start with a forward slash, but if we’re referencing from the index.html file, we’ll have to prepend them with a single period to jump up to the root directory. Start from the ‘showup.js’ file start adding.

<script type="text/javascript" src="/javascripts/showup.js"></script> // This
// Turns into 
<script type="text/javascript" src="./javascripts/showup.js"></script>

When you’re done (remember to save), refresh your index.html file in Chrome. You’ll notice a few things happened. The page has some styling now – not great, but it’s something. Next, we have less errors in the console. Sweet! Let’s keep going and turn these errors green.

In the console, notice how the cdn files which can’t be found start with two forward slashes. Since they are referencing outside websites as opposed to local files, we’ll have to prepend them with ‘https:’, and they should be good to go. Back in our index.html file, let’s do just that. Once you’re done, notice how the links turn blue. We now have good links. Go back to your browser and refresh.

Screen Shot 2017-07-02 at 5.41.40 PM

Getting there!

Now we’re talking! Since we’re now referencing the bootstrap cdn files correctly, we have our navbar looking good and the page layout is looking much better. Next time, we’ll add images and conquer any other errors we come across. Until then, CHEERS:)


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(

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!

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>
          <a href="#top" class="navbar-header">
            <h1 class="brand">TJ Hill</h1>
        <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>

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) 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;)

Using Bootstrap to Create Dynamic, Responsive Columns

Bootstrap is an amazing framework for creating professional looking websites, quickly. I love it for many reasons, but my favorite has to be using it in conjunction with a repeat or loop method to create a responsive, dynamic section of a website. I’m going to use a sample app I created with Rails, called Produce App. For theses examples, I’ll be using the Juices section of the app, more specifically, the show page for individual juices with ingredients. Since each juice has different ingredients, we’ll be iterating through them and setting each with a Bootstrap column.


Similar to all modern frameworks, Bootstrap is built upon conventions. Back in the old days – the wild, wild west days of web development – every developer was  sort of on their own and repetition was the name of the game. But once you’ve built something a few times, you’ll probably notice that you’re writing a lot of the same code. Repetition can slow things down quite considerably. In the mid-aughts some awesome people started to build frameworks that would take much of the arduous and repetitive work out of development so you wouldn’t have to reinvent the wheel every time you began a project. This is a main reason why the web has grown at the exponential rate that it has over the last ten years – developers can spend more time developing and less time repeating themselves.

Bootstrap Columns

Back to the task at hand. Bootstrap breaks everything into containers, rows and columns. Every container can be broken down into 12 columns. If you were to build inside of one of those columns, you have access to another 12 columns, and so on. To use the aforementioned Produce App as an example, each ingredient has its own image of a produce item, its name and quantity to make the juice. To make this look presentable we’d like each row to have three ingredients and if there are more than three ingredients, then a new row would start and seeding would resume. So if we had a Carrot Apple Juice where the ingredients were – you guessed it – carrots and apples, then they would be in the same row.


Carrot Apple Juice (not center aligned)

However, if there were more than three ingredients they would get pushed down into a new row. This is the beauty of Bootstrap. What makes it even more beautiful is that it is completely responsive, meaning when the screen size gets smaller, the columns will fluidly break into new rows at certain breakpoints. This allows a row to have three columns when the page is viewed on a desktop and turns into one column when the page is viewed on a phone or tablet. Responsive.



The ‘each’ loop that iterates over the juice ingredients.

Here we have an array of juice ingredients, namely @juice_produce. The second line is where we set Bootstrap in motion and set each column to a width of 4, since we want three columns. Every iteration of the each statement will produce a new column. When there are more than three ingredients, a new row will start. Pretty cool!


Sweet Detox (not center aligned)

These look ok just with standard Bootstrap columns. However, I really wanted these to look better.  The rows look great if there are three or six ingredients in each one. But when there are less, the columns are not centered and look out of place. Luckily, we can add a class to each column giving some extra instructions so we can make it look more polished. We’re going to add a css class called ‘col-centered’ (you can call it whatever you want). In our scss file we declare the class and get styling.

The first line will keep our columns in the same row. The second line is where the magic happens. When we say ‘float: none;’, we’re telling Bootstrap not to set the columns up in their normal positions. Normally, the first column would be all the way to the left of the container, second column in the middle, and third on the right. With float set to none, if we have one column it will be centered and not floated to the left. Adding a second column will center both columns. While a third would set all the columns in their regular positions. The rest of the lines beneath are concerned with the image and text positions.


Carrot Apple with center alignment


Sweet Detox with sweet alignment:)

See how the second row is now centered? Looks much better in my opinion! Have you used Bootstrap in a similar fashion? Let me know in the comments. Thanks for reading!

AngularJS: We have an Error

If you’re like me and find AngularJS hard to understand, then debugging can be even more difficult. Since I’ve been running into them quite often, I’ve improved upon my abilities to decipher the cryptic errors that pop up in the console. Most of the time, these pesky errors are of the simple human variety: as in, you probably misspelled a word or forgot to add a dependency. In my case today, it happened to be loading my scripts in the correct order. Here’s the error I was receiving:


Lovely, right? Okay where to start. Well, of course now I know, but I’ll take you along through my thought process. First, I checked app.js to see if there were any typos. Nope, sorry sir, move along. Second, as you can see from the error above, the last line says PostService.js.15. So I’ll check out that file, and on line 15 the module is correctly stated. The only other place it could be (since my app is so small) is my index.html file. Let’s head on over there. My scripts were loaded as follows:


These were loaded just before the closing body tag. See anything troubling? Well, I have a service and a controller loading before my app.js file. So when the scripts are loading, my module hasn’t been created yet. Simple, yet frustrating. So just remember to load your app.js script before your other js scripts (and after your angular.js scripts). Oh Angular..some day we’ll be friends.


Rails App with jQuery Front End

Wow. This stuff is so cool. I thought Rails was cool enough, but add in some AJAX, jQuery, some Handlebars formatting, and it’s pretty awesome. I likey! So, I’m writing about my second to last project in the Flatiron Online curriculum. It wasn’t a stand alone project; we were building on top of our previous Rails app, just with with a jQuery front end.

jQuery and AJAX have really changed the game and are the main reasons why apps and the internet in general have grown by leaps and bounds in the last ten years. Let’s face it, if you have JavaScript running in your web app, it’s going to slow down page loads. Enter asynchronous page loading. This allows all of the scripts to load on the page at the same time. This makes page loads much faster by allowing less hoggy things like HTML and CSS to load while the JavasScript is loading at the same time in the background. This allows the user to see the page content before all the JavaScripts are actually loaded. In the old days, you wouldn’t see anything on the page you visited until every script was loaded. How far we’ve come!




The real magic happens when Ajax and jQuery are used together. Ajax allows you to make calls to the database or API behind the scenes, or asynchronously. While jQuery makes it so you can change just what you want on the page (DOM) with the data from your Ajax call. Normally, when a user clicks a button – lets use a comment form, for this example – the following happens:


  • The clicked button will take all of the data user filled in on the form (parameters) for a ride to the associated controllers ‘create’ action, which is specified in the form. This will include the comment itself, and the users id.
  • The ‘create’ action will try to make a new comment in the database but first it has to pass inspection from the associated model. In this example, we’d go the Comment model.
  • If there are any validations for the model, the parameters sent through will have to pass or they will be sent packing and redirecting to the place they came from, with a warning to boot – You must fill in the comment box!
  • Assuming they pass, then a new comment will be created in the database and we’ll be redirected to the show page. We’ll call over to the database for the newly created comment by the parameter id sent along from the create action to the show action.
  • Now we’re ready for a new page load. The page refreshes and we see our new comment.

That’s quite a lot of work and we have to when the page refreshes, it has to load everything all over again. It would be so much better if the page didn’t refresh and just the newly created comment was appended to it. Can this sort of thing happen? Why, yes Bobby, it can. Enter the world of Ajax and jQuery! In simple terms, jQuery will hijack the submit button request and will handle it a little differently. Let’s check it out!

  • Now when our user clicks the submit button on the comment form, jQuery will be listening for this click. Instead of the usual route to the controller action, now the jQuery hijacks the information filled out from the form and we can do what we please with it.
  • Here, we’d serialize the form, which basically puts the pertinent information into JSON (JavaScript Object Notation) and call a handy function called preventDefault on the event. This will prevent our page from reloading, which is its default behavior.
  • With the JSON, we can make our Ajax ‘POST’ call. This will basically start the usual process described above, sending our data to the ‘create’ action of the controller and so on.
  • When the comment is created, we get the success call back to our Ajax function and we can append the data to the DOM with jQuery.

This is the modern web. This is what makes it so cool. From Waze, to Amazon; they work so well, and so damn fast, because of JavaScript, jQuery, and Ajax. I’ve tried to explain this process as simply as possible, but there is much more going on behind the scenes and I will go there in a future post. jQuery is fine for appending simple things to the DOM. But what happens when you want to manipulate quite a bit of information on the DOM? Like this grossness:


YUCK!! This is what templates like Handlebars is great for. While I’m not an expert, I’m going to write about my process of refactoring the ugliness above into a nice and neat   Handlebars template (which I found very confusing at first) and JavaScript Model Objects (prototypes). It will be a series of posts going through the process from ugly to beautiful. My very own makeover show. Heh, that’s a good idea for a show: Coding Makeover. Or maybe: Coding Nightmares. Anyway, until then…




In the Drivers Seat


This is total bullshit!

Up to this point in my coding career, I’ve basically felt like I had no idea what was going on. I learned a ton of Ruby. Great! SQL? Awesome! ActiveRecord? You betcha. The thing is, they were all disparate parts of the same vehicle. Sort of like learning about what a steering wheel does. Then learning about the accelerator, followed by the engine. Cool, but how do you drive the freakin thing. Wax the car you say? Ok. Sand the floor? Ok (but what the hell does that have to do with karate?). Paint the fence? Alright I’ve had it up to here…wait a minute, I just did karate! Aha! Well, Sinatra brought it all together.

Now, all of a sudden, I am driving (or doing karate, if you will). I’m by no means a NASCAR driver or Black Belt, mind you, but I’m doing it baby! I’m experiencing what I’m sure most developers learning to code experience. That Aha! moment. Getting comfortable behind the wheel, so to speak. Now if I break down, I am pretty confident in my ability to fix the problem and get the old jalopy back on the road.

mvcNow onto my project. Like I mentioned earlier, this is where everything comes together. Models. Views. Controllers. Bam. Application active! To keep up with the car analogy, imagine the Models as being the steering wheel and accelerator/brakes ; the Controllers being the driver, and the Views being what the driver sees out the windshield. Imagine if you will, sitting in your car outside your home. You have an idea of where you want to go so you step on the gas. That’s one of our Models. The car accelerates and you see a new View out of the windshield.  Now you, the Controller, want to make a turn so you turn the steering wheel (another model) and the car is on another street which gives you different View. I think you get the idea. Where this analogy falls short is the belongs_to, has_many relationships. But that’s for another blog post.

My projects so far have been based on living in California. One of the best things about living here is the Farmer’s Markets. Freshly picked produce. Farm to table. It’s a blessing. Most of the time though, I buy much more than I can use. Or I forget about some veggies, only to find the poor neglected things shriveled up in the back of my fridge a month later. How can I keep track of all of them?



No more spoilage!

Enter Produce Organizer! Now there will be no more spoilage in my fridge! Yay! Alrighty then, let’s get on with it.  First things first; to make sure I had bundler installed by typing “gem install bundler” on the command line. Next: “bundle gem produce_organizer”, to create the gem. This gives us our basic files with a ‘Readme’, ‘Gemfile’, ‘License’, etc. I added what I needed to my Gemfile and typed ‘bundle install’ in the terminal to get all of the gems installed. Now onto the good stuff.

To drive the car, your accelerator, brakes, and steering wheel have to know what they can do. So let’s start there. Getting the tables set up fits the bill. The questions to ask here are: what tables do we need? What columns in the tables do we need? And how will the tables relate to each other (think – has_many, belongs_to). After those questions are answered, we must migrate! First we’ll create our tables and then migrate them to create our schema. That will take care of our backend, unless things weren’t thought through completely (which was true in my case); in which case we can easily add or remove columns from the tables.

Next comes the Models. These are fairly easy. By inheriting from ActiveRecord::Base, we have every method known to man at our disposal (ok, not every one – but close). All we have to do is setup our has_many, belongs_to relationships. The Produce Organizer basically has three tables: a Users, Produce, and ProduceDatabase. The Users table has_many Produce and has_many ProduceDatabase. The Produce belongs_to Users and belongs_to ProduceDatabase. And ProduceDatabase belongs_to Users and has_many Produce. ActiveRecord will want these tables pluralized, which in our case didn’t make sense for the Produce and ProduceDatabase. There is a quick patch to fix this problem. Inside our config folder lies the environment.rb file. This file keeps everything running smoothly. Here we add this block:

Screen Shot 2016-06-06 at 1.45.53 PM

This tells ActiveRecord to accept ‘produce’ and ‘produce_database’ for what they are, without looking to pluralize them. Cool.

Now that our backend is nice and tidy, lets look at the Views and Controllers. How the application will run is as such:

‘/’ – Index – signup or login
‘/users/signup’ or ‘/users/login’ – Signup or login sends us to
  • The controller action, ‘post “/users/login”‘, which will validate the username and password (protected by fierce attack dogs. No, not really. More like Sinatra/ActiveRecord magic.), and let them through or send them back to the login page with a polite message. If they pass the test they will be sent to
‘/users/user’  – Users Homepage –
  • The get request here will make sure that it’s sending the correct user to their homepage by using session[:user_id]. We have to enable sessions in our ApplicationController. Once the page is loaded, there will be a list of all of their produce, with days left until expiration and a ‘remove from list’ button next to each item
  • Below the list, there are a few links
    • /produce/new – Add more items to users list
      • This view gives users a list of all the available items in the database with an option to check as many as you want to add to your list, plus a form to create a new item. If a user adds a new item, the controller will first check to make sure the item doesn’t already exist. If it does, the item will not be added to the database but will be added to the users list. If it doesn’t, then it will be added to the database and to the users list. The user will then be routed back to their respective homepage.
    • /produce_database/new – Add more items to the database
      • Here the user can add an item to the database
        • the ‘post’ action in the ProduceDatabaseController, will make sure the item doesn’t already exist and then add it if that is true.
      • ‘/produce_database/edit –  is another link to edit items already it the database
        • This page gives us all of the items in the database and their shelf lives. Only the creator of the item can edit it. So if the user chooses to edit one, the control action will make sure the current user created it and either create the item or give the user a failure message, telling them that they don’t have the editing power because they were not  the creator of the item.
    • /users/logout – Logs the current user out and brings them to the Log In page

That’s the basic structure and flow. There will be flash messages for each action the user makes based on success or failure on what they are trying to do. All in all, I learned a ton working on this project and feel a newly found confidence!