I present you with Fireship.io 🚀 The new home of all future content on this channel. https://fireship.io

Source Code https://github.com/fireship-io/fireship.io
2024-02-04T07:04:50.541Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
27fb367e-f45d-4585-8997-30e01ceb4107
c9b8d169e1ab90bc7ac1078d3a1a451cec9c0f5b30b347881e16a7c549086614
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Exactly 4 months ago, told you I was building a new platform to host my content from scratch called Fireship IO.
And today is the day I finally get to show it to you.
But I wanna first start by saying thank you to everybody who supports this channel.
It's amazing to even have the chance to build something like this, which wouldn't be possible without this YouTube channel and this community.
And it's the community that really drives me to pursue the mission of FireShip IO, which is to create resources that increase developer happiness and productivity.
But the crazy thing is, if you were to ask me where do I see myself in 2 years in January 2017, it really wouldn't be here.
At that point, I hadn't made a single video and didn't even think I was capable of doing a voice over, let alone producing a video that anybody would wanna watch.
I probably would have gotten started a lot sooner had it not been for self doubt.
So if you're thinking about doing something like this, my recommendation is to just go for it.
This channel is approaching a 100,000 subscribers, which is just crazy.
But I feel like we're barely just getting started.
There's so much amazing technology that is Accessible to the average developer.
And I really hope I can help unlock those technologies so people can build products that make other people's lives better.
So that's my motivation for building Fireship, but why am I building this instead of continuing with angularfirebase.com?
Let me first point out that it's not because my opinion of the underlying technology has changed.
In fact, they're only getting better and I used Angular and Firebase to build Fireship IO.
So the real motivation behind this Change is that I want full control over the platform, so I can offer more content at a lower price to everybody.
If you're an existing pro member, you know that we have some of the content on the main site, some of it's Hosted on Teachable as full courses and some of it is on Leanpub in the form of an ebook.
With FireShip, everything is under one roof, so there's no jumping back and forth between platforms.
In addition, the name change makes it more flexible to cover additional content outside of Angular and Firebase like Rust, Flutter, etcetera.
And 3rd, I'm a developer and I like building cool shit.
So fuck it.
It was something to do.
But is it actually cool?
Well, I'll give you the tour and you can decide.
One of the most fundamental goals is to present content in a way that's friendly for developers.
The overall theme somewhat resembles a Versus code and the code snippets themselves are designed to look like tabs in your editor.
So you should notice a huge improvement in the aesthetics of the site versus Angular Firebase dotcom.
And everything is designed with CSS variables, which means we can just click a button and switch over to a light theme or a solarized theme if we want.
And the total CSS payload for this site is only 6 and a half kilobytes.
The next thing you'll notice is the search, which is also designed to behave similar to Versus Code.
The search is powered by Algolia.
Simply start typing, and you'll see the results appear below.
The next unique thing about the site is its integration with Slack.
If you're not already a member of our Slack channel, I highly recommend you jump in there because it's the best way to chat and discuss content.
But the problem with Slack is that conversations are lost to the Slack archives and they're also very hard to find if you're looking for something specific.
So I decided to build a Slack bot that would take our conversations about a specific post on FireShip and mirror them on the post itself.
This is an alternative to traditional blog post comments that I think offers a better experience especially for developers.
Let's imagine you have a question about a specific lesson.
You simply grab the URL for that lesson and ask a question to the question bot on Slack.
Any replies on that thread will go directly to the comment section on the post itself.
This means we can chat about a specific topic without losing that valuable information to the Slack archives.
And if you have a question, Slack is a much way to get a response on a question versus, say, discuss comments or something similar.
Now getting back to the site itself, my goal is to release full courses with a greater frequency.
I've decided to offer the Cloud Functions master course for free.
So all you have to do is log in to FireShip IO and you'll automatically have access to the videos in this course.
If you take this course, all I ask is that you give me some feedback about what you'd like to see different or improved with the course format.
Now let's talk about performance.
This is easily the fastest site I've ever built that is fully interactive.
It leverages the full power of Angular and Firebase yet can achieve 1st paints in under 2 seconds and lighthouse scores of 95 plus.
Then the site's using web components and we maintain stateful data between those web components with a special routing This means you get page transitions that are usually around 20 milliseconds.
I have logging for this currently enabled, so all you have to do is open up the console, navigate around, and you'll see how fast the page transition actually is.
While at the same time, you'll see that your authentication state if you're logged in doesn't change because that stateful data is maintained between those changes.
And if you wanna see how I do all this, you can reverse engineer it because the entire project is open sourced.
If we look at the project on GitHub, you can see that it's broken down into 4 main projects.
We use Hugo to manage the content.
We use Angular elements for the interactive web components.
The CSS is contained in the design folder.
And lastly, we have Cloud Functions for everything on the back end.
So the important thing here is that we can all now collaborate to make this project better.
If you find a typo on the site or some small issue, you can simply open up a pull request and contribute.
And everything is wired up with continuous delivery, so once your pull request gets merged, it will automatically be deployed to the live site.
There's so much more to talk about here on the technical side of things, but I think I'll save that for a live stream later this month.
So if you have questions, feel free to post them in the comments below and I'll try to answer them when we do that live stream.
And I might even pick out a random comment or 2 to win a t shirt when we do that stream.
Now before we wrap things up, I want to talk about my future plans.
I'm going to be shifting from develop mode to content mode.
That just means I'm going to be spending a lot of time creating new content And also revising past content on angularfirebase.com.
I will also be revising the Stripe payments course from scratch.
When that's ready in the near future, you'll be able to build the exact same payment system that I use for my apps.
I just want to finish off by saying thank you to everybody for all the continued support.
It's the driving force behind all my decision making, and I've tried to sum that up in a small manifesto that you can read on the site.
Thanks for watching, and I will talk to you soon.

Speaker 0: Exactly 4 months ago, told you I was building a new platform to host my content from scratch called Fireship IO. And today is the day I finally get to show it to you. But I wanna first start by saying thank you to everybody who supports this channel. It's amazing to even have the chance to build something like this, which wouldn't be possible without this YouTube channel and this community. And it's the community that really drives me to pursue the mission of FireShip IO, which is to create resources that increase developer happiness and productivity.

But the crazy thing is, if you were to ask me where do I see myself in 2 years in January 2017, it really wouldn't be here. At that point, I hadn't made a single video and didn't even think I was capable of doing a voice over, let alone producing a video that anybody would wanna watch. I probably would have gotten started a lot sooner had it not been for self doubt. So if you're thinking about doing something like this, my recommendation is to just go for it. This channel is approaching a 100,000 subscribers, which is just crazy.

But I feel like we're barely just getting started. There's so much amazing technology that is Accessible to the average developer. And I really hope I can help unlock those technologies so people can build products that make other people's lives better. So that's my motivation for building Fireship, but why am I building this instead of continuing with angularfirebase.com? Let me first point out that it's not because my opinion of the underlying technology has changed.

In fact, they're only getting better and I used Angular and Firebase to build Fireship IO. So the real motivation behind this Change is that I want full control over the platform, so I can offer more content at a lower price to everybody. If you're an existing pro member, you know that we have some of the content on the main site, some of it's Hosted on Teachable as full courses and some of it is on Leanpub in the form of an ebook. With FireShip, everything is under one roof, so there's no jumping back and forth between platforms. In addition, the name change makes it more flexible to cover additional content outside of Angular and Firebase like Rust, Flutter, etcetera.

And 3rd, I'm a developer and I like building cool shit. So fuck it. It was something to do. But is it actually cool? Well, I'll give you the tour and you can decide.

One of the most fundamental goals is to present content in a way that's friendly for developers. The overall theme somewhat resembles a Versus code and the code snippets themselves are designed to look like tabs in your editor. So you should notice a huge improvement in the aesthetics of the site versus Angular Firebase dotcom. And everything is designed with CSS variables, which means we can just click a button and switch over to a light theme or a solarized theme if we want. And the total CSS payload for this site is only 6 and a half kilobytes.

The next thing you'll notice is the search, which is also designed to behave similar to Versus Code. The search is powered by Algolia. Simply start typing, and you'll see the results appear below. The next unique thing about the site is its integration with Slack. If you're not already a member of our Slack channel, I highly recommend you jump in there because it's the best way to chat and discuss content.

But the problem with Slack is that conversations are lost to the Slack archives and they're also very hard to find if you're looking for something specific. So I decided to build a Slack bot that would take our conversations about a specific post on FireShip and mirror them on the post itself. This is an alternative to traditional blog post comments that I think offers a better experience especially for developers. Let's imagine you have a question about a specific lesson. You simply grab the URL for that lesson and ask a question to the question bot on Slack.

Any replies on that thread will go directly to the comment section on the post itself. This means we can chat about a specific topic without losing that valuable information to the Slack archives. And if you have a question, Slack is a much way to get a response on a question versus, say, discuss comments or something similar. Now getting back to the site itself, my goal is to release full courses with a greater frequency. I've decided to offer the Cloud Functions master course for free.

So all you have to do is log in to FireShip IO and you'll automatically have access to the videos in this course. If you take this course, all I ask is that you give me some feedback about what you'd like to see different or improved with the course format. Now let's talk about performance. This is easily the fastest site I've ever built that is fully interactive. It leverages the full power of Angular and Firebase yet can achieve 1st paints in under 2 seconds and lighthouse scores of 95 plus.

Then the site's using web components and we maintain stateful data between those web components with a special routing This means you get page transitions that are usually around 20 milliseconds. I have logging for this currently enabled, so all you have to do is open up the console, navigate around, and you'll see how fast the page transition actually is. While at the same time, you'll see that your authentication state if you're logged in doesn't change because that stateful data is maintained between those changes. And if you wanna see how I do all this, you can reverse engineer it because the entire project is open sourced. If we look at the project on GitHub, you can see that it's broken down into 4 main projects.

We use Hugo to manage the content. We use Angular elements for the interactive web components. The CSS is contained in the design folder. And lastly, we have Cloud Functions for everything on the back end. So the important thing here is that we can all now collaborate to make this project better.

If you find a typo on the site or some small issue, you can simply open up a pull request and contribute. And everything is wired up with continuous delivery, so once your pull request gets merged, it will automatically be deployed to the live site. There's so much more to talk about here on the technical side of things, but I think I'll save that for a live stream later this month. So if you have questions, feel free to post them in the comments below and I'll try to answer them when we do that live stream. And I might even pick out a random comment or 2 to win a t shirt when we do that stream.

Now before we wrap things up, I want to talk about my future plans. I'm going to be shifting from develop mode to content mode. That just means I'm going to be spending a lot of time creating new content And also revising past content on angularfirebase.com. I will also be revising the Stripe payments course from scratch. When that's ready in the near future, you'll be able to build the exact same payment system that I use for my apps.

I just want to finish off by saying thank you to everybody for all the continued support. It's the driving force behind all my decision making, and I've tried to sum that up in a small manifesto that you can read on the site. Thanks for watching, and I will talk to you soon.
Exactly 4 months ago, told you I was building a new platform to host my content from scratch called Fireship IO. And today is the day I finally get to show it to you. But I wanna first start by saying thank you to everybody who supports this channel. It's amazing to even have the chance to build something like this, which wouldn't be possible without this YouTube channel and this community. And it's the community that really drives me to pursue the mission of FireShip IO, which is to create resources that increase developer happiness and productivity. But the crazy thing is, if you were to ask me where do I see myself in 2 years in January 2017, it really wouldn't be here. At that point, I hadn't made a single video and didn't even think I was capable of doing a voice over, let alone producing a video that anybody would wanna watch. I probably would have gotten started a lot sooner had it not been for self doubt. So if you're thinking about doing something like this, my recommendation is to just go for it.
youtube
television
video gaming
blogging
netflix
This channel is approaching a 100,000 subscribers, which is just crazy. But I feel like we're barely just getting started. There's so much amazing technology that is Accessible to the average developer. And I really hope I can help unlock those technologies so people can build products that make other people's lives better. So that's my motivation for building Fireship, but why am I building this instead of continuing with angularfirebase.com? Let me first point out that it's not because my opinion of the underlying technology has changed. In fact, they're only getting better and I used Angular and Firebase to build Fireship IO. So the real motivation behind this Change is that I want full control over the platform, so I can offer more content at a lower price to everybody.
streaming
technology
social media
telecommunications
television
If you're an existing pro member, you know that we have some of the content on the main site, some of it's Hosted on Teachable as full courses and some of it is on Leanpub in the form of an ebook. With FireShip, everything is under one roof, so there's no jumping back and forth between platforms.
websites
In addition, the name change makes it more flexible to cover additional content outside of Angular and Firebase like Rust, Flutter, etcetera.
And 3rd, I'm a developer and I like building cool shit. So fuck it. It was something to do. But is it actually cool? Well, I'll give you the tour and you can decide. One of the most fundamental goals is to present content in a way that's friendly for developers. The overall theme somewhat resembles a Versus code and the code snippets themselves are designed to look like tabs in your editor. So you should notice a huge improvement in the aesthetics of the site versus Angular Firebase dotcom.
software development
And everything is designed with CSS variables, which means we can just click a button and switch over to a light theme or a solarized theme if we want.
And the total CSS payload for this site is only 6 and a half kilobytes. The next thing you'll notice is the search, which is also designed to behave similar to Versus Code. The search is powered by Algolia. Simply start typing, and you'll see the results appear below. The next unique thing about the site is its integration with Slack.
google
mining
If you're not already a member of our Slack channel, I highly recommend you jump in there because it's the best way to chat and discuss content. But the problem with Slack is that conversations are lost to the Slack archives and they're also very hard to find if you're looking for something specific.
So I decided to build a Slack bot that would take our conversations about a specific post on FireShip and mirror them on the post itself. This is an alternative to traditional blog post comments that I think offers a better experience especially for developers. Let's imagine you have a question about a specific lesson. You simply grab the URL for that lesson and ask a question to the question bot on Slack. Any replies on that thread will go directly to the comment section on the post itself.
blogging
This means we can chat about a specific topic without losing that valuable information to the Slack archives. And if you have a question, Slack is a much way to get a response on a question versus, say, discuss comments or something similar. Now getting back to the site itself, my goal is to release full courses with a greater frequency. I've decided to offer the Cloud Functions master course for free.
So all you have to do is log in to FireShip IO and you'll automatically have access to the videos in this course. If you take this course, all I ask is that you give me some feedback about what you'd like to see different or improved with the course format. Now let's talk about performance. This is easily the fastest site I've ever built that is fully interactive. It leverages the full power of Angular and Firebase yet can achieve 1st paints in under 2 seconds and lighthouse scores of 95 plus. Then the site's using web components and we maintain stateful data between those web components with a special routing This means you get page transitions that are usually around 20 milliseconds. I have logging for this currently enabled, so all you have to do is open up the console, navigate around, and you'll see how fast the page transition actually is.
video gaming
streaming
internet
While at the same time, you'll see that your authentication state if you're logged in doesn't change because that stateful data is maintained between those changes. And if you wanna see how I do all this, you can reverse engineer it because the entire project is open sourced. If we look at the project on GitHub, you can see that it's broken down into 4 main projects.
We use Hugo to manage the content. We use Angular elements for the interactive web components. The CSS is contained in the design folder. And lastly, we have Cloud Functions for everything on the back end. So the important thing here is that we can all now collaborate to make this project better. If you find a typo on the site or some small issue, you can simply open up a pull request and contribute. And everything is wired up with continuous delivery, so once your pull request gets merged, it will automatically be deployed to the live site. There's so much more to talk about here on the technical side of things, but I think I'll save that for a live stream later this month.
streaming
internet
technology
graphic design
infrastructure
So if you have questions, feel free to post them in the comments below and I'll try to answer them when we do that live stream. And I might even pick out a random comment or 2 to win a t shirt when we do that stream. Now before we wrap things up, I want to talk about my future plans. I'm going to be shifting from develop mode to content mode. That just means I'm going to be spending a lot of time creating new content And also revising past content on angularfirebase.com.
I will also be revising the Stripe payments course from scratch. When that's ready in the near future, you'll be able to build the exact same payment system that I use for my apps. I just want to finish off by saying thank you to everybody for all the continued support.
billing
It's the driving force behind all my decision making, and I've tried to sum that up in a small manifesto that you can read on the site. Thanks for watching, and I will talk to you soon.
Exactly 4 months ago, told you I was building a new platform to host my content from scratch called Fireship IO. And today is the day I finally get to show it to you. But I wanna first start by saying thank you to everybody who supports this channel. It's amazing to even have the chance to build something like this, which wouldn't be possible without this YouTube channel and this community. And it's the community that really drives me to pursue the mission of FireShip IO, which is to create resources that increase developer happiness and productivity. But the crazy thing is, if you were to ask me where do I see myself in 2 years in January 2017, it really wouldn't be here. At that point, I hadn't made a single video and didn't even think I was capable of doing a voice over, let alone producing a video that anybody would wanna watch. I probably would have gotten started a lot sooner had it not been for self doubt. So if you're thinking about doing something like this, my recommendation is to just go for it. This channel is approaching a 100,000 subscribers, which is just crazy. But I feel like we're barely just getting started. There's so much amazing technology that is Accessible to the average developer. And I really hope I can help unlock those technologies so people can build products that make other people's lives better. So that's my motivation for building Fireship, but why am I building this instead of continuing with angularfirebase.com? Let me first point out that it's not because my opinion of the underlying technology has changed. In fact, they're only getting better and I used Angular and Firebase to build Fireship IO. So the real motivation behind this Change is that I want full control over the platform, so I can offer more content at a lower price to everybody. If you're an existing pro member, you know that we have some of the content on the main site, some of it's Hosted on Teachable as full courses and some of it is on Leanpub in the form of an ebook. With FireShip, everything is under one roof, so there's no jumping back and forth between platforms. In addition, the name change makes it more flexible to cover additional content outside of Angular and Firebase like Rust, Flutter, etcetera. And 3rd, I'm a developer and I like building cool shit. So fuck it. It was something to do. But is it actually cool? Well, I'll give you the tour and you can decide. One of the most fundamental goals is to present content in a way that's friendly for developers. The overall theme somewhat resembles a Versus code and the code snippets themselves are designed to look like tabs in your editor. So you should notice a huge improvement in the aesthetics of the site versus Angular Firebase dotcom. And everything is designed with CSS variables, which means we can just click a button and switch over to a light theme or a solarized theme if we want. And the total CSS payload for this site is only 6 and a half kilobytes. The next thing you'll notice is the search, which is also designed to behave similar to Versus Code. The search is powered by Algolia. Simply start typing, and you'll see the results appear below. The next unique thing about the site is its integration with Slack. If you're not already a member of our Slack channel, I highly recommend you jump in there because it's the best way to chat and discuss content. But the problem with Slack is that conversations are lost to the Slack archives and they're also very hard to find if you're looking for something specific. So I decided to build a Slack bot that would take our conversations about a specific post on FireShip and mirror them on the post itself. This is an alternative to traditional blog post comments that I think offers a better experience especially for developers. Let's imagine you have a question about a specific lesson. You simply grab the URL for that lesson and ask a question to the question bot on Slack. Any replies on that thread will go directly to the comment section on the post itself. This means we can chat about a specific topic without losing that valuable information to the Slack archives. And if you have a question, Slack is a much way to get a response on a question versus, say, discuss comments or something similar. Now getting back to the site itself, my goal is to release full courses with a greater frequency. I've decided to offer the Cloud Functions master course for free. So all you have to do is log in to FireShip IO and you'll automatically have access to the videos in this course. If you take this course, all I ask is that you give me some feedback about what you'd like to see different or improved with the course format. Now let's talk about performance. This is easily the fastest site I've ever built that is fully interactive. It leverages the full power of Angular and Firebase yet can achieve 1st paints in under 2 seconds and lighthouse scores of 95 plus. Then the site's using web components and we maintain stateful data between those web components with a special routing This means you get page transitions that are usually around 20 milliseconds. I have logging for this currently enabled, so all you have to do is open up the console, navigate around, and you'll see how fast the page transition actually is. While at the same time, you'll see that your authentication state if you're logged in doesn't change because that stateful data is maintained between those changes. And if you wanna see how I do all this, you can reverse engineer it because the entire project is open sourced. If we look at the project on GitHub, you can see that it's broken down into 4 main projects. We use Hugo to manage the content. We use Angular elements for the interactive web components. The CSS is contained in the design folder. And lastly, we have Cloud Functions for everything on the back end. So the important thing here is that we can all now collaborate to make this project better. If you find a typo on the site or some small issue, you can simply open up a pull request and contribute. And everything is wired up with continuous delivery, so once your pull request gets merged, it will automatically be deployed to the live site. There's so much more to talk about here on the technical side of things, but I think I'll save that for a live stream later this month. So if you have questions, feel free to post them in the comments below and I'll try to answer them when we do that live stream. And I might even pick out a random comment or 2 to win a t shirt when we do that stream. Now before we wrap things up, I want to talk about my future plans. I'm going to be shifting from develop mode to content mode. That just means I'm going to be spending a lot of time creating new content And also revising past content on angularfirebase.com. I will also be revising the Stripe payments course from scratch. When that's ready in the near future, you'll be able to build the exact same payment system that I use for my apps. I just want to finish off by saying thank you to everybody for all the continued support. It's the driving force behind all my decision making, and I've tried to sum that up in a small manifesto that you can read on the site. Thanks for watching, and I will talk to you soon.
Exactly
exactly
4
4
months
months
ago,
ago
told
told
you
you
I
i
was
was
building
building
a
a
new
new
platform
platform
to
to
host
host
my
my
content
content
from
from
scratch
scratch
called
called
Fireship
fireship
IO.
io
And
and
today
today
is
is
the
the
day
day
I
i
finally
finally
get
get
to
to
show
show
it
it
to
to
you.
you
But
but
I
i
wanna
wanna
first
first
start
start
by
by
saying
saying
thank
thank
you
you
to
to
everybody
everybody
who
who
supports
supports
this
this
channel.
channel
It's
it's
amazing
amazing
to
to
even
even
have
have
the
the
chance
chance
to
to
build
build
something
something
like
like
this,
this
which
which
wouldn't
wouldn't
be
be
possible
possible
without
without
this
this
YouTube
youtube
channel
channel
and
and
this
this
community.
community
And
and
it's
it's
the
the
community
community
that
that
really
really
drives
drives
me
me
to
to
pursue
pursue
the
the
mission
mission
of
of
FireShip
fireship
IO,
io
which
which
is
is
to
to
create
create
resources
resources
that
that
increase
increase
developer
developer
happiness
happiness
and
and
productivity.
productivity
But
but
the
the
crazy
crazy
thing
thing
is,
is
if
if
you
you
were
were
to
to
ask
ask
me
me
where
where
do
do
I
i
see
see
myself
myself
in
in
2
2
years
years
in
in
January
january
2017,
2017
it
it
really
really
wouldn't
wouldn't
be
be
here.
here
At
at
that
that
point,
point
I
i
hadn't
hadn't
made
made
a
a
single
single
video
video
and
and
didn't
didn't
even
even
think
think
I
i
was
was
capable
capable
of
of
doing
doing
a
a
voice
voice
over,
over
let
let
alone
alone
producing
producing
a
a
video
video
that
that
anybody
anybody
would
would
wanna
wanna
watch.
watch
I
i
probably
probably
would
would
have
have
gotten
gotten
started
started
a
a
lot
lot
sooner
sooner
had
had
it
it
not
not
been
been
for
for
self
self
doubt.
doubt
So
so
if
if
you're
you're
thinking
thinking
about
about
doing
doing
something
something
like
like
this,
this
my
my
recommendation
recommendation
is
is
to
to
just
just
go
go
for
for
it.
it
This
this
channel
channel
is
is
approaching
approaching
a
a
100,000
100,000
subscribers,
subscribers
which
which
is
is
just
just
crazy.
crazy
But
but
I
i
feel
feel
like
like
we're
we're
barely
barely
just
just
getting
getting
started.
started
There's
there's
so
so
much
much
amazing
amazing
technology
technology
that
that
is
is
Accessible
accessible
to
to
the
the
average
average
developer.
developer
And
and
I
i
really
really
hope
hope
I
i
can
can
help
help
unlock
unlock
those
those
technologies
technologies
so
so
people
people
can
can
build
build
products
products
that
that
make
make
other
other
people's
people's
lives
lives
better.
better
So
so
that's
that's
my
my
motivation
motivation
for
for
building
building
Fireship,
fireship
but
but
why
why
am
am
I
i
building
building
this
this
instead
instead
of
of
continuing
continuing
with
with
angularfirebase.com?
angularfirebase.com
Let
let
me
me
first
first
point
point
out
out
that
that
it's
it's
not
not
because
because
my
my
opinion
opinion
of
of
the
the
underlying
underlying
technology
technology
has
has
changed.
changed
In
in
fact,
fact
they're
they're
only
only
getting
getting
better
better
and
and
I
i
used
used
Angular
angular
and
and
Firebase
firebase
to
to
build
build
Fireship
fireship
IO.
io
So
so
the
the
real
real
motivation
motivation
behind
behind
this
this
Change
change
is
is
that
that
I
i
want
want
full
full
control
control
over
over
the
the
platform,
platform
so
so
I
i
can
can
offer
offer
more
more
content
content
at
at
a
a
lower
lower
price
price
to
to
everybody.
everybody
If
if
you're
you're
an
an
existing
existing
pro
pro
member,
member
you
you
know
know
that
that
we
we
have
have
some
some
of
of
the
the
content
content
on
on
the
the
main
main
site,
site
some
some
of
of
it's
it's
Hosted
hosted
on
on
Teachable
teachable
as
as
full
full
courses
courses
and
and
some
some
of
of
it
it
is
is
on
on
Leanpub
leanpub
in
in
the
the
form
form
of
of
an
an
ebook.
ebook
With
with
FireShip,
fireship
everything
everything
is
is
under
under
one
one
roof,
roof
so
so
there's
there's
no
no
jumping
jumping
back
back
and
and
forth
forth
between
between
platforms.
platforms
In
in
addition,
addition
the
the
name
name
change
change
makes
makes
it
it
more
more
flexible
flexible
to
to
cover
cover
additional
additional
content
content
outside
outside
of
of
Angular
angular
and
and
Firebase
firebase
like
like
Rust,
rust
Flutter,
flutter
etcetera.
etcetera
And
and
3rd,
3rd
I'm
i'm
a
a
developer
developer
and
and
I
i
like
like
building
building
cool
cool
shit.
shit
So
so
fuck
fuck
it.
it
It
it
was
was
something
something
to
to
do.
do
But
but
is
is
it
it
actually
actually
cool?
cool
Well,
well
I'll
i'll
give
give
you
you
the
the
tour
tour
and
and
you
you
can
can
decide.
decide
One
one
of
of
the
the
most
most
fundamental
fundamental
goals
goals
is
is
to
to
present
present
content
content
in
in
a
a
way
way
that's
that's
friendly
friendly
for
for
developers.
developers
The
the
overall
overall
theme
theme
somewhat
somewhat
resembles
resembles
a
a
Versus
versus
code
code
and
and
the
the
code
code
snippets
snippets
themselves
themselves
are
are
designed
designed
to
to
look
look
like
like
tabs
tabs
in
in
your
your
editor.
editor
So
so
you
you
should
should
notice
notice
a
a
huge
huge
improvement
improvement
in
in
the
the
aesthetics
aesthetics
of
of
the
the
site
site
versus
versus
Angular
angular
Firebase
firebase
dotcom.
dotcom
And
and
everything
everything
is
is
designed
designed
with
with
CSS
css
variables,
variables
which
which
means
means
we
we
can
can
just
just
click
click
a
a
button
button
and
and
switch
switch
over
over
to
to
a
a
light
light
theme
theme
or
or
a
a
solarized
solarized
theme
theme
if
if
we
we
want.
want
And
and
the
the
total
total
CSS
css
payload
payload
for
for
this
this
site
site
is
is
only
only
6
6
and
and
a
a
half
half
kilobytes.
kilobytes
The
the
next
next
thing
thing
you'll
you'll
notice
notice
is
is
the
the
search,
search
which
which
is
is
also
also
designed
designed
to
to
behave
behave
similar
similar
to
to
Versus
versus
Code.
code
The
the
search
search
is
is
powered
powered
by
by
Algolia.
algolia
Simply
simply
start
start
typing,
typing
and
and
you'll
you'll
see
see
the
the
results
results
appear
appear
below.
below
The
the
next
next
unique
unique
thing
thing
about
about
the
the
site
site
is
is
its
its
integration
integration
with
with
Slack.
slack
If
if
you're
you're
not
not
already
already
a
a
member
member
of
of
our
our
Slack
slack
channel,
channel
I
i
highly
highly
recommend
recommend
you
you
jump
jump
in
in
there
there
because
because
it's
it's
the
the
best
best
way
way
to
to
chat
chat
and
and
discuss
discuss
content.
content
But
but
the
the
problem
problem
with
with
Slack
slack
is
is
that
that
conversations
conversations
are
are
lost
lost
to
to
the
the
Slack
slack
archives
archives
and
and
they're
they're
also
also
very
very
hard
hard
to
to
find
find
if
if
you're
you're
looking
looking
for
for
something
something
specific.
specific
So
so
I
i
decided
decided
to
to
build
build
a
a
Slack
slack
bot
bot
that
that
would
would
take
take
our
our
conversations
conversations
about
about
a
a
specific
specific
post
post
on
on
FireShip
fireship
and
and
mirror
mirror
them
them
on
on
the
the
post
post
itself.
itself
This
this
is
is
an
an
alternative
alternative
to
to
traditional
traditional
blog
blog
post
post
comments
comments
that
that
I
i
think
think
offers
offers
a
a
better
better
experience
experience
especially
especially
for
for
developers.
developers
Let's
let's
imagine
imagine
you
you
have
have
a
a
question
question
about
about
a
a
specific
specific
lesson.
lesson
You
you
simply
simply
grab
grab
the
the
URL
url
for
for
that
that
lesson
lesson
and
and
ask
ask
a
a
question
question
to
to
the
the
question
question
bot
bot
on
on
Slack.
slack
Any
any
replies
replies
on
on
that
that
thread
thread
will
will
go
go
directly
directly
to
to
the
the
comment
comment
section
section
on
on
the
the
post
post
itself.
itself
This
this
means
means
we
we
can
can
chat
chat
about
about
a
a
specific
specific
topic
topic
without
without
losing
losing
that
that
valuable
valuable
information
information
to
to
the
the
Slack
slack
archives.
archives
And
and
if
if
you
you
have
have
a
a
question,
question
Slack
slack
is
is
a
a
much
much
way
way
to
to
get
get
a
a
response
response
on
on
a
a
question
question
versus,
versus
say,
say
discuss
discuss
comments
comments
or
or
something
something
similar.
similar
Now
now
getting
getting
back
back
to
to
the
the
site
site
itself,
itself
my
my
goal
goal
is
is
to
to
release
release
full
full
courses
courses
with
with
a
a
greater
greater
frequency.
frequency
I've
i've
decided
decided
to
to
offer
offer
the
the
Cloud
cloud
Functions
functions
master
master
course
course
for
for
free.
free
So
so
all
all
you
you
have
have
to
to
do
do
is
is
log
log
in
in
to
to
FireShip
fireship
IO
io
and
and
you'll
you'll
automatically
automatically
have
have
access
access
to
to
the
the
videos
videos
in
in
this
this
course.
course
If
if
you
you
take
take
this
this
course,
course
all
all
I
i
ask
ask
is
is
that
that
you
you
give
give
me
me
some
some
feedback
feedback
about
about
what
what
you'd
you'd
like
like
to
to
see
see
different
different
or
or
improved
improved
with
with
the
the
course
course
format.
format
Now
now
let's
let's
talk
talk
about
about
performance.
performance
This
this
is
is
easily
easily
the
the
fastest
fastest
site
site
I've
i've
ever
ever
built
built
that
that
is
is
fully
fully
interactive.
interactive
It
it
leverages
leverages
the
the
full
full
power
power
of
of
Angular
angular
and
and
Firebase
firebase
yet
yet
can
can
achieve
achieve
1st
1st
paints
paints
in
in
under
under
2
2
seconds
seconds
and
and
lighthouse
lighthouse
scores
scores
of
of
95
95
plus.
plus
Then
then
the
the
site's
site's
using
using
web
web
components
components
and
and
we
we
maintain
maintain
stateful
stateful
data
data
between
between
those
those
web
web
components
components
with
with
a
a
special
special
routing
routing
This
this
means
means
you
you
get
get
page
page
transitions
transitions
that
that
are
are
usually
usually
around
around
20
20
milliseconds.
milliseconds
I
i
have
have
logging
logging
for
for
this
this
currently
currently
enabled,
enabled
so
so
all
all
you
you
have
have
to
to
do
do
is
is
open
open
up
up
the
the
console,
console
navigate
navigate
around,
around
and
and
you'll
you'll
see
see
how
how
fast
fast
the
the
page
page
transition
transition
actually
actually
is.
is
While
while
at
at
the
the
same
same
time,
time
you'll
you'll
see
see
that
that
your
your
authentication
authentication
state
state
if
if
you're
you're
logged
logged
in
in
doesn't
doesn't
change
change
because
because
that
that
stateful
stateful
data
data
is
is
maintained
maintained
between
between
those
those
changes.
changes
And
and
if
if
you
you
wanna
wanna
see
see
how
how
I
i
do
do
all
all
this,
this
you
you
can
can
reverse
reverse
engineer
engineer
it
it
because
because
the
the
entire
entire
project
project
is
is
open
open
sourced.
sourced
If
if
we
we
look
look
at
at
the
the
project
project
on
on
GitHub,
github
you
you
can
can
see
see
that
that
it's
it's
broken
broken
down
down
into
into
4
4
main
main
projects.
projects
We
we
use
use
Hugo
hugo
to
to
manage
manage
the
the
content.
content
We
we
use
use
Angular
angular
elements
elements
for
for
the
the
interactive
interactive
web
web
components.
components
The
the
CSS
css
is
is
contained
contained
in
in
the
the
design
design
folder.
folder
And
and
lastly,
lastly
we
we
have
have
Cloud
cloud
Functions
functions
for
for
everything
everything
on
on
the
the
back
back
end.
end
So
so
the
the
important
important
thing
thing
here
here
is
is
that
that
we
we
can
can
all
all
now
now
collaborate
collaborate
to
to
make
make
this
this
project
project
better.
better
If
if
you
you
find
find
a
a
typo
typo
on
on
the
the
site
site
or
or
some
some
small
small
issue,
issue
you
you
can
can
simply
simply
open
open
up
up
a
a
pull
pull
request
request
and
and
contribute.
contribute
And
and
everything
everything
is
is
wired
wired
up
up
with
with
continuous
continuous
delivery,
delivery
so
so
once
once
your
your
pull
pull
request
request
gets
gets
merged,
merged
it
it
will
will
automatically
automatically
be
be
deployed
deployed
to
to
the
the
live
live
site.
site
There's
there's
so
so
much
much
more
more
to
to
talk
talk
about
about
here
here
on
on
the
the
technical
technical
side
side
of
of
things,
things
but
but
I
i
think
think
I'll
i'll
save
save
that
that
for
for
a
a
live
live
stream
stream
later
later
this
this
month.
month
So
so
if
if
you
you
have
have
questions,
questions
feel
feel
free
free
to
to
post
post
them
them
in
in
the
the
comments
comments
below
below
and
and
I'll
i'll
try
try
to
to
answer
answer
them
them
when
when
we
we
do
do
that
that
live
live
stream.
stream
And
and
I
i
might
might
even
even
pick
pick
out
out
a
a
random
random
comment
comment
or
or
2
2
to
to
win
win
a
a
t
t
shirt
shirt
when
when
we
we
do
do
that
that
stream.
stream
Now
now
before
before
we
we
wrap
wrap
things
things
up,
up
I
i
want
want
to
to
talk
talk
about
about
my
my
future
future
plans.
plans
I'm
i'm
going
going
to
to
be
be
shifting
shifting
from
from
develop
develop
mode
mode
to
to
content
content
mode.
mode
That
that
just
just
means
means
I'm
i'm
going
going
to
to
be
be
spending
spending
a
a
lot
lot
of
of
time
time
creating
creating
new
new
content
content
And
and
also
also
revising
revising
past
past
content
content
on
on
angularfirebase.com.
angularfirebase.com
I
i
will
will
also
also
be
be
revising
revising
the
the
Stripe
stripe
payments
payments
course
course
from
from
scratch.
scratch
When
when
that's
that's
ready
ready
in
in
the
the
near
near
future,
future
you'll
you'll
be
be
able
able
to
to
build
build
the
the
exact
exact
same
same
payment
payment
system
system
that
that
I
i
use
use
for
for
my
my
apps.
apps
I
i
just
just
want
want
to
to
finish
finish
off
off
by
by
saying
saying
thank
thank
you
you
to
to
everybody
everybody
for
for
all
all
the
the
continued
continued
support.
support
It's
it's
the
the
driving
driving
force
force
behind
behind
all
all
my
my
decision
decision
making,
making
and
and
I've
i've
tried
tried
to
to
sum
sum
that
that
up
up
in
in
a
a
small
small
manifesto
manifesto
that
that
you
you
can
can
read
read
on
on
the
the
site.
site
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker discusses the building of Fireship IO, a new platform to host content. They recommend building Fireship IO to allow for full control over the platform and offer more content at a lower price. The speaker also discusses the design of the site and its integration with Slack, as well as their plans to release full courses and revis their Stripe payments course. They thank all the people for their continued support and express gratitude for their contributions.
Fireship.io - Channel Update
Exactly 4 months ago, told you I was building a new platform to host my content from scratch called Fireship IO. And today is the day I finally get to show it to you. But I wanna first start by saying thank you to everybody who supports this channel. It's amazing to even have the chance to build something like this, which wouldn't be possible without this YouTube channel and this community. And it's the community that really drives me to pursue the mission of FireShip IO, which is to create resources that increase developer happiness and productivity. But the crazy thing is, if you were to ask me where do I see myself in 2 years in January 2017, it really wouldn't be here. At that point, I hadn't made a single video and didn't even think I was capable of doing a voice over, let alone producing a video that anybody would wanna watch. I probably would have gotten started a lot sooner had it not been for self doubt. So if you're thinking about doing something like this, my recommendation is to just go for it. This channel is approaching a 100,000 subscribers, which is just crazy. But I feel like we're barely just getting started. There's so much amazing technology that is Accessible to the average developer. And I really hope I can help unlock those technologies so people can build products that make other people's lives better. So that's my motivation for building Fireship, but why am I building this instead of continuing with angularfirebase.com? Let me first point out that it's not because my opinion of the underlying technology has changed. In fact, they're only getting better and I used Angular and Firebase to build Fireship IO. So the real motivation behind this Change is that I want full control over the platform, so I can offer more content at a lower price to everybody. If you're an existing pro member, you know that we have some of the content on the main site, some of it's Hosted on Teachable as full courses and some of it is on Leanpub in the form of an ebook. With FireShip, everything is under one roof, so there's no jumping back and forth between platforms. In addition, the name change makes it more flexible to cover additional content outside of Angular and Firebase like Rust, Flutter, etcetera. And 3rd, I'm a developer and I like building cool shit. So fuck it. It was something to do. But is it actually cool? Well, I'll give you the tour and you can decide. One of the most fundamental goals is to present content in a way that's friendly for developers. The overall theme somewhat resembles a Versus code and the code snippets themselves are designed to look like tabs in your editor. So you should notice a huge improvement in the aesthetics of the site versus Angular Firebase dotcom. And everything is designed with CSS variables, which means we can just click a button and switch over to a light theme or a solarized theme if we want. And the total CSS payload for this site is only 6 and a half kilobytes. The next thing you'll notice is the search, which is also designed to behave similar to Versus Code. The search is powered by Algolia. Simply start typing, and you'll see the results appear below. The next unique thing about the site is its integration with Slack. If you're not already a member of our Slack channel, I highly recommend you jump in there because it's the best way to chat and discuss content. But the problem with Slack is that conversations are lost to the Slack archives and they're also very hard to find if you're looking for something specific. So I decided to build a Slack bot that would take our conversations about a specific post on FireShip and mirror them on the post itself. This is an alternative to traditional blog post comments that I think offers a better experience especially for developers. Let's imagine you have a question about a specific lesson. You simply grab the URL for that lesson and ask a question to the question bot on Slack. Any replies on that thread will go directly to the comment section on the post itself. This means we can chat about a specific topic without losing that valuable information to the Slack archives. And if you have a question, Slack is a much way to get a response on a question versus, say, discuss comments or something similar. Now getting back to the site itself, my goal is to release full courses with a greater frequency. I've decided to offer the Cloud Functions master course for free. So all you have to do is log in to FireShip IO and you'll automatically have access to the videos in this course. If you take this course, all I ask is that you give me some feedback about what you'd like to see different or improved with the course format. Now let's talk about performance. This is easily the fastest site I've ever built that is fully interactive. It leverages the full power of Angular and Firebase yet can achieve 1st paints in under 2 seconds and lighthouse scores of 95 plus. Then the site's using web components and we maintain stateful data between those web components with a special routing This means you get page transitions that are usually around 20 milliseconds. I have logging for this currently enabled, so all you have to do is open up the console, navigate around, and you'll see how fast the page transition actually is. While at the same time, you'll see that your authentication state if you're logged in doesn't change because that stateful data is maintained between those changes. And if you wanna see how I do all this, you can reverse engineer it because the entire project is open sourced. If we look at the project on GitHub, you can see that it's broken down into 4 main projects. We use Hugo to manage the content. We use Angular elements for the interactive web components. The CSS is contained in the design folder. And lastly, we have Cloud Functions for everything on the back end. So the important thing here is that we can all now collaborate to make this project better. If you find a typo on the site or some small issue, you can simply open up a pull request and contribute. And everything is wired up with continuous delivery, so once your pull request gets merged, it will automatically be deployed to the live site. There's so much more to talk about here on the technical side of things, but I think I'll save that for a live stream later this month. So if you have questions, feel free to post them in the comments below and I'll try to answer them when we do that live stream. And I might even pick out a random comment or 2 to win a t shirt when we do that stream. Now before we wrap things up, I want to talk about my future plans. I'm going to be shifting from develop mode to content mode. That just means I'm going to be spending a lot of time creating new content And also revising past content on angularfirebase.com. I will also be revising the Stripe payments course from scratch. When that's ready in the near future, you'll be able to build the exact same payment system that I use for my apps. I just want to finish off by saying thank you to everybody for all the continued support. It's the driving force behind all my decision making, and I've tried to sum that up in a small manifesto that you can read on the site. Thanks for watching, and I will talk to you soon.
The speaker discusses the building of Fireship IO, a new platform to host content. They recommend building Fireship IO to allow for full control over the platform and offer more content at a lower price. The speaker also discusses the design of the site and its integration with Slack, as well as their plans to release full courses and revis their Stripe payments course. They thank all the people for their continued support and express gratitude for their contributions.