WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.066 --> 00:00:02.536 align:middle
PostCSS is running!

00:00:03.446 --> 00:00:04.806 align:middle
Let's see what it does!

00:00:05.576 --> 00:00:06.456 align:middle
Go back to your browser.

00:00:07.206 --> 00:00:08.806 align:middle
We haven't reloaded the page yet.

00:00:09.206 --> 00:00:12.816 align:middle
I'll search for app.css and click to open that.

00:00:14.656 --> 00:00:18.136 align:middle
Search for one of the vendor prefixes: -webkit.

00:00:19.306 --> 00:00:24.416 align:middle
Ok, so before adding PostCSS,
we have 77 occurrences -

00:00:24.586 --> 00:00:26.206 align:middle
coming from our code and Bootstrap.

00:00:27.136 --> 00:00:32.906 align:middle
In theory, if we told PostCSS that we
need to support really old browsers,

00:00:33.026 --> 00:00:35.696 align:middle
this number should get way higher!

00:00:36.346 --> 00:00:37.206 align:middle
How can we do that?

00:00:37.596 --> 00:00:41.396 align:middle
Some config in postcss.config.js?

00:00:41.996 --> 00:00:43.196 align:middle
Actually, no.

00:00:43.766 --> 00:00:45.776 align:middle
It's way cooler than that.

00:00:46.746 --> 00:00:51.786 align:middle
In the JavaScript world, there is a
wonderful library called browserslist.

00:00:52.356 --> 00:00:58.746 align:middle
It's a pretty simple idea: browserslist allows
you to describe which browsers your site needs

00:00:58.746 --> 00:01:01.646 align:middle
to support, in a bunch of useful ways.

00:01:02.046 --> 00:01:06.546 align:middle
Then, any tool that needs this information
can read it from a central spot.

00:01:07.346 --> 00:01:09.906 align:middle
Check it out: open up your package.json file.

00:01:10.806 --> 00:01:15.406 align:middle
Yes, this is where we'll configure
what browsers we need to support.

00:01:16.376 --> 00:01:19.976 align:middle
Add a new key: browserslist set to an array.

00:01:20.926 --> 00:01:26.426 align:middle
You can do a ton of things in here - like say
that you want to support the last "2" versions

00:01:26.426 --> 00:01:34.566 align:middle
of every browser or any browser that is used by
more than 1% of the web or some specific browser

00:01:34.566 --> 00:01:36.766 align:middle
that you know is used a lot on your site.

00:01:37.506 --> 00:01:44.656 align:middle
Yea, browserslist uses real-world usage data to
figure out which browsers you should support!

00:01:45.816 --> 00:01:50.016 align:middle
Let's use a simple example: > .05%.

00:01:51.126 --> 00:01:53.486 align:middle
This is actually a pretty unrealistic setting.

00:01:54.146 --> 00:02:02.036 align:middle
This says: I want to support all browsers that
have at least .05% of the global browser usage.

00:02:02.446 --> 00:02:09.896 align:middle
So this will include some really old browsers
that, maybe only .06% of the world uses!

00:02:11.146 --> 00:02:19.046 align:middle
Stop and restart Webpack to force a rebuild and
make sure PostCSS reads the new setting: Now,

00:02:19.456 --> 00:02:26.616 align:middle
go back, refresh app.css, search
again for -webkit and woh!

00:02:26.976 --> 00:02:29.566 align:middle
992 results!

00:02:29.876 --> 00:02:31.036 align:middle
That's amazing!

00:02:31.036 --> 00:02:37.646 align:middle
By the way, there is also a tool
called BrowserList-GA that reads

00:02:37.646 --> 00:02:44.766 align:middle
from your Google Analytics account and dumps
a data file with your real-world usage data.

00:02:45.706 --> 00:02:50.006 align:middle
You can then use that in your browserslist
config, by saying something like:

00:02:50.486 --> 00:02:59.256 align:middle
> 0.5% in my stats, which literally means:
support any browsers that is responsible

00:02:59.256 --> 00:03:05.196 align:middle
for more than .5% of traffic
from my site's real-world data.

00:03:05.766 --> 00:03:08.676 align:middle
Cool. So what about our JavaScript?

00:03:09.256 --> 00:03:11.596 align:middle
Does Babel read this same browserslist config?

00:03:12.346 --> 00:03:18.776 align:middle
Totally! Search for .js and click to open
the compiled admin_article_form.js file.

00:03:20.096 --> 00:03:22.706 align:middle
Inside, search for $autocomplete.

00:03:23.496 --> 00:03:27.926 align:middle
Yep! We saw earlier that Babel
is outputting var $autoComplete,

00:03:28.206 --> 00:03:31.846 align:middle
even though this was originally
const $autoComplete.

00:03:32.866 --> 00:03:37.186 align:middle
That makes sense: we said that we
want to support really old browsers.

00:03:37.846 --> 00:03:42.186 align:middle
So... what if we change the
browserslist config to > 5%?

00:03:42.186 --> 00:03:50.076 align:middle
That's probably still a bit unrealistic: this
will only support the most popular browsers

00:03:50.076 --> 00:03:53.066 align:middle
and versions: pretty much no old stuff.

00:03:54.416 --> 00:04:04.156 align:middle
Stop and re-run Encore: Then move back
over to admin_article_form.js and refresh.

00:04:05.506 --> 00:04:07.546 align:middle
I'll do a force refresh to be sure...

00:04:08.206 --> 00:04:10.436 align:middle
then search for $autoComplete.

00:04:11.056 --> 00:04:12.426 align:middle
And... huh?

00:04:12.736 --> 00:04:13.996 align:middle
It's still var?

00:04:14.646 --> 00:04:16.966 align:middle
Hmm, that might be right...

00:04:17.056 --> 00:04:24.306 align:middle
but const was added in 2015 - it should be
fully supported by all modern browsers by now.

00:04:25.506 --> 00:04:26.116 align:middle
It turns out...

00:04:26.416 --> 00:04:31.776 align:middle
it is, and we're not seeing the
changes due to a small bug in Babel.

00:04:32.806 --> 00:04:38.256 align:middle
Behind the scenes, Babel uses some smart
caching so that it doesn't need to reparse

00:04:38.256 --> 00:04:43.046 align:middle
and recompile every JavaScript
file every time Webpack builds.

00:04:43.606 --> 00:04:48.026 align:middle
But, at the time of recording, Babel's
cache isn't smart enough to know

00:04:48.076 --> 00:04:53.096 align:middle
that it needs invalidate itself when
the browserslist config changes.

00:04:54.116 --> 00:04:59.296 align:middle
Once you know this, it's no big deal:
anytime you change the browserslist config,

00:04:59.646 --> 00:05:02.206 align:middle
you need to manually clear Babel's cache.

00:05:03.156 --> 00:05:04.706 align:middle
In my terminal, I'll run:

00:05:05.116 --> 00:05:19.696 align:middle
rm -rf node_modules/.cache/babel-loader/
Now restart Encore: Let's check it out!

00:05:19.696 --> 00:05:23.336 align:middle
Refresh and search for $autoComplete.

00:05:24.426 --> 00:05:26.906 align:middle
There it is: const $autoComplete.

00:05:28.006 --> 00:05:30.396 align:middle
Look also for class ReferenceList.

00:05:31.206 --> 00:05:36.406 align:middle
Now that we're only supporting new browsers,
that code doesn't need to be rewritten either.

00:05:37.136 --> 00:05:42.486 align:middle
Oh, but there is one type of thing
that Babel can't simply rewrite

00:05:42.486 --> 00:05:45.226 align:middle
into code that's compatible
with olders browsers.

00:05:45.846 --> 00:05:52.006 align:middle
When you use a totally new feature of JavaScript
- like the fetch() function for AJAX calls,

00:05:52.496 --> 00:05:57.336 align:middle
you need to include a polyfill library
so that old browsers have this.

00:05:57.886 --> 00:06:01.466 align:middle
But... even for this, Babel
has a trick up its sleeve.

00:06:02.226 --> 00:06:03.266 align:middle
That's next.