Forem: Jessa Daggs

OOP in JavaScript

Jessa Daggs — Mon, 21 Sep 2020 07:42:15 +0000

The most notable appearance of the term object in relation to programming languages took place in the 1980s. Since then, object-oriented programming has become the most important way to create software. Object-oriented programming at the most basic level is the use of objects as building blocks for an application. In this week's blog we will explore some important object oriented mechanisms supported by JavaScript and their implementations.

Defining an Object

In Javascript, objects do all the heavy lifting. The objects are self-contained. They store all related data and functionality to be implemented during development. Object contains properties that describe the instance and methods that perform actions on the instance. Let's create some objects!

// Create an object using an object literal
const location = {
  // characteristics of the instance
  city: 'New Orleans',
  state: 'Louisiana',
  // methods of the object
  getLocation: ()=>{
    return (`Welcome to ${location.city}, ${location.state}!`)
  },
}

console.info(location.getLocation()); // Prints 'Welcome to New Orleans, Louisiana!'

// Create an object using an constructor
const Location = (city, state) => {
  // characteristics of the instance
  this.city = city;
  this.state = state;
}
const location1 = new Location('New Orleans', 'Louisiana');
const location2 = new Location('New York', 'New York');

console.info(`Welcome to ${location2.city}, ${location2.state}!`); // Prints 'Welcome to New York, New York!'

// Create an object using Object.create method
// initialize an object literal
const location = {
  greeting: function(){
    console.info(`Welcome to ${this.city}, ${this.state}!`)
  }
}
// assign the new instance to a variable
const vacaLocation = Object.create(location);
// add properiest to the new instance
vacaLocation.city = 'Sao Paulo';
vacaLocation.state = 'Brazil';

vacaLocation.greeting(); // Prints 'Welcome to Sao Paulo, Brazil!'

Encapsulation

Encapsulation is the localization of all of the functionalities of an object inside of that object. The Constructor/Prototype pattern is the most common way to define objects of a type. The constructor pattern defines the properties of the object and the prototype pattern defined the methods and shared properties.

class Location {
  construction(city, state){
    // initialize the objects properties and methods
    this.city = city;
    this.state = state;
  }
  addDestination(destination){
    this.destination = destination;
  }
  getPlan(){
    console.info(`From ${this.city}, ${this.state} to ${this.destination}`)
  }
}

const trip1 = new Location('New Orleans', 'Louisiana');
trip1.addDestination('Bali, Indonesia');
trip1.getPlan(); // Prints 'From New Orleans, Louisiana to Bali, Indonesia'

Abstraction

Abstraction can be implemented by simply changing how properties and functions are defined. Abstraction is the process of restricting the scope or hiding the data in the background.

// abstract the properties and method by setting them to a variable
function Location(city, state){
  let city = city;
  let state = state; 

  let privateLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
  // use the this keyword to give access to instances
  this.publicLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

const location1 = new Location('Seattle', 'Washington');
console.info(location1.privateLocation()); // Prints undefined
console.info(location1.publicLocation()); // Prints 'Welcome to Seattle, Washington!'

Inheritance

A class is an abstract template or parent of object instances. Javascript is specially prototypical oriented language where there isn't a distinction between an instance and a class. What is typically referred to as a class is a prototypical object in JS. The class keyword was added simply as syntax-tical sugar for developers from class-based languages. Inheritance is the process of passing properties and methods of one object to another.

// Class model
class Location{
  constructor(city, state){
    this.city = city;
    this.state = state;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

// Use the extends keyword to create an subclass of the Location class
class CityByCountry extends Location {
  constructor(city, state, country){
    // Prototype-based inheritance: call related method of the super class (Location)
    super(city, state);
    this.country = country;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state} ${country}!`);
  }
}
const location1 = new CityByCountry('Denver', 'Colorado', 'USA');
console.info(location1.getLocation()); // Prints 'Welcome to Denver, Colorado USA!'

Conclusion

As a JavaScript developer, it is important to understand prototypical inheritance but also explore class-oriented languages such as C++. There are key differences between prototype-based and class-based languages that I will cover in a later blog. In the meantime, see the credits below to expand your understanding of object-oriented programming in JavaScript. Happy coding! See you next time.

Credits
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
https://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Learning Python from a JavaScript POV

Jessa Daggs — Mon, 14 Sep 2020 14:56:57 +0000

Technology is ever-changing and rapidly growing. There are many languages that fall into the category of niches such as PHP and Ruby while other languages such as Javascript, Python, and C languages dominate the industry. Together let's demystify learning other languages and dive deep into some Python basics and discuss how it differs from Javascript.

Brief History

Python was first implemented in December 1989 as a replacement for the programming language ABC to interface with Amoeba operating system. Python is a high-level object-oriented programming language designed to be easy to read. It uses a garbage collector for memory management and terminates as soon as there is a problem in the code. These problems are considered syntax-related or exceptions.

Javascript was submitted to ECMA as the standard specification all browser vendors like Mozilla, Apple, and Google could conform to. Javascript gained popularity with the introduction of Ajax technologies that used Javascript to create web applications that allowed for background loading without reloading the entire page.

Python VS. Javascript

REPL stands for a read-eval-print-loop which is a language shell that takes the user inputs and returns the results to the user after execution. REPL has to be installed with Javascript but comes with the installation of Python.

Hash tables are very useful for working with large sets of data in an efficient manner. Though we can construct hash tables in JS, Python dictionaries and sets are built-in hash tables and can be used in conjunction with keys and values.

A javascript array is very similar to python list.

const array = ["Hello", "World", "!"];
console.info(array); // prints ["Hello", "World", "!"]

py_list = ["Hello", "World", "!"]
py_list # Prints ["Hello", "World", "!"]

We can access by index and modify.

const array = ["Hello", "World", "!"];
array[0];
 // Prints "Hello"
 array[array.length-1]; // Prints "!"
array[0] = "Bye";
array; // Prints ["Bye", "World", "!"]

py_list = ["Hello", "World", "!"]
py_list[0] # Prints "Hello"
py_list[-1] # Prints "!"

py_list[0] = "Bye"
py_list  # Prints ["Bye", "World", "!"]

We can also check the length of the lists and extend it with new values.

const greeting = ["My name is"];
greeting.push("Jessa", "!");
console.info(greeting); // Prints ["My name is", "Jessa", "!"]

py_greeting = ["My name is"];
py_greeting.extend(["Jessa", "!"]);
py_greeting # Prints ["My name is", "Jessa", "!"]

We can also concatenate elements.

const greeting = ["My name is ", "Jessa", "!"];
const newGreeting = greeting[0] + greeting[1] + greeting[2]; // Prints "My name is Jessa!"

py_greeting = ["My name is ", "Jessa", "!"]
greeting = py_greeting[0] + py_greeting[1] + py_greeting[2]
greeting # Prints "My name is Jessa!"

Major Differences

Javascript is can be used for front-end development while Python is used for the back-end which makes Python great for machine learning and math-intensive. Javascript is a more complex language than Python, but Python is easy to work with and maintain because it has a better design.

Conclusion

The goal of this post to encourage Javascript developers to explore other languages. Adding other popular languages such as Python will increase the number of optional career paths and ease the ability to learn other languages. Commit to a lifetime of learning to make a meaningful contribution to the industry. Thanks for stopping by and as always happy coding!

Credits:
https://www.codementor.io/@johnselawsky/why-you-should-learn-several-programming-languages-where-to-learn-them-103pdtcctd
https://en.wikipedia.org/wiki/Python_(programming_language)
https://en.wikipedia.org/wiki/JavaScript

Intro to: React Router

Jessa Daggs — Mon, 07 Sep 2020 14:19:47 +0000

What is React Router?

React is an efficient solution for building one page web applications by providing developers the ability to build each component of an application to render without refreshing the entire page. React router is the standard routing library for navigation through the multiple views of an react application. With React Router views are rendered inline each view or page to create the illusion of a multiple page application by managing the relationship between the user interface and urls. For this tutorial it is expected that you have some understanding of building a React web application.

Getting Started - Installation

Getting started with React Router is as simple as installing it's npm dependency into the existing react project. If you don't have a project setup visit Create-React App before moving on.

npm install react-router-dom

Setting up Views

In this example the application contains the following views.

// Home.js
const Home = () => {
  return 
    <div>
      <h2>Home</h2>;
      <p>Welcome to Our React Web App!</p>
    </div>
}

export default Home;

// About.js
const About = () => {
  return 
    <div>
      <h2>About</h2>;
      <p>We are pretty awesome!</p>
    </div>
}

export default About;


// Product.js
const Products = () => {
  return 
    <div>
      <h2>Products</h2>;
      <p>Buy our stuff please!</p>
   </div>
}

export default Products;


// Contact.js
const Contact = () => {
  return 
    <div>
     <h2>Contact</h2>;
     <p>For Inquiries</p>
   </div>
}

export default Contact;

The Router and Links

Let's establish routes between the home, products, about, and contact views in our navigation bar in the application. Link creates an <a> tag with a href attribute that specifies the url as values contained in the string.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
        <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
      </div>
    </Router>
  );
}

export default App;

Switching Views with Links

Iterate through the routes to find the one to render using a switch statement with the React Router Switch keyword. The first one that matches the user's click value is the one that will be selected.

// App.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
         <nav classname="nav">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/products">
            <Products />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Conclusion

That is! I enjoyed covering this topic and was surprised by the simplicity and can’t wait to refactor my current project to include routing. I plan to implement React Router in my future projects to optimize navigating views and I hope found this helpful enough to get you started as well. I recommend establishing routes early on in your project so you don't have deal with more complexity than necessary. Happy coding!

Credits:
React Router https://reactrouter.com/

Creating an React App https://github.com/facebook/create-react-app

Learn By Doing https://daveceddia.com/react-practice-projects/

The Art of Designing the User Experience

Jessa Daggs — Mon, 31 Aug 2020 12:33:22 +0000

"Design is intelligence made visible" Alina Wheeler

How the user interacts with the applications we develop is one of most important aspects to explore. Considering things like the flow of actions and the color of text can seem like tedious tasks but these are decisions that make up the difference between a site users visit frequently and one they will avoid like the plague. In this week's blog, we will explore the importance of making an application look aesthetically pleasing and feel simple to use. Let's take a closer look at some important problems that career designers solve and why their work matters in the tech industry.

User Interface Designer (UI) - Fundamental Design Approach

Oftentimes user interface design (UI) and user experience design (UX) are lumped together. The tech industry is not unique in over simplifying design processes. Design is a seemingly simple concept that often extends beyond what the producer and audience initially intended. Pun Ahead: That is the beauty of it. UI and UX designers share the same goal of ensuring users have a positive experience using the application, product, or service. UX design can be thought of as a superset of UI design. Designing the user interface is a major part of designing the user experience concerned with what the user will use to interact with the application. UI design is the process of designing the visual elements the user may encounter such as:

Typography - the readability of text and the emotions they convey.
Color Schemes - the implementation of consistent color combinations that align with color theory.
Layout Responsiveness - to ensure the content is balanced and spaced well for users across devices.

Example of commonly used Gestalt design principle

User Experience Designer (UX) - Usability over Aesthetics

A user experience designer's solutions are based on what the user may feel interacting with a company's services and products. The UX Design is the process of shaping all interactions in a way that increases quality, efficiency, and ease of use for all visitors. The process focused on how the mind of the user represents, processes, and transforms information. Designers work closely with UX researchers to transform behavioral data about what users are thinking, feeling, and doing into user-centric solutions. Some specifics of what problems a UX design will solve just to name a few are:

Wireframes and Prototypes - the functionality of a design geared toward optimal user experience by focusing on the user needs and story.
Information Architect - arranging the components in an understandable way.
Scenarios - capturing the user's goal for interacting with a web application and creating functionality that meets those needs. Example of a wireframe sketch

Conclusion

I'm super fascinated by the idea of merging my background in visuals and fashion design into my career in tech. I hope this blog shines a light on the designers in technology. Thank you all for creating more accessible products and applications that don't drive us all insane. Happy coding!

Helpful Resources:
UX Do Nots & Whys - https://careerfoundry.com/en/blog/ux-design/10-classic-ux-design-fails/
Well Done UX Designs - https://medium.com/@bestfolios/8-well-done-ux-case-studies-every-designers-should-read-f15cfd8687e1
UI Comprehensive Guide - https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/
Designers in Tech - https://medium.com/swlh/designers-in-tech-who-does-what-fdfe3e95a6cf
Why UX and UI Should Be Separate - https://uxdesign.cc/why-ux-and-ui-should-remain-separate-7d6e3addb46f

A deep dive into Restful APIs

Jessa Daggs — Mon, 24 Aug 2020 10:27:36 +0000

What is an API framework?

API stands for application programming interface. It is an api's job to return formatted data for an application. An API receives user data from the client, sends it to the server, listens for a response from the server, and then sends it back to the user. Developers write calls on the front-end and back-end to send and receive resources. Typically this is done using the programming language JSON because of its easy readability for developers and applications. An API is a literal object or resource with returnable values that forms the relationship between the client and server sides of an application.

What does RESTful mean?

REST stands for Representational State Transfer it provides stability to a web application. REST is the set of rules to be followed by a developer in order to design an easy to use and read application. REST is an architectural style, and RESTful is the interpretation of it. That is, if your back-end server has REST API and you make client-side requests (from a website/application) to this API, then your client is RESTful as stated on mlsdev.com.

Constraints

The difference between a REST API and Non-REST API is its structural style. RESTful architectural constraints are required for any API to be considered RESTful. The six constraints are as follows:

Uniform Interface - This key constraint is the system in which the resources will be accessible to the consumers of the API. Its four fundamental principles to the design of REST APIs are:
1. Resource-Based: Define individual resources by URIs keeping them separate from the responses that are sent to the client.
2. Manipulation of resources through their representations: If a user has permission they are able to update or delete the resource on the server.
3. Self-descriptive messages: All the information needed to process the message is included inside of it.
4. Hypermedia as the Engine of Application State (HATEOAS): a resource should contain everything in its representation by delivering the state via the client in the body, parameters, headers, and the request URI.
Stateless - Interactions between the client and server must be stateless. Meaning the server will treat every request from the client as new while the client holds the session state of the application for users. Any request made from the client to the server must contain the information needed to handle the request.
Cache-able - Must have the ability to reduce the amount of client-server interactions to improve performance of the application wherever applicable.
Client-Server - The separation of the front-end concerns from the back-end concerns which allows each to evolve separately free of a dependency on one another.
Layered System - Must have the ability for the client to connect to layered servers without disruption in communication between any of connections.
Code On Demand - optionally the API can return executable code such client-side scripts.

HTTP Methods

HTTP Methods are operations to be performed on a call. Postman is a great tool for viewing request and their response. Commonly used call methods for updating, deleting, sending and receiving data are:

GET - Gathering or reading data

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

// listen for GET request 
const getLocation = (req, res) => {
  res.send("I'm home!");
};
app.get("/", getLocation);

POST - Creating new data

// listen for POST request
app.post("/addNew", (req, res)=>{
  // deconstruct the data from the body of the request
  const { data } = req.body;
  res.send(`Added: ${data}`)
});

DELETE - The removal or deletion of data

// listen for DELETE request
app.delete("/user", (req, res)=>{
  res.send(`User has been deleted: ${req.body.data}`)
})

Conclusion

Initially RESTful APIs may seem elusive but as everything in coding with perfect practice you will be on your way to developing a great understanding of this concept. I hope this blog proves to be a helpful resource. Thank you dearly for reading and as always happy coding!

Credits:

MERN stack attack!

Jessa Daggs — Mon, 27 Jul 2020 12:31:25 +0000

Building a MERN stack application

If you are learning to build single-page web applications in JavaScript you most likely have heard the term MERN. The MERN stack is a go-to for building dynamic web interfaces. If you haven't heard of it yet, not allow me to introduce you!

What's a development stack?

A developer's stack is the libraries, tools, languages, and development environments a programmer uses to develop an application. The MERN stack in particular is often a seamless design process to implement. MongoDB, ExpressJS, ReactJS, NodeJS are the components or technologies that are stacked together to handle the front-end and back-end of a web application. "The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON." stated on MongoDB.com. Each of the technologies are an important part of the development process and work together to create robust web applications. Let's meet the team!

MongoDB: Document-oriented Database

The simplicity of learning and using Mongo is the reason it is one of the more popular databases for modern applications. Its simplification doesn't take away from its ability to meet complex requirements. MongoDB non-relational databases provide flexible 'schemas' that hold any data that is stored by the application in JSON-like documents to be retrieved at a later time.

The Setup

Here's a glimpse at a MongoDB database setup

//run the following command 
//model.js
//create a table 
db.createCollection('collectionName');
//insert records into the collection
db.collectionName.insert(
  {
    id : 1,
    name : "Jessa",
    location : "New Orleans, LA"
});
//send a query
db.collectionName.find({name : "Jessa"}).forEach(printjson);

ExpressJS: Server-Side Framework

Express is the de facto standard server framework for NodeJS. The huge amount of modules available on npm provide flexibility and the minimalistic interface makes this lightweight framework very popular for application development. Express is used to quickly build the back-end using NodeJS. In express, a middleware function can access request and response objects and perform task such as executing code, manipulating the objects themselves, ending a response-request cycle and invoking the next middleware function in the cycle.

The Setup

Here's how to create a simple connection between the front end and server side of an application.

//make a directory 
$ mkdir react-express-myFirstApp
// open the folder 
$ cd react-express-myFirstApp
//initialize the project
$ npm init -y
//install express
$ npm add express

//package.json
//add 'node index.js' to the start key to the script section thie will start the node server

//index.js
//create a basic route
const express = require('express');
//create the application
const app = express();
//assign a port 
const port = 3000;

// send a json response 
app.get('api/getGreeting'(req, res) => { 
  res.send('Greetings Earthling!')
}); 

//listen for the connection
server.listen(port, () => { 
  console.log(`Server running at http://localhost:${port}/ better catch it!`); 
}); 
//In the browser run to see the greeting
'http://localhost:3000/api/getGreeting'

//test server from the command line
$ npm start

React: Client-Side User Interface Library

Mainly used for single page applications, ReactJS is used for handling the views or user interface reusable components. React's DOM document object model only refreshed parts of the page increasing the performance of a web application and decreasing the time spent programming for the developer. It's well organized and easy to read even for novice developers. In the stack React's job is to build a user interface consisting of components and render the data on the server as HTML.

The Setup

Here's a glimpse at starting a simple React application

//run in the terminal
$ npm install create-react-app --global
//create a react app and place it in the client folder
$ create-react-app client
//start the application to see the app!
$ npm start

//inside of the client/package.json add a "proxy": "http://localhost:3000/api/getGreeting"

//install packages 
$ npm install -g react-router-dom

//client/index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App/App';

render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById('root'));

//See Reactjs.org for steps on how to extend components

NodeJS: JS Runtime Environment

NodeJS package ecosystem npm is the largest ecosystem of open-source libraries in the world! NodeJS is a lightweight and efficient javascript run-tme built on google chrome's v8 javascript engine. The v8 engine will give the application the ability to make request data from the server while simultaneously performing other tasks. Every instance of an npm command is accessing one of the thousand node package managers to enhance the application.

Conclusion

Some other popular technology stack are Linux-Apache-MySQL-PHP referred to as LAMP, PostgreSQL-Express-React-NodeJS referred to as PERN, Mongand DB-ExpressJS-AngularJS-NodeJS referred to as MEAN. Currently MEAN artitecture is a staple as well as many developers still choose to work with AngularJS in place of ReactJS. Whichever route you choose be sure to explore other technologies on your journey to becoming a senior developer. Hopefully this guide helps you to get started build dynamically applications. Practice makes a programmer so jump in and start coding. Thank you for reading!

Credit:
https://www.mongodb.com/what-is-mongodb
https://www.freecodecamp.org
https://nodejs.org/en/docs/
https://expressjs.com/en/5x/api.html
https://medium.com/edureka/expressjs-tutorial-795ad6e65ab3
https://expressjs.com/en/4x/api.html#app.METHOD
https://reactjs.org/docs/getting-started.html

Manipulating Data in Sql

Jessa Daggs — Mon, 20 Jul 2020 13:57:02 +0000

SQL is the standard query language for relational database management systems. Relational database management systems or RDBMS maintain existing and incoming and existing data. It is a method used to interact with a database to manipulate its data.

The database system is made up of objects or tables that contain columns and rows. A good practice for retrieving data is to only get what is needed. There are several commands that can be used to execute queries on a database through a SQL server. Commands such as CREATE, INSERT,and SELECT can be utilized to achieve most data manipulation.

CREATE Statement

A CREATE TABLE statement creates a new instance of a table inside of a schema. A schema is an independent container of table objects. It’s an effective object projection tool that increases the amount of security surrounding our data. The columns in the table maintain the attributes and the rows maintain the data for each column.

//create an instance of a database in the schema
CREATE DATABASE company;
//initiate the database
USE company;
//create an instance of a teams table
CREATE TABLE TEAMS (
  //attribute - sql datatype keyword - constraint  
  ID int NOT NULL,
  DEPT varchar(20) NOT NULL,
  // primary key constraint for the id integer
  PRIMARY KEY (id)
);

//create an instance of a members table
CREATE TABLE MEMBERS (
  ID int NOT NULL,
  NAME varchar(20) NOT NULL,
  ROLE varchar(20) NOT NULL,
  PRIMARY KEY (id)

);

// run DESC TEAMS to see table
// this command displays the columns as rows only to describe its identifiers
SQL> DESC TEAMS;
+---------+---------------+------+-----+---------+-------+
| Field   | Type          | Null | Key | Default | Extra |
+---------+---------------+------+-----+---------+-------+
| ID      | int           | NO   | PRI |         |       |
| DEPT    | varchar(20)   | NO   |     |         |       |
+---------+---------------+------+-----+---------+-------+
2 rows in set (0.00 sec)

SQL> DESC MEMBERS;
+---------+---------------+------+-----+---------+-------+
| Field   | Type          | Null | Key | Default | Extra |
+---------+---------------+------+-----+---------+-------+
| ID      | int           | NO   | PRI |         |       |
| NAME    | varchar(20)   | NO   |     |         |       |
| ROLE    | varchar(20)   | NO   |     |         |       |
+---------+---------------+------+-----+---------+-------+
3 rows in set (0.00 sec)

SELECT Statement

The most effective way to fetch data from a table A SELECT statement. The data retrieved will be returned as its own table called a result set. Basic syntax from a select statement consists of the column fields of the data to retrieve and the table to fetch the data FROM.

//run SELECT statement
SQL> SELECT DEPT FROM TEAMS;
+------------+
| DEPT       |
+------------+
|SALES       |
|PR          |
|HR          |
|MANAGEMENT  |
+----+-------+

INSERT Statement

Now it's time to add some team members to the member table. To add new rows use an INSERT INTO statement. IF the desire is to add values for all of the named columns of the table there is no need to specify the column name. Just ensure the order of the values is the same as the way they are listed in the table. Breaking up the statement into multiple lines is okay. Just be sure to end the query with a semicolon.

//run SELECT statement
SQL> INSERT INTO MEMBERS
VALUES (1, 'Tatiyana', 'CEO');

SQL> INSERT INTO MEMBERS
VALUES (2, 'Toni', 'Copywriter');

SQL> INSERT INTO MEMBERS
VALUES (3, 'Mark', 'Editor');

// Use an asterisk in the SELECT statement to view the table with the added values
SQL> SELECT * FROM MEMBERS
+----+----------+-------------+
| ID | NAME     | ROLE        |
+----+----------+-------------+
|  1 | Tatiyana | CEO         |
|  2 | Toni     | Copywriter |
|  3 | Mark     | Editor      |
+----+----------+-------------+

Conclusion

There are many tools that have attempted to replace SQL but it continues its rain. SQLs collaborative nature and updates over the years has yet to be duplicated making it the preferred method to interface data systems. Its popularity along with the ease of learning the language gives SQL my recommendation for a new skill to add to an up and coming developers tool kit. Thanks for reading and as always happy coding!

Credits:
https://www.tutorialspoint.com/sql/index.htm
https://www.sqltutorial.org/
https://www.techonthenet.com/sql/index.php

Stateful and Stateless Components in React

Jessa Daggs — Mon, 13 Jul 2020 05:48:29 +0000

What is a react component?

In React, components are super powerful HTML tags that are divided into independent and reusable parts. They interact with one another handling events and data. They accept inputs and return React elements detailing what the user interface should look like. A component can be used repeatedly in the user interface. They are divided into two categories stateful/class or stateless/functional. A stateful component also referred to as a smart component keeps track of changes to the data in a javascript object called a state. A stateless component also known as a dumb component just renders what is given to it by a javascript object called props without keeping track of changes.

Understanding Stateful components:

A Stateful component has a state and a life-cycle. A component's state is very similar to a locally declared variable in a javascript function. The state containing the properties of the component can only be modified inside of the component. The content of the state is changed by the components event handlers to trigger updates to the user interface. When the state's content changes the component re-renders. A life-cycle is a method that is called when a mount, update, unmount, or error handling phase occurs on the component. Keep in mind the minimal representation of a components state and utilize the render to return for any additional info. This will help to avoid repeating code. Avoid creating stateful components to avoid unnecessary complexity when it is possible.

//a React component declaration
class ExampleComponent extends React.Component {
  constructor(props){
    super(props);
    // the local state of the component
    this.state = {
      //components properties  
      location: 'local state',
    }
  }
  // render properties from the state
  render(){
    return 
      <div>This content is from the {this.state.location}!</div>
  }
}

Understanding Stateless Components:

Unlike a component's state, props give components the ability to receive data from a parent component when the content inside the component needs to be changed. Most components will receive props and render a React element. Props are used to configure the values passed into the component. Props should not change once they are set. Think of them as a javascript functions arguments that on invocation are sent into a function but in this case they are sent to component as attributes.

//a React stateless functional component
const ExampleComponent = (props) => {
  const alertLocation = (event) => {
    alert(`This content is from ${location}`);
  }
  // when the component is instantiated send the div to the html document
  return(
    <div><a href="#" onClick={alertLocation}>Location?</a></div>;
  )
}

Though props don't have a local state they can inherit state and life-cycle features using Hooks. Hooks are special functions that allow the use of state and other "hook into" React features instead of rewriting the component as a class.

//implement the use state method
import React, { useState } from 'react';
// functional component declaration
const ExampleComponent = () => {
  //set a variable to the useState function invocation
  const [location, setLocation] = useState('over there');
}

Conclusion

As a developer it is important to keep components stateless and reusable. Think of the stateful component as the tree and the stateless components as branches or variations of that tree. Reactjs.org says "A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way." Allowing React's declarative nature to take care of the complexity will create more cohesive projects. Explore the documentation and good luck on building your React application! Thank you for reading!

credits:

https://reactjs.org/docs/
https://www.reactenlightenment.com/basic-react-components/6.1.html
https://blog.logrocket.com/the-new-react-lifecycle-methods-in-plain-approachable-language-61a2105859f3/

Getting familiar with Backbone.js

Jessa Daggs — Mon, 06 Jul 2020 12:15:11 +0000

Backbone provides structure that makes developing appilcation's frontend less complicated. As the features or functionality of the app changes the written javascript can become difficult to read, debug, and refactor when necessary. Backbones organizes the data we build, creates models to populate that data, and synchronizes that data to and from the server.

As said on Backbone.org "Its objective is to provide "the minimal set of data-structuring (models and collections) and user interface (views and URLs) while leaving the developer the choice of extensions for enhanced functionality." Frameworks such as Angular and React are more popular at this time but many web applications utilize backbone and can be expected to continue to do so until change is required. Conveniently Backbone is configured with a RESTful API for access to HTTP methods.

Models and Views

The design paradigm implemented by utilizing Backbone.js is called MVP(Model–view–presentation). MVP is a common design pattern when developing an UI. Traditionally, this pattern takes developed program logic and divides it into the four interconnected components. MVC is a pattern that is very popular in javascript because of its ability to separate the data and the user interface while keeping applications synchronized.

Model

The dynamic representation of the coded object containing key/value bindings also referred to as data. Providing data to the view it is the central element of the design pattern. The model works independent of the user interface while managing the logic and data of the application. It gets user input from the controller. When the data is changed, the model triggers an event that updates the controller. Models are used anywhere in the application where data is needed.

View

A view is the presentation of the data that is represented by the model in a certain format. It listens for events from the UI. Handles the interactivity of the web application and the user input. That input is then sent to the model. Views render themselves according to the change events sent from the model or models. They contain no data but build the html to be sent to the document object model or DOM.

// create a collection class or model by extending Backbone.Model
let Default = Backbone.Model.extend({
  // when initialize is called it tells an object to listen to an event on another object
  initialize: function(){
    this.listenTo(this.Model, "change", this.render);
  },


  default: {
    username: '',
    location: ''
  },

  greetUser: function(username){
    //does something
  },

  render: function(){
    //do something
  }
});

//create a new instance
let visitor1 = new Default({
  username: 'SamBot',
  location: 'Jupiter'
})

let default = new Default();

Collection

An ordered set or list of models. Collections allow developers to listen in one place for change that take place on any model that is in the collection. Helper functions are key in manipulating the data in the models that belong to a collection. Backbone.org provides methods including the Underscore.js methods that give developers the ability to manipulate the data.

Presenter

Presenter the flow of the web application's execution is the responsibility of the presenter. When changes are made to the user interface, the presenter interacts with the controller, evaluates the input data and turns it into a command before contacting the Model to potentially return results or a response from the user change via the View.

Conclusion

One major pro of working with BackBone.j is the easy configuration when more than one developer is working on a project simultaneously. Also, later modifications will be simplified due to the separation of concerns allowing developers to test views individually. A disadvantage is that applications built with BackBone.js typically have many interactions between what users use and what they see. Working with BackBone.js will present a learning curve for developers that may have not utilized the framework before. This can be seen as a con but because many organizations utilize its features, so learning it is necessary.

Thank you for reading! Happy Coding!

Credits
https://backbonejs.org/#
https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/
https://www.youtube.com/watch?v=PcTVQyrWSSs
https://en.wikipedia.org/wiki/Backbone.js

The Big-O

Jessa Daggs — Sun, 28 Jun 2020 15:58:23 +0000

Complexity Analysis of Algorithms

Big-O notation (the letter, not the number), also referred to as the order of the function is a big deal when determining how to create a solution to solve a programming problem. It helps us to understand the approximate trade offs or costs of running a particular algorithm.

Big-O notation is used to classify an algorithm by the time it takes to execute that solution and how much space in memory is required in order to do so. As the algorithm grows the run time has potential to as well. Considering the time and space a solution takes will help to provide a great experience for users, teammates, and your future-self. Also, your present self because problem solving is fun!

An algorithm (the code) is the process software engineers implement or tell the computer to solve a particular problem. When determining complexity it is not the time to be optimistic. For efficient algorithms always consider the worst case scenario for the problem and code accordingly.

Case Analysis

The case or scenario can be thought of as the interaction of the user with the algorithm from the interface. In programming the worst-case is actually the best choice. Identifying what could go wrong will decrease the opportunities to have the code fall apart. Minimize the risk. Maximize the optimization. Which means a decrease in time spent re-writing or debugging code. Understanding the best course of action for the worst case scenario goes beyond the size of the problem.

 // in this list we need to find a value
 const arr = [1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 25, 50];

 // uncomment to test
//  let case = 1; // best-case returns 0
//  let case = 7; // avg-case returns 5
//  let case = 50; // worst-case returns ll

 for(let i = 0; i < arr.length; i++){
   if(arr[i] === case){
     return i;
   }
 }

Because the value is found in the first iteration it is a best-case. There is no need to iterate through the entire array. Great, but what if the value isn't the first but close to the center? This would be the average-case. The iteration stops near the center of the array and returns a value increasing the number of steps required. Lastly, worst-case is when the search ends without finding the value or the value is closer to the last index.

Time Complexity In Order Fastest to Slowest

Here we will cover some trade-offs to consider when choosing an execution method based on what needs to be accomplished.

1. Constant Time Complexity: O(1)

It's fast and it stays the same. This will be any algorithm where the size of the input will not have an effect on the time it takes to execute. It is constant. Only one step is required.

Examples: Arrays access, Stack, Queue, and Linked List insertion and deletion

//a function that returns the value at the given index of the array in a message
const constantFunFunc = array, index => `Hi, I'm ${array[index]}!`;
console.log(constantFunFunc(['Rod', 'Tina', 'Jessica', 'Jojo'], 3)); //returns "Hi, I'm Jojo!"

Logarithmic Time Complexity: O(log n)

Reduces the size of the input at a decreasing rate. The runtime of a logarithmic algorithm initially increases but only grows in relation to how many choices are left after narrowing down the values to look through. It can be thought of as the opposite of the Quadratic time complexity.

Examples: Binary Search Tree

// array to be searched by the value 
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 25, 50];
const bSearch = (collection, target) => {
  // set a start to the zeroth index
  let start = 0;
  // set end to the last index the array
  let end = collection.length -1;
  // iterate through the indices
  while(start <= end){
    // set the middle index 
    let middle = Math.floor((start + end) / 2);
    // if value at the middle index is target return true
    if(collection[middle] === target){
      return true;
    // if the value is less than the target re-assign start the the middle +1
    } else if(collection[middle] < target){
      start = middle + 1; 
    } else { 
      // value is greater than the target re-assign end the middle -1
    end = middle - 1;
    }
  }
  // if the value is not in the given collection return false
  return false;
}

console.log(bSearch(array, 25)); //returns true

Linear Time Complexity: O(n)

An algorithm whose growth is directly affected by the size of the input data. The iteration stopping early in the execution would be considered a best-case scenario. The execution time would reduce in that situation but there is potentially the need to be able to access any and all information contained within our data.

Examples: Array iteration

// create a function that takes an array 
const iterator = (arr, target)=>{
  //loop through the array and push the value into a new array if it is equal to the target 
  let yourArray = [];
  for(let i = 0; i < arr.length; i++){
    if(arr[i] === target){
      yourArray.push(arr[i]);
    }
  }
  // return the new array
  return yourArray;
}
const myArray = ['504424.14', '223141.21'];
console.log(iterator(myArray, '504424.14')) //return ['504424.14']

Quadratic Time Complexity: O(n^2)

As the number of elements grows the execution time grows as well. The execution of one algorithm that is lower on the Big-O scale within another one has the potential to be considered quadratic.

Examples: Bubble Sort, Nested for loops


const eats = [['hummus', 'smoothie'], ['crawfish', 'snowball'], ['fries', 'pizza'], ['Neyow's','gumbo']];
//find the first letter in the array of nested arrays

//iterated through the array 
for(let i = 0; i < eats.length; i++){
  //iterate through the array at the index of the outer array
  for(let j = 0; j < eats[i].length; j++){
    // log the first letter in each
   console.log([`${eats[i][j][0]} or ${eats[i][j][1]}`]);
  }
} // returns ['h or s']; ['c or s']; ['f or p']; ['N or g']

Conclusion

Some other time complexities are: Exponential Time O(2^n) when the rate of growth doubles as the input increases. Factorial Time O(n!) when the rate of growth is determined by the number of integers from 0 to n. If you would like a brain teaser see Bogosort.

Thank you for reading. I appreciate your time. Happy Coding and remember efficiency is key!

credits:
https://en.wikipedia.org/wiki/Time_complexity#Table_of_common_time_complexities
https://en.wikipedia.org/wiki/Bogosort
https://www.bigocheatsheet.com/
https://www.jenniferbland.com/time-complexity-analysis-in-javascript/
https://en.wikipedia.org/wiki/Big_O_notation