Front End Developer from Nashville, TN. Pretend woodworker. Mountain bike poseur. Coffee snob.
showing 11 lessons...
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.
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.
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.
Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.
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-spanenables a specific element to ignore
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
columnsapplied to it. That way, it remains outside of the automatic column flow.
column-fillallows 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.