DEV Community: Wesley Schmidt

Modeling Your Website pt.2

Wesley Schmidt — Thu, 14 Nov 2019 21:41:21 +0000

Welcome back! Last time, we talked about how you should concentrate your users focus and why it's important. Users are drawn primarily to the top-left corner of a page most of the time, because that is how our eyes are trained, so how do we make them look elsewhere. In this part we will learn more about how you should structure you website through color scheme.

85 percent of user's attention is caught first and foremost through color. It's important to note that the most successful, eye catching sites and brands are comprised of only 2 or 3 colors. The only exception to this are a few variations in values for those colors, ie. slightly lighter or darker versions of a color. For example:

Granted, Walmart isn't known for their website, but the fact still stands that it is easy to read and remember. So, when in doubt, less is more!

When picking these crucial colors, you don't want to simply choose your favorite ones and call it a day, you have to put a bit more thought into it. Within the first few seconds of looking at your page, the viewer will already have made a judgement based on the colors you select alone. So, let's go into a bit more detail as to why this happens and how you can use it to your advantage.

Colors bring out an emotion when you see them, whether you realize it or not, so it's important to know what you want your user to feel when browsing your website! Look at this as a reference:

Red colors typically evoke stronger emotions like love, leading to increased heart rate. Yellow colors usually represent clarity, encouraging communication, but has been theorized to make babies cry. Blue is often times going to be a "go to", it is associated with peace, use it when trying to evoke security and trust. Orange exudes warmth, use this color when you want a friendly and creative vibe. Green is a symbol of health, nature, and relaxation, it is also the most sensitive color to the human eye, meaning we can see the most values of green. If you're trying to build an eco-friendly website, this color is a must. Finally, purple symbolizes royalty, wealth, and wisdom, but can also be very calming, imaginative color when used sparingly.

So, now we know some of the psychology behind these colors, what about the artistic side? Contrast is a tool that ALL artists use in order to make certain parts of their art pop out from the rest, so let's think of our websites as a canvas! It's important to note that the six colors we have discussed so far are the six primary and secondary colors on the color wheel. Primaries being blue, yellow, and red, while the secondaries being orange, green, and purple. Check it out:

The easiest way to find these contrasting colors are to look directly across from them on this color wheel. So, for example, blue is the contrast color of orange and yellow is the contrast color of purple. By using these contrast colors next to one another, you're causing a stark change on your page, making it really stand out more. It's important to note that with all contrasting color pairs, one will always be a warm color, while the other cold. The warms being red, orange, and yellow, while the colds are purple, blue, and green.

So, when you decide the emotion you want your users to have when viewing your website, you can start looking into colors that represent that emotion as well as others that will help it stand out. Remember to limit yourself though, you don't want viewers to feel confused.

Modeling Your Website pt.1

Wesley Schmidt — Thu, 07 Nov 2019 21:20:01 +0000

What is a mock-up? After brainstorming and coming to a conclusion of what it is you want to do, a mock-up is the starting point for most websites. This is the point where you would start deciding exactly how you would want to structure said idea, how everything will interact with one another, and other details like color scheme, fonts, and spacing.

When deciding upon a layout for your website, it's important to understand how you want your user to see it, ie. where should the eye move? There are three patterns to think of when taking this into account. The Gutenberg diagram, which focuses on even distribution, separating the page into four separate sections. You can think of this like reading any page with the eye starting at the top left and moving toward the bottom right, it's along this path that you want to keep items of importance. Here's an example from Facebook:

The second is the Z-Pattern layout, which, as the name implies, follows a z-like pattern. Keeping the 4 quadrants in mind, the idea of the Z-Pattern is for the user's eye to move in a series of left to right, then back to left motions. One would use this format when trying to convey a story to the user.Here's another example:

It's also important to note that you shouldn't feel limited to the amount of times you want a user's eye to run back and forth across the page. This more zig-zag pattern is how we naturally read large blocks of code, like reading a book! This is useful to keep in mind for pages with a lot of information, you don't want the user to feel lost, so it would look something like this:

Finally there is the F-Pattern layout, which I'm sure you've realized by now follows and F-like path. While researching the path of the human eye while reading webpages, studies found that most users started at top-left and after each sweep to the right, scans became more and more shallow. This lead to emphasizing important information at the top-left and putting less important info at the bottom-right. Below is a heat map of eye traffic on google:

These three patterns all share the similarity of having an emphasis on the upper-left section of your page and the bottom-left being the last to be read, that is if it is even seen. So, it's not a matter of choosing one of these layouts, so much as realizing how they all affect the viewer's attention and using that information to make reading and navigating your page as seamless as possible.
it's important to note that if you wish to use your entire page, you're gonna want to be able to emphasize theses certain parts of it, especially the bottom-right section.

This is where color scheme, spacing, and typography comes into play. When properly using these three together, you will have complete control of where your user's focus will be drawn to. I will also go into some great programs, like Adobe XD and Sketch, that makes trying out new structures and color schemes quick and easy. So be sure to check out part 2 of this small series!

Track Current Location

Wesley Schmidt — Mon, 21 Oct 2019 14:01:46 +0000

Using a persons current location when developing an app can be extremely helpful and can lead to a much more interesting application. It's almost become a standard to incorporate a user's current geolocation, and there have been many very interesting uses of it. Some unique examples are apps like eateries that take your current location, and based off of place you have eaten in the past and suggest near-by places based on that information. But the idea of writing code that takes in this data is pretty daunting though right? Wrong, turns out Google has made it extremely stream-lined to hook developers up with that juicy information.

The trick is in the browser that a user uses, like chrome and firefox. Sorry Apple users, Safari has a whole different method that will have to be covered another time. But, most other modern browsers support the geolocation API that will gather this info. Everything you will need is inside of the navigator.geolocation object. Here is where you can access the getCurrentPosition and watchPosition calls.

With getCurrentPosition, you will be asking the user if you can user their current latitude and longitude information. All you have to do is make a check to see if the navigator.geolocation object exists in a user's current session, you can do this a plethora of ways, each depending on the front-end framework you decide to use. In my case I will be using angular 8:

In the above example I'm using ngOnInit, which can be compared to React's componentDidMount in a way. Basically this will call the function getCurrentLocation() whenever this specific component renders to the page. This will then check to see if a user has already agreed to the use of their current location, if true it calls navigator.geolocation.watchPosition(position) which accesses their lat and lng using "position" or whatever you name the parameter. In our example we use position.coords.latitude and position.coords.longitude, then assign them to a variable we have stored on our component. What this is actually doing is sending an alert to a user through their browser, asking them if it's ok for the current app they are on to have access to their IP address, this is how your location is found.

But what's the difference between getCurrentPosition() and watchPosition()? Well, you can use getCurrentPosition to ask for location from a user once, but if you want to watch their movement, you'll want to use watchPosition(). You can set up the latter to constantly make updates to look where the user's current location is, like how navigation apps track your position along a path in real time. However, to use this properly, you must set up a system that will constantly listen for a change in the user's current location in order to update your actual marker for a user to use the new location. In angular I like to use Observables:

Then all you have to do is relay this updated information straight to your map or however you plan to use this data. There are many different properties you can set on this navigator.geolocation object like "enabledHighAccuracy", which will act as a boolean for how specific of a lat and lng you will gather. Other useful ones are maximumAge, aka how long does the code try to actually grab this information, this could be useful for users who may not have the greatest internet and takes a little while longer to acquire it, or timeout, which decides the intervals in milliseconds of how often it will try to gather this the geolocation.

UI and UX

Wesley Schmidt — Mon, 14 Oct 2019 13:00:17 +0000

When developing a website it's always important to think from the users perspective, making sure that everything makes sense. This is where UI (or user interface) and UX (user experience) come in. While they both sound like the same thing with different words, I want to emphasize their differences and how crucial it is how they affect one another. In short you can think of UI as the artistic, or graphic design side, while UX is more focused on the technical, analytical side of the front-end.

User interface is difficult to categorize as it includes a large variety of processes, but I'll mostly be talking about the design aspect. The overall goal of creating a good UI is for it to present as an effective and enjoyable experience for a user. This means things like making it easily navigable, you don't want your user to have to struggle just to find what they are looking for. You should always have some form of navigation bar that links them to main parts of your app, and always try to have a way back to the main page, or home screen. User feed-back is also extremely important, you don't want users to submit anything and feel like they haven't done anything. Things like having a small pop-up say "Thanks for blah blah blah" or simply having their cursor turn into a pointer to signify an item is actually clickable really goes a long way. Try not to have too many colors when creating a theme for your app, one or two with a mixed variety of blacks and whites is usually enough to make it look sleek and not over-baring. Choose wisely where you place integral buttons/information, you want users to become familiar with where everything is quickly so they don't have to think when doing simple tasks. There are many more "rules" you should follow when creating a UI, but what's most important is its interaction with the UX.

User experience design is meant to enhance a user's satisfaction by making their use of your application as seamless and easy to use as possible. The main goal is to avoid complicated interactions between your app and the use, while still maintaining complex behaviors. This train of thought is actually not exclusive to software engineers, actually, and can be applied to any other services that is provided to a customer. Jobs like, the service industry, you want the customer to be as comfortable as possible, or the development of a car, you want the ease of use to be emphasized in order to open up to a larger audience. Things to think about when developing a UX include analyzing competitors. Is your app similar to any other products already out there? Then you should take into account everything it does well and everything that can be done better. It's important to realize how convenient and easy it is for users to utilize your app compared to others out there. Even if your app is only just a tiny bit slower, customers will gravitate to the faster without hesitation. Designing a good UX is complex because your essentially becoming a marketer, designer, and a manager all at once.

In conclusion, you should always strive to be making apps from a users perspective, after-all, they're the ones that will be using it. Everything should flow easily, while still leaving room to be complex and something someone using your app can explore. It's a hard concept to balance, but it's important in becoming a master of web design.

Video Game Engines

Wesley Schmidt — Sun, 13 Oct 2019 00:32:10 +0000

Making a video game today is a vastly different experience from trying to do the same a few years ago. This is largely in due part to the introduction of game engines, but what exactly does that mean? A video game engine serves as a framework for creating almost everything that you would expect to be in your game. This includes things like animation, artificial intelligence, movement, physics, etc. These helpers can be broken down into five components: main game logic, graphics rendering, audio engine, physics engine, and AI.

The main game logic is going to be, as the title implies, the main component when creating your own game. This is going to be the part of the engine that helps you create things like player health and damage system. When creating core features, you must remember all of the events that must happen when certain conditions are met. These include things like, when a players health reaches 0, they should die, or if their character is in the air, pressing the jump button again shouldn't allow them to jump again, unless it was your intention to have a double jump.

Next most important is the graphics rendering component, which takes any visual assets you have made and make them quick and easy to implement. This includes pairing specific animations to player movement, battle systems, or any other types of animations, or simply setting a standard resolution. Most of the time this cuts down the amount of actual programming to a bare minimum.

Audio is something most will believe to be simple to implement, but it's quite the opposite. There can be a lot of synchronization one has to consider when adding audio to their game. Using a game engines audio offers a lot of extra features as well, specifically for 3D games, like surround sound or reflective sound. There are even systems for creating dynamic sounds that trigger on specific events like when entering into a more tense location.

Creating your own physics engine from scratch will take you as much time as creating the rest of your whole game if you aren't careful. After all, what goes up, must come down and making that happen in your virtual space is, most of the time, as easy as moving a few sliders. A good physics engine is often times good enough to make a game interesting on its own, so to be able to easily use one in your own game is very appealing.

Finally you have AI, or artificial intelligence. What good game doesn't have a challenge? That's a developers goal when using AI, to have a program that learns from a players actions and respond accordingly. This will force players to think about their actions before doing them, leading to more interesting gameplay, which makes a good game.

In conclusion, game engines are standard today in the gaming industry, and if you are interested in becoming a game developer it's extremely important to understand. Accessing a game engine today is also really easy, many of them being free! These include engines like Unit, Unreal Engine, and Game Engine Studio, which are responsible for games like Borderlands 2, Dishonored, and Street Fighter 5. So get out there and dip your toes, you never know, maybe you'll make the next Mario!

Frameworks

Wesley Schmidt — Mon, 07 Oct 2019 14:17:56 +0000

Frameworks today basically make up your whole front-end, so it's important to have an understanding of what they are and how they work. They are in charge of handling all of the user interaction between their computer and the app that they are trying to use. The front end of an app asks many questions during this interaction like: What is this data? Where should it go? How do you want me to do that? Most frameworks today answer these questions through communication between the Model, View, and Controller components. The view is in charge of what is shown to a user using UI/UX - how can I convey the idea to the user? The controller keeps track of any inputs from the user and triggers the correct events to make sure that input is being handled correctly. And finally, the model is the brains of the operation, keeping tabs on all of the data that is included in the application.

This MVC architecture makes up about 80% of frameworks today, making it very worth while to understand if you wish to become a front-end developer. Personally I like to develop an application from the users perspective, so lets start by going more into detail about the view. What a user first sees when opening an app for the first time is very important, 9 times out of 10 if it feels sluggish or confusing within the first 5 min a user will simply find another. It's important to make available actions apparent immediately to a user, like a simple button for example, everyone knows what a button looks like, but what they do is not always obvious, so simply having the cursor change when a user is hovering over it can immediately convey an idea to a user. Next you should ask "how does this affect the user's experience?". Does it make sense to place that button where you put it? You never what someone using the app to feel lost, but you also never want them to feel like they are being blindly guided, give them the freedom to figure it out for themselves. The overall goals of making the view are to make the UI clear and readable, quick to render, and have it be convenient and logical.

The view works hand-in-hand with the Controller, which is in charge of keeping track of all user inputs. It's pretty straight forward, when a user actually creates an input, like clicking a button, the controller is what takes care of that. It is constantly listening for events to happen and preforms the correct actions corresponding to the data. If a user is signing up for example, the controller is listening for the event of the user submitting their credentials. In this case it takes the data from the forms and has a check to see if everything is filled out correctly, if not an alert will be sent to the user specifying what needs to happen. If, in this case, everything seems to be good to go it will send that information to the Model.

The Model is the main component of a front-end framework and is in charge of knowing what all of the data on the app is, where it goes, and when it should be used. Upon the completion of a controller call, the data is sent to the model to be sorted and stored. The model is what does all communication with the server, sending all information to be stored in the database through the server and responding accordingly. This, in turn, changes the view to display what the user expects to see. Take YouTube for example, when you click on a related video you expect to go to that video's page right? What's happening is on the view the user see's that a video is clickable so they click it, the controller see's we clicked that video and grabs the corresponding data to relay to the model, the model then see's that information and finds correct page from the backend and sends that to the view. It's a big cycle that looks like this:

In conclusion, front-end has come a long way, almost all of the work can be done through frameworks like: Angular, React, Vue, and many more. While the syntax of each of these may vary vastly, if your goal is to be a front-end developer, learning the basic ideas behind framework communication is extremely important. Always think from a user's perspective, if it doesn't make sense to them, then it doesn't make any sense to make it.

Frame Data in Fighting Games

Wesley Schmidt — Mon, 30 Sep 2019 14:54:23 +0000

I wanted to bridge the ground between software engineering and design/ animation, so I figured I would cover what it means to balance those two in a video game, specifically fighting games. First, we should quickly go over some common elements if you've never played a fighting game before. First you have offense, this is how your players dish damage, are they quick and agile? Slow, heavy- hitter? Somewhere in-between? Then obviously you need defense, it is usually universal to simply hold opposite direction of opponent in order to block an incoming attack. Every character should be able to block the majority of damage from Low, Mid, and High attacks using the proper stances, crouch block covers lows and mids, but is vulnerable to high attacks, while standing block does the same for mids and highs, but is vulnerable to lows. Almost every fighting games is created with a Rock-Paper-Scissors mentality. This means block beats attack, grab beats block, and attack beats grab.

The first question I will pose to you is what is a frame? A single frame refers to the stand still picture that makes up a moving image (aka how videos are captured). This goes hand-in-hand with frame-rate, which refers to how many frames are recorded per second (or FPS). A higher FPS usually means for a smoother recording, unless animated to specifically look otherwise, or it was just poorly done. It ties in directly with a displays refresh rate, if the refresh-rate isn't fast enough to display as many frames as a video is rendered in, then it will default to its highest.

How does this convey to fighting games? Well, character animations are made up of sprites, which refer to the still frames that make up an animation. Each character has their own unique sprite pages that make up the frames for walking, jumping, punching, crouching, just about every animation that a character will make. More frames = smoother animation.

Bring it all together by setting the images to display at a certain fps (in this case 60fps) and you have yourself an animation!

Notice how most animations come back to the same pose, this is the neutral pose, or when the player makes no input this is the default (or idle) position which will look something like this.

So how does all of this affect gameplay? Well, all of the frames that make up an animation can be broken into parts, this is easiest to see when looking at an attacking animation.

Startup frames are the amount of frames it takes for attack to start. This happens the moment a player makes an input. Active frames are how many frames the attack can do damage for, meaning this is the core of the attack. Recovery frames are the amount of frames it takes for players to put in another input after starting a move. This mechanic is made to give your opponent a chance for a counter-attack if a move misses. Finally, hit-stun refers to the amount of frames a struck opponent is vulnerable for, which can set up for combos, leading to more damage dealt.

Different attacks and characters have different frame data. Light attacks have a quick start-up with low dmg, but short reach with less recovery frames. This makes these attacks pretty low-risk low-reward and serve as a way for players to safely condition an opponents in a match.

Heavy attacks have a slow start-up with high dmg, but have longer reach and more recovery frames.

Then you have interesting mechanics that vary from game to game, but in this case I will be focusing primarily on Street Fighter 3: 3rd Strike. A player can do special Moves by making an specific input fast enough that will result in a character’s signature move.

Players can also link a confirmed hit into another attack before active frames are over, resulting in a combo.

Finally, you have the parry, a defensive move that required player to input direction toward their opponent to block 100% dmg and give them a few frames of advantage, meaning they will be able to make an input slightly faster than before. Players have a 6 frame window in order to preform a parry, which is 1/10th of a second.

Put it all together and:

you'll find you have gameplay that focuses on prediction and reading your opponent, rather than guessing and spamming out as many moves as you can. You will want to focus on giving players a chance to make a come-back, and never fully taking away control. The goal is to make it fun to pick up and play, but hard to master.

Your Eyes Matter!

Wesley Schmidt — Mon, 23 Sep 2019 14:10:09 +0000

As a programmer you’re bound to stare at a screen for extended periods of time, which can cause a lot of eye strain. These are most commonly known as refractive errors and are inevitable as a software engineer, but it's best to limit the occurrences to a few as possible. Refractive errors are a common cause for blurred and impaired vision due to the irregularity of the human eye’s shape.
They are the cause of at least 42% of visual impairment, 124 million people are estimated to have uncorrected refractive errors, and 517 million people have trouble seeing up close due to normal aging. So here are some thing you can do to avoid these errors at all costs.

1) Set up the lighting of your workspace environment. Eye strain is commonly caused by excessively bright light, both natural and artificial, so it's best to limit all sources of light while working long hours. Avoid glare, it contributes a lot to excess light. This can be done in a plethora of ways including positioning screens so that they are to the side of windows, and limit the amount of light coming in with blinds. Try to avoid fluorescent lighting as they are seen as the harshest type of light to use indoors and use “soft light” like lamps. Consider using anti-glare screen cover and/or glasses.

2) Position your workspace. Increase your text size and dim your screen, if you have to squint your eyes to see what's right in front of you, something is wrong. Adjust your monitor, your eyes should be near the top of your screen to avoid as much glare as possible. Try out dark mode, many people think dark mode is less stressful on the eyes, though it is not scientifically proven I personally prefer dark modes. Consider installing blue light filter software, like "Redlight", "f.lux", or "Iris". Blue light has a shorter wavelength which can cause more strain on your eyes. There's also a lot that work with your phone.

3) Exercise! Follow the 20-20-20 rule: Every 20 min look away from the computer for 20 sec at something that is 20 ft away. Also can try to look at something far for 10-15 sec then something close for 10-15 sec, 10 times a day. Blink more! Staring at a screen all day, you blink ⅓ as often, so try to be more conscious of this to prevent dryness and irritation. Take a break: Try to stand up and stretch for at least 10 min every hour, it reduces stress and tension as well as muscle fatigue. Take this time to relax for a second, clear your mind, work is important, but so is your health!

ReactStrap and YOU!

Wesley Schmidt — Mon, 16 Sep 2019 14:34:44 +0000

React is a great framework for displaying all of your precious code. It's dynamic and interesting in the way that it communicates through its unique components. But what if you wanted to use Bootstrap, an open source development kit for html, css, and javascript, that makes creating an interesting webpage quickly.

Introducing ReactStrap! What it serves to do is simply offer some extra tag names for creating pre-built functionality quickly on the page. For example, if you wanted a button () on your page, instead of going through the process of setting up the full click functionality as well as an on hover event to indicate it being clickable, you can just use that sets all of that up for you!

It also includes a large variety of options for displaying text, images, and other forms of input, with similar functionality. The "Card" tag for example will take a variety of information and display it in a nice, orderly fashion.

Organize displayed properties by and

, being rows and columns. Each row can contain up to twelve columns depending on their size, which you set. When the combined size of each column reaches more than twelve, it will automatically set the next property underneath the last.

As a last attempt to sway you to, reactStrap makes forms an after-thought. Simply create a

tag with required information and it'll do the rest for you! This includes a password input that will hide characters upon typing them, an email input that makes sure the input string matches the structure of an email, toggle switches that keep track of votes in a poll for example, and many more.

this:

renders this:

In conclusion, instead of fumbling with css for hours on the front-end of your website, try out reactStrap! It's quick and easy to install and learn, it saves a lot of time, and it looks much more professional.

Data Persistence

Wesley Schmidt — Mon, 26 Aug 2019 13:20:05 +0000

So, imagine if Facebook still stored your information on the page itself and every time you wanted to look at one of your friends pages, you had to log-in all over again. It would be extremely frustrating! So, what is data persistence? It's way for storing a users data from page to page, basically a way for the site to know you are still you whenever you move pages. Before data persistence, info was stored on the sites URL itself, meaning every time a new URL was loaded, all data was lost, resulting in a lot of frustration.

How does it do this? Well, there are a few approaches, but websites will often store this info locally on the client side using cookies. This can be thought of as an id badge that the server can quickly look at to determine your status to know that you are still "you". On the other side, a webpage will also store a users info on the server using sessions that are saved in a database. This allows the website to store data dynamically from page to page. You can think of it like this:

The client will send your request to the server, which will verify your ID and in turn store that request on its database as a session. This has become a staple when designing a website and can be seen in every major site today. For example, whenever you log in to YouTube, the server can keep track of which videos you have watched, whether you liked or disliked them, and who you are subscribed to. It can take this information and start to relate it to other content on its site, offering up suggestions for other content you may enjoy. Another way to look at it is through Amazon, being able to keep track of what items you have shown interest in through purchases and having your items stay in a shopping cart while you continue to browse for others. With the combination of cookies and sessions, sites like Spotify allow users to download their favorite music to their local systems, allowing for offline use. Why is this cool? Because, being a streaming site, most of the time it will require an online connection to listen to music, but because of the cookies on your computer, Spotify is able to confirm your permission without having to check your connection.

With this practicality comes a catch however, data leaks. By sending out valuable information, such as social security numbers or credit card info, you are making it publicly available to anyone who wishes to look for it. They often do this when your local client is trying to send information to a server. This is possible because of the indirect correlation of the client to the server. Often, your computer isn't directly connected to the server, most of the time it will have to pass this information through nodes, like a relay, where someone will be listening and steal your identity.

This can be countered though through using encryption, which will jumble up requests a client will send to the server with a process called hashing. Hashing is a lossy encryption, meaning it takes out information permanently making it unique to the same info that may be typed in by another user. Hashing in tandem with salt, which randomly adds information to submitted data, makes stealing precious information from you much, much harder.

React: Stateful vs Stateless Components

Wesley Schmidt — Mon, 19 Aug 2019 13:14:31 +0000

React is a powerful tool that, in the right hands, can create some amazing single page applications. A lot of this power comes from its use of stateful and stateless components. What are components? They are the “building blocks” of any app created using the React framework and are built like one would make a javascript class or function that optionally takes in properties (props) as an input. It works using ES6 inheritance to create stateless and stateful components that function like a super-class would with its sub-classes.

Stateful components are usually the core of your app, and where you want to branch from. Often referred to as the “smart component”, this is where you would be storing most of your information for an app. This is called the state
An example of this would be the current video that may be playing in a video app or interacting with a list of songs currently in view of the user. They are made similarly to how you would create a class and are the best place to start when creating a React app.

As you can see, a stateful component extends the React.Component. Often times it will also have an event handler method that sets a state that controls the current video, which in this case is our handleClick method.

Stateless components, often referred to as the “dumb” component, acts as the child to a stateful component. It dynamically takes information passed to it through props, which acts as a "super object" that stores all information being passed from component to component. When created, they are written like a function that aims to be as simple as possible.

If you look, you can see VideoListEntry is dynamically pulling the thumbnail, title, and description from props, and passing them back to the stateful component in the correct template using html. It does this by referencing the handleClick function from App, and listens for an onClick event to initialize handleClick method. It then provides the video object correlating to the entry that was clicked and passes in the appropriate arguments.

In conclusion, when creating a website, it’s best to create a “main idea” using a stateful component first. stateful components act as a HUB for a website, deciding what will be displayed to the user through storage, which will be populated by information formatted by its appropriate stateless components.
Having all states being stored in the one stateful component allows an easier time of debugging your code, because it's easier to root out the problem.
For example, if you’re having troubles changing the current video when clicking on its corresponding title, chances are your problem lies in the stateless component that keep track of those titles and is relaying information back. This ease of use and simplicity really are a God send when dealing with multiple files that all must work together in order to display your amazing app!

Polymorphism and ES6

Wesley Schmidt — Sat, 10 Aug 2019 20:24:10 +0000

Polymorphism is a core concept of object-oriented programming or (OOP). It's what allows us to define not only the data type of a data structure, but also the types of operations that they use in javascript. Using this provides the use of the same method on different objects. With inheritance we can share these methods or override them.

Different types of inheritance include: Functional, Functional-shared, Prototypal, Pseudoclassical, and ES6. As an example we will be using ES6 as our preferred inheritance type. The first step is to create a super-class (or parent class) for our objects to inherit from. This is done using the class keyword and placing our desired variables in its constructor. for example:

As you can see we created a variable for our Robot's model, color, and job as well as creating an identification method that will return our model. Great, now that we can create a robot, lets get more specific. This is where sub-classes (or children) come in. We can create a child in ES6 using the extends keyword.

By using the super() method we can inherit variables and methods from our Robot class as well as create brand new ones. We can see polymorphism in action when altering these inherited properties!

To go one step further, we can create a sub-class of our sub-class (grandchildren if you will) to create additional customization using the same format.

Here, we can see that we can even overwrite methods to preform other actions under the same method names.

This is just another example of polymorphism!

So, in conclusion, ES6 is a great, easy way to create objects that share properties amongst one another. It saves memory and time by cutting down on the amount of typing that is necessary, while removing redundant code. This customization goes even further when using polymorphism to sculpt exactly what you want to be done!