#EggheadADay Shared

Publicly shared #eggheadADay lessons

Watch User Created Playlist (25)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Use Concat to Add Values to an Array

CSS :target Selector

P

Create a tab component using vanilla CSS

Create Filters in Vue.js

Introduction to CSS Transitions

Manipulate Images Using CSS Filter and Blend Modes

Targeting Elements with CSS Attribute Selectors

Focus management using CSS, HTML, and JavaScript

Reuse Flexbox Styles With A Sass Mixin

Control Image Aspect Ratio Using CSS

Create a fixed-fluid-fixed layout using CSS calc()

Create a List Component in Vue.js

Get JSON data from an API using fetch

Use CSS Counters to Create Pure CSS Dynamic Lists

Layout Responsive Fluid Columns Using CSS

Use Generated Content to Augment Information

Safer property access with Lodash's 'get' method

Maps and WeakMaps with ES6

Set up React apps with zero configuration in two minutes

Creating visual skip links in HTML and CSS

Create a Basic Component using Vue.js

Use Vue.js Component Computed Properties

Conditionally Apply Styles Using Feature Queries

Easily Reset Styles With a Single CSS value

Understanding function bind() in JavaScript

P
js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

css tutorial about CSS :target Selector

CSS :target Selector

1:52 css PRO

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

css tutorial about Create a tab component using vanilla CSS

Create a tab component using vanilla CSS

3:09 css

Learn how to create tabs with nothing more than good ole' CSS. Look Ma, No Javascript!

note: This approach has some accessibility issues. To make a tab component that is properly accessible, it requires some JavaScript.

vue tutorial about Create Filters in Vue.js

Create Filters in Vue.js

1:45 vue

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

css tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css

Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, you can create powerful image effects using only code. This can drastically reduce the amount of time spent back and forth between designers and developers.

Here's more information about filter, blend-mode, and mix-blend-mode.

css tutorial about Targeting Elements with CSS Attribute Selectors

Targeting Elements with CSS Attribute Selectors

5:00 css

Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In this lesson we'll look at selecting elements based on attributes and using CSS modifiers to identify variations of those values

css tutorial about Focus management using CSS, HTML, and JavaScript

Focus management using CSS, HTML, and JavaScript

8:34 css

Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

css tutorial about Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54 css

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

css tutorial about Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 css

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

css tutorial about Create a fixed-fluid-fixed layout using CSS calc()

Create a fixed-fluid-fixed layout using CSS calc()

0:59 css

CSS calc() allows you to mix and match units to get real-time calculations. It's useful when you need to size elements but you have some unknown number that you have to account for.

vue tutorial about Create a List Component in Vue.js

Create a List Component in Vue.js

2:18 vue

In this lesson, we will learn how to iterate over an array in a Vue.js template using the v-for property. We can add to and remove from that list using v-on:click and v-on:keypress.enter.

js tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 js

We will use fetch to get JSON data from an API. fetch is available globally on the window object in the browser or via libraries in other JS environments.

css tutorial about Use CSS Counters to Create Pure CSS Dynamic Lists

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

css tutorial about Layout Responsive Fluid Columns Using CSS

Layout Responsive Fluid Columns Using CSS

3:03 css

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference this browser support chart.
css tutorial about Use Generated Content to Augment Information

Use Generated Content to Augment Information

0:43 css

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

js tutorial about Safer property access with Lodash's 'get' method

Safer property access with Lodash's 'get' method

8:36 js

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the get method from the popular utility library Lodash

js tutorial about Maps and WeakMaps with ES6

Maps and WeakMaps with ES6

5:14 js

A brief introduction to Maps and WeakMaps with ES6, the usage of and difference of Maps and WeakMaps.

react tutorial about Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02 react

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

css tutorial about Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css

Skip links are an extremely helpful navigation pattern for keyboard and screen reader users, since they let you skip past sections of content. Learn how to create skip links in HTML and CSS that show on focus, and you'll benefit all users!

vue tutorial about Create a Basic Component using Vue.js

Create a Basic Component using Vue.js

1:04 vue

Vue.js is a "progressive framework for building user interfaces." The core of Vue is focused on the view layer only. It's easy to get started and quick to set up.

In this lesson, we will create a basic Vue component using the new Vue() method and add data properties to show dynamic content in window.

vue tutorial about Use Vue.js Component Computed Properties

Use Vue.js Component Computed Properties

1:12 vue

You can add computed properties to a component to calculate a property on the fly. The benefit of this over invoking a method is that computed properties are cached based on their dependencies.

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css

While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide different sets of styles depending on a browser’s support for them. Learn how to use CSS feature queries without JavaScript.

css tutorial about Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 css

There are times where you need to reset a an element’s styles. Instead of overwriting it with even more style declarations, you can simply reset them.

js tutorial about Understanding function bind() in JavaScript

Understanding function bind() in JavaScript

3:03 js PRO

Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?