Hey There!

This past weekend, we recorded another episode of Compressed.fm. We've been trying to create a backlog of content so that when we launch on April 13, you'll have 4 episodes(!!) to listen to instead of just 1.

In the episode we just recorded, we talked about the tech behind the Compressed.fm site. I (Amy) have also been tweeting sneak peeks and some of the new things I've been learning as I've been building the site.

That's right! I've been learning new things. In fact, with each project I work on, I try to find some area that will push me as a designer and/or a developer. This keeps me challenged and engaged. The trick is to find the Goldilocks amount of "new" — not so challenging that I've bitten off more than I can chew and am overwhelmed. But, also not so easy that I'm bored and antsy for the next project.

So, a few things I've discovered:

Cloudinary can Generate Waveform Images

It's really quite simple. You can upload an audio file to Cloudinary and request an image in return! Change the extension from .wav to .png (or .jpg), pass it a fl_waveform flag, along with the dimensions for the height and width. For example: h_200 and w_500.

I'll show you. I uploaded a test audio file and grabbed the URL from Cloudinary:

Note: To keep my bandwidth low, this file no longer exists.

I can paste the URL in the browser, pass in the correct parameters, and Viola!

Outlined Text

For the featured episode number, I styled the leading zeros slightly differently. This is one of those things that I designed and thought, "I'll figure this out later." Fortunately, it was even easier to pull off than I imagined.

Since the site is built in React, with Next.js, I created a JavaScript function to determine how many leading zeros to display:

For styling, CSS actually has a -webkit-text-stroke that does exactly what I want:

and surprisingly, the support for it is quite good:

Implementing Auth0

A portion of the site gives sponsors a unique login where they can access their contracts and invoices. They can also see a list of all the episodes they've sponsored, with their ads highlighted and bookmarked.

For a statically generated site, this poses a unique challenge. How do you handle authentication and authorization?

This piece can get complicated fast depending on how many login options you want to provide (email/password, Google, GitHub, Twitter, Facebook, etc.). Even if you decide you want to keep it "simple" with an email address and password, you still have to set up a database to handle authentication and sessions. Not to mention a system for handling and managing JWT (JSON Web Tokens). 😅

Fortunately, Auth0, handles all of this out of the box. AND they just released a new SDK package for Next.js that makes this dead simple.

We'll talk about all of this in more depth in Episode 3 of the podcast: The Tech Stack behind Compressed.fm.

The countdown is on!

The first four episodes will drop in two weeks, on April 13th (mark your calendar!). After that, we'll release a new episode every week.

In the meantime, you can catch us on YouTube:

• James just released a video: Easily Set Up Tailwind CSS with Vanilla JavaScript in 10 Minutes

• Amy just released a video on Animating a Hamburger Menu. Fun fact: this hamburger is actually being used on the new Compressed.fm website.

or on Twitch:

You can catch James on Fridays (times may vary) with "Learning Quick." This past Friday, he talked to Ceora Ford(@ceeoreo_) on passion and tech careers.

or on Twitter:

• James (@jamesqquick)
• Amy (@selfteachme)
• Both (@compressedfm)

That's all we got!

Amy