You just hired a new software developer and you want them to contribute right away? Of course, who doesn't. But that begs the question do you have onboarding documentation?

What I have found at different jobs is there is about a two-three month ramp up until I have felt really comfortable with the tech stack, intimately familiar with the codebase, the software used, platform architecture, etc. The one thing in common at each of these companies was limited or no onboarding documentation.

However, I don't think it has to take this long, in fact I believe that if you have solid onboarding documentation and a process to usher in new talent you could significantly decrease the amount of time new developers spend getting acclimated

What is it and why should I care?

Onboarding, also known as organizational socialization, as defined by Wikipedia, is the

"mechanism through which new employees acquire the necessary knowledge, skills, and behaviors in order to become effective organizational members and insiders. It is the process of integrating a new employee into the organization and its culture".

I believe that one of these mechanisms is Onboarding Documentation. I would even go so far to say it is critical in the success of the team and honestly helps with the overall experience of new hires.

I have first hand experience on how the lack of onboarding docs affects developer efficiency and even moral. I have been at companies where the onboarding documents were limited or scattered and multiple new hires have started and they were literally swimming in circles because they couldn't find anything or need another developer to walk through ALL of the setup.

I have heard excuses like oh its "tribal knowledge" or "nobody wants to maintain docs" or "onboarding docs? what are those?". WOW!! I mean I am all for laziness but only if it comes on the back of preparation. Because after all efficiency is addressing an issue, minimizing the downstream effect and thus creating room for other optimizations. In other words just create your onboard docs and you will have more productive engaged devs quicker!

Why should I?

Don't just take my word, there is a lot of research and articles out there, you should care because:

Improving developer efficiency has the potential to increase global GDP by $3 trillion. -Developer Coefficient

Having quality onboarding docs could affect long term retention.

In a study of over 1000 workers 31% left after six months citing the top reasons for leaving were a poor onboarding experience. -Bonusly

69% of employees are more likely to stay with a company for three years if they experienced great onboarding. -SHRM

Possible Implementation Strategies

For centuries, the human race has been documenting wars, successes, failures, recipes, and inventions so why should onboarding documents be any different. Plus given the benefits mentioned above take charge and just do it.

Ideas to get started:

1. Speak with stake holders/team leads about where they send new hires looking for documentation and then create a document to track all of those answers
2. Start with some sort of Wiki document located in an easy central place. In my job we have a central WIKI document in our main code repository were we direct all new hires to and yes I was the one to start the first onboarding document
3. Create an onboarding checklist. Things in this checklist could include: All technologies to install and download, important links to code README's, build/deploy pipelines, and other misc documents like important hr docs, and internal communications
4. Create at least one "how-to" on setting up environments. In my job we have at least four different platform environments all using different tech stacks and it gets hairy quick. Documenting it is the easiest way to safeguard against knowledge gaps and to make sure all the teams members can be self-sufficient
5. If you don't have any formal onboarding process at least start with having another developer sit with the new hire and help get them all set up
6. Remember onboarding docs are living and breathing so find ways to keep them updated. A few suggestions to ensure this happens:
   When any new environments are created or new technologies are added make it a requirement that setup instructions are required
7. Have a designated person to keep the document updated. If you make the newest developer to the team in charge of this they will have immediate knowledge
8. Any new hires you bring onboard, have them update the onboarding checklist if there are pieces they are missing or new as they go through the steps. This gives them buy in and ownership on the first day.

So go forth and create (or update) YOUR onboarding documents and remember:
“You must be the change you want to see in the world.” -Ghandi

Shout Outs

• Gabe Levasseur for inspiration
• Music listened to while blogging: Disco by Sub-Radio

Resources:

Atlasssian Tips
The Developer Coefficient
Bonusly
SHRM

Business vector created by stories - www.freepik.com

At my current company, we use Azure to manage our cloud infrastructure and they provide a lot of great resources and cloud solutions. However, creating a backup from a MongoDB based CosmosDB instance isn't very straight forward (if it is I missed it and please tell me where to look :). If you have a SQL instance easy peasy just go the export tab within in the DB, set a destination, provide login credentials and boom done. NoSql not so much. This is a quick and simple post on the two commands you can run to grab the data from your remote CosmosDB instance (running mongo) and then restore it to another/new CosmosDB instance

The problem

1. We needed to quickly make a copy of a specific CosmosDb production DB instance
2. We needed to restore a new CosmosDB instance

What you need

1. Mongodb installed, as the tool we are using, mongodump comes with mongodb
2. The Azure cli (and you will need to be logged in az login)

Create a backup

Run the script below to create a backup of all of the collections in your specified db instance to your local machine

$ mongodump --host "$HOST_NAME" -u "$SOURCE_DB_ACCOUNT" 
-p "$SOURCE_PASSWORD" --ssl --<type-of-ssl-required> 
--out ./backup --db="$SOURCE_DB"

$ mongodump --host yourdbname.documents.azure.com --port 10255 
-u <your-username> -p <password> --ssl 
--<type-of-ssl-required> --out ./backup --db=<your-db-name>

• Figure 1 below shows where to get your HOST_NAME, SOURCE_DB_ACCOUNT andSOURCE_PASSWORD.
• One way you can find your SOURCE_DB is by navigating to the Data Explorer tab (figure 2 below)

Restore to a new CosmosDB

Run the command below for each collection in your db instance and specifically pointing to the bson files for restoring

$ mongorestore --host "$DESTINATION_HOST_NAME" -u "$DESTINATION_DB_ACCOUNT" 
-p "$DESTINATION_PRIMARY_PASSWORD" --db="$NEWLY_CREATED_DB_NAME" 
--collection="$COLLECTION_NAME" 
<PATH_TO_YOUR_LOCAL_FILE>/lms-seeds/"$COLLECTION_NAME".bson 
--ssl --<type-of-ssl-required>

IMPORTANT NOTES:

• Note that my db requires ssl as seen by the --ssl flag. As such you need to pass that parameter and a second one to specify what type ssl configuration to use to authenticate. See the Mongo SSL Docs for more information.
• If there is absolutely no possible way for intrusion and you system is highly secure you can use the sslAllowInvalidCertificates, but it is discouraged.

--figure 1: Azure Cosmos DB

-- figure 2: Azure Data Explorer

Shout Outs

• Evan Deininger for the inspiration
• Music listened to while blogging: Tycho - Division (Heathered Pearls Remix)

This is the second post in a series of posts about Home Assistant and Alexa. In my previous post - Home Automation with Home Assistant and Alexa I discussed how to wire up your Raspberry Pi with the open source IOT platform Home Assistant to work with Alexa. This post will cover:

1. Upgrading Hass.io to take advantage of the new ADD-ON STORE
2. Adding DNS and port forwarding to make Home Assistant publicly accessible

Upgrade Hass.io

• Visit the Hassio Installation site to download the current Hass.io image.
• Once you flash the image onto your micro sd (from your computer) and boot up your Pi, it can take up to 20 minutes to get rocking.
• After a successful boot, you can visit: http://hassio.local:8123/ to get started and follow the onscreen instructions.

Add the SSH Server Add-On

• In order to make changes via SSH to your PI you will want to add the SSH Server add on
• To do this, while on your hassio dashboard click on the Hass.io icon in the mid-left-hand side panel
• Then click on the ADD-ON STORE and the select SSH Server and click Install
• Follow the steps there to configure (you will need to create an SSH Key) and SSH into your Rasberry PI
• If you have issues connecting make sure you have started the SSH server from the SSH Server details page (see image below)
• This piece must be completed before the DNS piece as this is needed to finish setting up DNS below

A few helpful commands

• To SSH into your pi: ssh root@hassio.local (Home Assistant exists at /config directory)
• hassio help will list all of your commands
• hassio host reboot - reboot your pi

Add DNS

We will be using Duck DNS for our domain and Let's Encrypt for our certs. One of the main reasons I updated to the new Hass.io image is because the new version has anADD-ON STORE that includes a Duck DNS plugin with built-in Let's Encrypt support.

• To install, navigate to the ADD-ON STORE again and select the Duck DNS add-on and click install (this set-up refers to version 1.8)
• Update the configuration in the add-on to include your Duck DNS token, your domain(s) and set the accept_terms to true. By setting this to true this is what will start generating your certs.

{
  "lets_encrypt": {
    "accept_terms": true,
    "certfile": "fullchain.pem",
    "keyfile": "privkey.pem"
  },
  "token": "<YOUR-TOKEN>",
  "domains": [
    "<YOUR-DOMAINS>"
  ],
  "seconds": 300
}
```

* Then SSH into your PI and add the following to the `/config/configuration.yaml` file: 
```
# Example configuration.yaml entry for the HTTP component
http:
  base_url: https://example.duckdns.org:8123
  ssl_certificate: /ssl/fullchain.pem
  ssl_key: /ssl/privkey.pem
```

![Image Link](http://res.cloudinary.com/thefinleycode/image/fetch/http://res.cloudinary.com/thefinleycode/image/upload/v1564300164/DuckDNS_Hassio.png)

Reference article: [Effortless Encryption](https://www.home-assistant.io/blog/2017/09/27/effortless-encryption-with-lets-encrypt-and-duckdns/)

##### Last Step - Port forwarding
If you are using port 8123 you will need to configure port forwarding

* Login into your router and locate Port Forwarding sometimes called virtual server. You can use this website [port forward](https://portforward.com/) to locate your router and follow the instructions on how add forwarding
* Choose the port you specified in your configuration to forward
* You can test your port has been forwarded using a [Port Forwarding Tester](https://www.yougetsignal.com/tools/open-ports/)



######Navigate to your https://example.duckdns.org:8123 address and Woollahh!!**

![Image Link](https://media.giphy.com/media/OHZ1gSUThmEso/giphy.gif)

---
####Shout Outs

* [Shane Henning](https://www.linkedin.com/in/shane-henning-1a6909a9/) for the inspiration 

Want to host your own blog on AWS? Don't want to use Wordpress? The Ghost platform is easy to use and comes with a lot right out of the box. This post will walk you through how to spin up a Ghost blog using:

• An AWS EC2 instance
• A Ghost Bitnami AMI
• CloudFront (for caching)
• Route 53

This post assumes that you already have an AWS account

Launching the Ghost AMI

Find the image on the AWS marketplace, I used the Bitnami image, follow the onscreen instructions to first subscribe to the image and then launch the EC2 right from the same screens. Or you can go to the AMI tab within EC2 and launch from there.

When launching your instance keep in mind:

• Ghost needs a minimum of 1GB of memory to run so pick at least a t2.micro.
• In the security group, make sure to allow incoming HTTP and set up a rule for SSH with your IP so you can SSH into it. Some security group best practices.
• Associate an Elastic IP address to your instance (this will allow you to keep the same public IP if your instance goes down or you need to stop and restart, etc.)

Visit your site

After your EC2 is up and running, let's go visit your newly launched site. Find your public IP on the dashboard and hit <public-IP>/admin or <public-IP>/ghost. Fingers crossed... and BAM! you should see your login page. The default username is user@example.com. There are two ways to find your password:

1. You can find it in the logs within the first 24 hours - while on your AWS EC2 dashboard select the instance and select Actions -> Instance Settings -> Get System Logs or
2. You can SSH into your box and look at the logs using cat ./bitnami_credentials

**TO SSH into your EC2 you select your instance from the AWS EC2 console and select Connect. It will give you instructions on how to get into your box.

CloudFront

Now that you have your site running on the public-ip address it is time to add CloudFront to the mix. Navigate to the CloudFront dashboard and create a distribution. Below are the key pieces you need to get your EC2 instance to work with CloudFront:

1. In the Origin Domain Name field put the full public IP of your instance which is in the format: ec2-.....amazonaws.com.
2. Forward your Host header to the Origin in order to make sure your vanity url doesn't redirect to your public IP
3. Put your URL in the Alternate Domain Names section
4. To set up your SSL Cert click the Request or Import a Certification with ACM - you will have to come back to this CloudFront page once the certification has been verified by AWS to add your cert
5. Leave the other options as default and create the distribution. When back on the dashboard make note of the Domain Name as you will need it for Route 53. Also note that it can take up to 15-30 minutes to create the distribution.

**Great step by step to CloudFront distributions

Route 53

In order to use Route 53, you will need to have your domain managed by AWS. If you don't you may need to transfer your domain management to AWS or use your current provider (although the directions here only apply if your domain is a hosted zone with AWS).

Now let's add a custom URL

1. Navigate to your Route 53 dashboard and click Hosted Zones
2. Create a new record set
3. Set your URL, I usually chose blog.<whateveryoursiteis>.com
4. Set the Type to A - IPV4 address
5. Select Alias to YES
6. Then in Alias Target add the CloudFront domain name that was the result of the creation of the distribution from above and click save.
7. Keep the other options as default and save record set

Once this is done, SSH into your instance and add the URL used above to your Ghost configuration file at /opt/bitnami/apps/ghost/htdocs/config.production.json

**More info on the Ghost config

SSL Certificate for HTTPS

It is important to add a certificate for security reasons. If you have followed the directions from above, your certificate will be processing or at this point verified and ready for use. To view your certificates you can go to your Certificate Manager dashboard.

Once your certificate is done processing:

1. Go back to your CloudFront distribution and add your certificate from the dropdown list below the radio button
2. Click save - again it may take a little bit for the distribution to update

Set up email

If you want to add additional Authors or Admins to your Ghost account you will need to set up SMTP forwarding. To do that SSH into your instance and go back into the config file /opt/bitnami/apps/ghost/htdocs/config.production.json

You will need to add the following:

Lastly, if you are sending from a gmail account you will also want to enable Less Secure App(You will need admin access to your account in order enable this). Further reading here.

**More on setting up/configuring Ghost email

You should be all set. Happy Trails!!

Shout Outs

• A special thanks to Gabe for his encouragement and support
• Music listened to while blogging

Do you have an Alexa and all you do is ask her to set a timer? It's time to put her skills to good use. Yep, that's right let's set up your house so you can say things like "Alexa, turn on the bedroom lights". This blog post will walk you through how to bring Alexa to life and take command of your home. There are plenty of gadgets and gizmos you can buy to set up your home with ease, but what would be the fun in that.

This post outlines all the necessary things you need to get Alexa to turn on your lights. Throughout this tutorial, I also include links to helpful articles because without these I would have been stuck.

This post will cover the following:

1. The hardware needed to get started(at least what I am currently using)
2. Setting up Home Assistant on your Pi
3. Configuring Pi to receive radio signals
4. Wiring up your Pi with the transmitter and receiver
5. Finding radio signals on your Pi
6. Adding devices (in this tutorial lights)
7. Setting up Alexa

Before we begin, I'd like to point that there are two major open source platforms that I have found that you can use to get your system up and running. OpenHab and Home Assistant. After reading many blogs comparing the two I have decided to go with Home Assistant, partially because it is written in python which I find quite interesting.

"Alexa lets get started"

Physical Items You need to get started

The links listed below are from Amazon but you can get them from whatever vendor you prefer

1. Rasberry PI. I am using a Rasberry PI 3 B+. This version has an HDMI (normal) input as well as 4 USB inputs, which makes it really easy to hook up a keyboard, mouse and a monitor or run headless(discussed below) ~ $36
2. Jumper wires to connect your transmitter/receiver to your Pi ~ $10
3. A micro USB card (used to load Hassbian discussed below ~ $14
4. Etek City outlets that transmit/receive 433/hz signals ~ $30
5. A SD card to usb adaptor where you can 'flash' hasbian ~ $10
6. 433MHz RF Wireless Transmitter and Receiver Module ~ $10 (you can get the cheaper ones but I found that this set transmits much further)
7. An SD card reader to flash your disk image to run the PI ~ $10
8. Amazon Echo ~ $50
9. Optional: A case for your PI.

Total Cost: ~$170

Now for Hassbian setup

Once all of your parts arrive follow the steps below:

1. Using the SD USB card, flash the sd card with Hassbian (download it here) using Etcher (for mac or windows)
2. If you want to run in headless mode in the future (without a monitor or keyboard) you will also need to add a file to the boot drive titled ssh without any extension before ejecting from your computer. Reference article.
3. Follow the instructions that came with your Pi to boot it up with your new SD card inserted into it
4. Make sure you plug a network cable directly into the PI from your router which will give it access to the internet.
5. Once it boots up, give the device at least 5-10 minutes to download Home Assistant.
6. To check to make sure Hassbian has been downloaded, you can check three different ways.
   • You can visit http://hassbian.local:8123/ in your computer browser
   • You can find your IP address and then type it in your browser followed by :8123 (ie: 10.0.0.1:8123) and it should pull up the same page as before and should look something like the image below.
   • Lastly, you can ssh into your pi within the Terminal or shell client, using ssh pi@<your-ip>. While in your terminal and in ssh, see if this file path exists: /home/homeassistant/.homeassistant. If it does you are all set. Remember this last option because using ssh is how you will manage and configure your devices later on.

Done!... for now

Install software on Pi to receive radio signal

I followed this tutorial to install the appropriate libraries: Wiriing Pi.
Below are the steps as well.

• While using ssh on your PI, install wiringPI, cd into the directory and run the build command:

git clone git://git.drogon.net/wiringPi && cd wiringPi &&./build

• Once installed if you run gpio readall should show the gpio pin allocation on your PI.

• Next, install a library that allows us to send out data via the transmitter and receive it through the receive module. This library is 433Utils

$ cd back to your root
$ git clone --recursive 
$ git://github.com/ninjablocks/433Utils.git
$ cd 433Utils/RPi_utils
$ make all

You now have the software needed to listen for signals. On to wiring your Pi!

Wire up the transmitter and receiver to your Pi

I will walk you through a brief set up on how to wire your Pi. For additional information, feel free to read Jeremy Cook's article.

1. Before wiring up any of the transmitters, make sure your Raspberry Pi is powered off. You can use the command sudo shutdown -h now to power it down. Wait until the LED stops blinking and then unplug from power.
2. You can use the image below as a guide to wire up your pi and/or reference the article I mentioned above.

One step closer now!

Prepare Pi to find your 433/hz receivers

Now that your Pi is all wired up let's start looking for signals

1. Power up your Pi and ssh into it (or use your monitor set up)
2. Take your EteckCity outlets or comparable devices and plug them into a wall and figure out which number on the remote turns off which lights.
3. Let's test your Transmitter:

$ cd 433Utils/RPi_utils/ 
$ sudo ./RFSniffer

Then press the on or off button on the Etekcityremote and if it works you will see something like Received 12345.
4. Next, let's test your Reciever:

//open a new tab in terminal or ssh client
$ cd 433Utils/RPi_utils/ 
$ sudo ./codesend 1234  #whatever number you'd like

If it is working you will see something like sending code[12345].
5. Last but certainly not least you will need to install rpi_rf which allows Home Assistant to talk to your receivers. Follow instructions here
6. To sniff out your codes and after the rpi_rf is installed first double check to make sure python 3 is installed:

$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install phython3-pip

``` 
7. Then create a python script `touch rfrx.py` which will record your receivers. 
8. Open this file by typing `sudo nano rfrx.py` and copy and paste the `rpi-rf` receive code found [here](https://github.com/milaq/rpi-rf/blob/master/scripts/rpi-rf_receive) and save it.
9. Then run `sudo python3 rfrx.py`, this will trigger your Pi to start listening for signals. 
10. Press the button on your remote and it will register the codes in the terminal (like below).
![Example Codes](http://res.cloudinary.com/thefinleycode/image/fetch/http://res.cloudinary.com/thefinleycode/image/upload/v1517616487/rpi-rf-image.png)

You are now ready to add lights configuration! 


---

####Now the best part, adding your devices
This is where the fun begins

__Lights__: 
In this post we will only set up lights. To set up lights I am using the `rf_rpi switch` api. [Doc Reference](https://home-assistant.io/components/switch.rpi_rf/).

1. To add devices cd into the following path in your Pi `/home/homeassistant/.homeassistant`. 
2. Then open your config file using `nano configuration.yaml`. The docs referenced above highlight what each attribute does, so no need to discuss that here. 
3. Below is an example of how I configured the switch API to set two lights in the living room and two lights in the bedroom: 
```
#settup rf lights
switch:
  platform: rpi_rf
  gpio: 17
  switches:
    bedroom_lights:
      pulselength: 181
      protocol: 1
      code_on: 341251, 335107
      code_off: 341260, 335116
      signal_repetitions: 50
    living_room_lights:
      pulselength: 178
      protocol: 1
      code_on: 333107, 333251
      code_off: 333116, 333260
      signal_repetitions: 50    
```
**You will use the codes you "sniffed" in the previous section and them to your config here. 

Once you have configured it how you want, you can restart HA by calling `sudo systemctl restart home-assistant@homeassistant.service`. You can also use the UI interface to restart HA. 
 
----

#### Lastly, and the best part, let's set up Alexa

1. Start by adding the [cloud component](https://home-assistant.io/components/cloud.alexa/)  from home assistant to your Pi. Follow the directions in the link above This feature just came out late 2017 and is free to use until March 1, 2018. After that is will cost $5 going to a good cause to keep the Home Assistant community growing.

2. Make sure you are running Home Assistant 6.0, you can check the version in the UI `http://hassbian.local:8123/dev-info`

3. Cd into your configruation.yaml again and add the `cloud` piece. See below for my sample setup. The link listed above goes into more explanation on each attribute. Again, no need to repeat it here. 

4. Once configured make sure you restart Home Assistant using the command listed above. Then as mentioned in the Home Assistant docs have you add the `Home Assistant` skill in the Alexa app. 

5. Once this is added and still in the Alexa app, navigate to the `Smart Home` tab, then click `Devices` and then click the button `Discover`. This should pull up the lights you configured previously. That's it! 

Sample config code
![cloud code](http://res.cloudinary.com/thefinleycode/image/fetch/http://res.cloudinary.com/thefinleycode/image/upload/v1517618838/cloudconfig.png)
Alexa Device Dashboard
![Alexa Device Dashboard](http://res.cloudinary.com/thefinleycode/image/fetch/http://res.cloudinary.com/thefinleycode/image/upload/v1517618646/AlexApp_Devices.png)

_"Alexa, turn on the living room lights"_ 

WHOLA!! You made it and now have lights controlled by Alexa. 

---

###### Helpful Home Assistant command line commands
1. SSH into your PI: `ssh pi@<your-ip>`.
2. 'To start, stop or check the status of home assistant: `sudo systemctl status home-assistant@homeassistant.service` and replace `status`, with `start` or `stop` or `restart`.
3. To check if your config file is properly set up:
```
$ sudo su -s /bin/bash homeassistant
$ source /srv/homeassistant/bin/activate
$ hass --script check_config
$ exit
```

[Common Tasks Docs](https://home-assistant.io/docs/installation/hassbian/common-tasks/)

---

####Shout Outs

* Music listened to while blogging: ["Apollo" by Magic Man](https://www.youtube.com/watch?v=D8MOcntooYc)
* [Raspberry Pi SSH](https://www.raspberrypi.org/documentation/remote-access/ssh/unix.md)
* Tutorials/Docs: 
  * [Hassbian Install Docs](https://home-assistant.io/docs/hassbian/installation/)
  * [Cloud Docs](https://home-assistant.io/components/cloud.alexa/) 
  * [Setting up the Eteckcity Outlets with Home Assistant](https://www.youtube.com/watch?v=5UUazFbK-Hg)
* [Stack overflow discussing keys for jessie backports](https://raspberrypi.stackexchange.com/questions/12258/where-is-the-archive-key-for-backports-debian-org)

Essentially every day as a developer feels like this:

function happy(today){
    const coding="me"+"computer"+"coffee"+"creatingBetterExperiences";
    if(today === coding){
        alert("It's great day!");   
    }
}

happy(today);

A part of building new applications is running into errors and working to find solutions. I am currently working on an application that uses the SongKick API and the Spotify API to generate Spotify playlists based on artists performing in the user location within date range preferences. The error that I encountered involves Cross-Origin Resource Sharing or CORS. This post discusses CORS, what it is, why it's important, how I encountered CORS, and a solution to the problem.

So what is CORS and why is it important?

CORS (Cross-origin resource sharing) according to wikipedia:

"defines a way in which a browser and server can interact to determine whether or not it is safe to allow the cross-origin request. "

Further, in current browsers that implement CORS whenever information is requested from one webpage to another on different domains (the cross-origin request) there are certain credentials and permissions that must be provided by the user domain and the domain where the information is being requested from in order for the browser to allow the cross-origin request. Most modern browsers implement CORS and it is currently the recommended standard of the W3C for accessing web resources that lie on different domains.

Why is it important? For your safety and the safety of others. No, really it's an important security concept that prevents CSS or Javascript to request resources from a different source and from preventing attacks from lurking hackers. To use an appropriate metaphor, modern web browsers are kind of like bouncers for a private club (the club being the domain you want info form), if you don't know the password you ain't getting in.

Fun fact: OWASP (Open Web Application Security Project) listed Cross-Site Scripting (one of the most popular ways of bypassing the same-origin request policies) as number 3 on their top 10 list of threats in 2013 and CORS provides the framework and standardization to reduce this threat and grants companies the ability to share information without having to worry about being vulnerable to cyber attacks.

Here are a few more great resources to dive head first into CORS:

• Mozilla Dev Network
• Wikipedia
• MaxCDN - Gives a great step by step on how CORS works

My CORS issue

Let's look at how this plays out in real life. In the application I am developing, Songkick.com has artist data that my site discovershowcase.herokuapp.com wants access to. This is considered a cross-origin request because the information being requested is not coming from the same domain. Traditionally, this wouldn't be allowed under browser's same origin policy. However, if CORS is supported, Songkick.com would include in its server response what are called response headers allowing my site access to the data. The required header as a part of the CORS standard is Access-Control-Allow-Origin followed by either specific domains that can access the data or a * wildcard, indicating that any domain can access the data. Omitting this header will cause the CORS request to fail.

So, when I deployed my application to Heroku and tried using the application online, I received the following error:

This error is saying that the Songkick.com API is not responding with the appropriate header, Access-Control-Allow-Origin in order to allow my domain to communicate with it.

From this error and what we have just discussed about CORS it appears that Songkick.com does not implement CORS. After further research from what I can tell there are no plans for Songkick to implement CORS into their API anytime soon. So I had to find a way to "bypass" the CORS issue.

How to fix this - the solution

To make my application work with CORS I have implemented the use of Node route to act as somewhat of a proxy server to get the data from API instead of going through the browser.

When I was getting the error initially, the information was being requested in the following manner:

My application => Browser => Songkick API => Browser => My application

And I was getting the error because Songkick wasn't providing Chrome (the bouncer) with the appropriate password. Instead, and after consultation with a mentor you can request information in the following way to bypass the browser at least initially which will avoid the CORS header issues:

Let's look at some code to make sense of the diagram above

The first code snippet (figure 1) is the function that takes in parameters from the UI and will then call the Node route "/songkick". When line 60 is encountered and the variable queryURL is called inside the axios GET request, this triggers the Node route which leads us to figure 2 (axios is a great promise based http client).

figure 1

Figure 2 is the abstracted route call using express router that directs the "/songkick" route to the apiProxyController in figure 3.

figure 2

Here in figure 3, is where the Node route takes in the parameters from the queryURL variable from figure 1 in the form of req.params and is injected into the songkick api data request query (stored as the variable url). In line 30, a GET request is made using the request library passing in the url as the parameter. This effectively bypasses the browser avoiding the CORS issue because the request is now coming from a server route not the browser.

Since this route is first called within the getConcerts function from figure 1, once the GET request finishes, the results are returned and dealt with inside the .then((results)=>{}) block in line 61, figure 1.

figure 3

So the solution?

1. Create a server route that will be triggered by the user through the UI
2. Make sure it captures all appropriate parameters
3. Use an http request library like axios or request to make the request to the API in question (effectively bypassing the CORS issue)
4. Return the results to browser and handle the data.

Note: You don't have to wrap a request call inside of an axioscall, a server route by itself should do the trick. But in my instance, I already had quite a bit of code to handle to results inside of the axios call, so for now and until I refactor, this works for me.

Until next time...

Shout Outs

• Music listened to while blogging: Youngr - "Out Of My System"
• SongKick API
• Spotify API
• Thanks to Brian Doyal my Bootcamp Instructor and mentor for helping to diagnose and find a solution

As Week 11 and 12 wrapped up, I am officially half-way through the UT BOOTCAMP. Wow. I can definitely see the growth in my skills and knowledge level. The past two weeks were all about Node.js and MySql. Homework assignments for these two weeks were completed in the terminal and are demonstrated here using tutorial videos. We got a lot to cover, so let's get to learning and discovering.

What is Node.js?

Since Node is such a huge part of Javascript and our class, I feel it is important to dive in a little deeper here.

Node.js is an open source cross-platform runtime environment that is written using Javascript and as defined by it's documentation is:

"A Javascript runtime built on Chrome's V8 Javascript engine"

Let's unpack this really quick:

• Javascript Runtime = the environment that provides built-in libraries available at runtime (or execution time)
• Javascript Engine = responsible for producing the machine-executable operations from code written in Javascript

As such Node.js and Chrome share the engine but have different runtime environments.

Since Node.js is cross-platform it can be run on OSX, Microsoft Windows, and Linux (which is a huge plus).

Features

1. Asynchronous and Event Driven:

• Asynchronous or non-blocking, meaning that the server doesn't wait for an API to return data before moving on to the next piece of code. Once the API call has finished and is returned, Node.js will then handle it.

2. Single-Threaded:

• This means it uses a single thread model with event looping to handle requests. Also because the single-threaded model is non-blocking and can handle many requests at the same time, it makes this platform very scalable opposed to other servers like Apache that create multiple threads to handle requests. The image below captures how Node handles events.

3. Speed:

• It is very fast in its code execution since it runs on top of the Chrome Javascript Engine

4. No buffering:

• Node.js apps don't buffer any data, they just return them in managable data pieces.

Example of how Node.js uses the event loop:

When to use

• Single Page Applications
• Streaming Applications
• JSON APIs based Applications
• Server-Side Applications

Another great resource for learning Node aside from the documentation mentioned above is here.

Node Package Module and Dependencies

A Node Package Module is basically a packet of pre-built code (modules) that grant the user access to a library of functions or properties that give developers more tools, allow them to build programs faster and give them the ability to interact with other programs like MySql. They are often referred to as dependencies because if you choose to use say the mysql package in your project you must require the package withing your javascript file ie: var mysql = require('mysql'); as you are 'dependent' on this module in order for your project to work.

A few helpful links:

• NPM Info
• Beginner's Guide

One fun fact: Node's package ecosystem is one of the largest open source libraries in the world.

What is MySql?

MySql is an open source relational database built on the SQL architecture. It allows for the storage and retrieval of data. Think of it as a warehouse that stores all of your merchandise and you can send merchandise to your warehouse or retrieve it and send it somewhere else.

There is a lot more to MySql but we will stop here for now. For more in-depth reading the documentation is a great place to start: MySql Documentation

Additionally, here is a great list of shortcut commands for SQL.

Terminal Hangman

Let's see Node.js in action. This hangman takes on the basic hangman rules (similar to the previous hangman I created) except this one cannot be played online, it can only be run on a local terminal.

In order to play on your computer you would have to do the following:

1. Download my Github Repo to your computer
2. Make your way, cd, to the directory you just downloaded
3. Run npm install which will download all of the dependencies used
4. Run node main.js to play

If you are not that ambitious you can see a brief video below to see the result:

Now that you have seen how it functions, how was it built?

The build:

The framework is built in Node.js and I have also used a few npm packages to achieve the look and feel. I have used the npm package Colors which allows the user to call simple .colorName functions to change the color scheme on your screen. My favorite is .rainbow which is used in the category description. To make the terminal interface more user-friendly the npm package Inquirer was used.

Bamazon Store

This project displays a table of items that are available to the user to purchase. To build this, the framework used is Node.js and I used the Inquirer npm package again. The main difference here is that I used MySql to handle all of the data. The data that is displayed in the terminal is housed as a table in the database and every time the user purchases an item it decreases the available amount to purchase in the database.

Additionally, to prettify the table output I used the Cli-Table npm package.

Here is a brief overview on how it works:

Until next time... smile and be strong!!

Shout Outs

• Music listened to while blogging: Bill Evans - Days of Wines and Roses
• Node.js Documentation
• MySql Documentation
• NPM Documentation

It has been too long!! Trying to get back on track to posting once every week or so. So to catch up let's chat about our first group project. We have started and finished our first group project. Our idea: Day With Your Dog. It is a website that gives you all of the information you need to spend an entire day with your dog outside of your house. My team members and I really like this idea and found a need for it in the marketplace, so we continue working to iterate and improve on this idea even after we move on in class. Read on for our mission, the problem it solves, and our minimum viable product and more.

Day With Your Dog - Project Mission

In a world that is increasingly more dog-friendly and since they are man's best friend why not take them everywhere. Our mission is to provide a one-stop shop where dog owners can plan their day with their dog.

Problem it solves

Our group all own dogs (see 'Our Inspiration' on our website) and while brainstorming we thought hey wouldn't it be convenient to have a place where you could go to plan an entire day where your dog can join too? That is how Day With Your Dog was born. Additionally, the day before my wife and I were trying to find a restaurant where we could bring our mini-schnauzer but had trouble finding one quickly and efficiently.

Target Audience

Our target audience is anyone who has access to the internet, owns a dog and wants to bring them everywhere!

Current Solutions

There is on solution out there that is in direct competition with our app. That solution is BarkHappy. In fact, they are also based here in Austin, TX where we are based. With BarkHappy you can find other dogs nearby, explore dog-friendly places and events, host your own group play dates and it also gives lost and found alerts.

One con to BarkHappy is that it doesn't currently have a website that has the same functionality that their app does. Additionally, it appears restaurants are only added by users and don't take advantage of existing reviews from Google or Yelp. There are also a few other solutions including Dogvacay and Rover but they are more specialty type apps.

Assumptions

With any new product, there are assumptions that you make and we need to test. I think the biggest assumption we are making is that there is a need for our service and that people will use this app. We are also assuming that our application will fill a gap in the market that doesn't currently exist.

How will solution test assumptions?

Assumption 1: Need for this service in the marketplace

• We will test this assumption through user test cases and feedback. Based on the results we will incorporate any user feedback in furture iterations to help make our product more user-friendly.

Assumption 2: Our product will fill a gap in the market

• There are currently other products in the space so we will need to work to differentiate our product offering enough or do it better than the current provider. Based on user feedback and as our technical skill set grows we will be able to position ourselves for success.

As will all initial releases of Minimum Viable Products our assumptions will most likely change after user feedback is received and may change the course of our product altogether. As such we need to be prepared to shift our focus.

Personal Risks to for you to complete your project

In addition to assumptions, there are also personal risks. For me, I think the biggest risk to complete this application is the knowledge of how to make this a commercial grade application. For example, I currently haven't had any experience with user authentication and integration of map routing through Google. While this isn't a problem currently as we do not have a user section, I think this is a very important piece that will allow for success in the future. With time, however, I will be diving into these limitations and will then have the opportunity to upgrade our application.

Sketches

Here is our very first sketch of what Day With Your Dog:

Wireframes

To get a better understanding of what we would be building we created a wireframe. I mocked this up quickly using the wire-framing software Balsamiq. As you can tell the first deliverable is much different but this process helped us to narrow down the functionality of what our app would do.

Our Solution - the Minimum Viable Product

Here is a brief walkthrough of how our app works.

To plan YOUR DAY WITH YOUR DOG click here: Day With Your Dog (limited to only Austin at the moment).

Future Iterations

While this is a crucial piece to our development we haven't done a large sampling of user feedback but plan too in the future. The iterations that we want to make based on the small sampling of feedback and also viability for our own sake are as follows:

1. Create user login/profile where they can save preferences
2. Build a customer loyalty program
3. Partner with restaurants/parks/hotels, etc. to offer discounts or specials to our users
4. Build out our offerings to include:
   • Hotels, Shopping, Vet Clinics, Pet Stores, and Dog Boutiques
5. Potentially have a dog meet up piece (however this is what BarkPappy specializes in)
6. Add a dog-walking integration with sites like Rover
7. Integration with Open Table to reserve a table at dog-friendly restaurants
8. Integration with Instagram and have a running feed of owners dog posts
9. Currently, we are using a database to house the information on the page but ultimately want to either update it dynamically (when user's search) and/or allow user input

While these additional implementations would be great we need to wait to see what the user feedback reveals and we have to be careful of scope creep (when you have too many features).

ENJOY and until next time...

Shout Outs

• Music listened to while blogging: Tycho - Epoch
• Day With Your Dog
• Day With Your Dog Group Members: Saidi Granados and Christine Baba

Blogging is still such new territory and I am still discovering best methods on things like where and how to host images, how to update themes, how to manage and update Ghost (this blogging platform) and more. This post discusses the issue I had with images not displaying on any computer due to the inability of the browser to access them and the process I went through to fix the issue.

** please note that this post was drafted a few months ago when I identified and fixed the image issue but I haven't have time to post it due to the UT Bootcamp.

The Issue - No Images Displaying

I first found this to be the case when I tested out my blog on other computers t and when my brother notified me that none of the images where displaying. This was an issue because the images and images of code, etc are very important to the storyline of my posts. So I hunkered down and looked for the root cause.

Research the issue

I began hosting my images on Google drive because I had read that it would work, it was easy and free. So I followed the appropriate instructions to get a public folder up and running. But a few weeks in none were displaying in the browser.

So I went to the best 1st line of defense tool in the developers tool belt when dealing with the browser: the Chrome Inspector tool. I navigated to the console and low and behold I found my error:

It was a 403 Forbidden error, meaning the page or in this case the images that the browser was trying to access was absolutely forbidden. As a result none of my images were loading. I went back to the Google drive where was I hosting and re-read the instructions to set it up, made sure the url links worked but still couldn't get the images to load.

So I Google it!! I read a few posts about how there were issues with the Google drive throwing the exact errors that I was getting and how it may be best not to use this platform.

Resolution

So at the encouragement of blogger Jeff Owens I signed up for Cloudinary

This platform is free as long as you stay under 75,000 images and 7,500 images transformations a month, which is no problem for the volume I am dealing with. What I love about this platform is that is also allows you to resize your images and it updates the url link provided. Also Cloudinary is built for developers because it also provided links for various programming languages like Ruby, Python, Java and Node.js among others.

To add an image to my blog all I have to do is:

1. Upload an image to my console in Cloudinary

2. Resize as desired

3. Drag and drop the url link into my post and it looks like this:

    http://res.cloudinary.com/thefinleycode/image/fetch/                     
    http://res.cloudinary.com/thefinleycode/image/upload/
    v1474857724/cloudinary_omagp3.png`
   

Read more on how to fetch images using Cloudinary: Fetch Images.

Previous Posts with Fresh Images

So if you have read any of my previous posts and were missing images you can now go back and double check to see if the images appear :). Here are a few of my favorites:

• Muzak Archives Website -The Idea
• Music is Code

Other Awesome Images

Speaking of images check out how awesome this CodePen of a 3d image is:

See the Pen tutorial rotate image 3d by igor (@infomanyak) on CodePen.

Using my own photo:

See the Pen 3d Image Fun by Nigel Finley (@Nfinleymusic) on CodePen.

Shout Outs

• Music Listened to while blogging: Kings of Leon: "Walls"
• Cloudinary
• Jeff Owens Blog

Can you believe it has already been 8 weeks since the start of this bootcamp? We have covered so much in such a sort time. By no means am I an expert but I think I have a solid understanding of the concepts we have discussed and it will only get better as we move through.

Topics covered

• We have built basic websites using only HTML and made them mobile responsive using media queries;
• We have styled these websites using CSS style sheets;
• We have created websites using the Bootstrap and Materialize framework (the GIPHY site included herein);
• We have built a hangman game, a star wars game and a trivia game using HTML, CSS, Bootstrap, as well as Javascript and jQuery;
• We have explored persistence data both client and server-side;
• We have started to dive into databases starting with Google's Firebase;
• We have created a website that pulls GIFs using GIPHY's API (included in this post) and;
• We are currently working on a group project that will use Materialize as the CSS framework, Javascript and jQuery to handle user on selections and the logic, Firebase to house our data locally and Google and Yelp APIs to gather data (keep reading to see our idea) .

And its just 33% of the way done! So many more cool and exciting topics to come. I really love the experience so far and can't wait for the opportunity to do this for a living.

GIPHY API - Week 7

One of the most recent projects we completed is a website that uses GIPHY's API to pull animated GIFs from their site. Let me step back for one sec. API stands for Application Program Interface and is a set of protocols and tools for building software applications. APIs are often the bridge between different components. There are three common use cases:

1. To provide pre-built code for sending and retrieving data to a centralized database
2. To provide pre-built code for creating or utilizing other software components, like Google Maps and;
3. To interface with physical sensors or hardware like the Nest thermostat (I am stoked to explore this piece).

In the case of my website I am using GIPHY's API to run a search query in their database using the name of the rockstar and then pull the images onto my page. As I discussed in my last post, when I initially tried to use Materialize I had an issue with the container shrinking my page too much. This time on my GIPHY site I figured out how to adjust the width and you will notice that my margins are a lot less than the default width of 70% of the page. Similar to the previous exercises I am using Javascript for the logic and jQuery to update the images to the page.

To go find animated Gif's of your own go here: Rockstar Giphy Lookup. Make sure to choose your own rockstars by typing a name in the 'Choose Your Star' field and add it to the search. Then click the name button to see Gif's of that rockstar appear on the page. Click on the Gif to see it animate and click again to stop it.

Week 8

Group projects began week 8. Our task is to build a site that uses all of the topics covered as mentioned above and also incorporates at least two APIs and uses Firebase. Firebase is a cloud services provider owned by Google. It has a few different features but the key feature is the offering of a realtime cloud database that uses an API allowing for quick and easy retrieval and storage of data.

Our project is all about dogs. Our inspiration came from our own dogs (see my dog, Maggie below) so we wanted to create a page that allowed dog owners to plan an entire day with their dogs. The name, 'Day With Your Dog' was born.

The project is due in a few weeks, so once the beta is complete you can plan a "Day With Your Dog". For the time being it will only work relative to Austin, TX (as our proof of concept) but we hope to extend the reach to dog owners everywhere soon. Check out the 1st draft of the homepage below (the first word uses CSS animations and cycles through a few other key words...). Get EXCITED, cause our group is!!!

Stay strong and carry on and until next time...

Shout Outs

• Music listened to while blogging: Kings of Leon - Waste A Moment
• CSS Frameworks: Bootstrap and Materialize
• Firebase
• GIPHY

Due to my blog recently being down I have been set back a week on posting my progress of the UT Bootcamp. So this one includes jam pack fun of both a Star Wars game and a Music Trivia Game. Both are a result of the homework completed as a part of the course.

Javascript and JQuery Continued

To continue on the path of working in javascript and jQuery, I have created a Star Wars RPG Game and a Music Trivia game using HTML 5, CSS, Javascript and JQuery.

Star Wars RPG Game

The languages used in building the Star Wars Game are HTML 5, CSS, Javascript and jQuery. Initially, I was interested in exploring the Materialize styling library (created by Google) to achieve the look and feel of the page but when using it I found that when applying a container tag within their grid system it brings in the margins quite a bit. I needed as mush screen space as possible for game play. I tried to figure it out for a few minutes, however, due to the time limits to finish the entire assignment, I decided to scrap the idea and just use Bootstrap (this time). I plan to go back and explore Materialize in week 7 for an API assignment and will figure out how to customize the container class.

This game was a challenge for me. There were so many elements and conditions that I really had to break it down to the simplest scenario and build it out from there (which from I have been learning is how you should approach a problem). Because of the difficulty I was having and because I really enjoy asking other people's advice on processes and methods I went to our in house developer to pick his brain. One thing he noticed when looking at my code was how I was updating information on the page. I was using jQuery to target certain elements depending on the scenario. Instead he suggested using templating through the Underscore library. Basically, instead of updating each section of the game dynamically and within the javascript, using templating allows you to hard code the basic 'template' within the HTML file and then you pass through the different elements when needed in the javascript. Effectively you then update your entire page every time based on the exiting if conditions in your javascript. Templating allows for cleaner code and you can eliminate concatenating strings and writing long code to dynamically update your page. Also it is easily re-usable and easy for teams to work together since they can manipulate the html with little effort. It was a great learning experience and I am continuing to look for ways to incorporate this method, when applicable.

CLICK HERE to PLAY the Star Wars RPG Game : Star Wars Game!

Music Trivia Game

Continuing with the music theme, the music trivia game is also built using Javascript to handle to logic and jQuery to handle updating the page dynamically. The look and feel is achieved using Bootstrap grids and buttons with some added stylings. Lately, I have been using my wife to test out my games and provide me feedback on the user experience and she has provided great feedback. Some of her initial thoughts on this game were that the length of time between when the answer displayed and the next question displayed was too long. So I adjusted that. Also she suggested I put in how many questions are left, because she felt like it was dragging on. As of this post I haven't updated this yet but it is on my list of iterations to the trivia game. Go play and have fun!!!

To play the Music Trivia Game Click Here: Trivia Game

Until next time, keep calm and carry on...

Shout Outs

• Music Listened to while blogging: New Music Friday: Spotify
• Cool Word Press Music Themes

Up until this point I haven't had any issues running and maintaining my blog. Well the beautiful thing about programming and technology is that you should expect something to break at some point. I finally experienced the heartache of broken things. Last Monday, when I was trying to upgrade my Ghost platform, my blog broke. Friday of last week, I finally figured out how to fix it and as such my first post back online I had to share what happened, troubleshooting and the inevitable fix.

The Problem

Monday, August 22nd, while running through an update of Ghost, upon completion I received a '502 Bad Gateway Error' and my site was rendered incapacitated. Disclaimer: I did use a different update command this time, which may be part of the reason why it broke... This is what I used: Update Ghost. I would now recommend this article instead Upgrade Ghost 2.0.

Troubleshooting

After I ran the update I visited my page only to receive a blank screen save for a message that read:

"502 Bad Gateway"

Basically what this means (I found during my research) is that the server was acting as a gateway and received an invalid response from an upstream server. Still not sure what all of this means but I am continuing to research and learn.

At first I was very frustrated and tried running the update a few different ways but to no avail. I also felt disheartened and immediately felt alone not knowing where to turn. So I took to Googling and found quite a bit of documentation on the 502 error. But no specific commands to fix my Ghost issue. It was then that I remembered Ghost has a great slack channel with wonderful people offering their advice, so I turned there. Also since I don't like to sit still I turned to Digital Ocean's message boards Digital Ocean Question Forum since they host my blog. This is where I ultimately received the help that lead to the fix.

Below is the picture of my terminal with the warnings that I received when I tried to update Ghost:

Based on my conversations with the Slack community since these are just warnings the blog should still run but it didn't. Luckily a gentleman on the Digital Ocean forum responded to my inquiry quickly and I was able to get back up and running.

The Resolution

After comment exchange on the Digital Ocean forum's I found a solution. Here is my fix from start to finish (I am sure there are others but for the time being this works):

I used this article as a baseline (the command line section) and updated the steps to account for my errors.

1. Get the latest version:
   curl -LOk https://ghost.org/zip/ghost-latest.zip OR a specific version curl -LOk https://ghost.org/zip/ghost-<version>.zip

2. Unzip to a temporary location:
   unzip ghost-latest.zip -d ghost-temp. You will come back to file shortly

3. Change directory into your current ghost install:
   cd path-to-ghost-install, E.g. cd /var/www/ghost

4. Copy key files to your Ghost install directory:
   cp index.js *.json path-to-ghost-install

5. Update Casper by copying the casper folder(optional):
   cp -R content/themes/casper path-to-ghost-install/content/themes

6. Change back to your ghost install directory:
   cd path-to-ghost-install

7. (optional) Update permissions:
   E.g. chown -R ghost:ghost *

8. Change directory into your current ghost install:
   cd path-to-ghost-install, E.g. cd /var/www/ghost

9. Then run the following (this will remove your core and node_modules files as well):

    sudo apt-get update  
    sudo apt-get upgrade  
    npm cache clean 
    rm -rf node_modules  
    rm -rf core
   

10. Next you need to add your new core file back into your directory, so change back to your download of Ghost latest:
    cd path-to-ghost-temp E.g. cd ~/Downloads/ghost-temp

11. Copy the new core directory to your Ghost install:
    cp -R core path-to-ghost-install

12. Upgrade dependencies:npm install --production (you may still see a warning here bur fear not).

13. The start the productin environment: npm start --production.

14. You may get an error about sqlite3 but just run the code below regardless: npm install sqlite3 -save and then npm start --production.

15. You will find that your blog works however it will be terminated after you close your terminal. So you need run Ghost in forever mode type: npm install forever -g

16. You made it. Last step restart Ghost in forever mode from the Ghost installation directory: NODE_ENV=production forever start index.js.

Two other helpful forever commands:

• To stop Ghost type: forever stop index.js
• To check if Ghost is currently running type: forever list

If you find any holes or issues please let me know as I would be curious.

Lastly, and for reference, here is my forum exchange on Digital Ocean as well for additional reference: 502 Bad Gateway Discussion

My take-aways here are three-fold:

• Always Google to try and find your answer. Stack Overflow should become your best friend.
• Don't be afraid to ask for help even from complete strangers, which is exactly what I did on Digital Ocean and it was scary at first.
• Try, try try no matter what and don't ever give up. There is always a solution.

Shout Outs

• Music listened to while blogging: Rachmaninoff Prelude in D Major
• Upgrade Ghost: Command Guide

Made it through week 4 of UT Coding Bootcamp and this past week was all about Javascript and jQuery. Due to the amount of homework and studying I have been doing lately, I will be relatively brief.

Last post I discussed the very basics of javascript so let's briefly discuss jQuery.

jQuery

What is jQuery? JQuery as defined by their own website says it is a:

"fast, small and feature-rich javascript library."

It can be used in conjunction with javascript as it is a library, an additional tool belt if you will. One thing to note that a few people have told me is that jQuery is not used as frequently as it used to be and learning 'vanilla javasctipt', which is the long form javascript will actually be much more useful and position you for better success in the job market.

jQuery - in a nutshell:

1. We use the jQuery $( ) identifier to capture HTML elements. Like so: $(‘#idname'), $(“.classname”) or $('elementname)
2. Then we tie the element to a jQuery method of our choosing to capture events and change that element (or a different element). Some examples include the
   on(“click”) or .ready() methods
3. Finally, we tie the element to a jQuery method of our choosing to capture events and change that element. For example you might use: .append(), or .animate().

To see this in action below are a couple examples using javascript and jQuery that we did in class. See if you can spot in the code were jQuery is used to identify elements, calling a method and updating that element or another resulting in a change on the page.

Captain Planet Example

Watch him grow, shrink, move, become invisible and destroy the world (a special touch). This uses the .on('click') and .animate() methods to capture user clicks and then animate those things.

See the Pen Bootcamp_4.2_CaptainPlanet by Nigel Finley (@Nfinleymusic) on CodePen.

Fridge Magnet Example

In this example, have fun moving these letters on and off the fridge. This is primarily using jQuery code like the .append() method to add the letters to the fridge and the .empty() method to remove by calling an html id.

See the Pen Bootcamp_4.2_FridgeMagnets by Nigel Finley (@Nfinleymusic) on CodePen.

Pop Star Hangman using

Javascript, HTML, CSS and some jQuery

Week four culminated in the completion of a javascript based hangman game. I am still working on it and want to add even cooler features like adding hints and playing a video by the artist you guess correct. Soon enough.

TO PLAY POP STARS OF THE 2000s, click HERE!

Stay tuned for next week as another game will be unveiled. Think light sabers and far away galaxies!!! Here is your not so subtle hint:

Shout Outs

• Music listened to while blogging: Soulive: Tuesday Night Squad
• W3 Schools: jQuery
• JQuery Home Page

Week 3 has concluded of the UT Bootcamp and I am still enjoying every minute. Besides the lack of sleep and the sure amount of mind-boggling information we have to take in, my mind is wide open to receive. This post includes a game...keep reading!

Bootstrap Portfolio Page

As week two wrapped we were asked to create a second portfolio page this time using the CSS library and pre-built framework Bootstrap. Still tweaking the video I created to put in as the header to make it responsive and making the portfolio pages link to places. Work in progress portfolio page.
It is still very much a work in progress but I suppose so is life.

Javascript

This week we started into the realm of javascript and boy am I excited. Javascript is considered to be one if not the (depending on who you ask) most prevalent, dominant and versatile language out there.

What is it? Wikipedia defines Javascript as

an object-oriented computer programming language commonly used to create interactive effects within web browsers.

It allows developers to create dynamic web applications capable of taking in user inputs, changing what’s displayed, crete animations and all sorts of fun things (which we are learning slowly).

Because Javascript has so many pieces and we have only touched on a few, below are a few basics that we have learned so far:

• Variable or var: are the nouns of javascript and are 'things' and can be strings, numbers, booleans, etc. A variable has to be declared using var. For example var car = 'toyota';. This stores the string 'toyota' into the variable of car.

• Arrays: are special variables that can store multiple values within a single variable. They can be numbers or strings or a mix. For example if you had more than one car you could store them in the variable car like this var car = ['toyota', 'ford', 'chevy'];

• Objects : Objects are a type of an array and a type of variable. Where a variable can only hold one value an object can hold many values, like this: var car = {make: 'toyota', model: 'tacoma', color: 'black'}; . Values inside of an object can be anything including arrays, functions, variable and more.

• Functions: are a block of code that are designed to perform a specific task. A function is executed when something calls it. It looks like this:

    function myFunction(make, model) {
       return make + model; }
  

• If-Else statements: are conditional statements that perform different actions based on the conditions set. Basically you can think of it as if 'something' then execute a code block, otherwise (else) execute an alternate code block. If loops look like this:

    if (car.make===toyota){
        return true 
      }else 
       return false
  

• The For loop : is used when you want to run a block of code multiple times. The syntax looks like this:

     for (i=0; i< car.length; i++){
        text += cars[i] + <"br">; 
      }
  

This sets the initial value to zero i=0 and then for as long as i is less than the length of our car array it will increment the function by one (i++). Then it will return the three values in our array car.

For loops are a little more complicated and you can read more about them and all of the others discussed herein at Mozilla Developer Network

The DRY Principle

This is a programming principle that says Don't Repeat Yourself'. Which means always try to find ways to keep your code clean. If you write a function multiple times, the DRY principle applied would be to figure out how to reduce the number of times you needed to write that function into one.

Game Time

As a mini-project we were asked to use what we learned in the first few classes of Javascript and create a basic rock paper scissors game. Try your luck playing the computer in this virtual rock paper scissors game.

See the Pen Bootcamp_3.2_RockPaperScissors by Nigel Finley (@Nfinleymusic) on CodePen.

Week 4 continues with Javascript and a hangman game. Stay tuned and brush up on your 2000s pop stars if you want to win hangman!!

Shout Outs

• Music listened to while blogging: Junip: Fields
• A Smarter Way to Learn Javascript
• W3Schools : Javascript Page