
<div class="youtube-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/vomuCMmoNyE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

I ran a mock front-end interview on my friend and former coworker DonTheDeveloper's channel, and I've gotten a lot of messages from folks saying that it was really helpful. I figured I'd share it here in case it can help other people. We go through some vanilla JS questions, and put together a little React project.

Huge shoutout to Noa for doing this, and to Don for setting it up.

Best of luck out there, y'all!

❤️ Dan

Front End Mock Technical Interview


TL;DR: When a React component instance rerenders, React compares the elements in the previous element tree with the next one. If it finds that two elements have referential equality, React will skip rerendering that element.

---

For some background, the impetus for this post is an issue we encountered at work a while back. We were running into an issue with React Router 3.x where a route component would rerender, but its children route components wouldn't. In other words...

```jsx
<Router history={hashHistory}>
  <Route
    path="/"
    component={Parent} // This was rerendering due to a state change
  >
    <Route
      path="demo"
      component={Child} // But this was not
    />
  </Route>
</Router>
```

If you'd like to see the behavior yourself, I put together [a little demo](https://codesandbox.io/s/00-react-router-3-child-rerendering-issue-04rgr?file=/src/App.js). To reproduce:

- Load the sandbox, this will load the root '/' route
- Click 'Go to demo'
- Notice that the parent and child components are rendering the same message
- Change the background using the color picker
- Result: The parent updates to show the correct background color, but the child does not
- Expected behavior: Both the parent and child show the correct background color

Why did I expect that behavior? My mental model of React told me that when a parent rerenders, the children rerender (unless they explicitly choose not to via PureComponent, React.memo, etc).

So, what's going on? After a whole lot of digging, I found [the underlying cause](https://github.com/facebook/react/issues/4067#issuecomment-110646627).

> It seems React skips re-rendering for elements that pass `prev === next`.
>
> <cite>Andreas Svensson</cite>

Turns out that React Router v3 caches the React elements it builds. And when React is rendering part of the tree, when it encounteres an element whose reference hasn't changed, **it skips rerendering it.**

Let's unpack this a bit more.

## Elements and strict equality

Let's look at what that means in practice. In the following code, we have two components:

- `<Demo />` - A demo component that has some state (`count`), a button to update the state and trigger a rerender, and two `RenderCountLogger` elements.
- `<RenderCountLogger />` - A component that displays how many times it has rendered.

```jsx
import React, { useState, useRef, useEffect } from "react";

function RenderCountLogger() {
  const renderCountRef = useRef(1);
  useEffect(() => {
    renderCountRef.current += 1;
  });
  return <span>I&apos;ve rendered {renderCountRef.current} times</span>;
}

const renderCountLoggerElement = <RenderCountLogger />;

export default function Demo() {
  const [bool, setBool] = useState(false);
  return (
    <>
      <p>Cached element: {renderCountLoggerElement}</p>
      <p>
        Inlined element: <RenderCountLogger />
      </p>
      <button onClick={() => setBool((currentState) => !currentState)}>
        Rerender parent
      </button>
    </>
  );
}
```

We're rendering two instances of `<RenderCountLogger />`, one on line 17 (aka the "cached element") and one on line 19 (aka the "inlined element"). When we click the button and cause the `<Demo />` to rerender, what happens to the cached element and inlined element? Turns out that only the inlined element rerenders. You can see this behavior below.


<iframe
  src="https://codesandbox.io/embed/01-strict-comparison-9w4nr?fontsize=14&hidenavigation=1&theme=dark&view=preview"
  style="width:100%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
  title="01-strict-comparison"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>


<br />

Why is this? As Andreas pointed out, React won't rerender elements who pass a strict equality check. Since we're assigning the element to the `renderCountLoggerElement` variable on line 11, when the parent's state updates and React starts doing its reconciliation, it encounters this element on line 19, sees that `renderCountLoggerElement === renderCountLoggerElement`, and just moves on without rerendering it.

This is unlike when we use JSX, which is an abstraction over `React.createElement`, which returns a _new_ object. As you probably know `{} === {} // false`, so the strict equality check doesn't pass, and the component rerenders normally.

## Can we rerender cached elements?

Yes! While rerenders that happen up the element tree won't cause our cached element, if a cached element rerenders itself via a `setState` or `forceUpdate`, it'll rerender normally.

It will also rerender normally if it's consuming context and the context provider's value changes. We can see this behavior below.

```jsx
import React, { useState, useContext, createContext } from "react";

const TextContext = createContext();

function TextContextProvider({ children }) {
  const [text, setText] = useState("");
  return (
    <TextContext.Provider value={text}>
      <label>
        <div>Change the text to update the context value</div>
        <br />
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      </label>
      <br />
      {children}
    </TextContext.Provider>
  );
}

function TextContextLogger({ label }) {
  const textContextValue = useContext(TextContext);
  return (
    <p>
      The {label} says the value is: {textContextValue}
    </p>
  );
}

const cachedTextContextLogger = <TextContextLogger label="cached element" />;

export default function Demo() {
  return (
    <TextContextProvider>
      <TextContextLogger label="inlined element" />
      {cachedTextContextLogger}
    </TextContextProvider>
  );
}
```

In this example, we're once again using an inlined element and a cached element but, unlike before, _both_ elements rerender when we change the value of the context provider.


<iframe
  src="https://codesandbox.io/embed/02-context-ey056?fontsize=14&hidenavigation=1&theme=dark&view=preview"
  style="width:100%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
  title="02-context"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

<br />

## Workarounds

So, say you find yourself in a scenario where you're working with cached React elements and you need them to rerender when their parents rerender. What can you do? Simple, just wrap your cached element with `React.cloneElement(el)`. This will clone the element, causing the equality check to return `false`, and your component will rerender normally.


Why don't cached React elements rerender when their parents rerender?


TL;DR - I wrote a custom hook to make `useReducer` easier to use. Wanna try it out? It's available on [npm](https://www.npmjs.com/package/@dgca/react-use-dispatch-methods).

```
npm install --save @dgca/react-use-dispatch-methods
```

Wanna jump to the demo? <a href="#demo">I got you</a>.

---

For a long time, I wasn't a huge fan of Redux. The learning curve felt bigger than it needed to be, the `switch` statements felt unnatural (I _still_ have to look up the syntax for those since I use them so sparingly), and I just wasn't a fan of the API. [Redux Toolkit](https://redux-toolkit.js.org/) addressed most of my issues, but the original way of using Redux wasn't my cup of tea.

Because of this, when React introduced hooks, I was a bit apprehensive of `useReducer`. I appreciate what it does, but again with the `switch` statements, and having to write a lot of the boilerplate yourself.

That's why I decided to wrap `useReducer` in a custom hook that implements what I believe is a simpler way of using it. Meet [`useDispatchMethods`](https://github.com/dgca/react-use-dispatch-methods)!

So, how does it work?

```js
const [state, dispatch] = useDispatchMethods(
  methods,
  initialState, // optional
  init, // optional
  dependencyArray // optional
);
```

## Arguments

- `methods (Object<string, function>)` - This is an object where each value is a function that returns the updated state, and each key is the name of the dispatch method you'll use later on. Each function will receive an object of `{state, payload}` as its single argument. `state` is the current state, and `payload` is the argument that was passed to the dispatch method (more on this in a bit).
- `initialState (?*)` - The initial state, same as `useState` or `useReducer`.
- `init (?function)` - A function to lazily initialize the initial state, same as `useReducer` (see: [React's docs on this](https://reactjs.org/docs/hooks-reference.html#lazy-initialization)).
- `dependencyArray (?Array<*>)` - In order to prevent recreating some internal objects on subsequent rerenders, `useDispatchMethods` uses React's `useCallback` and `useMemo`. If you need to change the functions in the methods object, you can pass a `dependencyArray` and we'll forward those onto `useCallback` and `useMemo`. Odds are, you won't have to worry about this.

## Return value

- `state (*)` - The current state, same as `useState` or `useReducer`.
- `dispatch (Object<string, function>)` - Alright, here's the fun part. Remember the `methods` object you passed in earlier? `dispatch` is an object that has the same keys. In order to update your state, just call `dispatch.someUpdateFunction(optionalPayload)`. When you call a dispatch method (eyy, there's where the hook's name comes from), you're actually dispatching an action and the underlying `useReducer`'s reducer function figures out which update function it needs to use to modify the state!

## <span id="demo">Demo</span>

So, let's see this in action. First, a demo of our custom hook in use. We're using `useDispatchMethods` to modify the state that controls the component's background color, and the width of the border. It's ugly, I know.

```dangerouslySetInnerHTML
<iframe
  src="https://codesandbox.io/embed/dgcareact-use-dispatch-methods-demo-6349k?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark&view=preview"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="@dgca/react-use-dispatch-methods demo"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
```

<br />

So, in short, we're defining our update functions by passing an object of functions the first argument. Each function receives an object of `{state, payload}` as its argument, and it returns the new state.

The color input shows that you can call a dispatch method with a payload (in this example, it's the input's `e.target.value`). That's the `payload` that gets passed to the update function. If you don't need to use the payload, you don't have to pass one.

One thing to note is that the update functions must return the entire new state object. In this example, that means cloning the state object by spreading it onto a new object and updating only the property we need to update. You could also use a library like [Immer](https://github.com/immerjs/immer) to facilitate this.

```js
export default function App() {
  const [state, dispatch] = useDispatchMethods(
    {
      setColor: ({ state, payload }) => ({
        ...state,
        color: payload,
      }),
      increaseBorderWidth: ({ state }) => ({
        ...state,
        borderWidth: state.borderWidth + 1,
      }),
      decreaseBorderWidth: ({ state }) => ({
        ...state,
        borderWidth: state.borderWidth - 1,
      }),
    },
    {
      color: "#fff",
      borderWidth: 10,
    }
  );
  return (
    <div
      className="App"
      style={{
        backgroundColor: state.color,
        borderWidth: `${state.borderWidth}px`,
      }}
    >
      <h1>
        <code>useDispatchMethods</code> demo:
      </h1>
      <label>
        Change background color:&nbsp;&nbsp;
        <input
          value={state.color}
          type="color"
          onChange={(e) => dispatch.setColor(e.target.value)}
        />
      </label>
      <br />
      <br />
      <button onClick={dispatch.increaseBorderWidth}>
        Increase border width
      </button>
      &nbsp;
      <button onClick={dispatch.decreaseBorderWidth}>
        Decrease border width
      </button>
    </div>
  );
}
```

Neat, right? If you're into this, and you want to use it, it's available on [npm](https://www.npmjs.com/package/@dgca/react-use-dispatch-methods), or just grab the code from this [Gist](https://gist.github.com/dgca/b5e0578dbd2694363885cf7d22bf6270) and paste it into your project.


useDispatchMethods - a simpler abstraction over React's useReducer


Holy moly, it's been 4 years since I wrote my last blog post. In short, I didn't love my previous site and it made it hard to work up the motivation to put work into it. I kept telling myself I'd start writing again once I made a new website, and 4 years later, here we are.

A lot has changed for me since I last wrote anything. The biggest change is probably that I'm now the front-end lead at [Albert.io](https://www.albert.io/). I also got a hamster named Phoebe. She is an angel.

That's all that changed. I lied about it being a lot.

On the tech side, I've been working with React for 5 years now, and have a ton of stuff I'd love to write about React and the ecosystem. I've also picked up a lot of general knowledge about front-end dev, vanilla JS, Node, and more. All things that I'm very excited to write about.

I've also put together some talks for Meetups here in Chicago, and I'm planning on recording them and putting them online as well.

I'm pretty happy with this new website and how easy it is to get new posts up, so hopefully that will encourage me to post more often.

If you're curious, this site is:

- Built using the [Next.js](https://nextjs.org/) React framework
- Hosted on [Vercel](https://vercel.com/)
- Styled using [Styled Components](https://styled-components.com/)
- Blog posts are just Markdown files rendered using [gray-matter](https://github.com/jonschlinkert/gray-matter) and [react-markdown](https://github.com/rexxars/react-markdown)
- Contact form is using [Hubspot](https://www.hubspot.com/)

All the stuff above means it's hosted and maintained for free, so I'm super greatful to the folks behind those tools and services.

That's all I have for now, expect some more technical posts soon!


New website after a long hiatus!


I recently [built a website](http://www.kevinhsia.com/) for my friend Kevin to promote his skills, one of them being photography. He asked for an image carousel to show off some of his photos—so, instead of picking up one of the thousands of existing image carousel libraries, I decided to roll my own. You know, for kicks.

Check the carousel in action [right here](http://www.kevinhsia.com/photo/).

Since my [last post about carousels](/web-design/2015/05/17/how-to-make-carousel-only-html-css-no-javascript.html) got lot of attention, I decided to write this post you now find yourself reading.

I wanted to keep the markup dead simple because, when I was starting out with web dev, I actually found a lot of the carousel libraries out there to be overly complicated, some with really weird markup requirements. So, after some thought, I came up with the following structure for the markup:

```html
<div id="fancy-carousel">
  <img src="./images/01.jpg" alt="Alt text goes here :-)" />
  <img src="./images/02.jpg" alt="Alt text goes here :-o" />
  <img src="./images/03.jpg" alt="Alt text goes here ;-p" />
</div>
```

So, basically, I have a `div` with the `id` _fancy-carousel_, I put images in it, and the JavaScript does all the work for me. No data attributes or complicated markup structure. After everything is put together, it looks something like this:

```dangerouslySetInnerHTML
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="dgca" data-slug-hash="zqZqpN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Fancy Carousel">
  <span>See the Pen <a href="https://codepen.io/dgca/pen/zqZqpN">
  Fancy Carousel</a> by Daniel Cortes (<a href="https://codepen.io/dgca">@dgca</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
```

<br />

So what’s happening is the JS finds our `div#fancy-carousel`, creates two new `div`s, each stacked on top of each other, and uses the top (as in z-order) one to house the controls—the previous and next arrows.

The `div` underneath (let’s call it the ‘display `div`’) is responsible for displaying the current image. I created an array out of the image sources, which is then applied as the display `div`’s background image. When the next arrow is clicked, the next image source in the array is set as the display `div`’s background. Clicking the previous arrow sets the background image to the previous item in the array.

One thing I wanna point out is that a _fancy-carousel–active_ class is being added to the main carousel wrapper, and a _hide_ class is being added to the `img` elements as they go through the `for` loop that creates the array of image sources. This is so we can conditionally style the carousel if the JS runs. If you open up the Codepen example on the Codepen site and delete all the JS code, you’ll see that the images render how they would normally render on the page.

So here’s the final JS code, with comments to explain what’s going on.

```js
var fancyCarousel = document.getElementById("fancy-carousel");
if (fancyCarousel && fancyCarousel.hasChildNodes()) {
  // Create the divs that we'll be adding to the DOM to create our markup structure
  // imagesWrapper will display the image via its backgroundImage CSS property
  // controlsWrapper will contain the previous and next arrows
  var imagesWrapper = document.createElement("div");
  var controlsWrapper = document.createElement("div");
  var prevArrow = document.createElement("div");
  var nextArrow = document.createElement("div");
  // Add classes to our markup so we can style it later
  fancyCarousel.classList.add("fancy-carousel--active");
  imagesWrapper.classList.add("fancy-carousel__images-wrapper");
  controlsWrapper.classList.add("fancy-carousel__controls-wrapper");
  prevArrow.classList.add("fancy-carousel__prev-arrow");
  nextArrow.classList.add("fancy-carousel__next-arrow");
  // Add the previous and next arrow divs to the controlsWrapper
  controlsWrapper.appendChild(prevArrow);
  controlsWrapper.appendChild(nextArrow);
  // Add the imagesWrapper and controlsWrapper to the carousel wrapper
  fancyCarousel.appendChild(imagesWrapper);
  fancyCarousel.appendChild(controlsWrapper);

  // Create an array out of the source attribute of any images in the carousel
  // Add a 'hide' class to the image as they're being iterated on
  var childNodes = fancyCarousel.childNodes;
  var imagesArray = [];
  for (var i = 0; i < childNodes.length; i++) {
    var currentNode = childNodes[i];
    if (currentNode.nodeName === "IMG") {
      imagesArray.push(currentNode.src);
      currentNode.classList.add("hide");
    }
  }

  // Set the imagesWrapper's background image to the first image in the imagesArray
  imagesWrapper.style.backgroundImage = `url(${imagesArray[0]})`;

  // Here we begin setting up the logic for transitioning between images
  // First step, set up some variables for the current image index,
  // and the number of images in the images array
  var currentImage = 0;
  var numberOfImages = imagesArray.length;

  // Set up event listeners to call the handleSlideshowArrow() function
  // when the arrows are clicked
  prevArrow.addEventListener("click", function () {
    handleSlideshowArrow("prev");
  });
  nextArrow.addEventListener("click", function () {
    handleSlideshowArrow("next");
  });

  // Let's use those currentImage and numberOfImages variables from up there
  // If 'prev' arrow is clicked, decrease currentImage by one,
  // else if 'next' arrow is clicked increase currentImage by one
  // ...plus some extra logic so that we don't go into the negatives
  // or get to an index that doesn't exist
  function handleSlideshowArrow(val) {
    if (val === "prev") {
      if (currentImage > 0) {
        currentImage--;
      } else {
        currentImage = numberOfImages - 1;
      }
    } else if (val === "next") {
      if (currentImage < numberOfImages - 1) {
        currentImage++;
      } else {
        currentImage = 0;
      }
    }
    // Alright, so we're not actually going to be going to the next image
    // in this function, but we're going to add a 'fade-out' class to our
    // imagesWrapper so that we can have a nice fade transition from item
    // to item
    imagesWrapper.classList.add("fade-out");
    // And we're going to add an event listener that's going to do the
    // transitioning as soon as the fade out transition ends, so let's go
    // into that function below
    imagesWrapper.addEventListener("transitionend", handleTransitionEnd);
  }

  function handleTransitionEnd() {
    // So since our fade out transition has ended, we can remove the event listener
    imagesWrapper.removeEventListener("transitionend", handleTransitionEnd);
    // We set the background image to the current image in the imagesArray
    imagesWrapper.style.backgroundImage =
      "url(" + imagesArray[currentImage] + ")";
    // And we remove the fade-out class, which is gonna make our image fade back in
    imagesWrapper.classList.remove("fade-out");
  }
}
// And there we go, that's it for the JS
// Next up, the SCSS
```

```scss
// Since we're going to be stacking divs on top of each other, we have
// to make the main wrapper position relative
.fancy-carousel--active {
  background-color: #49708a;
  height: 300px;
  overflow: hidden;
  position: relative;

  // And those images that we added a 'hide' class to—well, we're not gonna
  // totally hide them with 'display: none' or 'visibility: hidden', because
  // we still want screen readers to know about them
  .hide {
    left: 100%;
    position: absolute;
    top: 100%;
  }
}

// Stack the images and controls wrapper, and make
// them the same size as the main container
.fancy-carousel__images-wrapper,
.fancy-carousel__controls-wrapper {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

// Let's center those images in the images wrapper,
// and set our fade out transition which is what the
// event handler listens to so that it switches out
// the images when the image is fully transparent
.fancy-carousel__images-wrapper {
  background-position: 50% 50%;
  background-size: cover;
  opacity: 1;
  transition: opacity 0.25s;

  &.fade-out {
    opacity: 0;
  }
}

// Here we set up the base styles of the previous and next arrows
.fancy-carousel__prev-arrow,
.fancy-carousel__next-arrow {
  background-color: black;
  border-radius: 50%;
  cursor: pointer;
  height: 30px;
  opacity: 0.35;
  position: absolute;
  top: 50%;
  transition: opacity 0.25s;
  transform: translateY(-50%);
  width: 30px;

  &:hover {
    opacity: 0.55;
  }

  // And we make the arrows themselves out of pseudoelements
  &::before {
    border-bottom: 3px solid white;
    border-left: 3px solid white;
    content: "";
    display: block;
    height: 10px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 10px;
  }
}

// Position the arrows
.fancy-carousel__prev-arrow {
  left: 5px;

  &::before {
    transform: translateY(-50%) translateX(-30%) rotate(45deg);
  }
}

.fancy-carousel__next-arrow {
  right: 5px;

  &::before {
    transform: translateY(-50%) translateX(-60%) rotate(225deg);
  }
}
// And that's it!
```

So yeah, there you go. HTML, SCSS, and vanilla JS carousel! I’m pretty happy with how this turned out. It works super well on mobile as well as desktop, gracefully degrades if someone doesn’t have JS turned on for whatever reason, and is super easy to integrate.

That said, there are three things I want to do to improve this. For one, we don’t need to load all the images right away. Ideally, the images would load as they’re needed. Secondly, I would like to add swipe support so that you don’t have to tap the arrows on touchscreens. Finally, I’d like to make the whole thing class-based instead of ID based. As is, this wouldn’t work if you needed more than one carousel on screen at a time.

Well, that’s it for this post! If you read this far, thanks for sticking with this and I hope you learned something from this write-up.


Carousels pt. - Building a JS carousel from the ground up


On Turkey day, I was on Designer News and came across [this post](https://medium.com/@mjtweaver/css-product-magnification-without-javascript-497ab5932419#.gq4x4kksq) by [Michael Weaver](https://twitter.com/mjtweaver) that shows a really clever use of the `:on-hover` pseudo-selector and the (`~`) general sibling selector to create a mouseover zoom effect that follows your mouse cursor—similar to the effect that Amazon uses for its product photos—all without the use of JavaScript.

I wondered if it was possible to use SCSS and Jade's for loops to pull this off using a variable grid, instead of having to hardcode everything.

With a bit of work, I was able to put the following together. Note that the color overlays are just to show where the grid items are.

```dangerouslySetInnerHTML
<p data-height="450" data-theme-id="0" data-slug-hash="JYQvbj" data-default-tab="result" data-user="dgca" class='codepen'>See the Pen <a href='http://codepen.io/dgca/pen/JYQvbj/'>No-JS On-Hover Image Zoom</a> by Daniel Cortes (<a href='http://codepen.io/dgca'>@dgca</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
```

So what's different about this approach than the original inspiration? Using Jade and SCSS, this approach lets us change the grid size by changing just two numbers—a variable in the Jade markup, and a variable in the SCSS markup.

The Jade is simple enough, using a single variable which we multiply by itself to generate the right number `div.grid-item` which act as the controls which shift the image around when it is zoomed. So in this example, our `gridRoot` variable is 5, so we get a 5x5 grid.

```pug
div.grid-wrapper

- var gridRoot = 5;
- for (i = 0; i < gridRoot \* gridRoot; i++)
  div.grid-item
  img.zoom-image(alt='placeholder image' src='http://www.fillmurray.com/g/400/400')
```

And here's the workhorse of this project, the SCSS. Note that it also has a `$grid-root` variable. This needs to match the Jade's `gridRoot` variable in order for everything to work. We also set the size of the container and the on-hover zoom factor in the first three lines. Other than these three variable, the rest of the code can be left alone, as these three variables control the logic for how the rest of the code is generated.

For readability purposes, I'm just going to explain the rest of what's going on via code comments.

```scss
$container-size: 400px;
$grid-root: 5;
$zoom-factor: 1.5;
// The above variables control all the output logic!

// $zoom-size is the size of the image once it's
// zoomed in.
// $offset is the amount of the image that hangs off
// the wrapper div once it's zoomed in.
// $stepper-count lets us pen the whole image if the
// grid is an odd number of units across.
// $stepper is the number of pixels we need to shift
// the image as we move from grid item to grid item.
$zoom-size: $container-size \* $zoom-factor;
$offset: $zoom-size - $container-size;
$stepper-count: $grid-root;
@if $grid-root % 2 == 1 {
  $stepper-count: $grid-root - 1;
}
$stepper: $offset / $stepper-count;

// Here's the main wrapper. Flexbox FTW.
.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: $container-size;
  overflow: hidden;
  position: relative;
  width: $container-size;
}

// Here are the individual grid items—each sized
// according to the size of the grid.
.grid-item {
  height: 100% / $grid-root;
  width: 100% / $grid-root;

  // SCSS has a neat percentage() function which
  // takes our 1.5 and turns it into 150%
  &:hover ~ img {
    height: percentage($zoom-factor);
    width: percentage($zoom-factor);
  }

  // This loop iterates through the size of the grid
  // and offsets the left and top positions accordingly
  @for $i from 1 through $grid-root {
    // Because SCSS thinks the stuff between the () is
    // a string, you have to interpolate variables using #{}
    &:hover:nth-of-type(#{$grid-root}n + #{$i}) ~ img {
      left: (($i - 1) * $stepper) \* -1;
    }

    // Here we create a variable to get the math right for
    // how we shift the image when moving vertically
    $t: (($i - 1) * $grid-root) + 1;

    &:hover:nth-of-type(1n + #{$t}) ~ .zoom-image {
      top: (($i - 1) * $stepper) * -1;
    }
  }
}

// Base styles for the image element. Note the z-index
// of value -1. Without this, our image would be on
// top of our grid, and we wouldn't be able to hover
// on our grid items!
.zoom-image {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}
```

And that's it for that. With a change of two variables, we could make a 10x10 or 25x25 grid.

> Yeah, yeah, but your scientists were so preoccupied with whether or not they could that they didn't stop to think if they should.
>
> — <cite><small>Dr. Ian Malcolm</small></cite>

Before wrapping up, I should mention that this is purely a proof of concept. Accomplishing this effect would be a job much better suited for JavaScript. It was a fun problem to tackle, though, and shows off some of SCSS's more advanced features, like its [built-in functions](http://sass-lang.com/documentation/Sass/Script/Functions.html), and what you can do with its [@for](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10) loops.


On-hover image zoom effect using SCSS and Jade


CSS transitions are pretty awesome. They're straight-forward to write, supported by all modern browsers, and add a bit of interactivity without the need for JavaScript (save some adding or removing classes).

In a nutshell, they're a way to animate the change in value of a property of an HTML element. So say you have an image, such as the one below with the class of _.kitten_, and you want it to fade out on hover, you could add a rule to the `:hover` pseudo-class that goes something like:

```css
.kitten:hover {
  opacity: 0;
  transition: opacity 0.5s linear;
}
```

...and our kitten will fade out like this (hover your mouse on Tiger <span style="font-style:italic">[sorry, mobile peeps, but if you tap Tiger, he probably won't come back]</span>):

<figure>
  <img class="kitten" style="display:block;margin:0 auto;" src="/images/blog/sleepy-kitten.jpg">
  <figcaption>Internet, meet tiger.</figcaption>
</figure>

But, you may have noticed that while our kitten fades out on hover, it pops back in on mouseleave. Why? Because our `transition` is tied to the `:hover` state, so when our mouse leaves the image, we go back to `.kitten`'s lack of `transition`, which is a delay of 0 seconds, and a transition time of 0 seconds. In other words, no transition.

That's actually a pretty cool because it means we can give our elements different transition properties based on their class (or pseudoclass). That gives us the ability to have different animations depending on whether we're adding or removing classes, kind of like this:

```dangerouslySetInnerHTML
<style type="text/css">
.kitten:hover {
  opacity: 0;
  transition: opacity 0.5s linear;
}

.circle {
  background-color: #B266FF;
  border-radius: 50%;
  height: 40px;
  left: 0;
  margin-bottom: 10px;
  position: relative;
  transition: left 2s ease-out;
  width: 40px;
}

.animate .circle {
  left: 90%;
  transition: left 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.animate .item-2 {
  transition-delay: 0.5s;
}

.animate .item-3 {
  transition-delay: 1s;
}

.animate .item-4 {
  transition-delay: 1.5s;
}
</style>

<figure class="demo">
  <div class="circle item-1"></div>
  <div class="circle item-2"></div>
  <div class="circle item-3"></div>
  <div class="circle item-4"></div>
  <figcaption>Mmm, class-based animations.</figcaption>
</figure>
<button type="button" class="demo-button">Toggle the thing!</button>

<script type="text/javascript">
  (() => {
    const button = document.querySelector('.demo-button');
    const demo = document.querySelector('.demo');
    button.addEventListener('click', () => {
      demo.classList.toggle('animate');
    });
  })();
</script>
```

<br />

So, what's cool about that? Well, aside from the bit of JavaScript we're using to toggle the `.animate` class in the `figure` above, the animations are all just CSS transitions. The markup for this is just:

```html
<figure class="demo">
  <div class="circle item-1"></div>
  <div class="circle item-2"></div>
  <div class="circle item-3"></div>
  <div class="circle item-4"></div>
  <figcaption>Mmm, class-based CSS animations.</figcaption>
</figure>
<button type="button" class="demo-button">Toggle the thing!</button>
```

So, what's our CSS doing to create this effect? First, let's look at the CSS in its entirety.

```css
.circle {
  background-color: #b266ff;
  border-radius: 50%;
  height: 40px;
  left: 0;
  margin-bottom: 10px;
  position: relative;
  transition: left 2s ease-out;
  width: 40px;
}

.animate .circle {
  left: 90%;
  transition: left 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.animate .item-2 {
  transition-delay: 0.5s;
}

.animate .item-3 {
  transition-delay: 1s;
}

.animate .item-4 {
  transition-delay: 1.5s;
}
```

## Now, let's walk through each piece

```css
.circle {
  background-color: #b266ff;
  border-radius: 50%;
  height: 40px;
  left: 0;
  margin-bottom: 10px;
  position: relative;
  transition: left 2s ease-out;
  width: 40px;
}
```

So here's where we turn empty `div.circle`'s into 40px by 40px purple circles. We also explicitly define a few things that make this whole effect possible.

For one—and most importantly for the topic at hand—we set the default `transition` property for our `.circle`'s to `all 2s ease-out`. For context, `transition` is a shorthand property that defines a few things, such as what property we're setting the transition for, how long the transition should take, what (if any) delay there should be before our transition begins, and what easing function should be used to transition between the two values. Learn more about it on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/transition).

So, why did we define it here? Well, remember our cat up there? If we didn't define the base state, then when we toggled off the `.animate` class, our circles would immediately jump back to their initial state without that smooth transition effect we're going for. We want the default transition to apply to the `left` property, transition over `2 seconds`, and use a `ease-out` transition-timing-function. Again, `transition` is a shorthand for all of these individual properties.

Which leads us to the next thing we're doing. We're explicitly defining `left: 0` because without it, our browser wouldn't know what value to transition the `left` property from, to our final state of `.animate .circle { left: 90% }`. Why do we need it? Well, `left`'s initial value is `auto`, which is not a numerical value. Again, remember Tiger the cat? We didn't need to explicitly define his `opacity` because `opacity`'s initial value is `1`. In order to use the transition property, your starting and ending values need to compute to a numerical value, or your browser won't know how to go from one to the other.

And, finally, we're giving our `.circle`'s relative positioning so we can actually move them using the `left` property.

```css
.animate .circle {
  left: 90%;
  transition: left 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
```

Once we add the `.animate` class to our containing `figure` element, we're going to move our circles over to the left by 90%. We're also going to overwrite the transition property of our `.circle`'s to something that's a little faster and more bouncy. We're bringing the `transition-duration` down from `2s` to `1s`, and we're going to switch up the `transition-timing-function` to a custom cubic bezier curve we made in Chrome's dev tools.

A quick note about that, in the more recent versions of the Chrome inspector, when you have an element with a transition property, you'll see this little square with a squiggly line in it. If you click that square, you can actually edit the bezier curve visually and copy its values to use in your CSS.

<figure>
  <img style="display: block; margin: 0 auto;" src="/images/blog/example-chrome-inspector-transition-curve.png">
  <figcaption>Chrome inspector's bezier curve tool</figcaption>
</figure>

For me, it's a lot of trial and error, but you can get some pretty complex animation curves out of that thing.

Finally, we have:

```css
.animate .item-2 {
  transition-delay: 0.5s;
}

.animate .item-3 {
  transition-delay: 1s;
}

.animate .item-4 {
  transition-delay: 1.5s;
}
```

This is pretty self explanatory, but we're setting a delaying the animation for some of our items. Because the default `transition-delay` is `0` and we want the animation to start when we click the button, we don't need to worry about setting a `transition-delay` for our first item. We did set one for items two through four, incrementing each by half a second. That way, we get that staggered effect where each item starts moving a little after the one before.

So that's it! When our `figure` has the `.animate` class, we stagger the delay of the transition, and use a bouncy bezier curve we made with Chrome's inspector (love you, Chrome!). When we remove the class, our `.circle`'s animate back with their simultaneous less bouncy transition.

One last thing I want to mention is that you can stack values for the `transition` property, meaning you could have specific delays and timing functions for different properties you're animating. Hover over this red square for an example.

```dangerouslySetInnerHTML
<style type="text/css">
div.example {
  background-color: red;
  height: 100px;
  width: 100px;

  margin: 0 auto;

  transition: all 1s linear;
}

div.example:hover {
  background-color: blue;
  height: 200px;
  width: 200px;

  transition: background-color 0.25s linear,
              height 1s 1s ease-in,
              width 2s ease-out;
}
</style>
```

<figure>
  <div class="example"></div>
  <figcapture>This ain't pretty, but what's happening is pretty interesting</figcapture>
</figure>

```css
div.example {
  background-color: red;
  height: 100px;
  width: 100px;

  margin: 0 auto;

  transition: all 1s linear;
}

div.example:hover {
  background-color: blue;
  height: 200px;
  width: 200px;

  transition: background-color 0.25s linear, height 1s 1s ease-in,
    width 2s ease-out;
}
```

So we have a 100px by 100px red `div`. On over, we're making it blue, and upping its size to 200px by 200px. Finally, in our `div.example:hover` rules, we have multiple values for the `transition` property for each of the properties we're animating. Take a look at the `height` rule. Notice how it has two `1s` values? We haven't seen `transition-delay` in a shorthand property in this post, but it can be passed to transition as a 2nd duration value, after `transition-duration`. Pretty neat stuff!

CSS transitions are pretty neat things, and by setting different durations, delays, and timing functions, you can create complex animations rather easily. I hope this post was valuable to some of you. I hope you enjoyed this. Let me know your thoughts or teach me a thing or two about CSS animations by contacting me Twitter at [@ddggccaa](https://twitter.com/ddggccaa).


Using multiple class-based CSS transitions to create staged animations

Recently, I've been working on a site that uses a CMS that's a bit limiting. I can add my own HTML and CSS to the site, but JavaScript is off-limits.

The designs I'm working from included a carousel. I had some ideas of how I could make that work using CSS animations and the transform property, but that would leave me with a carousel that scrolled automatically and didn't allow for user input which wasn't really what I was looking for. After some thinking, I eneded up with a solution that uses absolute positioning and the _:target_ pseudo-selector to change the _z-index_ and _opacity_ of our carousel items to cycle through them. It looks something like this:


<div>
<div class="carousel-wrapper" style="height: 400px;">
  <span class="hidden-target" id="target-item-1"></span>
  <span class="hidden-target" id="target-item-2"></span>
  <span class="hidden-target" id="target-item-3"></span>
  <div class="carousel-item item-1 light" style="background: url(/images/css-carousel/soccer.jpg) 50% 50% / cover;">
    <h2>This is the first item</h2>
    <p>Idque Caesaris facere voluntate liceret: sese habere. Qui ipsorum lingua Celtae, nostra Galli appellantur. Inmensae subtilitatis, obscuris et malesuada fames.</p>
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  <div class="carousel-item item-2">
    <h2>This is the second item</h2>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Idque Caesaris facere voluntate liceret: sese habere. Cum sociis natoque penatibus et magnis dis parturient. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.</p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3 light" style="background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url(/images/css-carousel/harbor.jpg) 50% 50% / cover;">
    <h2>And finally, the third</h2>
    <p>Quis aute iure reprehenderit in voluptate velit esse. Cum ceteris in veneratione tui montes, nascetur mus. Prima luce, cum quibus mons aliud  consensu ab eo. Quam temere in vitiis, legem sancimus haerentia. Sed haec quis possit intrepidus aestimare tellus.</p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>
<style>
.carousel-wrapper {
  position: relative;
  margin-bottom: 20px;
}
.carousel-wrapper .carousel-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 50px;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.carousel-wrapper .carousel-item .arrow {
  position: absolute;
  top: 0;
  display: block;
  width: 50px;
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: url("/images/css-carousel/carousel-arrow-dark.png") 50% 50%/20px no-repeat;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev {
  left: 0;
}
.carousel-wrapper .carousel-item .arrow.arrow-next {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.carousel-wrapper .carousel-item.light {
  color: white;
}
.carousel-wrapper .carousel-item.light .arrow {
  background: url("/images/css-carousel/carousel-arrow-light.png") 50% 50%/20px no-repeat;
}
@media (max-width: 500px) {
  .carousel-wrapper .carousel-item .arrow, .carousel-wrapper .carousel-item.light .arrow {
    background-size: 10px;
    background-position: 10px 50%;
  }
}
.carousel-wrapper [id^="target-item"] {
  display: none;
}
.carousel-wrapper .item-1 {
  z-index: 2;
  opacity: 1;
}
.carousel-wrapper *:target ~ .item-1 {
  opacity: 0;
}
.carousel-wrapper #target-item-1:target ~ .item-1 {
  opacity: 1;
}
.carousel-wrapper #target-item-2:target ~ .item-2, .carousel-wrapper #target-item-3:target ~ .item-3 {
  z-index: 3;
  opacity: 1;
}
</style>
</div>

Let's build one!

## The structure

The structure of our carousel goes something like this: We have a main _div.carousel-wrapper_ that gives our carousel its size. Inside our wrapper, we have _span.hidden-target_ elements with unique IDs that act as targets for our carousel items controls, and _div.carousel-item_ elements that hold the content of each of our carousel items.

Each of our _div.carousel-item_ elements have some content within them, and two links, _a.arrow-prev_ and _a.arrow-next_, which we use to cycle between the carousel items.

Because our individual carousel items will be _position: absolute_ (so we can stack them on top of eachother), we have to set the _div.carousel-wrapper_'s height manually, and it makes sense to do this inline. We're going to try to offload as much of our CSS to our external stylesheet, but some of the items we'll have to write inline in order to make our carousel reusable and scalable.

I'm also using inline CSS to set the background image of two of our _div.carousel-item_ elements to make them a little more vibrant, but we'll leave that out below so that our markup is more readable.

```html

<div class="carousel-wrapper" style="height: 400px;">
  
  <span id="target-item-1"></span>
  <span id="target-item-2"></span>
  <span id="target-item-3"></span>
  
  <div class="carousel-item item-1">
    
    <h2>Item 1</h2>
    <p>Content goes here.</p>
    
    <a class="arrow arrow-prev" href="#target-item-3"></a>
    <a class="arrow arrow-next" href="#target-item-2"></a>
  </div>
  
  <div class="carousel-item item-2 light" style="background-color: royalblue;">
    <h2>Item 2</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-1"></a>
    <a class="arrow arrow-next" href="#target-item-3"></a>
  </div>
  <div class="carousel-item item-3">
    <h2>Item 3</h2>
    <p>Content goes here.</p>
    <a class="arrow arrow-prev" href="#target-item-2"></a>
    <a class="arrow arrow-next" href="#target-item-1"></a>
  </div>
</div>
```

That's it for our HTML. It's surprisingly light. The CSS (SCSS, in this case) is where the magic happens.

## The styles

```scss
/_ Here's where our carousel begins, with the main wrapper being
relatively positioned, so that our absolutely positioned items are
in the right place. _/
.carousel-wrapper {
position: relative;

/_ Our absolutely positioned carousel items span the width and
height of its parent. We're making them transparent by default so
that they fade in when we cycle through them using the arrow links. _/
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;

    /* Did you notice the 50px left, right padding up above? It's so
    we can position our arrow links! Each one will be 50px wide. Also,
    I'm using empty links with a background image so that the links
    look like arrows. Make sure you swap out that URL with an actual
    URL so that your arrow links aren't just transparent rectangles. */
    .arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;

      /* Let's put our arrow to go back on the left. */
      &.arrow-prev {
        left: 0;
      }

      /* And our arrow to go forward on the right. Since I'm using
      the same arrow image for both my arrows, I'm rotating this one by
      180 degrees so that it points in the right direction */
      &.arrow-next {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }
    }

    /* I really like how these carousel items look on a dark image
    background, so if a .carousel-item div has the class 'light',
    we'll make its text color white, and use a white arrow instad of
    a dark gray one. Again, make sure this arrow image exists somewhere */
    &.light {
      color: white;

      .arrow {
        background: url("/carousel-arrow-light.png") 50% 50% / 20px no-repeat;
      }
    }

    /* Let's use using some media queries to resize the arrows
    on smaller devices.*/
    @media (max-width: 480px) {
      .arrow, &.light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
      }
    }

}

/_ Let's set our jump link targets display: none; so that we're not
making the browser jump to the top of the carousel whenever a user
clicks on one of our arrow links. This attribute selector will target
any element whose id starts with 'target-item'. _/
[id^="target-item"] {
display: none;
}

/_ So, up above we made all our carousel items transparent, which means
that on page-load, we'd have a big empty box where our carousel should be.
Let's set our first item's opacity to 1 so that it displays instead. Also,
we're setting its z-index to 2, so that it's positioned on top of the
other carousel items. _/
.item-1 {
z-index: 2;
opacity: 1;
}

/_ But we don't want the first item to ALAWYS be opacity: 1; otherwise
it would peek through when cycling between items two and above. _/
\*:target ~ .item-1 {
opacity: 0;
}

/_ ...but if #target-item-1 is targeted, well we do want the first item
to show up, so we're selecting it with the ~ sibling selector and
setting its opacity to 1 again :-) _/
#target-item-1:target ~ .item-1 {
opacity: 1;
}

/_ If any other target-item-# is targeted, let's select it using the sibling
selector, make it fade in, and place it on top of the pile using z-index: 3.
Here's where you'd add more target items if your carousel has more than three
items. It might be worth adding like 10 items right off the bat. _/
#target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
}
```

And that's it! You have a carousel that's fully functional and is 100% HTML and CSS! We only made a carousel with three items, but you can keep adding items, just make sure you add more target items, and you link up your arrow links correctly.

How to make a carousel using only HTML and CSS (no JavaScript required!)


I've been working on a mockup which goes through the Apple Watch notification process, from the Home Screen, to a Short Look Notification, to a Long Look Notification, and back to the Home Screen. I took this on because it had been a while since I had put something together in Quartz Composer using Facebook's Origami library, and because the Apple Watch is coming out this month (exciting stuff, even for an Android person like me :-D).

So, where do you fit into this post? Well, I created this Apple Watch notification composition in a way that would let you replace the images I'm using with your own, so that you can mock up what an Apple Watch notification could look like for your iOS app. All you have to do is replace my images and adjust a few values.

The base composition looks something like this:

<figure>
<img src="/images/blog/dan-app-mockup.gif">
<figcaption><em>Apple Watch mockup demo</em></figcaption>
</figure>

If you're new to Quartz Composer and Origami, I wrote an [introductory guide](https://www.punchkickinteractive.com/blog/2014/04/01/quartz-composer-and-origami-tutorial-button-animation) about a year ago when Origami first came out. I recommend you go through it to get a feel for what Quartz Composer is, and what Origami brought to the table in terms of added functionality.

Before we get started, a few notes. The following assumes that you're somewhat familiar with Quartz Composer. It doesn't have the most intuitive interface, and can be finicky at times. I'm sure you can get through this as a first-timer, but it might be a little overwhelming at first. Another note is that, to be honest, it's not as pretty as I'd like it to be. While putting compositions together, I've found that Quartz Composer is a somewhat poorly documented piece of software. There's a couple places where I knowingly hack stuff together, which I call out in big red notes. If you guys have any suggestions on how to fix these areas, I would really appreciate it. Tweet at me [@ddggccaa](https://twitter.com/ddggccaa) with your ideas. Finally, in order to follow along, you'll need Quartz Composer and Origami. Follow [Facebook's 3-step process](http://facebook.github.io/origami/download/) to get hooked up with that.

---

Okay, let's begin. First, download the source files. I've got everything up over on [GitHub](https://github.com/dgca/origami-apple-watch-mockup). Just head over there and click 'Download ZIP' or clone the repo.

In the 'Images' folder, you'll find all the images which make up our composition. It's up to you to update these images as you see fit in order to make your own animation. There's even a [Sketch](http://bohemiancoding.com/sketch/) file which you can edit and use to export all these images with matching names and image sizes.

The image sizes are **very important**. In the composition, I'm using the image sizes as they are. That means that when a layer patch's width and height is 0, it's actually whatever the image's normal dimensions are. For best results, use the same image sizes as you see here. There is one exception, and that is the Long Notification. While your Long Notification image should stay the same width, the height will likely change in order to accommodate your custom notification message and options. We'll cover how to tweak the composition to account for those changes in a bit.

Okay, so at this point, you should've made some edits to the images, and we should be ready to dive into the actual composition.

Extract the files and open up 'mockup.qtz'. You should see the following patches. Also, because Quartz Composer tends to be a bit on the heavy side in terms of processing, you probably want to stop your viewer.

<figure>
<img src="/images/blog/qc-1.png">
<figcaption><em>The only tidy screen we'll see today.</em></figcaption>
</figure>

Double click into Layer Group. There's a lot going on here, but for our purposes, we only need to focus on the patches with yellow notes along the left side of the composition, and on the bottom of the composition.

So, to break down what's going on here, I've clustered patches into gray notes. The gray notes are the four major interactions that are at play. From the top, we have:

1. The Home Screen (this one is nice and easy to follow)
2. The Short Look Notification
3. The transition animations into the Long Look Notification
4. The Long Look Notification

Basically, when you tap anywhere on the Home Screen, we trigger the Short Look Notification animation. Then, after 2.25 seconds, we trigger the transition animation. Once the transition animation is done, we make all the assets scrollable. Finally, when you tap the 'Dismiss' button, we go back home and we can do it all again. Cool, huh?

<figure>
<img src="/images/blog/qc-2.png">
<figcaption><em>This reminds me of Charlie Kelly's 'Pepe Silvia' monologue.</em></figcaption>
</figure>

Okay, so on the left and on the bottom, there are yellow notes. In these notes are the patches we'll be editing. Just an aside, you're probably fine leaving the _Home Screen_, _Blurred BG_, and _Time of Day_ images alone, since those are fairly standard.

Okay, let's swap out my DAN APP App Name for yours. Click the App Name Image patch, and click the Patch Inspector icon in the menu bar. In the inspector, you'll see a drop-down menu that reads 'Input Parameters'. Click the drop-down and select 'Settings'.

<figure>
<img src="/images/blog/qc-3.png">
<figcaption><em>Fun fact: Inspecting things is a great way to learn.</em></figcaption>
</figure>

See that 'Import From File...' button? Click that guy and hunt down your new App Name. When you replace the App Name image with your own, you should see the changes reflected in the inspector. Remember when I said QC was finicky? The image displayed in the actual patch itself won't update until you repoen Quartz Composer. Don't worry, though. When you view your composition, your new App Name should display properly.

So swapping out image assets is pretty easy, right? Do the same thing for the App Icon and the Long Notification images.

Did you use a Long Look Notification image that was a different size than the one I used? If not (which, to be honest, is surprising), you're done! Good job. Run the viewer, hit play, and watch your composition go.

Did you use a different sized Long Look Notification image? Let's make some tweaks so that everything is working correctly.

Okay, so I'm going to guess that you made the Long Look Notification longer and now your header icon and the time of day are dropping down. If you made the Long Look Notification shorter, then the header icon and time of day should be getting bumped up. Either way, it's something we need to fix.

See the yellow note at the bottom of the composition that has some math patches in it? We're going to adjust the second value to make sure our icon and time of day get the right Y Position when this final block of code runs.

In the 'OMG IT SCROLLS' block, when we first get to this block, our 'App Icon small' layer's Y Position should be 148, and our Time of Day layer's Y Position should be 179.

Since these patches are scrollable, and that scrollability is tied to the Long Notification layer's Y Position, when our Long Notification image changed sizes, we introduced a bug.

The easiest way to fix this is to run your composition, click the Home Screen, and wait for the animations to run their course. When we get to the end, make a note of the Long Notification layer's Y Position.

<figure>
<img src="/images/blog/qc-4.png">
<figcaption><em>I'm following along and mine is broken too.</em></figcaption>
</figure>

For example, my Long Notification's Y Position is -153.5. Now we need basic algebra, woo! Okay, so we want to get to:

- 'App Icon small' Y Position: 148
- 'Time of Day' Y Position: 179

So I can do -153.5 + X = 148 and I get 301.5. So to fix my 'App Icon small' layer, I'm going to click the Math patch that's right under it, and adjust the 2nd value to 301.5.

<figure>
<img src="/images/blog/qc-5.png">
<figcaption><em>Mathing so hard right now.</em></figcaption>
</figure>

Easy? Good. Do the same for your 'Time of Day' layer and run the composition to see if everything looks okay.

There's one last thing we need to do, and that is to adjust the Dismiss Button's Hit Area position so that when we hit the Dismiss button, we go back to the Home Screen.

Okay, so the Dismiss Button isn't really a button. We're placing an invisible area (the Hit Area patch) on top of the image where the Dismiss Button is and using that as our trigger for going back to the Home Screen. Click the 'Dismiss' Hit Area patch and go into the inspector. The last option in the inspector should be 'Setup Mode'. Click that checkbox to turn on Setup Mode.

Run your composition, click the Home Screen, and let the animations play out. With the Hit Area's Setup Mode turned on, you should be able to see it as a semi-transparent red rectangle. You might have to scroll to see it.

<figure>
<img src="/images/blog/qc-6.png">
<figcaption><em>That doesn't look right, let's scoot the Hit Area down.</em></figcaption>
</figure>

You're going to need your viewer and your inspector for this one. Scroll your viewer until you see your Long Look Notification's Dismiss button. Click the Math patch under your Hit Area and bring up its inspector. Note that this is a subtraction patch, so the more you increase the number, the lower your Hit Area patch will go. Tweak the 2nd value in the math patch until your Hit Area is right over the Dismiss button. Once you have that, inspect the Hit Area and turn off Setup Mode.

Guess what, you're done! When you run your composition, clicking anywhere on the Home Screen should trigger the notification with your app icon, and you app's name. Once you click the 'Dismiss button', the interaction should start over, and you should be able to run through everything again.

Was this useful and easy to follow along? Let me know [@ddggccaa](https://twitter.com/ddggccaa). I would love to see any mock notifications you make, as well.

<3 Dan


Creating an Apple Watch notification mockup with Origami 2.0


The cool folks at Facebook released a massive update to Origami, their interaction library for Apple's Quartz Composer. I've been into Origami since it first came out about a year ago and brought Quartz Composer back to life.

Origami 2.0 lets us do some pretty wild stuff with QC, from displaying our interactions on mobile devices, to actually giving us access to a mobile device's pitch, roll, and yaw.

> These values reflect the physical orientation of your connected device running Origami Live. Try plugging these values into text layers and watch how the values change as you rotate your device.
>
> [- Origami docs](http://facebook.github.io/origami/documentation/patches/3D-Orientation.html)

It also added frames for the iPhone 6, iPhone 6 Plus, and Apple Watch. Since the Apple Watch has yet to come out, I'm playing around with notification animations. I'll be writing a how-to very soon. Probably sooner than a how-to on how I built this site. Sorry, the maybe one person who was excited to read that. It's still happening, but it has been delayed.

Here's a sneak peek at where I am so far. The idea is to make the whole thing loop so you don't have to stop and re-run the composition every time you want to see the notification. I'm not quite there yet.

<img class="img-block" src="/images/blog/dan-app-mockup-preview.gif">

I've got the source files up on [Github](https://github.com/dgca/origami-apple-watch-mockup), in case you want to play around and see how it works.

So if you're interested creating Apple Watch mockups, stay tuned. The full write-up will be coming shortly.


Origami 2.0 Apple Watch teaser


Hey, welcome to my new website. There are loads of things I want to learn and write about in the near future, some of which I hope are of interest to you.

First, introductions. I'm Dan, and I currently work as a digital strategist at [Punchkick&nbsp;Interactive](https://www.punchkick.com/)—an end-to-end mobile marketing, design, and development agency. It's a terrific Chicago agency that's focused on making the best mobile native and web experiences possible.

As a strategist, my job is to come up with solutions to our clients' needs, and to work with the team to see the execution through—from design, to development, launch, and promotion. Given the breadth of the role, I've picked up a few different skills that have turned into major hobbies.

Among them are user experience design, prototyping, front-end development, marketing, and animation. This blog is where I'll be writing about them.


Dan Cortes

Blog Posts