Case Study: Wesbos

0:00

Wes, the people must know.

0:01

Who are you and

0:03

what do you do?

0:04

Hey, uh, my name is Wes Boss.

0:06

I'm a full-stack developer,

0:07

and I do, I do two things.

0:09

I, I create training courses

0:11

on web development and,

0:12

and I have a podcast called

0:13

Syntax and we have a YouTube

0:15

channel, and that's more

0:17

content around learning web

0:18

development and keeping up

0:19

with what's going on with

0:21

the web development scene.

0:22

What are some of the,

0:24

uh, video courses

0:25

that you work on?

0:25

Man, I have a whole bunch

0:27

of courses, um, ranging from

0:30

backend, Node.js, React.js.

0:33

Um, probably my most

0:34

popular ones revolve

0:36

around just learning

0:37

straight up JavaScript.

0:39

I have a free one called

0:40

JavaScript30, which I

0:41

think over half a million

0:42

people have taken it.

0:44

And then I have a, a

0:45

paid one, which is called

0:46

Beginner JavaScript, and

0:47

those are just sort of two

0:49

pillars in learning how

0:51

to code, learning how to

0:52

build stuff in JavaScript.

0:54

Uh, you've recently migrated

0:55

your content over to Mux,

0:56

but before that you were

0:57

using Vimeo for a while.

0:59

At what point did you

1:00

start to hit friction

1:01

or any bottlenecks

1:03

with that solution?

1:05

Yeah, so when I first looked

1:06

for a video solution, this

1:07

is probably 10 years ago, um,

1:09

I needed something that you

1:10

could, I could embed into my

1:12

custom course platform, right?

1:14

And like, like YouTube's

1:16

not a good option because

1:17

that's, it's kind of public

1:18

and you can make 'em private,

1:20

but that's not really,

1:20

uh, not really the move.

1:22

I wanted to be able to

1:22

lock it down to, um, only

1:25

provide access to those

1:26

who have paid for it.

1:27

So I threw 'em

1:28

up all on Vimeo.

1:29

I had the $200 free.

1:31

And then of course they

1:32

came knocking like a year

1:34

later and said, "Hey, like

1:35

you're, you're not allowed

1:36

to use the $200 plan for

1:40

private courses, right? So

1:42

you have to pay us now."

1:43

And, and my bill went from, I

1:45

think it went from 200 bucks

1:46

a year to $10,000 a year.

1:48

Um, which was a

1:49

pretty big shocker.

1:51

At the time I was just

1:52

like, you know what?

1:53

Pay the man.

1:53

And like, this is not

1:54

something I'm really

1:55

focusing on, um, right now.

1:57

As much as I love

1:59

infrastructure and, and

2:00

working on the course

2:00

platform, um, I also

2:02

need to spend time

2:03

working on the content.

2:04

Right?

2:05

Um, so I just felt like

2:06

I was getting squeezed.

2:08

Where my bill kept

2:09

going up, I wasn't

2:10

really getting anything.

2:12

You can, you can see that

2:13

infrastructure in general

2:14

is getting cheaper for, for

2:16

a lot of people out there,

2:18

and I was just like, man, I

2:18

gotta get, I gotta get off

2:20

of this Vimeo because it's,

2:22

it's costing way too much.

2:24

And also like the embed

2:26

platform was, was kind

2:28

of hard to control.

2:29

There wasn't a whole lot of

2:30

like, um, back and forth.

2:32

I remember I had one

2:33

issue where you couldn't

2:34

catch embed errors.

2:37

There was like one Chrome

2:37

extension that was blocking

2:40

the embed and, and that

2:42

would throw an error,

2:43

and there was no possible

2:44

way to catch that error.

2:46

To know that the embed had

2:48

had failed and I was just back

2:51

and forth on their, on their

2:52

GitHub, and it took like nine

2:54

months to just get a catch

2:55

method added to their SDK, um,

2:59

which was really frustrating

3:00

because people would, it

3:01

caused me a lot of support.

3:03

People would, "Hey, your

3:04

website's not working," and

3:05

it's like, now you have this

3:05

weird Chrome extension, it's

3:07

fine, but I, I should at least

3:08

be able to programmatically

3:09

alert you and let you know.

3:11

So just little things like

3:12

that that kind of, kind of

3:14

pushed me the wrong way.

3:15

Being able to restrict them

3:17

to a specific domain name was

3:19

another, um, pain of mine.

3:22

Because you had to like create

3:24

these like obtuse rules where

3:26

you could say, this video

3:27

can only be embedded on this

3:28

domain name, but like then

3:30

when you're running in local

3:31

development, you have to add

3:33

all of those domain names

3:35

and then like, I dunno, I

3:36

have I've I've got like, like

3:39

15 courses and they're all

3:40

on different domain names.

3:42

So if I want, I wanna like,

3:43

do that for production,

3:44

and for development.

3:46

It was just a huge pain in

3:47

the butt to, to have, to

3:48

maintain all of that stuff.

3:50

I did build, uh, my own

3:53

ingest platform, um, as just

3:55

a proof-of-concept and, and

3:57

hosted it on Cloudflare,

3:59

uh, just to see, 'cause

4:00

Cloudflare has this thing

4:01

where it's free bandwidth

4:03

and um, but you can't like,

4:05

you, you still have to like

4:07

chop them all up into all the

4:08

different segments and all

4:09

of the different resolutions

4:10

and figure out your own

4:11

bit rates and run FFmpeg

4:12

and all that type of stuff.

4:14

And that was fun to build.

4:15

But it's that, that's,

4:16

that type of stuff sucks to

4:18

maintain, um, and I'm not,

4:20

I'm not in that business.

4:21

Like I just wanna pay

4:22

the man and, and move

4:23

and have it work.

4:24

I had known about Mux

4:25

for a long time, just

4:27

Scott Tolinsky, he ran

4:28

Level Up tutorials on

4:29

it, he, he was a big fan.

4:31

In the like developer

4:32

community, you want something

4:34

that is much more like

4:36

targeted at developers.

4:39

The move was simply just,

4:42

querying my course platform

4:44

for all of the courses and

4:45

all of the videos and then

4:48

sending off a request to,

4:50

actually, I didn't even need

4:51

to download it, which was,

4:52

was really neat because Vimeo

4:54

or Mux can slurp up from just

4:58

a publicly accessible URL.

5:00

So that's one thing I

5:01

was very surprised at.

5:02

I was like, I'm gonna have

5:03

to download, like, like

5:04

terabytes of video and

5:05

then, and have to re-upload

5:07

them, you know, and I've got

5:08

fast internet, but that's

5:09

gonna be a bit of a pain.

5:11

But it was really nice 'cause

5:12

I simply just needed to query

5:13

the video from Vimeo, get

5:15

the, the publicly accessible

5:18

URL, um, and then give that to

5:21

Mux, and then Mux would then

5:24

slurp it up and then return me

5:26

a, I dunno, some sort of ID.

5:29

And then I would save

5:29

that ID, uh, to my course

5:32

platform so I could reference

5:34

what the new ID was, uh,

5:36

alongside the old Vimeo IDs.

5:38

Were there any other

5:39

features about Mux that you

5:41

didn't know about but were,

5:43

uh, pleasantly surprised

5:44

with after the migration?

5:47

The, the access control

5:49

was something that I much

5:50

preferred and, and was

5:51

surprised that I liked it

5:53

because in, in order to give

5:55

people access to a video

5:57

on Vimeo, you simply just

5:58

had to, uh, restrict it

6:00

to a certain domain name.

6:01

Um, and, and with Mux, every

6:03

single person, every single

6:05

load, I can simply just

6:06

generate a, a JWT, and and

6:09

say like if they have access

6:11

to this video, not simply

6:12

that they are on this domain

6:14

name and have figured out

6:15

how to embed it, because

6:17

there certainly could be ways

6:18

around that then, then give

6:20

them access to the video.

6:21

And then I was like,

6:21

yeah, that's nice.

6:22

But then I also wanna be

6:24

able to preview them like

6:26

on the Mux dashboard.

6:27

And you told me, yeah,

6:27

you just create multiple.

6:29

What is it?

6:29

Playback IDs?

6:31

What's the, what's

6:31

the word for it?

6:32

Playback policies.

6:33

Yeah, playback policies.

6:34

Which, that was really nice.

6:35

Quite honestly, one, one of

6:37

the biggest pulls for me was

6:39

simply just Media Chrome.

6:41

Um, so the player, uh, to

6:44

actually play Mux videos,

6:47

is, is obviously Media

6:49

Chrome, you guys have it.

6:50

And I've used Media Chrome

6:52

many times not with Mux,

6:54

um, which is like, shout

6:56

out to you guys for

6:56

doing that because you've

6:58

made this amazing piece

7:00

of technology that you

7:01

can use with anything.

7:03

And then when it did come

7:03

time to actually using it with

7:05

Mux it was, was really easy.

7:07

Um, and I was able to move

7:08

over all of my, like, um,

7:11

on progress, on pause,

7:13

on play, on speed change.

7:14

Like, you know, like I,

7:15

I coded the thing to web

7:16

standards as close as

7:17

possible with Vimeo, and

7:19

then all of those methods

7:21

moved over so nicely.

7:24

To, to the media Chrome.

7:25

And then Media Chrome is

7:26

awesome because I have

7:27

way more control over what

7:29

the player looks like and

7:30

how it acts versus just

7:32

the, the Vimeo one where

7:33

you can like, change the

7:34

color of the bar and, and

7:36

hide some of the icons.

7:38

This is my player, and

7:41

actually there's one thing

7:43

I haven't done yet, is you

7:44

see this bar right here, the

7:46

like skip ahead 10 seconds,

7:48

25 seconds, wide screen?

7:50

Um, this bar was, was added

7:52

because of limitations

7:54

in Vimeo's embed, uh,

7:57

meaning that, like, I,

7:57

like I literally couldn't

7:58

add custom skip buttons

8:00

in the Vimeo player.

8:01

The, the move was simply

8:02

just add a bar underneath

8:04

it and, and now I can, I can

8:05

do whatever I want and it

8:06

should be integrated into it.

8:08

But the, the move for Mux

8:10

was simply like, just get

8:11

the, just get it moved over

8:13

first, um, and then once I

8:15

have control over it I can

8:16

start rethinking what the,

8:18

the actual player looks like.

8:20

But like, everything just

8:21

worked outta the box.

8:22

One thing I don't think I had

8:23

previously was this little

8:25

thumbnail preview when you

8:27

hover over top of it, which,

8:28

I really like when I'm trying

8:30

to look for a specific part.

8:31

Um, especially when

8:32

you're going through

8:34

one of the tutorials.

8:35

If you're, if you're looking

8:36

at one of the things that

8:37

we're building and you

8:38

want to pause it when it

8:38

gets to a specific point,

8:40

it's nice to be able

8:40

to see where you're at.

8:43

How does your video course,

8:44

platform handle and manage

8:46

your video uploads to Mux?

8:48

Uh, I have the API

8:50

integration, so a lot of my

8:52

course platform is just like

8:55

JSON files because I find it

8:57

easier to manage rather than

8:59

having to create some sort of

9:01

UI and then all of the data of

9:03

like, where have, which videos

9:04

have you watched and, and all

9:06

of that stuff, that stuff's

9:07

stored in the database and

9:08

attached to specific users.

9:10

Um, and then I just, I

9:12

just hit a button or I run

9:13

a script and it will just

9:15

upload 'em all and then

9:16

if they've changed it will

9:18

upload those, the, the changed

9:19

ones and overwrite them.

9:21

So yeah, I'm just, just

9:23

using a script, which is nice

9:25

'cause it keeps everything

9:26

in sync much better than

9:27

having to do any click ops.

9:30

What would you say to someone

9:31

who is maybe in the same

9:32

situation that you were

9:33

on the fence, considering

9:35

their options, maybe not

9:36

really sure what to do.

9:38

Do you have any advice

9:38

for that person?

9:40

I, I think, like, I'm

9:41

kind of bummed that I,

9:42

I took so long to do it.

9:45

Um, and my hesitation was

9:47

that like, I thought it

9:48

would be much more work

9:49

than it actually was.

9:51

Like I was able to run my

9:53

Vimeo player and my Mux

9:55

player in parallel for several

9:57

weeks while I like tested

9:58

things and it, it worked

10:01

really well, so it's, it was

10:04

a surprisingly smooth move

10:07

over and I didn't have to

10:08

really write a whole lot of

10:09

code, uh, to, to, to do it.

10:13

Wes, thanks so much for

10:15

taking time to chat.

10:16

Where can people find

10:17

you on the internet?

10:18

I am available at wesbos.com,

10:21

that's my personal website.

10:22

I'm at Wes Bos on, I

10:24

spend most of my time on,

10:25

on Twitter, but I'm on

10:26

all the social networks,

10:28

TikTok and Blue Sky

10:29

and Instagram as well.

10:30

If you go to

10:31

wesbos.com/courses, you'll get

10:33

a list of all of the courses

10:34

that I offer, and then of

10:35

course, check us, check us

10:36

out at syntax.fm as well.

10:38

If you wanna learn, we're

10:39

on YouTube, we're on all the

10:41

podcasting platforms, and

10:43

uh, you can learn a thing or

10:44

two about web development.