DEV Community: JSteigner

What is Python part 2

JSteigner — Sun, 20 Sep 2020 22:16:43 +0000

Hello! Last week I gave a brief introduction to the world of Python and this week I'm going to dive in a little deeper!

First I'm going to touch on the different data types found in Python and then focus on the Number and String data types. You can find the data type of any element by using the type() command. To see the data type printed out you would run this command in conjunction with the print command.

Here I set a variable to contain a string value. When I run the file in the terminal, this is what get's printed out.

Python has several different data type categories and some categories have different data types within the category. W3Schools tells us:

The data type is set whenever a value is assigned to any variable and you can change the type by assigning a different type to that variable.

The Number data type category consists of three different types: int, float, and complex. Int is short for integer and represents a positive or negative whole number and the length can be unlimited. Here is an example:

Now when I run the file in the terminal I get 'int' type back:

The 'float' Number type consists of a positive or negative number containing at least one decimal.

Now I get type 'float' back:

Another common data type found in Python and other languages is the String data type. A string can be formed by wrapping it in either single quotes or double-quotes. To form a multi-line string, three quotes are used and the line break output will correspond to the line breaks found in the code.

In Python, strings are considered arrays and each character is a single string. Similar to JavaScript, you can access a certain character in a string by wrapping the index number in square brackets and preceding that with the variable name.

You can find the length of a string by using the len() function.

Python also has a slice method which will return a section of a string back. To implement this method, you need to declare the string to be sliced and then wrap the starting index and stopping index in square brackets and these numbers need to be separated by a colon. The last index value will not be included in the return value.

Negative slicing can also be implemented by using negative numbers. When this is done, the slice starts at the end of the string.

This has been a brief introduction to some of the different data types of Python. Python uses a lot of the same data types as other programming languages, like Number and String, with some subtle differences. Thanks for reading!

What is Python?

JSteigner — Mon, 14 Sep 2020 03:43:16 +0000

Hello! This week I'll be giving a brief introduction to the programming language Python!

Python was created by Guido van Rossum and released in 1991. It was a successor to the ABC programming language which Rossum was also involved in creating. Python was originally started as a hobby to keep Guido busy during a Christmas vacation and has evolved to be one of the most popular languages used today. The mysterious name is a homage to 'Monty Python's Flying Circus'!

According to Geeks for Geeks, Python "was mainly developed for emphasis on code readability, and its syntax allows programmers to express concepts in fewer lines of code." Python is more akin to the English language than other programming languages are. It is also similar to the mathematics language.

Python is commonly used for server-side web development. It is also used for software development, mathematics, machine-learning, and system scripting. It can run on all the different popular platforms. Python runs on it's own interpreter system, so code can be quickly executed as soon as it's written.

A couple key differences when dealing with Python from other languages is it's use of a new line to complete commands instead of parentheses or a semi-colon, and Python uses indentation(white-space) to define scope.

To use Python you will need to check if it's installed. This can be done by running this command in your terminal: python3 --version. You may have an older version of Python installed so you may need to run python --version or python2 --version but python3 worked for me. You can go to the Python website if you need to install it. According to W3Schools "Python is an interpreted programming language, this means that as a developer you write Python (.py) files in a text editor and then put those files into the python interpreter to be executed." So to run a file you need to prefix the 'your-file-name'.py file you want to run with the 'python3' command so the file will be supplied to the correct interpreter. Let's look at an example:

Here is a simple Python command that 'prints' a string to the console. Now this command to run the file:

since the name of the interpreter is python3 and the file to be run is demo.py. The result of the 'print' command is shown in the console. This is similar to calling 'console.log()' in JavaScript.

Python also has its own command line and you can access it by typing the interpreter name in the console, in this case 'python3'.

You can then run commands simply from the command line instead of creating a whole file, which makes testing code much easier.

As mentioned earlier, indentation is really important in Python because it establishes a code block. If you try to write a block of code without indentation, an error will occur. The amount of whitespace used needs to be at least one and if multiple lines are used inside the code block, the indentation must match. This is in contrast to JavaScript where whitespace is used only for easy reading.

In Python, to create a variable you just need to assign a value to it and there are no variable declarations.

Python supports commenting but instead of the forward slash(/) the pound sign(#) is used. There are no multi-line comments so each commented line must begin with a pound sign.

Here only 'No they definitely don't say 'Ni' gets printed to the console.

In conclusion, Python is a programming language that was built to make programming easier and more intuitive than some of the other languages out there. Its supported by all the major platforms and is very popular! Thanks for reading!

Using Flexbox Layout with React Native

JSteigner — Sun, 06 Sep 2020 06:05:40 +0000

Hello! Today I'm going to get into how to use the flexbox layout with React Native. React Native is very similar to React but uses native ios/android components so it needs to approach CSS styling a little bit differently.

One common React Native tool is the flexbox layout. It is very similar to the CSS flexbox but there are some key differences. According to the React Native docs "The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number." There are many styles that fall under the 'flexbox layout' umbrella.

The first one I'd like to talk about is 'flex'. The flex style defines how items fill up available space in relation to each other along the main axis. The values supplied to each element inside a container determine how much of the whole container those elements will take up. Lets look at an example:

In this example I'm assigning my overall container a flex of 1 because it takes up the whole screen. Now the boxes inside are represented as a fraction of the container space. We need to add the values up to know how much of a percentage they are taking. In this case our total is 2 + 3 + 4 = 9. So the first box takes up 2/9 of the container, the second box takes up 3/9 of the container, and the third box takes up 4/9 of the container. This is the result:

Another useful style is 'flex direction'. This"controls the direction in which the children of a node are laid out." The flex direction determines the main axis and the opposite direction determines the cross-axis. Flex direction evaluates to either a column(vertical) or a row(horizontal) starting at either the top or left respectively. A reverse value can be used as well, row-reverse(right to left) or column-reverse(bottom to top). Lets take a look at the column flex direction code:

Now the row example:

'Justify content' is another flex layout tool that and has many possible values. It will position elements in alignment with the overall container's 'flex direction' or main axis. This style needs to be set in the container element. Let's take a look at the 'center' value:

Here the inner elements line up in the middle of the vertical space. The 'flex-start' value will place the elements at the beginning of the containers 'flex-direction'.

Then there is the 'flex-end' value which will place the items at the end of the container's 'flex-direction.'

React Native's flexbox layout is easy and intuitive to use. These are just a few of the styles that it encompasses. Here is a great site to test out some different styles! https://snack.expo.io/ Thanks for reading!

How to create a plant Id feature with React

JSteigner — Mon, 31 Aug 2020 02:11:12 +0000

Hello! Today I will be talking about how to add a plant Id feature to your app! Last week I was tasked with adding one of these to an existing project so I decided to share some of the things I learned along the way!

So you may be wondering what exactly does plant Id feature mean hehe! What I mean by this is creating a component that allows the user to submit a photo of a plant and then receive info back like the common name, scientific name, and a wikipedia link. This is done via the Plant.id API. This API is really rad! It uses machine learning to make matches with its database based off of the data it receives. Cool stuff!

Before I combined this feature into the already existing project, I made a simple practice app to make sure I could access the API and receive the data with all the complexity of the existing app removed. To do this I used the convenient create react app package. I ran npx create-react-app command followed by the name of the project, in this case 'plantiddemo'.

Now we should have a file structure that looks like this:

We won't need most of these files but this is what running create react app sets you up with. Now if we cd into our plantiddemo directory and then run npm start we should see this in the browser:

Next I'm going to change up the App file so it will just render a blank page.

Now I need to create a PlantId component which will contain the functionality for the plant id feature and have App.js render it.
First I'm going to create the PlantId component. So I create a new file in my src directory called PlantId.js that contains a simple functional component that renders the text 'PlantId'.

I made sure to export it because I need to use it in App.js so I can render it. The next step is to import it into App.js and add it to the return section.

Now when I go to my browser I see the text PlantId on the screen because my PlantId component contains that text. The next step is installing the react file base64 package from npm like so:

This npm package allows us to convert a file from our hard drive into the base64 format. The Plant.id API only accepts files in this format and I believe that has something to do with the machine learning aspect of their API. Then I imported into into my PlantId component so I could use it.

Next I added the FileBase64 component to the return section of the PlantId component. Now my browser renders a component which allows me to upload a file from my hard drive.

The 'handleInput' part refers to the clickHandler that I'm about to create. After that I set up some state that will contain the uploaded photo and imported the useState hook from react. Then I created a handleInput function which updates the state once the file has been uploaded. So now my PlantId component look like this:

Now my state has been updated all I have left to do is make the API call to Plant.id with the new state. Then I can do whatever I want with the data I get back! Before we send the info off to the API we need to add a .base64 to our plantFile state and slice of the first 23 characters because the data we get back from uploading our file looks like this:

But Plant.id needs it to look like this:

Here is what the API call would look like:

I also need to make a button with a clickHandler to make the API call.

So that's how you can make use of the Plant.id API and identify a plant with a photo! I hope you enjoyed this walk through and thanks for reading!

Brief Intro To Vue.JS

JSteigner — Mon, 24 Aug 2020 05:10:07 +0000

Hello! Today I'm going to talk about a frontend framework I keep hearing about called Vue! According to the docs Vue"is a progressive framework for building user interfaces."

First lets get into a little background. Vue was created by Evan You after using Angular while working with Google in 2014. He is quoted with saying "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.". To me Vue almost seems like a mix of React and Angular. It is very fast and responsive like React but uses some syntax that reminds me of Angular. Vue can use html templates and also has the ability to keep CSS modular and scoped to specific components.

Alright lets get into the basics of how Vue works. The first step is you'll need a basic html file and a script src tag with this path from their docs

After that you can create an html element in the body and wrap the data you want to display within the element with double curly braces. This is very similar to Angular syntax. You also need to give this element an id.

Next you need to create an instance of Vue and correlate it with the html element you just produced. This is done by using the 'new' keyword followed by calling Vue with an object argument. This object will have an 'el' property that relates to the element just created and a data property with an object value. This object value will provide the value for the data that will be displayed. For a single page app this will be done inside of a script tag.

Now when we go to the browser the name 'Chewie' is displayed.
This is because the id supplied to the 'el' property of the Vue instance matched the id of the div in the body of the html. Since we want to display 'name' and the name property value of the object supplied to the Vue instance was 'Chewie', that is what gets rendered.

Vue also uses directives much like Angular. Directives are special html attributes that all do different javascript-like actions and there are many different ones. They are all prefixed with 'v-'. A common one is 'v-if' and can be used for conditional rendering. In the html tag you would supply 'v-if' with a value to watch for and if the value was truthy then the data would render.

Here in my html element I am watching for the value of 'cool'. I also supplied data to render if my watched value (cool) is false. Now the values will toggle between "What's up" and "Not Cool' depending on the value of my watched value(cool).

Another useful directive is 'v-for' which is used for looping. With this one you would place a 'v-for' attribute in the html you would like to create multiple instances of. The value for the attribute would be the single variable name representing each index value of the array you will be looping over, followed by the array, very similar to the JavaScript for-of loop. Then, just like before, the data that will be rendered goes inside the html element tags and will be surrounded by curlys.

Then for the Vue instance, the array value to be looped over will be passed to a property of the data object, in this case 'names'.

And this list gets rendered to the browser:

Vue has a directive to establish event listeners as well with 'v-on'. To use this you would create an attribute with 'v-on' but you would follow that with a colon and then the type of event to listen for like 'click'. Then you would supply the event handler to fire when the event occurs in a methods property on the Vue instance with the value being an object containing the event handler.

Now when I click the button 'Yeehaw!' is logged to the console.

This has been a very basic introduction to the world of Vue. This framework is very exciting and lightweight and it combines elements of different popular frameworks into one with ease. Thanks for reading!

Brief Introduction to Express with Emphasis on the Router Method

JSteigner — Mon, 20 Jul 2020 04:20:14 +0000

Hello! My goal for this blog is to give a brief introduction to the wonderful world of Express and how to use its cool router method! You may have been introduced to raw node and thought to yourself, 'woah my routes are looking like spaghetti code!', well no need to fear! Express to the rescue! 🐱‍🏍

First here's a little background into this impressive framework. According to Wikipedia, "Express.js was founded by TJ Holowaychuk. The first release, according to Express.js's GitHub repository, was on the 22nd of May, 2010." Express is an effective framework designed for Node.js. It adopts an unopinionated and flexible minimalistic approach.

The first step to setting Express up is to npm install and then import it with a require statement saved to a variable. You will then need to save an instance of calling express into a variable as well so you can access its wonderful methods. This is conventionally done by saving it to a variable named app.

You will then need to add your port and make use of the .listen() method which according to the Express docs "returns an http.Server object and is a convenience method for" calling Node's http.createServer(). It is common practice to add a console log in the callback of this .listen function to let you know your server is hooked up correctly. If all goes right you should see a log in your terminal saying "Server is listening on 8080." 👍

Express makes the daunting task of routing much easier! So what is routing exactly? In his blog Basics of Express, Routing & Middleware Pratik Temkar hit the nail on the head when he said "Routing refers to determining how an application responds to a client request to a specific endpoint which is a URI and an HTTP request method". The app variable we created, which is an instance of the express function, has methods that correspond to all the common http request verbs we are all familiar with and many more. When you set up your routes with express you will be calling one of these methods with the first parameter being the path and the second will be the callback handler with request and response parameters. Here is an example of a simple "GET" request to the route '/':

Another cool aspect of Express routing is it's Router method which creates a router object. This router object can be thought of, from the docs, as a"mini-application" and resides under Express' use of middleware. The docs also say that Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. If you are planning on using multiple endpoints then this middleware can help keep your code modular and clean. In order to take advantage of this you need to use the .use() method found on our app variable. This .use() method "uses" specific middleware at specific paths. So for example, lets assume the code we have so far all resides in a file called server.js but lets remove the 'GET' request because our route handling will now take place in another file. Lets make another file called api.js. In this new file we will be dealing with endpoints that look like "/api". Inside of this new api.js file we will need to require express and save it in another variable so we can make use of the Router method. This time we will call the variable express. We can then make use of an instance of express.router() and also save that in a variable called apiRouter. We will also need to export this router because we will be "using" it in our server.js file.

Now lets go back to our server.js file and set up our app variable to "use" this api router for endpoints that look like "/api". The first step is to require our api router from our api.js file so we can make use of it. Then we call app.use() with the first parameter being the path we want this router to work on and the second being the router we want to "use."

So now is where some cool magic happens!✨ When we go back to api.js and set up our routes, the path we use will always be prefixed with "/api"!

The url route this is being accessed here is "http://localhost:8080/api/". It's easy to imagine as the complexity of your app grows and you are using more complex endpoints how this technique can help keep your code clean and organized. You can now have separate files for your routes and a separate file for your server set up!

In conclusion the minimalist Express framework makes it easy to set up your server and get it running. It's also a great tool to keep routes in your code clean and organized. If you're going to be doing any server side work then I strongly recommend checking out Express. Thanks for reading!

Using Event Handlers in React

JSteigner — Mon, 13 Jul 2020 03:34:09 +0000

Hello! This week I'm going to be covering how to use event handlers in React. Well first lets talk a little bit about what events are in JavaScript. Jennifer Fu described it well in her blog What’s the Difference Between Synthetic React Events and JavaScript Events? when she said: "JavaScript events are actions or occurrences that happen on web pages. They are an essential part of an interactive user interface." Events are what make a webpage interactive. Anytime the user mouses over a part of the website, an event is created. The same is true for anything ranging from clicking on an image to typing in a text box or even the loading of the page. The origin of these events come from HTML and it's JavaScript's job to know how to listen for them and then handle them.

When using event listeners in JavaScript, they are written out as an HTML attribute with all letters in lowercase.

React takes a different approach to their event listener syntax. React uses the camelCase style.

You may have also noticed the curly braces around the event handler name as well which is in contrast to JavaScript's double quotes. This is another important difference between the React and JavaScript syntax.

React uses the ES6 style for creating their components. Each component is created using the 'class' keyword so when event handlers are created, they must be methods on a class component.

It is also important to realize that any event handlers that are created will need to be bound to the component that created them. If not when you pass the event handler to the event listener in the HTML, the binding of 'this' will be lost and when the interpreter encounter's the key word 'this', ol' 'undefined will be returned😢.

There are a couple of different ways to approach this. If we are using the method creating technique applied in the last example, then we would need to bind the event handler in the constructor. This way we produce a new function that will always refer to the component that created it no matter what context it is used in.

Now when I click on my button that logs 'this', you can see the App component was logged to the console.

Another approach is to use arrow function syntax when you are creating your methods/event handlers. W3Schools states that "With arrow functions, this will always represent the object that defined the arrow function."
Since in React we always want 'this' to refer to the component that the method is found on, the arrow technique works as well.

Once you have your event listener/handler set up, it's time to start using it! One popular way to use an event handler is to have a state property set to a boolean value and then use your handler to toggle that state value.

Now that I have this set up, you can see that I get true/false toggled in the console.

This technique can then be further used to render something to the page based on the state of the conditional.

Another popular technique is to use an event handler to update the state to represent the value from a text box. You could then for example, make a 'GET' request with that value.

In this example, I make use of the event object parameter and then extract the value from it by using event.target.value and then update the state with that new value. You may be wondering where is this 'event' object coming from. According to David Wall in his article about synthetic events he states that "When the user clicks a button, to cite a popular example, the click is represented as an event object of the click type and is passed to whatever event handler (if any) is assigned to react to events of that kind." So we can then access this event object and extract values from it. One way of doing this is by accessing the event.target.value property which in this case gives us the value from the input text box. Since we have an event listener of 'onChange' set up to call our event handler method, whenever the text input value changes in the text box the state is updated and the new state value is then logged to the console.

In conclusion, React makes it intuitive and easy to use event handlers. Just remember to use ES6 syntax and add them inside of the class like you would any other method. Don't forget to bind them to the component that created them by either using arrow functions or by binding them in the constructor. Good luck and happy eventing!🐱‍🏍

Spreading out the Spread Operator

JSteigner — Mon, 06 Jul 2020 04:14:06 +0000

Hello! Today I'm going to tackle the concept of the spread operator in JavaScript. If you are new to JavaScript and not familiar with the ES6 syntax you may have noticed a '...' in some code you have come across and wondered what the heck is that! Well fear no more! Hopefully I can help demystify this operator for you. 🐱‍👤

The spread operator, also known as spread syntax, was introduced to JavaScript in 2015 with the EcmaScript revisions commonly known as ES6. According to MDN "Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected." The spread operator basically spreads out the contents of a collection into a list of arguments which can then be manipulated in different ways.

There are lots of different ways that this becomes useful. One way is it allows you to easily make a copy of an array or object. Since the spread operator spreads out the contents of a collection into a list of arguments we can then easily put them back into a 'new' collection. This is easily done by preceding what you want to copy with '...'. Lets look at a simple example:

Here I first created a simple array. Then I copied it using the spread syntax. When I log to the console my copied array, you can see that it contains the same values as the first. When I check if they are equal I get false returned. This is very important because quite often in JavaScript we want to make copies of collections and not mutate the original data. Due to copy by reference, if we did not make a copy of the first array then we would be altering the original array when we make any changes to the second one. Lets see this in action:

Here I added to my copy array and you can see that when I log the original array, it's values remain unaltered. Now let's see what happens if I didn't make a copy:

Now when I add to my copy array, the value is also added to the original array therefore mutating it. This can lead to unintended consequences and the spread operator can ensure this won't happen! .Slice() is nice but spread wins the bread!😎

Another helpful way to use the spread operator is to combine two or more arrays. Instead of using the .concat method just prefix the array with '...'. Check it out:

Here I'm still using the animals array but this time I also made an otherAnimals array. To combine them I just used the spread operator within an array literal and voila! Now I've got a whole new array that contains both of their values, easy peasy! You can also add other items in addition to combining two or more arrays. Why .concat() when you can just spread! 🐱‍🏍

One thing to be wary of when using this technique is that the spread operator will only make a shallow copy. According to Dr. Derek Austin from his blog "How to use the spread operator (…) in JavaScript": "the spread operator only copies the first level with a new reference, but the deeper values are still linked together." So if you are trying to make a copy of a nested array, only the top level will be copied and the deeper levels will still be connected via value by reference.

This copying technique also works with objects. You can combine two or more objects using the spread syntax just like how we did with arrays. This is very similar to using Object.assign().

Another thing to watch out for when using this technique with objects is, which Dr. Derek Austin points out in the same blog referenced earlier, "any properties whose names conflict will be lost." If this occurs, the first object's property value will be replaced by the second object's value.

Here you can see when I log combinedAnimalsObject, the property value for sheep gets replaced with "baah".

One more helpful tool the spread operator brings to the table is according to Brandon Morelli from his blog "JavaScript ES6— The Spread Syntax (…)" when you use the "built in math object" which "allows us to do some fun math calculations." These methods require individual parameters as arguments so needing to use an array becomes a problem. Using the spread operator alleviates this situation! .Apply() is fly but spread is better!!! ✨✨✨

Without using the spread syntax we get nasty NaN 😢.

In conclusion the spread operator is a very simple, useful tool! It can be used to make shallow copies of collections and to combine arrays or objects with ease. It's also helpful when you have an array you want to use as a function argument but your function only takes individually listed parameters. I hope this helps! Thanks for reading!

Bind vs Call vs Apply

JSteigner — Mon, 29 Jun 2020 02:37:53 +0000

Hello! Have you ever wondered about the mysterious functions bind, call, apply and their magical inner workings! Well it turns out you're in luck! Over the course of this blog I will do my best to remedy any confusion you may have about these somewhat confusing constructs.

In order to understand how these notorious functions work, a little background into the behavior of the keyword 'this' is necessary. According to the famous MDN docs, 'this' is "A property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value." The object that 'this' is referencing is different in different situations. When using the functions .call(), .bind(), or .apply() is one of those situations. When you use any of these functions you can explicitly tell the interpreter what you want the value of 'this' to be by supplying that value as the first argument. This is where these functions really shine!(no pun intended, hehe 😜)

First up to bat is the function .call(). I chose to write about this one first because .bind() is implemented under the hood with .apply() and .apply() just has a slight variation from .call(). MDN tells us that "call() allows for a function/method belonging to one object to be assigned and called for a different object." This means that the function .call() allows you to take a method found on one object or a function and 'call' it with a different context. This is done via the first parameter supplied to the function. Pretty cool huh! Lets look at an example:

Here I constructed a georgeClinton object with two properties, profession and goal. Then a funkItUp function was created which logs to the console the string value of "this.profession" concatenated with "will" and the string value of "this.goal". Then I called the function with .call() specifying my value for 'this' as the georgeClinton object. Therefore the string of "the funk master will funkify the world" is logged to the console. When the interpreter reaches either of the statements containing the 'this' keyword, it looks to the georgeClinton object to find the values. Now lets see what would happen if I called this function without using .call().

When we call the function this way without using .call(), the interpreter uses the global Window as the value of 'this' and since there is no profession property or goal property on the Window it returns undefined. Therefore the string of "undefined will undefined" is returned. Lets see what happens when we supply a couple different objects as our first argument to .call().

In this example I created two other objects with the same key names as the original georgeClinton object but with different values. Here I was able to reuse the funkItUp function with different context values depending on what I supplied as my first argument to .call() therefore creating different logs to the console. When I supplied the jamesBrown object as my argument to .call(), "the godfather of soul will drop the Funk Bomb" was logged because those are the corresponding values associated with that particular object. The same was true when I used bootsyCollins, "the funkiest bass player will become the funkiest of the funky" was logged. The .call() function allows us to call a function with whatever context we need to use. We could have made a method on each object that does this same action but then we would be violating the golden rule of DRY (don't repeat yourself) plus creating more work for ourselves, 👀 BOOOO!

There is another aspect of .call() that I need to mention. This function can accept additional parameters after the first 'this' parameter is supplied which will act the same way the original function's parameters would act and if you do not need to supply a special value for 'this' when using .call(), null can be supplied for that first argument. When null is supplied as the first argument, the interpreter will look into the global scope to find the value of 'this'. The .call() function accepts it's additional parameters individually as opposed to a collection. Here is an example of using multiple parameters:

In this example I used the original georgeClinton object but created a new function called weWantTheFunk. The function takes two parameters, desire and action. Then I called weWantTheFunk with .call() supplying the georgeClinton object for the argument value of 'this' plus the strings of "wants to" and "bring the funk" as arguments for the desire and action parameters. Now when this function call happens the interpreter looks to the georgeClinton object to find the value of 'this' and uses the supplied arguments to find the other values, thus logging to the console "the funk master wants to bring the funk".

Next up to bat is .call()'s closest relative .apply()! This function is exactly like .call() except for one difference. The .apply() function takes an array or according to MDN "an array-like object" of arguments as it's second parameter. Instead of having to list your parameters individually, as with .call(), you must supply an array as the second argument. This is helpful when using the 'arguments' object or spread syntax. Lets take a look:

Last but not least, hitting cleanup here is the big-boy .bind()! This function is implemented with .apply() under the hood so it behaves very much the same way. The first argument we supply to .bind() will signify the object to be used for 'this'. It also takes multiple parameters. The main difference is that .bind() returns a new copy of the original function but with the new supplied context bound to it and if any arguments were supplied when the binding occurred than these arguments will always be supplied when the new bound function is called. Unlike .call() and .apply() which get invoked immediately, this new bound function can be used at any time. You can also supply additional arguments when you call this new bound function. Check it out:

Here I have created a whole new function and anytime I call it I do not need to specify the value for 'this'. That value will be forever bound to the georgeClinton object. As you can see, "the funk master will funkify the world" is logged to the console when I invoke it.

In conclusion, the functions .bind(), .call(), and .apply() are all very similar. Their main purpose is to give you the ability to invoke a function with a specific context. This is done by supplying that context as their first argument. The main differences are .call() and .apply() are immediately invoked but .bind() creates a whole new function that can be called at anytime. They can all take multiple arguments besides the first 'this' argument but .apply() must receive its second argument as an array. If the function .bind() is called with additional arguments at bind time then any time you call this new function, it will be called with those original arguments and any other new ones that were supplied at call time. I hope this clears up any confusion you may have about these tricky functions. Thanks for reading!

Introduction to the Node.js HTTP Module

JSteigner — Sun, 05 Apr 2020 20:50:37 +0000

Hello! This week I'll be giving you a brief introduction to the Node.js HTTP module. I'll give ya a little background into Node.js, supply some info into what is the Node.js HTTP module, and I'll get into how to use it with some examples. Alright here we go!

So you may be wondering what is this Node.js everybody keeps talking about? It's an open sourced, cross platform, JavaScript run-time environment that executes JavaScript code outside of a web browser. It allows you to use JavaScript to write command lines for server-side scripting essentially allowing you to produce web page content before the page is sent back to the user. It was created in 2009 by Ryan Dahl, thirteen years after the first server-side JavaScript environment, Netscape's LiveWire Pro Web, was created. Node.js combines google's V8 JavaScript engine, an event loop, and an input/output API. Dahl saw issues with the popular web server of 2009, the Apache HTTP server, so his creation of Node.js was in response to that.

Node.js has four main core modules and the HTTP server is one of those. It allows Node.js to transfer data over the HTTP(Hyper Text Transfer Protocol). It can create an HTTP server that listens to server ports and gives a response back to the client. It's great for creating networking apps because it allows for back end service for client applications.

The HTTP module has three properties: http.Methods, http.STATUS_CODES, and http.globalAgent. The HTTP module Methods property contains a large array of methods but it mainly contains the REST verbs we are all familiar with( GET, POST, PUT, PATCH, DELETE). The Status codes property contains a large object of all the status codes which are responses sent back to the client from the server. These usually indicate if a successful request was made or if an error occurred but can represent different information as well. For example status_code 418 sends back 'I’m a teapot'. You can find a full list of both the methods and the status codes in the Node docs at this website: https://nodejs.dev/the-nodejs-http-module/#methods . The globalAgent property deals with performance and manages connection persistence. The HTTP module also has five classes: http.Agent, http.ClientRequest, http.Server, http.ServerResponse,and http.IncomingMessage. In addition to these properties and classes, the module contains three methods: http.CreateServer, http.Request, and http.Get. The CreateServer method returns a new instance of the server class. The Request method makes an HTTP request to the server which creates an instance of the ClientRequest class. The Get method is similar to Request but sets the HTTP method to GET and automatically calls request.end.

Alright lets get into how to use the module. The first step is you need to include the HTTP module in your application. This can be done by importing the module using .require('http') at the top of your file. After that you need to use the CreateServer method and supply it's callback function with req(request) and res(response) parameters. Then you can chain on the .listen method with a port parameter. This will let the server know which port to listen to for incoming requests. After that you need to send a response back to the client. This can be done using the res.write method and inserting your response as the parameter. Then you need to end the response using res.end. Lets take a look at what this code would look like.

Here you can see where I imported the HTTP module which allowed me to use http.CreateServer. Inside of my res.write I inserted a message of 'cowabunga dude!' that will load to the client's web page and then followed that up with res.end. You can also see where I used .listen and used 3000 as my port argument. It's also helpful to insert a console log inside the .listen method to let you know the server is up and running successfully. Here's what the client side would look like.

Notice the ':3000' following the localhost ip address is the same port that I put in as my .listen method argument. Also my res.write message of 'cowabunga dude!' was sent back to the client!

We can also include a header so we can send status codes back to the client and declare the correct content type of the response. This is done by using the res.writeHead method and supplying your status code as the first argument and the content type as the second.

Here I used res.writeHead to send my successful status code of 200 back to the client. I also set the content type to be text/html. Inside of my res.write I inserted the req.url which should send back to the client whatever the client enters as an endpoint(the text following the port number in the url). Lets see if it worked.

Success! Notice how the endpoint entered in the browser matches what was sent back to the client, 'Most Excellent!' indeed!

So in conclusion the Node.js HTTP module is a simple, quick, and efficient way to to provide a back-end server for client applications. I suggest trying out the Node.js HTTP server and get your 'serve on!'

The Notorious (b)NG-Directives

JSteigner — Mon, 30 Mar 2020 05:28:33 +0000

Hello Again World! For this weeks blog I'll be talking to you about the wonderful world of AngularJS' 'ng-directives'. First I'll give ya a little background into AngularJS. Then I'll get into some explanations and examples of how their directives work. Alrighty then, here we go!

If you're not familiar with AngularJS, it is a JavaScript based open-source web framework that is currently maintained by Google. It was originally designed in 2009 by Misko Hevery at Brat Tech LLC. AngularJS is an opinionated front-end framework that adopts the MVW approach to web design. When we say opinionated that means that when you use AngularJS you have to abide by its specific rules and terminology in order to make the magic happen. This MVW approach is in contrast to the typical MVC approach, Model View Controller, where the 'C' stands for controller but with AngularJS the 'W' takes the place of the 'C' and it stands for 'whatever works for you'. This basically means that the controller aspect found in the 'separation of concerns' ideology can be carried out be either the view or the model, go wild! It's up to you!

So you may be wondering what are these directives I keep hearing about? Well you've come to the right place! The directives are markers on DOM elements that tell AngularJS to attach a specified behavior to that DOM element. In layman's terms, directives are how AngularJS really does its magic. They have the ability to transform the DOM element and its children, wowza! They can make new attributes, essentially supercharging the HTML, 'To infinity and beyond'!🐱‍🏍

AngularJS has many built-in directives. They are arranged in four categories and they are invoked by one of these identifiers: attribute, element, class, or comment. The attribute and element approach are the most common. Here is an example of what they may look like:

Attribute
Element
Class
Comment

Most of these built-in directives are prefaced with the prefix 'ng-' where the 'ng' stands for...? You guessed it Angular! If you're feeling creative you can also make your very own shiny custom directives. Now lets get into the nitty gritty of some actual directives. The most common one (most common because it is essential for AngularJS to work🤣) is the 'ng-app'. This directive initializes AngularJS and makes the specified element a root element of the app. It tells the interpreter that the HTML in this element will be Angular-magical HTML and not just boring plain-ol' vanilla HTML. Next up to bat is 'ng-model'. This fellah will bind the value of HTML controls (like input, select, or textarea) to application data. So say for instance you have a text box for someone to enter their name. If you use good ol' 'ng-model' in conjunction with this, then your variable will spit out the text that was entered. Pretty cool huh? If you have no idea what I'm taking about, check out this example, featuring the dynamic duo 'ng-app' and 'ng-model' and also one of my favorite rappers Biggie Smalls!

Here you can see where I use 'ng-app' to initialize my AngularJS magicified element. Then I use 'ng-model= name' right in the same marker as 'input type=text'. This means that whatever text is input will supply the value to the 'name' variable. Then in the 'div' element below I need to use the double curly braces around 'name' to let the interpreter know that this is the dynamic variable which gets its data supplied from the input text box. You can see that I entered 'Smalls' into the text box and 'My Name is Biggie Smalls' was shown on the HTML. RIP B.I.G.!

Another crowd favorite is the 'ng-repeat' directive. It's probably pretty hard to guess what this directive is used for but I'll go ahead and help you out with this one. It repeats an HTML element, actually cloning the HTML once for each element in a collection. This is how we loop with AngularJS and it can be used on arrays or objects! Cha-Ching! Lets take a look at that in action!

Here once again I used old faithful 'ng-app' to specify my angularJS root element. This time I had to use another directive called 'ng-init' to create a 'names' array variable and give it data right in the HTML. Then in my 'li' element I used classy 'ng-repeat' to loop through my array pulling out 'name' from 'names'. Below that I use the double curlys so the interpreter knows this is the dynamic varaible that will receive the info from 'name'. Viola! You can see in the browser HTML that 'Big Poppa', 'Notorious', and 'Smalls' was shown. BAM!

In conclusion angularJS’ use of 'ng-directives' is a useful method to add suave functionality straight to the HTML and supercharge it. These simple tools can be a sure-fire way to save developers valuable time and headaches. Adios! See ya next time!

Sup Dude? Subclassin'

JSteigner — Sun, 22 Mar 2020 18:41:58 +0000

Hello, Hello, Hello! Welcome to my second blog my fellow computer compatriots! This time I will be addressing the concept of subclassing and how it pertains to JavaScript. I will also be covering how JavaScript employs this concept through pseudoclassical instantiation.

So you might be wondering what is subclassing. First lets get to the root prefix 'sub'. The origin of this word dates all the way back to the Latin language and you may be surprised when you hear the Latin equivalent. Any takers? Well if you guessed 'sub' than you are correct! Hah! They are literally the same word and this prefix means below. Just like a submarine goes below the water or a subway runs beneath the ground. So when we apply this to computer science, a subclass would mean a class beneath another class.

The true act of creating a subclass comes from class based object oriented program languages like c++ or Java. The data structures in these programs contain a class characteristic and it allows for the act of inheritance. The subclass inherits properties from a parent or super class. This concept of inheritance was first introduced in 1969 for a program called Simula. JavaScript is a little different because it is a prototype inheritance based object oriented program. This means in order to inherit properties in JavaScript the prototype must be used. Well what is a prototype? Here's the definition straight out of the dictionary: a first, typical, or preliminary model of something from which other forms are developed or copied. So I personally like to think of the prototype as the original blueprint from which different data structures originate. Different data structure types have different prototypes. You are probably familiar with the native methods commonly used with objects and arrays. The reason we are able to use these so freely is because they are methods on the global Object or Array prototype. So every instance of these data types inherit from this global prototype. In JavaScript when we create a constructor function we are making a new prototype but this new prototype still inherits from the global one.

One of the most common ways in which we do this is through pseudoclassical instantiation. I'm going out on a bit of a limb here because I could not find a direct answer to my idea but I'd be willing to bet that this term 'pseudoclassical' refers back to the idea of JavaScript not actually having true classes but employing a similar concept. This 'pseudo' prefix means 'fake' so it seems to make sense to me. If this is incorrect please leave me a comment so I can get some clarity on this! Anyways when we create a constructor function using pseudoclassical syntax, we are making a function that will create objects and every object that is created will have the same properties and methods found on the constructor, much like a blueprint or model. When writing in this style we need to use the 'this' keyword when creating our properties. 'This' will refer to each particular object that is created. There is also an understood Object.create() that happens within our constructor and an understood return of 'this'. The Object.create() is actually what makes each instance of the newly created objects inherit from the constructor's prototype. We also need to add our methods straight to the constructor's prototype and this is done outside of the constructor. We use the 'new' keyword to actually create the new object. Alright lets get into some code.

So here I created a constructor function called SupDude and I put the properties inside my constructor using the 'this' keyword. I also added a whatsUp method straight to my constructor's prototype outside of the constructor. Lets take a look at what creating an instance of this supDude object in the console would look like.

You can see that I used the 'new' keyword to create my supDude object and it has the property of chill that was named inside the constructor. Now lets see what creating a subclass would look like.

Here I created a YoBro constructor and used SupDude.call(this) to inherit the properties from SupDude. I also made sure YoBro points to SupDude's prototype to ensure YoBro inherits SupDude's methods as well. This was done by YoBro.prototype = Object.create(SupDude.prototype). I also made sure YoBro retains its own constructor and this was done with YoBro.prototype.constructor = YoBro. Now lets take a look at this in action in the console.

You can see that when I enter YoBro.prototype it is pointing to SupDude's prototype.

Here I create an instance of YoBro called yaBoi. You can see that yaBoi inherited the 'chill' and 'dude' properties from SupDude along with the 'whatsUp' method. yaBoi also has its distinct property of 'bro' and its own method 'hollah'. Therefore making it a subclass of SupDude.

In conclusion subclassing in JavaScript is a very useful tool to create multiple instances of objects that will be using some of the same properties and it helps cut down on extraneous verbose code. I hope this clears up any confusion you may have had concerning the concept of subclassing. Good day and see ya next week!