Forem: Terry Threatt

FizzBuzz for Javascript

Terry Threatt — Sat, 10 Jul 2021 17:49:53 +0000

New developers will surely see this problem show up in technical interviews. FizzBuzz is a classic technical interview questions to find out if you are familiar with solving programming challenges.

FizzBuzz setup:

Create a solution that prints the number 1 through 100. Print "Fizz" for numbers that have a multiple of 3. Print "Fizz" for numbers that have a multiple of 5. Print "FizzBuzz" for numbers that have a multiple of both 3 and 5.

FizzBuzz solution: (There's many ways to solve this problem)

for (let i = 1; i <= 100; i++) {
    // Finding multiples of 3 and 5
    if (i % 3 === 0 && i % 5 === 0) {
      console.log('FizzBuzz');
    } else if (i % 3 === 0) {
      // Finding multiples of 3
      console.log('Fizz');
    } else if (i % 5 === 0) {
      // Finding multiples of 5
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }

5 reasons to use node.js

Terry Threatt — Sun, 04 Jul 2021 19:48:42 +0000

What is Node.js

Node.js is an open-source Javascript run-time. It is used to create server-side APIs, network applications and services. It was designed to build out highly scalable applications with high concurrency.

Less context-switching

Node has made it very easy for frontend developers to create full-stack projects by using prior Javascript experience on the server side. This has been great for teams to re-use codebases and increase productivity.

Node.js is super fast

Node is built on the V8 chrome javascript engine that has yielded amazing performance. The asynchronous non-blocking design makes for a blazing fast experience dealing with lots of concurrent operations.

Real-time applications

Node.js makes it really easy to produce real-time applications such a real-time chats by allowing synchronized connections via websockets and reliable client/server communication.

Event driven

The event driven architecture of Node.js is pattern on observing event behavior with event listeners and responding to events predictively. These is perfect for client-side web applications make use of many meaningful interactions on the interface and providing a great user experience.

Great Ecosystem

Node is supported by the entire Javascript community and has lots of great open-source tooling and NPM packages that make developing with Node a breeze. Node is quickly being adopting in tech stacks of lots of companies and producing great results in performance.

Terry Threatt

How to use control flow in javascript

Terry Threatt — Sun, 27 Jun 2021 20:28:33 +0000

When you are programming in Javascript. The lines of code are executed line by line. In order to create useful programs, we will need to learn to intercept this flow of execution and go another direction or even restart in the same direction.

This is referred to control flow and is made up of a combination of operators, conditionals and/or loops. Let's take a look at how these parts help to control the flow in your Javascript code.

Operators

Operators are tests for the truth or false values of variables.

Userful Operators

operator: == description: equal to

const x = 11
x == 11
// returns true

operator: === description: equal value and type

1 === '1'
// returns false

operator: != description: not equal to

12 != 8
// returns true

operator: < description: less than

6 < 7
// returns true

operator: > description: greater than

7 > 6
// returns true

operator: && description: logical and

(7 > 6) && (12 != 8)
// returns true 

(7 > 6) && (12 == 8)
// returns false

operator: || description: logical or

const y = 5
(7 > 6) || (y > 7)
// returns true 

(y < 4) || (2 == 2)
// returns true

Conditionals

Statements in code that execute and find out the truthiness value and can be identified by the following:

if statement

if(statement == true) {
  console.log("execute this code when true")
}

else statement

if(statement == true) {
  console.log("execute this code true")
} else {
  console.log("execute this code when false")
}

else if statement

const color = "orange"
if(color === "blue") {
  console.log("execute this code when true")
} else if(color === "yellow") {
  console.log("execute this code when true")
} else {
  console.log("execute this code when false")
}

// returns "execute this code when false"

Loops

A loop is a way to execute a block of code several times.

The most common loop is the for loop.

for loop

const fruits = ["apples", "peaches", "plums"]

for(let i = 0; i < fruits.length; i++){
  console.log("I love " + fruits[i])
}

// returns 
I love apples
I love peaches
I love plums

Control flow in action

// Now let's put this all together

const grades = [75, 44, 92, 98]

for (let i = 0; i < grades.length; i++){
 if(grades[i] > 70){
    console.log("congrats, you passed!")
  } else {
    console.log("sorry, you failed!")
  }
}

// returns 
congrats, you passed!
sorry, you failed!
congrats, you passed!
congrats, you passed!

Learn More

Control flow

Ternary operator

Loops

Let's chat about control flow

We learned about flow control in javascript by using conditionals, operators and loops. If you enjoyed this post feel free to leave a comment about your experience working with control flow in your applications.

Happy Coding,
Terry Threatt

What is a relational database?

Terry Threatt — Sun, 20 Jun 2021 22:32:14 +0000

When you develop functional websites and web applications. A major requirement to hold customer data is a persistent data storage.

This will be key to allowing useful interaction and so it is foundational to learn about databases to be a web developer.

What is a database?

A database is storehouse for types of data and is usually a server or computer. A database is developed to model all your data in tables and columns to be easy to read and retrieve way.

What is a relational database?

A relational database is a type of database that consists of data that is relational. The database is structured in a way to create a relationship from one unit of data to another.

What is a relational database management system?

A relational database management systems(RDMS) is software that is used to manage a relational database. This includes creating database administrators and all the functions of managing the data.

What is SQL?

SQL is a structured query language for managing your data in a database management system. This language gives your the power to read and write to a database and create advanced queries to analyze your data in useful ways.

Learn More

Deep dive into Non-relational databases

Popular relational database management systems:

Let's chat about databases

We briefly described a relational database, relational database management systems, and the database query language (SQL). If you enjoyed this post feel free to leave a comment about your experience working with databases.

Happy Coding,
Terry Threatt

Semantic HTML in 5 Minutes

Terry Threatt — Sat, 12 Jun 2021 19:36:11 +0000

What is Semantic HTML

Semantic HTML refers support and accessibility tags introduced to the markup language HTML in the 2008 release of HTML5. These new tags like <details> & <summary> bring about new ways for browsers to identify new elements on a webpage and with more description.

Why Semantic HTML

The need for more descriptive tags were necessary as the internet grew and here's a few important reasons for Semantic HTML:

Accessibility: Tags like <nav> & <article> give more meaningful information for things like screen readers, which allow upwards of 5 million more people with reading disabilities to access web pages.
Advanced Capabilities: Tags like <audio> & <video> bring new ways to add media to web pages.
Specificity: Tags like <header> & <footer> provide more clearer distinction than divs for developers to work with.
ex: <div id="header">Semantic HTML</div>

Converting to Semantic HTML

Let's make this more accessible to get rid of the deeply nested div issue.


<!-- Before -->

<div id="header">
 <div id="section">
   HTML Elements:

   <div id="article">This is an article about HTML elements</div>
 </div>
</div>


<!-- After -->

<header>
 <section>HTML Elements:</section>

 <article>This is an article about HTML elements</article>
</header>

Learn More

Modernizer - Javascript library for detecting Semantic tags on a website.
Visit MDN for a deeper look into Semantic HTML elements.

Let's chat about Semantic HTML

The was a quick intro into Semantic HTML and how you can make your web pages more descriptive and accessible. If you enjoyed this post feel free to leave a comment about your experience working with Semantic HTML or HTML5.

Happy Coding,
Terry Threatt

5 Skills You Need To Become A Developer

Terry Threatt — Sat, 05 Jun 2021 21:35:42 +0000

Before I got my start developing programs. I gained interest in development and quickly wondering what skills would be necessary to be successful. After experience I am able to provide the 5 most important skills needed to become a developer.

Problem solving

The number one skill to cultivate is problem solving. Development is filled with opportunities to solve real-world or business logic with programming tools like languages. This is the practice of recognizing all parts of a problem to develop a creative solution to apply the problem.

Logical thinking

Logical thinking is another important skill to develop. The development of computers and software operates are based in logic. Learning to think in these ways makes it much easier to reason about code and write great code.

Attention to detail

This is a skill that will be most valuable as your a developing code. This will key to understanding any mistakes or missing parts in programs. This is a skill that will be cultivated daily and a little of this skill goes a long ways.

Teamwork

Contrary to prior beliefs, Mostly all production code happens in a team environment, so it will be very valuable if you know how to work on a team. You can succeed by learning to share your progress, ideas and pair-programming with others.

Written and verbal communication

This a skill that is important provide effective communication to coworkers in both technical and non-technical roles. Demonstrating you can explain your ideas, plans, and progress to all stakeholders can be an indicator that your grow into decison-making roles.

Let's chat about skills

The great part is you may have developed these skills in other activities, passions, or careers and you can put them to use right away. If you enjoyed this post feel free to leave a comment about these skills and others that make a good developer.

Happy Coding,
Terry Threatt

Working with Javascript Events

Terry Threatt — Mon, 31 May 2021 02:08:17 +0000

The motivation of the web development is to provide a web experience that provides pages of information and allows a way for users a way to interact with the information. Javascript serves as the backbone of web in making web pages interactive through events.

A javascript event is an action that happens after you interact with elements on a web page like clicking a button or typing into a form.

Javascript is responsible for three parts as it relates to events. The first is recognizing events, manipulating the DOM(document object model), and sending messages to the server.

Event Listeners

The work of adding events to pages may call this eventing and starts with adding an event listener to an element.

The event listener recognizes whenever a user interacts with the attached element.

It consists of an event type and a callback function that is invoked after the event is triggered.

<!- Adding an event listener ->
<button>Shiny Button</button>

// First, we grab our button element.
const shinyButton = document.querySelector("button");

// Next, we attach our event listener with a click event.
shinyButton.addEventListener("click", () => {
   console.log("Clicked!");
});

Event Handler

The event handler is identified by the function in the event listener that handles what to do with an event after the event listener is triggered.


// Here are using a event to alert any key event
window.addEventListener("keydown", event => {
      // We are now inside the event handler
      alert(`You pressed key: ${event.key}`);
});

Event Object

The event is represented by a javascript object that contains helpful properties like the event target and the event type. The event object is passed through the event listener to the event handler.

Eventing in Action

<!- Creating an name input form ->
<form id="form">
  <label>Name: <input type="text"></label>
  <br><br>
  <button type="submit">Submit</button>
</form>

<!- We will display a name here ->
<p id="name"></p>

// Adding the event handler
function onSubmit(event) {
  event.preventDefault();
  name.textContent = `Hi ${event.target.value}!`;
}

// Adding the event listener
const form = document.getElementById('form');
const name = document.getElementById('name');
form.addEventListener('submit', onSubmit);

Let's chat about Events

Javascript events make up an important part of the web and we've covered a few ways of working with events. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with javascript events.

Happy Coding,
Terry Threatt

CSS Flexbox in 5 Minutes

Terry Threatt — Sun, 23 May 2021 19:51:26 +0000

What is CSS Flexbox

CSS Flexbox is a one-dimensional layout module that can be used to make your applications more responsive.

Flexbox allows you to dynamically control alignment, direction, and space of content inside any container.

Lets get started using Flexbox

Fork this code

Starter Code

Display

flexbox requires a parent container to control the layout of all children.

lets use the display property

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
}

Flex-direction

flex-direction establishes a main axis direction for flex items and can be in a row or column.

flex-direction is in row direction by default so lets try a column layout direction

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: column; 
}

now lets get back to row direction

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */ 
}

Justify-content

justify-content will distribute space along the main axis of container for all the content.

justify-content is in flex-start by default

lets try flex-end

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: flex-end;
}

now lets try to add space-around

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}

Responsive Design

flexbox has a major benefit of making it very easy to create responsive layouts for most devices.

lets make this layout responsive with flex-direction and a css media query.

.flex-container {
  padding: 0;
  margin: 0;
  /* add display property for parent container */
  display: flex;
  /* add a flex direction for items */
  flex-direction: row; /* default */
  /* add content space for items */
  justify-content: space-around;
}

/* Lets make this mobile-friendly and easy to view for screens below 767px */
@media (max-width: 767px) {
  .flex-container {
    flex-direction: column;
  }
}

Make It Your Own

Final Code

Let's chat about Flexbox

We went through a quick tutorial on how to implement CSS Flexbox web accessibility and how you can make your web projects more responsive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with flexbox.

Happy Coding,
Terry Threatt

Exploring Web Accessibility: a11y

Terry Threatt — Sun, 16 May 2021 20:28:26 +0000

The web is a great big place with lots of exciting things to explore but did you know that there is a population of people who need accommodations to explore the web for critical tasks or just for entertainment?

According to the Bureau of Internet Accessibility

In the United States, an estimated 25% of adults (61 million people), and 40% age 65 or older, have a disability.

It is our job as web developers to create an accommodating web experience that is inclusive for everyone to benefit from.

What is Web Accessibility

A11y is short for web accessibility. This is the practice of using known techniques to make websites accessible to people with disabilities that include but not limited to vision, hearing, mobility, and cognitive disabilities.

Web accessibility standards are governed by the WCAG and have established the following A11y levels:

A rating: Limited level of web accessibility and does not meet acceptable web accessibility standards.
AA rating: Recommended level of web accessibility.
AAA rating: Excellent level of web accessibility.

Here is a great tool that provides a detailed checklist for web accessibility.

Lets look at some important web accessibility topics to explore:

Semantic HTML

Semantic HTML refers to HTML tags that clearly describe purpose and behavior for optimal web accessibility experiences like <table> || <paragraph> || <form>.

These tags have built-in functionality that is very useful for web accessibility technology like screen readers, unlike the tag <div> which can be very vague to understand for developers, users, and unrecognizable for web accessibility technologies.

This is Semantic HTML in action:


<!- Using semantic HTML it is now easy for a screen reader to understand each element and communicate that element to a user ->

<article>
  <header>
    <h1>Web Accessibility</h1>
    <p>The A11y Mission:</p>
  </header>
  <p>Make the internet fun and useful for everyone!</p>
</article>

ARIA

MDN explains:

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

ARIA gives roles and permissions to give more specificity and context to HTML elements. Screen readers can use this to provide descriptive details about how to interact with these elements.

This is ARIA in action:


<!- ARIA makes the screen reader aware this is a form with a search input to type in ->

<header>
  <h1>Search:</h1>
  <nav role="navigation">
    <form role="search">
      <input type="search" name="search" placeholder="Search" aria-label="Search for something exciting">
    </form>
  </nav>
</header>

<!- Now a screen reader may properly announce to the user to type in the input to search ->

Tab Navigation

Tab navigation is a technique of understanding how keyboard-only and assistive technology devices navigate through tabbable elements on a web page. Making all important elements able to navigate with a Tab Key or the Shift + Tab Keys is a recommended practice.

This is Tab Navigation in action:


<!- Making use of tabIndex attribute helps to make sure this important div is not missed by assistive technology devices ->

<div tabIndex="0">Very Important Info Here!</div>

Color

It also a great practice to avoid really experimental color palettes and combinations that alienate color-blind users like the red/green color scheme (Red/green color blindness is the most common type of color blindness).

See recommended WCAG guidelines for the best color contrast schemes for the best web accessibility experience.

Screen Readers

A Screen Reader is assistive software that parses through web pages and converts text into synthesized speech. Many people who are blind or have visual disabilities use screen readers to read and navigate the web.

It is best to know popular screen readers like ChromeVox, JAWS, and VoiceOver for Mac to design the most accommodating web experiences.

Let's chat about a11y

We explored web accessibility and how you can make your web projects more inclusive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with web accessibility.

Happy Coding,
Terry Threatt

Object Relationships Intro

Terry Threatt — Sun, 09 May 2021 23:06:30 +0000

When you are constructing object-oriented programs in programming. You will run into a need to model your related objects/data and save them to a database in a way that is both useful and expressive.

Understanding object relationships will help you identify the proper connections you need to make when modeling your objects in your code.

These connections make your programs easy to understand for other programmers and make your program very extensible.

Object Relationships

Object relationships are the technique of creating hierarchy, relations, and communication with complex data types in your code. Software like Object Relational Mapping Systems and Relational Database Management Systems make it possible to utilize organized classes of objects in your code to create object relationships.

UML (Unified Model Language) is a great tool to learn to construct object relationships.

Here are 3 important object relationship types:

One to One Relationship

A one-to-one relationship is an association of one object class instance to one single instance of a different class object.

// Example:
Credit Card 
has_one: Credit Card Number 

Credit Card Number 
belongs_to: Credit Card

One to Many Relationship

A one-to-many relationship is an association of one object class instance to many instances of a different class object.

// Example:
Customer
has_many: Orders 

Order
belongs_to: Customer

Many to Many Relationship

A many-to-many relationship is an association of many object class instances to many instances of a different class object.

// Example:
Product 
has_many: Customers

Customer 
has_many: Products

Let's chat about object relationships

We learned some important parts to object relationships and now understand 3 important object relationship types. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with object relationships.

Happy Coding,
Terry Threatt

Javascript Array Crash Course

Terry Threatt — Sat, 01 May 2021 21:40:58 +0000

When we develop programs for people to use in Javascript, We need to take advantage of data structures. These structures hold values of many types including strings, numbers, and objects.

One of the most common data structures that you will come across is the Array data structure. Mastering Arrays will put you in great shape to build useful programs as they are also used to build complex and abstract data structures as well.

The Array data type

Arrays hold many values of any data type. The structure is identified by a sequential list of values that can be accessed through a numbered index.

This helps to make it easy to traverse through this index very easily. Arrays are considered objects in Javascript which means they are called by reference.

// our first array

const arr = ["Nas", 13, {car: "Tesla"}]

// is this an array? 

// isArray() is a helpful method to prove an Array

Array.isArray(arr) // return: true 

// How many elements are in the array? 
// .length will return the element count

console.log(arr.length) // return: 3

Working with Arrays


// Creating Arrays
// There are two ways to create arrays

const arr = [] // Array literal: This is the recommended way
const arr = new Array() // Array constructor


// Creating Array Elements
const primeNumbers = [2, 3, 5, 7, 11]

// .push() - Adds new elements to the end of the array
primeNumbers.push(13)

console.log(primeNumbers) // return: [2, 3, 5, 7, 11, 13]

// Accessing Arrays 

// You can find array values through bracket notation: 
// Arrays a zero-based indexes 

console.log(primeNumbers[0]) // return: 2
console.log(primeNumbers[4]) // return: 11

// Changing Array Elements
// We can update an element with bracket notation

console.log(primeNumbers) // return: [2, 3, 5, 7, 11, 13]
console.log(primeNumbers[0]) // return 2

primeNumbers[0] = 1
console.log(primeNumbers[0]) // return 1
console.log(primeNumbers) // return: [1, 3, 5, 7, 11, 13]


// Deleting Array Elements
// .pop() - removes the last element in array

primeNumbers.pop() // return: 13

console.log(primeNumbers) // return: [1, 3, 5, 7, 11]

Array methods

Here is a list of common array methods

Array.prototype.shift()

Removes the first element from the array

const colors = ["blue", "red"]
colors.shift() // return: red
console.log(colors) // return: ["red"]

Array.prototype.unshift()

Adds an element to the end of the array

const fruits = ["apples", "oranges", "grapes"]
fruits.unshift("bananas") // return: 4
console.log(fruits) // return: ["bananas", "apples", "oranges", "grapes"]

Array.prototype.sort()

Sorts the elements for the array

const nums = [44, 33, 22]
nums.sort()
console.log(nums) // return: [22, 33, 44]

Array.prototype.filter()

Creates a new filtered array

const age = [15, 22, 43]
const legalAge = age.filter(age => age >= 21) 
console.log(legalAge) // return: [22, 43]

Array.prototype.forEach()

Allows you to perform an operation to each element in the array

const sports = ["baseball", "basketball", "football"]
const favSport = sports.forEach(sport => {
  console.log(`My favorite sport is ${sport}.`)
})

// return: My favorite sport is baseball.
// return: My favorite sport is basketball.
// return: My favorite sport is football.

Loops with Arrays


const nums = [ 11, 24, 36, 47, 53, 66] 

function findEven(nums) {
   const evenNums = []

for(let i = 0; i < nums.length; i++){
 if(nums[i] % 2 === 0) {
    evenNums.push(nums[i])
   }
 }

 return evenNums
}

findEven(nums) // return [24, 36, 66]

Let's Chat About Arrays

Arrays are a key data structure to know and I hope this crash course was helpful in showing how to work Arrays. If you enjoyed this post feel free to leave a comment about your thoughts and experiences with Arrays.

Happy Coding,
Terry Threatt

7 Reasons Why You Need To Learn Javascript

Terry Threatt — Sun, 25 Apr 2021 21:18:54 +0000

According to Wikipedia, there are at least 700 programming languages that exist. As developers, we know you have your fair share to pick when working on a particular project.

However, very few modern programming languages are as important in recent development as Javascript.

Here is a brief list of 7 reasons you need to learn Javascript:

Javascript is Sticky

Today, Javascript is the primary leader in web development, So If you need to produce any client-side code. It won't be long before you run into a need for Javascript.

Beginner Friendly

There is no real surprise that Javascript is a first choice language for many newbies after discovering the vast amounts of resources and content for new developers to get started programming.

Full Stack

The Evolution of Javascript has provided a full stack path baked right into the language after the development of NodeJS. NodeJS is a Javascript runtime that empowers Javascript developers with a way of developing server-side code, outside of a browser with a language that you already know and have experience using.

Popular

According to Stack Overflow, Javascript has reigned supreme as the most commonly used programming language for the 8th year in the row. This will probably be the case as the demand for more innovative user interfaces continues from consumers.

Versatility

In addition to being a staple on the front end and back end of the stack with NodeJS. Javascript libraries and frameworks like React Native for mobile development and Electron for desktop have allowed Javascript to go cross-platform.

Great Ecosystem and community

Javascript has a wonderful ecosystem of great developers producing tools and packages to make the developer experience awesome. The Javascript community is filled with lots of developers to connect with and share about the landscape of Javascript.

Great Job Market

The demand for Javascript developers continues to be one of the highest of all languages with Javascript being a big part of many tech stacks for industry-leading employers.

Let's Chat About Javascript

I code primarily in Javascript for my projects because of the versatility and the Javascript ecosystem. If you enjoyed this post feel free to leave a comment about your thoughts and experiences with learning to write Javascript code.

Happy Coding,
Terry Threatt