
![🦆💫](https://padilla-media.s3.amazonaws.com/blog/art/wadingpsyduck.png)

_\*psyyy~\*_


Wading Psyduck

Jimmy Van Heusen – Polka Dots and Moonbeams


![Pup looking out the window](https://padilla-media.s3.amazonaws.com/blog/art/sketches-2024-09-14.jpg)

The scene I wake up to. 💛


View from the Desk


A visit to the [homepage of this very site](/) on desktop will show the neat instagram-like image grid of my sketches! Now that much of my blog is visual, and since it's been a year of me drawing, it's time to make a nice display for my drawings.

![Equal parts Pokémon and Zelda, a good balance!](https://padilla-media.s3.amazonaws.com/blog/images/artgrid.jpg)

Creating it with my current setup has been interesting! I'll walk you through it, covering extracting the images and piping them through Next's server side handler.

# Parsing Markdown

The setup for my blog is through static files. Meaning, every post is a markdown file, with metadata included at the top of the file, and the content following. It looks something like this:

```
---
title: Snivy & Mareep
tags:
  - Art
date: '2023-09-01T10:35:07.322Z'
---

![Charge!!!](https://padilla-media.s3.amazonaws.com/blog/art/sketches-2023-09-01.jpg)

Pokémon — the gateway to doodling on math homework.

...

```
It makes for quick writing and keeps my content portable. 

The challenge with this approach, though, is that my images are hosted off site and they are displayed directly through the markdown. A fantastic beginner programmers challenge, if you're ever curios to test out a new language, is to: 

- Access a text file
- Parse it
- Return the results

I did just that with a few functions:

```
export const getImageValuesFromMarkdown = (md) => {
  const regex =
    /!\[[^\]]*\]$(?<filename>.*?)(?=\"|$)(?<optionalpart>\".*\")?\)/g;
  return Array.from(md.matchAll(regex)).map((res) => res[1]);
};


export function getAllArtImages(
  fields = ['content', 'slug', 'tags', 'date'],
  options = {}
) {
  const slugs = getPostSlugs();
  let posts = slugs
    .map((slug) => getPostBySlug(slug, fields))
    // Filter false values (.DS_STORE)
    .filter((post) => post)
    // sort posts by date in descending order
    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));

  const regex = new RegExp('Art', 'i');
  posts = posts.filter((post) => post.tags?.some((e) => regex.test(e)));

  if (options.filter) {
    posts = posts.filter(options.filter);
  }

  if (options.skip) {
    posts = posts.slice(options.skip);
  }

  if (options.limit) {
    posts = posts.slice(0, options.limit);
  }

  const images = [];
  posts.forEach((post) => {
    const postImages = getImageValuesFromMarkdown(post.content);
    postImages.forEach((src) =>
      images.push({
        src: src,
        slug: post.slug,
      })
    );
  });

  return images;
}
```

`getAllArtImages` handles a fair amount of logic for getting all of my markdown files, sorting, and only grabbing the attributes I need. That includes *only* getting posts with the Art tag!

The interesting part here is down in the `forEach` loop. There, I'm calling `getImageValuesFromMarkdown`, which uses a regex to find all of the instances of a markdown denotation for an image. In the file, it looks like this:

```
![Charge!!!](https://padilla-media.s3.amazonaws.com/blog/art/sketches-2023-09-01.jpg)
```

That all gets massaged into an array of objects with the image source and markdown slug so that the images link to the post.

# Displaying Images

From there, it's as simple as calling the method in `getServerSideProps()` on the page I want to display the grid:


```
export async function getServerSideProps() {
  const images = getAllArtImages().slice(0, 6);

  return {
    props: {
      images,
    },
  };
}
```

From there, there's nothing too fancy about it. The react component is simply looping through the images:

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

const ArtGrid = ({ images }) => {
  return (
    <>
      <section className="art_display">
        {images.map((image, i) => (
          <article key={image.src} className={`${i > 0 ? 'hideonmobile' : ''}`}>
            <Link href={`/${image.slug}`}>
              <a data-test="musicGridLink">
                <div
                  className="artgridimage"
                  style={{
                    height: '250px',
                    width: '250px',
                    background: 'transparent no-repeat center',
                    backgroundSize: 'cover',
                    margin: 'auto',
                    backgroundImage: `url('${image.src}')`,
                  }}
                />
              </a>
            </Link>
          </article>
        ))}
      </section>
    </>
  );
};

export default ArtGrid;

```

I'm using the div with a background image set to center the images. Not the most accessible way, but the most-sane way to handle centering images without distorting their aspect ratio.

And that's all there is to it! 

Are there tradeoffs to this approach? Why, yes there are! A future concern of mine is for the time when the number of files gets too large, and starts slowing things down. My next step is to take a look into a caching system: Generating the list of images *once* and saving the results so that this call doesn't happen every time the server receives a request.

A post for another day!

Art Grid in Next.js


I've been [exploring analytics options](/analytics). I have a use case for them, but we're more concerned with specific user behavior on this project. We want to know if they click a certain button, or make it to a certain page.

There are some options. Google Analytics provides journeys and goals, though it's heavy handed for our use case. Other solutions like Fathom would keep track of individual page performance, but there are certain UI interactinos that we're interested in.

So the need arose! I wrote a custom solution for our app.

# Overview & Stack

We're using React on the client side. Since button interactions are our main metric, we essentially need something that can be integrated with our click handlers.

Easy enough! We can fire off a POST request to an external API that records the interaction.

For the API, I opted to spin up a Next.js API. [A single serverless function](/weeklyplaylist) may have been more appropriate, but I was short on time and know that I can deploy quickly with Next and Vercel.

For storing data, I created a new Database with MongoDB Atlas. Similarly here, this may more than what we really need, but familiarity won out!

# Client Side

In my React app, I'm adding this utility function that fires when ever I want to record an action:

```
export const recordInteraction = (type) => {
  const data = { type };

  fetch('https://analytics-api.vercel.app/api/mycoolapihandler', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });
};
```

`type` here is simply a string for what event is recorded. It could be "Submits form", "turns on dark mode", or any unique way of identifying an action!

The rest is your run of the mill fetch request handling.

# API handler

On the other side of our endpoint is this handler:

```
import { connectToDatabase } from '../../lib/mongodb';

export default async function handler(req, res) {
  await runMiddleware(req, res, cors);

  if (req.method === 'POST') {
    const { client, db } = await connectToDatabase();

    const myObj = {
      date: new Date(),
      type: req.body.type,
    };

    const dbRes = await db
      .collection('acnm')
      .insertOne(myObj, async function (err, res) {
        if (err) throw err;
        console.log('1 document inserted');
        await client.close();
      });

    res.status(200).json({ message: 'Data recorded' });
  } else {
    res.status(200).json({ name: 'Ready to record' });
  }

  return res;
}

```

First, you'll notice `runMiddleware()`. I'll explain that in a second!

If we receive a POST request, we'll do the following:

- Connect to the DB (largely borrowing from [Next.js's great example directory](https://github.com/vercel/next.js/tree/canary/examples/with-mongodb) for setup)
- Create `myObj`, a record of the current time of request and the type of request.
- insert it into the database
- return a success message

# CORS Middleware

There are a few steps I'm skipping - validation, schema creation, sanitization. But, this api is only going to interact with my own application, so I'm not concerned about writing a very extensive request handler.

The way I'm keeping it locked down, out of harms way from the world wide web, is through CORS.

An incredible thorough look at CORS is available at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). For our purposes, we just need to know that this is how our API will whitelist _only_ our application's url when receiving requests.

Back to the `runMiddleware()` method! Here is the function declared in the same document:

```
import Cors from 'cors';

// Initializing the cors middleware
const cors = Cors({
  methods: ['POST', 'GET', 'HEAD', 'OPTIONS'],
  origin: ['https://mycoolapp.netlify.app', 'https://mycoolapp.com'],
});

function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}
```

The `cors` npm package is a great way of managing CORS without getting into manipulating the headers directly. In our instantiation, we're passing a few options for approved methods and the origins we want to white list. (NO trailing slash, FYI!)

`runMiddleware()` is the simple wrapper function that handles us using the cors middleware with our request.

# Using the Data

The nice thing about using Mongodb, or any full blown DB with a sophisticated querying language, is the ability to make use of your data! Our model only has a few simple terms:

```
{
	_id,
	date: Date,
	type: String,
}
```

But, that's plenty for us to be able to answer questions such as "How many people submitted a form in the last month." A perfect solution for our case.


DIY Analytics & CORS


Here's the sitch: We recently had an all hands project in Python where we needed to create a pretty flexible internal package.

Part of that flexibility means not always knowing all the arguments we're instantiating with, but knowing that if certain arguments are available, we want to use them in our methods.

Here's what I mean:

```
class PizzaOven(object):
	def __init__(self, **kwargs):
		# Take in toppings and store for later.

	def bake(number):
		for x in range(number):
			if self.pineapple and self.ham:
				print('Here's one Hawaiian Pizza')
			else:
				print('Here's your tasty pizza')
```

We have a class that will receive toppings as keyword arguments, and our method later on may need to extract those arguments to know if it's a Hawaiian Pizza. In another case, if we're dealing with a third party api, we may need to plug those values into a method in a certain order, or only use them if they're provided, like an options dictionary.

# Static Dict Property

When constructing classes, python stores it's writable attributes to the `__dict__` class attribute.

Doing this:

```
class PizzaOven(object):
	def __init__(self, **kwargs):
		self.ham = kwargs.ham
```

Is somewhat like doing this:

```
class PizzaOven(object):
	def __init__(self, **kwargs):
		self.__dict__["ham"] = kwargs.ham
```

The code above would error out since that's _simply not how we do things around here!_ But we'll cover how this concept helps out with keyword arguments below.

# Updating Dict with Keyword Arguments

By using the `update` dictionary method, we can take in an object that instantiates the class with our toppings and store them as instance variables.

```
class PizzaOven(object):
	def __init__(self, **kwargs):
		self.__dict__.update(kwargs)
```

Then our toppings are made available later:

```
class PizzaOven(object):
	def __init__(self, **kwargs):
		self.__dict__.update(kwargs)

dominos = PizzaOven(pepperoni=True, ham=True)

dominos.bake(1) # "Here's one Hawaiian Pizza"
```

Bon Appétit!


Storing Keyword Arguments in Python Class Instantiation


I'm working on a project where I'm adding my own music for each page in a React app.

It has me nostalgic for the early internet. You would be cruising around, and all of a sudden, someone's Live Journal would have a charming MIDI of Enya's "Only Time" playing in the background.

<audio
    src="https://padilla-media.s3.amazonaws.com/blog/audio/enya-only-time.mp3"
    controls="controls"
  />

I'm definitely glad this isn't the norm anymore. I don't miss having to mute the obnoxious banner ads that included sound on Ask Jeaves. But now that the web is largely without sound as a background to pages, I've really enjoyed how it's bringing parts of this application to life!

# Quick Overview

The project isn't out yet, so for the heck of it, let's call my React app "Music Box."

The music is hosted on the Music Box's CDN (Sanity, in my case). The ideal format would be webm as it works across all modern browsers and is highly performant. For my use case, mp3's suited me just fine.

In my codebase, I have a big ol' object that stores the track URL's and which page ID's they should play on. It looks something like this:

```
const sounds = [
  {
      name: 'Bake Shop',
      src: 'https://cdn.sanity.io/files/qvonp967/production/f4163ffd79e09fdc32d028a1722ef8949fb31b85.mp3',
      conversationIDs: [
        '27f4be58-38f3-4321-bbc9-c76e0c675c36',
        'd008519f-16c0-4ef0-b790-f5eb0cb3b0b4',
      ],
      howl: null,
    },
    {
      name: 'Restaurant',
      src: 'https://cdn.sanity.io/files/qvonp967/production/4606e7ec6208df214d766776e3d5ed33408fe74d.mp3',
      conversationIDs: [
        'e1688c5f-218a-4656-ad96-df9a1c33b8f8',
        'a81fb6a7-d450-45e8-a942-e5c82fb1a812',
      ],
      howl: null,
    },
    ...
];

```

You'll notice each object also has a howl property. Let's get into how I'm playing sound:

# Playing Audio with Howler.js

[Howler.js](https://howlerjs.com/) is a delightfully feature-full API for handling sound with JavaScript. The library is built on top of the Web Audio API and also uses HTML5 audio for certain use cases. While I could have interfaced with the Web Audio API directly, Howler has much nicer controls for using multiple sounds, interrupting them, and keeping separate sound instances contained in a single sound palette.

For each page, we initiate the aproriate sound with this code:

```
  const initiateSound = (src) => {
    const sound = new Howl({
      src,
      loop: true,
    });

    return sound;
  };

```

`src` here is derived from the url. The loop option is turned on so that we get continuous music.

# Changing Audio Page to Page

This is all kept in a `SoundController` component at the top level of the react tree, above React Router.

```
function App() {

	...
	return (
    <>
      <SoundController />
      <Switch location={location} key={location.pathname}>
          <Route
            path="/testimony/:id"
            render={(props) => <Testimony match={props.match} />}
          ></Route>
          <Route path="/act-one">
            <ActOneTestimonySelect />
          </Route>
          ...
      </Switch>
    </>
    )
};

```

The main reason for this is so we have control over fading in and out between pages.

The other reason is for caching. Remember the `howl` properties in the `sound` array? That array is going to be stored in a `useRef()` call in the `SoundController` component. Then we can save each instantiated sound with the appropriate element in the array for future reference.

That's exactly what is happening here inside the `useEffect`. This code listens for a change in the `currentTrackObj` (triggered by a page change) and checks if we have a cached `howler` instance. The cache version is targeted if so, and a new one is played if not.

```
  useEffect(() => {
    if (currentTrackObj) {
      let howler;

      if(currentTrackObj.howl) {
        howler = currentTrackObj.howl;
      } else {
        howler = initiateSound(currentTrackObj.src);
      }

      currentTrackObj.howl = howler;
      howlerRef.current = currentTrackObj.howl;
      if (soundPlaying) {
        howlerRef.current.play();
      }
    }

    return () => {
      if (howlerRef.current && howlerRef.current.stop) {
        howlerRef.current.stop();
      }
    };
  }, [currentTrackObj]);

```

# Playing and Pausing

The state for this is stored in redux as `soundPlaying`. When that's toggled, we can interface with howler to play and pause the track.

```
  useEffect(() => {
    if (!playedAudio) {
      dispatch(setPlayedAudio(true));
    }

    if (howlerRef.current && howlerRef.current.playing) {
      if (soundPlaying && !howlerRef.current.playing()) {
        howlerRef.current.play();
      } else {
        howlerRef.current.pause();
      }
    }
  }, [soundPlaying]);

```

Then that's it! Musical bliss on every page!


Chris Padilla/Blog

On This Day