Ep. #1, Introducing JAMstack Radio

Brian Douglas: This is episode one of JAMstack Radio. Here is me, Brian Douglas. In the studio we got Aaron.

Aaron Autrand: How's it going, Brian?

Brian: As our special guest for our first episode, we've got Christian Schlensker. Can you introduce yourself?

Christian Schlensker: Hey, I'm Christian. I work on the front-end team at Bugsnag. We're an exception tracking organization. We make a lot of open source libraries and a dashboard for managing and triaging exceptions.

Brian: Awesome. So, Christian, I asked you on because you actually have a lot more experience in web dev than I do, and I wanted to pick your brain about JAMstack. So, first impressions, what do you think about JAMstack?

Christian: Well it's a overall concept, right, not a particular stack?

Brian: Yes, exactly.

Christian: I like it for a lot of problems that, before, you would reach for something like a Wordpress or something like that. I'm glad that those days are leaving us. There are just so many problems that it can easily solve, I feel.

Brian: Sorry, we probably need to squirrel back a little bit. Aaron, you work with me today at Netlify. So, as our non-technical co-host, do you want to try to explain to the listeners what JAMstack is before I jump in there?

Aaron: Sure. JAMstack is a workflow, basically. It incorporates a number of different tools, specifically static site generators or build tools like Gulp or Grunt. And then the main purpose of JAMstack is, well, we'll define it. The J stands for JavaScript, the A stands for APIs, and the M stands for markup. It's creating sites, with JavaScript APIs and markup, as static HTML files.

Those are the kinds of things where it's really tool-agnostic whether you are somebody who wants to work with Node, Ruby, Python or Go React, any one of those, plus hundreds more.

You can work with your tool of choice, work with your plugins of choice, and then once you run your particular build command, whether it's Jekyll Build or Hugo's Go, I forget the build command for Hugo, it will spit out HTML files, flat HTML files, along with CSS. And then you can use version control, specifically Git.

Brian: Yeah, Git's probably the most popular at this moment.

Aaron: Definitely. You can upload that to your repo of choice, and then using services like the one that we provide at Netlify, you can build your site and push it out to a CDN so that it's distributed all over the world. Obviously, you don't have to use Netlify, but we skin in the game, and we would prefer that you do.

Brian: I guess the gist of it is basically JAMstack's agnostic about what you use, so you could replace any sort of flavor of JavaScript, API or markup, and basically it's just the idea of architecting your web app, or your static site, rather. With that being said, Christian, if you were to start a project tomorrow, let's say I want you to create some sort of cat app...

Christian: Some sort of what app?

Brian: Cat app.

Christian: Cat app. Oh, about cats. I thought you were saying computer aided drafting.

Brian: Yeah, if you want to create some sort of static site that uses BASH scripting... Oh no, just kidding. If you were to create a new static site tomorrow, what would you use to get that up and running?

Christian: There's a few that I want to look into, currently. There's a lot of stuff that has been coming out recently. We recently just did a project with Middleman, which is kind of in this area. I'm very interested in React server, who made that? Red Shift or something. But it would probably be like a React front end, but stackly generated, app of some kind.

Brian: Okay, very cool. I guess with the static generators, since you'd mentioned it, I think we run a site at Netlify which is StaticGen.com, and there's like hundreds of static generators that you can choose from.

I just personally created a blog last week that was built on Hugo, and that's like a Go back end. You don't even need to know Go, it just starts all the HTML for you and it serves the HTML4 up and just statically.

Aaron: You just download the binary.

Christian: There really are a lot of these.

Aaron: Exactly. Oh, there's a ton. Some of them take a little bit more elbow grease than others. There's ones like Hugo; you download the binary, boom, you're good. A lot of them you can do just a NPM install or a gem install, and you're good. There are other ones like if you want to get super highly, like Middleman for example, would be gem install.

There's other ones that are super, lots of these are configurable, but some of them are super highly configurable from the start, like, say, Metalsmith. Metalsmith is just a collection of plugins. You just get all your plugins that you want, you slap them in your, I think it's project JSON, and say, "These are all the plugins. This is how I want them to run." It's nothing more than basically just a framework and a build command. And then everything that you can do is completely up to you.

Christian: And to clarify, Metalsmith, a plugin, would be something that adds extra language support or something like that?

Aaron: Yeah.

Christian: Like, I want to do it in CoffeeScript or something like that.

Aaron: Exactly, you want to do it in CoffeeScript, you want to do it in Handlebars, you want to make sure that you can write in markdown, and that'll be converted to HTML, etc.

Brian: Basically, we talked more about markup and the whole architecture of generating the site. How would you handle data? Let's say if you had information that you wanted to manipulate for your static site, what would you use, Christian? I guess you mentioned React, but how would you handle the data for that?

Christian: So, am I providing the data myself, or is this coming from some third party API?

Brian: You pick.

Christian: It depends on how customized it needs to be. There are a few services out there that are providing content management as an API as a service. I remember when we were working together, we used Contentful a little bit. Otherwise, I'd probably just make a Rails API or something like that, or a Node expressed API, something easy for it to consume.

Brian: I've used in the past, for some mobile apps and also some static sites, Firebase is a good choice, too. Because it's just pretty dumb. It's like a key value store. Basically, you add data and you grab it from a key. And you're good to go. So Contentful, I think it's JSON, which is pretty nice to work with for sure.

Christian: What they do is, if you can imagine the backend of WordPress, like the admin area, that's what they give you. And you use their admin to write your content, and then it just gives you JSON in points for all of it. Which is kind of useful if you're working with people that need a content management system and you don't want to build it yourself.

Aaron: I'm pointing to myself. I can write in HTML. It's painful.

Brian: I don't think we explained your role that you normally would take in the company is usually in the marketing content world.

Aaron: Exactly. I'm writing a lot of things, and I would very definitely prefer to work in either markdown or via CMS. My background is in content creation, so I've been working in CMSes for years.

Christian: Markdowns are really the ideal balance between light technical ability and flexibility. Because you don't have to worry about the fiddly-ness of a CMS editor that, the WYSIWYG messing things up and adding all kinds of crappy breaks and everything in it.

Brian: Yeah and what's good about markdown, too, is the consistency. If you know how many pound signs to add, you know what the output's going to look like, pretty much. And you don't have to worry about putting up HTML and making sure your CSS is bundled into the web server and actually outputs correctly. For you, Aaron, all you have to do is know how to write.

Aaron: Exactly.

Brian: And you should be good to go.

Aaron: You know how to write and you know a couple of little things, and your build tool does the rest. It takes your markdown, it translates it into HTML and you're good to go.

Brian: Which is really nice because, Christian here a little bit too, we actually worked together at a previous company. We worked on a project where we had multiple non-technical users inputting content. And we had to make sure that we kept up to date with developing the actual site itself, but then also stopping to create, change different copy edits, to some things like not padded too correctly or indented somewhere in the paragraph.

We didn't have to worry about that because we created tools where we could enable the actual non-technical users, the content managers, to create the content.

I actually created something specific where one of our non-technical users who was doing all the content could actually just write markdown into some sort of Rails form. And then that would output into HTML into the actual React that I was working with. So I didn't have to check in with him every single day if he had some new data to show up on the site, it just happened magically.

Christian: Before we go any further, I almost forgot that I, as a guest, I brought a gift for the hosts.

Aaron: We always like gifts.

Brian: Well, with this being episode one, you're really setting a precedent.

Christian: Sorry all future guests, but I have some jams here. This is strawberry, raspberry, and I got bacon jam. If you arrange them right and look at them just the right way, it makes a JAMstack.

Brian: If we continue to do this podcast for the rest of the year, I think we're going to be jamified.

Aaron: I would highly encourage anyone who wants to come on our show to bring jam.

Brian: So I know we do, we're going to do a music pick at the end, but maybe we can do a jam pick also.

Aaron: I think you just set the precedent for all future podcasts.

Brian: Yeah, so jamming right along, I wanted to find out, so what is your choice for hosting your static sites?

Christian: For static sites, it's just AWS.

Aaron: How do end up deploying it?

Christian: Well, I think with the Middleman thing, we just did it's part of the build. It just uploads things, fingerprints them and just works.

Brian: Is there a lot of technical knowledge that comes with deploying to the actual AWS?

Christian: You have to run a script. So that is problematic. Having that tool together, to make it simultaneously static and easy, is definitely beneficial.

Brian: I know you've been in tech for a while, do you remember the days of FTP? I actually have a site that's still FTP for my brother that I actually maintain. I'm actually getting ready to move it elsewhere.

Christian: Just open up the code editor and start editing in place.

Brian: Exactly. Do you want to go into more details of what FTP, how sites were deployed statically in FTP days?

Christian: You wrote your HTML files, and then you opened up your FTP application and copied them over to the server.

Brian: And then you figured out where to host it or what server it was.

Christian: You put it in your Bluehost www folder, and that's just what you did. Or if you were using a really nice editor, then you could open it inline and edit it in place. Or it would have some nice sync features, so everything that's been modified, it was kind of like a proto version control. Everything's that's been modified, you just say sync all the changes, and it would upload them.

Brian: What's really interesting now is that we don't do that anymore.

Christian: Yeah, good.

Brian: The fact that we have things like web packing, Grunt and Gulp, and that we midify all the JavaScript and the CSS assets where when it was easy to do those FTPs. Because we didn't have a lot of CSS and JavaScript to bring along with it, now our sites are small enough that we can host them just about anywhere.

Like you said, AWS, I know Netlify has a product that actually does that for you, as well. And it's nice to have that freedom of hosting wherever for pretty cheap. I think it's pretty trivial, I'm pretty sure your AWS bill for the static project that you built with Middleman is probably trivial at this point.

Aaron: Yeah, and just in general, being able to use something like version control is great. I break things all the time, and so I've had to learn how to roll things back. But with version control, you can roll it back, as long as I'm not in there inputting the wrong commands into the terminal.

Christian: In the FTP days, you could use version control, but it was often just like, make a copy of the folder, and if you need it rolled back you used the old copy. And you couldn't work on a team on the same file at the same time. You had to say, "I'm editing this file. Don't anybody touch it right now."

Brian: Yeah, which breaks the whole system of having non-technical users being able to edit content or copy without the need of developers, so, let's say the developer is making huge changes, maybe there's like a lot of CSS that changes, maybe there's actually fields that are no longer there.

If someone in content is updating stuff, all that just goes out the window. Stuff will break, people get angry, and somehow you have to figure out how to revert without using Git.

Aaron: Christian, can you tell us a little bit more about the Middleman project you've been working on?

Christian: Well I haven't been working on that particular project very much. But about to get started on it. We just redesigned our docs, and it was a sort of rapid "get something out there" for the redesign. I'm not sure about the decisions behind going with Middleman, but it seems like it was probably that it was a known quantity that we'd worked with before.

Aaron: And are you doing it directly in Middleman, or are you using another tool that uses Middleman to build?

Christian: Directly with Middleman.

Aaron: Tell us more about that project.

Christian: It's our documentation project. It's all our docs for all our different platforms. So there's just a lot of HTML files with code snippets and things like that. It's, naturally, a two-way site generator type project where it's usually a technical person writing a bunch of content, so markdown's not a problem. And it's just a lot of pages and a basic site structure that doesn't change very much.

Brian: We kind of brushed past the API portion of the JAM. I know Middleman is Ruby, so I assume that you guys would probably use something like Twilio or some other third party API that you want to include. What do you normally do for third party tools?

Christian: As in a REST API?

Brian: Yeah, REST API. Let's say you do some functionality that you want to off source on something, I know Contentful is kind of like the whole package. But there's always different things.

I know WordPress has the ecosystem of plugins where you can click and drag and add plugins to your WordPress site. But how would you go about interacting with Twitter or interacting with social media and stuff like that for static sites?

Christian: If it's any kind of API, you would be using just their JavaScript library, usually, and including it on the page and using it that way. With the Twitter example, it would just be like a static button. You could just drop the Twitter snippet, so that stuff's pretty easy.

What you're really developing is more like just a browser app when you're doing this kind of thing. Any API concerns are going to be outside of the scope of what you're working on in this case. So either it's something that exists and you'll be using it through JavaScript, or it's something that you're going to have to build and then use it through JavaScript.

Brian: Awesome. I think that probably wraps up our conversation about the JAMstack, I think. Do you have a better understanding of JAMstsack at this point, Christian?

Christian: Yeah.

Brian: Cool.

Christian: I hadn't heard the term before. I'd definitely been aware of some of the ecosystem going on for this particular type of problem. But it's cool that things are advancing so fast lately. The JavaScript tooling ecosystem has gotten really good just over a year ago. It's completely different.

Brian: So would you say you're equipped to spread the JAM?

Christian: Yeah.

Brian: See what I did there?

Christian: Yeah, yeah.

Brian: Well speaking of jokes, I did also want to move on to JAM Picks. This is a part of the podcast where we want to talk about jams that we listen to while working.

Aaron: I see. I feel like it should be more about what are your working jams, period. Whether it be music, whether it be...

Brian: I like that.

Aaron: What you like to drink when you're working, what you like to eat.

Brian: We'll just make this segment, rather than music, we'll make this "What are you jamming on?" then.

Aaron: Yeah, what is your jam?

Brian: So Christian, go first since you're our guest.

Christian: Let's see, what do I drink while I'm working? Usually it's Jittery John's. I have not had my afternoon Jittery John's yet, but it'll be the first thing.

Aaron: I have no idea what Jittery John's is.

Christian: Jittery John's is a bottle of cold brew coffee that's concentrate 3X or something like that.

Aaron: That sounds absolutely horrible for pretty much everything.

Christian: Oh, it is. But I love it.

Brian: You drink it in shot form.

Aaron: You just put it right into the vein.

Christian: For music, I can't listen to anything with lyrics while I'm working. So if it's something with lyrics, it'll have to be in a foreign language that I don't understand. Right now there's this album from Nena, who is better known for "99 Luftballons." She's got a newer one or something. I don't know how new it is, I just found it but, it's all in German.

Aaron: It's like "12 Luftballons" because the rest of them have finally deflated.

Christian: Dwindling set of luftballons. And also when I'm not working, I've been listening a lot to the "Hamilton" cast album which just like swept the Tonys which is good. If you don't know, it's the hip hop musical about Alexander Hamilton, first treasury secretary. And it's just good, good stuff.

Brian: I need to get on the Hamilton trend. I've not gotten into any of that, but I'm going to add that to my list.

Aaron: They did a performance at the Tonys of one of the songs.

Christian: "Guns and Ships."

Aaron: There, that one. I actually haven't listened to the soundtrack yet. I have a number of friends that are obsessed with it. I'm going to go see it next year. That's part of, part of the reason why I'm buying season tickets to the theater is because I will get a guaranteed ticket to "Hamilton." Only $500. For the season tickets.

Brian: But all the shows you get to go see.

Aaron: Yeah, exactly. I get to go see "Into the Woods," so just those two right there I'd be fine.

Christian: You lost me when you said "theater."

Brian: Well that's the good thing about the cast album, you don't have to go to a theater.

Aaron: Yeah, that's true.

Christian: It's a nice show because it's sung all the way through, so you don't miss anything, I guess, from the story.

Brian: So, on that note, Aaron, you have something you're jamming on?

Aaron: Right now one of my jams is this really nice cream Earl Grey tea in the office. I'm not a coffee drinker. If I do drink coffee, I absolutely ping off the walls, and I have way too much energy as it is. So it's this cream Earl Grey which is absolutely delicious and I drink it in a giant mug that's like a liter and a half.

Brian: Oh yeah, the Big Gulp?

Aaron: Yeah, basically. There is a new album from a band called Augustines that just came out on Friday, and they're one of my absolute favorite bands. When I used to host a music radio show, they came in and ended up doing a set of stuff that ended up being unreleased when their record label folded. So I'm one of the few people who actually has recorded versions of some of these songs.

I'm super excited, and they're playing at Bottom of the Hill next month. And then the new James Blake album has been really good. Yeah, I think that's pretty much it right now.

Brian: Since we all did a drink pick, since moving to San Francisco, I never drank LaCroix water. Since my last job, it was always in the office, I've been addicted to it to the point where now I Amazon Prime, once a week, six cases of it to my house.

Christian: I think this is a running theme in startup offices, just the endless supply of LaCroix water.

Aaron: Oh, that stuff, okay.

Christian: Yeah, you know about it.

Brian: It's pronounced "La-crow-ix" here in San Francisco.

Christian: "La-crow-ix," all right. I call it "La Kwah."

Aaron: Yeah. "La Kwah."

Brian: Sorry, right. I didn't study French, I studied Spanish.

Aaron: It's alright. I actually saw a website a couple of weeks ago, and it was cocktails that you can make with LaCroix water.

Brian: I'll be Googling that later.

Aaron: Six cases a week?

Brian: Actually it's about two weeks, so yeah. Every time I go food shopping I make sure I Prime it.

Aaron: We're talking like a case, like a flat of 24, right?

Brian: No, sorry. The 12 packs.

Aaron: Oh, okay.

Christian: Jeez.

Brian: No, a case... that would be insane.

Aaron: Yeah.

Brian: I mean, my mansion, it's got a nice kitchen, but you know.

Aaron: You just don't have storage for that much.

Brian: No.

Aaron: You have that much fancy, fake French water.

Christian: No I just live in the LaCroix warehouse. And I drink from the supply.

Brian: Where would my butler sleep if I had six cases?

Aaron: That's true.

Brian: Anyway, I do have a music pick, because that's what I had planned. I've been listening to "The Book of Ye" podcast, which is a podcast about Kanye West. It's about these three guys who are just enamored with Kanye West. And I was a big fan back in the early aughts , back when he first came on the scenes.

His first two albums I was pretty into, and then I've kind of trailed off as a fan of Kanye West for obvious reasons. He just does a lot of things publicly that you just don't agree with. Well, I don't agree with.

These guys are so enamored with Kanye West, and they basically sold me on Kanye West once again.

I listened to the first two albums on Spotify. I'm now working through his entire catalog. I mean, it's what, seven or eight albums? So it's not too huge. But I've also have planned to purchase "The Life of Pablo" which has been the controversial latest album which was on Tidal and now it's on Apple Music. Now he's being sued because he said it would never be on anything but Tidal.

Aaron: When you say purchase, are you going to purchase it off of Apple Music or Tidal? Or are you buying it on vinyl?

Christian: Buy it on laser disc?

Brian: No, I don't think I'd actually ever jump into the whole Tidal bandwagon because of their UX and Tidal as an app. I don't want to speak too bad against Jay Z and everything, but I don't think it's there yet as far as a consumer product I want to use. But we're not going to bash any more apps.

Christian: What was the title of that podcast?

Brian: "Book of Ye."

Christian: That's a good title. It's like you're losing faith in Kanye and they pulled you back into the fold.

Brian: Yeah. They basically started off pretty happy about Kanye. They're now into eight episodes. Some people are kind of like yea or nay, actually kind of the middle.

Aaron: "Ye" or nay?

Christian: So right now we have a podcast about a podcast about Kanye.

Brian: Yeah, exactly.

Aaron: Which is a very Kanye thing to be going on.

Brian: Exactly, because he's the greatest. We'll just leave it at that. (

Aaron: Every podcast is ultimately about about Kanye.

Brian: About Kanye, yeah. I built a lot of sample apps, I'm a developer by trade, and that's my job. And usually, most my apps I built on Amazon Echo. Skillset about Kanye, I've also built a chat app about Kanye where Kanye talks to Kanye.

Aaron: I believe that is the definition of the singularity.

Brian: Yeah, but on that note, we'll go ahead and wrap up this podcast. We don't want to make this another Kanye podcast. But anyway, I think we'll actually end it with how can we find you, Christian, on Twitter.

Christian: I'm @wordofchristian on Twitter.

Brian: Okay, cool. Christian, thanks again for coming on the podcast.

Christian: Thank you for having me.

Brian: And listeners, please spread the JAM.

Christian:Don't eat all that jam yourself.