Forem: Heather

Easy React Project Set-Up

Heather — Tue, 28 Jul 2020 17:04:01 +0000

You know what they say, taking the first step is the key to getting started. Easy as they are, there are a few steps to set up a new project. I put them all in one place so I no longer have to google the individual tasks each time. This post is focused on setting up a project using create-react-app.

Step 1: Create a local React directory

In your terminal run the following commands to use create-react-app, where my-app is the name of your project.

npx create-react-app my-app
code my-app

Step 2: Clean up the create-react-app files

The files created in your new project require some clean up to have a fresh start.

Open App.js and remove code between the header tags
Open index.html and change the name and content as well as the text in title tag
Delete react png files in the public directory
optionally insert your own favicon
Delete everything in App.css

Step 3: Create a Github repository

Click the new repository button in GitHub and select a unique name. You don't need to initialize with a README.md if you used create-react-app
create repository

Step 4: Connect your repository to your local project

Use the instructions Push an existing repository from the command line

git remote add origin 'your_url_name'
git push -u origin master

Step 5: Change Master to Main

While this step is optional, I think it's important. @afrodevgirl has created an excellent resource.

Follow this post to change master to main
https://dev.to/afrodevgirl/replacing-master-with-main-in-github-2fjf

You should now have a blank React canvas to begin developing. Five easy steps to start your React project!

Short Introduction to TypeScript

Heather — Mon, 01 Jun 2020 05:37:00 +0000

TypeScript is an open-source language built upon JavaScript. If you have written code in JavaScript, that code is also TypeScript. The difference being that if you were to copy your JavaScript over into a TypeScript file, the TypeScript type-checker would most likely find that your code isn’t doing what you thought it was.

JavaScript is a flexible programming language and allows variables to be reassigned to different data types which can result in type errors. TypeScript’s type-checker resolves this problem with an additional layer that utilizes a type-system language extension. The type-system language within TypeScript will check that data types have been properly assigned within code.

Ready to learn more about TypeScript? Let’s look at what TypeScript adds to JavaScript, examples of writing TypeScript code, and finish with why programmers choose TypeScript.

Basics of TypeScript

TypeScript is a statically typed language which means types are checked when the code is compiled. When a TypeScript file is initialized a configuration file will exist that defines how strict the type checker should be. Meaning, types in TypeScript are actually optional, but that can lessen the overall value of using TypeScript.

What do I mean when the code is compiled? To run on the browser, at run time, TypeScript is converted to JavaScript with a compiler. The TypeScript compiler or 'tsc' is installed when TypeScript is installed via npm.

npm install --global typescript

Another feature of TypeScript is type inference which means the language will infer what type you are assigning to a variable without being explicit. For example, in the snippet below, TypeScript will infer that myName is of the type ‘string’.

const myName = ‘Heather’;

How to Write TypeScript

As stated above, TypeScript is a type-system language meaning that there are rules as to how to construct variables, functions, etc. The examples below will cover a few of the types in TypeScript but not all.

Basic Types

TypeScript has basic types similar to primitive data types in JavaScript. The following examples look at Boolean, Number, and String types.

To declare and initialize a variable

use a let or const statement
variable name
colon
type
assign a value.

let isDog: boolean = true; 
let age: number = 8;
let name: string = “Captain”;

An interface names types that focus on the shape of a value. In this example we are requiring the passed in argument for the function ‘getName’ to have a property ‘name’.

interface hasName {
    name: string;
}

function getName(dogObj: hasName) {
    console.log(dogObj.name);
}

let myDog = { name: “Captain”};
getName(myDog); // prints “Captain”

Functions in TypeScript

When creating a function in TypeScript parameters can be given a type as well as the return value of the function.

let dogOwner = function(owner: string, dog: string) => string = function(
    owner: string,
    dog: string,
): string {
    return `{owner} belongs to {dog}`;
}

Why Programmers Choose TypeScript

While TypeScript may seem tedious at first, there are obvious advantages.

Self-documenting: By using TypeScript you are essentially commenting your code to let other programmers know what the code is expecting.
Tooling: IntelliSense helps with code completion and TypeScript improves this tool by defining types as you go.
Debugging: As mentioned at the beginning of this post, JavaScript can be easily written with type errors which are not found until run time and a programmer has to figure out what is causing the problem. With TypeScript you'll know right away if an expected argument is the wrong type.

Cleaning up documentation, improving coding tools, and speeding up debugging should encourage any programmer to checkout TypeScript. As the language grows in popularity, it's worth having basic knowledge of the TypeScript language.

4 Tips for Web Accessibility

Heather — Sat, 23 May 2020 21:24:01 +0000

Driving a car, walking a flight of stairs, or watching a movie are activities people without a disability do without a second thought. These activities can present barriers to people living with a disability but can be overcome when steps are taken to provide accessibility. Similarly, the worldwide web needs to provide information that is accessible to all users, regardless of their ability to see, read, hear, or interact with a machine.

Web accessibility is a practice focused on ensuring information from a website is accessible by all users. A barrier to information can be caused by a disability, physical or situational, or it may be socio-economic meaning that a user has limited bandwidth.

Web accessibility should be considered by developers throughout the planning, design, and implementation of an application because everyone deserves to have access to information that is largely held on the worldwide web.

In this post I’ll cover four ways to make a website more accessible. To illustrate these four tips I'll build a form to register dogs in a neighborhood. This form will incorporate each tip to create a website available for all users.

1. Clear Layout

Helpful for: screen readers

People with visual ability can gain context by looking at a website and determining the order in which information is meant to be delivered. For users who have a visual disability or no sight use screen readers to interpret information. Screen readers describe the text and user-interface options to a user.

If the DOM elements are not placed in an order that matches visual components, it can create a barrier for the user. In addition to the order, labels and headers should properly describe the content.

Here we have our form for the neighborhood dog registry website.

The HTML looks like this

The text starts at the top with an H1 tag that indicates a title followed by an h2 tag. Every input has a label describing the input and an input tag describing what type of input is expected.

2. Text Alternative

Helpful for: users with partial sight, color blindness, older users

Interacting with a website involves text, images, buttons, and inputs. These interactions may use features such as color to indicate an action or missing information. For example if the input is required, the input may be highlighted red. For a user with partial sight or color blindness, this distinction might not be obvious. This problem can be solved with a text alternative.

Adding a text indicator such as the keyword ‘required’ or an icon can let users know the input is required. Images should also incorporate text alternatives to describe the image to users.

Users without a vision disability may be able to garner that the red box means it's required. For others, it's important that we have a text alternative.

In our HTML we use the keyword 'required' which gives us a pop-up that states the input is required as well as prevents the form from being submitted. A screen reader will identify the input as required and translate to the user.

3. Non-Text Color Contrast

Helpful for: users with partial sight, older users, color blindness

Brands put a lot of energy into making sure their product or service is unique and the color is a large part of marketing. If color contrast is overlooked in this process, a website can leave users with a visual disability unable to distinguish content on the page.

The contrast ratio is the contrast in brightness between two colors. The minimum contrast a website should use is 4.5:1. For reference, white text on a white background has a ratio of 1:1. You can use a contrast checker like the one provided by webaim.com. Exceptions to the best practice for color contrast are large text (over 18pt), logotypes, or incidental text that isn't needed for context.

A color contrast checker will tell us what ratio our color contrast is. Now we can apply this color to our button and h2 header.

4. Keyboard Options

Helpful for: people with no vision, speech input software, scanning software, mobility impairments

Without planning, a website can be created to only interact with mouse events meaning a user has to click on buttons to perform actions. Clicking, selecting, and moving items on the screen should be operable through a keyboard or an alternate keyboard allowing for hands-free interaction. A user should also be able to traverse DOM elements by using the up and down arrows on a keyboard.

Using jQuery we can use both a click function and a keypress function to allow a user to submit a form by clicking the button or pressing enter.

When we click the button or press enter, we get the corresponding message in the console.

Building an Accessible Website

Our end form now has

Clear structure, with descriptive labels and headings
Inputs with text alternatives stating information is required
Color contrast with 4:5:1 ratio
The ability to press enter to submit the form

This post only covered four ways that a website can be more accessible meaning there are numerous ways to make sure a website is created with all users in mind. It can be easy to forget to incorporate these practices when you are not living with a disability but the world wide web should not create any barriers to knowledge.

If you have any suggestions on how to improve accessibility on a website, drop them in the comments!

Resources Used
Web accessibility - wikipedia.org
Contrast Checker - webaim.org
W3.org

How to make a query with GraphQL

Heather — Sun, 17 May 2020 20:28:55 +0000

One of the most important skills you can learn as a developer is that you will never know everything. For me, it has been an immense relief and a realization that sparks excitement. You can never know everything because there is always something new to learn.

I’ve been exploring different frameworks, services, and languages and I’ve come across discussions from other developers involving GraphQL. GraphQL is a querying language that exists between a client and a data source that receives requests from the client. In this post, I’ll dive into what exactly GraphQL is, how it compares to REST, terms to know and show an example of making a query.

What is GraphQL?

GraphQL is an open-source query language created by Facebook for APIs that can read or change data and alert a client to real-time updates. Known most widely for its structure, when you ask for data from the database, you tell GraphQL explicitly how to structure the data. Your query is then returned in the same format. This will make more sense when we get into the code examples.

From reading the docs, one can gather that the creators of GraphQL are not attached to a specific use case or designation of purpose for GraphQL. They are very much open to developers collaborating and enhancing GraphQL.

GraphQL consists of a type system, query language and execution semantics, static validation, and type introspection. We’ll explore terms to know more in-depth below.

How does GraphQL compare to REST?

REST is the standard for designing APIs at the moment. For an API or web services to be considered RESTful they need to apply the REST protocol, a client-server architecture for developing applications to be accessed over a network. Web services that use HTTP CRUD operations such as POST, GET, PUT, and DELETE are considered RESTful.

When you want to query with a REST API you make a request to a specific endpoint. Queries can become complicated when you want to return information from many different endpoints all at once. GraphQL, on the other hand, has a single server that allows all requests to be fulfilled allowing for more flexible data queries. How to GraphQL has a great visual example comparing REST and GraphQL.

GraphQL Terms to Know

I don’t cover all GraphQL terms below, just the ones we will encounter in the query example at the end of this post.

Schema: describes to the client what information is available
Resolver: client-side functions to get a response from GraphQL
Type: defines data types used in GraphQL implementation
Field: returns a specified type of data
Query: root level type (defined above) similar to GET request using REST
Argument: query parameter to get specific data

Make a Query with GraphQL

Say we have a database that stores information about dogs in our neighborhood. The database has a dog table that looks like this:

The application we're programming should be able to pull information out about each dog. We can use a GraphQL query to get this information.

The first step is to create a schema. The schema will define our types and tell the client what information the query can access. Often, your GraphQL schema will look similar to your database schema, but you can make some customizations.

We create a type with the keyword type and fields that have a specific data type.

type Dog {
  id: String
  name: String
  age: Int
  favTreat: String
}

We also need to create a Query type that is an entry point to our type system.

You'll notice we've given an argument to the query (id: String). This means we will pass in a specific id and get the dog who matches with that id.

type Query {
  dog(id: String): Dog
}

Now we can use a query to get information. We specify all the fields that we want the query to return, name, age, and favTreat.

query getDog {
  dog(id: ${id}) {
    name
    age
    favTreat
  }
}

Now we can use the query 'getDog' with a specific id. We don't have to ask for everything - name, age, and favTreat - but in this example we want all the information.

Notice how our return is structured the same as our query, pretty neat!

query getDog {
  dog(id: "1") {
    name
    age
    favTreat
  }
}

// returns

{
  "dog": {
    "name": "Chewy"
    "age": 4
    "favTreat": "Bacon"
  }
}

Programming with GraphQL

I've only just started playing around with GraphQL but I'm already enjoying the flexibility it provides when asking for data. I'm going to continue learning more about GraphQL especially as it seems to be a technology that will be beneficial to have going forward.

How to Differentiate UX and UI

Heather — Sat, 09 May 2020 00:12:52 +0000

I’m in the last segment of my immersive software engineering boot camp in which the next step is to enter the job hunt. Entering the program, I had no comprehension of the skills that I would be exiting with. To be honest, I knew almost nothing about computer science or what software engineers even did.

I like to point out that I thought maybe someday (throughout the span of my career) it might be cool to learn everything that is presented in all six learning modules on freecodecamp.org. Well, my program covered all of them.

That being said, I’ve taken in a lot of information and explored many facets of development. Now that I’m closer to applying to jobs I’m exploring what type of position I might be most interested in. There are the obvious distinctions between front-end and back-end, but there also seem to be more specific titles as well.

A frequent title I see is UI developer, UX designer, or some combination of the two. Not knowing exactly what either UX or UI is I decided to parse them out. In this post, I’ll define what UX and UI are, how they differ, and how they work together.

User Experience - UX

User experience, or UX, is a design technique that focuses on a user's feelings during and after an interaction with a product. The emphasis here is on feel. A UX designer puts themself in a user’s shoes when thinking about how a product should work. These questions can range from asking, ‘how does the user feel?’ to ‘how easy is it to do blank?’.

The UX designer does not focus on the look of a product but is empathic to the user. It is common for a UX designer to not be involved with any coding. Their work may be done surveying potential customers and analyzing data.

Common UX job descriptions:

Interpret data to create solutions
Tell a story focused on end-user
Use design research methods
Define and clarify best practices
Plan and architect

User Interface - UI

User interface, or UI, is all about how a product looks and functions. There are many types of UI and the one I will focus on in this post is graphical user interface.

UI developers are often creative types. They think through how buttons and user inputs should interact as well as adhering to style guides via typography and color schemes. A UI developer considers how a user will interact with a product and work to make the product intuitive and logical

Common UI job descriptions:

Execute visual design concepts
Adhere to style guides
Experience with HTML, CSS
Attention to detail
Build custom tools

Separating UX and UI

As we can see from the above descriptions, UX and UI are different parts of the design process. UX happens before any tangible product and focuses on the user. UI, on the other hand, is an iterative process that takes place as a product is built. A UI developer's main concern is how a product looks.

I like to think of the user story’s role in this process. When we write a user story we describe what a user can do. The user experience can be determined as we walk through a product and identify user actions. The user story can then go on to define what buttons should exist and where components should live for intuitive use of the product.

While user experience and user interface are unique processes they are most certainly intertwined. UX designers create wireframes or prototypes then UI developers create an aesthetically pleasing covering. One can not excel without the other.

Choosing Between UX and UI

After defining UX and UI I think both roles interest me. I enjoy being creative and crafting how an application will look. I'm equally concerned with the ease of use and if a user likes interacting with my application. I think I will continue to strengthen my HTML and CSS skills in the chance that I decide to pursue a UI specific role.

Resources Used
What are the Similarities & Differences Between UI Design & UX Design?
The Difference Between UX And UI Design - A Layman’s Guide
Wikipedia

Learn the Basics of Websocket with Me

Heather — Sun, 03 May 2020 21:02:44 +0000

I recently worked on two applications where my team wanted to implement an instant message feature allowing users to communicate in real-time. None of us had worked with WebSockets before so we decided it would be a great learning opportunity. Now that I’ve finished those projects I’m doing that thing where you go back and learn the basics of the tool you were using. While I was creating a chat feature with WebSockets, I definitely didn’t understand what magic was happening so I’m excited to explore in this blog post.

In this post, I’ll cover a basic review and history of how data is transferred over the web to create the webpage we see. Then I’ll dive into what WebSockets are and finish up with a demo I reproduced to help cement my knowledge.

Reviewing Client-Server Connections

As a user, when I go to a webpage I expect to see information and links I can click on or inputs where I can enter information. I move from page to page or receive new information based on an action that I took. Everything that is happening on the webpage is a result of the user doing something. Making a request and receiving a response is the basic setup of how a client communicates with a server. The server is reacting to a request from the client and historically, the client has always had to initiate the process.

HTTP, or Hypertext Transfer Protocol, is the protocol for transferring data through the client/server request and response model. HTTP can only allow a client to initiate a request to the server, a server cannot send information to the client without being asked.

In relation to how information shows up on a webpage, if we want to display data from the server we need to ask for it, then the server sends it to the client, and the client has to show the new data by accepting the information and refreshing the page. This back and forth of requests and responses can slow down an application. So what if there was an open connection between the client and server to continuously send and receive data? Websockets achieve this functionality for us.

Defining Websockets

Real-time web is when a client receives data as soon as it’s published and doesn’t need an update to get that response. Websocket is a protocol that keeps the connection between client and server open for persistent data exchange. WebSockets are a fairly new technology but quickly becoming an industry standard.

I mentioned earlier that I had used WebSockets for an instant messaging feature. Websocket data transfer is great for short messages, news updates, etc. really any kind of data that changes frequently. That being said, it’s important to note that WebSockets will not replace HTTP in your server rather it enhances HTTP protocol.

To create the WebSockets bi-directional connection between client and server, the client must first initiate a request to the server with what is known as a WebSocket handshake request. This handshake request contains an upgrade WebSocket header telling the server to switch to bi-directional protocol.

In each project, I used a different library for writing features that utilize WebSockets. The services my team used were Socket.io and Pusher. I didn’t have a preference between the two as I mentioned before I wasn’t totally sure of what was happening under the hood. I just knew they were making neat things happen in my application. As I continue building applications, I’ll be interested to further explore the capabilities of both.

Build a Websocket Connection

I followed a demo from ably.io that me to understand the process of establishing a WebSocket connection.

The first step is to construct a WebSocket using the new WebSocket() method. This demo uses (websocket.org)[websocket.org] to host a WebSocket Echo server.

  // create a new WebSocket
  const socket = new this.WebSocket('ws://echo.websocket.org');

Next we use onopen to open the WebSocket connection

  // show a connected message when the WebSocket is opened
  socket.onopen = function(event) {
    socketStatus.innerHTML = 'Connected to: ' + event.currentTarget.url;
    socketStatus.className = 'open';
  }

To send a message to the server we use send and add it to our chat box for other users to see.

  socket.send(message);
  // add message to list of messages
  console.log('sent from client: ' + message);
  messagesList.innerHTML += '<li class="sent"><span>Sent:</span>' + message + '</li>';

Lastly, we need to tell the server to fire an event when the message is received with onmessage.

  socket.onmessage = function(event) {
    const message = event.data;
    console.log('received: ' + message);
  }

On the page it looks like this:

Resources Used
What are WebSockets? from pusher.com
A Beginner's Guide to WebSockets from freeCodeCamp
WebSockets from ably.io

mySQL vs MongoDB - What's the Difference?

Heather — Sun, 05 Apr 2020 18:46:54 +0000

In conversation, mySQL and MongoDB are often referred to as databases. While calling them a database is not wrong, the titles actually point to software that creates databases. A database management system, DBMS, is an interface that handles data from an end-user or application.

In this post, we’ll discuss the key differences between mySQL and MongoDB as well as point out how they are similar. We’ll also look at making a query in both systems during our comparison. Finally, we’ll go over some questions to ask when deciding which system is the best fit for your application or organization.

Checking Out the Differences

There are many differences between mySQL and MongoDB, but the overarching distinction is the use of SQL. SQL, or structured query language, is a declarative programming language. We call mySQL a relational database management system because it uses SQL. SQL maintains data in the form of tables with rows and columns. The row in a table will hold values that are organized by columns which tell the row what specific type of information it holds.

MongoDB, on the other hand, is a NoSQL database management system. NoSQL stands for not only SQL. This means that MongoDB doesn’t use tables to store data, but rather it is a document-oriented database. A MongoDB database that uses NoSQL will look more like an object that contains key-value pairs.

Choosing whether a SQL or NoSQL database is better can only be done subjectively based on the needs of your application. A SQL database management system like mySQL is structured specifically and organizes data rigidly. For an application storing bank transactions, this type of organization is critical. As a NoSQL database management system, MongoDB offers more flexibility and can be thought of as a folder that holds many files. These files can have a mixture of information that doesn’t need to be specifically organized.

Similarities Between Systems

When storing data, it makes sense that mySQL and MongoDB would do some of the same tasks. Each will need a way to add, remove, and change data as well as access data to perform an action.

Overall Organization

mySQL: Tables
MongoDB: Collection

Linking Information

mySQL: Primary key
MongoDB: _id

How to Store Data

mySQL: Row
MongoDB: BSON document

Combine Data

mySQL: Join
MongoDB: Embed/Link

Perform an Action on Stored Data

mySQL: Group by
MongoDB: Aggregation

Making a Query

Earlier we discussed a major difference between mySQL and MongoDB which is the use of the SQL language. When we look at the two styles of making a query, you will notice that mySQL looks like plain English. The use of means we don’t have to describe the control flow, it knows what to do. In contrast, MongoDB looks more like a JavaScript with the use of dot notation and methods.

Here are some basic query commands to demonstrate the difference between SQL and NoSQL:

MySQL

To start:

mysql -uroot

Create database:

CREATE DATABASE database name

Create table:

CREATE TABLE table name

Add:

INSERT INTO table name (data) VALUES

Show all tables:

SHOW TABLES

Describe how a table is organized:

DESCRIBE table name

List what’s inside a table:

SELECT * FROM table name

In MySQL we create a database and then we create tables to hold the data. When we insert data, the values need to match our column value type.

MongoDB

To start:

mongo

Create a database:

use Database_Name

Create a collection:

db.createCollection(collectionName)

Add a value:

db.collectionName.insertOne( { …. Data key-value pair })

Show a collection:

db.collectionName.find.pretty( )

In MongoDB we create a database and then we create a collection to store data. We create the key-value pair when we insert data, no need to have a specific type of information.

mySQL or MongoDB? Questions to Ask

Now that you have an idea of how mySQL and MongoDB function you can start to determine which database management system is the right choice for your application or organization. The differences between the two will cause you to ask yourself a few questions.

1. How big is your data and how is it structured?

The volume of your data will affect how quickly you are able to access information and your ability to maintain it. As a document-oriented database, MongoDB allows you to store data in one place without defining types of information. This is beneficial for large, unstructured data. If you have very specific data, organized in a certain way, mySQL will provide a structured database.

2. Is your data unchanging or are you making frequent updates?

If your data is consistent and unchanging a relational database like mySQL helps keep information clearly defined. Document-based databases like MongoDB allow more flexibility when it comes to altering data.

In the end, there is no best choice, there’s only a better choice when it comes to the specific needs of your database.

Resources Used

Comparing MongoDB with MySQL
SQL vs. NoSQL Databases: What’s the Difference?
MySQL vs MongoDB

How to Render a List with React

Heather — Mon, 30 Mar 2020 00:18:47 +0000

React is a javascript library used to design the user interface on the front-end of an application. Just like any library there are unique processes for using the language. One such process is rendering a list. Developers interact with lists frequently whether it’s a list of users, items to add to a table, or any kind of data.

In this post we’ll discuss how React renders html to the page, I’ll show some examples of how to render a list in React, and we’ll cover the importance of using unique identifiers.

React Rendering Basics

When we are looking at an application what we see is referred to as the DOM, or document object model. To get the data we want to display on the DOM we use a render method. The render method takes data and returns what will be displayed on the DOM. React is built from elements that are updated with React DOM.

Here's how you would use ReactDOM.render( ).

React has an ideology when it comes to rendering the DOM. In React, updates are meant to happen efficiently and only when necessary. To accomplish this, Reach utilizes what’s known as the virtual DOM. The virtual DOM is a concept that there is a representation of the UI stored in memory where changes can be made temporarily before rendering the real DOM. When a change is made to update the DOM in react, the virtual DOM changes first. Then the virtual DOM compares itself to the previous version held in memory. React will check to see what objects have changed. Finally, those objects change on the real DOM and those objects only.

Think of the virtual DOM as a blueprint that makes for quick updating. Understanding this concept will help us later when we discuss unique attributes as they pertain to rendering a list in React.

How to Render a List in React

When we want to show a list of items in our application they will have the same formatting. If the format of an element can be repeated, then we should create a dynamic way to render it to the page. In JavaScript when we want to repeat an action, we use loops. To render a list in React we can use a higher-order function to iterate over data and display it on the page.

The first file contains our data which is an array of objects.

In another file, we have a Character component where we create a CharacterList component. In that component, we want to access the objects inside of our roseFamily array. To accomplish that we use the array.map method and set a property of character to each object. We also create a key property set to the id property inside each object.

Inside of our CharacterList file, we determine what data will be displayed for each element of the list.

Using Keys

Using React, if you render a list to the page, you may encounter a warning:

'Each child in a list should have a unique "key" prop'

This warning is pointing to the fact that your elements do not have a key property that is assigned to a unique value. Having a key property is important due to the way React renders Html to the page. Previously in this post, I covered how React renders an element if and only if they change. When we render a list to the page, React stores information about each item. Then if we make a change to the list such as adding or removing, React will update the list accordingly. To update the list, React is given a key as a unique identifier, to check if it exists or not and takes action based on that data.

Having a key property on your list allows React to render the list quickly and efficiently. You can use any unique identifier such as an id property or something like the last name if you know there won’t be any duplicates. Adding a key may require you to revisit your data and include an identifier. Keep in mind that 'key' is a special prop in React and cannot be accessed via this.props.key.

Things to Remember

React is known for its ability to build complex user interfaces with components that can change often. Using the virtual DOM to compare changes so that only items that have been modified are changed on the real DOM is one of the reasons for a smooth user interface. For this rendering function to work with lists, it’s important to include a key that is a unique identifier.

Rendering a list in React is easy with common JavaScript knowledge of higher-order functions.

Resources Used

Rendering an Element into the DOM - React Docs
Lists and Keys - React Docs

What are ES6 Classes?

Heather — Sun, 22 Mar 2020 20:55:46 +0000

The great thing about programming is that the craft is ever-evolving. There is always something new to learn and ways to improve code. JavaScript also evolves as a language, introducing features that upgrade the language or fix deficiencies. This post will explore one such feature, ES6 Classes.

What is ECMAScript 6?

ECMAScript 6, also known as ES6 is version 6 of the ECMA Script programming language. It provides new features for improving the language and writing cleaner code. Some aspects of ES6 are convention such as the variables let and const, while features like arrow functions have been widely adopted but aren't always the norm. Other parts of ES6 are less explored but are worth diving into.

What is Object-Oriented Programming?

A very brief definition of object-oriented programming (OOP) is that it is programming using self-contained code to create applications. TechTarget.com describes OOP as "a programming language model that organizes software design around data, or objects, rather than functions and logic."

JavaScript is an object-oriented programming language and builds applications with objects. Objects allow us to use inheritance, polymorphism, and encapsulation.

What is a class?

In JavaScript, if we want to create objects that have the same properties and methods we use constructor functions. A constructor function acts as a recipe to build objects over and over.

In other languages, the recipe for creating similar objects is called a class. “In object-oriented programming, a class is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).”

In other words, a class is a data type that must be defined before an object is created.

Does Javascript have class?

Javascript doesn’t have classes, as mentioned above, JavaScript uses constructor functions to repeat code to create objects. With ES6 JavaScript has attempted to create something similar to classes at least by the way it looks and acts.

While developers are quick to point out that ES6 classes are syntactic sugar, the javascript.info website disputes this claim. They argue classes are functions 'labeled' by a special internal property making the ES6 class more than a syntactic feature.

ES6 class is an object constructor function that uses the keyword class to declare the function and the constructor keyword used inside the function to add a new property. Methods are also included in the code body and do not use the function keyword.

ES6 Class Implementation

We use the ES6 Class instantiation patter much like the pseudoclassical pattern. Let's take a look at how we would create an ES6 class.

The class keyword creates a new function that we name Pet. It's convention to use capital letters for constructor function declarations. Inside of that function is our constructor. We have two properties name and nickname and an eat method. Later on when we want to create a new instance of our object, we use the ‘new’ keyword.

Here we set myPet to a new instance of Pet passing it a name and nickname argument. We can call eat passing in trash as an argument and receive the expected console log value back.

Using ES6 Classes

ES6 Classes were introduced as an instantiation pattern for constructor functions and made to look and work like a class that is found in other programming languages. While not required, using ES6 features make for clean and readable code. It also allows you to use other enhancements only available when using ES6.

My opinion is that programmers who write in JavaScript will benefit from learning to implement in ES6 in their code and will be better prepared when the next update is released.

Resources for Research
Defining Classes - MDN
Class-based vs. prototype-based languages - MDN
object-oriented programming (OOP)

Beginners Guide: Hash Tables

Heather — Mon, 16 Mar 2020 01:41:45 +0000

As humans, we associate two concepts, ideas, or values with a definition. For example, Heather is a name. I can then say, 'my name is Heather'. Another way to write this association might be Name: Heather.

In programming, we call this a key-value pair. Key values pairs are used when we want to store a value and then reference that value by a key name that we give it.

In JavaScript we use objects to store key-value pairs. To make an object in JavaScript we can simply use curly braces {}. Objects were written into JavaScript for use. But how were they created? The hash table data structure is the foundation or blueprint for JavaScript objects.

Hash Table Data Structures

A hash table is a data structure that associates values with a label(what we refer to as a key in objects). These label value pairs are stored in a table of a predetermined length. The storage table is an array that contains another storage element at each index. This element is referred to as a bucket.

This post will show how you can use JavaScript ES6 Map object as the bucket storage container. Before we can talk about storing label value pairs in a bucket, we need to go over how they are assigned to a numerical index.

Hashing Functions

To store a value in our hash table we need to place it at an index in our storage array. The number that determines the index will come from hashing our label using a hashing function. A hashing function takes two inputs, any data type, and a number. The number is the length of our hash table as the function can only return numbers as long as the length of the array.

Do not worry about needing to know how to create a hash function. This Software Engineering Stack Exchange discusses various hashing functions and their desirability. A preferred hashing function will provide speed and limit the possibility of collisions.

There is a possibility of getting two keys that hash to the same index which is called a collision. Collisions can slow down your lookup methods and should be avoided.

Example of a hashing function:

const hash = (key, size) => {
  let hashedKey = 0;

  for(let i = 0; i < key.length; i++){
    hashedKey = key.charCodeAt(i);
  }

  return hashedKey % size;
}

Creating a Hash Table with Map

Let's walk through the steps of implementing a hash table.

class HashTable {
  constructor() {
    this.size = 20;
    this.storage = Array(this.size);

    for(let i = 0; i < this.storage.length; i++){
      this.storage[i] = new Map();
    }

  }

Here we create a hash table using ES6 instantiation pattern. Notice this.size is hardcoded as hash tables have a pre-determined length. We set our storage array this.storage to the size property. We then loop through our storage array and create a bucket at each index which will be a new instance of Map.

Map object was introduced with ES6 and iterates its elements in insertion order. Map also stores key value pairs.

insert(key, value) {
      let idx = hash(key, this.size);
      this.storage[idx].set(key, value);
  }

  remove(key) {
    let idx = hash(key, this.size);
    let deleteKey = this.storage[idx].delete(key);
    this.storage[idx].delete(key);
    return deleteKey;
  }

  search(key) {
    let idx = hash(key, this.size);
    return this.storage[idx].get(key);
  }

Hash tables have three main methods, insert, remove, and search. Our hash function is used for all three methods. This is because when we insert a key-value pair we need a number and when we give a hash table a key to look up or delete it needs to hash the key and use the number to find the value. Notice set, get, and delete in our implementation code, they are built-in methods of the Map object.

Hash Table in Action

We create a new hash table called nolaFoodieBucketList and assign a label of food items to try to a value of places to have them.

When we log the hash table we can see all the label-value pairs have gone to various buckets. We can also see collisions at bucket 1.

When we search for 'hurricane' we receive 'Pat O'Brien's' back, even though there were multiple label-value pairs at bucket 1.

Time Complexity

Hash tables are a favored data structure because on average they provide a time complexity of constant time for insertion, deletion, and search. Hash tables don't need to look through every bucket for a value because it is associated with a key. All the hash table will need is the key to directly find its value. The time complexity of constant time is average due to the possibility of multiples key-value pairs hashing to the same bucket.

Time complexity makes hash tables a preferred choice for data structure when code requires a fast run time to search through data.

Research Resources

@beiatrix YouTube channel

Basics of Hash Tables