Forem: Grant Sander

React Native Tilt Carousel Animation

Grant Sander — Sun, 04 Oct 2020 13:49:44 +0000

Overview

React Native has a FlatList component that takes a list of items, and then smartly renders an element for each item in the list. At first glance, it seems like this component is just for rendering large lists of elements. It turns out, React Native FlatLists can do a ton of cool stuff! In this post, we'll look at one of those things: building a carousel that has a fancy tilt effect. See the sample below.

You can find the source code for this example here.

A Little Setup

Let's start with a little setup. We'll create a list of data that we'll use to render our carousel slides. We'll also use the Dimensions API from React Native to get the width and height of the screen.

import { Dimensions } from "react-native";

// Set up our slides
type Slide = {
  image: any;
  title: string;
  subtitle: string;
};
const SLIDES: Slide[] = [
  {
    image: require("./img/summer.jpg"),
    title: "Summer",
    subtitle: "Warm days, fun nights.",
  },
  {
    image: require("./img/fall.jpg"),
    title: "Fall",
    subtitle: "Sweater weather, baby.",
  },
  {
    image: require("./img/winter.jpg"),
    title: "Winter",
    subtitle: "The season to be jolly.",
  },
  {
    image: require("./img/spring.jpg"),
    title: "Spring",
    subtitle: "April showers, may flowers.",
  },
];

// Utils
const { width, height } = Dimensions.get("window");

Building the Carousel

Now that we have our data setup, let's go ahead and put together the bones of our carousel. This will consist of a FlatList that will take in our SLIDES data, and a custom component CarouselSlide that is used to render each slide of the carousel. There's a styles object that holds styles for the carousel, but let's not worry about those details right now.

/**
 * Tilt Carousel View
 */
export const TiltCarousel: React.FC = () => {
  return (
    <View style={styles.background}>
      <FlatList
        data={SLIDES}
        renderItem={({ item, index }: { item: Slide; index: number }) => (
          <CarouselSlide slide={item} />
        )}
        horizontal
        snapToInterval={width}
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        decelerationRate={-1}
        bounces={true}
        keyExtractor={(slide: Slide) => slide.title}
      />
    </View>
  );
};

/**
 * Slide item
 */
const CarouselSlide: React.FC<{
  slide: Slide;
}> = ({ slide }) => {
  return (
    <View style={styles.cardContainer}>
      <ImageBackground source={slide.image} style={{ flex: 1 }}>
        <Spacer height={0.7 * height} />
        <View style={styles.cardContentContainer}>
          <AppText style={styles.title}>{slide.title}</AppText>
          <AppText style={styles.subtitle}>{slide.subtitle}</AppText>
        </View>
      </ImageBackground>
    </View>
  );
};

There are a few things to note here:

We'll use the horizontal prop on the FlatList to make our list render horizontally.
We'll set snapToInterval={width} so that the FlatList "snaps" at certain intervals. Importantly: we'll snap to width, the width of the screen. Each carousel slide has a width of width as well, so that we can snap each carousel slide into view.
We'll use scrollEventThrottle={16} and decelerationRate={-1} to control the carousel's slide physics.
At this point, the SlideCarousel just renders an image background using the slide's image, and some text. I'm using custom AppText and Spacer components that render text and space, accordingly.

At this point, we've got a pretty good start. This is what we have:

However, we're going to spice this thing up with some custom animation!

Sprinkling in Some Animation

We're going to give our carousel slides a nice "tilt" effect when they come in and out of view. To do this, we need to do a couple things:

Keep track of the user's scroll position in the FlatList.
Use this scroll position to animate some transforms on each carousel slide.

Keeping Track of the User's Scroll Position.

To add animation around our FlatList scroll, we need to create and track an Animated value that corresponds to how far the user has scrolled along in the FlatList. React Native has an Animated.Value API for creating an animated value (that we can animate the value of and use in styles to created animated effects). We'll use this animated value to track how far the user has scrolled along in the list. To do this, we'll use the onScroll prop of the FlatList and the Animated.event API. We'll go ahead and pass the scrollX value on to each <CarouselSlide /> element.

export const TiltCarousel: React.FC = () => {
+  const scrollX = React.useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.background}>
      <Animated.FlatList
        data={SLIDES}
        renderItem={({ item, index }: { item: Slide; index: number }) => (
-         <CarouselSlide slide={item} />
+         <CarouselSlide slide={item} scrollX={scrollX} index={index} />
        )}
        horizontal
        snapToInterval={width}
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        decelerationRate={-1}
        bounces={true}
        keyExtractor={(slide: Slide) => slide.title}
+       onScroll={Animated.event(
+         [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+         { useNativeDriver: true },
+       )}
      />
    </View>
  );
};

const CarouselSlide: React.FC<{
  slide: Slide;
+ scrollX: Animated.Value;
+ index: number;
-}> = ({ slide }) => {
+}> = ({ slide, scrollX, index }) => {

This change hasn't added any visual changes, but now we have access to scrollX, which keeps track of the user's horizontal scroll position - and we'll use this to animate the carousel slides.

Animate the Carousel Slides

We're going to add a little "tilt" effect to the carousel slides.

To do this, we're going to use the value of scrollX (how far the user has scrolled along the FlatList) and the value of index (the index for each slide item). We'll apply a few transformations to the carousel slide that we'll eventually animate. For now, let's just do a little setup.

const CarouselSlide: React.FC<{
  slide: Slide;
  scrollX: Animated.Value;
  index: number;
}> = ({ slide, scrollX, index }) => {
  // Transforms
  const opacity = 1;
  const scale = 1;
  const perspective = 800;
  const translateX = 0;
  const rotateY = '0deg';

  return (
    <Animated.View
      style={[
        styles.cardContainer,
        {
          opacity,
          transform: [{ scale }, { perspective }, { translateX }, { rotateY }],
        },
      ]}
    >
      <ImageBackground source={slide.image} style={{ flex: 1 }}>
        <Spacer height={0.7 * height} />
        <View style={styles.cardContentContainer}>
          <AppText style={styles.title}>{slide.title}</AppText>
          <AppText style={styles.subtitle}>{slide.subtitle}</AppText>
        </View>
      </ImageBackground>
    </Animated.View>
  );
};

In the above code snippet, we're setting some base values for opacity, scale, perspective, translateX, and rotateY - and then applying these to our slide wrapper. We also turned the View into an Animated.View, since we'll be turning the aforementioned property values into animated values.

Now, let's talk about these properties that we'll be animating - and why.

We'll animate opacity so that as the slide comes in/out of view, we can add a bit of a "disappearing" effect.
We'll animate scale so that as the slide comes in/out of view, it shrinks/grows a little bit.
We'll animate perspective, translateX, and rotateY to give the slide a "tilt" effect. If you swipe the card out to the left, it should "tilt" around the left side of the screen. If you swipe the card out to the right, it should "tilt" around the right side of the screen.

Let's fill these animated values in, and then look at the logic behind them.

const inputRange = [(index - 1) * width, index * width, (index + 1) * width];

const opacity = scrollX.interpolate({
  inputRange,
  outputRange: [0, 1, 0],
});
const scale = scrollX.interpolate({
  inputRange,
  outputRange: [0.6, 1, 0.6],
});
const perspective = scrollX.interpolate({
  inputRange,
  outputRange: [1200, 800, 1200],
});
const translateX = Animated.subtract(scrollX, index * width);
const rotateY = scrollX.interpolate({
  inputRange,
  outputRange: ["-45deg", "0deg", "45deg"],
});

At this point, we've created the "tilt" effect! But we need to loop back and take a look at how we constructed these animated values.

Animated Interpolation

React Native animated values have an interpolate method that allows us to transform an animated value. This is a tremendously powerful tool! We're going to be transforming our scrollX value. The interpolate method takes an inputRange and an outputRange that defines the transformation.

In our case, we have this line:

const inputRange = [(index - 1) * width, index * width, (index + 1) * width];

We can think of this as three "breakpoints" that we'll map from relative to each slide. For example, for the first slide, we can think of this as follows:

As you swipe left, scrollX will vary from index * width to (index - 1) * width. If you were to swipe right, it'd vary from index * width to (index + 1) * width. Therefore, we can think of this inputRange as defining the breakpoints for when the slide is all the way out of the screen's view (to the left), when the slide is fully centered in the screen's view, and all the way out of the screen's view (to the right).

We can then think about how to transform other values based on these "breakpoints". For example, when a slide is out of the screen's view (either to the left or to the right), we want it to "disappear" by applying opacity: 0. When the slide is in the screen's view, we want opacity: 1. Therefore, we can define opacity with the following transformation on scrollX:

const opacity = scrollX.interpolate({
  inputRange,
  outputRange: [0, 1, 0],
});

In a similar manner, we want the slide to sort of "shrink" as it goes out of the view, so we can define:

const scale = scrollX.interpolate({
  inputRange,
  outputRange: [0.6, 1, 0.6],
});

We can think of this like:

Slide is swiped out to the left? scale: 0.6.
Slide is fully in view? scale: 1.
Slide is swiped out to the right? scale: 0.6.
Smoothly animated everything in-between (using linear interpolation).

Transformations for the Tilt

Now all that's left to unwrap is:

const perspective = scrollX.interpolate({
  inputRange,
  outputRange: [1200, 800, 1200],
});
const translateX = Animated.subtract(scrollX, index * width);
const rotateY = scrollX.interpolate({
  inputRange,
  outputRange: ["-45deg", "0deg", "45deg"],
});

I don't want to go into boring details with this, but to create the "tilt" effect around the edges of the screen, we need to perform three consecutive transformations (and order matters!). From a high-level, we can think of these transforms in the following way:

Use perspective to make it seem like the slide is being "pushed away" from the user as the slide is moved off of screen.
Use translateX to shift the slide left/right to determine the axis of rotation for the "tilt".
Use rotateY to create the rotation effect.

With these in place, we get a "tilt" effect! And that concludes this tutorial.

Conclusion

Although the whole "tilt" effect has some complicated math/transformations, I hope that the setup to these transformations is helpful and gives you the tools to start creating your own fancy animations on top of React Native FlatLists! For the purpose of thoroughness, here's the whole code:

import * as React from "react";
import {
  Animated,
  Dimensions,
  ImageBackground,
  StyleSheet,
  View,
} from "react-native";
import { AppText } from "../../components/AppText";
import { Spacer } from "../../components/Spacer";

// Set up our slides
type Slide = {
  image: any;
  title: string;
  subtitle: string;
};
const SLIDES: Slide[] = [
  {
    image: require("./img/summer.jpg"),
    title: "Summer",
    subtitle: "Warm days, fun nights.",
  },
  {
    image: require("./img/fall.jpg"),
    title: "Fall",
    subtitle: "Sweater weather, baby.",
  },
  {
    image: require("./img/winter.jpg"),
    title: "Winter",
    subtitle: "The season to be jolly.",
  },
  {
    image: require("./img/spring.jpg"),
    title: "Spring",
    subtitle: "April showers, may flowers.",
  },
];

// Utils
const { width, height } = Dimensions.get("window");

/**
 * Tilt Carousel View
 */
export const TiltCarousel: React.FC = () => {
  const scrollX = React.useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.background}>
      <Animated.FlatList
        data={SLIDES}
        renderItem={({ item, index }: { item: Slide; index: number }) => (
          <CarouselSlide slide={item} scrollX={scrollX} index={index} />
        )}
        horizontal
        snapToInterval={width}
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={16}
        decelerationRate={-1}
        bounces={true}
        keyExtractor={(slide: Slide) => slide.title}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
          { useNativeDriver: true },
        )}
      />
    </View>
  );
};

/**
 * Slide item
 */
const CarouselSlide: React.FC<{
  slide: Slide;
  scrollX: Animated.Value;
  index: number;
}> = ({ slide, scrollX, index }) => {
  const inputRange = [(index - 1) * width, index * width, (index + 1) * width];

  const opacity = scrollX.interpolate({
    inputRange,
    outputRange: [0, 1, 0],
  });
  const scale = scrollX.interpolate({
    inputRange,
    outputRange: [0.6, 1, 0.6],
  });
  const perspective = scrollX.interpolate({
    inputRange,
    outputRange: [1200, 800, 1200],
  });
  const translateX = Animated.subtract(scrollX, index * width);
  const rotateY = scrollX.interpolate({
    inputRange,
    outputRange: ["-45deg", "0deg", "45deg"],
  });

  return (
    <Animated.View
      style={[
        styles.cardContainer,
        {
          opacity,
          transform: [{ scale }, { perspective }, { translateX }, { rotateY }],
        },
      ]}
    >
      <ImageBackground source={slide.image} style={{ flex: 1 }}>
        <Spacer height={0.7 * height} />
        <View style={styles.cardContentContainer}>
          <AppText style={styles.title}>{slide.title}</AppText>
          <AppText style={styles.subtitle}>{slide.subtitle}</AppText>
        </View>
      </ImageBackground>
    </Animated.View>
  );
};

/**
 * Styling
 */
const styles = StyleSheet.create({
  background: { flex: 1, backgroundColor: "rgba(30,30,30,0.8)" },
  cardContainer: {
    width,
    flex: 1,
    justifyContent: "center",
    borderRadius: 30,
    overflow: "hidden",
  },
  cardContentContainer: {
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.3)",
    padding: 16,
  },
  title: {
    color: "white",
    fontWeight: "bold",
    fontSize: 64,
    textShadowColor: "black",
    textShadowRadius: 4,
    textShadowOffset: {
      width: 1,
      height: 1,
    },
  },
  subtitle: {
    color: "rgb(230,230,230)",
    fontWeight: "600",
    fontSize: 18,
  },
});

Enforcing Rules in JS with Getters and Setters

Grant Sander — Sun, 04 Aug 2019 19:57:22 +0000

TL;DR

JavaScript Getters and Setters can be used to provide custom object properties and enforce business rules. See example here, or in the embed below.

Introduction

Most production applications have at least a few "business rules" (and often times, very many). Enforcing these rules in a client-side application can be challenging and somewhat tedious. I'd like to present one way to enforce such rules using JS getters and setters.

What we will build

To demonstrate this idea, I created a very simple application that revolves around "special rectangles" (I just made this phrase up). In this case, a "special rectangle" is a rectangle that always has the same perimeter (or, distance around the outside of it). So if the width of the rectangle increases, the height has to shrink accordingly. Check out the embed above to get a feel for how the rectangle will behave.

Getters and Setters

Getters and Setters (a.k.a. "Accessors") allow us to define custom object property behaviors.

Getters

MDN defines a "getter" in the following way:

The get syntax binds an object property to a function that will be called when that property is looked up.

Basically, this allows you to make a "custom" readable property on an object. Here's a really simple example:

const obj = {
  x: 7,
  // Double the value of x
  get doubleX() {
    return 2*this.x;
  }
};

console.log(obj.doubleX); // -> 14

obj.x = 12.3;
console.log(obj.doubleX); // -> 23.6

Getters allow us to create "computed" properties with ease. This is wonderful - anytime you update obj.x in the example above, obj.doubleX will be "updated" accordingly - and you never have to do the manual updating.

NOTE: getters only affect accessing a property. That is, we can read obj.doubleX, but at the moment, trying to set this property's value will not work as you might expect.

Setters

MDN defines a setter in the following way:

The set syntax binds an object property to a function to be called when there is an attempt to set that property.

Now, instead of providing behavior for when a property is being read, we provide behavior for when a property is being set. Let's adjust our previous example:

const obj = {
  x: 7,

  // Double the value of x
  get doubleX() {
    return 2*this.x;
  },

  // Setting doubleX: x will be *half* of the value
  set doubleX(val) {
    this.x = val/2;
  }
};

console.log(obj.doubleX); // -> 14

obj.doubleX = 70;
console.log(obj.x); // -> 35

This is really cool stuff! We can create custom properties without having to keep track of excessive amounts of values. This is great for adding custom/computed properties, but it's also great for enforcing business rules!

I like to enforce business rules within setters. That way you can write your rules once, and then just set properties like you normally would. Let's check out an example.

Example: A rectangle with a fixed perimeter

A little scratch work

Before we start writing code, let's make sure we understand our problem space. We want to make a rectangle that has a fixed perimeter, and as the width or height of the rectangle changes - the other dimension will change accordingly. Keep in mind that for any rectangle,

(2 * width) + (2 * height) = perimeter

For reference, here's a diagram representing how the width, height, and perimeter of a rectangle are related.

If we take away the two "width" sides of the rectangle, it leaves us with the two "height" sides. So one "height" side is the perimeter minus two "widths":

height = (perimeter - (2 * width)) / 2

The same goes for the width:

width = (perimeter - (2 * height)) / 2

If we change the width of the rectangle, we need to adjust the height using the first rule above. If we change the height, we set the width using the second rule.

Coding our rectangle rules

We're going to create an ES6 class to apply our new tools and enforce our rules. If you're not familiar with classes in ES6, check out MDN's guide on them. We'll start a file named SpecialRectangle.class.js to hold this Special Rectangle class.

// Create class
export default class SpecialRectangle {}

For this example, we'll instantiate a SpecialRectangle instance with a perimeter that we want to use as the fixed perimeter of the rectangle, and an initial width. If we know the width, we can determine the corresponding height. Let's do that now.

// Create class
export default class SpecialRectangle {
  // Constructor
  constructor(perimeter, width) {
    // Set the perimeter and width
    this.perimeter = perimeter;
    this.width = width;
    // Set the height using the perimeter and width
    this.height = (this.perimeter - 2*this.width)/2;
  }
}

Whenever we set the width of the rectangle, we'll update the height accordingly, so let's abstract this out to a method and use it in our constructor.

// Create class
export default class SpecialRectangle {
  // Constructor
  constructor(perimeter, width) {
    // Set the perimeter and width
    this.perimeter = perimeter;
    // Set the width (which will update the height)
    this.setWidth(width);
  }

  // Set width
  setWidth(val) {
    this.width = width;
    // Set the height using the perimeter and width
    this.height = (this.perimeter - 2*this.width)/2;
  }
}

Now, let's use getters and setters within our class definition so that we can get/set our width and automatically have these rules enforced. Since we already have a width property, we'll create a new property named _width that will "wrap" around the actual width property. There's nothing special about the name _width, call it whatever you'd like.

// Create class
export default class SpecialRectangle {
  // Constructor
  constructor(perimeter, width) {/* ... */}

  // Set width
  setWidth(val) {/* ... */}

  // Get/set the width. Use the helper method we already defined.
  get _width() {
    return this.width;
  }
  set _width(val) {
    this.setWidth(val);
  }
}

Now we can access and "bind to" the _width property of any SpecialRectangle instances and automatically have our rules enforced! We can extend this to the height property as well - the logic is just about the same:

// Create class
export default class SpecialRectangle {
  // Constructor
  constructor(perimeter, width) {/* ... */}

  // Set width
  setWidth(val) {/* ... */}

  // Set the height
  setHeight(val) {
    this.height = val;
    this.width = (this.perimeter - 2*this.height)/2;
  }

  // Get/set the width. Use the helper method we already defined.
  get _width() {/* ... */}
  set _width(val) {/* ... */}

  // Get/set the width. Use the helper method we already defined.
  get _height() {
    return this.height;
  }
  set _height(val) {
    this.setHeight(val);
  }
}

Alright, this handles the base logic for this class! Now we can use it to create "special rectangles". Here's a simple example:

// Import SpecialRectangle class

// Create rectangle with 600 unit perimeter, initial width of 75 units.
const rect = new SpecialRectangle(600, 75);

// Let's set the width
rect._width = 200;
console.log(rect._height); // -> 100

Adding "bumpers" to our dimensions

The width and height of our rectangle should never be less than 0, and either dimension can be at most half of the total perimeter. Rules like this are very common when doing computations, and therefor I almost always create a utility function that will add "bumpers" to a number - so we never go below a minimum, or above a maximum.

Here's an example of such a function:

// Utility function
const keepBetween = (x, min, max) => {
  if (min !== null && x < min) return min;
  if (max !== null && x > max) return max;
  return x;
};

The logic here is pretty simple: just don't allow x to be less than min or more than max. If x is between min and max, we use the value of x.

We can use this function when setting values (or even accessing values!) to make sure we don't do mathematically naughty things (like set the width of a rectangle to a negative number). If we factor this into our SpecialRectangle class, it might look like the following:

/**
 * Utility function to keep a number between two other numbers
 */
const keepBetween = (x, min, max) => {
  if (min !== null && x < min) return min;
  if (max !== null && x > max) return max;
  return x;
};

/**
 * "SpecialRectangle" class
 * - Has a fixed perimeter
 */
export default class SpecialRectangle {
  /**
   * Instantiate a Photo instance
   * @param number perimeter
   * @param number width
   */
  constructor(perimeter, width) {
    // Set the perimeter
    this.perimeter = keepBetween(perimeter, 0, null);

    // Set the width
    this.setWidth(width);
  }

  /**
   * Method to set the width.
   * - Width can be at most half of the perimeter
   * - Compute height based on what's left
   */
  setWidth(val) {
    // Set the length. Can be at most half the perimeter
    this.width = keepBetween(val, 0, this.perimeter / 2);

    // Width is half of what we have left after removing two "lengths" from the perimeter
    this.height = keepBetween(
      (this.perimeter - 2 * this.width) / 2,
      0,
      this.perimeter / 2
    );
  }

  /**
   * Method to set the height.
   * - Works effectively the same as setWidth
   */
  setHeight(val) {
    // Set the width. Can be at most half the perimeter
    this.height = keepBetween(val, 0, this.perimeter / 2);

    // Length is half of what we have left after removing two "lengths" from the perimeter
    this.width = keepBetween(
      (this.perimeter - 2 * this.height) / 2,
      0,
      this.perimeter / 2
    );
  }

  /**
   * Handle getting/setting length
   */
  get _width() {
    return this.width;
  }
  set _width(val) {
    this.setWidth(val);
  }

  /**
   * Handle getting/setting width
   */
  get _height() {
    return this.height;
  }
  set _height(val) {
    this.setHeight(val);
  }
}

Using our class with Vue

Let's create a really simple user interface using Vue.JS to showcase our new class. We'll create a single component with the following JS:

import SpecialRectangle from "@/assets/SpecialRectangle.class";

export default {
  name: "App",

  data: () => ({
    rect: new SpecialRectangle(100, 10)
  })
};

All we're doing is creating an instance of our SpecialRectangle class that we'll use in our template/markup. Since we have getters and setters for the _width and _height properties of our SpecialRectangle instance, we can use Vue's v-model directive to bind right to these properties. For example, we can create a slider to control the width of our rectangle:

<input
  name="length"
  type="range"
  :min="0"
  :max="rect.perimeter/2"
  step="0.1"
  v-model="rect._width"
>

The full code is shown in the embed below. Try using the sliders in the result to see it in action!

With this method, we can push our business rules into class definitions. This keeps our Vue logic clean, and allows us to re-use these rules over and over again!

Conclusion

If you've got a big application with a lot of business/data rules, moving your logic out of your UI components and into class definitions (using getters and setters) can keep your codebase cleaner, and make these rules re-usable.

I'm sure there are some downsides to this approach, and I'd love to hear about them! Let me know what you think.

Webp-ing your site: reduce image file size, increase site performance

Grant Sander — Sat, 06 Apr 2019 02:11:45 +0000

TL;DR

The .webp image format can offer drastic improvements in image file size... I'm talking up to 90% reduction in size (from their .jpg or .png counterparts). Aside from Safari and IE, .webp images have broad browser support, and with tools like sharp, you can easily take your collection of .jpgs and .pngs and convert them to .webp images to serve to browsers that can handle them. It's relatively straight-forward to detect browsers that don't support .webp, and I'll show you one way to handle those browsers.

The code for this example can be found on GitHub.

Back story

I'm a software engineer that works in the graphics/printing industry, so I deal with images... a lot. Most applications I build involve a lot of image (users uploading and editing them, and displaying large collections of user-uploaded content). It's in our best interest to optimize images for the web when displaying them back to users (reduced bandwidth), but more importantly - it can drastically improve site performance and page load speed (since significantly less data is being sent to the user). Recently, I transitioned to using .webp whenever possible, and I'll show you some of the tricks I picked up.

Want to follow along?

If you want to follow along, check out the code on GitHub. You can clone the repository and then run an npm install from the root of the folder (there's only one node module needed, but it's an important one).

How do I create `.webp` images?

sharp. That's how.

There's a decent chance that nobody has ever emailed you a .webp image file, or you've never opened one with a graphics application. So is it a total pain in the arse to transition into using .webp images in your site? At first, I thought so. Turns out, it's not that bad.

Since I regularly deal with large user-uploaded image files, I'm used to converting images into web-ready versions. My back-end technology of choice is Node, and luckily there's an amazing node library for processing images: sharp. Sharp is insanely fast at manipulating images. You can resize and crop a photo in milliseconds. It's a life-saver for me.

You can feed sharp a variety of image types (.jpg, .png, .tiff, etc.), manipulate the image, and output it in various formats - including .webp. I generally use sharp to web-ify user-uploaded images, but it's equally as useful in writing scripts to process your own files. I'll show you one way to use sharp to make .webp copies of your site's images.

If you have my sample repository opened, you can see there's a folder titled /images that contains some images. The only "original" images are dog.jpg and chair.png. We're going to generate the other files.

There's also a file called process-images.js that has the following content:

// Import sharp (processing images) and path (traversing directory)
const sharp = require('sharp');
const path = require('path');

// Create an asynchronous IIFE
(async function(){
  // Where are our image files located?
  const imageDirectory = path.join(__dirname, './images');
  // Which images should we process?
  const imageNames = ["dog.jpg", "chair.png"];
  // What size should we crop to?
  const maxSize = 1000;

  // Loop through the images and process them one at a time.
  for (let imageName of imageNames) {
    try {
      // Start by creating a jpg version
      await sharp(path.join(imageDirectory, imageName)) // This inputs the file into sharp
        .resize(maxSize, maxSize, { fit: "inside" }) // This resizes our image
        .toFile(
          path.join(imageDirectory, imageName.replace(/\.(jpg|png)$/, `_${maxSize}$&`)) // Replace file extensions with .jpg (assumes .jpg or .png)
        ); // This writes the new image.

      // Same thing, but create a .webp version
      await sharp(path.join(imageDirectory, imageName))
        .resize(maxSize, maxSize, { fit: "inside" })
        .toFile(
          path.join(imageDirectory, imageName.replace(/\.(jpg|png)$/, `_${maxSize}.webp`)) // Replace file extensions with .webp (assumes .jpg or .png)
        ); // This writes the new image.

    } catch (_) {}
  } // End loop

  process.exit();
})();

This is the script that will take our "original" image files and create .webp versions of them. Here's what's going on in this file:

We import the path and sharp node modules (path is a native one). Then, we're going to run a function to process our files. At the top of that function you'll see:

// Where are our image files located?
const imageDirectory = path.join(__dirname, './images');
// Which images should we process?
const imageNames = ["dog.jpg", "chair.png"];
// What size should we crop to?
const maxSize = 1000;

This sets some values to use, such as where the files are stored (the imageDirectory variable), what image files to process (the imageNames array), and what size to crop them to (maxSize). Then, we'll loop through each of the files in imageNames and process them.

We'll start by just resizing the "original" image:

await sharp(path.join(imageDirectory, imageName)) // This inputs the file into sharp
  .resize(maxSize, maxSize, { fit: "inside" }) // This resizes our image
  .toFile(
    path.join(imageDirectory, imageName.replace(/\.(jpg|png)$/, `_${maxSize}$&`))
  ); // This writes the new image.

This feeds the image into sharp, tells sharp to resize it, and then outputs the file. The scary expression

imageName.replace(/\.(jpg|png)$/, `_${maxSize}$&`)

Just tells sharp to add a "_1000" before the file extension, so dog.jpg will become dog_1000.jpg and chair.png will become chair_1000.png.

We'll run a similar process, but add a .webp extension to the file. Sharp will automatically write that file as a .webp file - which is where the magic happens. For each of our "original" files, we should have a cropped variant, as well as a cropped .webp variant - all in the same folder.

Once we've got the script written, we need to run the following command from a command line:

node process-images.js

That's all it takes to process our files! As a fun extension, you could easily extend that script to create multiple different sizes of each image (say, one for a thumbnail and one for a "hero" shot).

Using our new images

Most browsers support .webp images - but Safari and IE do not. I think Safari has a large enough browser market-share to justify having a fallback for browsers that don't support .webp images (I try to pretend like IE doesn't exists anymore, but this should handle IE as well). For illustrative purposes, I'm going to display a simple Vue "app" that will show .webp images when possible, and fall back to .jpg or .png when necessary.

In the code repo, you'll find a file index.html which contains very bare HTML and a sprinkle of Vue to show how you could sprinkle in the .webp images. The index.html file contains a tiny bit of HTML:

<div id="app">
  <h1>Webp supported: {{ webpSupported ? 'Yes' : 'No' }}</h1>

  <!-- Show the chair photo -->
  <img
    :src="transformImgExt('/images/chair_1000.png')"
    width="150px"
  />

  <!-- Show the dog photo -->
  <img
    :src="transformImgExt('/images/dog_1000.jpg')"
    width="150px"
  />

</div>

The img tags is where we'll display our new images. If you're not familiar with Vue.js, the :src attribute of the image tags indicates to Vue that we want to have a dynamic src attribute with the value given. We're going to write a function transformImgExt that will take an image URL and replace it with a .webp version if appropriate. So for example, transformImgExt('/images/chair_1000.png') will give us the relative url for /images/chair_1000.png, but try to replace it with /images/chair_1000.webp if the browser supports .webp images.

Detecting browser support

Let's dig into the JavaScript we'll need to detect support for .webp. Here's the JS in the index.html file. (If you aren't familiar with Vue.js, don't worry too much about the details.)

let app = new Vue({
  // What should we mount our Vue instance to?
  el: "#app",

  // App data
  data: {
    // We'll initially assume webp is supported
    webpSupported: true
  },

  // Methods
  methods: {
    /**
     * Helper to transform image extension.
     * Checks if webp is supported, and will swap out the image extension accordingly.
     */
    transformImgExt (url) {
      // If webp is supported, transform the url
      if (this.webpSupported) {
        return url.replace(/\.\w{1,5}$/, ".webp");
      } else { // Otherwise, just return the original
        return url;
      }
    }
  },

  /**
   * When app is "created", we'll run some checks to see if the browser supports webp
   */
  created() {
    (async () => {
      // If browser doesn't have createImageBitmap, we can't use webp.
      if (!self.createImageBitmap) {
        this.webpSupported = false;
        return;
      }

      // Base64 representation of a white point image
      const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
      // Retrieve the Image in Blob Format
      const blob = await fetch(webpData).then(r => r.blob());
      // If the createImageBitmap method succeeds, return true, otherwise false
      this.webpSupported = await createImageBitmap(blob).then(() => true, () => false);

    })();
  } // End created

})

You'll see a data property in the code:

// App data
data: {
  // We'll initially assume webp is supported
  webpSupported: true
}

This is our "application" state. We'll create a state property called webpSupported to hold a boolean indicating whether or not we've got support for .webp. We'll potentially change this value once we do some "sniffing" to see if our browser can handle the .webp images.

Next, let's jump down to the created() section:

/**
 * When app is "created", we'll run some checks to see if the browser supports webp
 */
created() {
  (async () => {
    // If browser doesn't have createImageBitmap, we can't use webp.
    if (!self.createImageBitmap) {
      this.webpSupported = false;
      return;
    }

    // Base64 representation of a white point image
    const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
    // Retrieve the Image in Blob Format
    const blob = await fetch(webpData).then(r => r.blob());
    // If the createImageBitmap method succeeds, return true, otherwise false
    this.webpSupported = await createImageBitmap(blob).then(() => true, () => false);

  })();
} // End created

This is using a technique I found in this article. This snippet checks to see if the browser has a createImageBitmap method - if not, .webp is not supported. Then, we'll create a base64 encoded webp image as a blob and try to create an image bitmap from it. If we can, then the browser supports .webp. There are some technical details behind that, but that's beyond the scope of this post.

At the end of the snippet, you'll notice the statement:

this.webpSupported = await createImageBitmap(blob).then(() => true, () => false);

The RHS of the statement tries to create the image bitmap, and if it's successful the () => true function expression will run (returning true), otherwise the () => false function expression will run (returning false). This gives us a value for this.webpSupported, which references that application state property we looked at earlier. At this point, our data.webpSupported property holds a boolean that actually tells us whether or not our browser supports .webp images.

We've got one last thing to look at: the transformImgExt method:

/**
 * Helper to transform image extension.
 * Checks if webp is supported, and will swap out the image extension accordingly.
 */
transformImgExt (url) {
  // If webp is supported, transform the url
  if (this.webpSupported) {
    return url.replace(/\.\w{1,5}$/, ".webp");
  } else { // Otherwise, just return the original
    return url;
  }
}

This method will take a url, and if .webp is supported it'll swap out the file extension for .webp. Otherwise, it'll just give you the url back.

Let's inspect the line

return url.replace(/\.\w{1,5}$/, ".webp");

a bit further though. If you're not familiar with Regular Expressions in JS, this probably looks like random characters. We're using the string "replace" method. The /\.\w{1,5}$/ is a regular expression that looks for filename extensions. The \. at the start indicates a ".", the \w{1,5} will look for 1 to 5 letters (word characters?), and the $ at the end indicates that it should be at the very end of the string. If we find something that matches, we'll replace what we found with ".webp". This should replace ".jpg" or ".png" with ".webp". (Be careful! This will also transform ".pdf" to ".webp". You could tighten this down more, if needed.)

Now, we can use the transformImgExt to try to serve up a .webp image extension if our browser can handle it. We saw this earlier.

See it in action

I put these resources in a CodePen to showcase this. (The image url's are different because they were uploaded through CodePen.) If you open the pen in Chrome, FireFox, or Edge you should see that the images are indeed .webp. Right click on one and inspect it, or open the image in a new tab and notice that it is indeed a .webp image. If you open the pen in Safari or IE, you should see that the images are .jpg or .png images instead.

How much did we save?

The way .webp files are compressed is pretty neat, but your benefit will vary from image to image. Let's look at the savings from this example.

dog_1000.jpg has a size of 122 KB. dog_1000.webp has a size of 90 KB. That's a 25% savings. Not bad!
chair_1000.png has a size of 778 KB. chair_1000.webp has a size of 81KB. That's an 89.5% savings. That is amazing.

In real-world use, I'm getting on average somewhere between 40-60% savings. .png images seem to provide the most savings, and .webp images support transparency!

Closing comments

.webp is neat. There are some potentially huge file-size savings for using them. However, it takes a little work to get them integrated into a site. Here are some miscellaneous closing comments relative to this.

With sharp, you can control various aspects of the "to-webp" conversion, such as whether you want the compression to be lossless or not, and so on.
Sharp is extremely fast, so it's inexpensive to do these types of conversions.
I've been "webp-ing" static site assets as shown above, but also "webp-ing" user uploads. Generally, when a user uploads a file I'll create a resized .jpg version, as well as a resized .webp. Sharp tears through these in a lightning-fast fashion.
I generally create a method such as the transformImgExt shown above, but expose it throughout my app and use it wherever I'd like to display .webp images. This makes it reusable, and isn't that much work to factor the new image format into your app (with fallback support for Safari and IE).

Destructuring Assignment in JavaScript

Grant Sander — Tue, 06 Nov 2018 23:36:55 +0000

JavaScript is an... interesting... language. I personally love it, but can see why others wouldn't be so fond of it. ECMAScript 6, a.k.a. ES6, introduced a good handful of really nice features that make JavaScript development more enjoyable. In this short post, I want to talk a little bit about destructuring assignment and provide some practical examples where this might be useful.

MDN describes destructuring assignment in the following way:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

This means that you can take an array or object, and easily pluck out values from it and assign them to variables.

Destructuring Assignment with Objects

Suppose you've got an object representing a point in 3-dimensional space:

let myPointInSpace = {
  x: 3,
  y: -2,
  z: 2.7
}

Suppose you want to do some computing with the coordinates of the point [like compute its distance from the origin, (0, 0, 0)], so you'd like to throw the x, y, and z coordinates of the point in some variables for easy reference. One might do the following:

let x = myPointInSpace.x;
let y = myPointInSpace.y;
let z = myPointInSpace.z;

let distance = Math.sqrt(x*x + y*y + z*z);

This certainly works! But if you do that enough times, you might get sick of copy/pasting. With destructuring assignment, you can pluck those coordinates in a much more succinct way! Here's how:

let {x, y, z} = myPointInSpace;

let distance = Math.sqrt(x*x + y*y + z*z);

The curly-braces in this case indicate the destructuring assignment. The first line above looks at the myPointInSpace variable, and looks for any properties indicated within the curly-braces, and will return those back in individual variable assignments.

Conveniently, you can pluck only a subset of an object's property-values. For example, if you just needed the x and y coordinates, you could just as well do:

let {x, y} = myPointInSpace;

Destructuring Assignment with Arrays

Destructuring assignment is great when used with objects, but it can also be used with arrays in a similar way. Let's suppose that instead our point in space is represented as a 3-tuple (or array of 3 values).

let myPointInSpace = [3, -2, 2.7];

The old-school way of plucking the coordinates of this point would be:

let x = myPointInSpace[0];
let y = myPointInSpace[1];
let z = myPointInSpace[2];

With destructuring assignment, we can shorten this to:

let [x, y, z] = myPointInSpace;

Pretty neat!

Some real examples

I read about destructuring assignment a few times before I actually made use of it and appreciating its utility. I showed a simple example above that involved simply plucking values, but I want to showcase a couple more useful examples.

Setting Default Function Values

When writing functions, I often like to use a single object as the input, and then pull values from that object - that way I don't have to worry about the order of my inputs. Destructuring assignment helps with this, and allows us to make use of "default parameters" that were introduced in ES6.

Let's say you want to write a function that takes a number of hours, minutes, and seconds and converts that amount of time into a number of milliseconds. We can do this via the following:

let toMilliseconds = ({
  hours = 0,
  minutes = 0,
  seconds = 0
}) => {
  // Compute the # of ms
  let ms = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000);
  // Return the # of ms
  return ms;
}

This might look like a strange function declaration, but it entails that we can pass in an object as the input to toMilliseconds() and the function will look for keys hours, minutes, and seconds to use. If it doesn't find any one of those keys in the object that was passed in, it will just default to 0. Putting this to use might look like the following:

let ms1 = toMilliseconds({hours: 3, minutes: 42, seconds: 33});
let ms2 = toMilliseconds({minutes: 7});

In the second line above, hours and seconds get defaulted to 0 and we don't have to explicitly pass a number of hours or seconds.

I've grown to like this way of writing functions, as some functions have a lot of a lot parameters that all need defaults - and this form of a function declaration feels readable to me.

Swapping Values

Swapping variables' values is a somewhat common procedure, and often involves creating a temporary variable. Here's a classic example of this.

// Initial values
let x = 5;
let y = 3;

// Now swap, creating tmp variable
let tmp = y;
y = x;
x = tmp;
delete tmp;

However, destructuring assignment makes this more succinct, and in my opinion, a little more readable:

// Initial values
let x = 5;
let y = 3;

// Now swap
[x, y] = [y, x];

If you find yourself swapping variables often, destructuring can be a real nice tool.

Pulling Values and Giving New Names

With object destructuring, you can actually name your variables things other than the keys of the object you are destructuring. Suppose you're using an API, and the API sends back a response where the object has weird names that you don't prefer to use. Something like the following:

let apiResponse = {
  someWeirdKeyForX: 3,
  someWeirdKeyForY: -7
}

We could pull the x and y values out of that response and name them whatever we'd like - say x and y. To do this, we use the following syntax:

let {someWeirdKeyForX: x, someWeirdKeyForY: y} = apiResponse;

The someWeirdKeyForX: x part of the destructuring declares that you want to pull the key someWeirdKeyForX from apiResponse and you'd like to assign it to a variable named x. This can be surprisingly useful. Realistically, I like to use this in scenarios as simple as assigning something like apiResponse.latitude to lat and apiResponse.longitude to lng.

Look out!

One little "gotcha" that I stumbled on a few times was the fact that sometimes you need to wrap your destructuring statements in parentheses. If your destructuring statement doesn't start with a variable declaration keyword (like var, let, or const), you'll need to wrap your statement in parentheses. I'm assuming this is so the compiler knows how to distinguish between the { ... } in the destructuring statement and the { ... } that indicate blocks of code.

Here's what I mean by this. Consider the following code:

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Try to destructure
{x, y} = o; // -> No good!

The compiler doesn't know how to interpret that last line of code. You'll need to change it to:

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Successfully destructure
({x, y} = o); // -> Good!

If you find yourself using destructuring, make sure you're aware of this little caveat!

And more!

MDN has many more examples of destructuring assignment. If you want to know more, check that page out.

In my next post, we'll take a dive into the rest and spread operators in Javascript, and see how they play into destructuring assignment.

Breaking up with my mouse (Mac edition)

Grant Sander — Sat, 20 Oct 2018 03:13:13 +0000

I'm all about being more productive as a developer, so I'm trying to force myself to spend less time moving my right hand from my keyboard to my mouse and back. I've been spending time thinking about how to comfortably become more keyboard-centric. I'm no expert at this, but I figured it's worth sharing my journey thus far.

I work on a Mac (MBP at work, iMac at home), and therefore this post will be about some of the tricks I've discovered that are making my life a little easier (and keeping my hands on the keyboard).

Step 1: Repurpose the Caps Lock key

I don't have much need for my Caps Lock key. I really only use it when I'm writing comments in an angry tone (to remind myself to fix/add something when I get the chance). But, the Caps Lock key is so conveniently located next to my left pinky (which, by the way, isn't super nimble). It'd be nice if I could use that Caps Lock key for something useful... And it turns out, macOS actually allows you to re-bind your Caps Lock key to any of the other modifier keys (Control, Option, Command). Here's how:

Open System Preferences.
Click "Keyboard".
Find the "Modifier Keys..." button at the bottom right and click it.
Select your keyboard (if necessary), then from the "Caps Lock Key:" dropdown, change it out to whatever you please. I'm using Option/Alt, since there doesn't seem to be a lot of system-level hotkeys that use Option.
Voila! Now pressing Caps Lock doesn't actually lock you into capital letters, it has the functionality of the Option key.

Here's a screenshot:

Step 2: Set up Mission Control

MacOS's Mission Control is pretty nice (I think, anyways). It can be nice to have multiple desktops and easily navigate between them. By default, I believe macOS will bind Ctrl + → to "Move right a space", Ctrl + ← to "Move left a space", and so on. That's not a bad default, but I want to be using my new Caps Lock key, since it's easier for my clumsy left pinky to hit that than the Control key. So, I went ahead and changed some Mission Control shortcuts. Here's how:

Open System Preferences and then click "Keyboard".
Click on the "Shortcuts" tab, which allows you to modify a handful of keyboard shortcuts available by default.
Select "Mission Control" from the left-side, and from there you can begin changing the shortcuts. I re-bound the following:
- Set "Mission Control" to Option + I.
- Set "Application windows" to Option + K.
- Set "Move left a space" to Option + J.
- Set "Move right a space" to Option + L.
I chose those bindings so I can use my left pinky to trigger Option, then keep my right hand on the home-row and control Mission Control. This allows me to quickly navigate back and forth between desktops.

Here's a screenshot of my configuration:

Step 3: Set up Spectacle for Window Management

Shout out to Ali Spittel (can I @ people?) and her recent post, clueing me into Spectacle. I was using BetterSnapTool before, but that's not a free app and had more features than I needed. Check Spectacle out here. Spectacle basically allows you to easily snap a window to a certain portion of your screen. So you can quickly snap a window to the left half, or the right half, or fullscreen, etc.. Once you get used to using a tool like this, there's really no going back. Try using it for awhile and then using a Mac without it installed... It's painful.

Once Spectacle gets installed, you'll have to give the app permissions on your Mac. Once that was finished, I opened it up and cleared out all of the shortcuts. I want to keep using my Caps Lock key! So, (amongst others) I set the following:

"Center" to Option + ↓.
"Fullscreen" to Option + ↑.
"Left Half" to Option + ←.
"Right Half" to Option + →.

Here's a screenshot of my settings:

These allow me to use Caps Lock and my arrow keys to snap my windows into different positions. This is particularly helpful on a larger screen where you want to windows side-by-side (say, VSCode next to Chrome) while filling as much space as possible. The follow GIF shows this in action - I'm just holding Caps Lock and pressing different arrow keys!

Step 4: Use Alfred for even more power!

Alfred is a Spotlight replacement tool that does so much more. The free version allows you to do Spotlight-like things (and some other things), and is quite great. I definitely recommend you replace Spotlight with it right now.

Alfred also has a paid extension pack called the "Powerpack" which costs about 19 Euros (about 22 USD). I'm all about my free software (ballin' on a budget), but if I'm going to spend any money on software - it's going to be on the Alfred Powerpack. There are so many cool things you can do with it, but I'll just showcase one cool thing related to this post.

Once you install Alfred, you can choose what hotkey you want to open the Alfred search bar. I'm using Option + A so that I can do Caps Lock + A to quickly open that without moving my fingers from the home-row.

Now, for the rest of this section I'm going to be talking about a feature -- "Workflows" -- that is only available in the Powerpack. If you've got the Powerpack, you can create custom "Workflows" using Alfred. These can consist of various actions triggered in various ways. We can use this functionality to add additional hotkeys! I found that I like binding hotkeys to certain apps, so that I can open an app using a quick hotkey. Mac's Application Switcher (via Command + Tab) is nice, but I don't feel super quick with it when I'm managing 4 or 5 applications.

With Alfred, I like to bind hotkeys to apps in a way that's really easy for me to remember. Here are some examples that I have set up:

Have Option + C (which is also now Caps Lock + C) open VSCode. In my mind, "C" stands for "Code".
Have Option + W open Chrome. In my mind, "W" stands for "Web browser".
Have Option + T open Terminal. Again, "T" for "Terminal".
Have Option + M open Spotify. "M" for "Music".

To do this, open up Alfred's settings/preferences window (you can search "Alfred" from the Alfred spotlight search) and go to the "Workflows" tab (again, assuming you have the Powerpack). Here's how we'll set up Option + C to open VSCode:

At the bottom of the left panel, there's a little + button. Click on that to create a new Workflow, and select "Blank Workflow". Fill in a name for the Workflow. This will then give you a blank canvas.
Right-click in the blank canvas and you'll get a dropdown. Select "Triggers > Hotkey".
Once you select "Hotkey", it'll ask you which Hotkey you'd like to select. I chose Option + C, and you can actually press Caps Lock + C here. Click save once you've selected your hotkey.
Now, right-click on the canvas again and select "Actions > Launch Apps / Files". This will open a dialog for you to "drop a program into". To do this, I triggered Alfred, searched for VSCode - and once I found it, just dragged it from Alfred into the dialog. Press "Save" when you're done.
Now, we just need to link our trigger to our action. Hover your mouse over the Hotkey trigger element on the canvas. It should highlight the element and show a little "knob" on one of its sides. Click and hold on that and start dragging it toward the action. You should be able to connect these two things.

And there you go! Now hitting Caps Lock + C will open up VSCode! Once you've set some of these up, you can start switching between applications easily without having to take your hands off the keyboard!

I'm finding this quite useful when I want to work on a laptop and still have my applications fullscreen. I can toggle between Chrome, VSCode, my terminal, my MongoDB GUI, etc. really quickly!

Share some of your tricks!

I'm new to the "no-mouse gang" and I'd love to hear some suggestions from others! [Vim bindings in VSCode...? Cool hotkeys in Chrome? Other stuff?]

A Keyboard Display using CSS Grid

Grant Sander — Mon, 16 Apr 2018 16:39:07 +0000

A Little Context

I'm certainly not an expert web developer/designer, so I get excited when I discover tools that make my life easier. At the moment, I'm excited about CSS grid. I have known about CSS grid for awhile, but I just now encountered a project that gave me a real idea as to why CSS grid is so great. I'd like to share a little bit about this experience.

I do online math curriculum development (and teach math) for a living, but I recently started doing freelance web development work (because I really enjoy learning about web dev.). I started working on a project for a client, that consists of creating web-based typing lessons. Part of the requirement was to create a non-interactive on-screen keyboard where the keys light up on keystroke.

This was going to be an interesting task, because the layout of keyboards is not very "rectangular," in the sense that keys are offset and some keys are wider or taller than others. Here's what I ended up with:

Bringing in "The Grid"

I noticed that 15 "normal sized" keys fit on a single row of the keyboard, but some rows contain a mixture of "wider" keys and "normal" keys. To handle this, I ended up splitting the keyboard container (the QWERTY keyboard, left side of image above) into 15*4 + 14 = 74 tiny little columns. Each "normal" key spans 4 of these columns, each gap between keys spans 1 column, and the wider keys span a variety of columns. Each row of the keyboard spans just 1 row, whose height is 4 times as large as the width of each column. This is shown here:

To do this, I had a grid container div#qwerty_container to place all of the keys, and then all of the keys are direct children of this container. The CSS (I'm using SASS) for this container is as follows:

$key_size: 32px

#qwerty_container
    display: grid
    grid-template-columns: repeat(74, $key_size/4)
    grid-template-rows: repeat(5, $key_size)
    grid-column-gap: 0px
    grid-row-gap: $key_size/4

The display: grid indicates that this element has a grid layout. The grid-template-columns indicates the size of the columns, and I used the CSS repeat() function to save myself a lot of typing. Similarly, the grid-template-rows indicates the size of the rows.

Then, each child of this container is applied a class prefixed by .g- to indicate how many columns it should span. As an example, a normal key would have the class .g-4 and this class contains the following:

.g-4
    grid-column: auto / span 4

That's about all it takes! The grid-column: auto / span 4 indicates that this class shouldn't affect the starting column of the element, but the element should span 4 columns. I had my list of keys in a JS array, along with how many columns they should span, and then looped through this array and output the grid elements using Vue.JS. Pretty clean!

Why not Flexbox?

I'm not a CSS expert, but I think this could have been done using Flexbox, because I didn't really do anything "vertical" in nature. However, the number pad on the right side (see the first image) has keys that span multiple rows. Now, this is a place for the grid to really shine! I created the number pad in essentially the same way as the QWERTY keyboard. This is what the grid looks like for the number pad:

However, the Plus and Enter keys both span two rows. Two handle that, I merely added an id to both of those keys and added a mere three extra lines of CSS for each of those keys. For example, say the Plus key has an id of numpad_plus. Then we could add the following to our SASS file:

#numpad_plus
    grid-row: auto / span 2
    height: 100%
    justify-content: center

In this case, the grid-row: auto / span 2 indicates that this key should start at its "normal row," e.g. we aren't changing which row it starts at, but that the key should span 2 rows. Basically, this key should span two rows (along with the gap between the rows). The height: 100% and justify-content: center is just for the aesthetics of the keys.

... But is it Responsive?

The keyboard takes up a fair amount of horizontal space, so I wanted to make sure it looked good on narrower screens. CSS Grid actually made this pretty easy to implement. I picked a few breakpoints and added a media query at each. At each break point, I chose a "scale factor," such as 0.8, and essentially scaled everything relative to the grid by that scale factor - making the keyboard about 80% of its original size. Without a whole lot of extra work, I was able to nicely "shrink" the keyboard for smaller screens.

Conclusion

This certainly isn't a comprehensive guide on CSS grid (I recommend CSS Tricks' article for that), but for me, this was an enlightening experience and opened my eyes to the beauty of the grid. I thought I'd share this experience with others.

I'm also aware that I barely tapped into the potential of the grid - which is pretty exciting, because that means I have plenty more to learn and experience with the grid!

Forem: Grant Sander

React Native Tilt Carousel Animation

Overview

A Little Setup

Building the Carousel

Sprinkling in Some Animation

Keeping Track of the User's Scroll Position.

Animate the Carousel Slides

Animated Interpolation

Transformations for the Tilt

Conclusion

Enforcing Rules in JS with Getters and Setters

TL;DR

Introduction

What we will build

Getters and Setters

Getters

Setters

Example: A rectangle with a fixed perimeter

A little scratch work

Coding our rectangle rules

Adding "bumpers" to our dimensions

Using our class with Vue

Conclusion

Webp-ing your site: reduce image file size, increase site performance

TL;DR

Back story

Want to follow along?

How do I create .webp images?

Using our new images

Detecting browser support

See it in action

How much did we save?

Closing comments

Destructuring Assignment in JavaScript

Destructuring Assignment with Objects

Destructuring Assignment with Arrays

Some real examples

Setting Default Function Values

Swapping Values

Pulling Values and Giving New Names

Look out!

And more!

Breaking up with my mouse (Mac edition)

Step 1: Repurpose the Caps Lock key

Step 2: Set up Mission Control

Step 3: Set up Spectacle for Window Management

Step 4: Use Alfred for even more power!

Share some of your tricks!

A Keyboard Display using CSS Grid

A Little Context

Bringing in "The Grid"

Why not Flexbox?

... But is it Responsive?

Conclusion

How do I create `.webp` images?