The more things change, the more they stay the same. Such is true as we dive deeper into dynamic frameworks like React or Angular, while simultaneously returning to tried and true methods of delivering performant content in the form of static HTML. In this episode, lead developer Jared White from the Bridgetown project stops in to help educate us about what static site generators are and how they can provide value to your toolchain.
- 7 Reasons NOT to Use a Static Site Generator
- Beginner’s Guide to Eleventy [Part I]
- Bridgetown: a modern Ruby website framework
- How to quickly set up a build process for a static site
- It’s Time to Visit Bridgetown
- Lunr – Search Made Simple
- Markdown Cheat Sheet
- Setting up a GitHub Pages site with Jekyll
- Sourcing from WordPress – Gatsby
- Using A Static Site Generator At Scale: Lessons Learned
- What is a Static Site Generator? And 3 ways to find the best one
- WTF is JAMstack
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
Good evening, everybody. This is The Drunken UX Podcast. You are listening to number 65 assuming I haven’t rolled the dice and move the steps of 64 which is what my show notes said. Maybe let me 66 when you’re you know, the problem I’m having right now is that as I’m trying to get ahead of the game a little bit and be really prepared and do these shows in advance, I start to realize sometimes things move around. So anyway, Episode 65 we’re gonna be talking about static site generators and looking at a specific platform called Bridgetown this evening. We’ve got Jared White joining us here. In just a few moments, folks, I am your host, Michael Fienen.
I’m your other other host, Aaron Hill.
I am a little wet, very wet and very allergic saying, apparently, everything outside Right now,
we finally got rain here after, like, three days of roughly 90 F weather, which I mean, the last time it snowed was only two, maybe three weeks ago. Like it was after May 1st we had snow so, like, all over the place.
And on that note, if you enjoy the drunken UX podcast. Then you should go check out our sponsors over at New Cloud. You can visit them at new cloud dot com slash drunken you exits in you cloud dot com slash from u ex Im lose my my words already, though with scotch do interactive maps. Gurus say hello to him and see what they’ve got if you need an interactive map or an illustration or anything like that. Aaron, you Ben, you just got back from the gym. What do you drinking?
I did not get back from the gym. It is just very warm here.
Yeah, up there. I suppose air conditioners are not necessarily as much a priority as they are. Here
they are. But I don’t have one in this house, and I’m still kind of sussing out like airflow solution. Mojito season. I got I’m hearing, uh, well, I got fans on the order, but they just haven’t gotten there yet. Um, I’ve been downstairs. It is like a nice temperate, like, 72 degrees upstairs. I think it’s around eighties on that, and that’s cool for for this week. I’ve got I don’t know what to call this, but I made it by accident this morning. It’s got a little bit of Ah, Amaretto. A little bit of raw morning.
Good Lord. Son
started early. It was like 11. I think a still technically morning has amaretto and rum and triple sec and then iced tea. So I made some solar tea on the porch, and this is pretty tasty.
Um, I’m ah, I’m a Scotchy boy tonight. Ah, not drinking from my cask. I did, though. The cast is now has actual scotch in it that is actually aging here in another episode or two, I’ll break that out and see what that tastes like. But Bhavani 12 plain old double would
Oh, I’m Oh, my missus. I’m
in the Midlands tonight. I do? Yeah. I do enjoy the sort of Rosie nature I believe it’s sherry casks that they finish this in. Um, and it is always nice. This is, like the perfect. In fact, I like this so much. I have a second bottle up in my cupboard to replace this one when it’s empty. So
that’s my favorite one. So far too.
Yeah. Cheri Kaye. A second caskets. Sherry cask? Yes. At the double check. Eso? Yes, that’s what I’m having tonight. And so this week we have a very special guest with us. Jared White. Jared, I think you’ve gotta Maybe Is it a can? Is it a bottle? You’ve got something with the on your plate. Don’t wait up. Don’t drink from a plate drink from a glass some something that’s got like a a very tall I don’t know, save me
not drinking from a
plate. That would be a mean feet here, but now I gotta can Actually I I almost never drink canned beer, but I saw this at a store. It was from a story Oregon called Buoy beer. It’s an idea, and it’s it’s actually one of my favorite I p A. C. It’s really good. So So I’m enjoying that today.
Everybody’s got a little bit of something for the show. That’s what I like to see. That’s team spirit.
Hey, looking spirit point the diamond, the have lantana on on me. Okay, so let’s let’s talk about this is the
real fast because obviously you heard 1/3 voice that was the voice of the illustrious Jared White. Jared comes to us from the Web consulting firm White Fusion. They focus on small businesses up in the Portland, Oregon area. He is also a very proud Ruby ISS, which I know is a somewhat underst underserved part of our development community. Sorry, Aaron, but you don’t count, huh? But Jared is also, uh is it fair for me to call you sort of the mastermind behind Bridgetown? Is that a fair assessment?
I’ll take it. Sure. You could even call me the evil mastermind
I like for you. Not to evil, only only slightly. So this is something that
came out of Ah, discussion. We had a few episodes back. So in episode 61 we talked about emergency websites. And while we were doing that, the idea came up that we mentioned. You know, if you needed a site to be really well supported, that you needed it to be really resilient to a lot of heavy traffic using a static site generator and pushing to a system like nettle, if I would help you do that because it’s much easier to serve static pages than dynamic ones. And so we’re using this episode, actually. Talk about what that means. We’ve we Of course, had Dustin Xiao Ah, who is a one of the dudes behind Gatsby who works with Gatsby Js gas P J s is a that extends generator and with Jared on with us to talk about Bridgetown will get kind of a good sort of deep understanding of some of this stuff. Maybe not super deep, but as much as we can do in an hour anyway. So, first and foremost and to throwback to another guest when Tatiana Mac was on with us, when when was that air? And how is
that was Episode 18? That was season one, got, was it? She was. I don’t know if she was our first guest, but she was one of the very first guests we had on the show.
We had her on to talk about universal design and accessibility, and
that’s when I change. When I changed my font size on my 16 pixels, us remember doing that during the show. She’s also
a big voice in the community for a a tool called eleventy. Uh huh. And we’ll have a link to an article that she wrote as well for that. But eleventy is another static site generator.
If you have any questions after this episode, which you probably will That article it will answer all of them. It is like like soup to nuts. Full full explanation about static site generators and what they are really already
doing is setting out what is going to end up being like an epic showdown between all of the Dev’s for different statics that generators all argue about which one is the best one
it 90 come in, one goes out. The Celebrity Deathmatch
model, I think, is how we should really decide all of our technology needs. Quite frankly,
that reminds me of that XK CD where it was like, You know, there’s there’s, there’s 10 standards I know I’ll make a standard that unifies, although now there’s a lot of those 11 standards way joke
about it. But it is very much like, you know, when you think about content management systems, right and you’re thinking about what to run your site on, you realize, Wow, there aren’t just a few CMS is or dozens of CMS is there are literally hundreds. Why do we have all of these systems trying to do the same job, but in different ways, and it’s always because people have different needs and different requirements, and different tools are better at certain things. And so static site generators are kind of evolving very similarly. And there are a ton of names that you may have heard thrown around. Or maybe you’ve used some of them. Whether that’s Jekyll, Gatsby eleventy que go next grid Cem and those are just a few I forgot 10 Bridgetown. Another one.
Yeah, the the first little was that I’ve heard of. And then I looked at static gen dot com, and I saw the list that I guess isn’t even exhaustive at this point holding crap and, like, there has to be at least 100 on there any more
static. Jen is it is a good side. If you need to go and you want to do some comparisons of stuff, they also have a lot of information like they, you know, everybody rates this. The systems there take that with a grain of salt. Obviously, older systems that have been around longer are clearly gonna have more ratings. Doesn’t mean they’re better system. So you can, uh, break down the sorting based on times fans as well. Which is nice. The home page. My God, there are so many dimples. Have you heard of dimples? Dimples is a thing, Elsa. There’s one. Let’s let’s find another one. I won’t find it. Oh, here’s my favorite. Found it Has clunk
clunk like like your engine, right? You know, when your engine has a knock? Well, instead, this
has clung. All right, I we need one of those things like, is it a status or generator, or is it like, a poor way named Variable? That which is a
good round for discord at on? Uh, you don’t know, Jack.
It’s in a quantum state.
It’s both at the same time.
Also hurt idea. Um, so a few of these So
like Gatsby, for instance, Gatsby is one you hear? Maybe if you’re more in the WordPress community because there is sort of a lean towards this idea of Yes, WORDPRESS is designed to run your site, but you can use it as what we that this phrase we use called a headless CMS all a headless CMS is is a content management system that isn’t generating your pages. It’s a content management system. that’s Onley doing content management. So it’s it’s a database front end. Basically, at that point, Jekyll Jekyll’s a big one because Jekyll is tied very heavily to get hub. But you’re using get home pages.
Maybe right. That’s where you saw that before.
Those two are linked very heavily, and as a result, people are discovering, Hey, and we’ll talk about this a little bit more later. But, you know, you could theoretically run a whole website right through, get hub, using their own baked in build process that uses jackal. It’s an option. It’s also one reason why it’s one of the biggest slight generators out there right now, because, of course, it’s got that that sort of power behind it.
I think we use that for a project. When I was a Cornell, I forget what the site was, but we did A It was like a really simple small one, and he’s Jekyll to generated content for Yeah, I think I was the first time I heard of it. But
regardless of what system you decide to go with or use, these things all start to fall into what this word is, and there’s a conference named effort as well that you’ve baby heard thrown around called jam staff.
I know I have heard of that. What is like I’m assuming this is quick. Comparable to like a lamp lamp or ma’am. Yeah,
So lamp, let’s let’s go back first. Right? So a lamp stack
ramp is Lennix Apache mask. You’ll slash Maria right in PHP. It’s like what you might run WordPress on.
And the variations thereof are, you know, map Mac lamp windows. But the rest of it same. So right. You tell me, what do you what this jam sound like?
Oh, it’s OK. It’s locally
putting html in the most literal sense.
There’s ah site. If you want to learn like a lot about what jam stacks are and how they function. And all of this, there’s a site that’s just called jam stack dot wtf, which
a great Toldo it is. It is, ah,
good way just to kind of get some real surface level type information about that system. Now, Jared, for the purposes of like it and maybe not. Well, maybe birds talents. Let’s let’s go ahead and pull this up into the conversation. Real fast is because Bridgetown is four ruby based sites, right?
Is it fair for me, though it’s like in this case, So we said, like there’s a lamp, a lamp in a man does this differentiate between a jam stack and Iran stack that
you know, this is such a good question and it’s actually like the most by far ribs. The most confusing thing that I think comes up time and time again. I think how I see it is, is that Acronym Jam? I have always seen it as essentially being backwards from the actual development process. So what I mean by that is starting with mark up. So you start with content that’s in either HTML format or marked down for Matt and Mark down. It’s become really popular with a lot of people starting with programmers, of course, but even folks that they’re really not not very technical at all. Eso starting with the M
Don’t worry. We
want you to that one a long time ago where they’re already. Maybe now,
maybe doubts like getting I don’t know, hacker news or something, but you know this idea like, Oh, you have, like, this little block. But all of a sudden, like, you know, Oprah mentioned something or what some crazy thing happens. You get like, a 1,000,000 visitors in a day. Like, you know, in the in the past, everything would completely crap out because you just have a WordPress blogging. A little server likes little shared hosting things somewhere, and it just it couldn’t handle it. But with a static site that’s on a cdn, you know, maybe not like the greatest experience in the world. If there’s some issue with the, you know, the FBI connections or whatever, but at least that initial static site that initial content, the article, the product, the marketing page, whatever it might be, at least that initial static site is always going to get to the person you know anywhere in the world that’s gonna be super fast, like like an order of magnitude faster in many cases than if you have a dynamic app server somewhere, you know, struggling to handle this influx of of customers. All of a sudden,
the funny thing about it, we were talking a little bit before the show started about this, and I was sitting here thinking about this and Aaron. Remember when we talked about our first websites and how we built those how we went about him? And I was thinking about the tool I used to build? My first, like non hand coated sites, was a CMS called Toronto. Toronto still exists. You can still go use. It’s a pro based to some, uh, that you would drop in
the sea. I been,
and it would run from there. But I got to thinking about it. I’m like, man, we’ve were coming the whole circle on this because that tool in 1999 2000 that was a static site generator. It was a headless CMS that you could put in a little template information into, and it managed whatever structured content you wanted to add to it. And its job was to sit there and then publish out HTML files as a consequence. And so if you change something in your header or footer or something and saved it, it would then trickle out and regenerate everyone in your HTML pages, just like a normal static site generator would, and the end result is you have a website that has physical, normal HTML pages there to serve up instead of serving it from a CMS like WordPress. So every visit to your website is generating CPU load. It’s generating memory usage. Eight serving HTML pages. I mean, yes, it requires resource is But Jared, like you were saying, We’re talking orders of magnitude difference in terms of what you can do when a databases and involved in when all of this other overhead is not tied into it. That I just thought that was kind of funny that we’re coming back to that. People are looking at this idea and thinking, you know, if I want to build a fast, efficient site, maybe this is the way I should go about it. But I don’t think we can do that without talking about what it works well for, because I do think this is one of those things that it works. It’s cool, and it will do a lot of things, but I don’t necessarily think it’s right for everything.
Yeah, there’s sort of the funny, Um, I don’t know what the term for this would be, but if you could envision a the opposite of ah, of a power curve, you know, instead of it like starting low, going high in the middle of coming down. It’s like the opposite. So, like in terms of jam stack stuff being cool, it’s like it’s incredibly cool for, like, you just want to get a side up quick. You want to use, um, developer tools that you’re familiar with, and it’s really easy to do. You can just, you know, like literally in a day could, like, spin up a new repository. You know, sticks. A markdown files in there. Tight yarn. Add tailwind or boma or some cool CSS framework. Get a design in there, usually in a matter of minutes or maybe 1/2 hour. You can just, you know, type a few commands in the terminal and get an entire site spun up. Ah, and then, you know, with something like nettle if I it’s literally just a matter of, you know, uh, up upload the site to get hub connecting hub to nettle. If I again these air steps to take mere minutes, um, and then you know net. If I will just automatically know any time there’s a commit an update on get Hub, and whenever that happens, it automatically rebuilds the site so it does the automatics static site generation, build process every time. And so, like boom, you could just go from, you know, I have an idea. I’ll create a new repository. I’ll use my sex site. Generator of choice, you know, at a few bits sticking some content. Put it up on Get Hub, Use Nell. If I and Boom, you’re on the Web with a site and you don’t have to worry about databases and how to deploy this to that and had a, you know, configure a bunch of things. It’s all sort of this list really easy automatic thing, so that that’s kind of like the first part of the curve here, where it’s like you can get stuff up really fast and and in a really kind of fun way. It’s a great, uh D X developer experience, so that’s like it’s like you x for the developers among us. Great dx cool.
Yeah, so that’s the other. That’s like the other side of the curve here where you have, you know, these sites that you know certainly get updated pretty regularly, but maybe only, you know, once an hour or, you know, even once every 15 minutes. But it’s largely like, Hey, here’s a bunch of information and that information is just, you know, it’s what it is when you go look at it. And so you know the’s huge sites that are getting just massive traffic perhaps, you know, distributed across a large territory or even the whole world. But there’s this kind of middle area where it’s more like, you know, I have this, like, spa kind of small business thing that’s like local Andi. People need to be able log in to do some stuff, and there’s like a database. And there’s a custom back in Teoh manage, you know, bunch of folks logging in to update something that, like there’s this whole sort of like very dynamic kind of business software, like all these other use cases, right where, you know, trying to fit that whole side of, you know, Web, Web app and website usage into the jam stack. Uh, it’s it’s just not a good fit, at least not with the current state of things.
eso were like the search. Yeah, solar search engine, not engine, but like back end tool, patchy
Apache solar eso lunar is, like sort of an inverse of that inverse. That’s a bad choice of words, but I’ve
I’ve worked with a few times, and it’s pretty cool, cause because you’re static site could actually generate, like, basically a separate file that’s in Jason format that just has like, Hey, here’s a bunch of structured data, you know, for everything in my sights. It’s just this big lot of data. Ah, and so under the hood, like when your user goes to your site, it could just eat out behind the scenes. Say, Hey, get me this big lot of Jason and then and then lunar will go through that and generate the search index in the browser. So by the time you get to the search field, start typing and stuff. It could just instantly start, you know, offering suggestions and, you know, links to things cool,
because there are too many combinations of all the words in the English language like it’s you’re talking about, you know, quintillion ins of pages, toe make combination for each one of those out,
thinking that in those sites in those sorts of cases, you know, especially with really large data sets. You know, the pure jam stack sort of approach usually doesn’t work, but there are ways of where an external search engine will, you know, basically do the same thing that Google, doesn’t it? It will. It will just crawl your static site, index everything and, you know, do that on a somewhat regular basis. So when you do go to search, um, you know, you’re talking to this external service, which is dynamic, but that service has indexed all of the, you know, static content within the, you know, whatever the last few hours or something, it has indexed things on that can that can work pretty well sometimes.
Yeah, if if he search, if the targets are finite and you know what the targets are And you know what the basic better data would be of how people would get there. You should be able to pre calculate that
this is why I think when you’ve got a static site, you’ll see this in places where so far, let’s go back to the shopping cart idea. Jared, you had mentioned, you know, ah, product itself doesn’t necessarily change very much a product. It could be a static thing, but the cart is where you actually enter the act. And so when you click that add to cart button, you get sent to cart dot your site dot com, and it looks the same. It’s got the same mark up, but suddenly you’re at a different domain. The same could be true for things like Search where when you go to hit that search box, you may actually inhibit search dot your site dot com, and they’ve got their header and footer wrapped around whatever tool they’re using. But they’re using a tool specific to that job to take on the highly dynamic portion so that they can let the rest of their site be really light late. I think when when you think start thinking about sets that excite generation in that way, you’ll start to notice, like all of these times when people ship you off to other domains for those certain, you know. And we do that even when we aren’t doing static side generation, we do that all the time when we’re using other tools. So right,
yeah, and these and these sort of places like thes thes, different areas where things get plugged in from other services in the past, that often would be really Jaenke or would be like, Oh, there’s this weird I frame in the middle of the pain, you know, somewhere somehow, some other thing. It looks completely different. But you know, there’s so many techniques now to create pretty seamless blends from the user perspective, so they don’t really feel like they’re kind of going from service to service. And one other thing I would like to point out to you real quick, just as something that I think deserves mention. Talking about the jam stack is, you know, it’s not just interesting from a performance standpoint, but it’s also really interesting from a security standpoint, and that’s actually one of the main reasons I got into it a few years ago.
Yes, static static. HTML is incredibly secure. It’s it’s a secure is your server is basically yeah.
Originally, when I got into to Jekyll, I took a look at it. It kind of dawned on me like Wait a minute. If I If I build a site and, you know, use something like Jekyll, the static site generator, you know, once, once I hand that that that repository and that published site to the client like, you know, if they don’t change anything and if I don’t change anything, it will stay the same pretty much forever. Like That’s a snapshot in time and it won’t change. It can’t be hacked. It can’t break. There’s nothingto update. It’s just it’s just that snapshot in time. So you know it’s there’s really no maintenance to have to worry about their, which is super awesome.
So you are the the guy behind Bridgetown and Bridgetown is a static site generator, but it is a static site generator that works in Ruby as opposed to a more Let’s say, traditional Jan stacked like It’s not react. It’s not view. Um, Now I’m not a Ruby guy, so I’m gonna lean on errand. They hated my other window here to help me through this part of the conversation. But is that like, is that Is it a gem? Is it like how does it fit into the ruby architecture?
the static markup and convert it to something more dynamic. You know, as part of how you write things and react. I have a huge you know, if you could see me now, I’m like, you know, making like, blinking banner motions with my hand like a danger danger Alert alert. Because what what happens often with these things is, first of all, it can get really complicated really fast because you’re you’re trying to use technology that’s running two different places at the you know, you’re using the same technology for two complete different things, using the same technology to generate HTML through a build process and to do dynamic things in a browser and the you know where the lines blur and how those things interact. I I’m finding at least with the same or junior developers that I talked to you. Nobody understands how it works, like they just flat out don’t understand how it, for example, I got a question about Bridgetown like somebody saying like I’m already using stuff like Gatsby and I’m writing React Components. So why would I want to generate stuff on the server with Bridgetown? And I was just like, Oh, no, because the thing is like by default with Gatsby like the point is that it is generating H E mail on the back end and you’re getting a static site. But because it’s using this client side technology, everyone’s getting super confused. So you know, it’s one of these situations where,
you know there’s a lot of cool tools out there now, but some of them are like very, very sharp knives, and everyone’s kind of cutting themselves realizing like I’ve done something really weird here and I don’t understand what’s happening. Um,
so this is using client side stuff. I know that in the rails community, they recently moved over to kind of embracing Web packer for asset building like Are you do something like that? Or maybe with other world up? No, no, There was. There was. It was Web Packer than a different one, but like it’s verging on a Web packer now,
like so many of these things, there’s
a bunch of
yeah, And sometimes, like if you have one component that’s provided by 1/3 party and then you have a different component Friday by different third party, it’s possible for them to collide and to be unaware of that, and the site should still work even without it. So I think it’s really cool that, um, that Bridgetown takes that approach.
I’m just gonna go crazy writing react components
everywhere, and I’m gonna pull in all these
things, add ons
and all these things, it’s going to be amazing. And we’re gonna have, you know, graphic you, well, things flying right and left and yeah,
but it all seems
How do you know? If someone want to start using Bridgetown, what do they need to start? What do they need to do it? How does someone get on board?
hung. So the so the user would be creating would be writing the content using a markdown like to to basically create the content.
Yeah, so that that’s the sort of D fall approach. Now you can use a headless CMS like we’ve talked about. And, um, you know, their ways that aren’t too hard to do. You could just write a little plug in. And we’re working on documentation right now to make this, like, really clear how to do it. But, you know, basically with just a few lines of code, really, You know, instead of your block post, being in the Europe repository is a file alongside all the rest of the code. It could be in a headless CMS somewhere, and then you just use rest orographic u l a p I So in your bridgetown site, you would just write a little ruby plug in. That’s basically like you call this a p I, you know, query for some posts. Okay, I got the posts now. Just, you know, output that too, you know? Ah, file. And there’s a really easy way to do it. You’re not literally like having to figure out a write a text file. You’re just using some nice little commands to say, like, you know, OK, so out of the data that came through the a p I. Here’s the title. Here’s the categories. Here’s author. Here’s Here’s the main body of the content. Here’s the date, and then it’s as if that were an actual file in the repository as faras Bridgetown. That’s concerned. It doesn’t matter whether it’s an actual file or whether it’s something coming from a headless CMS. You know, in the build process, when it’s generating everything, it’s all the same Teoh at that part of the process. So that’s pretty cool. You can you can use either approach. I kind of like to have content and get as much as possible, at least for simpler sites, because you just get built inversion ing and you could roll back things really easily and and, you know, for end users, you know there are ways to give them a simple editor that looks vaguely like WordPress, where they can type in some stuff, but under the hood, it just saves a file to the repository. But you can use a full blown headless CMS with all the trimmings if you want to. The
thing I’m thinking about here toe to tie this back to another topic we hit on. Um, wouldn’t we had Brian Oland icon talking about hacks, CMS and the work he’s doing to create a Gutenberg like block editor? That is better than Gutenberg in terms of usability and accessibility and output, because something you think about when we get into, like, HTML content, you know it’s easy to think about. Well, Mark down is a great way to write documentation and things like that. But it doesn’t facilitate design very well at all, because Mark down is just a text formatting type of of ah markup well, mark down. But with something like hacks, you could build a system that gives you full capabilities to have control over layout and organization of your content and and orientation of your content in all of those things and have that spit out something like HTML blobs in any kind of system. Whether that’s something that’s written with job scripter Witten, written with Ruby or any of those and as a result still have very a very high level of control over the design and layout of these pages, even though you’re running them through a static side generator to output a site
that’s really cool. Yeah, that’s kind of Ah, that’s kind of a dream of mine, you know, ultimately, to see some kind of tool that’s more of a visual page builder. But it’s it’s ah, I don’t know. You call headless page Builder there, It’s, you know, your building, your building, your advanced layout for some really cool page. Um, and it stores it in some, you know, some structured format. But then, yeah, you could use any kind of stack said static site generator or, you know, whatever you want, T take that page structure however it’s to find, and then, you know, turn it into the final thing and use your own design system and all that cool stuff that that would be super awesome.
So if you’re starting all of your content basis with mark down, um, and you mentioned design system. What if you do a site redesign? How easy is it to like basically, Rick rebuild your whole site from those markdown files? It really varies
from, you know, from static site generator to from each one, depending on how it defines things through templates. Eso um you know, Jekyll and Bridgetown and a few others have used a template language called liquid. So, you know, whether you’re running an HTML template itself Aurier writing something and mark down you can you can augment it with with liquid tags and filters. So, you know, in WordPress lingo that you might call that short codes or something like that. Where in line in your text, You’re kind of saying like,
Ruby has, um what is it called
e r B?
Um, know nothing of your B. There’s a different one, isn’t there? For I’m thinking of PHP. There was, ah, thing like short tags that you could do. OK, it was allowed to go. You know what? I think it might know,
Smarty was that of thing in Ph. Yes, Yes, yeah, yeah. The idea there being like instead of writing your template literally in PHP, which kind of was intemperate language to start out with. You write it and something a little simpler, a little nicer, a little safer, like smarty. But yeah, liquids sort of the the evolution of that. In more modern times, Shopify uses liquid. So if you set up a store on Shopify and you custom I templates there you’re you’re using liquid tags right there in their system. Um, but some other ones use ah, template language called None checks. It’s it’s kind of similar to liquid. Anyway. There’s there’s syphilis to do it, but I
used you things in nunchucks, Non jacks in mark down for a system called fractals. We do pattern library and system fractal that uses marked down for all of the stuff. But like we want to do things, for instance, like generate color swatches from a definition file. So we use that to generate something that is Lubell and outputs. Ah, you know, pretty stuff, so to speak.
Yeah, there’s this a lot of wasted too, but basically the ideas you know, you whether whether you’re sort of base level text content, is in html or mark down or something else. You then augment that with some extra template smarts, you know, looping through things, transforming a data value from one thing to another. Bridgetown conduce some pretty cool things with liquid, and we’re actually working on sort of an extra little speck at onto liquid called liquid components. And this is really what gets to your question. So the dream there is that you could write some liquid components which are is essentially, like, you know, think of your traditional site. Like, you know, maybe you’d have a component for a nab our Maybe even that would have a few components, like logo links a search bar, like maybe those air little components. And then, you know, you have some stuff on your page, like a sidebar component, the footer component.
completely cross browser Now, you know, at least with modern browsers on it could just, you know, basically loaded load in the HTML it’s provided through the stack site and just do things like, you know, make the button, do something when you click on it or, you know there’s this little spot here that’s, you know, blank out of the gate. But we want toe, you know, add a bunch of things in there like, you know, items of a to do list. The sky’s the limit, but but the idea is that you know, you have some components defined through the static site that air more concerned with, you know, the layout in the design and the base content on. Then you make it do cool stuff on the client side with the’s hydrated web components on. So this hybrid architecture is this, you know, somewhat of, ah, of a bleeding edge thing. But it’s not just me trying to do it. So many people are trying to do this and to crack this nut, you know, it’s like the Holy Grail gets. He could say somebody somewhere will hopefully kind of help help pave the way a little bit in terms of widespread adoption.
Well, best of luck to ya. I’m excited. Teoh, try it out. I’ve even thought, you know, we were talking earlier about what kind of sites would work Well, as, ah, you know, site run by static side generation. The drunken you excite has no reason to be ran straight out of WordPress. We could easily integrate. Ah, that excite generator with that syntax, does it?
Yeah, we don’t We don’t really do any of the the like dynamic content that you might do with WordPress. I think the only thing we have is Thea, um that’s a dashboard stuff, right? For an attack in. So
that doesn’t matter.
Yeah. Oh, yeah. That’s true. Yeah, it and
a to that point, you can think about this system. So syntax, the syntax podcast with bosses show runs out of get hub and all their show no to run in marked down. And so when they, you know, do something to fix their update of Ah, A a set of show notes, it automatically publishes to their website that way. So there’s a lot there that we could leverage, you know, to change the way we would host a site like ours. Quite frankly, if this stuff is exciting to you, go check out. We’ll have a bunch of stuff in the show notes from some of the tools like lunar. If you want to learn more
about that, if you want to learn more about you know how to set up a build process for static sites and make that part of your build so that things will trigger automatically on continuous integration. If that’s the way your set up, if you want to learn more about just different stuff, that static gen dot com site is a great one. Or, of course, the Bridgetown Project. If you are a Ruby Deb, all of those will be linked up in the show. Notes. Stick with us. We’re going
to take a quick
break and we will get you right on your way to your next show. Go. The drunken UX podcast is brought to you by our friends at New Cloud. New Cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, New Clouds Interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and already to design an artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio. Visit them online at new cloud dot com slash drunken ux. That’s in you cloud dot com slash drunken ux
Jared Ben, Thanks for sitting down with us this evening. We appreciate you taking the time out of your day. I know the funnest part of running a podcast is trying to organize people in different time zones.
And this time we hit three of the four way. Yeah, sure, my plan almost got all of them. But the microphone is yours. Take it for a second and tell folks where they can find you, what you got going on
and anything that you want to know.
Yes. So, first of all, the Bridgetown Project is just at bridgetownrb.com RB for Ruby on at bridgetown RB dot com It talks a little bit about the project right there on the front page. You can find out more. There’s also a page about the jam stack in particular that’s a little more generic, so that might be kind of educational. Interesting. You can find me on the Web just generally at
Jared white dot com on Twitter. Jared See White, um, and that that’s pretty much it awesome toe. Be sure to connect with us. We’ve got to mention earlier, but Twitter and Facebook that come slash drinking Rex and drinking to excess. Qamar instagram dot com Stocks Drinking your ex podcast and drunken your ex dot com slash discord Coming with us, folks. At
the end of the day, with all of this, you know, you gotta think about how these tools fit into your workflow and whether or not it’s right, not a set. Excite generator is not the right tool for every website. And so every product that lands at your feet this may not be
the way to go. So look into it, learn about it a little bit more. You. Some of the articles we’ve got
in the show notes to understand the ins and outs of it and what their use cases are throwback types of 61. The emergency side episode where we talked about Why s that? Excite generator can help you serve a lot more pages because it reduces overhead. So things like that learn how to evaluate some of those things and understand that no matter which one you go with, which tool you pick, it doesn’t matter, because the only thing you should be doing is keeping your personas close and four users close. bye.
This episode of The Drunken UX Podcast brought to you by nuCloud.