Removing whitespace from a string in Ruby vs. JavaScript

I’m back from vacation. After visiting my family in Long Island, we ventured up to the Catskills for a few nights, which culminated with my younger sister getting married. It was a very cool wedding! The next day, my wife, nephew, and I drove up to Montreal to see her folks. Montreal is one of my favorite cities (in the summer) – it has very European feel. As great as it is to get away, it’s always hard to get back into the groove after a trip. I’m just getting my sea legs back under me so this post is going to be short and sweet.

Have you ever needed to get rid of leading and trailing whitespace from a string? It’s a good rule of thumb to do just that to any input you’re receiving on a form. Luckily, it’s quite easy in most languages. Let’s take a look at how we’ll approach this in Ruby first.

str = "  How's it going?   "
=> "  How's it going?   "
# Let's get rid of that whitespace
str.strip()  
=> "How's it going?"
str 
=> "  How's it going?   "
# We didn't permanently change the string itself
# Most methods are non-destructive, but Ruby let's us be destructive if we 
# really want to. We just got to bang it (pun intended)
str.strip!() 
"How's it going?"
str 
=> "How's it going?"

Pretty simple! Let’s take a look at how to do this in JavaScript.

let str = "  How's it going?   ";
str.trim(); 
'How/'s it going?'
str  
'   How\'s it going?   '
// There's no permanent destructive way to change strings in JavaScript - they 
// are immutable. So we just have to reassign our variable like so...
str = str.trim();
'How\'s it going?'
str  
'How\'s it going?'

I mentioned that strings in JavaScript are immutable. This means the string cannot be changed in memory. So when we call a method like trim or slice on a string, the return value is a new string. Like the example above, we have to reassign ‘str’ to the return value of the method call. In Ruby however, strings are mutable. Let’s take a look.

str = "  Trim me  "
str.object_id 
=> 70365544319940 
str.strip!()
=> "Trim me"
str.object_id
=> 70365544319940 
# Even though we changed the string, the id is still the same
# We can also change characters in place, which cannot be done in JS
str[7] = '!'
=> '!'
str
=> "Trim me!"
# Pretty cool!
str.object_id
=> 70365544319940 
# No change

That’s it for this week. Always remember how cool Ruby can be. It makes life easier in many ways. JavaScript however, can do much more. It is not only an Object Oriented language, but a multi-paradigm language! From Wikipedia:

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has an API for working with text, arrays, dates, regular expressions, and basic manipulation of the DOM, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded.

Thanks Wikipedia! Until next time! Cheers:)

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 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!

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

The Big O

First off, this is a technical blog. My apologies if you came here looking for something a little sexier. Not that Big O Notation can’t be sexy. Depends on what floats your boat or sinks your battleship. Anywho, the following is a little teaser on Big O.

Foreplay

When you take your first few steps learning how to program, something like Big O Notation is the furthest thing from your mind. Learning to code is hard. Period. There is so much to know, and quite frankly, it is daunting. Imagine looking up at the highest peaks of Mt. Everest from the bottom of the mountain. Now imagine that the mountain is always shifting and getting bigger. That’s what it feels like when you start learning. Somewhere along the way (hopefully), your footing will become more secure on the shifting ground and you’ll gain some comfortability in the place of not knowing. Because nobody knows it all. Keep one foot in front of the other and keep climbing. Try to enjoy the ride.

If you went to a bootcamp, there was so much knowledge being pushed into your brain in a few short months. Bootcamps are great, but they just focus on web development. When you graduate and start to prepare for interviews, you begin to hear scary terms that you never heard before. Things like Linked Lists, Big O Notation, Bitwise Operators, Binary Trees, Stacks, Queues, etc. These are all computer science topics and good to know, but unless you are working on high level stuff, you probably don’t have to know all of them. But those pesky interviewers will probably test you on them because they know most bootcamps don’t teach it and because they had to learn it when they got their BS in CS.

Heavy Petting

One of those terms, Big O Notation, is actually very useful to know. When you begin to program, you’re not thinking about how your program will scale if a few thousand or perhaps a million people start to use it. You just learn what a for loop is, then learn you can have nested for loops, and you think everything is grand! Not so fast Kemosabe. This is where Big O Notation and scaling come in. Let’s take a look at how you might write a function to double each element in an array of arrays.


function doubleMe(arrayOfArrays) {
  const doubledArrayOfArrays = [];

  for (let i = 0; i < arrayOfArrays.length; i++) {
    let placeholderArray = []
    for (let j = 0; j < arrayOfArrays[i].length; j++) {
      placeholderArray.push(arrayOfArrays[i][j] * 2);
    }
    doubledArrayOfArrays.push(placeholderArray)
  }

 return doubledArrayOfArrays;
}

doubleMe([[1,2,3], [4,5,6], [7,8,9]];  // [[2,4,6], [8,10,12], [14,16,18]]

This might look all fine and dandy, and when you first learn about nested for loops they might seem like the best thing since sliced bread! But let’s take a look at how this will scale.

We Have Lift Off

The length or size of our arrayOfArrays above is 3. However, since each element of the array is another array the function has to work that much more. Basically, for every item in the array (n for the input size), we have to do n more operations. So n * n == n^2 or O(n^2). The given example might be a little too on the nose being 3^2 is 9. It’s usually not that exact. You might ask, ‘So what’s the big deal? The function only has to run 9 times instead of 3’. Well, everything is groovy if the input is low, but what if it grows to 100 or 1,000 or 1,000,000. You start to get the point. With lower inputs, it’s not a big deal, but as the input grows, so does the time complexity of the function.

BigOn2

Weeeeeeeeeeeeeeeee!!!!

I’m Very Sensitive

Sorry if I got a little too excited. Let’s back up here a bit. Maybe I should start with O(1). Gayle Laakmann McDowell, author of a Cracking the Coding Interview, has a great video about Big O. It’s definitely worth a watch. She gives a great example about a problem South African programmers were having. Their internet connection was super slow and it was taking a long time to transfer data to team members in a different city. So they tried an experiment. They transferred the data to a usb drive and had a carrier pigeon (let’s call him Bob) deliver it to their work mates in the other city. At the same time they were transferring the data through their internet connection. The race between Bob and the internet. Guess who won?

If you said ‘BOB!’, then you are correct. So what does this have to do with Big O? Glad you asked! Bob’s flight in Big O terms is O(1). If it took Bob 30 minutes to get from one office to the other, then no matter what size the file is, it does not change the amount of time it takes him. Whether he’s flying with 10MB or 1TB, it still takes him 30 minutes. So O(1) is a program or function that takes the same amount of time to run no matter how large the input grows.

Time_Complexity

Bob is a low flying bird

Almost There

Revisiting our South African friends, as the size of the data they were transferring (over the internet) grew, the time it took to transfer grew by the same order. This would be O(n) and is linear in time and space. The green line in the graph above represents this. What would this look like as a function? Take my hand and let us find out.


function tripleMe(array) {
  const tripledArray = [];

  for (let i = 0; i < array.length; i++) {
    tripledArray.push(array[i] * 3);
  }

  return tripledArray;
}

tripleMe([1,2,3,4,5]);   // [3,6,9,12,15]

Each element of the array gets worked on once. If our array had 1,000,000 elements, our for loop would run 1,000,000 times. From an input of an array of 1 element to an input of an array with 1,000,000 elements, the time complexity a straight line.

Pillow Talk

There are definitely other elements of Big O to talk about and understand, but I’m spent. I gave a pretty good (in my humble opinion) performance overview of the basics. I hope it was as good for you as it was for me. Sweet dreams buttercup.

Cool Shortcuts in JS

After learning Ruby, getting stuff done in Javascript can seem much harder. Many methods in Ruby, such as sort, are just a dot notation away. However, in JS you have to write out the whole function. Check it…

# Ruby
numbers = [2, 5, 6, 11, 1, 23, 3]
numbers.sort!
# numbers = [1, 2, 3, 5, 6, 11, 23] Not bad at all!
# That was so easy. Let's try it with names....

names = ['Martha', 'Tony', 'Sarah','Bob', 'Clara']
names.sort!
# names = ["Bob", "Clara", "Martha", "Sarah", "Tony"]
# Woah! It's the same!

// JS
let numbers = [2, 5, 6, 11, 1, 23, 3]
numbers = numbers.sort((a, b) => a - b)
// Well that's not so bad
// Let's try it with names

let names = ['Martha', 'Tony', 'Sarah','Bob', 'Clara']
names = names.sort((a, b) => {
  if (a < b) {
    return -1;
  } else if (a > b) {
    return 1;
  } else {
    return 0;
  }
});
// Yuck. Quite a bit more verbose

Well, unfortunately there are just some things in JavaScript that are the way they are. Like my Scottish father-in-law says, “You cannot fart against thunder”. Some things you just have to accept. Sometimes, you (or people that make the thunder) can change it. ES6 has brought some cool changes that have made programming in JS much more fun. I’ve been messing around with some cool shortcuts that you can use to give your fingers a bit of a break. Some of these were already available pre-ES6.

First let’s take a look at flattening an array of arrays.

# Just for fun I'll include the Ruby magic

arrays = [1, [2, 3], [4, [5, 6]], 7]
arrays.flatten!
# [1, 2, 3, 4, 5, 6, 7] - Too easy

// Pre ES6
var arrays = [1, [2, 3], [4, [5, 6]], 7];
var flattenedArrays = [].concat.apply([], arrays);
// [1, 2, 3, 4, 5, 6, 7]
// Not horrible, but the spread operator makes it even better...

const arrays = [1, [2, 3], [4, [5, 6]], 7];
const flattenedArrays = [].concat(...arrays)
// Not a huge difference, but - Less typing = Happier coder 

Ok that wasn’t a huge deal. Here are some examples using operands. Thanks to these wonderful humans for bringing them to my attention.

var number = 1,
  string = "1",

// How would you normally change number to a string? Personally, I'd use the  .toString() method

number.toString()
// "1" 
// But this is more fun...
number + ""  // "1"
// I like

// How bout changing that string to an integer?
// A little parseInt() shall we?

parseInt(string) // 1
// The following is much more succinct

+string // 1
// Shiiiiit. That's cool.

How bout finding the max/min from an array. Well the Math prototype does not accept an array as it’s arguments.

// Pre-JS6
const numbers = [8, 7, 55, 4];
Math.max.apply(null, numbers) // 55
Math.min.apply(null, numbers) // 4
// JS6
Math.max(...numbers)  // 55
Math.min(...numbers)  // 4
// Very nice!

# Just for S & G's - Ruby
numbers.max  # 55 - beautiful

The spread operator makes this possible by spreading the values in the array out into arguments of the math functions. Not quite the magical abstractness of Ruby, but cool nonetheless! There are of course libraries like lodash that fill in some of the cracks, but there are always new things to discover about a language. The never ending mountain is waiting to be climbed. She is forever shifting and you can never reach the top. You just have to learn to love climbing. And remember…you cannot fart against thunder (in a very broad Scottish accent). That man has some stories.

AngularJS: Filter – Behind the Scenes

AngularJS comes with a ton of built in features to help us out – meaning we don’t have to reinvent the wheel every time we want to do something. This makes it extremely easy to do things such as searching or filtering. However, sometimes it’s a good idea to check what’s going on under the hood, which can only help us in the end. These helpers are great, but if you’re knew to programming, they could stunt your growth as a developer. So let’s dive in.

I built an app called Medidate. It’s a simple (a lot of hours goes into simple!) single page app that keeps track of meditation sessions: the date, which kind of meditation, and the duration. It uses Rails as an API on the back-end and AngularJS on the front-end. I’m going to go over a sorting feature that could easily be implemented with Angular’s built in Filter helper. Here’s a Plunker with the easy way.

The Easy Way

Here’s some of the code…

    <div ng-controller="UsersController as vm">
      <div class="container">
        <div class="col-md-3 col-md-offset-9 dropdown-meditation">
          <div class="button-group">
            <select class="btn btn-default btn-md dropdown-toggle dropdown-text"
              ng-model="vm.option">
              <option value="" disabled selected>Sort Events By</option>
              <option value="date">By Date (Asc)</option>
              <option value="-date">By Date (Desc)</option>
              <option value="meditation.name">By Meditation</option>
              <option value="minutes">By Minutes</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events | orderBy: vm.option">
          <p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes &mdash;
        {{event.meditation.name}}</p>
        </div>
      </div>
    </div>

To give a bit of background, the information that’s being sorted here is an array of user events. The user has many events, which have the date, minutes, and a nested association of meditation, with id and name. This was all produced from an $http call to the back-end which was serialized into JSON by active model serializer – a very helpful gem for Rails.

Notice the dropdown and how we’re listing the options. The values of the options are bound to vm.options. All we have to do is declare vm.option = ” in the controller and when the dropdown is selected, vm.option will now be bound to the selected option. This will in turn set the filter in the ng-repeat. Notice the orderBy : vm.option that is declared in the repeat. This is the aforementioned built in magic of Angular. Whichever option is selected in the dropdown will change the orderBy option and effect how the list is ordered.

But what happens when you’re asked how it works. You know, like if someone asked you the what happens when you press the gas pedal in your car?  I don’t know, it just goes!

This is when it gets interesting. Getting your hands dirty.  Instead of using filter in the ng-repeat as above, we’re going to leave ng-repeat alone, with no orderBy filter! The hard work is going to be done in the controller. Check it.

The Hard Way

Here’s the  dropdown and ng-repeat…

    <div ng-controller="UsersController as vm">
      <div class="container">
        <div class="col-md-3 col-md-offset-9 dropdown-meditation">
          <div class="button-group">
            <select class="btn btn-default btn-lg dropdown-toggle dropdown-text"
                    type="button" 
                    ng-model="vm.selectedOption"
                    ng-change="vm.sortBy()" 
                    ng-options="option for option in vm.options">
              <option value="" disabled="" selected="">Sort Events By</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events">
          <p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes &mdash;
        {{event.meditation.name}}</p>
        </div>
      </div>
    </div>

In the dropdown above, ng-model is set to vm.selectedOption. Now whenever the user selects an option from the dropdown, the model is now bound to the option from ng-options. The options are declared in the controller which we’ll be taking a look at soon. The straw that stirs the drink is ng-change, which fires the vm.sortBy function in the controller. Let’s take a looksie.

.controller('UsersController', [function() {
      
      var vm = this;
      vm.sortBy = sortBy;
      vm.sortDate = sortDate;
      vm.sortMeditation = sortMeditation;
      vm.sortMinutes = sortMinutes;
      
      vm.options = ["Date (Asc)", "Date (Desc)", "Meditation", "Minutes (Asc)", "Minutes (Desc)"]

      function sortBy() {
        if (vm.selectedOption === vm.options[0]) {
          vm.sortDate();
        } else if (vm.selectedOption === vm.options[1]) {
          vm.sortDate();
          vm.user.events.reverse();
        } else if (vm.selectedOption === vm.options[2]) {
          vm.sortMeditation();
        } else if (vm.selectedOption === vm.options[3]) {
          vm.sortMinutes();
        } else if (vm.selectedOption === vm.options[4]) {
          vm.sortMinutes();
          vm.user.events.reverse();
        }
      };
 
// more code below

I like to bind my functions up top so I can see exactly what’s going on in the controller. This way I don’t have to search through hundreds of lines of code. Also, now we can just go ahead and write the functions as declarations, not expressions, which will save us from any hoisting headaches.

Like I said before, when the option is selected from the dropdown, that option is now assigned to vm.selectedOption and the vm.sortBy function fires. In the sortBy function, we’ll check to see which option was assigned to selectedOption and then fire a corresponding function to sort the user.events array. Here are the missing sort functions…

      function sortMinutes() {
        vm.user.events.sort((a, b) => parseInt(a.minutes) - parseInt(b.minutes))
      }

      function sortDate() {
        vm.user.events.sort((a, b) => (new Date(a.date)) - (new Date(b.date)));
      }

      function sortMeditation() {
        vm.user.events.sort((a, b) => {
          if (a.meditation.name < b.meditation.name) {
            return -1;
          } else if (a.meditation.name > b.meditation.name) {
            return 1;
          } else {
            let dateA = new Date(a.date);
            let dateB = new Date(b.date);

            if (dateA > dateB) {
              return 1;
            } else if (dateA < dateB) {
              return -1;
            } else {
              return 0;
            }
          }
// end of UsersController

Each function handles the data based on what the value is. Because the data in the user.events array are strings, we’ll have to convert them before sorting. The sortMinutes function is dealing with numbers which forces us to parseInt() the strings to integers. Same thing goes for the sortDate function, which we have to convert to a date before it can be sorted. Last is the sortMeditation function which takes the nested association – meditation – and sorts by name. Here we’re returning a negative 1 if the a is less, positive 1 if the b is less, and then instead of a zero if the names are the same, we’re using a sub-sort, which sorts by date.

Here’s a working plunker of the non-magic Angular filter. I think it’s cool to look under the hood sometimes and see what all the magic is about. You never know if you’re going to learn something new – I know I did! Leave a comment below if you have any questions. Thanks for reading!