Forem: Patrice Williams

AngularJS

Patrice Williams — Mon, 22 Mar 2021 13:59:39 +0000

My coding bootcamp journey is coming to an end. This is my last blog as a coding student at Operation Spark. The journey was long, but definitely worth the many late nights. As I said in my last blog, I have begun searching for jobs and some of the front-end frameworks that companies want developers to know is AngularJS. AngularJS was developed in 2009 by Misko Hevery. It was created for building CRUD applications. AngularJS lets you use HTML as the template language and extends the HTML’s syntax to the application components. AngularJS is currently maintained by Google and the latest version is AngularJS 1.7.

Main Features

The main features of AngularJS are:

AngularJS can create Rich Internet Applications (RIA)
Allows developers to write JavaScript code in the Model View Controller (MVC) way
Applications written in AngularJS can be used across multiple platforms
It is open source, free, and used by thousands of developers world-wide

Angular JS Directives

The AngularJS framework can be put into three categories:

Ng-app: this directive defines and links the application to HTML
Ng-model: this directive binds the values of AngularJS application data HTML inputs
Ng-bind: this directive binds the AngularJS application data to HTML tags

Code Example

In the following code, the ng-init directive initializes the application's data. It is utilized to assign values to the variables. An array of cities is first initialized. JSON syntax is used to define the cities array.

<div ng-app = "" ng-init = "cities = [{locale:'en-US',name:'United States'}, 
   {locale:'South',groupName:'Southern states'}, {locale:'West',groupName:'Western states'}]">
   ...
</div>

In the following code, the ng-model defines the model/variable that will be used in the application. Name is the model defined below.

<div ng-app = "">
  ...
  <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

The ng-repeat directive repeats elements in a collection. In the next example, we iterate over the array of cities.

<div ng-app = "">
   ...
   <p>List of Cities with state flower:</p>

   <ol>
      <li ng-repeat = "cities in united states of america">
         {{ 'City: ' + city.name + ', Flower: ' + city.flower }}
      </li>
   </ol>
</div>

Positives of using AngularJS

Some positives of using AngularJS are:
Single Page Applications can be created in a clean, maintainable way
Allows data binding capability to HTML Components are reusable
More functionality can be achieved with shorter code
Code is unit testable
In AngularJS views are the html pages, and controllers process the JavaScript

Negatives of using AngularJS

AngularJS is a pretty powerful framework, but there are some drawbacks. These include:

not as secure: Because it is a JavaScript only framework, the application is not safe therefore server side authentication must occur to keep the app secure.
Not degradable: if the user disables JavaScript, then nothing is visible except for the basic page.

Differences between Modern Angular and AngularJS

AngularJS and modern Angular have different features which make modern Angular more popular. AngularJS uses the MVC architecture while modern angular uses components and directives. AngularJS uses Javascript while modern Angular uses Typescript. AngularJS and modern Angular both use dependency injection (DI), but the method in which they use these is different. In AngularJS DI is injected into link functions, controller functions, and directive definitions. Modern Angular uses a hierarchical DI system that employs declarations, constructor functions, and providers. Modern Angular is more intuitive when it comes to data binding. In AngularJS, a coder has to remember which ng-directive to use for binding a property or event, while modern Angular uses () for event binding and [] for property binding. These are just some of the differences between the two frameworks. Ultimately it is easier and faster to learn AngularJS than Angular because TypeScript must be mastered in order to successfully build applications. I would recommend using Angular for building complex applications and AngularJS for building simple and straightforward applications.

Conclusion

AngularJS looks like an interesting Framework to add to your tool-kit as a web developer. It is easy to learn and understand due to the documentation/ resources available.

Source

TutorialsPoint. Angularjs - overview. Retrieved March 22, 2021, from https://www.tutorialspoint.com/angularjs/angularjs_overview.htm
A, Shanal. Angular vs AngularJS - A Complete Comparison Guide 2019. July 24, 2019. Retrieved March 22, 2021, from https://www.techaheadcorp.com/blog/angular-vs-angularjs/

A Quick Introduction to PHP

Patrice Williams — Mon, 15 Mar 2021 02:51:44 +0000

What is PHP?

PHP is an open source scripting language used on the backend of software development. PHP is an acronym for “PHP: Hypertext Preprocessor”. In 1994, the first version of PHP was created by Rasmus Lerdorf. PHP files can hold text, HTML, JavaScript, CSS and PHP code. PHP files have the extension “.php”. PHP can be used to create, open, read, write, delete, and close files on the server. Form data can be collected with PHP and cookies can be sent/received. PHP is used to add to, delete or modify your database. PHP is integrated with many popular databases like MYSQL, POSTgreSQL, Sybase, Informix, and Oracle. PHP is also used to control user access and encrypt data. 8.0.2 is the newest version of PHP released February 2021. It contains many new features and optimizations like named arguments, union types, nullsafe operator and constructor property promotion to name a few.

Basic Syntax

The PHP script is first implemented on the server, and then the HTML result is sent back to the browser. The PHP script can be located anywhere in the document. The PHP script begins with <?php and ends with ?>. A PHP file generally contains HTML tags and PHP scripting code. In the following code, the function “echo” is a built- in PHP function that is used to output “Welcome to my World!”

<!DOCTYPE html>
<html>
<body>

<?php
ECHO "Welcome to my World!<br>";
echo "Welcome to my World!<br>";
EcHo "Welcome to my World!<br>";
?>

</body>
</html>

PHP is not case sensitive. So when using keywords (ex. If, else, while, echo, etc.), functions, classes, and user-defined functions they are not case-sensitive. In the code below, the three different echo statements are all equal and legal in PHP.
Code written in PHP must be included inside one of the following markup tags that are recognized by the PHP Parser.

<?php PHP code goes here ?>

<?   PHP code goes here ?>

<script language = "php"> PHP code goes here </script>

Why use PHP?

PHP can be run across many different platform applications like Windows, Linux, Unix, Mac OS X and a number of other operating systems. PHP is compatible with almost all servers. It is open-source and free for all to use at https://php.net. This allows for a large and active international community that uses PHP. PHP was partially developed as an object-oriented language, so the code is reusable as possible. PHP was created to program web applications through built-in GET and POST functions, in addition to URL and HTML script functionality. PHP’s server side offers great versatility. PHP supports backend servers including Netscape, Apache, Microsoft IIS, iPlanet, Caudium, Xitami, and Tornado. PHP is also supported by 20 databases. PHP’s fast performance enables quick turnaround times with the database. Since PHP was initially developed for creating dynamic websites, PHP’s scripts are easily embedded into HTML files. This makes it easier for developers to convert static website code into dynamic websites. Websites that use PHP are Facebook, Wikipedia, Tumblr, Slack, MailChimp and Etsy.

Works Cited

W3Schools. (n.d.). Php introduction. Retrieved March 15, 2021, from https://www.w3schools.com/php/php_intro.asp
PHP - Introduction. (n.d.). Retrieved March 15, 2021, from https://www.tutorialspoint.com/php/php_introduction.htm
7 global websites that use PHP in 2021. (n.d.). Retrieved March 15, 2021, from https://trio.dev/blog/companies-using-php

C++ Language -- should I learn it?

Patrice Williams — Mon, 08 Mar 2021 04:42:17 +0000

What is C++?

My journey to becoming a full stack web-developer is coming to an end. I am in the last month of my Coding Boot Camp and have started to browse job postings and kept coming across experience wanted in C++. This led me to do a little digging and discover what exactly C++ programming language is. C++, an object-oriented language was designed in 1979 by Bjarne Stroustrup to be an extension of the C language. C++ is similar to C, like having classes, inheritance, and default function arguments. C++ is used in various capacities such as operating systems, web browsers, and databases. It is also critical in areas related to performance due to its speed.

The Benefits of C++?

C++ is an extremely popular programming language worldwide. C++ is utilized by over 4.4 million developers. The average base pay for a C++ programmer is $103,035 per year.
C++ has a great library, the Standard Template Library (STL), which helps to write compact code quickly. There are four components in the library: algorithms, containers, functions, and iterators. The algorithms contain different types, like sorting and searching etc. The containers hold classes to apply various data structures (stacks, queues, hash tables, vectors, sets, lists, maps etc. The functor class acts like a function and allows for customization after parameters are passed in. Lastly, the iterators are used when you’ve got a sequence of values
C++ has a vast online community with experts willing to give advice/support. There’s a multitude of resources available on the internet, like StackOverflow, GeeksforGeeks, Standard C++ etc.
MySQL, MongoDB and MemSQL are just a few of the databases that are written in C++. This is because C++ supports features like exceptions, lambda expressions etc. Many databases that are written in C++ are used in Enterprises like WordPress, Twitter, and Facebook
Windows, Linux, Android, Ubuntu, iOS and other major operating systems are written in a combination of C and C++. C and C++ are used in operating systems due to their “speed and the strongly typed nature of these languages” (GeeksforGeeks).
C++ is utilized in many compilers as a backend programming language. This is because C++ is more so on the level of hardware and is considered a low-level language. For example, the GNU Compiler Collection (GCC) is written in mostly C++ along with C.
C++ high speed makes it a great choice for applications that require graphics, like digital imaging processing, computer vision, and screen recording programs
C++ is beneficial for embedded systems because it can be used as the software and hardware. Some of these embedded systems that employ C++ include smart watches, MP3 players, GPS systems etc.
C++ is portable, it can be moved across platforms. This makes it attractive for applications requiring multi-device development.

C++ Hello World App

In C++, the file should be saved with the name of the file and end with “.cpp”

#include <iostream>
using namespace std;

int main() {
  cout << "Hello World!";
  return 0;
}

The first line of code “#include ” is a header file library that allows you to work with input and output objects, like cout. The second line, “using namespace std” means that names for objects and variables are free to use from the standard library. These two lines will almost always appear in your program. C++ ignores white space for the third line. “Int main()” is a function and any code between the curly brackets {} will be executed. “Cout” is an object that is used with the insertion operator (<<) to output text. In this example, the output is “Hello World!” The return 0 ends the main function. Do not forget the ending semicolon “;” and “}” to end the main function.

C++ is a popular programming language that can be found in many of today’s operating systems. C++ gives structure to programs and allows code to be reused, which lowers development costs. C++’s portability and great support/resources make it a language that you should consider learning.

Works Cited

W3 Schools. (n.d.). C++ getting started. Retrieved March 08, 2021, from https://www.w3schools.com/cpp/cpp_getstarted.asp
Geeksforgeeks. (2019, May 22). Top 10 reasons to learn C++. Retrieved March 08, 2021, from https://www.geeksforgeeks.org/top-10-reasons-to-learn-c-plus-plus/

Should I learn Vue.js?

Patrice Williams — Mon, 01 Mar 2021 01:31:53 +0000

What is Vue.js?

Vue (pronounced “view”) is a JavaScript framework created for building user interfaces. Vue was officially released in 2014 by Evan You, a Google employee. Vue is developed for desktop and mobile applications with an Electron framework. Electron framework is used to build cross-platform desktop apps. Evan You said he created Vue to capture the best of Angular while building a custom tool that was lighter weight: “For me, Angular offered something cool which is data binding and a data driven way of dealing with a DOM, so you don’t have to touch the DOM yourself.” The name Vue refers to the Model-View-Controller (MVC) architecture. Vue focuses on the UI of an app/website.

Declaratively Render Data

Html file

<div id="app">
 {{ message }}
</div>

Js file

var app = new Vue({
 el: '#app',
 data: {
   message: 'Vue application to the rescue!'
 }
});

A new Vue application has been created, the data and the DOM are linked and everything on the page is now reactive. The Vue app attaches itself to a DOM element (#App) and then controls it. The entry point is the HTML, but everything actually happens

Binding Data

Html file

<div id="app-2">
 <span v-bind:title="message">
   Hover your mouse over me
   to see the title dynamically change!!
 </span>
</div>

Js file

var app2 = new Vue({
 el: '#app-2',
 data: {
   message: 'You hovered and loaded the page on ' + new Date().toLocaleString()
 }
});

Here is our first introduction to directives. The v-bind attribute is called a directive, indicating that they are special attributes crafted by Vue. The v-bind applies a special reactive behavior to the rendered DOM. If you open your console and enter app2.message = ‘we’ve got a new message.’ The bound HTML title attribute will be updated.

Toggle Data

Html file

<div id="app-3">
 <span v-if="seen">Do you see the muffin man? YES</span>
</div>

Js file

var app3 = new Vue({
 el: '#app-3',
 data: {
   seen: true
 }
});

If you enter javascript app3.seen = false; in the console, the message disappears. This shows that data can be bound to attributes and text, but in general, data can be bound to the structure of the DOM.

Vue also has a great transition effect system. Below is code showing a single transitioning element. Vue specifies a transition wrapper component, which allows you to add entering/leaving transitions for elements and components. V-if is used for conditional rendering and v-show is used for conditional display.

Html file

<div id="effects">
 <button v-on:click="show = !show">
   Toggle
 </button>
 <transition name="fade">
   <p v-if="show">MostValuableProgrammers</p>
 </transition>
</div>

Js file

new Vue({
 el: '#effects',
 data: {
   show: true
 }
});

CSS file

.fade-enter-active, .fade-leave-active {
 transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}

V-enter-active is the active state for enter. It is applied during the entire entering phase. This class defines the duration, delay and easing curve for the entire transition. V-leave-active is the active state for leave. It is applied during the entire leaving phase. V-enter is the starting state for enter whole v-leave-to is the ending state for leave (only available in versions 2.1.8+).

Positives of using Vue

Vue’s small size (entire framework is 18 KB) makes the library fast to download and install
Uses the virtual DOM to render elements, which speeds up performance. Normally when a user interacts with a page, the whole DOM is updated. Vue instead uses virtual DOM (essentially a copy of an original DOM that “figures out what elements to update, without rendering the whole DOM.” This method improves application performance by making elements render to the page faster.
Two-way data binding, a feature inherited by Vue from Angular is a great benefit. Two-way data binding refers to the link between model data updates and the view (UI). It is now simpler to update and track related components.
Single-file components allow for component reusability, increased code readability and in turn better unit-testing.
Vue is easily integrated with existing applications due to its singular reliance on JavaScript.
With the release of Vue CLI 3, it maintains a great set of tools, like Vue’s browser debugging tools, server renderer, state manager, and the many unit-testing/testing tools
Vue is easy to learn, especially with the clear and concise documentation provided and there’s a growing Vue community (over 41 thousand Stack Overflow tags

Negatives of using Vue

The reactivity in Vue is complex. Sometimes components do not react correctly when a user triggers the component and mistakes are made during data reading. Data must be flattened in order for reactivity to be fixed. *Because Vue is popular with businesses like Alibaba and Xiaomi, when searching for Vue content, instructions and descriptions may be written in a language other than English.
There is a lack of support for larger projects because the framework is so new. In order for the framework to be adopted in large-scale projects, the tech needs to be strongly supported and have stability so that issues can be swiftly resolved.
Limited resources (in terms of plugins available) and a lack of experienced developers are areas where Vue can improve greatly

Conclusion

Vue is a fairly new framework that should be learned for its ease of use with building user interfaces. Vue may not be as widespread, like Facebook(React) and Google(Angular), companies with huge financial support. Vue still has a good following on Github and with other larger companies, like Alibaba and BMW. Vue has good documentation filled with a plethora of information. It is easy to learn and has a nice, supportive community that can aid you in learning it.

Sources

AltexSoft. (2020, February 27). The good and the bad of vue.js framework programming. Retrieved February 28, 2021, from https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/
Vue. (n.d.). Introduction - vue.js. Retrieved February 28, 2021, from https://vuejs.org/v2/guide/

What is Java Programming Language?

Patrice Williams — Mon, 22 Feb 2021 03:03:36 +0000

What is Java and why should I use it?

Java is a programming language that was created by Sun Microsystems in 1995. Java was first initiated in June 1991 for a project created by James Gosling. The language was first called “Oak” after an oak tree that lived outside Gosling’s office. It was eventually named Java from a list of random words. By May 2007 Sun made Java’s core code free and available to the public Java was crafted because the main programming languages around in the early 90s that were used had too many steps to perform simple tasks. The programming language C was too low-level and was not portable, meaning the code that was written in C could not be easily used to run on minicomputers and mainframes, but worked with PC. So developers came out with more programming languages like JavaScript, Ruby, and PHP. Java became very popular as soon as it was released due to its portability and the large built-in libraries. 2020 marked 25 years since it has been created.

Java's main features

The latest version of Java is version 15, with version 16 due to come out in about 1 month. Since 2017, Java has published a new version roughly twice a year. Because it is so popular, there are many different configurations, like the J2EE for Enterprise Applications, and J2ME for Mobile Applications. The point of the Java language is to write your code once and have it be able to run anywhere. Java is:

Object Oriented – everything is an object in Java and can be extended since it is based on the Object model
Platform Independent – when Java is compiled it is not compiled into a platform based on the specific machine, but in an independent byte code. Then a Virtual Machine (JVM) interprets the byte code on whichever platform that is running the code.
Secure – Java is a secure language due to its secure feature, which allows it to develop virus-free, protected programs. Public-key encryption is used for authentication procedures.
Portable – because Java has no specific architecture and “having no implementation dependent aspects of the specification makes Java portable” (Java - 2021).
Multithreaded – developers can create smooth running interactive applications because with Java you can write programs that perform a lot of tasks simultaneously.
Easy to learn – it is a simple language to learn if you are familiar with Object Oriented Programming (OOP).
High Performance – Java’s Just-In-Time compilers enables Java’s high performance.
Dynamic – Java is designed to be adaptable depending on the environment. Java programs contain a vast amount of run-time information that can be utilized to confirm and resolve accesses to objects on run-time.

Java syntax

Java is a language influenced by C++ and C. It is an object-oriented language using classes. Every piece of data is an object, except for primitive data types like integers, floating-point numbers, Boolean values, and characters. Java does not support multiple inheritance for classes, but through interfaces, multiple inheritance is supported. Java does use comments just like JavaScript, but there are three types: a single line comment ‘//’, a multi-line comment ‘/ /’ and the Javadoc commenting style opened with ‘/*’ and closed with ‘/’.

The following is a code example of a “Hello World” application:

public class HelloWorldApp {
    public static void main(String[] args) {
                       System.out.println(“Hello World App!”); // Prints the string “Hello World App!” to the console.
           }
}

Source files are named after the public class they contain, ending with the suffix .java, for example, HelloWorldApp.java. The keyword public refers to a method that can be called from code in other classes or that a class can be used by classes outside the class hierarchy. That hierarchy deals with the name of the directory that the .java file is located. The keyword static in front of a method shows that it’s a static method, which is associated only with the class and not a specific instance of that class. Only static methods can be invoked without an actual reference to an object. The keyword void designates that the main method does not return any value to the caller. The method name main is not a keyword, but just the name of the method the Java launcher uses to pass control to the program. When Java classes are run in managed environments like applets and Enterprise JavaBeans(a Java API) do not need a main() method. The main method has to accept an array of String objects. Printing is a part of Java’s standard library. The System class defines a public static field named out. The out object is an instance of a class of printing methods used to print data. This includes println(String), which also adds a new line to the passed in string. The string “Hello World App!” is converted to a String object by the compiler.

Java is a dynamic language made popular in the 90s. Java is a vital aspect in Android, a mobile operating system and is one of the fastest programming languages due to it being able to be scaled to programs that can process a large amount of resources. It is definitely a language that should be learned to widen your programming horizon.

Sources

Binstock, A. (2015, May 20). Oracle BrandVoice: JAVA'S 20 years of innovation. Retrieved February 22, 2021, from https://www.forbes.com/sites/oracle/2015/05/20/javas-20-years-of-innovation/?sh=1dec7f1111d7
Java (programming language). (2021, February 19). Retrieved February 22, 2021, from https://en.wikipedia.org/wiki/Java_(programming_language)
Java - Overview. (n.d.). Retrieved February 22, 2021, from https://www.tutorialspoint.com/java/java_overview.htm

Event Delegation - Bubbling and Capturing

Patrice Williams — Mon, 11 Jan 2021 13:25:41 +0000

Events and event delegation are paramount to the functionality of the system or webpage you are programming. Making sure you have a proper understanding of how events work, and when is crucial. I will be discussing event delegation and the facts of it including event bubbling and event capturing.

What are events?

Events are actions that happen in the system you are currently programming in. The system will create a signal once the event occurs, that will provide a mechanism by which actions can automatically be taken when the specific event occurs. So for example, when you are going swimming with a friend, maybe your friend does not want to get into the pool just yet. So you stick your toes in the water to test the temperature. You give the thumbs up signal and you and your friend jump in the pool. The signal was communicated to your friend and now you and your friend can jump in the pool.

So when describing events occurring in a browser window, events are usually attached to a specific item that the window holds (this could be a single element, set of elements, the HTML document that is loaded in the tab you have open, or the whole browser window). Various different events could occur, like an error, the user resizes or closes the browser window, a button is clicked, or the user hovers the cursor over a specific element. Every event that is available has an event handler. An event handler is a block of code (like a JavaScript function that you create) that runs when the event is triggered. Event handlers are sometimes called event listeners, but the two actually work in conjunction. The listener will listen for the event to occur and the handler is the actual code that runs in response to the event happening.

Event Delegation

Bubbling

Event bubbling and capturing are types of event delegation that work together.
Bubbling is when an event occurs on an element, it triggers the handlers first, then its parents are triggered, and all the way up on to the other ancestors. In the following example, we have 3 nested elements with a handler attached to each of them.

 <form onclick="alert('Click this FORM!')">FORM
    <div onclick="alert('Click this DIV!')">DIV
      <p onclick="alert('click this P tag')">P</p>
    </div>
  </form>

When you click the inner 'p-tag' , it first runs onclick:

The 'p'
Then the outer 'div' runs
Then the outer 'form' runs
And so on upwards until you have reached the document object.

Stop Bubbling

Most event bubbles, but there are some exceptions (like a focus event). In order to stop a bubbling event, you need to use the method event.stopPropagation(). In the following code example, the body.onclick does not work when clicking the button.

 <button onclick="event.stopPropagation()">Click me</button>>

Bubbling can be very convenient, so make sure you really need to stop it before using this method.

Capturing

The last event propagation type that will be discussed is “capturing.” Capturing is generally not used in real code, but can be useful. The standard order of DOM events includes the capturing phase (event happens down to the starting element), target phase (“event reached the target element” (Javascript.info, 2020)), and bubbling phase (event bubbles up from the element). The below picture shows what happens when you click on a

inside a table beginning at the window.

So when 'td' is clicked, the event goes down the ancestors chain to the element (capture phase), then once the target is reached, the event triggers there, and then goes up back up (bubbling phase) and calls handlers along the way.

The below code is an example of capturing and bubbling working together.

<div>
    <form>Issa FORM!
      <div>DIV tag HOLLER!
        <p>P element you already KNOW!</p>
        </form>
      </div>


    <script>
      for(let element of document.querySelectorAll('*')) {
        element.addEventListener("click", e => alert(`Capturer this coolCat: ${element.tagName}`), true);
        element.addEventListener("click", e => alert(`Bubbling is for coolCats: ${element.tagName}`));
      };
      </script>
  </div>

When you click on the 'p' the following occurs:

HTML then BODY then FORM then DIV (the elements are captured in the following order)
P is triggered because, now in the target phase, P is triggered two times since we have two listeners: capturing and bubbling
DIV then FORM then BODY then HTML The code attaches click handlers to every element in the document in order to see which handlers are working. The addEventListener function will run in the same order that they are created.

Conclusion

Event delegation is fundamental to working in JavaScript. It is important to note that when an event occurs, the target element (event.target) is defined as the most nested element when the event happened. As the event moves down the document root to the event.target, calling handlers are assigned. Event bubbling occurs next and the event bubbles up from event.target to the root. In order to stop the event handler, call event.stopPropagation(), but this is not recommended. Make sure you understand event propagation and what bubbling and capturing is so that you can use them successfully in your code.

Sources

MDN. Introduction to Events. Retrieved January 11, 2021, from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
Javascript.info.Bubbling and capturing. (2020, October 19). Retrieved January 11, 2021, from https://javascript.info/bubbling-and-capturing
Mainardi, G. (2017, May 23). Event Bubbling in JavaScript? Event Propagation Explained. Retrieved January 11, 2021, from https://www.sitepoint.com/event-bubbling-javascript

Heroku -- an Application Deployment Service

Patrice Williams — Mon, 04 Jan 2021 02:54:35 +0000

What is Heroku?

Heroku is a container-based cloud Platform as a Service (PaaS). It “lets companies build, deliver, monitor and scale apps” (Heroku). Heroku manages the infrastructure, hardware and maintains the servers for the application. This enables engineers to focus on the development of their app. Heroku handles roughly 26 billion requests every day (more than 300,000 requests per second) and users have created over 9 million apps.
Heroku was created by Salesforce and is hosted on Amazon Web Services. Its main purpose is to be a fast application deployment service. The supported platforms include running environments for Ruby, Python, PHY, Clojure, Go, Java, Scala, and Node.js apps. It is only available though in the United States and Europe.

What is a Platform as a Service?

Platform as a Service (PaaS) is a service that includes the full development and cloud deployment environment of your application. There are add-on services and pay-as-you-go options to deploy your application. PaaS is designed to cover the complete infrastructure of the application, that is the servers’ storage and networking. PaaS also incorporates “middleware, development tools, business intelligence (BI) services, database management systems, and more” (azure). PaaS is designed to build, test, manage, deploy, and update the web application while you, the user only has to develop and manage the services you create. The PaaS will manage software licenses, the application organization and middleware, container orchestrators, like Kubernetes, or dev tools and other properties.

What are Kubernates or ‘k-eights’?

Kubernetes is open-source software used to manage and deploy application containers. So what that means is that most applications currently are container-based, which utilize microservices packaged with their dependencies and configurations. There may be numerous containers deployed across many different servers. Operating the many moving components can become more and more complex. Kubernates manage this complexity by delivering an open source API that dictates how and where the containers will run. Kubernates do this by controlling a number of virtual machines. The containers are then scheduled to run on these virtual machines depending on their available computation resources. Kubernates are extremely helpful because they allow containerized apps to maintain their efficiency by providing a way to schedule and deploy their containers and scale those containers to the user’s desired state.

Advantages of using PaaS

Cuts coding time due to the built in app components, like workflow, directory services, security features etc.
Adds development capabilities without having to search for/hire additional staff
Application can be utilized over multiple platforms, including mobile, more fluidly
Supports team members who are in remote locations because the development environment can be accessed over the Internet
Successfully manage full application development (building, testing, deploying, and updating/managing within same integrated environment)

In conclusion, Heroku is a great cloud PaaS to utilize for application deployment. Heroku allows the user to build extensible (designed to allow for added functionality) applications. By offering Heroku in a pay-as-you-go model, developers can pay for exactly what they need their application to do (to build a personal application or MVP is free). When building your next application, consider Heroku if you have never used this service.

Sources

A, S. (2020, January 6). Heroku or Amazon Web Services – Which is Best for Your Startup? Retrieved December 29, 2020, from https://rubygarage.org/blog/heroku-vs-amazon-web-services

Heroku. (2020). What is Heroku. Retrieved December 29, 2020, from https://www.heroku.com/what

Microsoft. (2020). What is PaaS? Platform as a Service: Microsoft Azure. Retrieved December 29, 2020, from https://azure.microsoft.com/en-us/overview/what-is-paas/

Steele, C. (Director). (2020, November). The Web Developer BootCamp 2020 [Video file]. Retrieved December 29, 2020, from https://www.udemy.com/course/the-web-developer-bootcamp/learn/lecture/22361220#overview

ES6 Reflections

Patrice Williams — Sun, 20 Dec 2020 22:39:51 +0000

Introduction

JavaScript added some great new features in 2015 (ECMAScript 2015- ES6), one of those being a global method called reflect. Reflect is a built-in object that provides unchanging properties and methods, which have the same names as “the proxy handler methods” (MDN, 2020). Before ES6 was introduced, JavaScript did contain features that were similar to reflections. These features were not called reflections, but had similar usage, like Object.keys(), Object.getOwnPropertyDescriptor(), and Array.isArray(). The Reflect API allows you to "call methods, construct objects, get and set properties, manipulate and extend properties" (Javascript tutorial).

The Reflect API is a global object, but it is slightly different than other global objects. Reflect is not a function object, so you are unable to construct it. This means you cannot use the new operator or call Reflect as a function. This is similar to the Math and JSON objects. Methods on the Reflect object are static. The Reflect object contains the same methods as the prototypical methods on Object, but there are slight differences. Let’s explore some reflect methods.

Reflect Methods

Reflect.apply(target, thisArgument, argumentsList) – used to call a target function with arguments specified by the argumentsList parameter. It is similar to Function.prototype.apply().

Reflect.construct(target, argumentsList[, newTarget] – acts like the new operator, but as a function. It is the same as calling new target(…arguments). You can also specify a different prototype if needed.

Reflect.defineProperty(target, propertyKey, attributes) – returns a Boolean that is true if the property was defined successfully. It is similar to Object.defineProperty().

Reflect.deleteProperty(target, propertyKey) – this is the delete operator as a function. It is the same as calling delete target[propertyKey].

Reflect.get)target, propertyKey[, receiver]) – returns the value of the property. It is the same as getting a property from an object target[propertyKey] as a function.

Reflect.getOwnPropertyDescriptor(target, propertyKey) – returns a property descriptor of the given property if it exists on the object and returns undefined otherwise. It is similar to Object.getOwnPropertyDescriptor().

Reflect.getPropertyOf(target) – same as Object.getPrototypeOf().

Reflect.has(target, propertyKey) – returns a Boolean depending on whether the target has the property or not. The target can have the property as its own or inherited. This method works like the ‘in operator’ as a function.

Reflect.isExtensible(target) – returns a Boolean that is true if the target is extensible. This works the same as Object.isExtensible().

Reflect.ownKeys(target) – returns an array of the target object’s own property keys. The property keys cannot be inherited.

Reflect.preventExtensions(target) – returns a Boolean that is true if the update was successful.

Reflect.set(target, propertyKey, value[, receiver] – a function that assigns values to properties and returns a Boolean that is true if the update was successful.

Reflect.setPrototypeOf(target, prototype) – a function that sets the prototype of an object and returns a Boolean that is true if the update was successful.
(MDN Reflect, 2020)

Examples

Let’s look at some examples to show all of the many features of the Reflect API. Below, we have a dog object. Lets check to see if we have a specific key.

Using the same object, we will also return the object's own keys and add a new property.

Lastly, we will construct an object using Reflect.

As stated above, the Reflect.construct() returns the new instance of the target or newTarget (whichever one is specified), “initialized by the target as a constructor with the given array-like object args” (JavaScript 2020). In this example, we created a new instance of the Highschool class using the Reflect.construct() method. The bestSchool object is an instance of the HighSchool class so it has the nameLocation property.

Conclusion

The Reflect API is a valuable addition to JavaScript. Reflect allows you to create programs and frameworks that can handle dynamic code. After reading my brief introduction to Reflect, I hope that you will utilize its features.

Sources

MDN. Reflect. Retrieved December 20, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect
JavaScript Reflection and Reflect API in ES6 By Practical Examples. (2020, January 30). Retrieved December 20, 2020, from https://www.javascripttutorial.net/es6/javascript-reflection/

What is Vim and why you should use it!

Patrice Williams — Mon, 14 Dec 2020 04:38:17 +0000

Recently, I began an immersive coding program and we are tasked with writing blogs on various subjects. I decided to delve deeper into text-editing. I will be exploring Vim and its importance in the world of programming.

What is Vim?

Vim is a text editor based on the first vi text editor created. VI text editor was originally created by Bill Joy for the Unix operating system in 1976. One of the great features of Vim is that it is a modal text editor. So what exactly does modal mean? Modal refers to the mode that the text editor is in will determine whether inputting alphanumeric keys outputs alphanumeric characters or will instead ‘move the cursor through the document’ (Brockmeier, 2009). For example, when you would like to save a file, in most text editors, you will need to use Ctrl-s hotkey combination, in order to save the file. By using Vim, you no longer need to use any hotkey combinations. You can simply save a file without your fingertips ever leaving the keyboard. Vim offers a multitude of features that make working with ‘structured markup languages like HTML…’ a lot easier. If you are like me, a beginner programing student, then it would behoove you to learn some Vim commands to better utilize the text-editor.

The modes of Vim

When using Vim, there are three key modes: insert-mode, command mode, and last-line mode. The mode that Vim starts in is command mode. When you first open a file, by running vim filename, you are able to edit that file. Alphanumeric keys are tied to the commands, therefore the alphanumeric keys you input will not be inserted (If you type ‘dd’, the entire line will be deleted, instead of simply inserting ‘dd’). You can solve this problem by switching to insert mode (type ‘I’). Now the keys will be inserted. To exit insert mode, hit the esc key. The last mode that will be discussed is last-line mode. Now that we’ve entered keys into the text-editor, we need to save our work. We do this by pressing ‘:’ and Vim switches to last-line mode. To save the file, enter ‘:wq’, the w writes the file and q exits the editor. Now lets discuss some important Vim commands that will make moving around Vim and editing files much easier.

Vim commands

Moving files in Vim

When in command mode, you can move your files around to where you need them to go. Here’s some commands to start out using:

b moves backward one word
w moves forward one word
j moves cursor down a line
k moves cursor up a line
h moves cursor one character to the left
0 moves cursor
$ moves cursor to end of the line
G moves to the end of the file
gg moves to the beginning of the file
`. moves to last edit

If you need to use any of these move commands a certain number of times, you can put a number before the command. For instance, if you enter 6h, the cursor will move 6 characters to the left. If you enter 4j, the cursor will move down 4 lines. Once you feel comfortable, start playing around with this cool trick. (Zonker, 2009)

How to edit things in Vim

Editing text in Vim has never been easier, especially now that you know how to move around your file. Lets try deleting some text. Move the cursor to the end of the word and type x. By doing so, you should have deleted the letter the cursor was on. If this is not what you meant to do, no worries, we can simply undo the command by typing u. Now, if you would like to undo your undo, input Ctrl-r. This will redo your last command entered. If you want to delete to the end of the file, hit dG. The following are more editing commands that you will want to be familiar with:

dw deletes a word
d0 will delete to the beginning of a line
d$ deletes to the end of a line
dgg deletes to the beginning of a file
dG deletes to the end of the file
u undos the last action
Ctrl-r redos the last action

Searching/Replacing text

We now know how to move around our text and edit our text, but what about if we need to search or replace text? Searching the document is best accomplished from command mode. Use ‘/’ and then the text you want to search for. So if I was searching for “puppy” I would type /puppy and then hit enter. A few more commands:

/text to search for text in the document
n move cursor to next instance of the text from the last search
N moves the cursor to the previous instance of the text from the last search
?text searches for text in the document, going backwards

Copying and Pasting

Copying and pasting text is important when trying to edit the document. If you are trying to select text, in the command mode, hit V and you will be able to highlight the text by using your cursor. Some commands that will help to get you started are:

v highlights one character at a time
V highlights one line at a time
Ctrl-v highlight by columns
p paste text after current line
P paste text on the current line
y yank text into the copy buffer

Saving and Quitting

Now that we have edited our document, we must save the work we have just created. If you are in insert mode, make sure you hit esc. Then enter :, and you should see a line at the bottom of the screen. This means that your cursor is ready for your input. In order to write the file you are currently editing, enter w. (w) writes the file to the existing filename. When you are finished, hit :q to quit. You can couple the commands and add a ! to quit the program with no warning, :wq!. Here’s some great exit commands:

:wq writes file to disk and quits the editor
:q! quits file with no warning
:q quits file with warning
ZZ save workspace and quits editor (same as :wq)
: 10, 15 w temp (writes lines 10 through 15 into file named temp) Other line numbers can be used

In conclusion, Vim is a great text-editor to use because it makes working with structured markup languages easier. Your fingers never have to leave the keyboard, so you can do-away with using your mouse altogether. You should become familiar with using the above Vim commands in order to cutdown on the time it takes to edit your documents.

Sources
Arsenault, C. (2020, July 13). Popular Vim Commands - Comprehensive Vim Cheat Sheet. Retrieved December 14, 2020, from https://www.keycdn.com/blog/vim-commands
Brockmeier, Joe. (2009, November 21). Vim 101: A Beginner's Guide to Vim. Retrieved December 14, 2020, from https://www.linux.com/training-tutorials/vim-101-beginners-guide-vim/
R. (n.d.). Vim Editor Commands. Retrieved December 14, 2020, from https://www.radford.edu/~mhtay/CPSC120/VIM_Editor_Commands.htm
Vi. (2020, December 13). Retrieved December 14, 2020, from https://en.wikipedia.org/wiki/Vi

An Introduction to Scopes and Closures

Patrice Williams — Tue, 17 Nov 2020 23:03:54 +0000

Scopes and closures, one of the most iconic duos of JavaScript are vital to implementing your code in both functional and object-oriented programming styles. But what exactly do scopes and closures have to do with each other? Let’s start simple with scopes. The scope tells you what is visible and where in your code. We start with the two most basic scopes: global and local. The global scope refers to anything outside of the Function, and local scopes refer to the scope that is local to a function.

Example

The variable firstName is in the global scope, whereas the variable a is local to the function addStuff and is therefore in the local scope.

Local Scope

The local scope refers to variables that are declared within the body of a Function. Variables declared in the local scope are only available within the Function itself and any other functions declared within it.

Nested Scope

Functions can be declared or defined within other Functions, which creates nested scopes. In the below example feeling is declared within happyDays(), but is accessible within the child scope of sadDays().

Example

But if I try to invoke happyDays(), we will get a ReferenceError because parent scopes do not have access to variables defined within children scopes.

Nesting functions inside of other functions allows us to create privacy, meaning we will have variables declared that are not accessible in other parts of the application.

What is a closure?

According to MDN web docs, “a closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)” (MDN, ‘Closures’). To put it simply, a closure occurs when a Function definition contains references to variables in its parent scope. In ‘lexical scoping’, an inner function has access to the outer function’s scope. Lexical scoping refers to where variables can be accessed. This accessibility is determined by the position of the variables in the source code. Closures are created every time a function is created in JavaScript. Review the following example:

The function healthyPerson creates a local variable named healthyFoods and a function healthy. The healthy function is an inner function that is defined inside of healthyPerson and is only available within the body of healthyPerson function. Because inner functions have access to variables of outer functions, healthy() can access the variable fullName declared in the parent function, healthyPerson(). The function healthy(), maintains a reference to its lexical environment, which is where the variable fullName exists. So when healthyDude() is invoked, the variable fullName is still available for use.

So, why should you use closures?

Closures are vital to computer programming because they allow us to create private data. When using closures for data privacy, variables within the closures (inner functions) are only in scope within the outer function. So if you have some form of private user data located within an inner function, you cannot access the data from an outside scope, except through “the object’s privileged methods. In JavaScript, any exposed method defined within the closure scope is privileged” (Elliott, 2020).

I hope you enjoyed my introduction to scopes and closures!

References
Elliott, E. (2020, August 26). Master the JavaScript Interview: What is a Closure? Retrieved November 17, 2020, from https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
MDN. (2020). Closures. Retrieved November 17, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Pure Functions-- What's all the craze about?

Patrice Williams — Wed, 23 Sep 2020 14:08:12 +0000

Pure Functions

Let’s talk about pure functions and what exactly makes them “so pure.” In order to do this we need to take a deeper look at functions in general. Functions can be divided into two groups: functions “that are called for their side effects” and “those that are called for their return value” (Haverbeke, Eloquent Javascript). A side effect occurs when there is a change in the application that “is observable outside the called function other than its return value" (Elliot, Master the Javascript).

Delving deeper into the land of side effects and functions, some functions create values while other functions are called for their side effects. It is best code practice to use functions that create values rather than functions that perform the side effects. Functions that do not have side effects are easier to combine. Some examples of side effects include: “modifying any external variable or object property (e.g., a global variable, or a variable in the parent function scope chain) logging values to the console, writing to the screen, writing to a file, writing to the network, triggering any external process etc” (Elliot, Master the Javascript). Ultimately, the less side effects we have in our code, the easier our software will be to debug, test and maintain. This leads us to further discuss pure functions.

Pure Function Example

Pure functions are functions that always return the same value for the same inputs and pure functions produce values in which there are no side effects.

The above function is pure. The function produces no side effects.

ImpureFunc is an impure function. Its output is not dependent on the input value. We can change the above function and make it pure.

The above function is now pure because it did not produce any side effects. It also returned an output based on the input value.

To recap, pure functions always return the same value for the same inputs and do not rely on side effects from other codes. A pure function will not alter any input or value in the global scope. Never alter a variable in the global scope when ensuring functional purity. Thank you for reading my quick review of pure functions.

Sources

Haverbeke, Marijn. “Chapter 3Functions.” Functions : Eloquent JavaScript, eloquentjavascript.net/03_functions.html.

Elliott, Eric. “Master the JavaScript Interview: What Is Functional Programming?” Medium, JavaScript Scene, 2 July 2019, medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0.

Chidume Nnamdi. “Understanding Javascript Mutation and Pure Functions.” Medium, Bits and Pieces, 20 Aug. 2019, blog.bitsrc.io/understanding-javascript-mutation-and-pure-functions-7231cc2180d3.