MATT GAUNT: You must have used Dreamweaver, right?
ADDY OSMANI: Yeah, I use Dreamweaver,
but I used other tools before Dreamweaver.
I used Notepad.
MATT GAUNT: Notepad's not really a tool, is it?
ADDY OSMANI: What are you talking about?
Notepad was the pinnacle tool of its time.
MATT GAUNT: How is it a pinnacle tool?
It was text.
That was it.
ADDY OSMANI: It was text.
That's all you needed.
MATT GAUNT: But it's not a tool.
It's just like, nah.
ADDY OSMANI: Notepad didn't you let you change
the font face until Windows 98.
MATT GAUNT: And that was a beautiful day for you, I'd say.
ADDY OSMANI: It was a beautiful day for me.
It's like we got one new feature.
That's a party.
MATT GAUNT: That was the one feature everyone wanted.
Everything else, nah.
Like I used to use-- Dreamweaver was the first one
I think I used.
No, actually, it was Frontpage.
Frontpage was beautiful.
ADDY OSMANI: Frontpage?
Was this Frontpage 2.0?
MATT GAUNT: I can't remember the version.
It was old school, though, and I enjoyed it greatly.
I had like a fluorescent mushroom
as my tiled background.
It was great.
ADDY OSMANI: Frontpage was great.
You could easily add in your marquee tags and your blink
tags.
MATT GAUNT: Dancing babies, accounts, under constructions.
ADDY OSMANI: Fire.
Just random fire anywhere on your page.
MATT GAUNT: So I use Packaging Control just
for when I'm installing things.
Like I've had to install it at some point.
But what do you--
ADDY OSMANI: So I usually use-- so Package Control
is a lot like Tinder for Sublime Text modules.
You swipe left or right depending on the quality
of plug-in you're after.
MATT GAUNT: So which ones do you swipe right for?
ADDY OSMANI: Swipe right is good.
MATT GAUNT: Right is good.
The one that you want to keep.
Yes.
ADDY OSMANI: I'm terrible at Tinder.
So I swipe right for linters.
I love linters.
Linters help make sure that your code quality is
where you want it at.
MATT GAUNT: I use Linters as well.
I've been using [? JSON ?] for a little while.
And it's actually been insanely good.
So if you do things like foo.helloword,
and you haven't actually defined foo anywhere,
that doesn't make sense.
You can't call a function helloworld on nothing.
So for things like that, it's super helpful.
And I used to have [? JSON ?] in and my
build process, which is fine, but it would
complain in the background.
And it's so much easier just having it in my text editor
there and then.
And it just catches tons of little errors like that.
ADDY OSMANI: That's awesome.
So you can easily visualize where
you're breaking your code, and you can go in and fix it.
That's pretty cool.
So on a similar to that, I love using a tool called JSCS
for making sure that you're following your JavaScript style
guide.
And here I've got JSCS running against a piece of code.
And it's highlighting anywhere where I'm
going away from my style guide.
I've got operators that are sticking to variables that they
shouldn't be.
I've got spaces in front of opening brackets.
One of the really cool things about JSCS
is they recently added this option that
lets you go and format your code so it fixes all of the style
guide issues for you.
MATT GAUNT: Nice.
You don't even have to do anything.
ADDY OSMANI: It's amazing.
Exactly.
MATT GAUNT: So does it have like a [? JSON ?] RCFile as well?
ADDY OSMANI: It does.
It does.
So similar to the way [? JSON ?] has got [? a JSON ?] RCFile,
right?
MATT GAUNT: Yeah.
ADDY OSMANI: So this is a very similar concept.
You can set a preset that you want to use.
So JSCS supports the Google JavaScript Style Guide.
And if you want to customize that a little bit it,
it supports you doing that.
MATT GAUNT: So anything you don't like from a default one--
boom.
One of the packages that I'm finding actually
more and more useful is ColorHighlighter.
All it does is it just shows this like underlined color
of whatever's in the CSS.
When you hover over it, it covers the entire background
with that bit of text with the color that it represents.
And one of the nice things that I realized
is under the package settings, you
can actually just switch it out so you
can stay filled all the time.
And then any color in your CSS, it will always be filled.
And it's just really handy just because you
can see a color in your page, quickly see
where it is in the CSS, and make any tweaks you want to make.
ADDY OSMANI: Right.
So normally people end up using external tools
to go and select colors.
But this is really useful because, let's say,
you're messing around your styles,
and you just want to change the color.
Just bring up color picker inside Sublime,
change the color, hit pick, and it'll go and update the value.
MATT GAUNT: This actually swaps it in the file.
Nice.
ADDY OSMANI: Yeah, it'll swap it right in line.
And if you happen to be using a getter plug-in,
it'll also highlight that with the color
that you've just chosen.
So it's nice and visual.
MATT GAUNT: So I mean, it kind of
does what ColorHighlighter does, but in a lesser form and more
rubbish.
Yeah, sure, OK.
ADDY OSMANI: For a given definition.
MATT GAUNT: The only other plug-in
that I use on a regular basis is AutoFileName.
And all it does is, whenever you're typing in a file,
whether it be adding it in HTML like referencing a CSS file
or adding an image as a background image,
as you're typing, it just says, this is probably the file
that you're going to type in, whether it's
a folder or a file name.
And it just autofills it, basically.
ADDY OSMANI: You may just be the laziest human being
I've ever met.
MATT GAUNT: No.
All it's doing is just stopping me from adding in typos.
ADDY OSMANI: OK, so it avoids you
having to go through the file tree and look for the file
that you're working on.
MATT GAUNT: Exactly.
ADDY OSMANI: Do you use Autoprefixer?
MATT GAUNT: I use it in my build process.
ADDY OSMANI: OK, so you can also use it in your editor.
Just work on some styles without any prefixes,
go and enable a plugin, it'll fill out everything for you.
MATT GAUNT: But like why have it in your text edits?
Because the build process makes sense.
You type your CSS.
You do all the things.
Build process picks it all out, creates the final output,
and then it keeps the CSS just clean.
It doesn't have any of the stuff that you normally have.
ADDY OSMANI: I guess this is useful
if you're working on a smaller prototype
and you want the same benefits as you
get in the build process.
MATT GAUNT: So basically, when you're too
lazy to add in a build process.
ADDY OSMANI: Exactly.
Yes.
MATT GAUNT: Nice.
[MUSIC PLAYING]