Block

Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.

  <div class="block">
    <p>Block</p>
</div>

  .block {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

Element

Parts of a block and have no standalone meaning. Any element is semantically tied to its block. Any DOM node within a block can be an element. Within a given block, all elements are semantically equal.

  <div class="block">
    <div class="block__element">
        <p>Element inside block</p>
    </div>
</div>

  .block {
    width: 100%;
    color: white;
    display: block;
    background-color: black;    
}

.block__element {
    padding: 10px 15px;
}

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

  <div class="block block--white">
    <div class="block__element">
        <p>Block element with modified</p>
    </div>
</div>

  .block {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

.block.block--white {
    color: black;
    background-color: white;
}

.block__element {
    padding: 10px 15px;
}

Using SCSS

The & (ampersand) is an advantageous feature in SCSS. Used them when nesting. It can be an excellent time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS.

  .block {

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &.block--white {
        color: black;
        background-color: white;
    }

}

I have a long name and a few modifiers

Use & FTW...

  .blockname {

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &#{&}--white {
        color: black;
        background-color: white;
    }

    &#{&}--red {
        color: white;
        background-color: red;
    }

    &#{&}--blue {
        color: white;
        background-color: blue;        
    }

}

  /** COMPILED CSS **/

.blockname {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

.blockname__element {
    padding: 10px 15px;
}

.blockname.blockname--white {
    color: black;
    background-color: white;
}

.blockname.blockname--red {
    color: white;
    background-color: red;
}

.blockname.blockname--blue {
    color: white;
    background-color: blue;
}

...or use variable...

  $blockName: 'blocklongname';

.#{$blockName} {

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &.#{$blockName}--white {
        color: black;
        background-color: white;
    }

    &.#{$blockName}--red {
        color: white;
        background-color: red;
    }

    &.#{$blockName}--blue {
        color: white;
        background-color: blue;
    }

}

  /** COMPILED CSS **/

.block {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}
.block__element {
    padding: 10px 15px;
}
.block.block--white {
    color: black;
    background-color: white;
}
.block.block--red {
    color: white;
    background-color: red;
}
.block.block--blue {
    color: white;
    background-color: blue;
}

..or set the parent as a variable:

  .blockname {

    $b: &; // Set the parent as a variable (b = block)

    width: 100%;
    color: white;
    display: block;
    background-color: black;

    &__element {
        padding: 10px 15px;
    }

    &#{$b}--white {

        color: black;
        background-color: white;

        #{$b}__element {
            color: orange;
        }

    }

    &#{$b}--red {
        color: white;
        background-color: red;
    }

    &#{$b}--blue {
        color: white;
        background-color: blue;        
    }

}

  /** COMPILED CSS **/

.blockname {
    width: 100%;
    color: white;
    display: block;
    background-color: black;
}

.blockname__element {
    padding: 10px 15px;
}

.blockname.blockname--white {
    color: black;
    background-color: white;
}

.blockname.blockname--white .blockname__element {
    color: orange;
}

.blockname.blockname--red {
    color: white;
    background-color: red;
}

.blockname.blockname--blue {
    color: white;
    background-color: blue;
}

Don't worry; variables stay within the scope they are declared. This won't work:

  .blockname {
  $b: &;
}

#{$b}__element {} // undefined variable $b

Conclusion

I hated BEM at the start, most of the people hated this method, but in the end, it made my life and writing code easier, now I can't imagine working any other way. It will help you maintain your SCSS. Maybe this isn't the perfect solution, but it sure helps me and everyone on my team!

It's been a while since the last CodePen Chicago but I'm excited we had so many people turn up! Matt Soria, @poopsplat, handed the reins to me, Brian Montana, @brianmontanaweb, as the new organizer to continue CodePen Chicago while he does some awesome remote work while traveling. The wonderful Marvin Cespo, @mcespo, will be doing the photography and documention :D

Ten people presented their pens and we saw some neat features from the CodePen team. Handed out t-shirts, water bottles and Material Design Icon posters.

Here's all of our wonderful presenters:

Chris Coyier showing off CodePen TV and Your Dashboard features

Sean Mann's Growing Bubbles

Sean is a game and front end developer building web apps. He presented a Growing Bubbles to explore the UX of a smart watch.

Kevin Lesht's Potato or Tomato?!

Kevin works as a software engineer at Home Chef created a very difficult puzzle Potato or Tomato. It's a real time graphics based puzzle where a user makes a tough choice between Potato or Tomato!

Daniel Cortes's Hyper Finger Picker II Turbo: HD Remix

Dan created a touch point randomizer that picks a winner from one of the touch points. Use it for figuring out where to go for lunch, the best Overwatch hero or what finger is better.

Jake Albaugh's Vocoder(private), @jakealbaugh

Jake showed a Vocoder that modified audio on the fly using a mic or audio file. There was a second voting system pen that would play a major or minor note based on multiple user's input when visiting his pen.

Kennedy Collins's Warmer or Colder

Can't find something? Hate complex map apps? Warmer or Colder is perfect for you! When you get closer to a geolocation this app will tell you if you're heading in the right direction :D

Austin Andrews's Material Design Icons - Bootstrap 4

See the Pen Material Design Icons - Bootstrap 4 by Austin Andrews (@templarian) on CodePen.

Austin Andrew's has been building out the documentation for Material Design Icons in CodePen to share with the team. It's like Bootstrap docs but emoji filled!

Matt Helbig's Really Good Emails

See the Pen Startup Framework 2 is here, a new release by Designmodo! by Really Good Emails (@reallygoodemails) on CodePen.

Matt's part of the group at Really Good Emails. They collect the best work in email marketing, clean up the code and curate these wonders!

Jack Doyle, @GreenSock

Jack Doyle aka GreenSock showed off the latest features and explorations with GreenSock. First was BendyBox, an animation showing stretch and squash with SVG. PathEditor that allows a user to update an SVG path handles, similar to Adobe Illustrator. GSDevTools a tool that lets you pick specific chunks of animation, render speed, timeline, etc.

Mica Alaniz's Illinois Map(private), @micada

Mica talks about building a map of Illinois using Firebase, D3 and SVG. She's presenting location Pawar has been and where volunteers for the campaign are located across the state. Mica talked about proof of concepts are build in CodePen and handed off internally for the Pawar team to review.

Mike Aparicio's Beauty Now Responsive v2

Mike works for Groupon and decided to build a proof of concept for a responsive solution to the current site.

Photos

Here's the rest and the album

ALL THE THANK YOUS!

Thank you to Chris Coyier, and the CodePen team for their help and support. A big thanks to Media Temple for sponsoring the pizza and beer :D Many thanks to Rudy, Angelica and Kevin at Salesforce for hosting us. Thanks to Austin for the Material Design Icon posters, and Marvin our photographer did an awesome job of documenting and picturing it up! Finally thanks to everyone who presented and/or showed up to support!

Please fill out this survey to help make CodePen Chicago a better experience :D

CodePen joined LeWagon Barcelona for a meetup with many of it's students and local front end developers in Barcelona Spain. The meetup was hosted by LeWagon Barcelona's driver Gustavo and sponsored by Media Temple. The event was well attended considering we only had one week to promote the event in Barcelona.

Two members of Team CodePen were working remotely in Barcelona when a serendipitous meeting with a new coder friend, Erin, introduced us to Gustavo and future LeWagon driver in Milan Francesco.

The ties that bind the tech community are strong. Our very own Dee Gill quickly setup a CodePen meetup with Gustavo. We chose an interview format because we thought it would be interesting to the coding bootcamp students who were getting started with their front end development education.

I told my version of how CodePen was created. We discussed how we decide what to work on at CodePen, why we chose to take funding after three years of bootstrapping and where we hope to take CodePen in the future.

A fun fact about CodePen. Chris Coyier emailed Tim and I about starting this fun "weekend" project on February 2, 2012. Chris tentatively named said project TinkerBox 😬. We chose CodePen because the domain name wasn't available 😌.

So I was browsing websites the other day, and stumbled upon a really cool word scramble effect. The website in question was definitely using JavaScript to create the effect, but I thought it may be possible to re-create the effect using only CSS animations and pseudo-elements. I created this attempt the other day:

All of the above was using psuedo-elements and the content property. It was a fun little "proof-of-concept" to do, but the code is disgusting - it's clumsy and you have to enter the scrambled letters for each content property at every keyframe step. Definitely not modular or time efficient - but I found a solution today using a feature of Sass called "maps". Maps operate a lot like JavaScript objects or JSON - which is perfect for our needs!

Quickly, here is a Sass map: $colors: (1: red, 2: blue, 3: green)

And here is how we would call something from it:

  .container
  background: map-get($colors, 1)
  // The background is now red. Not too bad, right?!

First, let's start with the HTML(Pug):

  .container
  input(type='radio' id='button1' name="button")
  label(for='button1') <span></span><span></span><span></span><span></span><span></span>
.container
  input(type='radio' id='button2' name="button")
  label(for='button2') <span></span><span></span><span></span><span></span><span></span>
.container
  input(type='radio' id='button3' name="button")
  label(for='button3') <span></span><span></span><span></span><span></span><span></span>

Essentially we are creating three containers, and inside each one we have an input, a label, and a crap ton of spans inside each label. The input is simply for the checkbox hack, so it is optional (read more about that here). The big key here is the spans inside of the label - we will be using the psuedo-element :after on those to create the actual word! So if your word is going to be "hello", we will need 5 EMPTY spans in there. The word will come with the css.

Now for the Sass set up. Like I said, we will be using maps to access all of our fun word scramble data! Here is the basic Sass variable / map set-up:

  
$colors: (1: red, 2: blue, 3: green, 4: yellow, 5: orange, 6: purple, 7: pink, 8: teal, 9: tomato, 10: red)

$scramble: (1: "a", 2: "#", 3: "x", 4: "?", 5: "r", 6: "%", 7: "w", 8: "b", 9: "q", 10: "!")

$count: 10

$finalWord: (1: 'H', 2: 'e', 3: 'l', 4: 'l', 5: 'o')

$finalWordCount: 5 

The $colors map has all of our randomized colors that we want - you can put whatever color in whatever quantity you want! The $scramble map has all the letters and symbols you want to randomly scramble-ize. And the $finalWord map is simply the final word that we want - in our case, "Hello". $count is simply the number of things in our maps; you can coordinate those numbers to be the same, like I did, or you can do two different numbers. You will see the time-saving advantage of maps shortly.

First we will start off by writing our word "Hello" by using the content property of the span:after elements. That's a mouthful, I know, but bear with me. We will access the map containg hello with a for loop! Check it out:

  @for $z from 1 through $finalWordCount
  span:nth-child(#{$z}):after
    color: black
    content: map-get($finalWord, $z)

Boom, this writes our word out. So, we make a loop. The loop counts the length of the letters in our word. We attach the loop variable to the nth:child():after, essentially selecting the psuedo-element of every span. In the content property, we put the map function in and put our $finalWord variable in, followed by our loop variable. This spells out our word! You can see where we are here:

Now we need to do our scramble animation. This requires us to make another loop that can access the $scramble and $colors maps. Here is what our code looks like:

  @for $x from 1 through $count
  input:checked ~ label > span:nth-child(#{$x}):after
    $increase: $x * 175
    animation: move-#{$x} ((1000 + $increase) + ms) linear forwards 1
    @keyframes move-#{$x}
      @for $e from 1 through 7
        #{$e}0%
          content: map-get($scramble, random($count))
          color: map-get($colors, random($count))

Here we essentially create another loop that counts up to the length of our $scramble and $colors maps. When our input is checked, we select the label and then each span child's after psuedo-element. Complicated selection, I know, but if you walk through it slowly you'll get it no problem.

We then create an $increase variable for our use later. We also call a CSS animation, and to make a unique animation for each span:nth-child():after element, we attach our loop variable to the CSS animation name. It looks like this: move-#{$x}. As for the speed of the animation, I take a base-line speed and then add our recently created $increase variable to it. This creates a nice staggered effect with the word!

We call the animation with the keyframes, and then create ANOTHER loop inside the animation. This makes it so we can generate a unique color and word for each step of the animation! Inside the animation itself we add the content and color properties, and both call a map. For content, the map parameter is our $scramble variable, and we randomize our $count variable to access any of our scrambled words. The $colors variable is the exact same; we will randomize the colors!

Now we have a word scramble! While this code does compile to quite a bit, it is SO much simpler to read and write than my first attempt. The maps feature of Sass definitely has a ton of potential, and I hope this was a pragmatic example of its ability. :D

This is part four of a five part series covering the SOLID principles. For more information on what the SOLID principles are, check out part one.

• Single responsibility principle
• Open/closed principle
• Liskov substitution principle
• Interface segregation principle
• Dependency inversion principle

The rule

No client should be forced to depend on methods it does not use.

What does it mean?

This principle is one of the more clear ones but lets define the terminology in case it's unfamiliar. A client is something that is asking/requesting something from another class. A method is a function that is on a class. It differs from a function as it can access data on the class.

This principle is concerned with how we use classes. It helps us to separate our code and improve our developing experience over a long period. This principle differs from the single responsibility principle which is concerned with what a group of codes responsibility is. Whereas interface segregation is about how we use and interact with the code.

Example

Here we have a class called Car with a list of methods on it, such as turnOn, turnOff, doors etc. We are creating an instance of it and storing it in a variable called electricCar. We are calling the information method on it to print out the cars information to the webpage.

This works great, you can create as many cars as you like and print the information to the webpage. Now pretend you're given a new task of creating a motorCar. You reach for the Car class, initialise it and store the result in a variable called motorCar. The motorCar differs from the electricCar though. It's motor is different, it uses gas and isn't electric.

Let's add two new method's to the Car class, combustionEngine and fuelTank. When you are initialing the Car class for motorCar what do you put for rechargableBattery, electricMotor and kilowatts? What do you put for combustionEngine and fuelTank on the electricCar?

You could put a null value and then do a conditional check to see if you should render it in the information method or not. That will start to complicate the code more with a lot of conditional logic. How about we put the word "no" there for the time being, as we don't mind stating that these items aren't in our car.

Are there any issues?

This violates the principle as we are now depending on methods we don't use and have to cater for them.

A better way to approach this would be to carve out the similar methods into it's own class. We could create a GasEngine and ElectricEngine class and pass the engine in when we initialise it. That way, the two classes are not tied together. For the electricCar we can pass in an ElectricEngine and for motoCar we can pass in GasEngine. Having the classes split up means we can compose the parts we want, to form our Car.

Refactor

Below is our refactored code. We've created a GasEngine and ElectriEngine class with the relevant methods. We have also added an information method to each engine, so that in Car we can ask for the engines information and not care what engine it's using.

Why it is important?

• Composition. If we have many small interfaces, we can compose classes together with the parts we need.
• Decoupling. Tying your classes together with only relevant methods, will mean for a better developer experience. You will be able to refactor and change code more freely.
• Testing. Smaller classes are easier to test. It's a simpler object to create and test against.

Wrap up

Apply the solid principles you've learned so far and avoid large monolith classes/modules that do to much. When you have a large piece of code, look at how you could carve it up into smaller pieces. Compose classes together to form larger, more complex classes. To find out more about this look into composition over inheritance.

That's the interface segregation principle. If you have any questions about it or some of the ES6 syntax I've used, ask a question in the comments section.

If you want to see how another person explains it then check out the links below. They are both short videos which go over the same principle.

• Code Walks - interface segregation principle
• Interface Segregation Principle in 5 minutes

Javascript

    fetch("/", {
    method: "POST",
    mode: "same-origin",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      "payload": myObj
    })
  })

By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).

That really threw me off at first and I was wondering why my requests were not authenticated, but having the propery credentials: 'same-origin' took care of that.

That's about all you need from the Javascript side of things.

PHP

You can't access JSON by default in PHP with the $_POST variable so you have to do a bit of trickery to get access to it.

  $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';

if ($contentType === "application/json") {
  //Receive the RAW post data.
  $content = trim(file_get_contents("php://input"));

  $decoded = json_decode($content, true);

  //If json_decode failed, the JSON is invalid.
  if(! is_array($decoded)) {

  } else {
    // Send error back to user.
  }
}

That's about it. With that you should now be able to send and receive JSON via the Fetch API with your PHP.

Transparent Pixels

I became interested in image replacement techniques to keep page size down, AJAXing in full images later as needed, and I stumbled across The Smallest Transparent Pixel. Using a bas64 encoded 1x1 transparent pixel as a placeholder, you set the width and height attributes to the space you want to fill.

  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" width="200" height="150" />

Unfortunately, the 1x1 pixel images have issues with common responsive styles, due to the image's square aspect ratio.

Let's say you set img { max-width: 100%; } to prevent images from causing horizontal scrolling on small screens. Your 1x1 pixel img's width can be squished down below what you set in the width attribute, but the height remains the same, leaving you with an oddly shaped placeholder.

If you try to correct this with img { max-width: 100%; height: auto; }, the height attribute is completely ignored, and the width can be squished below the width attribute's setting, leaving you with a square; probably not the aspect ratio you intended.

This is intended behavior in the browser and works great for regular images, but how can we fix this for this filler image?

SVG to the Rescue

GIFs and PNGs aren't the only images you can inline. Our friend SVG can even be inlined without base64. SVG also has an aspect ratio built in using the viewBox attribute. So if we swap out our 1x1 pixel for this...

  <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 200 150'%2F%3E" width="200" height="150" />

...our responsive styles work as intended! The important bit is the 116 byte src attribute. This works all the way back to IE9 due to the encodedURIComponent conversion of special characters, which unfortunately makes it a little more difficult to read.

Notice how the responsively sized svg maintains its aspect ratio. This is set here viewBox%3D'0 0 200 150', giving the svg a width (200) and height (150) to get the correct aspect ratio. This could be viewBox%3D'0 0 16 9' for 16x9 images or the exact width and height of the image you plan to use as a replacement.

Image Replacement

The above is a great snippet by itself to be used in place of the standard 1x1 pixel image, but how can we apply this to image replacement?

  <figure class="image-replacement" data-src="http://i.imgur.com/YVSnio4.jpg" data-width="1400" data-height="900">
  <noscript><img src="http://i.imgur.com/YVSnio4.jpg" width="1400" height="900" /></noscript>
</figure>

In our HTML, we have a figure tag with the relevant image info set in data attributes for our Javascript to pull. There's a simple noscript fallback so that our Javascript-less bretheren don't suffer.

The placeholder svg has been updated to display an icon instead of just being blank, but the technique is still the same of setting the correct viewBox. The icon itself is a symbol which has its own viewBox, allowing it to be easily sized and centered in the main svg. Unfortunately, the symbol can't be defined or reused outside of the individual img, since it seems that browsers treat it as an external, self contained file.

The Javascript is very minimal, taking the data attributes of the figure to create the placeholder, then loading the image when hovered, mainly to show how the image seamlessly replaces the placeholder. The content doesn't have to reflow and text doesn't jump around. For a real image replacement scenario, you'd likely want to configure it to load images as they come into viewport, or perhaps when they're next in the slideshow.

Summary and Closing

Use data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 200 150'%2F%3E as the placeholder src attribute for any image you need to replace, updating the viewBox value to keep the correct aspect ratio.

There are other ways you can accomplish all of this, but this technique is ultra simple, self-contained and can likely be used outside of image replacement.

Comment below if you have any improvements or examples of other uses.

HTML

  <main>
  <nav id="controls">
    <ul>
      <li class="filter filter-all active">All</li>
      <li class="filter filter-landscape">Landscape</li>
      <li class="filter filter-urban">Urban</li>
      <li class="filter filter-portrait">Portrait</li>
    </ul>
  </nav>
  <section class="grid-wrapper">
    <div class="image landscape landscape-1 all"></div>
    <div class="image urban urban-1 all"></div>
    <div class="image urban urban-2 all"></div>
    <div class="image portrait portrait-1 all"></div>
    <div class="image urban urban-3 all"></div>
    <div class="image portrait portrait-2 all"></div>
    <div class="image urban urban-4 all"></div>
    <div class="image landscape landscape-2 all"></div>
    <div class="image portrait portrait-3 all"></div>
    <div class="image landscape landscape-3 all"></div>
    <div class="image landscape landscape-4 all"></div>
    <div class="image portrait portrait-4 all"></div>
  </section>
</main>

I'm using div tags here but you could just as easily make those more semantic. We essentially have two sections: the navigation (#controls) and the grid (.grid-wrapper). I'm attaching the class .filter to the individual navigation elements. Each of the elements also has a specific class of .filter-[name] attached. We will use this to connect to the appropriately labeled items in the grid. There is also an .active class that will be applied to the element the user clicks.

The grid is a collection of images. I'm using the background-image property to serve the images to the appropriate cells. You could go with hard-coded images using the img tag, too. The images share a class called .image that gives some general values for all the images. Each image also has a class that represents its filter type: urban, portrait, landscape, all. These filter types are what I will use to hook the filtering system to. Finally, each image has a unique class that allows me to apply the background image to a specific grid cell.

CSS

  * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.hide {
  -webkit-animation: fadeOut 150ms ease;
          animation: fadeOut 150ms ease;
  opacity: 0;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hide {
  display: none;
}

#controls {
  margin-bottom: 2rem;
}
#controls ul {
  list-style: none;
  padding: 1rem;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#controls ul li {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  cursor: pointer;
}
#controls ul li:hover {
  background: #eee;
}
@media (min-width: 400px) {
  #controls ul li {
    margin-right: 1rem;
    padding: 1rem;
  }
}
#controls ul .active {
  background: #444;
  color: white;
}
#controls ul .active:hover {
  color: #444;
}

.grid-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[1];
      grid-template-columns: repeat(1, 1fr);
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  grid-gap: 1rem;
  -ms-grid-column-align: center;
      justify-items: center;
  margin: 1rem;
}

@media (min-width: 500px) {
  .grid-wrapper {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .grid-wrapper {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1368px) {
  .grid-wrapper {
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
  }
}
.image {
  width: 100%;
  height: 50vh;
}

@media (min-width: 500px) {
  .image {
    width: 100%;
    height: 50vw;
  }
}
@media (min-width: 768px) {
  .image {
    width: 100%;
    height: 40vw;
  }
}
@media (min-width: 1368px) {
  .image {
    width: 100%;
    height: 20vw;
  }
}
.urban-1 {
  background: url(https://unsplash.it/1500?image=1075);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.urban-2 {
  background: url(https://unsplash.it/1500?image=1067);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.urban-3 {
  background: url(https://unsplash.it/1500?image=1033);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.urban-4 {
  background: url(https://unsplash.it/1500?image=983);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.landscape-1 {
  background: url(https://unsplash.it/1500?image=961);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.landscape-2 {
  background: url(https://unsplash.it/1500?image=916);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.landscape-3 {
  background: url(https://unsplash.it/1500?image=901);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.landscape-4 {
  background: url(https://unsplash.it/1500?image=876);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait-1 {
  background: url(https://unsplash.it/1500?image=978);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait-2 {
  background: url(https://unsplash.it/1500?image=996);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait-3 {
  background: url(https://unsplash.it/1500?image=1027);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.portrait-4 {
  background: url(https://unsplash.it/1500?image=838);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

The CSS may be a little complicated if you're new to CSS3. I'm using some advanced concepts like keyframe animation and background images. Let me walk you through the different parts.

After setting up some basics with the body tag, I went right into an animation. This was the original concept. When you run the code, however, the second .hide class is overriding the animation. So if you want to see the items animate out, just comment out the second .hide class. The animation is pretty basic and just covers the opacity. You could also change the visibility property so that the items are no longer taking up space on the grid. If you don't bring down the opacity all the way to '0' then it has a nice highlighting effect. I've used this technique on my own portfolio. In fact, I'm using this exact structure to create the portfolio grid on that page.

Next is the navigation. This is just a simple menu that is being inlined using Flexbox. If you don't know much about Flexbox, check out my video tutorials on YouTube to get acquainted. You should be using it a lot in your work, as it's now almost universally supported and will give you more control over the alignment of elements. You can see that I've styled the .active class here which is switched (through javascript) when the user clicks on a navigation item.

The final piece is the grid itself. I'm using CSS Grid Layout to set the structure of the grid. It's a fairly simple grid with equal sized columns and rows. I've set media queries to allow for more columns as the screen size gets larger. If you don't know about CSS Grid, I've also recorded an introductory video tutorial series that covers everything you need to know to get started with CSS Grid Layout. It's not universally supported, but is supported in the latest versions of most major browsers. For more complete browser support, check out this fallback cheatsheet from Rachel Andrew.

I've used the section with the class of .grid-wrapper to be the grid container. You could use an unordered list to be the grid container. This might make it more semantic. When that container is set to display: grid then all of its children become grid items. That's one of the reasons using an unordered list makes sense.

Finally, I set the height and width of each image. You can play around with the sizes here to fit your needs. I wanted to make sure the images were neither overwhelming nor too small, so there are several size adjustments as the screen gets larger. You can also see that each cell is being targeted specifically so that I can flow an image into the cell. If you're using an img tag for your images, these are unnecessary.

JavaScript (jQuery)

  // Show all
$('.filter-all').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.all').removeClass('hide');
});

// Show landscape
$('.filter-landscape').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.landscape').removeClass('hide');
  $('.urban, .portrait').addClass('hide');
});

// Show urban
$('.filter-urban').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.urban').removeClass('hide');
  $('.portrait, .landscape').addClass('hide');
});

// Show portrait
$('.filter-portrait').on('click', function() {
  var $this = $(this);
  $('.filter').removeClass('active');
  $this.addClass('active');
  $('.portrait').removeClass('hide');
  $('.landscape, .urban').addClass('hide');
});

The jQuery is simple. I'm just hiding and showing different items based on which navigation button the user clicks. On click, I record the button in the variable $this and then switch the .active class to the filter button that the user clicked. The category the user wants to see is shown while the other categories are hidden.

I'm sure there are ways to make this more DRY. I'm no code poet when it comes to JS. You could also use vanilla JS for this. It would save some page size if you didn't want to use the jQuery library.

And that's it. Easy peasy. You can take this basic framework and add hover effects, animation effects, or anything else your heart desires. If you just need a quick and dirty filtering system, though, this will work for you just fine. It's small, straight forward, responsive, and scalable.

View on Codepen

I've recently been tasked with optimizing load times on our sites. Most of our pages are pretty image heavy, so image optimization is naturally the quickest and cheapest way to get a performance boost. I noticed some of our larger images were coming in around 300 - 500k... uhf-dah.

I spoke with the image production team and they said for large screen images their target file size was 400k, since "that was the number that the largest images didn't lose too much quality". For the record, I am not an image optimization expert. I know there are many factors that go into optimizing an image, but 400k seemed pretty high for a benchmark.

So, I started looking into other tactics we could take. Somehow I ended up on articles about retina and 2x images and the tactic used to optimize 2x images intrigued me. Doubling the dimensions of the image would allow me to crank the image quality way down, then use CSS to dictate the image dimensions. I did this to some images and found that I could save around 100k with large images. Here's a demo of one of those images:

Both images appear to have comparable quality at 1920px wide and we saved 107k - woohoo!

My question is: are there any drawbacks to using 2x images by default?

Sure we have to specify the width in code, but that's usually good for browser rendering anyway - right? Are there other browser layout/paint/composite concerns with this tactic? Am I missing something? Is this already a thing and I don't know it? I talked to the designers on our team and no one knew anything about using 2x by default.

I'm not saying "2x all the things!!!", but especially for large hero images, it seems to make a lot of sense.

Another Plus On Mobile

I also applied this tactic to mobile images and I noticed that when at max zoom, the 2x version was less pixelated. It was also about 20k smaller. Feels like another win...

Mobile 1x Max Zoom

Mobile 2x Max Zoom

Please let me know your thoughts!

Update: 1.5x

I sent this post to CSS Tricks and they referred me to an article from a few years ago and recommended looking at 1.5x. So I took a crack at it with the demo above and found that 1.5x and 10% quality I saved 194k! (87k more than 2x). Perceived quality appears to be pretty close to 1x and 2x.

I also did this with a more complex image with less blur and found that the 1.5x also saved the most weight and still looked good. (Thanks to Mike Lothar for calling out blur and image complexity)

I'm still feeling like this tactic is pretty decent, whether it's 2x or 1.5x. Any other thoughts/concerns from anyone?

You obviously know what an animation is - what I'm tryng to get at here are the different kinds of CSS Animations. There are the kind we already using without thinking - transition animations, then there is the widely supported, but extremely basic CSS3 Keyframe Animations, and finally there are the significantly less supported Web Animations API.

Transition Animations

Yes we know about these, we use them for :hover or :focus states all over our current sites. These animations are the least taxing on browsers (and therefore have the lowest impact on site performance/speed).

Sidenote on Speed & Performance: Animating opacity and transforms hinder performace the least, and are the least taxing on browsers. Changing a layout with animation (width, display, etc.) is the most taxing on browsers, and therefore hinder speed the most.

Be wary of heavy animations, because slow or browser-heavy animations could cause the enitre page to repaint! (Ex: Say you're reading an article on your phone, and an add suddenly causes the page to reload or jump.)

In case you don't know the full shorthand for CSS transitions, here it is:

  .example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

While we know a lot on how to use transition animations, one aspect of them that's always remained somewhat of a mystery to me are easing curves. An article I read talked about using easing curves in a really basic sense - thinking about using them in the same way motion occurs. For example, if you are driving somewhere, it takes you a bit of time to pick up speed (ease-in) & when you're arriving at your destination, likewise it takes some time to slow down (ease-out). Basically, your transition animations should generally ease-in on :hover, then ease-out when you move your mouse away (ease-in-out). There are also a lot of other easing-curves, and while I'm no expert on all of them, these line graphs do a really good job of explaining all of your options.

CSS Keyframe Animations

To find support for CSS keyframe animations or Web Animations API checkout caniuse.com. Basically, these keyframe animations can do most of what another transition animation can do, but with the ability to repeat the animation, and have greater control. Ideally, as we learn more about animations, we can come back to this specific topic, or learn together for more info.

Web Animations API

These animations are really the bleeding edge of what you can do on the web. These animations are javascript based, and edit the browser's DOM. Translation: they are a lot more taxing on the browser. Browsers weren't initially conceived to do this kind of thing, and they've been slow to adopt. The spec for this is still being edited, and Chrome & Firefox are the only browsers that have any kind of support.

What is cool about these is that they're really on their way to becoming a replacement for Flash - which is now officially dead. Web Animations API have the ability to create what most relate to auto-playing, video animations. But, with great power, comes great responsibility...

When to Use CSS Animations

I'm a big fan of The Web Ahead Podcast, and this episode talked a lot about when to use animations & how to avoid misusing animations. The idea of when and when not to use animations focused around an idea of 6 major uses of web animation

1. Causality (click submit button and form dissapears)
2. Feedback (pressing a button, or video has loaded)
3. Relationship (tie where you’ve been with where you are - iOS enlarging app rather than a straight jump, animating page transition, etc.)
4. Progression (loading bar)
5. Physics (skeuomorphic design - using easings to make motion more believable)
6. Transition (think CSS transition animations)

Some potential use-cases for us, surrounding these major uses could include animating calls to action, using parallax to tell a story with your page, or even something as simple as bringing in a sticky-nav or mobile-menu. In the podcast, they also mention that if you create an animation that it should fulfill at least 2 purposes (and delight should never be one of them.) Try to think about using animation like, "is this new information coming onto the page, or coming off of the page?" because if it's already there, it probably doesn't need to be animated.

The pitfalls of doing animation wrong: Animation done wrong can annoy the user, slow down a webpage, and potentially illegitimize the entire site. 'Is this spam?' Animation should be incorperated into style-guides and be thought of as a part of the client's digital brand, made from deliberate and consistent decisions.

Ex: You would use a blowtorch to weld, but not to light birthday candles.

Moving Forward

If you want to learn more about CSS Animations, check out this web animation weekly newsletter, or explore the resources below.

Resources

• CSS Tricks - CSS Animations vs Web Animations API
• Transition & Animations
• CSS Animation Articles, Tips & Tutorials
• Animate.css
• CSS Animations for Beginners
• Learning About Easing Curves
• CSS Tricks - About Easing
• CSS Transitions
• CSS3 Animations
• The Web Ahead Podcast - Animating the Web
• Exercises to Better Learn CSS Transitions & Animations
• Animasta animation builder