Ooh. All right. So. I'm a bit of an Eleventy
fan, just a small bit. I happen to own this
site called 11ty.Rocks. Um, I frequently say that Eleventy has
been my enabler and I, I'm not kidding. I have uh I have over 20 repos
that are Eleventy based projects. Um, and so if you get nothing else
out of today, what I want to make sure I share is that Eleventy is so much
more than a static site generator. Like that's its core functionality. But I've been able to do just about
anything that I've wanted to do with it, including some really fun
stuff for a currently secret new resource that will be a paid resource. My first paid resource, um, it's
coming up hopefully in a few months, but 11ty.Rocks, you can find
quite a bit of information here. I have, um, a quick tip section. I have info on the config, which we'll
talk about more, um, a few articles. I, I had a little switch of priorities,
so I'm um, I guess April 2nd. Oh, it was still this month. So I got at least one out this month. Um, you can get a quick overview in
three minutes, which is, which is the same overview we're going to do today. It will take a little longer
than three minutes to do it live. Um, And then I also have a full 20
minute course on egghead, if you will. Um, it is a membership co
um, course not a free course. I believe. And then I also have started
an 11ty Rocks YouTube. And for some reason it has
over 200 subscribers and I only have two videos, but I will be
putting this recording out there. So at least I have something. And, um, after I get through a few
other priorities, I am hoping to return to this and actually get,
get some more content put out there. Um, I have a, quite a variety of, of
starters that you can choose from. So there's a few select ones here. This Sass starter is
probably the most popular. And then I have some plugins that
I've, I've worked on creating. That's been a fun thing. Creating packages was new to me. So that was a good, uh, as I
said, its my enabler, right? So it got me to finally create a package. Um, and then I get into some
of the kind of different things that I've done with it. I've made a web component generator. I've made an email generator, a
CSS Houdini worklet generator. So, um, Just putting those out real
quick to say, uh, you know, yeah, it's going to be offering you more than
just what a static site is able to do. Um, but this top link, there's an
overview of key features and it talks a little bit more about those
projects that are definitely not just a static site being produced. So anyway, there's, there's the
plug for all that, but we will get into kicking off a new site. And let me just make sure I
read this question that came in. Um, I have a bunch of blogs and want
to create a random page to display a random blog every time I load that page. And that's an interesting question. We can definitely address that one. Okay. So let's get this kicked off,
go ahead and feel free to pop in questions if we think of them and
we'll, we'll come back to them. So as you can see, I have a
truly completely blank project. Um, so I am going to end it
just our essential project. We don't have to do this step if you're
only going to build this locally, um, You can just run it from the command line. You can install it globally and
just run the project and not have to actually have a package. But if you're going to publish it
somewhere, that has a build step you'll, you'll likely want to
include, um, include include it as a package so you can indicate
the commands needed to build that. So that's going to be our
second thing that we'll do. I recently learned that I've been
leading everyone astray and that the instructions that I've been giving to
use just Eleventy are only applicable if you do have it installed globally. So I have some updating
to do with my materials. Um, if you have seen this, including in
the tutorials that I have out on, on, um, on well, everywhere, lots of places. Um, so I actually
haven't done this at all. I just realized it this week that
I had incorrect, but anyway, we're going to run Eleventy and we're
going to have a start command. That's going to include the serve flag. That's going to load up BrowserSync. Um, if you're not familiar,
that means we'll have access to hot reload of our browser. As we make changes to files and then
we'll have just a build command it it just doesn't have that serve flag attached. So let me make sure to save. Oh, and you know what? We missed a critical step
in between those two. We need to install
Eleventy into this package. So, um, what to note there is
that it is a scoped package. So it's going to be at one, one
T Y slash Eleventy spelled out. All right. So that's installed. So we can go ahead and
close out of our package. You don't need that. Um, and then the next optional step,
but one that I, um, typically start with as a preference is we can go
ahead and add a Eleventy config file, which is dot Eleventy dot JS. And in here, we're going to make
just one modification to start out with, we're going to modify what
we want our input directory to be. And our output by default, your input
is just your root, um, project root. And if you don't customize the
output, it's going to create a directory that's _site. And that will be where
your public files live. If you are interested in having
your input and output directory be the same, that's actually possible. You can check out the docs for that
information, which I'll just drop the main official docs link there. So that's our one modification. And now at this point, You know, if
we, I don't have this checked into a repo just a local, um, directory. So, you know, typically I'd do a
.gitignore and those sorts of steps in here as well, but we're just
going to get started creating today. Um, I may have thrown it up as a
repo, um, later, but I have a lot of repos doing similar things. So if we do something unique
though, we'll push it up there. Alright now it's time
to actually get started. Now a, the first key concept is that
Eleventy accepts, well, technically 10 different templating languages, and one
of the languages that was asked about, um, over on Twitter when I, again,
when I push this out was about using markdown as kind of your first, um,
your primary content source, and also not necessarily making pages from that. So we'll try to address that question. Um, but first, since I customized my
input and output, let's go ahead and add my input directory that I defined and. Um, just as any project anywhere,
um, when you're making a website, we need an index file. And so we can decide to do this
as markdown or Nunjucks, Liquid, JavaScript, um, handlebars. There's there's 10 different ones. You can find those in the docs. I tend to use HTML, markdown and Nunjucks
as my primary templating languages. So our first step, I am
going to start with markdown. So we'll make markdown index file. And then what we can do at this point
is go ahead and run our projects. So we customized what
our start command was. Hey, max! And say, we're going
to go ahead and run it. And so since we included that
serve flag, as I mentioned, it's going to load up BrowserSync
and I have it loaded over here. I'm going to refresh the page. Of course, there's nothing there. We haven't given any content, but at least
we don't have our error page anymore. So it's successfully has run. Now, the first thing to know is of course,
we're going to do a hello Twitch world. Is that it's not going to actually
successfully reload the page because in order for BrowserSync to work,
we have to have an HTML head. So I'm going to have to manually
reload it just this first time and the way to resolve that, the
common pattern to resolve that is to start to create a layout. And so within our src file, we're
going to create the Eleventy expected directory of includes. This is going to be where Eleventy
looks by default for layouts. Um, if you coming from different
types of environments, partials might also be something new you're you
tend to create template partials. Um, You can also throw
your JavaScript in here. Um, there's a little bit different
way you might think about that. And we'll talk about that later. Um, so in our includes folder, kind
of the convention here is to create a base layout as your starting point. And I tend to create my
layouts with Nunjucks. So the extension there is N J K. And from here. Um, so I'm in VSCode. I enjoy using Emmet that's baked in. So we'll just use that to quickly give
us a HTML5 boilerplate and then we need to connect our index to that layout. So even when you're not in, um, a
markdown file an interesting thing about Eleventy is that you can use front matter. I think on, I know you can at least
use it on markdown, Nunjucks and Liquid templates, I think on other ones as well,
because it's doing some extra processing. So we'll do some front matter
in here and we will assign the, uh, layout as that base file. And we'll refresh one more time
because it's not connected yet. And I evidently. Oh, cause I haven't told
it to output my content. So we've connected it successfully, but
we haven't actually in, in this layout, um, indicated where to pull that content. That's why we lost our h1. So a few different things. The other thing I typically include
in my front matter as a starting point as a title, um, cause we'll end
up using that several places across, um, the base layout so then we're
going to go ahead and replace what Emmet populated here with our title. And let's go ahead and give us a
nice kind of semantic starting point. So we'll wrap it up there and let's
go ahead and fix our semantics while we're on that topic. Since we have defined our h1 differently
and then we'll do main, um, A main element here and now we'll insert the
Eleventy expected variable of content. So this is your. Anything within the body of your template
file, by the way, I just realized I'm throwing a couple different terms at you. So layouts are special templates that
can wrap your content, but all files that you're creating content within your
markdown, Nunjucks, et cetera, files. Those are considered
templates by Eleventy. So a little bit interesting, um, pages
maybe use the more familiar term, but it's not always pages either. You know that you're,
you're creating here. Okay, so just wanted to
make sure I mentioned that. "Petition for a semantics command." That's a good idea. It's a little long. Oh, you know what? Watch this. I was going. I wasn't going to mention this yet but
the Twitch scenes are, uh, Eleventy. So there you go. Now you have it. I can see if it works. Um, anyway, so yeah, nice and
centered to that time around. Cool. So, um, anyway, so the Eleventy
supplied variable of content is going to pull anything within
the body of this template, right? So the other. Let's go ahead and do it so I
can show you what's gonna happen. So you notice that it didn't actually,
and let me zoom in my browser side, it didn't actually compile that. So we have one more tiny step to do, and
we're going to bring in what is called a filter and again, supplied by Eleventy. And it's the, I think supplied by Eleventy
slash the templating languages themselves. So I added that safe, which means
it's okay to, um, Render the HTML and not escape it, which was what
was causing it to show up here. Hey, PracticalDev. welcome! Yes. Eleventy is so fast and that's
another reason why I say it's been an enabler for me. So at this point, Hey,
we have a site, right. We could keep creating pages out
here and let's create just one more. So I can talk about the fact that,
um, by default Eleventy uses, uh, file system page creation. So I've created that "about" file. I'm going to just to make this
a little more expedient, um, we'll change the title to "About" Let's give us a nice, just "Hello"
and then over in my browser side, I'm going to go out to /about and
I instantly have my page there. So pretty awesome. So if we look at the, not quite sure why I
think I accidentally hid my public folder. Yep. I did. Okay. Um, Sorry about that. Anyway, I wanted to show, so this
is what's being actually compiled so we can see our index file. And then for our about to work like
that, it's it's creating the index in order for that to work again, these are
like, you know, the, the central concepts of how web webpage comes together. Right. It's just kind of automating some of that
for you by allowing you to use templating, to make these things more efficiently. So right now with that said, we haven't
done anything that exceeds static, right? It's, it's nice that we've added the
templating but you know, for a super small site and we're not getting
too much benefit, to be honest. Um, other than to me it's still
a benefit to have it run the, the server and have BrowserSync included. Um, I think I have a gist out there
of before I found Eleventy trying to figure out the slimmest setup, I
could, I don't know why I was really, really lobbying to not use Gulp. Um, And so consequently, I had a
giant package that was doing some of the things that are happening
from Eleventy, just as a given, like moving files around adding ins compile
well compiling Sass is separate. We can talk about that, but
loading BrowserSync so Eleventy each just compresses all
that together in my workflow. And I can just get moving no matter
how big or small the project is. Um, So, yeah, so we, again, like
I said, we could keep going. We could, if your goal was just,
um, um, some page content, you know, um, of course we're missing
one kind of key thing in here. Um, we haven't added any style,
so, um, let me get down my cheat sheet to that section. Um, as I mentioned, I do havea
Sass starter out here that will show you how to do Sass um, and
there's literally nothing in it. Besides the build process processing,
um, scripts needed to include Sass as part of your Eleventy workflow. Um, so if you're interested in that,
um, that's, you can go grab that. I can give you the direct link here. If my copy paste decides to work. Not sure why my keyboard copy paste is
not working, but anyway, um, but we're just going to talk about how to add just
a style sheet and get started with, you know, vanilla CSS, and there's other
folks who certainly have talked about, if you're interested in a particular
framework, that's not my bag of tricks. Um, but if you are interested in
that, you can certainly search and find something, either a starter
that includes a certain framework or, uh, instructions on how to do that. But let me close some of
these files and clean this up. Um, so the first thing we're going
to do, and this part is going to be a matter of preference. Um, I'm going to create a CSS directory
and create my style dot CSS file. And then really the only style
anybody needs is that, oops, I made the whole thing, a directory. I always do that in VSCode. Um, really the only style
anybody needs is this one. So we have a couple of steps to
actually get it to go through. The first is currently, and I think
this might change in a future version. Um, it's, it's, I've seen it bantered
around is that by default, Eleventy is not going to pick up that CSS and push
it through to our output directory. So we have one intermediate stop to
tell it that we would like to do that. Um, And that is called
adding a pass through copy. Um, other instances where you might need
a pass through copy is if you're a locally hosting fonts or for your favicon, um,
robots dot texts, any of those kinds of extra files that aren't recognized
to be a template file right now. So, okay. That's in place so we can see
already it pushed it through. So that's good. Um, but again, just like any
classic website, we need to link to this in our, in our template. And again, this is where I super
appreciate having, um, Emmet because I do, I still don't remember the syntax
and I run a blog called moderncss.dev. So here we are. Um, All right. So, um, just to kind of guard
ourselves against, you know, maybe this site is going to get a
lot more complex, uh, hierarchy. Um, we're going to pass this in
as, uh, through a filter, which is going to help update this
relative path if, if it needs to be. Um, so we'll do that and
we'll use the filter is URL. So there we go. It works. We now have our lovely san serif sites. And, um, I just need to refresh that
page, but just as, um, the, the other step though, that we haven't done
yet is it's pushing it through, but BrowserSync is not aware of it in terms
of making sure the changes get included on our, um, When we make a change. So we have one more adjustment. We already added it as a pass through
copy, but we also need to add it as what is called a watch target. So it's the same path we're
passing in, but a watch target. And so now, um, if we want to make a
change, it will be included or not. Did I miss one more step guys? I haven't done this for a little while. I may have to just restart my,
um, restart the server real quick. Okay. We'll check that that is now working. I didn't miss another step. Okay. Now we're good. So I did have to restart,
um, for, for that scenario of adding a new watch target. So minor thing you saw, how
quickly though it rebuilt it. Not a big deal to have to restart. Um, I did a couple of years
of React development, um, including working with Gatsby. So you'll find immense speed
gaines um, between those two, I'll say that obviously there's
various reasons to get used either. And, um, maybe we can talk
about that at a different time. Um, so the question that I
received on Twitter was "my biggest points of confusion are around
including markdown snippets. Um, it seems like docs are about
blog posts as collections", which that's a topic we can get to as well. Um, "what if sites just have chunks
of content on single pages they want to pull it in from markdown?" So I think the question is like,
what if you don't want to actually display them as pages, you just kind
of want to use it as the basis for content and that's something I am, um,
Is a frequent need of mine as well. I have a few different sites that
are single page sites, but I prefer to write my content in markdown. Um, so we can absolutely
go through how to do that. And actually I'm going to grab the link. I actually go through this on my site. I did struggle with what to name it. So folks may not be getting
there that are looking for. This information, that link is to this
article on using template content as data. And so this whole, um, tutorial is,
is the scenario of wanting to create content, but not output it as pages. So we'll kind of go through this and this
will give us a chance to thanks, Ben. Um, this will give us a chance to talk
about collections, which we haven't talked about yet, and they are a super
important, um, concept for Eleventy. So, if you happen to come from
WordPress world, I have 10 years of WordPress under my belt. Um, collections would be similar to how
you add tags or categories and you get, you don't create a group of content. So similar ideas in Eleventy. And in fact, they use the tags
terminology to create a collection in the most, um, fundamental way. And so let's create our first collection. So one thing I like to do is
go ahead and add a directory to contain that collection. And I'll show you why in a second, um,
what kind of collection should we have? Let's have a collection of I always do
like posts for like the blog scenario. Um, we'll start there. If anybody has a more clever
idea, we'll go for it. Okay, so posts and we can go ahead
and output, you know, post one post is also a little misleading because
of how we're going to use it. Um, let's say news. So with the idea that it's going
to be like, just something we output in one place, so they
don't really need their own page. Um, You're not going to get quite this
complex in this, in this next 15 minutes, but you know, you might like have some
date based, um, rules around when they can be viewed and actually have that in place. On my main, um, my main website
out here for my events section. I rules in place that, you know, flip
it between these two, um, sections, whether they're upcoming or past,
and these are done in a similar way of what I'm about to, to talk to. So we'll do it this way. So by default, um, right away,
it's gone ahead and created. That's actually created both because,
uh, It's not going to remove something that it sees that you have removed. So that's a, that's a safety tip. Um, if you remove a section of content
you'll, you can just, you know, delete your public and then the next time you
save it, it'll rebuild it right away. Um, so it's, it's going to do the typical,
like I said, it's file system creation. It recognizes markdown as a template file. And so, um, it's gone ahead
and push that through. So. Um, one of our first things that
we will do, we're going to, we're going to do two things in one step. We're going to define the collection
and we're going to prevent that page output that we saw happening. So I'm going to go ahead and copy this. We'll change the data, but, um, and how
that's done, make sure I'm in the right directory, um, is we're going to create,
what's called a data directory file. This file has to be named
the same as the directory. And it's typically JSON at
least that's the format I use. You can use, um, JavaScript
as well as an export. I believe I haven't actually done that. So I'm not sure. Um, so news dot JSON, and to create our
collection, we're going to add a tag. Now this directory file. The purpose of it is that it will apply
these, um, this data to everything contained within that directory, which
is really handy for this stuff that you repeat across each one, you can also use
it to change the format of permalinks. I have quick, quick tips regarding
that, um, out on 11ty.Rocks. So in this case, we're changing it to
news because we do want the collection, but in order to prevent that page
creation, you set permalink to false. So I'm going to delete my public again. And if we go back into event
one, I'm just going to save it. You see that we no longer have
the news directory being created and those individual pages. So now we can, once we start to
fill out this markdown, we can display it anywhere we want. We can still continue to use front matter. Um, you know, we're just not
going to define a layout because we're not outputting a page. So we'll go ahead and
say something like this. Um, here is the news and let's
give us a couple, um, we'll keep it simple event too. I guess I'm switched from
my, uh, event to news. Oops. I switched that up. Didn't I all right. We'll just do it this way. All right. So we have two news items. I'm going to go ahead and close those. We don't, we don't need to keep
seeing their content for now. Um, but now how do we use that content? How do we output that collection? I guess? So, um, we've created the collection
thanks to this tags, just to reaffirm. Um, that part. And so we have a couple decisions
to make, um, you know, where do we want it to output? Um, one amazing thing about Eleventy is
that you can mix templating languages. It might've been kind of obvious you could
mix HTML with like Nunjucks, but you can. And you might know that you can insert
HTML in markdown, um, by default. Um, but we can actually put Nunjucks
in markdown, which gives us access to things like looping and filters. There is a caveat to that. Um, technically, technically it
assumes if it finds a template tag in markdown, it assumes that that's Liquid. Um, so. The safeguard to make sure that
this works is in our front matter. So I'm in my index file, which is where
I want this collection to, um, output. We're going to add templateEngineOverride,
and we're going to set that to say that first we want it to process as
Nunjucks so that way it processes those mark or those template tags, and then
we want it to process as markdown. So now we can freely intermix these. So let's give us a new news
section and the syntax here. Um, it's going to look a little funny if
you're not used to templating languages. Um, they're gonna all indicate template
areas a little bit differently. Um, both liquid and Nunjucks,
I believe use this kind of setup to start indicating. Um, things like for loops or shortcodes. Um, and then we already saw when
we looked at the base template that it's using double curlies
to indicate variable output. So in this case, we're going to create a
for loop and we're going to loop through and we can, Iuh you might be familiar
with, for loops from other languages like JavaScript, um, where this next thing
will be just a local variable for this. For I'm going to call it item in. Now we're going to reach into
our collections and we called that let's double check. Cause I usually either pluralize
it or not, and then try to use the wrong version out here. So I did call it news. Let's go ahead and close our for loop. Um, and then. We only gave it a title
and a bit of content. Um, this is where it gets a
little bit tricky when you're in a for-loop versus a layout. In a layout, like our base layout, we
sort of get the front matter types of things and end this content kind of
just for free it's already available. But when we're inside of a loop,
we have to, uh, dip one level down to actually get this content. Let me, let me show you what I mean. So first let's get the title. So our local variable is item and we
have to dip into the data, um, property of that template content, and then we
can access the title that we added. So there we go. Just like that. It's it's output on the page and we also
did have content, and this is another one where it's just a little bit tricky. Um, But it's going to be
directly off of our item. And instead of content, what we want
is the already compiled version. So it's already been compiled
from that template file out here are news one and news two that. Mark. We want the markdown pre-compiled
essentially, so we'll say template content, and just like we saw for the
regular content variable, we want to make sure to pass it in the safe filter. So obviously I didn't give this
any formatting, so it's all getting smashed together, but it, you
know, it's outputting as we expect. So, um, the other interesting thing is that because we're within
a markdown file, it's going to assume that those are paragraphs. So we obviously can adjust that
by adding in very good news. Yes. The best news. Get your good news here. We all need some good news. Um, so we can adjust the semantics
of that in, in our template. So it makes it, this is, this is literally
like Eleventy's superpower to me. This is what makes sense from my
workflow, what I try to do with it. And, um, Nick oh you're always lobbying
for <marquee>s I'm going to send you a marquee shirt for Christmas or something. Um, um, anyways, so, Oh my gosh. Are you...okay... let's see. Um, now I'm curious. Did did anyone see earlier in the
week, someone had a super clever use of <marquee> that they were using for like
their own personal, a teleprompter and made it go vertical, which I didn't even
know that vertical scrolling was a thing. I also didn't know you
could change the speed. So this little <marquee> element
that might've been like the first web component when you think about it. Good times. Okay.
Major tangent. Let's take that off. Sorry. I should've given a motion warning. I'm trying to get better about
doing that when it's applicable. "The file naming is just a convention not
required because it's in the news folder". Um, you can clarify if I'm interpreting
that correctly, Nick, um, this folder, the data directory file does need to
be the same the same as the directory it's in these fellows themselves. I, I just, I use news. It can be whatever you
would like it to be. Um, and interesting thing about
that too, is, or a pitfall of. Doing your content this way, where it's
not outputting collections and even when it is, or excuse me outputting, um, pages. Um, but even when it is, is the concept of
ordering that content because by default, it's going to be date based ordering. Well, if you're kind of rapid fire,
um, creating this content and. You know, the date-based ordering
may not be what you actually want or confusingly what you see on your
local site may not be the same as what you see on a production site. Especially if you're using
something like Netlify where it's going to rebuild that content. And so the date. Uh, the timestamp that you have
locally, um, where you're like, yeah, I want that, you know, I created the
first item first and the second item second, there that's the order I want. That's fine. Um, that may get jumbled if it's
technically the same day, um, that that file was created or
updated, um, when it gets built. So a little pitfall there, there's
a couple of ways to get around that we could explicitly define date,
which the safest way would be. Um, your. Month day. I know that's not the correct
day, whatever today is. Um, but again, when you're doing
something like this, um, date still isn't quite the right thing. Um, especially cause we're not adding
like a time, a full time stamp here. Um, Again, a little more than we have
time for today, but how I typically address this and is in that article
that I posted earlier on using template data as content, um, I typically
set up a custom ordering parameter. I've done this a few different ways and
it depends how extensive my content is. Um, or I, uh, in the case of my news
or my actual like events, um, events that I have out here, um, I have
a couple of front matter values. I have a date, a start date and an
end date, and then another custom one that says whether or not I even
want it to appear as a past event. Um, so, uh, and how that's handled then
is we would dip back into our Eleventy config and there's ways that let me
see if I can pull it up on my, um, Pull it up on part of
my, um, posts out here. It gets in this one jumped down to, here we go. Um, You're able to create
a custom collection. Um, so these are like Eleventy supplying
you these different methods that you can use to create custom collections. So we're looking at our collect are
already created collection, which in this case was called demos. So imagine that's our news collection. And then we're, I mean, we're just using
JavaScript so we can sort it and we're going to sort it by that order parameter. So then that creates a new collection. You can call it whatever you want. In this case, I called it ordered demos. Um, You might call it like in
our news, like upcoming news or latest news or what have you. And so then instead you would change
from querying news to the name of your new collection to specifically
get the ordered one and alternate way you could do this is to go ahead
and, um, Use our news collection, but that's just essentially just an array. So you can pass that through a filter
to either return specific ones. Um, if, uh, you were talking about asking
for a random one, so you can ask it to return a random one, you could create
your own random filter, um, which I do have an example of, um, on eleventy rocks. Um, but here's one last key point. And I'm almost out of time here
is that if you do something like that, where it's random. Okay.
It's going to be random at build time. It's not going to be random client side. And that's a key difference because we are
talking about a truly, truly static site. Right? So when I, um, view page source on this,
the only reason I have a script file in here right now is because I am serving it
locally and it's loading up BrowserSync. Once this creates a production
build BrowserSync goes away and. I mean, what you see
is what you get, right? It's, it's truly, truly, truly static
unless you choose to add any scripts. So that said, um, as we saw with
like things like including our style sheet, you can still of course
include, include scripts, um, in. Has script tags. Um, there's a few other
ways you can do it as well. Um, there's examples in the official
docs of how you can, um, create a variable out of a JavaScript file and
run it through a filter to minify it. So that's really handy, especially if you
just have a small bit of, of some kind of script that you're trying to input. Um, I load the, some tiniest little
bit of JavaScript on modern CSS so that this little read next bug is
randomized, which of course is not there we go switch to this one. Um, there wasn't a non
script way to do that. So, um, client side. So there you go. That's, you know, we could banter all
day about philosophies on JavaScript, but that's one of the reasons that I love
Eleventy and why it is able to be so quick is that there is no client side JavaScript
necessary on your production build. So. Pros and cons to that too. Um, but for my purposes,
I haven't needed that. The only pro... um the only Eleventy based project that
I've needed that for which, by the way, um, there'll be a small bit of motion. I'll tell you when it's off screen,
um, is ButtonBuddy and I have my, no, do I have it zoomed in? Um, anyway, so this is Eleventy,
um, But I needed JavaScript because it's also a web app. And so I needed it for the various
functionality that's happening down here to update, um, these different things. So, um, for that I used, um, for
that I used, um, Michelle Barker who has CSS in real life, um, blog. She's also an Eleventy fan
and has a Parcel starter. So that's what I used to help,
um, make ButtonBuddy happen. So I could incorporate some of
my familiar, like JavaScript processes and things. Um, and that worked out
really, really, really well. So if you do know already that you
need a little bit heavier JavaScript for what you're trying to do, um,
integrating with Parcel, I can vouch for as being a really excellent path.
