 Resources from Damon Bauer in 2024

Cascading Style Sheets bring order and beauty to our applications.

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 */
}
```

Style an SVG Icon with 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.

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

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](http://tympanus.net/codrops/css_reference/column-span/).


Layout Responsive Fluid Columns Using CSS

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

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](https://github.com/svg/svgo).

Note: This lesson assumes you have `npm` installed.

Optimize SVGs for Better Performance using svgo

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

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.

Include an SVG with an Image Tag

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.

Add an SVG as a Background Image

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.

Combine Multiple SVGs into an SVG Sprite

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](https://github.com/Keyamoon/svgxuse) can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

Load an External SVG Inside a “Use” Tag

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

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.

Automate SVG Sprite Background Image Variations with a SCSS Mixin

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.


Add an SVG as an Embedded Background Image

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.

Target empty elements using the :empty pseudo-class

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`.

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

Easily Reset Styles With a Single CSS value

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

Dynamically Size Elements with Pure CSS 

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

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

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

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.

Render Content with Placeholders using react-intl FormattedMessage

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.

Render Content with Markup Using react-intl FormattedHTMLMessage

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.

Format Date and Time Using react-intl FormattedDate and FormattedTime

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.

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

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.

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

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.

Topics

Instructors

Content Type

Damon Bauer