DEV Community: Jazsmith24

End-to-End Encryption

Jazsmith24 — Tue, 15 Sep 2020 14:24:12 +0000

In technology culture, social media has been a staple of the online world. You have the ability to interact with millions of people at the touch of your fingertips. When communicating with your worldwide buddies, you may wonder how your messages are only sending a person without everyone else online having access to these private messages. This is due to encryption. In this article, I will define what end-to-end encryption means and how to implement this encryption method.

End-to-end encryption is a secure line of communication that blocks third-party users from accessing transferred data. When the data is being transferred online, only the sender and recipient can decrypt it with a key. End-to-end encryption can help protect the contents of your messages, text, and even files from being understood by anyone except their intended recipients. It can also be used to prove that a message came from a particular person and has not been altered.

With end-to-end encryption, you decide what data you want to encrypt. This could include chat messages, files, photos, sensory data on IoT devices, permanent or temporary data.

How does End-to-End Encryption Work?

End-to-end encryption scrambles messages in such a way that they can be deciphered only by the sender and the intended recipient. As the label implies, end-to-end encryption takes place on either end of a communication. A message is encrypted on a sender’s device, sent to the recipient’s device in an unreadable format, then decoded for the recipient.

There are several ways to do encrypt this way, but the most popular works like this: A program on your device mathematically generates two cryptographic keys — a public key and a private key.

You can share a public key with anyone who wants to encrypt a message to you. The private key, or secret key, decrypts messages sent to you and never leaves your device. You can liken this to a locked mailbox. Anyone with a public key can put something in your box and lock it, but only you have the private key to unlock it.

A more common form of encryption, known as transport layer encryption, relies on a third party, like a tech company, to encrypt messages as they move across the web.

Implementation

In this example, you might want to keep benign information related to a chat app (like timestamps) in plaintext but end-to-end encrypt the message content.

Every user has a private & public key which the SDK will generate on your users’ device at signup or next time they log in.
The user’s public key is published to Virgil’s REST-based key management service for users to find each other’s public keys and be able to encrypt data to each other.
The user’s private key remains on the user’s device, protected by the operating system’s native key store:

import { EThree } from '@virgilsecurity/e3kit';

// Fetch Virgil JWT token from Firebase function
const fetchToken = async () => {...}

// Log in Firebase user on client device
firebase.signInWithEmailAndPassword(email, pwd)

// Once Firebase user authenticated, bootstrap e3kit to load user's private key
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {

    // Initialize e3kit
    const eThree = await EThree.init(fetchToken);

    // Bootstrap user (i.e. load user's private key)
    eThree.bootstrap(pwd);

    // User private key loaded, ready to end-to-end encrypt!

  } else {
    // No user signed in.
  }
});

Before sending a chat message or sharing a document, the app encrypts the contents using the recipient’s public key (client-side).

const usersToEncryptTo = ["alice@myapp.com", "bob@myapp.com", 'sofia@myapp.com'];

// Lookup destination user public keys
const chatRoomParticipants = await eThree.lookupKeys(usersToEncryptTo);

// Encrypt message using target user public keys
const encryptedMessage = eThree.encrypt('Hello there!', chatRoomParticipants);

After receiving a message, the app decrypts it using the recipient user’s private key.

// Decrypt message from the chat room

const decryptedMessage = eThree.decrypt(encryptedMessage, chatRoomParticipants);

This technique ensures that only end-users can see messages. The plaintext data won’t be visible to Firebase, to developers at your company, or to clients that the message wasn't intended for. If you’re building a chat feature or app, you’ll be able to build professional-quality end-to-end encrypted chat. You can also build an end-to-end encrypted IoT product or team collaboration suite, or use end-to-end encryption for any use case to protect your users’ data.

Sources
https://ssd.eff.org/en/module/deep-dive-end-end-encryption-how-do-public-key-encryption-systems-work
https://www.nytimes.com/2019/11/19/technology/end-to-end-encryption.html#:~:text=End%2Dto%2Dend%20encryption%20scrambles,sender%20and%20the%20intended%20recipient.&text=A%20message%20is%20encrypted%20on,Unlock%20more%20free%20articles.
https://virgilsecurity.com/blog/simplified-firebase-sdk

Currying in Javascript

Jazsmith24 — Tue, 08 Sep 2020 14:10:19 +0000

In functional programming, having the ability to pass and return functions, brought on concepts such as Higher-order functions, pure functions, and currying. In this article, we will see how currying works and how it will be useful in our work as software developers.

What is currying?

Currying is the process where a function takes multiple arguments one at a time. Currying translates a function from callable as f(a, b, c) into callable as f(a)(b)(c). A curried function returns a new function that expects the next argument inline.

Currying lets you have light and clean looking functions. It also allows you to compose the sequence of your functions. It ensures that the particular sequence of calls is enforced and followed. The final output is only returned when all the dependencies have been passed through. The arguments are kept "alive" with closures and all are used in execution when the final function in the currying chain is returned and executed.

How would you use currying in your code?

Currying works by closures. The closure created by the nested functions retains access to each of the arguments. So inner function has access to all arguments.

Let’s look at a simple add function. It accepts three operands as arguments and returns the sum of all three as the result.

Example

function add(a,b,c){
 return a + b + c;
}

You can call it with too few (with odd results), or too many (excess arguments get ignored).

add(1,2,3) --> 6 
add(1,2) --> NaN
add(1,2,3,4) --> 6 //Extra parameters will be ignored.

Example 2

let greeting = function (a) {
    return function (b) {
        return a + ' ' + b
    }
}


let hello = greeting('Hello')
let morning = greeting('Good morning')

hello('Austin') // returns Hello Austin
hello('Roy') // returns Hello Roy
morning('Austin') // returns Good morning Austin
morning('Roy') //returns Good Morning Roy

The two functions created from greeting (hello and morning) each return functions that process the provided inputs to generate a greeting statement. They also take an argument which is the name of the person to be greeted.

In the above case, the greeting is also used as a function factory with the two functions hello and morning generated from it.

The inner function may also be called invoked after the first call as follows:

greeting('Hello There')('General Kenobi')
//returns Hello There General Kenobi

Why it’s useful?

Currying helps you to avoid passing the same variable again and again.
It helps to create a higher-order function. It is extremely helpful in event handling.
Little pieces can be configured and reused with ease.

Sources
https://javascript.info/currying-partials
https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339
https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe
https://codeburst.io/currying-in-javascript-ba51eb9778dc
https://www.digitalocean.com/community/tutorials/an-introduction-to-closures-and-currying-in-javascript#what-is-currying

Javascript Design patterns: Flyweight Pattern

Jazsmith24 — Fri, 04 Sep 2020 13:45:02 +0000

The flyweight pattern is one of the structural design patterns. This pattern provides ways to decrease object count thus improving application required objects structure. It aims to minimize the use of memory in an application by sharing as much data as possible with related objects. One important feature of flyweight objects is that they are immutable. This means that they cannot be modified once they have been constructed.

Each "flyweight" object is divided into two pieces: the state-dependent (extrinsic) part, and the state-independent (intrinsic) part. The intrinsic state is stored (shared) in the Flyweight object. The extrinsic state is stored or computed by client objects and passed to the Flyweight when its operations are invoked.

Intrinsic information may be required by methods on our objects, which they absolutely cannot function without. Extrinsic information can be removed and stored externally.

How does the flyweight pattern store values?

In the Flyweight pattern, we use a HashTable that stores reference to the object which has already been created, every object is associated with a key. HashTables are data structures that store data in an array-like format, using key/value pairs, where the (hashed) key corresponds to the index in the array. HashTables offer the same key/value functionality and come native in JavaScript in the form of the map() object.

Now when a client wants to create an object, he simply has to pass a key associated with it. If the object has already been created we simply get the reference to that object else it creates a new object and then returns its reference to the client.

Example

The Flyweight uses sharing to support large numbers of objects efficiently. Modern web browsers use this technique to prevent loading the same images twice. When a browser loads a web page, it traverses through all images on that page. The browser loads all-new images from the Internet and places them on the internal cache. For already loaded images, a flyweight object is created, which has some unique data like position within the page, but everything else is referenced to the cached one.

Let's take a look at an example from Addy Osmani's "Learning JavaScript Design Patterns" book which is about implementing a system to manage all of the books in a library.

The vital meta-data for each book could be:

ID
Title
Author
Genre
Page count
Publisher ID
ISBN

We'll have the following properties to keep track of which member has checked out a particular book, the date they've checked it out on as well as the expected date of return:

checkoutDate
checkoutMember
dueReturnDate
availability

Before any optimization using the Flyweight pattern, each book would be represented as follows:

prior flyweight

 let Book = function(
  id,
  title,
  author,
  genre,
  pageCount,
  publisherID,
  ISBN,
  checkoutDate,
  checkoutMember,
  dueReturnDate,
  availability
) {
  this.id = id;
  this.title = title;
  this.author = author;
  this.genre = genre;
  this.pageCount = pageCount;
  this.publisherID = publisherID;
  this.ISBN = ISBN;
  this.checkoutDate = checkoutDate;
  this.checkoutMember = checkoutMember;
  this.dueReturnDate = dueReturnDate;
  this.availability = availability;
};

Book.prototype = {
  getTitle: function() {
    return this.title;
  },

  getAuthor: function() {
    return this.author;
  },

  getISBN: function() {
    return this.ISBN;
  },

  // For brevity, other getters are not shown
  updateCheckoutStatus: function(
    bookID,
    newStatus,
    checkoutDate,
    checkoutMember,
    newReturnDate
  ) {
    this.id = bookID;
    this.availability = newStatus;
    this.checkoutDate = checkoutDate;
    this.checkoutMember = checkoutMember;
    this.dueReturnDate = newReturnDate;
  },

  extendCheckoutPeriod: function(bookID, newReturnDate) {
    this.id = bookID;
    this.dueReturnDate = newReturnDate;
  },

  isPastDue: function(bookID) {
    var currentDate = new Date();
    return currentDate.getTime() > Date.parse(this.dueReturnDate);
  }
};

Using thousands of book objects may overwhelm the available memory, but we can optimize our system using the Flyweight pattern to improve this.

We can now separate our data into intrinsic and extrinsic states as follows: data relevant to the book object (title, author, etc.) is intrinsic while the checkout data (checkoutMember, dueReturnDate, etc.) is considered extrinsic.

Effectively this means that only one Book object is required for each combination of book properties. It's still a considerable quantity of objects, but significantly fewer than we had previously.

The following single instance of our book meta-data combinations will be shared among all of the copies of a book with a particular title.

post flyweight

// Flyweight optimized version
var Book = function(title, author, genre, pageCount, publisherID, ISBN) {
  this.title = title;
  this.author = author;
  this.genre = genre;
  this.pageCount = pageCount;
  this.publisherID = publisherID;
  this.ISBN = ISBN;
};

The extrinsic states have been removed. Everything to do with library check-outs will be moved to a manager, and as the object data is now segmented, a factory can be used for instantiation.

Essentially Flyweight is an 'object normalization technique' in which common properties are factored out into shared flyweight objects. (Note: the idea is similar to data model normalization, a process in which the modeler attempts to minimize redundancy).

What's an advantage and a disadvantage of the flyweight pattern?

Disadvantage: Flyweights may introduce run-time costs associated with transferring, finding, and/or computing extrinsic state, especially if it was formerly stored as an intrinsic state.

Advantages*:

Space savings, which increase as more flyweights are shared. * Saves a lot of Megabytes.
Facing memory constraints and get thousands of similar objects.

Sources

https://www.geeksforgeeks.org/flyweight-design-pattern/
https://anasshekhamis.com/2017/11/16/flyweight-design-pattern-in-javascript/
https://www.dofactory.com/javascript/design-patterns/flyweight#:~:text=Essentially%20Flyweight%20is%20an%20'object,out%20into%20shared%20flyweight%20objects.&text=An%20example%20of%20the%20Flyweight,are%20shared%20across%20the%20application.

What is a Relational Database?

Jazsmith24 — Thu, 27 Aug 2020 04:31:52 +0000

A database is a very useful tool in development. It gives a developer the ability to not only have a sense of data persistence within an application but is also efficient for space in memory. There are different ways a database can be framed. One way to frame a database is non-relational, on the other hand, one would use a relational database. In this article, I will dive deeper into relational databases.

In the early years of databases, every application stored data in its unique structure. When developers wanted to build apps to use the data, they had to know a lot about the particular data structure to find the data they needed. These structures were inefficient and hard to optimize for delivering good application performance. This is why the relational database model was introduced. The relational database model was designed to solve the problem of multiple arbitrary data structures.

A relational database is a type of database that stores and provides access to data points that are related to one another. An example of a relational database is the use of schemas.

In psychology and cognitive science, a schema describes a pattern of thought or behavior that organizes categories of information and the relationships among them.
Similarly, in programming, a schema is the organization or structure for a database. The term seems to refer to a visualization of a structure and sometimes to a formal text-oriented description.

In the early years of databases, every application stored data in its unique structure. When developers wanted to build applications to use that data, they had to know a lot about the particular data structure to find the data they needed. These data structures were inefficient, hard to maintain, and hard to optimize for delivering good application performance. The relational database model was designed to solve the problem of multiple arbitrary data structures.

Schema Structure

A relational database presents data sets as a collection of tables and provides relational operators to manipulate the data in tabular form. Each row in the table is a record with a unique ID called the key. The columns of the table hold attributes of the data, and each record usually has a value for each attribute, making it easy to establish the relationships among data points.

Schema Example

What are the benefits of a relational database?

The main advantage of relational databases is that they enable users to easily categorize and store data that can later be queried and filtered to extract specific information for reports. Relational databases are also easy to extend and aren't reliant on a physical organization.
A relational database can be considered for any information need in which data points relate to each other and must be managed in a secure, rules-based, consistent way.

Relational databases give a developer the ability to do the following:

Removes redundant data through normalization.
Standard mature tools to be used for development, design, performance measurement, and management.
The ability to deal with larger datasets.
The ability to identify and utilize relationships inherent in the datasets, and more readily share data with other relational databases.

The main advantage of a relational database is its formally described, tabular structure, from which data can be easily stored, categorized, queried, and filtered without needing to reorganize database tables.

Sources

What is a Hybrid App?

Jazsmith24 — Mon, 27 Jul 2020 13:54:10 +0000

A hybrid mobile application development looks appealing to an organization. Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? In this article, I will give an introduction to hybrid web apps along with some examples of a Hybrid application.

What is a Hybrid Application?

Hybrid mobile apps are applications that are installed on a device, just like any other app. Hybrid apps are built with a combination of HTML, CSS, and Javascript. Hybrid apps are part native app, part web app. Like native apps, they live in an app store and can take advantage of some device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.

Hybrid apps are deployed in a native container that uses a mobile WebView object. When the app is used, this object displays web content thanks to the use of web technologies (CSS, JavaScript, HTML, HTML5).

It is in fact displaying web pages from a desktop website that are adapted to a WebView display. The web content can either be displayed as soon as the app is opened or for certain parts of the app only i.e. for the purchase funnel.

In order to access a device's hardware features (accelerometer, camera, contacts…) for which the native apps are installed, it is possible to include native elements of each platform’s user interfaces (iOS, Android): native code will be used to access the specific features in order to create a seamless user experience. Hybrid apps can also rely on platforms that offer JavaScript APIs if those functionalities are called within a WebView.

Hybrid Application Examples

How to check app type

We can write our hybrid apps using HTML, CSS, and JS and wrap it in a wrapper (android/ios), sometimes using Phonegap. Writing a Phonegap app with HTML and JavaScript gives you the ability to deploy it to any mobile device without losing features of a native app.

Adobe PhoneGap is a standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and JavaScript for iOS, Android™ and Windows® Phone 8.

Is there a way to identify through jQuery or plain javascript, whether the loaded thing is a Hybrid App or a Mobile app?
When you make a hybrid app, the HTML files loaded into a web view has a file:/// protocol and for a hosted application it is http or https. So you can check whether the app is by the following:

window.location.href.indexOf('http') === 0 ? 'web' : 'hybrid'

function isApp() {

var app = document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1;
  if (app) {
      // PhoneGap application
      //alert("U're using cordova");
      return true;
  } else {
      //alert("U're using browser");
      return false;
  }
}

Hybrid Application Benefits

Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow cross-platform development and thus significantly reduce development costs: that is, the same HTML code components can be reused on different mobile operating systems.

Hybrid apps offer a certain number of advantages:

Combining user experience with an agile development cycle and controlled costs
Reusing the code of the web app part: the code is written once and deployed across all mobile platforms.
Reducing development time and costs: the code is written once, which substantially reduces development time and costs compared to native apps which require development for iOS and development for Android.
Avoid the limitations of the Apple App Store
Finding resources: most applications have an iOS version and an Android version. They are thus developed using the corresponding programming language: Objective-C or Swift for iOS, Java for Android. Hybrid apps allow for the use of programming languages used frequently by web developers (HTML, JavaScript, and CSS) who can thus reuse their knowledge. This makes finding resources to build a hybrid app easier.

Sources

https://www.telerik.com/blogs/what-is-a-hybrid-mobile-app-
https://www.app-press.com/blog/web-app-vs-native-app
https://www2.stardust-testing.com/en/blog-en/hybrid-apps#:~:text=Hybrid%20mobile%20apps%20are%20applications,just%20like%20any%20other%20app.&text=Hybrid%20apps%20are%20deployed%20in,JavaScript%2C%20HTML%2C%20HTML5).
https://stackoverflow.com/questions/12067372/differentiate-hybrid-app-or-web-app

Intro to Progressive Web Apps

Jazsmith24 — Thu, 23 Jul 2020 06:12:55 +0000

With progressive web apps (PWAs), developers have another opportunity to optimize the quality of their user experience. In this article, we will define PWA, and I will expound on how PWA's are a little more user friendly than native apps.

What is a PWA?

A PWA employs service workers to manage requests, catching shell data in a cache. Service workers are scripts a browser will run in a separate browser thread. The service worker intercepts network requests, responsible for caching or retrieving resources from the cache, and delivering push notifications.

Because workers run separately from the main thread, service workers are independent of the application they are associated with. This has several consequences:

Because the service worker is not blocking (it's designed to be fully asynchronous) synchronous XHR and localStorage cannot be used in a service worker.
The service worker can receive push messages from a server when the app is not active. This lets your app show push notifications to the user, even when it is not open in the browser.

PWA is an ultra optimized website for mobile. It's able to use features of the users' devices, such as the camera. Users can access a progressive web app from their browser - chrome, firefox, etc - and download its' content as you're browsing.

How to create a Progressive Web App

Progressive Web app Examples

For example, Tinder found that implementing its PWA halved the loading time when compared to the native app and decreased its' storage size. It also saw improved session times with PWA and increased engagement for both swipes and messages.

Similarly, Pinterest users spend 40% more time on the company’s PWA than on their mobile website, with a core engagement increase of 60%.

Progressive Web App Benefits

A progressive web app serves webpages in a users' browser, this way the user can access a mobile app with ease. Using a PWA has a few benefits that native apps do not.

1. Speed

It saves time and money since it is only developed once, while a native app requires two separate developments, one for IOS and one for Android.

2. User experience

It gives you the ability to access content much faster directly via the URL which uses less storage. It requires no download, so the PWA only uses a small portion of the phones' memory.

3. Online visibility

PWAs still have greater visibility due to the nature of their build. Because PWAs are made up of app-imitating web pages, users can find your app online — not just in the app store. This allows you to utilize SEO in order to reach valuable users in a cost-effective manner. It also means users can share the URL of any app page with ease, increasing the opportunities for organic growth and engagement.

Progressive Web App Disadvantages

1. Internet Connection requirement

You must have an internet connection in all of your exhibition spaces.

2. Support Problems

They're not perfectly supported by all browsers.

3. No Access to native apps

The biggest downfall to PWAs is that they don’t have access to all of your system resources, meaning that a native app may still be required. This is only something that you need to consider, though, if you actually need to make use of the native device features.

sources

Node Package Manager (NPM)

Jazsmith24 — Mon, 13 Jul 2020 13:46:17 +0000

In this article, I will be discussing the node package manager (NPM). We'll go over what exactly is NPM, what are its' components, how to install, and its' use cases.

What is NPM?

NPM is a package manager for the javascript programming language. As the world's largest software registry, it is the default package manager for the javascript runtime environment, Node.js. Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. NPM is a tool that allows you to install javascript packages.

The name npm (Node Package Manager) stems from when npm first was created as a package manager for Node.js. All npm packages are defined in files called package.json. The content of package.json must be written in JSON. At least two fields must be present in the definition file which is the name and version of a package.

Components

NPM has three components. These components consist of the npm website, the Command Line Interface (CLI), and an online database of public and private packages called the npm registry. Each of these components possesses its role in the world of NPM. What are these roles? To discover packages, set up profiles, and to manage other aspects of your npm experience, you would use the website. The command-line interface runs from the terminal and this is how most developers interact with NPM. The registry is a large public database of javascript software and metadata surrounding it.

Installation

NPM is installed with Node.js. This means that you have to install Node.js to get npm installed on your computer. When installing a new package, you're creating a new package.json file.

To set up a new or existing npm package you must use the following command:

npm init <initializer>

Initializer in this case is an npm package named create-, which will be installed by npx, and then have its main bin executed – presumably creating or updating package.json and running any other initialization-related operations.

Examples

Create a new React-based project using create-react-app:

$ npm init react-app ./my-react-app

Create a new esm-compatible package using create-esm:

$ mkdir my-esm-lib && cd my-esm-lib $ npm init esm --yes

Generate a plain old package.json using legacy init:

$ mkdir my-npm-pkg && cd my-npm-pkg $ git init $ npm init

Generate it without having it ask any questions:

$ npm init -y

The init command is transformed to a corresponding npx operation as follows:

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create

Any additional options will be passed directly to the command, so npm init foo --hello will map to npx create-foo --hello.

If the initializer is omitted (by just calling npm init), init will fall back to legacy init behavior. It will ask you a bunch of questions, and then write a package.json for you. It will attempt to make reasonable guesses based on existing fields, dependencies, and options selected. It is strictly additive, so it will keep any fields and values that were already set. You can also use -y/--yes to skip the questionnaire altogether. If you pass --scope, it will create a scoped package.

To install a new package you'll use the following command:

Windows Example

C:\>npm install <package>

Mac OS Example

>npm install <package>

Package.json example

The following example represents what your package.son file looks like after installation.

{ "name" : "foo", "version" : "1.2.3", "description" : "A package for fooing things", "main" : "foo.js", "keywords" : ["foo", "fool", "foolish"], "author": "John Doe", "licence" : "ISC" }

Why use NPM?

NPM provides plenty of different useful things for developers to use. Because npm has packages of reusable code that won't have to be repeatedly written every time you start a new project. NPM is most commonly used to publish, discover, install, and develop node programs. To make use of the tools (or packages) in node.js, we need to be able to manage them in a useful way. This is where npm comes into play. Npm installs the packages you want to use and provides a user interface to work with them.

Sources

Version Control Manager

Jazsmith24 — Mon, 06 Jul 2020 13:54:45 +0000

In this article, I will be reviewing version control. We will talk about what exactly is version control, how do you use it, different VCM's, and what the benefits of use are.

Before we go over version control, let's identify a few moving parts involved with version control. A repository (commonly referred to as repo) is a collection of source code. A repository has commits to the project which is a set of references to the commits. A commit logs a change or series of changes that you have made to a file in the repository.

What is version control?

Version control is an invaluable tool for any kind of software development. It is a management system that allows you to record and track changes in your source code and files so that you can recall certain versions later. Creating a log of all the changes made to code allows programmers to make sure that multiple developers working on the same project do not step on each other's toes. Even if you're not working on a team, it helps keep track of all your changes just in case you break code and have to revert to the working code or previous commits.

How to use version control?

In software development, a team needs an efficient way to manage changes and version code in their codebase. Developers often refer to their codebase as a working tree. Like a tree, our codebase extends to different branches that contain different versions of code. To utilize version control, we run commands in the terminal of the workspace.

Above we have a visualization of a working tree. This working tree represents our codebase. There is a team of coders working on this same code base. Each author can make their edits without affecting the main branch. This prevents loss of working or optimized code.

Popular version control systems

Github
GitLab
Beanstalk
PerForce

Below are some remote commands you would use what working with someone else on your tree. Use the following commands:

This command allows you to see what authors are added to your tree:
- git remote -v
This command allows you to add an author to your working tree:
- git remote add
This command allows you to remove an author from your working tree:
- git remote rm

Useful Situations?

Tracking: Say you are working on a web application, and one day, you find that your code changes have broken parts of the website. Instead of going through the trouble of finding the bug, you can revert your changes and see what lines of code are causing the problem.

Teamwork: Without a version control system, it’s challenging to work on the same source code at once. By using something like Git, you can more easily merge changes, which makes it significantly easier to collaborate on projects.

Branches: Say you are working on the footer and header of your website without using a version control system. You’ve finished the header, but not the footer, which means that the project isn’t ready to be public. With a version control system, you can create branches for different aspects of the project you are working on and merge them into the main source code when you are done.

Benefits of Version Control

Due to how useful version control is, it’s almost always a requirement for any developer or engineering job. As you become more accustomed to using a version control system, you will realize how powerful and easy it is to use. It helps to commit and merge code without conflicts. Also, while using it on a team, you can even make edits to shared code, without unknowingly overwriting each other’s work.

Sources
https://www.educative.io/edpresso/what-is-version-control
https://gource.io/
https://www.educative.io/edpresso/what-is-git

Instantiation in Javascript: Pseudoclassical Style

Jazsmith24 — Mon, 29 Jun 2020 13:58:40 +0000

Instantiation patterns refer to the way instances of objects are created. There are different instantiation patterns and these patterns have different opinions of how a class creates a new instance of an object. This article will cover pseudoclassical instantiation.

All instantiation patterns have the same following functionality:

Creates a new object.
Creates properties which are methods for the newly created object.

To create a new instance in pseudoclassical style, we must start with a class function. The class is the constructor function that creates instances of new objects that inherits properties from the class prototype. We can metaphorically think of this class as a carpentry school. This school has all the knowledge that students need to build things.

For example, here we have a class called BuildDiningSet. This function has a prototype property which contains methods for building furniture and other methods.

class BuildDiningSet {
  constructor(chair, table) {
    this.chair = {};
    this.table = {};
    this.chairCount = 0;
    this.tableCount = 0;
  }
}

As a result of an affiliation with the school, the students that go to that school will have inherited the knowledge of building different things upon graduation. Thus, as a result of invoking our class, we create new instances that will inherit the prototypes of our class.

The properties and methods are defined on the prototype property on the objects' class, not the object instances themselves. Each new instance refers back to the prototypal chain to access the prototype property of its' class.

BuildDiningSet.prototype.makeChair = chairType => {
  this.chairCount++;
  this.chair[chairType] = chairType;
},

BuildDiningSet.prototype.makeTable = tableType => {
  this.tableCount++;
  this.table[tableType] = tableType;
};

Now that our class has methods on its' prototype, we are ready to create new instances. To create a new instance with must use the "new" keyword. Our graduating students now know how to build tables and chairs.

const carpenter1 = new BuildDiningSet(tallChairs, roundTable);
carpenter1.makeChair();
carpenter1.makeTable();

Now we have a graduating student called carpenter1 that knows how to build tables and chairs. When the graduate goes to work he refers back to what he learned in school to perform the function.

When using the new keyword, it binds the keyword this to the new object being created and thus gives the new object all the properties specified in the class.

Pseudo classical instantiation is the most advanced method of object creation. With the use of syntactical sugar, it makes it so you don't have to do as much code writing as you would when using other instantiation styles.