Egghead Instructor Damon Bauer

Damon Bauer

Front End Developer from Nashville, TN. Pretend woodworker. Mountain bike poseur. Coffee snob.



Unlock all of Damon's PRO Lessons
click for instant access!

Browse Damon Bauer's lessons.

showing 33 lessons...

Use a react-intl Higher Order Component to format messages and get current locale

P

Write tests for react-intl output using enzyme and Jest

P

Render Content Based on a Number using react-intl FormattedMessage

P

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

P

Format Date and Time Using react-intl FormattedDate and FormattedTime

P

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

P

Format a Date Relative to the Current Date Using react-intl FormattedRelative

P

Render Content with Markup Using react-intl FormattedHTMLMessage

P

Render Content with Placeholders using react-intl FormattedMessage

P

Convert a Hard Coded String using react-intl FormattedMessage

Install and Configure the Entry Point of react-intl

Embed SVG Directly In Markup with the “Use” Tag

P

Build an SVG icon component in React

P

Style an SVG Icon with CSS

P

Load an External SVG Inside a “Use” Tag

P

Automate SVG Sprite Background Image Variations with a SCSS Mixin

P

Add an SVG as an Embedded Background Image

Add an SVG Sprite as a Background Image

P

Add an SVG as a Background Image

Combine Multiple SVGs into an SVG Sprite

P

Include an SVG with an Image Tag

P

Optimize SVGs for Better Performance using svgo

P

Combine Objects with Object.assign and Lodash merge

P

Easily Reset Styles With a Single CSS value

P

Conditionally Apply Styles Using Feature Queries

P

Dynamically Size Elements with Pure CSS

P

Target Positional Elements Using *-Of-Type CSS pseudo-classes

P

Manipulate Images Using CSS Filter and Blend Modes

P

Control Image Aspect Ratio Using CSS

P

Target empty elements using the :empty pseudo-class

P

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

Layout Responsive Fluid Columns Using CSS

Manipulate the DOM with the classList API

P
react tutorial about Use a react-intl Higher Order Component to format messages and get current locale

Use a react-intl Higher Order Component to format messages and get current locale

3:32 react PRO

In some cases, you might need to pass a string from your intl messages.js file as a prop to a component. Instead of using react-intl components (which generate markup), we’ll use the injectIntl higher order component provided by react-intl. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.

We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.

react tutorial about Write tests for react-intl output using enzyme and Jest

Write tests for react-intl output using enzyme and Jest

7:30 react PRO

In this lesson, we’ll look at writing test assertions for react-intl output. We'll add the necessary dependencies, then we’ll use Jest snapshots to get assertions written quickly. Then, we’ll use enzyme API methods to traverse the DOM and write assertions about specific pieces of react-intl data.

Note: This lesson uses a modified version of an "intl-enzyme" helper utility from the react-intl documentation. You can find the modified file here.

react tutorial about Render Content Based on a Number using react-intl FormattedMessage

Render Content Based on a Number using react-intl FormattedMessage

3:36 react PRO

Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop.

You’ll also learn the syntax necessary to render strings using a plural string matcher.

react tutorial about Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

3:10 react PRO

Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationalization API, which react-intl depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack require.ensure.
This ensures only browsers that need the polyfill incur the extra load.

react tutorial about Format Date and Time Using react-intl FormattedDate and FormattedTime

Format Date and Time Using react-intl FormattedDate and FormattedTime

2:21 react PRO

Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into both a date string and a time string in different language formats.

react tutorial about Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

2:28 react PRO

Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

react tutorial about Format a Date Relative to the Current Date Using react-intl FormattedRelative

Format a Date Relative to the Current Date Using react-intl FormattedRelative

2:11 react PRO

Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human readable format, such as “2 days ago”, in various languages.

We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.

react tutorial about Render Content with Markup Using react-intl FormattedHTMLMessage

Render Content with Markup Using react-intl FormattedHTMLMessage

1:20 react PRO

In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

Note: FormattedHTMLMessage should be used sparingly because react-intl cannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a FormattedMessage component instead, and wrap that component with HTML markup.

react tutorial about Render Content with Placeholders using react-intl FormattedMessage

Render Content with Placeholders using react-intl FormattedMessage

3:35 react PRO

Learn how to use react-intl to set dynamic values into your language messages.
We’ll also learn how to pass in those values by using a values prop in the react-intl FormattedMessage component.

We'll also take a look at how to pass values with markup and still get all the benefits of translation.

react tutorial about Convert a Hard Coded String using react-intl FormattedMessage

Convert a Hard Coded String using react-intl FormattedMessage

4:11 react

In this lesson, we’ll replace hard coded strings with text from the user’s locale data, using the react-intl FormattedMessage component.

We'll also discuss the structure of the messages file, as well as use this utility from the react-intl documentation in order to keep our messages structured nicely.

react tutorial about Install and Configure the Entry Point of react-intl

Install and Configure the Entry Point of react-intl

4:21 react

We’ll install react-intl, then add it to the mounting point of our React app.

Then, we’ll use react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

html5 tutorial about Embed SVG Directly In Markup with the “Use” Tag

Embed SVG Directly In Markup with the “Use” Tag

1:49 html5 PRO

In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

css tutorial about Style an SVG Icon with CSS

Style an SVG Icon with CSS

3:17 css PRO

In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.

When implementing SVG icons with the use tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a use tag, such as a path, you can target it at the global CSS level, like so:

path#rain {
/* styles */
}

Instead of:

.Icon--umbrella path#rain {
  /* styles */
}
html5 tutorial about Load an External SVG Inside a “Use” Tag

Load an External SVG Inside a “Use” Tag

1:38 html5 PRO

Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.

Note: The SVG must be hosted on the same domain as the requested page.

Some older/less feature complete browsers don’t support this functionality. If you only care about the latest browsers, you can get away with not using a JavaScript polyfill (but you should still provide some sort of fallback). However, the svgxuse polyfill can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

css tutorial about Automate SVG Sprite Background Image Variations with a SCSS Mixin

Automate SVG Sprite Background Image Variations with a SCSS Mixin

4:12 css PRO

n this lesson, you’ll learn how to write a SCSS mixin to generate styles for variations of background-images. We’ll look at using SCSS lists to interpolate dynamic class names and property attributes and output icons at different sizes.

If you need the ability to add or edit icons on a regular basis, having a SCSS mixin do the heavy lifting of calculating background-position, background-size and creating selectors will save you lots of time and manual work.

Note: this lesson assumes you have an understanding of SCSS, mixins and already have a process to compile SCSS.

html5 tutorial about Add an SVG as an Embedded Background Image

Add an SVG as an Embedded Background Image

2:52 html5

Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

html5 tutorial about Add an SVG Sprite as a Background Image

Add an SVG Sprite as a Background Image

4:11 html5 PRO

Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.

This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.

However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.

html5 tutorial about Add an SVG as a Background Image

Add an SVG as a Background Image

1:32 html5

Learn how to set an SVG as the background image of an element. Background images can be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon.

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on :hover), this could be a good option for you.

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs PRO

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

html5 tutorial about Include an SVG with an Image Tag

Include an SVG with an Image Tag

1:06 html5 PRO

Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs PRO

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.

For a full list of options and plugins available to use with svgo, check out their documentation.

Note: This lesson assumes you have npm installed.

js tutorial about Combine Objects with Object.assign and Lodash merge

Combine Objects with Object.assign and Lodash merge

2:28 js PRO

Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when writing libraries that have a set of default options where you want to allow a user to override specific options. You'll also learn how to use a third party library to recursively merge nested objects together.

css tutorial about Easily Reset Styles With a Single CSS value

Easily Reset Styles With a Single CSS value

1:13 css PRO

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.

css tutorial about Conditionally Apply Styles Using Feature Queries

Conditionally Apply Styles Using Feature Queries

3:00 css PRO

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 Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57 css PRO

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

css tutorial about Target Positional Elements Using *-Of-Type CSS pseudo-classes

Target Positional Elements Using *-Of-Type CSS pseudo-classes

2:43 css PRO

Learn how to target elements based on their position inside of a parent element in relation to its siblings.

css tutorial about Manipulate Images Using CSS Filter and Blend Modes

Manipulate Images Using CSS Filter and Blend Modes

2:24 css PRO

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 Control Image Aspect Ratio Using CSS

Control Image Aspect Ratio Using CSS

2:14 css PRO

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 Target empty elements using the :empty pseudo-class

Target empty elements using the :empty pseudo-class

0:58 css PRO

You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup.

Be aware that whitespace is considered a "child", so :empty will not work if the element has no children, but has space between the opening and closing tags.

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.

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.
js tutorial about Manipulate the DOM with the classList API

Manipulate the DOM with the classList API

3:26 js PRO

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

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