DEV Community: Brandon Briones

KeyBoard Shortcuts

Brandon Briones — Mon, 21 Sep 2020 05:46:31 +0000

If you are just starting out in learning how to code, this will be a good read for you. The one thing that I wish I did early on when learning how to code, is taking the time out of my day to learn some keyboard shortcuts. Main reason for that is because we as developers are going to be spending a good amount of time in front of the keyboard. That being said, we want to use every keystroke as efficiently as possible. Otherwise there is going to be a lot of time just thrown to waste over time.

The shortcut keys below are the ones that I use frequently when working with vs-code. Some or all also apply to other code editors and if they don't just check the key bindings in your editor. Since I am on a Mac I'll be using Command but if you are on windows you can switch out Command for Control and Option for Alt and you'll be relatively safe.

Copy/Paste/Cut

The most common short cut keys that I'm sure everyone is aware of, is Command + C to Copy, Command + X to cut, and Command + V to paste. Now usually when you do any of these commands you highlight everything you want to copy then do the commands. Now let's say you want to Copy or Cut a specific line, there is no need to highlight that line! As long as the text cursor is on the designated line, Command + C will copy the whole line and the line break and Command + X will delete it.

Duplicate

In order to duplicate things we usually do the old copy and paste. A really easy way to duplicate something if you need multiple instances of the same thing is Shift + Option/Alt + Down arrow key. For a single line all you need to do is be on the line, but if it is multi-line then you will need to highlight.

Line movement

This next one is one of my favorites.
Option + Up/down arrow key, allows you to move an entire line up or down. This command also allows you to move all the lines you highlight up or down. This is very handy in many situations, either for rearrangements or you wrote the code in the wrong line and you just need to move it to where it needs to be. This will save you from having to copy, paste, and then cut.

Text cursor movement

When moving around through a line usually you just either click where you want to be or just move space by space clicking on the arrow key until you get to where you want to be. Well some quick hacks to moving all the way to the end of the line is by doing Command + right arrow key and
Command + left arrow key to move to the beginning of the line.
What if you don't want to do either and you want want to move a couple of words over? There's a shortcut for that too! On a mac it will be Option + left/right arrow key but for windows it will still be Control + left/right arrow key. This will save you so much time guaranteed.

Highlighting

The most common way to highlight is simply by left clicking and holding down until you have everything that you want. When using a mouse or touchpad sometimes the precision can be a little off or a lot. By using shortcut keys now you have another solution.
Simply by doing Shift + left/right arrow key you have the option to highlight letter by letter or
Shift + Option + left/right arrow key if you are going word by word. Depending on where you text cursor is located you can highlight everything in front or behind the cursor by doing
Shift + Command + left/right arrow key. Now if you want to highlight everything below or on top of the line that you currently are in,Shift + Command + up/down arrow key will do the trick. In the case that you don't want to highlight everything below or at the bottom just the one directly above or below simply do Shift + up/down arrow key.

For now these are all the shortcut keys that I will share, there is a lot more and I challenge you to explore and pick up some more. If you put them into practice every opportunity that you get, it will start becoming a habit and you won't even have to think twice about doing a particular action. Next thing you know people will be astounded by your mastery of the keyboard and will think that everything you do is MAGIC!!

Deno?

Brandon Briones — Tue, 15 Sep 2020 17:06:02 +0000

Today I'm going to be talking about this new runtime environment called Deno. But wait why should we care about Deno if we already have node.js. We should care, because Deno is actually created by the same person so you can almost say that Deno is node.js 2.0.
Ryan Dahl saw many flaws over the years that node.js had and basically said I could do this better. Ryan even had a talk called, "10 Things I regret about node.js" where he announced Deno.

What is Deno?

As I stated earlier it's another runtime environment for Javascript and TypeScript. If you are not familiar with TypeScript it's just a stricter version of Javascript. It's still based on the V8 Javascript engine and the Rust programming language.

What start to set Deno apart from node.js is that from out of the box, you can write in Javascript or TypeScript. There's no need to configure anything because it's already taken care of behind the scene.

Deno is also in charge of being its own package manager. So in node.js where we would require a package-management program like npm, Deno is able to be it's own package manager within single executable. Instead of having to install a library, all you would need is the Url of the file that has the instructions.

From the code snippet above that Deno website provides us, we can see that it's importing serve directly from the provided url. With this being implemented, it gets rid of the need for a package.json and also the huge nasty node_module folder that we have to do an extra step to ignore.

Deno also has almost all the browser Api like fetch built in. Where in node even though fetch is built in you can't use fetch in the server side unless you install a package. With Deno, if you are not writing Deno specific code you can write the same code you use for the browser, for outside of the browser. It allows for that flexibility.

Security

One main focus about Deno is security. If a script needs access to the internet or access to the file system, you would have to grant that script permission to be ran. So in the case of a corrupt package that is trying to get access to another file to read or modify, you will get a warning in the console saying that the script will need permissions before it gets executed. Where as in node.js, it would just get ran and the damage will be done.

Deno or Node?

Even though Deno is an upgrade from Node and has all these new fancy features, as of right now node.js is in v.14 while Deno is in v.1. It's still new and still has some things that need to be worked out. Javascript is also really dependent on the Npm library because there is so many packages written out for it. Deno is definitely something to pick up and learn but because it's still so young, companies are not going to switch over to this new environment anytime soon.

Intro to GraphQL

Brandon Briones — Tue, 08 Sep 2020 17:07:49 +0000

Today I'm going to talk about a little topic called GraphQL. Just kidding this topic is enormous. So I'm only going to cover what it is and why would you want to use it.

As developers we should be familiar with the Restful architecture when building endpoints for API calls. For the server end, there would be a different endpoint to handle different requests. But it can get messy really quickly, when in order to get the information that you need you have to call on that API again. This is where GraphQL comes into play.

GraphQL is query language specifically built for APIs. It was designed to make API's fast, customizable, and developer-friendly. GraphQL gives the client the power to ask for exactly what they want and nothing more.

What GraphQL ensures, that if the information that you want requires multiple urls, instead of make multiple queries to different endpoints like you would for REST API's, all of the information that you want can be done in one simple query.

Query

A simple example of what a query could look like is shown below.

This is how a client can construct a simple query passing in the field of what exactly he/she may want to get back from this hero. If everything goes right during the query call then you'll get the response below.

Also you have the ability to pass in arguments as part of the query, so it can be very dynamic. There's many more things that can be implemented. GraphQL APIs are organized in types and fields, this allows us to grab all the information we need in one single endpoint.

Types

On the left we have a query where we ask for a lot of nested information. In the case of a restful API, in order to get all the information from this query we would be hitting almost five API calls. For types since we define what data is possible to get all of this can be done in just one simple endpoint. We define what's possible with types. When constructing the type GraphQL needs to know how to resolve each field in the given query so that's why for our example used above, when we query hero it's going to look for the type Character and get all the field. Notice that for the field of homeWorld it refers to the type of Planet that will get all the information for the Planet.

A couple of reason's that we would want to use GraphQL is basically when the client needs the data from multiple sources. This allows the client to just get all the information back from one single endpoint. Also it might be a case where different clients might need various different resources. GraphQL allows you to give each possible client the correct data to receive.

When it comes to GraphQL there is to my point of view a bit of a learning curve. Even if your familiar with setting up restful APIs, don't think this will be a breeze. Once you have GraphQL down then you can reap the advantages that this language has to offer.

Resources

GraphQL

Clean up your code with Async and Await

Brandon Briones — Mon, 31 Aug 2020 08:39:38 +0000

For today's topic of Async and Await, you should be somewhat familiar of what synchronous and Asynchronous code is. If you don't, take this quick three minute read that a fellow Sparker from my boot-camp wrote on this topic by following this link and after you finish come back.

When writing asynchronous code there's been the convention of callbacks, which lead to a infamous term called callback hell. This lead to one big pyramid of hard to read code. To fix this ugly problem and make the code more readable, came along promises. To make the code even more readable and easier to follow, Async and Await became the new kids on the block with Node version 8.0.

Usually when dealing with asynchronous code, your'e typically trying to get some information from a database which takes x amount to time to complete.

To mimic a call to a database I made two promises and by using setTimeout on both, that makes them asynchronous.

To explain the code above, we first use the promise firstName passing in the argument of 1. What to notice here is that to get access to the value, you have to do a .then method that takes in a onfullfilled callback, and the argument will be the value that the promise gives back. For our case first will have a value of the string of Brandon, which we pass into the next promise of fullName. Then fullName will also have a .then method which will take another callback.

This is very simple code, most likely the code you'll be writing might require more nesting and will be more complex. Also I'm leaving out error handling to make this blog shorter, but after the .then you would need a .catch to catch the error.

What async and await allows us to do is basically read asynchronous code like synchronous code. In it's core it's just syntactical sugar, and it's much easier to read.

Using async and await, the code is now shorter and easier to follow. This will also give you the same result as the promise example given above. Doesn't this look nicer? Now to break it down and understand what's going on.

Starting with the first half of the deadly duo async.

By putting this keyword in front of a function or anonymous function in our example, this ensures that the function will always return a promise. Async is also needed in front of the function otherwise await will not work, this is a requirement by the JavaScript engine.

With await, anytime you have a function that returns a promise you can await the result and get the actual value. For our example the variable of first became the string of Brandon and full became the string of Brandon Briones. Now let's say we forgot to put await in front of fullName what would full then become?

As shown above the variable of full would just be the actual promise itself unresolved. Even tho it looks synchronous, it's still Asynchronous. While in the function if await is present it stops the function and says the next line of code will not be ran unless this promise is resolved.

This also does not mean that it becomes blocking. Once the JavaScript engine hits await, it will jump out of that function and see what else can be executed. Once the promise is resolved the tread will go back to that function and complete it's execution.

Hopefully you were able to follow along and get a general understanding of async and await. Just to recap async and await is syntactical sugar that make's asynchronous code easier to follow. I did not cover error handling for this concept but if you want to read on it more I encourage you to look into try and catch.

Quick intro to Java

Brandon Briones — Wed, 26 Aug 2020 02:31:52 +0000

Hello fellow Devs, in this blog I'm going to take a quick look at the high-level programming language of Java. New developers might think that if they know JavaScript then Java should be pretty similar. To my surprise that was a big nope, I saw there version of console.log('hello world') and let's just say it wasn't as straight forward as that.

First let's talk about the development of Java. When this programming language was being developed at Sun's MicroSystem in 1991 by James Gosling and company. James designed Java with C++ style syntax. So if you are coming from C++, then adapting to this language might be a smoother ride. Java is centered around the concept of object oriented programming or OOP for short.

To keep it short OOP revolves around four key concepts or pillars shown above. Then end goal of OOP is to manipulate objects and their contents to get results, big emphasis on Objects.

When learning a new programming language we have to start from square one. For me when first learning JavaScript one of the first functions I wrote was to print out "hello world" to the console. So let's take a look at some code and see how Java would do just that.

Just to compare below is the code that would do the same thing in Javascript.

Now you can see why I was a little shook when looking at Java's version. Let's dive right into it, since Java is OOP oriented we are going to be working with class to be able to create our Object. When looking at this code there's a couple of key words that strike my interest and I want to know what they are for.

Keywords

public

This is known as an access modifier. When taking a look at the second public, this is attached to a method. By having this method public, this allows other classes to have access and use this method. If you want it to be strictly for that certain class then by switching public to private that will make that method exclusively for that class.

Static

The next keyword of static basically keeps that method from being instantiated. Which basically means this method does not need to become an object to be used, which is great for saving up memory space. When this method is used, it does not need to reference an object. So by simply taking out the keyword static the method will then become an instance of the class.

Void

Lastly void as you can guess means nothing, this just says that this method returns nothing. In the instance that it did return something this is where you would put the datatype to what is being returned.

At this very moment you might be thinking, there's a lot going on just to print out a simple hello world to the console. If you think we are done with just those 3 keywords think again sir or mam.

Another point of interest is the word main, this isn't a keyword but this is necessary to have in a class. Why? The answer is basically the Java launcher by default looks for a method called main which will automatically be called so it can pass control to the program. In the instance that you have another class with a main you have to tell your Java virtual machine which class to start from. Main also takes in an array of String Objects also referenced by args.
After you have a main when creating another method you can name the method whatever you want.

Now for the juicy part that does the actual printing to the console.
System is a class object that has a member of out, then out has a method of println that will make 'hello world' convert to a string object then print out to the console.

Now we can say that we are done, for now. Learning a new language might be a challenge but it is essential in becoming a well rounded developer. Especially in the job field the more languages you know the more opportunities you can come across!

Error Handling with Try and Catch

Brandon Briones — Tue, 21 Jul 2020 12:32:40 +0000

Lately I've been learning about promises and seeing how it's implemented. First you write out the promise, if it resolves then you use the then and if the promise is rejected then catch is used instead. After seeing the catch being implemented here it reminded me of try and catch and how it handles errors as well.

As a newbie in writing code, taking into account possible errors that I or someone else could make never crossed my mind. So when writing out our code there's some errors we could make and stumble upon. One of the most common ones are syntax errors that are easily fixed if you are using some sort of linter like eslint for vs code. Other common errors you could come across are reference errors and type errors. With reference error you can get ReferenceError something is not defined.

With the try and catch statements we can take into account any error that might occur when running a piece of code. The reason we would want to implant try and catch is because usually when an error occurs the script dies and the error is printed to the console. With try and catch these statements allow us to catch the error and gives us an opportunity to do something else when the error occurs. It puts the control back in our hands when something unexpected happens.

The syntax for try and catch is pretty simple and straight forward as shown above.

Above I wrote out some code putting the try and catch method in action. In this example, the function took into account if the arguments being put in were strings and if they weren't, an exception was to be thrown. By using the throw operator this allows us to write out our own custom error. In this instance the arguments were strings so everything went normally. If the parameter first or last were any other value, catch would of caught the error. The parameter that catch takes in is the error object that JavaScript creates when a error is encountered. Then in the catch code block we can do whatever we want with this object.

With try and catch they only work for runtime errors meaning that for it to work the code must be valid JavaScript. During run time when JavaScript might encounter a line of code that it doesn't recognize catch won't be able to handle the error. Another thing to account for is that the pair also works synchronously.

When a setTimeout is placed inside of the code block the JS engine will run through it and even though there's an error waiting to happen the catch block will never register it because the JS engine is moving on to the next synchronize code and is no longer at catch. So too account for this issue the try and catch statements must be inside of an anonymous function inside of the setTimeout for the catch statement to work and console.error our custom message.

Starting out when we first encounter errors in our code and see bold red lines telling us that something went horribly wrong, could be really intimidating. Next thing you know errors become you're best friend and you will even try to catch them so at least you know what you're dealing with.

Npm and dependencies

Brandon Briones — Mon, 13 Jul 2020 13:02:17 +0000

For the past couple of weeks I've been finding myself doing npm install on all of my projects for my program. For me I've never took the time of day to actually look up what that line of code was doing. All I knew what that before all of my projects I had to run this line of code, it would do this thing, download stuff and magically I can now start working on my project. So learning a bit about npm is pretty important for my future success as a developer.

Today I'm going to explain a bit about what Npm is and what happens when you do run npm install. Npm or short for (Node Package Manager) is a default runtime package manager for node.js. It's an online database with over one million public and private packages called the registry. Developers can use these packages as building blocks for there own projects. When you use one of these packages it's called a dependency. I'm sure many of ya'll might know about the famous underscore package and that's what I'm going to be using for my example today.

Before adding the underscore package to our application we need to have a package.json which can be created by running the following code below.

This package.json file will contain information that describes your current application or metadata. As you can see with name, version, description and author. Now having this file we can now add the underscore npm package. Simply by going to the npmjs.com and typing in underscore in the searchbar, we'll be lead to the underscore page with all the information about this package and how to install it.

Once this line of code is run in your terminal two things are going to happen. The first thing is the actual download where you will now have a node_modules folder which will contain all npm packages installed.

Also in case that certain package also relies on other packages or dependencies those will be added to the node_modules folder as well. That being said this folder has the potential to become very huge very quickly, because of the potential in size this is a folder that we wouldn't want to push up to our repository therefore we ignore it. Which leads to the second event.

For the second thing that happens when a dependency is installed, your package.json file will be updated.

A dependencies section will be added, and now all the future packages that you download from npm will be listed here. This will have the name and also current version of the package. Having the information in package.json allows anyone that is cloning our repository to now do npm install and this will automatically install all the dependencies listed in package.json.

es6 Template strings

Brandon Briones — Thu, 09 Jul 2020 12:44:53 +0000

Today I'm going to cover a very useful tool in JavaScript that comes with ES6. Where going to take a deep deep dive into Template Strings, What they are and what they can be used for. Ever since I was introduced to them in the middle stage of my program I stopped using the old way to write strings when I needed to add some outside source into the string. This old way in JS is called string concatenation. Of course sometimes I might copy and paste some code with this old method of writing a Dynamic string and forget to refactor it to template string, then have to write a very long blog about Template strings.

Starting out with the basics to create a string in JavaScript we can either use single quotes to create a string such as
('This is a string') or you can use double quotes to create a string ("This is another string"). Which ever you pick really doesn't make a difference for a simple string that is going to be a one liner. Now with ES6 we are given another option to write a string which instead of the quotes we use back ticks. If your not that key savy, the back-ticks are at the top Left of your keyboard right to the left of the number (1). So now you can write another string using back-ticks.

For this instance I had to use a picture because when you use back-ticks when writing a blog in Dev it formats it into a block. Luckily I was able to catch this small feature otherwise my example would of been lost. So now you're probably asking what's so special about this different syntax, and what separates it from the single quotes and double quotes. Well there's a lot of things that these back-ticks can do. Back to the string concatenation example when we have to add an outside source into a string we simply can't just inject the variable right into the string, we would have to close off the string then use the addition symbol but it in the variable then add another addition symbol then finish the rest of the string.

From the example above there's a lot going on, and that's one putting one outside source, could you imagine if there was three or four might variables that the sentence might need. That's a lot of addition or plus signs. Also another small detail that could easily be looked over is the WHITESPACE, you definitely have to take that into account if you want the proper formatting. If you ask me that's a lot to worry about. As developers where probably off solving complicated code and running into bugs all the time so we need tools that make things very convenient for us so we won't be frustrated. String concatenation if you ask me is very frustrating. Back-ticks to solve this problem we now have a Template tag. The syntax for a template tag is as followed ${}. Where going to take the previous example and switch it out for a the new way.

As you see in the example above there's no addition signs to be seen, this is because the template tag creates a space for the variable to be placed directly inside of the string, then it will transform it into a string! So now you can just write the string and add the outside source just like another word in the sentence. This just doesn't restrain itself from adding adding string into the string you can add any JavaScript expression. Such as function calls, arithmetic, boolean, and more. When I was first trying to implement my very first template tag, was when I was taking an exam and I knew about the template tag but completely forgot about the back-ticks because a good amount of time had passed since I ran into this new feature and I just recalled the template tag. It took a professor to point out what I was missing and when he said back-ticks let's just say I had forgot how they looked like and where they were on the keyboard. It was a pretty embarrassing moment, but I had figured out the complex prompt of course.

Now if you thought that was all that template strings can do, think again there's more. Not only can it substitute variables it can also do line breaks for you without the need to actually write out \n if you want your string to be multi-lined. In the old way of writing a string your code would have to look like this.

Now as you can clearly see if we want to make a line break we have to type out the characters forward slash "\" and "n" that's two unnecessary characters that I can honestly do without, and just imagine if your righting out a a nine multi line string, that's an extra eighteen characters. So now if we want to achieve the same thing with template string's all you have to do is this.

Here comes our hero template strings to come save the day and also our fingers from having to type out unnecessary characters. As you can see, you can type out the string just the way that you want it, so it's easily to visualize and you don't have to write those extra two characters \n. Now of course everything has it's drawbacks and special conditions but for this instance I'm not really complaining because of the fact that the upside to template strings far outweigh the draw backs. I'd even compare it too the drawback on a scale is a feather, and the upside if the Eiffel tower. If you want to use the forward slash character "\" in the template you would have to write it out like by adding another forward slash.

The same would be said if you were for some ever reason need to write out "${" characters in the string you would have to use the forward slash also in order to use them.

Deeper Dive into Inheritance

Brandon Briones — Mon, 06 Jul 2020 09:49:15 +0000

Apparently in coding there's a thing called inheritance where objects can make baby objects. Just like in real life babies take up certain traits from there parents. Same thing can be said about these baby objects. In this certain instance we're talking about constructor functions and we use these function to create the "baby objects".

To further demonstrate this let's create the parent.

Here we create a constructor function class of feline. Usually the parent or also referred to as "Super" class will consist of properties and methods that all the children will have no matter if they are a different type of feline.

When we create our cat Garfield, we see that he has all the properties of a feline. When we see his object we see the word constructor which will always refer to the constructor function that created the Garfield object which is "Feline". We also see the words proto or in other words prototype which will refer to the parent constructor object. Since we are the parent it appears empty. If you notice at the bottom it says proto: Object in this case this refers to the constructor function that creates ALL objects.

So now what would happen if we want to make lions specifically?

When creating the new child/sub class of Lion we do know that lions have there own distinct properties but we still want all the methods and properties that feline has because a Lion is a feline. In our code in order for our child class of lion to inherit all the properties from the parent class of feline the extends keyword is used.

Now we created a mighty lion of Simba using our lion constructor function. When we take a look at Simba's object, we can see that the constructor in this case is Lion. Now we see that the first proto now has a value of Feline. This is too indicate that the Lion object has a reference to the parent object of Feline with all of it's methods. This is what extends does for us, it sets the prototype to Feline so we can inherit all of it's methods.

Here we see that Simba is able to use purr and ROOOAAR when those functions are invoked. If you saw our constructor function for lion you would notice some code kinda missing. Obviously we don't have the purr method written out or any other methods written out besides just roar.

It's time to explain when the purr method on Simba was invoked the JS interpreter went to the Simba object to see if it has purr. Obviously we never wrote it out in our constructor function so of course it doesn't have it. What it does have is a reference to the parent object of Feline.

Now that the JS interpreter has checked Simba's object and realizes it doesn't have the purr method, it goes and checks the parent object of Feline. In this case it finally finds the purr method and calls it! We made the interpreter put in a bit more work to call the method but it runs pretty fast so I don't feel so bad.

In conclusion, all that takes place is we leave a trail for the JavaScript interpreter to follow so it can reach what it's looking for.Thank you for baring with me and making it all the way to the end. I hope this gives you a clear visualization of what goes on when inheritance between objects that are created by constructor functions takes place.

What is This??

Brandon Briones — Mon, 29 Jun 2020 09:17:00 +0000

There's this keyword in javascript called "this". When I was first introduced to this new concept, the first thing that came to mind is "What is that?". During that first encounter, the more that "this" was being explained to me the more complicated it seemed.

Let's just say there's was a certain word I started to avoid using in daily conversation. Here's my attempt to explain this.

The first thing to know is that "this" will always be referring to an object. Now, what's going to determine what that object is boils down to how it get's invoked. There's five different invocation methods to look for which are Global, Free function, Method, call/apply, and Constructor.

Let's start with the most simple of them all which is Global invocation.

In this example i'm using the chrome developer tool to show you two things. First is that "this" by itself would reference the Global object where everything is contained. The second is that when a variable get's defined by using the var keyword it will be attached to the Global object so you'll be able to use "this" to get access to it. Also to keep in mind when you create a regular function, that also gets attached to the Global object.

Next is Free Function invocation

In this pretty straight forward example by invoking a function that has the word this, it will make this point to the Global object.

Hopefully so far it's been pretty simple and I haven't lost you yet. I'm sure your'e tired of the Global object so in the next invocation where're finally going to reference something else.

Method invocation

Here I created an object that has two properties and a function, but for this instance if a function is inside an object it's referred too as a Method. Overall "this" will refer too the object in which it's contained. When the method sayCatchPhrase in player is being invoked, "this" will refer too the player object and not the global object. A quick saying to remember is "Always look to the left of the Dot" during call time. If you want too see what object "this" will be referring to, simply by looking to the left of the dot during call time will have your answer.

So now we ask ourselves, what if you want "this" to refer to a different object other then the one it's in? How could we possibly go about doing that.

Luckily there's functions called call/apply. The functions call and apply are very similar since they both immediately invoke a function and changes the reference of "this" to the object that you want. As shown in the example we add another player object with Widowmaker into the mix. This time we use call to invoke the sayCatchPhrase method from player with Tracer and use Widowmaker's catchPhrase instead.

Only difference between call and apply is that when the method takes in arguments, apply takes in those arguments in an array.

Now last but not least we have good old Constructor invocation.
For any beginner that hasn't been introduced too constructor functions yet. All this function does is create objects, with methods and properties already pre-set.

For this last example we create a player factory, with both properties and method pre-set. When we create the player Doomfist we call the Player constructor function passing in the arguments. If you notice we use a new keyword which just so happens to be "new". This keyword does two things it creates a new Object, passes in the properties and methods. Then the most important thing it does is make "this" point to the newly created object. So when we invoke DoomFist's catchphrase it works and "this" is not pointing to the Player constructor function.

With that last explanation, that covers the basic's of this!

As long as you remember to check to the left of the dot during Call time, you will always know what object "this" is referring too. Hopefully this helps clarify your confusion about this.

React and its components

Brandon Briones — Wed, 20 May 2020 13:19:11 +0000

Recently I had the pleasure to work with the React library to finish a project for my bootcamp. So today I want to give a quick introduction to any new javascript newbies on what React is and the concept that it's built upon.

From the actual documentation, react describes itself as a javascript library designed for building user interface. The way this user interface is brought about is by creating it by components. These components are independent, reusable and able to manage there own state. Then you're able to combine all these components to build out complex user interface. When starting to build out this UI you'll have to make your first component and this will be your foundation. This first component will represent the body of the entire application and be the container for other components or now referred to as the child. Then these child components can be whatever you would want them to be.

A good example for visualization is twitter, for this example i'm going to use Robert Downey Jr profile as reference.

On here you can see several different things such as his profile bio, trends, profile suggestions, and the feed. All of these can be considered as components and built out separately. Also within some of these components they can even have children component of there own such as the feed, that has likes, comments, and retweets.

During implementation a component is usually made out of a class, state, and a render method. A component can maintain internal state data and this is the data that you want to display when it gets rendered.

This is an example from the react web page of a stateful component, the data held within is at 0 seconds. So shown to the right at somepoint in time that was also at 0 seconds. At the bottom we have something called a componentDidMount that as soon as the application get's initialized it will trigger another render. Here they have it set up that at every second that passes the State will change, and with react every time this happens there's going to be a render that occurs.

The advantages to having all these components is that instead of having one file that contains a bunch of different java script code inside of it, you will have a lot of different files that have small portions of code within them. This allows you to better follow and read the code that's held within. Another great thing about react is since you're working with components you can make small changes without having to worry about breaking the Parent component that it's held within, you can easily just remove and switch it out with another one at your disposal.

References:
https://reactjs.org,
https://www.youtube.com/watch?v=N3AkSS5hXMA

The Benefit of Same Origin Policy

Brandon Briones — Mon, 11 May 2020 07:23:58 +0000

In this world we know that there's at least two kinds of people, a good and a bad. If someone is good then you can trust them and know that they are not out to get you. On the other side of the spectrum -the bad- they are always up to something mischievous. This can also be said about websites!

We all use some sort of social media, or banking website that contains some sort of private information that we don't want shared. Malicious websites that you might accidentally stumble upon might want access to certain information that is stored on these other sites. For example you might be on FaceBook and see an advertisement that says "Win a free Ipad pro" simply by clicking on the link below! Then you're on the site and start wondering where is my free Ipad? All the while this site is trying to run some Javascript code or Ajax request trying to get access to your friend list! We definitely don't want that to happen and this is where the Same origin policy comes into play.

The Same origin policy or SOP is able to add a layer of security by letting websites share data only if they have the same origin. What am I talking about when I say origin? For that we have to take a look at the url! A url is broken down into scheme, host/domain name, and a port.

When any request is trying to be made by a webpage, that webpage url becomes the origin. Going back to our example from above. Now that we are on this new malicious website. When the website tries to run the request to get our friend list information from Faceboook. The Same origin policy steps in and says, "hold up, wait a minute! Your scheme, domain, and port don't match.".

The request from the malicious website gets denied, keeping our friend list information safe.

This policy is just one of many ways that the information that we keep in certain sites are safe from any outside forces.