 Resources from Damon Bauer in 2021

In this course, we will incorporate [react-intl](https://github.com/yahoo/react-intl) into a project created with [create-react-app](https://github.com/facebookincubator/create-react-app) and [react-router](https://github.com/ReactTraining/react-router). The react-intl library makes complex tasks such as internationalization and formatting dates & currency incredibly simple. Another huge benefit of react-intl is that it gives you the ability to centralize the content across your application into language specific files. This creates a consistent place to find content and encourages reuse. If you’ve ever used language specific `yml` files in Rails, you’re already familiar with this pattern.

Starting with the entry point of the application, we will hit the ground running by adding the necessary components and data structures required for `react-intl` to function. From there, we will use `react-intl` components to format various types of data including strings, dates, and numbers. We will also work through writing tests for components that include `react-intl` components using Jest and enzyme.

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

Add Internationalization (i18n) to a React app using React Intl

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

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

Create an SVG Icon System

CSS layout is totally frustrating. You are likely to find yourself fighting CSS for hours, maybe days, on a layout problem that seems simple at first, but proves to be insanely tricky.


In this course you will take a look at some advanced CSS techniques that will show you how to solve real problems you're likely to encounter in your applications. We will explore some of the lesser know CSS layout features, so even if you've got significant experience with CSS, you will probably learn something new that can help you in your day to day work.


We are assuming that you have a working knowledge of CSS basics, and we will dive right into more advanced CSS layout. These techniques should have you writing more versatile future-proof stylesheets right away!

Cascading Style Sheets bring order and beauty to our applications.

Learn Advanced CSS Layout Techniques

Stimulus is self-described as "A modest JavaScript framework for the HTML you already have".

This collection will show you how to build a Stimulus controller that allows a user to filter a collection of DOM elements based on a variety of inputs.

You'll learn:

* How to connect a Stimulus controller
* What an `action` and a `target` are, and how they work
* Modern JavaScript to make filtering a collection simple
* Techniques to make your code extensible and reusable

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

Filter a Collection Using Stimulus

In this lesson, we'll take an existing HTML structure and connect it to a Stimulus controller. We'll also look at adding an "action" to a form input as well as setting an element as a "target" to connect all the dots to make a Stimulus controller functional.

Connect A Stimulus Controller To Existing HTML

In this lesson, we'll explore what it takes to connect a user input event to a Stimulus controller method, using a Stimulus `action`. In doing so, we'll be able to filter down a collection of DOM elements, grouped by a Stimulus `target`, to show relevant filtered content to the user as they type.

We'll also learn about some incredibly useful JavaScript features, including `Array.from`, `String.includes`, and a little known feature of `classList.toggle`. Once you get down to the actual Stimulus controller code, it's "just JavaScript"!

Connect An Event To a Stimulus Controller Action

In this lesson, we'll add various inputs that allow a user to filter a collection of data using different sets of data to search through.

We'll take advantage of Stimulus `targets` to make it simple to find _which_ collection the user wants to search for. Stimulus also provides a nice way to get **all** `targets` of a certain name as an array. We'll take a look at how that makes life easy when need to iterate over a collection of DOM nodes.

Filter Various Collections Using Stimulus Targets

What happens when an input value format doesn't _exactly_ match the the format of the data to filter by?

In this lesson, we'll explore the problem of using `input type="date"` to filter down a collection of elements with a `date` field using Stimulus.

To solve this problem, we'll introduce a tiny date utility library, [`dayjs`](https://day.js.org/), to get both date formats the same so the collection can be filtered.

Filter Transformed Data In A Stimulus Controller Action

The more generic you can make your Stimulus controllers, the better.

We'll explore how to put more control in the hands of the consumer of your Stimulus controller by providing a data attribute configure a controller (and a fallback, in case an attribute isn't provided).

We'll also look at how we can make your code "open for extension, but closed for modification" (part of [SOLID](https://en.wikipedia.org/wiki/SOLID)). We'll refactor a ternary operator to use an object literal lookup. This will help make a method "do one thing" (bordering on "single responsibility principle", the S in SOLID).

Make A Stimulus Controller More Configurable & Extendable

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

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

Topics

Instructors

Content Type

Free or Pro

Damon Bauer