Sent 03.31.21

Prepping for Launch: The Tech Behind the Compressed.fm Site

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.

Amy and James recording the podcast

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.

@selfteachme tweet about working on the custom audio player

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

Compressed.fm Custom Audio Player

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:

File listed in 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!

Generated waveform image from Cloudinary in Browser

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.

Featured Podcast Episode

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

JavaScript code for displaying an Episode's Zeros

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

CSS for outlined text

and surprisingly, the support for it is quite good:

Can I Use for -webkit-text-stroke

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.

GitHub for nextjs-auth0

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:

Easily Set Up Tailwind CSS with Vanilla JavaScript in 10 Minutes

Animating a Hamburger Menu

Animated Hamburger Menu

or on Twitch:

Passion and Tech Careers with Ceora Ford

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:


That's all we got!

Amy

Sign up for the newsletter

Want to stay up to date on our podcast? Get a behind-the-scenes look and know when new episodes drop.