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:
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!
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:
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 first four episodes will drop in two weeks, on April 13th (mark your calendar!). After that, we'll release a new episode every week.
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.
That's all we got!
Amy
Want to stay up to date on our podcast? Get a behind-the-scenes look and know when new episodes drop.