The Cloud and The Video

I am currently in the homestretch here at Telegraph Academy and time has flown during the senior portion of the cohort. I attribute it mostly to working on projects opposed to just sprints and lectures, which is great as I am able to create while applying the vast amount of knowledge I’ve learned. Over the past week and a half we have been working on our pièce de résistance a group project that allows free reign to work with the taught frameworks and technologies or jump into unexplored territory…naturally my group and I agreed to delve into the latter.

My thesis project is a web application that relies heavily on video integration and streaming, which up to this point no student had explored in TGA history. We knew that it wouldn’t be easy but remained confident that it could be tackled and implemented within the amount of time we were allotted.  We made it happen and this is how…

Video implementation in our web application touches every element of the our stack which is the NERN (Node.js, Express.js, React.js, and Neo4j) stack. I must note that if you were to try and implement what I have here for you own app don’t be thrown off if you’re not using the exact same stack, this post is about the concept in addition to showing how we did it.

First thing we did is find somewhere to store our video since storing the whole of the video into the database was not an option it was necessary to do some exploring. After much research we decided that Amazon Web Services (AWS) Simple Storage Services (S3) would be best for what we needed to accomplish.

I created a bucket and made a new user with AWS Identity and Access Management (IAM). This is important because once a user is created IAM supplies you with an access key ID and a secret access key that is need to access your bucket. It  is not necessary to create an IAM user but it is STRONGLY recommended for security reasons. If you do go the route of making an IAM user then you must give that user access to your bucket. You do this by going to “Permissions” and clicking on “Create User Policy”.

Screen Shot 2016-05-23 at 12.06.11 PM

then enter the following:

Screen Shot 2016-05-23 at 12.16.15 PM.png

My suggestion for this part of the process is to test your bucket manually uploading a file (image/video) to see if it makes it into the bucket, make sure the file you uploaded is set to public by clicking the “Set Details” button then clicking “Set Permissions”, checking “Make Everything Public” then clicking “Start Upload”:

Screen Shot 2016-05-23 at 12.57.49 PM.png

if your file is uploaded successfully a http link will be generated. You can access this link simply clicking on the file then clicking the “Properties” tab, you should see the following:

Screen Shot 2016-05-23 at 1.02.15 PM.png

In your html make a simple html5 <video>  or <img> with that link as the source.

Screen Shot 2016-05-23 at 1.43.18 PM.png

 

Below is what renders on the page.

Screen Shot 2016-05-23 at 1.42.16 PM.png

Now that testing is done it is time to get into the nitty gritty. For our app it is essential to post our file into our S3 bucket utilizing our code instead of doing so manually. We used Node.js and Express.js in our backend with addition of S3FS and connect-multiparty (middleware) to do this. Below is how I implemented the back ends connection to my S3 bucket.

*It is assumed you have a working knowledge of how to set up a server using node/express*

Screen Shot 2016-05-23 at 2.29.42 PM.png

upon completion of the back-end it is beneficial to make a post request using Postman as a means of testing.

Screen Shot 2016-05-23 at 2.34.25 PM.png

If everything was implemented correctly you should see the file in your bucket.

Time to tackle the client side of the application. Initially for testing purposes we used a vanilla XMLHTTPrequest to post to the server but because we are using React we did it using an Axios post request.

Below is the XMLHTTPrequest:

Screen Shot 2016-05-23 at 2.54.00 PM.png

 

Below is the Axios version:

Screen Shot 2016-05-23 at 2.58.00 PM

At this point the front end and back-end should be connected. Posting a video from your browser will now land in your S3 bucket for you to do with it what you will. We are currently still working on our project but I look forward to posting it on my main page once it’s finished!

If you have any questions or comments please leave a comment below. I know this is a pretty arduous process for someone who has never delved into this territory so feel free to reach out!

 

 

Advertisements

Triumph over Toy Soldiers

In my quest to become the best software engineer possible I realized that toy problems are on of the best tools available to help me ascend technically and algorithmically. Now, this realization wasn’t an easy one to come by as I notoriously loathed having to solve them but over the past five weeks I’ve almost come to love them. My shift in attitude has largely to do with one specific problem that has haunted me over the past couple of months.

During the pre-course portion of Telegraph Academy each incoming student is assigned a mentor that we are to check in with every week. The mentor would assess our progress mentally, and technically through conversation and of course a toy problem!

screaming

I somehow had made it through all my check-ins with flying colors, toy problems and all… that is of course until the very last week. I was given a problem that seemed to encompass a mad combination of all my least favorite things: Math, Roman Numerals, and Infinite Loops. I immediately asked for another problem but I knew as soon as the sentence left my mouth that wasn’t going to be an option. I repeatedly read the problem over and over again trying to make sense of something but the instructions simply ended up being a jumbled mess in my brain. I blindly began coding but I knew my direction was going the absolute wrong way and I couldn’t pull myself together. I was sweating, panicked that my mentor would rescind the invitation I’d worked so hard for, but my mentor assured me that my progress up to that point had solidified my spot and should just work on the problem in my free time leading up to my first day…of course I never touched it again, thinking I had seen the last of that problem…I was wrong.

Over the past five weeks the Junior and Senior class take the first hour of the day to work on a specific daily toy problem, to get our brains going and to aid in our algorithmic problem solving. Needless to say I wasn’t too happy when I found out this was going to be a thing but I understood it was important as a result I tackled each problem everyday catching on to certain patterns the problems tended to have. I was by no means solving the different problems everyday and more often than not I would become discouraged, but my trust for the TGA program would not let me quit.

Friday morning I walked into TGA well rested (for once!) and ready to get the day started, that was until this happened:

Screen Shot 2016-04-26 at 11.26.19 PM

Roman Numeral Translator….Well at that moment I began to feel the panic spread over me again, not because my standing at Telegraph Academy hinged on it but because it would directly show me if I had made any progress over the past couple of weeks. Immediately I calmed down and thoroughly read the problem over three times to ensure I truly understood the directions. From there I began to code…

Screen Shot 2016-04-26 at 11.41.34 PM

I set up the main translateRomanNumeral function first and then moved on to  my helper math function as a way to keep my code modular (important!) so that I didn’t get bogged down by too much happening in one function. Below is my helper function:

Screen Shot 2016-04-26 at 11.45.21 PM

After testing it a couple of times to make sure my logic was where it needed to be I realized that IT WORKED! Now I realize that there are much harder toy problems out there, trust me I’ve seen some beasts, but for my personal growth within this program it was a pretty awesome feeling to conquer something that at one point was such a point of discomfort. I’m sure when I head back to TGA on Monday I’ll be faced with another doozy but now I more than welcome the challenge!

Backbone.js…I need a chiropractor pt.1

I’m a little over three weeks deep into Telegraph Academy and I must say it has been a truly unique experience so far. The “Sprints” that we endure every two days are trying to say the least, they truly push you out of your code comfort zone. One particular sprint that is notorious for being of the most difficult deals heavily with Backbone.js, an MV* framework that remedies spaghetti code and gives your app structure…like a spine…get it…backbone…there’s a joke there. Due to the difficulty I experienced with this framework I thought I would give an overview on how this framework functions.

First thing to understand about Backbone is that it is a MV* framework. This means that Backbone deals primarily with Models and Views. A Model is the facts and only the facts, it represents the data for your particular application. Models are not concerned with Views rather Models trigger the events that Views utilize to display the data to the html. Below is a simple example of a Backbone model.

Screen Shot 2016-04-04 at 9.04.09 PM

The above example exhibits a simple Model of animal, the defaults method sets the initial state for this model and can consist of additional methods that you would like your skeleton Model to have. Which brings me to Collections,  a collection of models that are different but similar in model structure, rather a group of instances built from the original model.

Screen Shot 2016-04-04 at 9.24.42 PM

Notice above how AnimalCollection is created, extending from the model Animal which denotes that the collection belongs to the Animal model. As we create new instances of the Animal model we set their own defaults to what is specific for that particular animal. Finally we store the new animals in ‘myAnimals’ a new instance of AnimalCollection. It’s important to realize that myAnimals is basically an array of objects which in essence just vanilla javascript. I have found that once you break this framework down to it’s fundamentals, it’s just javascript.

Last but not least are the Views, now as I mentioned earlier the Views only job is to display the data. Having this sort of modularity is extremely useful when your app grows in complexity, this way edits to your code will only effect a certain piece of your code and not require you to delve deeper. Due to the complexity of Views I plant to devote an entire post to them in the future, hopefully by then I will have found my chiropractor.

Opening the Door on Closures

Please read my previous post “Let’s Talk About Scopes Baby…” before you continue on as a proper understanding of Scopes is necessary to grasp the beauty of the closure.

Time to tackle Closures, an extremely useful tool when it comes to programming in JavaScript. Their usability varies depending on who you are and you’re personal preference when it comes to coding, but they do help when it comes to the readability and styling of your code which are VERY important factors to be considered.

Closures are functions that consist of a function within a function, so an outer function and an inner function. Below is a basic example of a closure function:

Screen Shot 2016-03-12 at 9.00.55 PM (1)

Below is what is printed to the console:

Screen Shot 2016-03-12 at 9.00.55 PM

Notice how

 console.log(innerCall); &nbsp;

simply logs

 [Function] 

to the console. If I call the .toString() method on innerCall this is what is logged :

 

Screen Shot 2016-03-12 at 9.31.40 PM

Essentially the variable innerCall now contains the function that was returned from the outerFunc function, making it invocable. The cool thing is that the variables from outeFunc are still available to innerCall so when it is invoked it has access to it’s own variable and can access the outer functions variables by reference. Below is an example of how this could come in handy :

Screen Shot 2016-03-12 at 10.18.53 PM

Pretty straight forward right? I hope this has shed some light on closures and their uses, if you have any questions feel free to comment.

 

Let’s talk about Scopes Baby…

Scopes are one of the most important concepts you can learn in the Javascript language, or any language to be honest. If you find that your Javascript functions aren’t working the way you would like them to there is a strong possibility the culprit is your scoping.

So what is a Scope?

A scope has to do with where functions and variables are accessible within the program that is being executed. I’m going to tackle the two most import types of scopes that will aid in proper functional Javascript programming with a third more advanced concept to follow in a future post.

Global Scope

The Global scope is the main window or window object, any variable or function that is declared within the global scope is accessible anyplace in your code. For example, think of the global scope as a fish tank, within the fish tank there is a castle (function) and two fish (variables). You as a human can access anything within the fish tank and manipulate it however you please.

Local Scope

Now that we have an understanding of global scope we can now apply the same logic to the local scope. The keyword is ‘Local’ which means the lexical environment has been scaled down, so instead of the javascript engine looking at the lexical environment of the window it more concerned with what is contained within a function. Going back to the fish tank example from before, the castle (function) within the fish tank has its own environment that cannot be seen by anything OUTSIDE the castle. Now the fish can swim inside the castle or swim outside the castle but anything that is SPECIFICALLY within cannot leave the environment.

Below is code snippet that ties my fish tank example and code together.

Screen Shot 2016-03-02 at 12.09.56 AM.jpg

Keep in mind you cannot see the window object (fish tank) but it’s there.

Now there is one more Scope that is a little more involved when it comes to it’s understanding and that is the infamous Closure Scope. I will be covering this concept more in depth in another post, just to make sure I get to all the ins and outs of the subject.

If you have any questions about this specific example please feel free to contact me or leave a comment.

 

Let the journey begin..

I’m Dion and today I officially have thirteen days before I step foot into Telegraph Academy ! My emotions are pretty much all over the place, for the past year I’ve made it my goal to gain an understanding of Javascript, Html, and CSS that would allow me to pass Telegraph Academy’s technical interview, and  I must say it paid off. Though I will be attending the upcoming cohort I would be lying if I didn’t say that imposter syndrome is very much a reality but I’m determined to not let it get the best of me as I’ve come entirely too far to do so. This blog will serve as a tool to solidify what I’ve learned so far and exhibit new concepts I find interesting, I want to be able to look back at the end of this program and see how far my thought process has come in addition to my skills…Let the journey begin!