 Resources from Tyler Clark in 2021

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The ES6 class keyword is syntactical sugar for working with functions and prototypes. It is not to be confused with classes in classical languages like Java or C#. It's functionality seems to replicate classical behavior but still has significant differences. Let’s explore these and create some of our own JavaScript classes which use the extends keyword. 

Understanding Prototype Delegation within JavaScript's Class Keyword

When used, the static keyword assigns properties and methods to the class itself. As opposed to assigning it to the prototype object of that class. We'll use the static keyword and show how to replicate the same behavior with a regular function. 

Assign and Access Methods of a JavaScript Class with Static Properties

Coupling objects together can create a brittle relationship. If the prototype object is mutated or replaced later in development, that can cause issues to any new implementations of 'child' objects that use those properties. Instead, let's use Object.assign to compose objects. This method creates a direct copy of all properties and does not reference the source object's properties in memory. 

Compose Objects with Object.assign to Create a Direct Copy

It may be confusing to understand how the this keyword is used when accessing a method through the prototype chain. For example if one object has a method with this used and is called through a linked object, what is the context? We’ll play around with this usage and show when context changes. 

Understand JavaScripts this keyword within Prototypes

Polymorphism is a powerful tool in many classical languages. However, it works a little differently in JavaScript and it’s important to understand the requirements of when a property can be overridden. Let’s explore these differences with some custom objects. 

Use Polymorphism with Prototype Linked Objects

Factory functions can be powerful ways of abstracting away difficult inheritance situations. They are simply functions that return objects in a desired state. Let’s refactor some objects that share duplicated code to a reusable factory function. 

Create Factory Functions for Object Composition

The instanceof operator can be used to figure out which function created an object. However it does have its drawbacks, such as returning false results. In this lesson we'll understand how the instanceof method determines which function created an object and manipulate the results.


Determine an Object's Constructor with JavaScripts instanceof Operator

Do you get lost when working with functions and the new keyword? Prototypal inheritance can be completely replicated without either of those two concepts. In this lesson we will convert an object created from the new keyword against a function, to simply objects linked to other objects.

Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)

This video is designed to give you an idea of the topics we will be covering in this course. 

Introduction to Prototypal Inheritance in JavaScript

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Redux is a strict framework. Whether you view that as a pro or a con, middleware is sometimes needed to handle async and repetitive tasks. Let's see how easy it is to create and implement middleware in Redux. We'll start with a simple logger middleware, then create one that uses localStorage. 

Create a Redux Middleware

Cascading Style Sheets bring order and beauty to our applications.

The CSS syntax writes somewhat similar to JavaScript objects. It is important to understand where to properly set properties, selectors, and values within your CSS. In this lesson we’ll talk about this syntax and work an example. 


Set CSS Properties and Values (syntax)

CSS gives us the ability to work with many different types of selectors to target and style HTML. In this lesson we will understand how to use classes, ids, elements, attributes, and the universal selector.  


Use Selectors to Style HTML Elements

The cascade is frequently conflated with the concept of inheritance. These two topics are related, however you should try to understand each individually. Let's apply color styles to a UL and see how it affects our child LIs. As well as use the inherit and initial property values. 

Apply CSS Styles with Inheritance

When selectors conflict, the browser needs to know which property / value combination to paint. Specificity is one of the core concepts of CSS and is important to understand in order to implement deterministic styles. Let's look at the specificity rules and learn the power of each selector. 

Utilize Selector Specificity to Control Applied Styles  

CSS is an acronym for cascading style sheets. It can be frustrating when working with CSS and elements are not styling correctly because there is a conflicting style lower on the cascade. Let's look at how the browser uses the cascade to determine which styles to implement. 

Style Elements Using the Cascade 

CSS can be hard to understand. It can be frustrating when you expect the element to be styled one way and it just doesn’t. Luckily our browsers like Chrome, come with devtools we can use to see which styles are overriding and which have issues. 

Debug CSS with the Chrome Devtools

The box model is one of the most important aspects of understanding layouts and design. It defines how elements will be affected by margins, borders, padding, and actual content. Let’s use the google devtools to mess with different layouts.

Understand CSS Layout with the Box Model

When working in CSS it's important to understand the difference between absolute units like pixels and relative units like em, percentages, and rem. Let's apply these to a H1 element and see how they are calculated by the browser. 

Control HTML Elements with Different CSS Units

Defining colors can be done with hex, hsl, and rgb values. Each one works by telling browsers how to blend colors and lightness together. Let's apply these to our H1 and see how it affects the text color. 

Manipulate Colors with CSS

Backgrounds are very flexible. We can use images, gradients, or plain colors to create colorful backgrounds. Let’s walk through styling some backgrounds and learn how we can use shorthand properties to not only define the backgrounds but to position them as we see fit. 


Add Backgrounds to HTML Elements

CSS gives us control over the visibility of elements on a website. For example when dealing with transitions, understanding how to show and hide elements is essential. Let's work with display, visibility, and opacity to control how our elements appear and take up space. 

Topics

Instructors

Content Type