DEV Community: DevCronin

LEVEL UP with JavaScript! LVL 8

DevCronin — Wed, 29 Sep 2021 18:38:31 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 8 will cover:

Accessing Multi-Dimensional Arrays With Indexes
Manipulating Arrays With Push()
Manipulating Arrays with Pop()
Manipulating Arrays With Shift()
Manipulating Arrays With Unshift()

Accessing Multi-Dimensional Arrays With Indexes

Multi-dimensional arrays can be referred to as an array of arrays.

Each set of brackets is a level where the outermost set of brackets are the first level.


let diceArray = [ 
  [18,5,1], 
  [6,10,20],
  [2,7,15], 
];

diceArray[1];

[6,10,20]

diceArray[1][1];

10

Manipulating Arrays With Push()

The push method adds items to the end of an array.


let diceRoll = ["Roll D6", 4,5,2,6];

diceRoll.push(1,5);

console.log(diceRoll);

["Roll D6", 4,5,2,6,1,5]

Manipulating Arrays with Pop()

Pop removes the last item from an array.


let moonBeam = [8,5,10];

let firstEnemy = moonBeam.pop();

console.log(firstEnemy);

10

console.log(moonBeam);

[8,5]

Manipulating Arrays with shift()

Shift removes an item from the beginning of an array.


let moonBeam = [8,5,10];

let firstEnemy = moonBeam.shift();

console.log(firstEnemy);

8

console.log(moonBeam);

[5,10]

Manipulating Arrays With Unshift()

The unshift method adds items to the beginning of an array.


let inventory = ["cloak", "magic ring", "long sword"];

inventory.unshift("gold coins");

console.log(inventory);

["gold coins", "cloak", "magic ring", "long sword"]

Thank you for reading my blog! This is the eighth of my series on JavaScript so if you would like to read more, please follow!

LEVEL UP with JavaScript! LVL 7

DevCronin — Sun, 19 Sep 2021 20:22:55 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 7 will cover:

Store Multiple Values in One Variable Using JavaScript Arrays
Nest One Array Within Another Array
Access Array Data With Indexes
Modify Array Data

Store Multiple Values in One Variable Using JavaScript Arrays

Multiple values can be stored together by enclosing them with brackets [].
These can be any combination of strings and/or numbers.


let myArr = ["Natural", 20];

Nest One Array Within Another Array

Nesting arrays within another array is also possible by using brackets inside of brackets.
This is referred to as multi-dimensional array.


let multiDimensionalArray = [
    ["Hit points", 30], 
    ["Damage", 15]
];

Access Array Data With Indexes

Indexes are a way to reference and then access data inside of an array.
They use brackets and specify an entry in an array.
Arrays use Zero-based indexing (starts the count from zero).


let diceArray = [2,5,6,4,1,1];

diceArray[3];

// 4

Modify Array Data

The entries of arrays are able to be changed, and this is referred to as mutable.


let diceArray = [2,10,8,7];

diceArray[0] = 4;

diceArray[0];

// 4

// Now the 2 in our array is 4

Thank you for reading my blog! This is the seventh of my series on JavaScript so if you would like to read more, please follow!

LEVEL UP with JavaScript! LVL 6

DevCronin — Sat, 11 Sep 2021 15:28:32 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 6 will cover:

Use Bracket Notation to Find the Nth Character in a String
Use Bracket Notation to Find the Last Character in a String
Use Bracket Notation to Find the Nth-to-Last Character in a String

Use Bracket Notation to Find the Nth Character in a String

If we want to find which character of a string is sitting at a particular value, we again use bracket notation with the number position we want to find [Nth].


let player = "Druid";

console.log(player[2]);

"u"

Use Bracket Notation to Find the Last Character in a String

When we want to find the last character of a string, we can subtract one from the string's length.


let spell = "Fireball";

spell[spell.length - 1];

"l"

Use Bracket Notation to Find the Nth-to-Last Character in a String

Just as we did before to find the Nth and the last character in a string, we can combine the two to find the last to Nth character.


let enemy = "Goblin Mage";

let secondToLastLetter = enemy[enemy.length - 2];

console.log(secondToLastLetter);

"g"

Thank you for reading my blog! This is the sixth of my series on JavaScript so if you would like to read more, please follow!

LEVEL UP with JavaScript! LVL 5

DevCronin — Sat, 04 Sep 2021 17:54:57 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 5 will cover:

Concatenating Strings with Plus Equals Operator
Constructing Strings with Variables
Appending Variables to Strings
Find the Length of a String
Use Bracket Notation to Find the First Character in a String

Concatenating Strings with Plus Equals Operator

As we did with the compounded assignment (+=) operator before, now we will use it to concatenate a string on an existing variable.

Remember, spaces only exist if we add them.

let iroh = "dragon, "; 

iroh += "of the west."; 

console.log(iroh);

"dragon, of the west"

Constructing Strings with Variables

In JavaScript, it is common to build longer, more complex strings.

To do this we will be using the concatenation operator (+) to insert one or more variables to construct the string.

let mySpell = "magic missile"; 

let spellDescription = "I cast " + mySpell + ", and three glowing darts home in on my target."; 

console.log(spellDescription)

"I cast magic missile, and three glowing darts home in on my target."

Appending Variables to Strings

Variables can also be appended to strings using the (+=) operator.


let alignment = "Chaotic "; 

let alignmentTwo = "Good";

alignment += alignmentTwo; 

console.log(alignment);

Chaotic Good

Find the Length of a String

To find the length of a string we use ".length" after the string but before the end (;).

Length is given in the number of characters start with the index of zero.

It can also be used on string variables or string literals.


let game = "Dungeons and Dragons";

let gameLength = game.length; 

console.log(gameLength);

20

Use Bracket Notation to Find the First Character in a String

In JavaScript counting starts at 0, and is referred to as Zero-based indexing.

By using bracket notation ([]) we can get any character at a specific index in a string.

let character = "Wizard"; 

let firstLetter = character[0];

console.log(firstLetter);

"W"

Thank you for reading my blog! This is the Fifth of my series on JavaScript so if you would like to read more, please follow!

LEVEL UP with JavaScript! LVL 4

DevCronin — Sat, 28 Aug 2021 17:56:09 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 4 will cover:

Declare String Variables
Escaping Literal Quotes in Strings
Quoting Strings with Single Quotes
Escape Sequences in Strings
Concatenating Strings with Plus Operator

Declare String Variables

A string variable is when zero or more characters are enclosed in quotes.

Numbers can also be a string if enclosed in quotes.

let character = "Tempest Cleric"

Escaping Literal Quotes in Strings

Escaping literal quotes is used when you need to use quotes inside of the quotes of the declared string.

This is done using a backslash before both of the actual quotations.

let magicAxe = "Greataxe \"of the Brute\""; 

console.log(magicAxe)

Greataxe "of the Brute"

Quoting Strings with Single Quotes

When quoting, single quotes or double quotes may be used.

If this is done, care needs to be taken to avoid ending the string with a non-paired single quotation character.

Again the backslash can be used before the quotation character to escape it and prevent the error.

let myTeam = 'The paladin said "I am the strongest"!'

console.log(myTeam)

The paladin said, "I am the strongest"!

Escape Sequences in Strings

There are also some special characters that we need to use the backslash to escape.

When we do this, make sure not to add any spaces between escape sequences or words.

Below is a list of some of these possible characters;

\' single quote
\" double quote
\ backslash
\n newline
\r carriage return
\t tab
\b word boundary
\f form feed

var character = "Druid\nLevel One";

console.log(character)

Druid
Level One

Concatenating Strings with Plus Operator

Concatenating strings use the (+) concatenate operator to add strings together. This is used to build a new string. There will be no spaces unless specifically added.

var character = "Moon " + "Druid"; 

console.log(character)

Moon Druid

Thank you for reading my blog! This is the Fourth of my series on JavaScript so if you would like to read more, please follow!

LEVEL UP! Boost your JavaScript skills, LVL 3

DevCronin — Sun, 22 Aug 2021 17:16:00 +0000

In this blog series tutorial, I will be covering some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 3 will cover:

Finding Remainder
Compound Assignment Augmented Addition
Compound Assignment Augmented Subtraction
Compound Assignment Augmented Multiplication
Compound Assignment Augmented Division

Finding Remainder

When dividing numbers that do not divide as a whole number, the remainder operator (%) can be used to find how much remains after the division.

let remainder = 13 % 2;

console.log(remainder);

// 1

Compound Assignment Augmented Addition

The compounded assignment uses the (+=) operator to do the mathematical operation and then assignment in one step. The mathematical operation to the right of the equal sign is always performed first and follows the order of operations.

let spellDamage = 10;
spellDamage += 5;

console.log(spellDamage); 

// 15

Compound Assignment Augmented Subtraction

Compounded assignments can also be used with augmented subtraction using the (-=) operator.

let hitPoints = 20; 
hitPoints -= 5;

console.log(hitPoints); 

// 15

JavaScript

Compound Assignment Augmented Multiplication

By using the (*=) operator we can use compounded assignment for augmented multiplication.

var criticalHit = 2;
criticalHit *= 10;

console.log(criticalHit);

 // 20

Compound Assignment Augmented Division

By using the (/=) operator we can use compounded assignment for augmented division.

var moveSpeed = 30; 
moveSpeed /= 2; 

console.log(moveSpeed);

// 15

Thank you for reading my blog! This is the third of my series on JavaScript so if you would like to read more, please follow!

See the Next Level Here

Support and Buy me a Coffee

Level up with JavaScript - Level 2

DevCronin — Sun, 15 Aug 2021 19:40:50 +0000

Level up with JavaScript - Level 2

In this blog series tutorial, you will be introduced to some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

See the Previous Level Here

Level 2 will cover Uninitialized Variables, Case Sensitive Variables, Adding Numbers, Subtracting Numbers, Multiplying Numbers, and Order of Operations.

Uninitialized Variables

When a variable is not set to a value, it is defaulted as "undefined". Uninitialized means a variable was declared (i.e. with var, let, or const) and was NOT assigned (=) to a value.

Case Sensitive Variables

In JavaScript case-sensitivity matters. "LEVEL" is not the same as "level". The best practice is to use all lower case in single word variables.

In multi-word variables use lower case for the first word, and capitalize the first letter of any subsequent words. This is called camelCase.

Adding Two Numbers

Adding numbers is just as easy as using a (+) between numbers. The results below will show as a comment (// )assigned (number).

Subtracting Numbers

The same applies with subtraction, but instead, you use (-) between numbers.

Multiplying Two Numbers

When multiplying numbers we use the (*) operator.

Order of Operations

JavaScript follows the order of operations. This is the order in which a math problem is solved.

In order of first to last:

Parentheses
Exponents
Multiplication and Division (from left to right)
Addition and Subtraction (from left to right)

Thank you for reading my blog! This is the second of my series on JavaScript so if you would like to read more, please follow!

See the Next Level Here

Support and Buy me a Coffee

Level Up with JavaScript

DevCronin — Sat, 14 Aug 2021 23:12:07 +0000

Welcome to Level up with JavaScript

In this blog series tutorial, you will be introduced to some of the basic JavaScript programming concepts.

This is geared toward beginners and anyone looking to refresh their knowledge.

To get started, here is an example of a basic JavaScript program called "Hello World".

function greetMe(yourName) { 
    alert("Hello " + yourName); 
} 
greetMe("Zach");

"Hello Zach"

Now that you have seen what JavaScript is and an example of how to write a simple program, let's level up!

Comments, Declaring Variables, Storing, Assigning, and Initializing Values

Comments

Comments are notes about your code for you or other developers.

JavaScript will ignore everything after a double forward slash for in-line, and between a forward slash + asterisk for multiline.

// This is an inline comment 

/* This is a
multi-line comment */

Declaring Variables

Variables allow computers to store and use data.

JavaScript uses these eight data types: undefined, null, boolean, string, symbol, bigint, number, and object.

These variables must be declared by the "var", "let", or "const" keyword.

Variables can have numbers, letters, dollar signs, or underscores. They cannot contain spaces or start with numbers.

Semicolons are used at the end of statements. They are sometimes optional in JavaScript because of automatic semicolon insertion.

However, I would advise always including them until you are more experienced.

var level;

Storing Values

Values can be stored as a variable with the assignment operator (=).

In this example, I declare the variable "level" and set it to the value 1.

Now each time "level" appears in the code, the program will treat it as 1.

var level;
level = 1;

Assigning Values

Next, the assignment operator can be used to assign the same value from the previous variable to another variable.

With the below example, now JavaScript_level and level are both the same value of 1.

var level;
level = 1;
var JavaScript_level;
JavaScript_level = level;

Initializing Values

Initialize allows us to assign an initial value to a variable as it is declared.

This is done on the same line that the variable is created.

var level = 1;

Thank you for reading my blog! This is the first of my series on JavaScript so if you would like to read more, please follow!

See the Next Level Here

Support and Buy me a Coffee

HTML 5 - Best Practice

DevCronin — Tue, 03 Aug 2021 23:26:40 +0000

With HTML 5, it can be difficult to know what is best practice and still relevant.

Some features were used before the HTML 5 standard, but they continue to emerge through developers' habits. In this case, these features no longer serve a purpose.

Other features are examples of implementations that made it into the HTML 5 standard but are no longer considered best practice.

So why would these lingering features still exist?

My take on it is: change is difficult. Developers have to adapt and constantly be learning because the field changes often.

Sometimes there are still instances where some of these features are used even if they are not common.

Additionally, it can be to support backward compatibility to previous HTML versions.

## What are HTML 5 best practices?

Declare the doctype first and as `<!DOCTYPE HTML>`

This is the current document type and it should be the first line of your document.

External CSS link in the `<head>` tag

Although there are use cases for both inline and internal styling, the best practice is to use an external CSS link.

One reason is that browsers can cache an externally linked style sheet and therefore load faster after the initial visit. Another reason for this is inline and internal styles are harder to maintain and organize.

Links located in the <head> section will improve load time. If necessary, <script> should be last.

Close your tags

Every tag should be followed with a corresponding closing tag. This will prevent validation errors.

Mark up should be in the lower case only

It is a developer standard to use the lower case; web development is no exception. This will make for easier reading and writing.

Use appropriate and descriptive tags

Using <div> is fine when there is not a better tag such as <article>, <section, <header>, <footer> etc...

Include alt tags and size on all images

The alt tag improves accessibility for screen readers. Defining image size helps the page load smoothly because it determines the page's structure while loading. This can be changed in CSS for responsiveness.

Use the `<h1>` tag only once

The <h1> is used for the document's title or major heading. It should always be used and only one time for each document.

Use `<h2>` through `<h6>` in ascending order

The order should reflect the size and importance of each heading. The tag <h1> being the largest and most important, and the <h6> tag for the smallest.

Do not skip any and only include as many as needed.

Use correct indentation

Acceptable indentation is two or four spaces. It is best to avoid tabs because of the inconsistency between editors. Most editors have custom spacing to make this easier.

Each nested element should be indented. Elements on the same level should be at the same indentation.

Nest Inline elements inside of block elements

Block elements such as <div> should contain the inline elements <span>, <a>, <img> etc... Inline elements cannot contain block elements.

Final Thoughts

This is not a comprehensive list of all HTML best practices. The best way to learn more about them is to look at other developers' documentation and practice.

Happy coding and good luck!

Support and Buy me a Coffee

CSS - Box Model

DevCronin — Sun, 01 Aug 2021 00:05:03 +0000

Everything is a Box

When I started out in web development, this was one of the first concepts that really helped me understand what was going on.

Every div, image, and paragraph, etc.. are all boxes. Each of these boxes has the same attributes that can be altered to change how they are displayed.

In order from outermost to innermost, these attributes are margin, border, padding, and lastly your content. Below is a graphic that demonstrates this.

Margin

Margin is very helpful to create space on the outside of a box. It is transparent and therefore meant to structure and space out your boxes without changing the inner content.

Border

Border is typically used to outline the padding and content. It doesn't have to be visible, but can be if given a color. Defining the radius will also round edges of the visible content.

Padding

Padding is also transparent and is used for spacing like margin. However, the important distinction between the two is that padding creates space directly around the content.

If for instance, the content was a picture, more padding would actually shrink the image. It does not expand the total size of the box, where as margin does.

Tips and Advice

If you are having a difficult time visualizing what is going on, That is perfectly normal!

The most helpful resource to help you learn, is the development tools that are built into every major browser.

How to use Google Chrome development tools:

Open chrome and find a website you want to inspect.
Now, either right click and choose the inspect option, or hit F12.
You should notice a side panel pop up to the right. Inspect the webpage content and you will see the box model layers surrounding the content.
Now comes the fun part where you get to break things! Inspect something and on the right panel, and change one of these box model attributes you just learned about! Ex. Change padding from 20px to 40px. Reload the page when needed.

Have Fun, good luck learning, and happy coding!

What is Jamstack?

DevCronin — Sun, 25 Jul 2021 21:45:26 +0000

What is Jamstack?

If you are learning web development, you may have heard this term before. The term Jamstack was first coined by Mathias Biilmann, CEO of Netlify in 2015.

JAM stands for JavaScript, Api's, and markup. It was a revolutionary new approach to building websites. This approach is not a framework, but is actually an architectural guideline using many of the tools and skills that developers were already familiar with.

Since it's conception, it has only grown in popularity and is now an important part of a web developers toolbelt.

Why is it used?

Jamstack has many benefits and advantages that set it apart from other techniques.

It offers better performance, security, scalability,
maintainability, and ease of developer experience.

Developers can build faster with less complications, and can focus more on user experience. Businesses can then be more agile in competitive markets, and make their customers more satisfied. End users get better content that is delivered faster.

Its a win-win for end users, developers, and businesses.

How does Jamstack work?

Jamstack offers better performance by pre-rendering pages and content on build, as opposed to each time a user visits a webpage.

Pre-rendering is typically done as static pages at build time
over a content delivery network (CDN).

Once an image, video, or other content is loaded for the first
time it will then load faster when the user visits the same
website again.

Security is stronger because it has less points, or vectors, of potential weakness. It lives on fewer servers and databases which are frequently targeted.

It is more scalable because the webpage's content can be cached in a content delivery network. Unexpected heavy traffic can be handled much easier and this means less down time.

Maintaining the systems is also easier through the use of a CDN. There is less complexity and therefore, fewer areas that can fail.

Most aspects have to work at build time, so by the time a webpage is live, it has already been tested.

Getting started and learning more

Now that you have been introduced to what Jamstack is and how it works, its time to take the next step. The best way to learn is to build!

If you would like to learn more, check out Jamstack

Ionic for Cross Platform Mobile App Development - Overview

DevCronin — Sat, 17 Jul 2021 19:57:01 +0000

Have you ever wanted to make a mobile app?

Are you a web developer how wants to try something new, or
Maybe you are new to coding but don't want to specialize in one operating system or language.

Either way, Ionic can make the most of common web development skills and bring this goal into reach.

What is Ionic?

Ionic is an UI toolkit that is open source and cross platform
compatible.

When used in combination with capacitor, it is used for mobile application development.

With these tools you can develop a progressive web app, an
iPhone app, and an Android app all with one code base!

What do you need to know?

I recommend that you are familiar with HTML5, CSS3, and vanilla JavaScript.

Although is is not necessary, React, Angular, and Vue are also able to be used to build an Ionic application.

Where to start?

Head over to Ionic

Start by reading through and following their well written documentation.

Ionic is great for anyone but especially web developers who want to try their hand in mobile development.

Good luck and happy building!