DEV Community: Bryant Caruthers

How I Made My First CodePen with the #VWC CodePen Team

Bryant Caruthers — Wed, 03 Jul 2019 15:38:12 +0000

I recently completed the #Vets Who Code bootcamp. If you are not familiar with #Vets Who Code, it is a veteran-led and operated 501(c)(3) charitable non-profit that focuses on training veterans in web development and software engineering principles free of charge with the focus of starting careers as javascript developers. As part of the bootcamp, we are taught HTML, CSS, JavaScript, React, JAMStack, and some computer science. Right before we graduate, we are placed on a team with other graduates to create or work on existing projects to improve the skills learned during the bootcamp.

I was assigned to the CodePen team and was given the task of creating the CodePen for Independence Day as my first project. I will admit that I was a little intimidated. CodePens are seen by lots of people and being assigned to create the one for such an important holiday was pretty scary for someone fresh out of bootcamp. The requirements for the CodePen were an American flag, fireworks, and it needed to play "The Star Spangled Banner". Sounds easy enough, right?

The first part of the project that I decided to tackle was the flag. I created a <div> for the flag and created a red rectangle in the dimensions that I wanted the flag.

I then used the ::before pseudo-element on the <div> to create the white stripes of the flag using the CSS box-shadow property.

I then used the ::after pseudo-element on the <div> to create the blue field of stars for the flag.

After the flag was finished, I created a button using the HTML <input> tag and added "The Star Spangled Banner" MP3 link using the HTML <audio> tag.

Then wrote JavaScript to have the button play "The Star Spangled Banner" when clicked.

I was able to find a recording of "The Star Spangled Banner" that was performed by the U.S. Marine Corps Band in 1953. Being a former Marine, it was really special to find this recording online. It allowed me to add a little of who I am as a veteran to the project.

Once the audio and button worked, I decided to work on the fireworks. The fireworks were the most intimidating part of the project. I didn't even know where to begin. I started doing research by watching YouTube tutorials, looking at other CodePens, and searching the web. I used CSS and JavaScript to create the fireworks display. It took a lot of trial and error to get the fireworks to work as I wanted them. During this time, Stack Overflow became my friend.

Once I had everything working and looking like I wanted, some fellow #Vets Who Code alumni discovered that the stars on the flag were looking a little wonky on some browsers.

It looked fine on my browsers. It is really difficult to fix something that looks correct on your end. I spent three nights poring over the code and trying different things to fix the issue. This was the most frustrating part of the whole project.

Here is the finished CodePen project:

I learned a few important things while working on this project, besides how to write the code. One thing that I learned was to leave yourself sometime before the project is due to deal with any bugs. You never know if things might appear differently in various browsers. Another thing that I learned was don't be afraid to ask for help and ask for help early. Don't wait until the last minute to seek help. It is OK not to know how to do something. It is impossible to know how to do everything in this industry. The last thing that I learned was to not be afraid to try to code things that push you outside of your comfort zone. Being pushed outside of your comfort zone is how you grow as a developer. Just give it a try and remember to have fun with it.

How the Skills Learned in the Military, will Help Me to Become a Better Web Developer

Bryant Caruthers — Wed, 19 Jun 2019 08:01:44 +0000

As I am nearing the end of my Vets Who Code bootcamp, I started to reflect, not only on the web development skills that I learned during the coding bootcamp but also on the skills that I learned while serving in the military. It is these skills that will help me to become an even better web developer. I spent eight years serving in the United States military and served in two different branches, the U.S. Marine Corps and the U.S. Navy. Each branch taught me different skills that have helped to make me who I am today.

The Marine Corps prides itself on mission accomplishment. You must complete the mission at all cost, no matter the circumstance. There were times in the field where you needed to get something done, but the weather was horrible or you didn't have the proper equipment. It would've been easy to just wait until the weather was better or until you could get the proper equipment, but you have a mission that you must complete and it has to be completed on time. This has instilled in me the drive to see out all tasks to completion and to complete them by the deadline. This drive will help me as a web developer to complete any task assigned to me and to complete it on time.

The Navy prides itself on its leadership. The most important leadership principle that I learned was, to know yourself and seek self-improvement. I think it is important to know your strengths and weaknesses. This helps you to focus on the areas that you need to strengthen. In the world of web development, it is very important to continually seek self-improvement. You should always seek to improve your craft and at the rate that new technology is developed, it is easy to get behind on the latest features of your primary coding language or on the latest trending framework/library.

The Navy and Marine Corps both taught me the importance of teamwork. While in the Navy, I worked as an aviation ordnance technician. Lifting heavy missiles and 500-pound bombs are impossible by yourself. It takes a team to lift them onto the wing station of an aircraft. As a web developer, you will have to work on a team and it is important to be able to work together to complete projects. Some projects are just too large to complete alone.

While in the military, I got to travel the world and experience many different cultures. Cultures that are very different from that of the small farming community in North Carolina that I grew up in. But it wasn't just the different cultures overseas, it was also the different cultures that fellow service members came from. This taught me how to work with a diverse group of people and overcome cultural barriers. This experience will aid me when working with co-workers and clients, whether in person or remotely.

The military taught me many skills that will help me to become a better web developer. These skills are just as valuable as the ones that I learned during my time in the Vets Who Code bootcamp. There is more than just knowing how to code to become a web developer. You must complete projects on time, continually learn new things, be a good teammate, and most importantly, be able to get along and work with people from all walks of life.

Interview Questions for the Javascript Developer: Postfix & Prefix Operators, Truthy & Falsy Values, & == vs. ===

Bryant Caruthers — Sat, 15 Jun 2019 09:57:37 +0000

In the last article, we looked at hoisting, prototypal inheritance, and the differences between an attribute and a property. You can find that article here. Today, we will continue to prepare for an interview by looking at the differences between postfix and prefix increment/decrement operators, truthy and falsy values, and equality vs. identity operators.

Postfix & Prefix Increment/Decrement Operators

Postfix (x++/x--) and prefix (++x/--x) increment/decrement operators are used to either increase or decrease a variable by 1 and return that value. Most of us are familiar with the postfix increment operator i++ found in a For Loop. So if they both increase or decrease a variable by one, what's the difference?

If it is used postfix (x++/x--), then it returns the value before incrementing or decrementing the variable. Check out this example:

If it is used prefix (++x/--x), it returns the value after incrementing or decrementing the variable. Check out this example:

Truthy & Falsy Values

Truthy and falsy are funny sounding words. But, what are they? JavaScript uses type coercion, in a boolean context, on all values. When a value is evaluated in a boolean context, if the value is true it is called a truthy and if it is false it is called a falsy. All values are considered truthy, except for false, 0, empty strings (single quotes, double quotes, and template literals), null, undefined, and NaN, which are all falsy.

Equality vs. Identity Operators

So what's the difference between == and ===? The equality operator (==) compares two values for equality after any necessary type conversion. So 1 == "1" would return true, just the same as 1 == 1 returns true. JavaScript converts the string "1" into a number and then compares it to the number 1.

The identity or strict equality operator (===) compares two values for equality, but there is no type conversion. So the values have to be of an equal type also. So 1 === 1 would return true, whereas 1 === "1" would return false.

I hope that this article has helped you to better understand postfix and prefix operators, truthy and falsy, and the equality and identity operators. I would like to thank all of my readers for the overwhelming support of my first article on Dev.to. I would also like to thank my instructors, Jerome Hardaway, Brad Hankee, and Phil Tenteromano, over at #Vets Who Code for their training, support, and for pushing me to write articles. I wish you all the best of luck on your interviews and stay tuned for more articles in the series over the next few weeks.

Photo Credits (in order of appearance):

Kristina Tripkovic

Obi Onyeador

Greg Jeanneau

Interview Questions for the Javascript Developer: Hoisting, Prototypal Inheritance, and Attribute vs. Property

Bryant Caruthers — Thu, 13 Jun 2019 04:00:41 +0000

Going on a job interview is scary. It can be especially scary if you are interviewing for a new career field. Whether you just graduated from college, completed a coding bootcamp, or are a self-taught web developer, you need to make sure you are prepared for the types of questions that you may be asked during an interview. In this new series, I am going to choose a few topics that you could be asked questions about during a JavaScript frontend developer interview. I am not only doing this to help you, the reader, prepare for your upcoming interview, but I am also doing this as a way to help me prepare for my own upcoming interviews. In this article, I will cover hoisting, prototypal inheritance, and attributes vs. properties.

Hoisting

Hoisting is where variable declarations are “hoisted” or lifted to the top of their scope. If the variable is inside a function, it is lifted to the top of the local/functional scope. If the variable is outside of a function, it is lifted to the top of the global scope. This is done regardless of where the variable declaration was made.

So, if we were to write the following in the global scope:

We would get back undefined. The reason that we get back undefined is that it is recognizing that the variable hello exists, but because of hoisting, the variable declaration is hoisted to the top of the global scope, but the actual value given to the variable is not hoisted. The code is compiled as if it was written as:

Prototypal Inheritance

It is often said that everything in JavaScript is an object. The exception is primitives (numbers, strings, booleans, undefined, and null). Functions, arrays, objects, and wrappers for strings, numbers, and booleans are all objects. Objects are used to store data, keep our code clean, and to structure applications into modules. JavaScript uses constructors or prototypes (other programming languages call these classes) as a sort of blueprint to create other objects (instances). This is typically done by creating a constructor function:

Once the constructor function has been defined, then you can create instances like so:

You might be thinking, this is cool and all, but what does this have to do with prototypal inheritance? Hang on I’m getting there.

Let's define inheritance. Inheritance is simply when one object gains access to the properties and methods of another object. The term prototypal is just referring to the fact that Javascript is a prototype-based programming language.

Now back to our example. Here we will add a method to calculate the age of the dogs (in dog years, of course), but we will add it outside of the constructor function using the prototype property.

By using the prototype property, the objects fido and fefe, have access to the method calculateAge. The reason that they have access to this method is because of prototypal inheritance (I told you that I would bring it all together). So if we were to run fido.calculateAge() and fefe.calculateAge(), we would get the age of the dogs in dog years. Here is the full snippet of code:

Attribute vs. Property

Attributes are defined by the HTML (Hypertext Markup Language). They provide additional information about the HTML elements. Examples of attributes are:

href
src
type
value
alt
etc…

Properties are defined by the DOM (Document Object Model). Once your browser parses your HTML elements, a DOM node is created. Because this node is an object, it has properties. Examples of properties are:

accessKey
attributes
childElementCount
className
accept
children
etc…

The main differences between attributes and properties are:

Attributes are defined by HTML and properties are defined by the DOM.
DOM properties are initialized by HTML attributes.
Attribute values cannot be changed.
Property values can change.

As you can see HTML attributes and DOM properties are two different things.

I hope that this article has helped you to better understand hoisting, prototypal inheritance, and the differences between HTML attributes and DOM properties. It is my even greater hope, that it will help you ace an interview and land you that frontend development job in which you are applying. I wish you the best of luck and thank you for taking the time to read this article.

DEV Community: Bryant Caruthers

How I Made My First CodePen with the #VWC CodePen Team

How the Skills Learned in the Military, will Help Me to Become a Better Web Developer

Interview Questions for the Javascript Developer: Postfix & Prefix Operators, Truthy & Falsy Values, & == vs. ===

Postfix & Prefix Increment/Decrement Operators

Truthy & Falsy Values

Equality vs. Identity Operators

Photo Credits (in order of appearance):

Kristina Tripkovic

Obi Onyeador

Greg Jeanneau

Interview Questions for the Javascript Developer: Hoisting, Prototypal Inheritance, and Attribute vs. Property

Hoisting

Prototypal Inheritance

Attribute vs. Property

Photo Credits (in order of appearance):

Daniel Fazio

Samuel Zeller

Melissa Walker Horn

Bruno Figueiredo