<postgradDays7+/>

<HEROKU>

I'm going to start off with Heroku today. If you read my last post, you'll remember that I broke my portfolio and used "heroku rollback" to temporarily get everything back up and running.

That was great, but I still needed to find out what was breaking my app on deployment. So, to reiterate, my site would work on my local server but not when deployed to Heroku. Therefore, I needed to set up a Heroku environment that was not tied to my live portfolio. That meant it was time to learn something new.

I needed to set up a "staging" environment for Heroku. This sets up a new Heroku space for your non-deployed/troubleshooting code.

# set up a new git remote
heroku create --remote staging?

# push git repository to heroku staging
git push staging master??

As for my error. I had changed the start script in my package.json from simply "node server.js" to "nodemon server.js" without including nodemon as a dependency in my package. Silly me.

<SCSS>

Time to get Sassy

It's time to push some Sass on my final project. To use Sass you're going to need Ruby. If you're on Windows, like I am, go here and download and install the version of Ruby you want. If you're on a different operating system, sorry, but you can figure that out. You've made it this far so that type of thing is simple for you! :P

Once you have Ruby installed you can install Sass by typing the below in your terminal:

# using ruby to install sass
gem install sass

# once that is done, check to makes sure it installed
sass -v
# returns Sass 3.4.22 (Selective Steve)

Congratulations, you've not only installed Ruby but Sass as well. Go eat a cookie!

Variables

Variables in Sass begin with the dollar sign. I'll be honest. I'm not sure if the semi-colons are necessary. I put them in out of habit.

/* Look!!! A Sass Comment!!! /*
?
?/* ---------- Colors ---------- */

/* Backgrounds */
$mainBackground: #fff6c5;
$accentBackground: #a1e8d9;
$altBackground: #cfc291;

/* Texts */
$mainText: #695d46;
$accentText: #ff712c;

 /* ---------- Fonts ---------- */

$mainFont: 'Raleway', sans-serif;
$accentFont: 'Open Sans', sans-serif;

NPM

Follow the Script

NPM scripts are useful. Look at your package.json. Chances are your scripts.start = "node server.js". This means that if you run "npm start" in your counsel, it will execute "node server.js". Cool, but so what! There's another script I just discovered, "prestart". Prestart does what you would think it does, it executes before the start script. So, for instance, I have my prescript run my grunt commands, so that every time I run "npm start", grunt automatically runs. See below:

/* my package.json */
?
?"scripts": {
  "prestart": "grunt",
  "start": "node server.js"
}??


# now, in my terminal
npm start
# will run grunt and then node server.js?

<JAVASCRIPT>

Where do I come from?

Did you forget about String.fromCharCode()? It's super simple, but I had to look it up today.

// lets create a random string of 10 uppercase letters

let string = "";?

for (var i = 0; i < 20; i++) {
  
  // create a random number between 65 and 90 (check out the ASCII chart)
  let number = Math.floor(Math.random() * (90 - 65)) + 65;

  // turn that number into a char
  let char = String.fromCharCode(number);?

  // build that string!
  string += char;

}

// view the result
console.log("string: ", string);?

I used the above code to generate a random string code utilized when authorizing a user with LinkedIn OAuth. So, yes, it has its uses.

URL Builder

This is currently my favorite way to build URL strings, specifically to request OAuth authorization.

	// object to hold url values
		let authObject = {
			response_type: "code",
			client_id: result.data,
			redirect_uri: "https://thisisshout.herokuapp.com/linkedin",
			state: string
		};

	// variable to hold url string
		let url = "https://www.dhirubhai.net/oauth/v2/authorization?";

   // this is where the magic happens. use a for ... in loop to loop through your object
		for (var key in authObject) {
			url += key;
			url += "=";
			url += authObject[key];
			url += "&";
		}

        // get rid of the last character. no one needs a trailing "&"
		url = url.substring(0, url.length-1);
		console.log(url);

You'll never concatenate strings the old fashioned way again!

Tag! You're It!

First some basics. We know that document.getElementsByClassName() returns an array of results. It returns an array even if only one element is returned. document.getElementsByTagName() does the same thing. What I just realized, however, is that it doesn't have to search the entire document. See the below:

// get the optionsBar
let optionsBar = document.getElementById("optionsBar");

// get the articles within the optionsBar
let optionsArticles = optionsBar.getElementsByTagName("article");

Using the above, I narrowed my search for <article> tags from searching the entire document to searching within a particular ID.

<CONCLUSION>

Every day it's something new, and I don't have time to write it all down on these LinkedIn articles. For instance, my forays into OAuth with both Twitter and LinkedIn are a little too in-depth for these short snippets. I'm planning on writing up on all of that once I get that project finalized.

Also, I've already lost track as to the number of days since I graduated, so, starting with the next edition, I'll be naming these articles something new.