All The Things You Are Comping

Floating Improv


![Colors in petals](https://padilla-media.s3.amazonaws.com/blog/art/sketches-2023-09-24.jpg)

🌅 🌸


Sunset Flower


![🪰](https://padilla-media.s3.amazonaws.com/blog/art/Lizalfos.jpg)

Miranda's least favorite enemy to fight, but my favorite to draw!


Lizalfos


One aspect of [developing my art grid](/artgrid) was moving away from the Next image component and choosing a more flexible option with special css.

There are still plenty of spots on the site I wanted to keep using it, though! This week, I wanted to jot down why.

## CLS

Content Layout Shift is something I've written about a [few](/fontdisplaycls) [times](/fontcls). Surprisingly, this is my first touch on images, the largest culprits of creating CLS!

A page is typically peppered with images throughout. An image can be [wholly optimized](/hostingimages) to be very lightweight, but can still contribute to a negative user experience if the dimensions are not accounted for. 

Say you're reading this blog. And a put an image right above this paragraph. If an image FINALLY loads as you're reading this, all of a sudden this paragraph is pushed down and now you have to scroll to find your place. *Ugh*.

## The Solution

The way to mitigate this is pretty simple: Set dimensions on your images.

Easy if you already know what they are: Use css to set explicit widths and heights. You can even use media queries to set them depending on the screen size.

It gets a little trickier if you're doing this dynamically, not knowing what dimensions your image will be. The best bet, then, is to set a container for the image to reside in , and have the image fill the container. Thinking of a div with an img child.

## Next Image Component

It's not too involved to code this yourself, but Next.js comes out of the box with a component to handle this along with many other goodies. [The Image Component in Next](https://nextjs.org/docs/pages/building-your-application/optimizing/images) offers Size optimization for local images and lazy loading.

Here I'm using the component for my [albums page](/music)

```
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

const MusicGrid = ({ albums }) => {
  return (
    <>
      <section className="music_display">
        {albums.map((album) => (
          <article key={album.title}>
            {/* <Link href={album.link}> */}
            <Link href={`/${album.slug}`}>
              <a data-test="musicGridLink">
                <Image src={album.coverURL} width="245" height="245" />
                <span>{album.title}</span>
              </a>
            </Link>
          </article>
        ))}
      </section>
    </>
  );
};

export default MusicGrid;

```

And here is what's generated to the DOM. It's a huge sample, but you can find a few interesting points in there:

The key pieces being the `srcset` used for different sized images generated for free. These are made with externally sourced images, interestingly enough, but they're generated by the component to handle rendering specifically to the page!

```
<article>
  <a data-test="musicGridLink" href="/forest"
    ><span
      style="
        box-sizing: border-box;
        display: inline-block;
        overflow: hidden;
        width: initial;
        height: initial;
        background: none;
        opacity: 1;
        border: 0;
        margin: 0;
        padding: 0;
        position: relative;
        max-width: 100%;
      "
      ><span
        style="
          box-sizing: border-box;
          display: block;
          width: initial;
          height: initial;
          background: none;
          opacity: 1;
          border: 0;
          margin: 0;
          padding: 0;
          max-width: 100%;
        "
        ><img
          style="
            display: block;
            max-width: 100%;
            width: initial;
            height: initial;
            background: none;
            opacity: 1;
            border: 0;
            margin: 0;
            padding: 0;
          "
          alt=""
          aria-hidden="true"
          src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27245%27%20height=%27245%27/%3e" /></span
      ><img
        src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=640&amp;q=75"
        decoding="async"
        data-nimg="intrinsic"
        style="
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          box-sizing: border-box;
          padding: 0;
          border: none;
          margin: auto;
          display: block;
          width: 0;
          height: 0;
          min-width: 100%;
          max-width: 100%;
          min-height: 100%;
          max-height: 100%;
        "
        srcset="
          /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=256&amp;q=75 1x,
          /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=640&amp;q=75 2x
        " /><noscript
        ><img
          srcset="
            /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=256&amp;q=75 1x,
            /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=640&amp;q=75 2x
          "
          src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fcpadilla%2Fimage%2Fupload%2Ft_optimize%2Fchrisdpadilla%2Falbums%2Fforest.jpg&amp;w=640&amp;q=75"
          decoding="async"
          data-nimg="intrinsic"
          style="
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            box-sizing: border-box;
            padding: 0;
            border: none;
            margin: auto;
            display: block;
            width: 0;
            height: 0;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
          "
          loading="lazy" /></noscript></span
    ><span>Forest</span></a
  >
</article>

```





Mitigating Content Layout Shift with Next Image Component


I grew up with a lot of the games and consoles developed by the late Satoru Iwata, Nintendo's former President. ["Ask Iwata"](https://www.amazon.com/Ask-Iwata-Wisdom-Nintendos-Legendary/dp/197472154X) is a sort of auto-biography, a collection of interviews Iwata gave for Shigesato Itoi's company / site with a few excerpts from the official Nintendo "Iwata Asks" interview series.

The book came across as surprisingly personal for someone that's a sort of legend in the space. Some characters garner mysticism through the distance between them and their audience, but Iwata was a proponent of transparency and open communication, as is evident by all that's shared in these interviews.

The war stories are impressive. His early experiences of being a tech wiz, saving a couple of games like Earthbound and Pokemon Gold and Silver from development hell, are a testament to him being a master developer.

But it was his view on people that struck me.

It's not what I expected going in, though he did spent more of his life in management. Iwata transferred much of his logical thinking and desire to delight others over into his leadership.

Here's one example of this is his insight onto why creative folks can come into conflict on a shared project:

> Unless they have the self-confidence to announce, "I'm the best," engineers and artists never make any headway. Most programmers, too, believe their way of doing things to be superior. When these kinds of people join forces on a project, some conflict is unavoidable. **Creativity, after all, is an expression of the ego.**

_Really_ insightful to frame creativity as a means of putting a piece of ourselves out there.. Maybe not all forms of creativity, but certainly design centric, engineering type roles, take a bit more of that characteristic to it.

Here's another one on respecting the talents of others:

> "There will always be people who see things differently than you. Perhaps to an unreasonable degree. Still, these people surely have their own reasons, their own history and values. Moreover, they're bound to be able to do things you can't do, and know things you don't know. This doesn't mean accepting everything they suggest, but respecting the fact that they have skills you lack, and are doing things that you can't do yourself. Whether or not you can maintain this respect will vastly influence how much fun and fulfillment you get out of a job."

I plead guilty to the artistic trope of wanting to be good at it all! In an age (and, for me, a stage of life) that glorifies remarkable individuals, this was a refreshing passage to come across. It's that gradual [opening up of accepting yourself for your limitations and celebrating the differences with others](/30) that brings buoyancy to work and opens up possibilities.


Iwata on Creative People


React Final Form is a delightful library. So much comes out of the box, and it's extensible enough to handle custom solutions.

I've been working with it a fair amount recently. Here's what adding custom logic looks like:

# Scenario

Say that you have data that needs to update two fields within your form. An example might be that you have an event form with the fields:

- Name: Skate-a-thon 2022
- Start Date: August 3rd
- End Date: August 5th

Let's also say that Skate-a-thon got rescheduled to another weekend.

When going in to push back the start date, we want our form logic to automatically update the end date as well - to also go back 7 days.

# Simple Set up In Final Form

I'll leave the initial set up to the [React Final Form docs](https://final-form.org/docs/react-final-form/getting-started).

Let's pick up with a component that looks like this within our form:

```
<h2>Render Function as Children</h2>
<Field name="name">
  {({ input, meta }) => (
    <div>
      <label>Name</label>
      <input type="text" {...input} placeholder="Name" />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  )}
</Field>

<Field name="startDate">
  {({ input, meta }) => (
    <div>
      <label>Start Date</label>
      <input type="date" {...input} placeholder="Start Date" />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  )}
</Field>

<Field name="endDate">
  {({ input, meta }) => (
    <div>
      <label>End Date</label>
      <input type="date" {...input} placeholder="End Date" />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  )}
</Field>
```

We're assuming we already have our `<Form>` wrapper and submit button elsewhere.

So far with this code, all of our fields will update independently.

To tie together our `endDate` field with the `startDate`, we'll need a custom `onChange` method and a way to access the form API ourselves.

# Form Hook

Two hooks come in handy here:

- `userForm()`: Gives us all access to utility methods for our form. It can be called in any component within the `<Form>` wrapper.
- `useFormState()`: As the name implies, gives us access to the current state, including values and meta data such as what fields have been "touched"

We'll open up our component with these hooks:

```
import React from 'react';
import {Field, useForm, useFormState} from 'react-final-form';

const FormComponent = () => {
  const formApi = useForm();
  const {values} = useFormState();

  return(
    ...
  )
};

```

And then use these in a custom `onChange` handler on our field

```
<Field name="startDate">
  {({ input, meta }) => (
    <div>
      <label>Start Date</label>
      <input
        type="date"
        {...input}
        placeholder="Start Date"
        // Custom onChange below
        onChange={(e) => {
          const newStartDate = e.currentTarget.valueAsDate;

          // Lets assume I've written a COOL function that takes in the
          // Initial values for startDate and endDate, and calculates a
          // new endDate based on that
          const newValue = calculateNewDateBasedOnNewStartDate(newStartDate, values);

          // Update both values through the formApi
          formApi.change('startDate', newStartDate)
          formApi.change('endDate', newValue)
        }}
      />
      {meta.touched && meta.error && <span>{meta.error}</span>}
    </div>
  )}
</Field>
```

There you go! The `endDate ` will update alongside the start date from here!


Customizing Field State in React Final Form


I was getting a 503 waiting for my Gmail to load, so I decided to learn more about status codes while I waited!

# Response Classes

1. **100-199**: Informational Responses
2. **200-299**: Successful Responses
3. **300-399**: Redirection Messages
4. **400-499**: Client Error Responses
5. **500-599**: Server Error Responses

# Noteworthy Codes

- **418: I'm a teapot** [Short and stout](https://www.google.com/teapot)

- **302: Found** For _temporary_ changes in URI, as opposed to the more permanent 301.

- **300: Multiple Choices** Where there's more than one possible redirect. The best way to handle this is to send an HTML page with possible choices for handling the response. But then, at that point, wouldn't you just sent a 200 status code with a landing page? I could see this being more useful with APIs than webpages.

- **202: Accepted** The request is received but not acted upon. Interestingly, HTTP doesn't have a way to handle an asynchronous response that ties itself to the delayed response to the request. I'm thinking of AWS batch uploading here - where the API accepts the data, but then needs to take however long to actually process the request.

- **502: Bad Gateway** Technically the appropriate response if the server gets an invalid response when waiting on an external request.

- **404: Not Found** Had to finish with [my favorite](https://homestarrunner.com/404).


Chris Padilla/Blog

On This Day