Jose Aguinaga pinched a community nerve:

The JavaScript community is insane if it thinks anyone can keep up with this.

I heard a lot of Hilarious! So true! reactions. I heard a lot of Nope. This isn't what it's like. reactions, sprinkled with You don't have to use/start with every tool. and Both of these people (in this fake conversation) are kinda jerks.

Some Mama Bear reactions include Tim Kadlec and Addy Osmani.

Missed title opportunity: "How it feels to read 'How it feels to learn JavaScript in 2016'"

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It's not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex Walker dug into this back in 2011 and made some cool demos like randomized non-repeating backgrounds and infinite lego dude variations.

Here's a demo by yoksel combining the idea with blend modes:

See the Pen The Cicada Principle background + background-blend-mode by yoksel (@yoksel) on CodePen.

Shaun Rashid:

... as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

I wonder how popular not using any sort of reset is already? As you look down the list of things that something like sanitize.css fixes, much of it is for browsers that I'd imagine a lot of people don't worry too much about anymore, what with the evergreen-ness of most desktop browsers these days. Then remove the opinionated stuff and the stuff with only minor cross-browser differences and there isn't much left.

I couldn't live without this though:

* {
  box-sizing: border-box;
}

I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.

Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send it a 457px wide image. But it's impractical (from a lot of perspectives: creation, storage, caching) to make "one image per possible pixel width".

There is a happy medium here. The Responsive Image Breakpoints Generator says:

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best matchthe various user devices. They compromise on either the image dimensions or the number of images. It's time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

It takes information like your breakpoints, your resolution needs, a reasonable change in file size between versions, and the image itself to create a all the images (and responsive images markup) you need to get to this happy medium.

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly - like along the path of a circle().

Eric Meyer uses it on a production page and shows how it works. Here's some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width: 720px) {

  @supports (shape-outside: circle()) {

    .single-page article .complex-content img.right {
      shape-outside: circle(150px at 170px 130px);
    }

  }

}

Jen Simmons has a bunch of great demos of this as well. Looks like shape-outside supports circle(), ellipse(), polygon(), and url() but not path() yet.

A clever idea for text-based spinners in CSS. You set the "keyframes" in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button>

.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}
@keyframes spin8  { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I've isolated one of them here:

See the Pen text-spinners by Chris Coyier (@chriscoyier) on CodePen.