010: Jamstack Explorers: The Guts
Little head-bendy but nice ( -_・).
Welcome to Remotely Interesting brought to you by Netlify.People who were remotely interesting:We just pulled an all-nighter to finish shipping you a free, open-source learning platform for the Jamstack and its surrounding ecosystem! What better time to record a podcast discussing all the technical details than when we're delirious and slap-happy?? In all honesty, we put a lot of work into this because we're so excited to get you resources and a place to level-up (to space!) your Jamstack brain matter : )
SHOW NOTES
What is it?
Cassidy Williams: [00:00:00] Previously on
Remotely
Interesting.
Tara Z. Manicsic: [00:00:03] I wanna chop a ham with an axe, that sounds fun.
Cassidy Williams: [00:00:08] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:10] This is remotely interesting.
Divya Tagtachian: [00:00:12] that seems
a little presumptuous.
Sarah Drasner: [00:00:14] No, that's the
name of the show?
Cassidy Williams: [00:00:23] hello everybody. We just made something. What?
we made a site
called JAMstack Explorer as it, as a learning platform. And we are so excited to be sharing with you today, how we built it, what it consists of, how much sleep we lost over it. We're very excited.
Tara Z. Manicsic: [00:00:43] Very excited. Yes. You that's exactly right.
We're very sleep deprived, excited and giggly. So this will be a fantastic episode.
Cassidy Williams: [00:00:55] Perfect.
Tara Z. Manicsic: [00:00:56] one of the things that I think is interesting is the fact that we have a bunch of people. So this is the DX team project at Netlify and we all are. Very, maybe even annoyingly passionate about educating people.
We,
we really like helping
people and, I think all of us are excited to make a platform, to help people understand and learn about the JAMstack then, hope to cover this a lot of different areas. if you all, what's your way that you would describe the JAMstack explorers to your parents.
Cassidy Williams: [00:01:30] I would
tell them it's a place where people can learn coding practices.
I believe it at that,
Jason Lengstorf: [00:01:43] I would probably say it's a groundbreaking new platform where you can take video based educational materials to bring your web development to a whole new level.
Tara Z. Manicsic: [00:01:57] Can I play Jason's mom and be like, Oh,
Jason, you're brilliant
Jason Lengstorf: [00:02:04] definitely has that Midwestern accent. So you nailed that.
Sarah Drasner: [00:02:10] My parents still. I still don't think they understand what I do. So
you can watch videos about the thing that I do that I'll try to explain again,
Phil Hawksworth: [00:02:26] please stop me that I will just stop you right there. Sarah. We're not going to listen to anymore. Let alone watch videos when you're doing it.
Tara Z. Manicsic: [00:02:35] so yeah,
I think
though we did get the point across that we have a lot of video missions, that kind of leads you down the path of where you can watch a short ish snippet videos to get you to the end of your final mission of understanding things like split testing on Netlify and next JS and, angular.
and we have to the amazing instructors here. Oh, three
Sarah Drasner: [00:03:07] Oh, I should
Phil Hawksworth: [00:03:10] leave that as.
Tara Z. Manicsic: [00:03:14] So Cassidy, what do you cover on your mission?
Cassidy Williams: [00:03:16] so mine is called next JS from the ground up and it's basically just covering the basics of next gen is what you need to know. And then going into detail on how to actually use some of the functions and methods and things that are built into next JS because yeah.
If, reacts, chances are, you can pick up next Jess relatively quickly, but there are tiny little gotchas where you have to learn, okay, these are where my routes go. These are what page components are and that sort of thing. So it's going from the very basics, what you should know, here's how you use them and then setting them free to build whatever they want.
Tara Z. Manicsic: [00:03:50] And what about yours?
Phil Hawksworth: [00:03:54] So I'm one of the, one of the things I like about this is that we decided that we would leave it quite broad so that we would have things that are specific to different technologies or libraries or frameworks, or it might be drilling down into certain aspects of JavaScript, but also using the Netlify platform.
So I've done. a mission or a course on, achieving one particular goal using the Netlify platform. So I did, a mission on split testing. so that covers everything you need to do from doing your first deployment on Netlify setting things up. So deploy from, get building out, get. branch model, sorry, branch deploys.
and then using those as the basis to do split testing and all the configuration along the way, and a few little kind of tricks. but it's hard to do all of that in five minute chapters. I know that we set ourselves a bit of a goal of keeping them not long and droney. Like this answer is turning into five within five minutes.
so I find that a little challenging, but it's a good discipline. How about, how did you find it? Terra? Where do you put for your course?
Tara Z. Manicsic: [00:04:55] mine was perfect. I don't know. I fit everything in the time. I don't understand your problem. but we, we could, we could evolve it to, to tick talks instead of videos to really, 15
NPM install
Sarah Drasner: [00:05:11] over three videos.
Cassidy Williams: [00:05:14] Yeah. I definitely found it challenging to make it. Five minutes and less. I think one of fine made it to like a six minute Mark, but it was amusing because you know how, when you're recording something, you might mess up. And so you re say the same thing and stuff. I did that a lot and I definitely had one video that started as 15 minutes and I was worried.
And then it was definitely down to three and I was like, that's humbling.
Tara Z. Manicsic: [00:05:40] So you have mine was on, angular and the JAMstack and it's, it's more along the lines of if you're comfortable with angular. even just on the beginning level, it's, starting to have you understand the JAMstack architecture, and get comfortable with, putting your project on a CDN using Netlify and also understanding what a CDN is.
which is important. and then as well as pre rendering with the English static site generator Scully, and then, making login forms, having sign-in and OS with things like, Netlify forms and that live with Netlify identity widget. And, yeah, it's fun. Like after you've finished, three missions, you also get a certificate and it's a pretty nice looking certificate.
I say, so myself,
Sarah Drasner: [00:06:30] Yeah. And what's really exciting is that we're going to keep on releasing more courses too. So like every week or couple of weeks, you'll see a new course come out from us. And so you'll eventually see courses on Gatsby and on next and on view composition, API, and. Every manner, Netlify functions every manner of kind of different pieces of the JAMstack and different technologies too.
that's really exciting
Tara Z. Manicsic: [00:06:53] because I don't know if the audience has realized, but we have these, random people on our team named like Sarah dreads, man, Ben, Hong and Jason monk store that are like content pros. So we've got some good resources to dig into soon.
Phil Hawksworth: [00:07:11] That
Sarah Drasner: [00:07:11] makes me feel a little pressured to going into
it's
like everybody's sitting here going good.
It was a little hard to make these courses, but don't worry. These courses are going
to come out.
Phil Hawksworth: [00:07:25] Also you yourself just a minute ago, said every week we're going to be dropping new courses. So I think, that's a new course every week
Jason Lengstorf: [00:07:33] Did anyone else's eyes bug
out of their head?
Tara Z. Manicsic: [00:07:37] Cassidy left the podcast, as soon as she said that.
But speaking of those three amazing people, they are behind a lot of the behind the scenes magic of how we create a JAMstack explorers. so I'd love to start dipping into the technology that we use to create this new learning platform in the Netlify community. so who, So who wants to talk about some of that technology?
Phil Hawksworth: [00:08:06] I volunteered Jason.
Jason Lengstorf: [00:08:10] I've been okay. I've been voluntold.
Tara Z. Manicsic: [00:08:14] You cut out after I volunteered. So I think
Sarah Drasner: [00:08:19] Jason, do you think it would be, I think it would be fun to hear about our, to talk through like how, next insanity are working and then go from there. Cause those are like the first big pieces that,
Jason Lengstorf: [00:08:29] yeah. okay. So we, when we were trying to think of how to build this, we were trying to.
Figure out, like how do we take a team full of people who are experts in different things? So like Ben and Sarah are really heavy in the view community and, terrorism, the angular community fills in web standards. Me and Cassidy are doing a lot of react. And so it was like, how do we build something that we can all.
Maintain. And then we threw all that other window Cassidy and ice cream, the loudest. So we decided to build it in react.
Tara Z. Manicsic: [00:08:56] they just put a message in Slack that was like catch-up fools.
Jason Lengstorf: [00:09:02] so Sarah's got a bunch of react experience. Tara's got a bunch of react experience. And so it was like very easy for us to say, okay, the majority of us are going to be able to hit the ground running.
if we use react. And next has a really good story for static site generation and being able to use a framework, but get all the benefits of static sites. so then we were looking at alright, we need to get some data here. And sanity has got this super flexible schema story where you can start with an empty file and you say, I want this field and that field.
And it's really customizable up to the point that you can invent stuff if you want. so with the two of those, we were able to use sanity's markdown input, which is a plugin they have. And we just went ahead and threw MDX into that with, with, we can add Custom components and stuff.
And then on the next side, we grabbed a, an MDX, like MDX next adapter, and we're able to do statically re-hydrated. like the MDX comes in, renders on the page and then when it loads it hydrates and we've got this like fully. Dynamic, content all coming out of sanity, which is really nice little head bending.
It's a nice
Tara Z. Manicsic: [00:10:10] little headband. The Oliver brains are melted. From this project in the best way possible.
Sarah Drasner: [00:10:16] Eventually we're hoping to open source it so that people can actually see what we did build and how it's done so that people can check out the code themselves and do some like posts that show how it was all done so that we can walk people through how it was put together.
And yeah,
Jason Lengstorf: [00:10:33] there's so much good medic content in here because so many of the things that we did were word. Things that, you have to do all the time. And some of them were just very, how do we solve this problem? Like the video stuff. For example, we teamed up with Cloudinary and, we were able to record our videos, but like for a video to be good, you have to do you want like bumpers and like intros and title cards.
And that can be a huge amount of video editing overhead. But because we were using Cloudinary, we got to use their API to Auto-generate our title cards and automatically insert bumpers and like countdown timers at the end and stuff. And all of that happened with these cool transitions and stuff through their API.
Instead of us having to manually go through and add these to each one, which I don't even want to think about how many hours I would have been with like the last minute video changes we were making.
Tara Z. Manicsic: [00:11:23] Oh my goodness. And the best thing is like we would have JAMstack Explorer, meetings. We had, we did a lot of mob pair programming or is it mob?
Just bomb pare,
Sarah Drasner: [00:11:36] depending on
Tara Z. Manicsic: [00:11:38] what should we have an episode on that you could listen to people saying correctly on like me, but we had a lot of those sessions on the team and I feel like a lot of them would be like, Oh, now we have to do this as videos and Jason being like cloud Mary can do that. Really?
Divya Tagtachian: [00:11:52] Wow.
Phil Hawksworth: [00:11:53] That was such an eye opener.
'cause I thought I had a fairly good understanding of what Cloudinary could do, but that was a real eye opener for me. Each time. we'd look at, Oh, how are we going to solve this particular problem? Or just make this easier. Jason would just crack his knuckles and go, I think you'll find we can just pass some parameters to Cloudinary and it'll happen by magic.
And there's some clever stuff behind the scenes in Cloudinary that was really fun to explore. Yeah.
Jason Lengstorf: [00:12:18] This is a little bit of a tangent, but didn't you just do something super cool with Cloudinary and Netlify redirects.
Phil Hawksworth: [00:12:23] But, yeah, I've been having fun with that just a bit, just because, Jason knew and I, did a bit of work together where we were trying to make it simple to, serve images from Cloudinary, without having to go through the process of uploading them first, just transforming the content that you have on your own site.
So we're looking at building a build plugin and things like that. And then. It's just a really nice example of clouds and Rees API, where you can say to them, just by putting something in there in the URL, it'll say, okay, this is where the source image is. Get that for me. And then all the transformations that are done to that, you can send from your CDN and it just turns out that will, if it's just a URL, then we could do that with a Netlify redirect rule.
so yeah, I, I did, made a little thing, which is. The two lines of redirect config that now clouds an area FYS, which is definitely, my, my side or any sites. so yeah, that's been really, that's another example of Cloudinary having a very slick interface that you can do powerful things with.
so yeah, I'm keen to go down the Cloudinary rabbit hole more and more as I discover stuff.
Tara Z. Manicsic: [00:13:25] So just one thing that I would like to do, is we're all extremely familiar with these technologies at this point, but just in case people aren't, can we give a quick description of each of them starting with Cloudinary?
Sure.
Jason Lengstorf: [00:13:38] Cloudinary is a, it's a like asset delivery software as a service platform. You upload images, videos. you really, you can put anything up there, but they're primarily focused on images and videos. and you can then using the URL or one of their SDKs apply transformations to it.
So if you've got an image, you can say, I want the width to be this, and I want the quality to be adjusted. I want to change the format from JPEG to PNG or whatever. you put those into the URL and then they will generate that asset and serve it at a cache URL so that you can put that into your own site or as Phil did you put it behind a redirect and then it's still on your own site.
and they have a bunch of other things they can do, but that's the elevator pitch
Tara Z. Manicsic: [00:14:24] and then next, and we also use next on Netlify right? Yeah. Cassidy, would you like to give this a little, a very, infomercial spiel on,
Cassidy Williams: [00:14:34] are you tired of your standard static site generator?
yes is a, it's a react framework. And so it gives structures to your react applications. and it can either server-side render or statically generate. Sites with, with react. and what's cool about it is because you can do either or you have a very hybrid application and what's cool about the next on Netlify package, the NPM package.
It allows you to use Netlify functions to do that kind of server side rendering stuff. So you can have even more flexibility in your applications while still having a powerful static site built with next JS.
Tara Z. Manicsic: [00:15:14] yeah, our team has been doing a lot of work on next time that with buy in it's open source.
So if anybody wants to contribute, take a look at it. do we'll put the. Link to it in our show notes. speaking of we'll say this again, but explorers that netlify.com is where this project actually exists. I always forget about that part, the information part. and then we also. I know we also worked with sanity IO, a headless CMS.
do we typically, I think we've covered what headless CMS is our before, but just in general, you're basically taking away. That, basically you're putting in data somewhere and they don't care how you use it. So you have the UI, your users are able to get the information in, and then it gets sent somewhere for the developers to use.
But if you're just a content contributor, you don't need to know anything about that. You can just.
Sarah Drasner: [00:16:12] What I really liked about working with sanity was that everything was programmatically creating the, UI that you're using instead of globbing things together in a gooey that might be frustrating to piece together.
I might come together in a way that you weren't expecting, or you can't really modify because you're programmatically connecting everything and defining these things. Schemas, you can also create custom validation. They have really nice validators to say, you just pass it in and say, minimum characters is this.
Or, please don't let us up too much because it's so flexible too. You can we were hooking things up with serverless functions to, bring in content, which is super flexible. You can do whatever you want with it. And that's really one of the nicest. Pieces, especially because as you go into the dashboard guides you through different levels of the application.
Like you can go several levels deep. If you're going through, like for instance, we have, our missions, which are the course and then the stages, which are the, each one of the videos, but for each stage you have a transcript. And things like that, and you can associate different relationships with instructors and things like that.
So it's really flexible. And it's more on the Devery side in terms of setting things up, which I personally really liked because it, you can have that control over it.
Phil Hawksworth: [00:17:29] Yeah. I love the fact that the scheme is defined in code and that code lives in your repo. And we'd have conversations about how the scheme might.
Might evolve over time and then it does. And it's, it's versioned in the repo. I really liked that. It reminds me a tiny bit of using Django and going through like migration, like database migrations and things like that as you evolve those, it just, I don't know, it feels really clear because you can see it in code says.
Defined that way. yeah, that was lovely. That was the first time I'd really done very much with sanity other than just poking around and doing some hello world stuff and experimenting. And it's really nice to see how powerful it was and how, and how well it would work for us, but I just also really liked the model of a decoupled.
CMS. I really like the fact that we, we've put all of this investment of effort in defining the schema and then evolving it and then populating content and, using next has worked out well for us. But if we, if halfway down the line, we decided that we would, if we'd been using a different tool, and said, Oh, actually we, this isn't going to do it for us.
We could have been adopted next halfway through and not have to throw away all of the work in the background. I really liked the fact that, you're portable in that way into, you've got those two things living in different places. So you can switch out tools as they evolve over time.
It's really nice kind of freedom. I think.
Jason Lengstorf: [00:18:53] Absolutely. I like what I liked about it really is, when we first started this project, we had a big meeting where we talked through all of our ideas. And then we were all really confused because we didn't like we had all these ideas and we didn't know what to do with them.
And so then we got into a whimsical document, which whimsical is like a, a collaborative whiteboard sort of deal. And we put all of our ideas on the board and then drag them into a shape. And then we were more or less able to just write that shape down as a Jason schema. And there's a little bit more too.
It's not just Jason, but The mental model is there. if you go into sanity and you say, this is the schema of our thing, that's the thing. So we were able to translate our mess of ideas into a mind map and whimsical into an actual schema insanity. And it was easy to trace that kind of evolution over time.
that part has been really nice. Like it, it felt a little less messy than trying to get into some of the other CMS where it's all point and click. Sarah said,
Sarah Drasner: [00:19:54] one of the other kind of interesting technologies we used with serverless functions to generate the certificate. So basically Taking a serverless function, putting in, programmatically creating it with SVG because you can change the names and the dates and things like that. And then using HTML to, to PDF, to take those, basically you're turning it into streams that you then turn into a PDF if it ends up being a little bit tough.
Like it's one of those things where it. Doesn't end up being that much code, but the streams themselves are very, you have to work with them in a very particular order and type of way, otherwise everything kind of explodes. so it's at the end, you're like, wow, I spent a really long time writing six lines of code.
but it, it's fun because what you're doing is basically generating all of these things on the fly based on the date and the name of the person.
Tara Z. Manicsic: [00:20:47] I think another thing that was really interesting is, we definitely stuck to a lot of the get workflow. as far as, I think one of the big things for me that attracts me, that attracted me to the JAMstack architecture was the accessibility of a get workflow.
Whereas like we're all on, let alone different time zones. so we'd be working at different times, but also Ben, you jumped in at the start of this project, re We didn't drown you.
Divya Tagtachian: [00:21:13] but
Sarah Drasner: [00:21:14] I think at times
Divya Tagtachian: [00:21:15] it, it
Tara Z. Manicsic: [00:21:17] was amazing to see how you would, pick up issues, but, how do you feel like the workflow went for you coming into the team?
Ben Hong: [00:21:23] Yeah, yeah, so that's some context I came in the middle where a lot of decisions had been made at this point. So I'm getting to see all these, like I'd never worked with sanity before never worked with next before. So it was definitely a very. Fire hose approach of like, all right, where can I, where's the smallest amount of contribution I can have to, I just start getting comfortable with things.
and then just like just rinse and repeat until eventually, and, a big shout out to Jason for just being awesome at pair programming and helping to get, navigate me through a lot of the bigger pieces. Cause I don't think I would have solved the MDX in next problem by myself in a month.
Sarah Drasner: [00:22:01] Looking like Ben's contribution graph. It's it looks like a launch of a project that goes
Divya Tagtachian: [00:22:06] okay.
Tara Z. Manicsic: [00:22:11] Yeah, we definitely got
Sarah Drasner: [00:22:12] less
Tara Z. Manicsic: [00:22:12] spoiled because we each, like either in multiples or one-on-one had our own personal learn with Jason's. Yeah.
I feel like we need to sell that. We need to make that a product somehow.
Divya Tagtachian: [00:22:34] So
Phil Hawksworth: [00:22:34] do you think that, the, do you think that the fact that we use these various tools that you know, that many of them are, as a service or it's something that is, an open source tool, do you think that makes it easier for people to draw? I think it makes it easier for people to drop in.
and arrive on a project and then pick some of these things up and have them be familiar. But Ben, as you mentioned, you hadn't used these things before, so I'm just wondering if it's just the model might be somewhat familiar or somewhat widespread now because of this kind of decoupled approach and you're consuming API APIs and then.
Doing stuff with them. so did the model feel familiar even if the tools didn't or was that also what are they doing? Why are they doing it this way?
Ben Hong: [00:23:19] yeah, certainly, as 10 mentioned, so Sarah and I do a lot with the view community, so we've done a lot of work with NOx. So in that regard, A lot of mental models from next did at least partially migrate over to next because they have made some different decisions.
but to Phil's point though, the mental models, as far as like gems, like API calls, that was, that did help me to just tread water as I was going through. Just feeling my way through things. but I do think that obviously with each new tool that has its standards, it can be intimidating for someone new because then it's like the Cloudinary, the several lists, the, this the, that, and it does feel like a lot.
like I think. Before I joined, I knew that y'all were using sanity. So I tried to read all the stuff, but that's definitely not the way to go about it. just sitting with Jason for 30 minutes, it's already got me like just enough knowledge to be dangerous with sanity. Cause I wasn't architecting the whole thing from scratch, but it was like to understand where things were coming from and then getting that hands on experience is really what I think got me familiar.
But, It's like a catch 22,
Jason Lengstorf: [00:24:14] Ben was incredible. Like I've never seen anybody dive into a project with both feet and start running that fast. It was really incredible. but we also made some very specific architectural decisions at the beginning. Like for example, sanity has multiple ways that you can work with it.
They have the graph QL approach, and then they have their own query language. And then they have a, like a markdown approach or they have their own I don't even know, markup schema that they use. And we very intentionally chose not to use the proprietary formats because it would be harder to ramp people up on.
so we wanted the things that people would know. We want to graph QL. We wanted Mark down things that you can find documentation and onboarding for. Outside of the company. and so I think that was a consideration, That, and honestly, I think if that hadn't been an option, we probably would have ended up using a different platform.
Sarah Drasner: [00:25:05] Yeah. Yeah. That's definitely true. And I think like in terms of transferring things over from next to. next JS. I think Ben and I were in chat sometimes where we're like, this equals this, like
getting the kind of mental model between the two things like, okay, if you, if we want it to do this in Knox.
And even for some of the SVG, UI elements, like the tracker. I wrote it in view first and then transferred it over to react because it's just easier for me since I'm so fluent in view with while I'm building it, it's easier for me to think through it that way. And then it wasn't so hard.
they transfer really directly, so it wasn't so hard to just transfer it over once. It was done. It's just whatever you're the most fluent in. But I think what's interesting about these technologies is that they are really comparable in a lot of ways. the, there's kind of one-to-one things, right?
everybody has some concept of a loop. It just goes. It's different in each one. And so you can move things over. I don't know if Tara, you felt like that coming from English.
Tara Z. Manicsic: [00:26:05] there's so many things where it's just I know what I want to do. What's the name for it and next, or in react, And it's just it's definitely. I try. I think, I feel like I bring this up a lot, but it's just yeah, all the same concepts are there. We've just given them different names and small things are tweaked in the background to change it. But yeah, spot on. I totally did the same kind of logic puzzle.
Cassidy Williams: [00:26:26] I definitely did that.
Like with the responsive navbar I did it all in code pen first, and then I copied it over and
Divya Tagtachian: [00:26:32] reacts a little bit.
Sarah Drasner: [00:26:34] Kopin is really good for that because you're not thinking about any other things. Dependencies, you're not, it allows you to think in kind of a sandbox of just what's the problem I'm trying to solve right now without anything.
Yeah.
Tara Z. Manicsic: [00:26:46] So I think the biggest thing with our team is basically merging yourself into the ponds and uses of tacos. And I
Divya Tagtachian: [00:26:55] have to say,
Tara Z. Manicsic: [00:26:58] I think then. Fully succeeded off the charts with that. what more could you ask? Yeah, that
Cassidy Williams: [00:27:04] was a big part of his onboarding.
Divya Tagtachian: [00:27:06] Yeah.
Tara Z. Manicsic: [00:27:08] Yes. If you all could see the Slack chat for this project and we would be very embarrassed.
Divya Tagtachian: [00:27:14] I think
Phil Hawksworth: [00:27:15] that's true across, I think that's actually true across a lot of Netlify. and. No, that's, I'm sure that's not a terribly negative thing to say. I was catching myself, but there is a lot of, there are lots of puns around, not just our team, they're all over the place and there's lots of food chatter.
and there's a really, I wish I had the exact number, but it was something like 1100 and something or other, Important data that describes what it's like to be at Netlify 1100 and something or other custom emojis. That's true.
Sarah Drasner: [00:27:48] Let's do them are from
Tara Z. Manicsic: [00:27:49] Jason
Phil Hawksworth: [00:27:53] Jason's then
Tara Z. Manicsic: [00:27:55] Lindsay too.
Divya Tagtachian: [00:27:56] Since Lindsay has
Tara Z. Manicsic: [00:27:57] joined the team, we have great next on Netlify coverage and lots of emojis,
Divya Tagtachian: [00:28:02] which is what matters. Exactly.
Tara Z. Manicsic: [00:28:04] that was the whole job description. So I see no problem there. so yeah, I want to wrap this up today because we could talk about this for a very long time.
And, we hope to in the future have on remotely interesting, like more in depth conversations on the different technologies we used in general because, we find them extremely interesting. and we would love to teach you about them or talk to you about them or over, but as always at the end of the mildly interesting, we ask the really hard hitting questions, and just try to dig in real seriously into topics.
So I thought I would ask the team, would you go live in space for a month?
Phil Hawksworth: [00:28:39] Would you go live in space or where
Tara Z. Manicsic: [00:28:41] did that? Where it didn't. They.
Cassidy Williams: [00:28:43] So when you sit, so I have a lot of questions about this.
Tara Z. Manicsic: [00:28:49] You've got 45 seconds just very quickly.
Cassidy Williams: [00:28:52] Where in space are we living? Are we living on a space station or are we living on a planet or a moon?
Tara Z. Manicsic: [00:28:58] So here's the thing I thought about it being like the Marsh habitation.
Phil Hawksworth: [00:29:04] Why is it, why was that in a Dutch Jackson?
Jason Lengstorf: [00:29:08] I thought she was, I thought she was paying homage to, to serve Sean.
Divya Tagtachian: [00:29:14] No,
Tara Z. Manicsic: [00:29:14] I just couldn't open my mouth correctly. so yeah, I guess in my mind, I'm thinking more like interstellar.
Space community.
Cassidy Williams: [00:29:23] Okay. Yeah. Cause I'm thinking like, is it interstellar type or is it gravity or is it the Martian? there's a lot of movies where everything goes wrong and I want to know which center.
Tara Z. Manicsic: [00:29:33] Yeah, exactly.
Phil Hawksworth: [00:29:34] Yeah. It makes a difference.
Tara Z. Manicsic: [00:29:37] Okay. Yes,
Cassidy Williams: [00:29:38] Mars. Okay. So living on Mars for a month?
Tara Z. Manicsic: [00:29:42] Yes or no?
Technically. Okay, good. Yeah. Is
Jason Lengstorf: [00:29:50] there wifi?
is it, is this the Mars colony before or after Starlink starts working
Phil Hawksworth: [00:29:59] there's
Tara Z. Manicsic: [00:30:00] wifi, but it's, Phil's wifi,
Jason Lengstorf: [00:30:02] my wife
Ben Hong: [00:30:06] all the time.
Phil Hawksworth: [00:30:08] I love
Jason Lengstorf: [00:30:09] it. I love it because. As she throws that insult spilled grows,
I would live in space. Why now? I feel like you're not going to get on your death bed and regret that.
Phil Hawksworth: [00:30:24] Is it okay to any of you that maybe it's
Divya Tagtachian: [00:30:26] all of your
Phil Hawksworth: [00:30:27] wifi, a problem. And mine is fine.
Tara Z. Manicsic: [00:30:35] Another remotely interesting theme
Divya Tagtachian: [00:30:37] is, feel sense that it's us, not his way.
Phil Hawksworth: [00:30:44] I'm sorry. I've got to, I live in England. So we have the victim. We have Victorian wifi that was built by the Victorians.
Tara Z. Manicsic: [00:30:52] It runs on T
Phil Hawksworth: [00:30:54] I definitely would, by the way, I definitely to go. I don't like the idea of the journey there and back, because that might be a little bit more than a month, but the
Tara Z. Manicsic: [00:31:03] month
Phil Hawksworth: [00:31:05] the journey, but no a month there.
Tara Z. Manicsic: [00:31:09] Okay. So follow up then. Would you live on Mars for a month with this team? Yes, Cassidy left again. Cassie was just
Phil Hawksworth: [00:31:19] so done with us.
I would, it would have to be February. I have to be the shortest one.
Tara Z. Manicsic: [00:31:38] I totally would. If Jason had like unlimited cooking material, I think I would. Yeah.
Cassidy Williams: [00:31:45] Yeah. Cause I, my hesitation with saying yes to any of this or the modern conveniences that have made me lazy, I really just, I want good food. I want to be able to play video games. I don't know if the ping would be really good on Mars.
Jason Lengstorf: [00:32:01] Yeah. This is actually a really good point. What's the kitchen setup? what kind of oven do we have?
Phil Hawksworth: [00:32:06] Yeah.
Tara Z. Manicsic: [00:32:08] Okay, okay. So full scenario is like Mars, like from the movie. but it's America's test kitchen and we have, every source of. I said every source of animal byproducts. That's just weird.
Phil Hawksworth: [00:32:26] It sounds to me like what you're describing earth.
Cassidy Williams: [00:32:30] Yeah. I'm gonna say no, I might be an odd one out, but I'm
Phil Hawksworth: [00:32:34] saying this interaction.
Jason Lengstorf: [00:32:36] No, in general or just no, not with the team.
Cassidy Williams: [00:32:40] With this team, it's a, maybe depending on the resources that we have, but I would not go just by myself. I'd rather
Tara Z. Manicsic: [00:32:48] have
Cassidy Williams: [00:32:49] gravity
Tara Z. Manicsic: [00:32:50] that I say yes or no question
Phil Hawksworth: [00:32:54] sensitive.
Cassidy is tentative.
Jason Lengstorf: [00:32:58] I don't know. Now that we'll put down Cassidy as question marks. All right, Joel, I think we're going to call that done because we could debate about outer space all day. so next time, make sure you tune in where we're going to have a really nice discussion about the JAMstack ecosystem with a special guest.
more details on that soon. So make sure you Mark your calendars. Come hang out with us until then. I am Jason. Sparkly meteor, shower, Lang store.
Ben Hong: [00:33:36] I am Ben the bean black hole.
Phil Hawksworth: [00:33:44] I am Phil. Dark side of the moon. Hawksworth
Sarah Drasner: [00:33:48] I'm Sarah diggity, dark matter.
Phil Hawksworth: [00:33:57] Happy Saturdays. Look how happy she is with dignity.
Tara Z. Manicsic: [00:34:04] And I am Tara mama Milky way. And the next
Divya Tagtachian: [00:34:06] thing
Phil Hawksworth: [00:34:14] we
Tara Z. Manicsic: [00:34:14] should be sleep deprived more often. And that's how I showed you. Oh no.
Phil Hawksworth: [00:34:20] Cause he's going to do one Cassidy. He's going to do, when she came back specifically,
Jason Lengstorf: [00:34:24] you need a name.
Cassidy Williams: [00:34:25] I'm Cassidy, Matt Damon Williams.
Phil Hawksworth: [00:34:32] It was worth it.
Divya Tagtachian: [00:34:36] I
Sarah Drasner: [00:34:36] don't know if people can tell that we're
Divya Tagtachian: [00:34:38] completely delirious.
Tara Z. Manicsic: [00:34:45] Thank you all for joining us remotely and
Phil Hawksworth: [00:34:51] is waving.
SHOW NOTES
What is it?
- How would you explain it to your parents?
- What are the missions?
- How are the mission videos?
- Missions to come
- How do we build something we can all maintain?
- Next.js for static site generation + more
- We need data: Sanity.io
- MDX for Sanity + Next
- It's Open Source!
- Mob + Pair Coding
- Remotely Interesting on this
- Cloudinary for automated video manipulation
- A high-level overview of all these technologies
- Next On Netlify
- Sarah's thoughts on the flexibility of Sanity + a custom Cassidy bleep when Sarah swears (18:09 😂)
- Phil's thoughts on the Sanity schema setup & using a decoupled CMS
- Collaborating and mental models with whimsical
- Serverless functions & SVG to streams to customized PDFs ✨or 💣
- Git workflow + incorporating new team members like the amazing Ben Hong!
- Learn with Jason As A Service (LAAS)
- Comparing libraries mental maps to contribute to new stacks
- Choosing things most people know instead of proprietary tech
- Team tenet: how to use tacos 🌮
- Would you spend a month in space?
- Follow-up which space?
- Follow-up would still do it with this team?
- Le sigh
Cassidy Williams: [00:00:00] Previously on
Remotely
Interesting.
Tara Z. Manicsic: [00:00:03] I wanna chop a ham with an axe, that sounds fun.
Cassidy Williams: [00:00:08] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:10] This is remotely interesting.
Divya Tagtachian: [00:00:12] that seems
a little presumptuous.
Sarah Drasner: [00:00:14] No, that's the
name of the show?
Cassidy Williams: [00:00:23] hello everybody. We just made something. What?
we made a site
called JAMstack Explorer as it, as a learning platform. And we are so excited to be sharing with you today, how we built it, what it consists of, how much sleep we lost over it. We're very excited.
Tara Z. Manicsic: [00:00:43] Very excited. Yes. You that's exactly right.
We're very sleep deprived, excited and giggly. So this will be a fantastic episode.
Cassidy Williams: [00:00:55] Perfect.
Tara Z. Manicsic: [00:00:56] one of the things that I think is interesting is the fact that we have a bunch of people. So this is the DX team project at Netlify and we all are. Very, maybe even annoyingly passionate about educating people.
We,
we really like helping
people and, I think all of us are excited to make a platform, to help people understand and learn about the JAMstack then, hope to cover this a lot of different areas. if you all, what's your way that you would describe the JAMstack explorers to your parents.
Cassidy Williams: [00:01:30] I would
tell them it's a place where people can learn coding practices.
I believe it at that,
Jason Lengstorf: [00:01:43] I would probably say it's a groundbreaking new platform where you can take video based educational materials to bring your web development to a whole new level.
Tara Z. Manicsic: [00:01:57] Can I play Jason's mom and be like, Oh,
Jason, you're brilliant
Jason Lengstorf: [00:02:04] definitely has that Midwestern accent. So you nailed that.
Sarah Drasner: [00:02:10] My parents still. I still don't think they understand what I do. So
you can watch videos about the thing that I do that I'll try to explain again,
Phil Hawksworth: [00:02:26] please stop me that I will just stop you right there. Sarah. We're not going to listen to anymore. Let alone watch videos when you're doing it.
Tara Z. Manicsic: [00:02:35] so yeah,
I think
though we did get the point across that we have a lot of video missions, that kind of leads you down the path of where you can watch a short ish snippet videos to get you to the end of your final mission of understanding things like split testing on Netlify and next JS and, angular.
and we have to the amazing instructors here. Oh, three
Sarah Drasner: [00:03:07] Oh, I should
Phil Hawksworth: [00:03:10] leave that as.
Tara Z. Manicsic: [00:03:14] So Cassidy, what do you cover on your mission?
Cassidy Williams: [00:03:16] so mine is called next JS from the ground up and it's basically just covering the basics of next gen is what you need to know. And then going into detail on how to actually use some of the functions and methods and things that are built into next JS because yeah.
If, reacts, chances are, you can pick up next Jess relatively quickly, but there are tiny little gotchas where you have to learn, okay, these are where my routes go. These are what page components are and that sort of thing. So it's going from the very basics, what you should know, here's how you use them and then setting them free to build whatever they want.
Tara Z. Manicsic: [00:03:50] And what about yours?
Phil Hawksworth: [00:03:54] So I'm one of the, one of the things I like about this is that we decided that we would leave it quite broad so that we would have things that are specific to different technologies or libraries or frameworks, or it might be drilling down into certain aspects of JavaScript, but also using the Netlify platform.
So I've done. a mission or a course on, achieving one particular goal using the Netlify platform. So I did, a mission on split testing. so that covers everything you need to do from doing your first deployment on Netlify setting things up. So deploy from, get building out, get. branch model, sorry, branch deploys.
and then using those as the basis to do split testing and all the configuration along the way, and a few little kind of tricks. but it's hard to do all of that in five minute chapters. I know that we set ourselves a bit of a goal of keeping them not long and droney. Like this answer is turning into five within five minutes.
so I find that a little challenging, but it's a good discipline. How about, how did you find it? Terra? Where do you put for your course?
Tara Z. Manicsic: [00:04:55] mine was perfect. I don't know. I fit everything in the time. I don't understand your problem. but we, we could, we could evolve it to, to tick talks instead of videos to really, 15
NPM install
Sarah Drasner: [00:05:11] over three videos.
Cassidy Williams: [00:05:14] Yeah. I definitely found it challenging to make it. Five minutes and less. I think one of fine made it to like a six minute Mark, but it was amusing because you know how, when you're recording something, you might mess up. And so you re say the same thing and stuff. I did that a lot and I definitely had one video that started as 15 minutes and I was worried.
And then it was definitely down to three and I was like, that's humbling.
Tara Z. Manicsic: [00:05:40] So you have mine was on, angular and the JAMstack and it's, it's more along the lines of if you're comfortable with angular. even just on the beginning level, it's, starting to have you understand the JAMstack architecture, and get comfortable with, putting your project on a CDN using Netlify and also understanding what a CDN is.
which is important. and then as well as pre rendering with the English static site generator Scully, and then, making login forms, having sign-in and OS with things like, Netlify forms and that live with Netlify identity widget. And, yeah, it's fun. Like after you've finished, three missions, you also get a certificate and it's a pretty nice looking certificate.
I say, so myself,
Sarah Drasner: [00:06:30] Yeah. And what's really exciting is that we're going to keep on releasing more courses too. So like every week or couple of weeks, you'll see a new course come out from us. And so you'll eventually see courses on Gatsby and on next and on view composition, API, and. Every manner, Netlify functions every manner of kind of different pieces of the JAMstack and different technologies too.
that's really exciting
Tara Z. Manicsic: [00:06:53] because I don't know if the audience has realized, but we have these, random people on our team named like Sarah dreads, man, Ben, Hong and Jason monk store that are like content pros. So we've got some good resources to dig into soon.
Phil Hawksworth: [00:07:11] That
Sarah Drasner: [00:07:11] makes me feel a little pressured to going into
it's
like everybody's sitting here going good.
It was a little hard to make these courses, but don't worry. These courses are going
to come out.
Phil Hawksworth: [00:07:25] Also you yourself just a minute ago, said every week we're going to be dropping new courses. So I think, that's a new course every week
Jason Lengstorf: [00:07:33] Did anyone else's eyes bug
out of their head?
Tara Z. Manicsic: [00:07:37] Cassidy left the podcast, as soon as she said that.
But speaking of those three amazing people, they are behind a lot of the behind the scenes magic of how we create a JAMstack explorers. so I'd love to start dipping into the technology that we use to create this new learning platform in the Netlify community. so who, So who wants to talk about some of that technology?
Phil Hawksworth: [00:08:06] I volunteered Jason.
Jason Lengstorf: [00:08:10] I've been okay. I've been voluntold.
Tara Z. Manicsic: [00:08:14] You cut out after I volunteered. So I think
Sarah Drasner: [00:08:19] Jason, do you think it would be, I think it would be fun to hear about our, to talk through like how, next insanity are working and then go from there. Cause those are like the first big pieces that,
Jason Lengstorf: [00:08:29] yeah. okay. So we, when we were trying to think of how to build this, we were trying to.
Figure out, like how do we take a team full of people who are experts in different things? So like Ben and Sarah are really heavy in the view community and, terrorism, the angular community fills in web standards. Me and Cassidy are doing a lot of react. And so it was like, how do we build something that we can all.
Maintain. And then we threw all that other window Cassidy and ice cream, the loudest. So we decided to build it in react.
Tara Z. Manicsic: [00:08:56] they just put a message in Slack that was like catch-up fools.
Jason Lengstorf: [00:09:02] so Sarah's got a bunch of react experience. Tara's got a bunch of react experience. And so it was like very easy for us to say, okay, the majority of us are going to be able to hit the ground running.
if we use react. And next has a really good story for static site generation and being able to use a framework, but get all the benefits of static sites. so then we were looking at alright, we need to get some data here. And sanity has got this super flexible schema story where you can start with an empty file and you say, I want this field and that field.
And it's really customizable up to the point that you can invent stuff if you want. so with the two of those, we were able to use sanity's markdown input, which is a plugin they have. And we just went ahead and threw MDX into that with, with, we can add Custom components and stuff.
And then on the next side, we grabbed a, an MDX, like MDX next adapter, and we're able to do statically re-hydrated. like the MDX comes in, renders on the page and then when it loads it hydrates and we've got this like fully. Dynamic, content all coming out of sanity, which is really nice little head bending.
It's a nice
Tara Z. Manicsic: [00:10:10] little headband. The Oliver brains are melted. From this project in the best way possible.
Sarah Drasner: [00:10:16] Eventually we're hoping to open source it so that people can actually see what we did build and how it's done so that people can check out the code themselves and do some like posts that show how it was all done so that we can walk people through how it was put together.
And yeah,
Jason Lengstorf: [00:10:33] there's so much good medic content in here because so many of the things that we did were word. Things that, you have to do all the time. And some of them were just very, how do we solve this problem? Like the video stuff. For example, we teamed up with Cloudinary and, we were able to record our videos, but like for a video to be good, you have to do you want like bumpers and like intros and title cards.
And that can be a huge amount of video editing overhead. But because we were using Cloudinary, we got to use their API to Auto-generate our title cards and automatically insert bumpers and like countdown timers at the end and stuff. And all of that happened with these cool transitions and stuff through their API.
Instead of us having to manually go through and add these to each one, which I don't even want to think about how many hours I would have been with like the last minute video changes we were making.
Tara Z. Manicsic: [00:11:23] Oh my goodness. And the best thing is like we would have JAMstack Explorer, meetings. We had, we did a lot of mob pair programming or is it mob?
Just bomb pare,
Sarah Drasner: [00:11:36] depending on
Tara Z. Manicsic: [00:11:38] what should we have an episode on that you could listen to people saying correctly on like me, but we had a lot of those sessions on the team and I feel like a lot of them would be like, Oh, now we have to do this as videos and Jason being like cloud Mary can do that. Really?
Divya Tagtachian: [00:11:52] Wow.
Phil Hawksworth: [00:11:53] That was such an eye opener.
'cause I thought I had a fairly good understanding of what Cloudinary could do, but that was a real eye opener for me. Each time. we'd look at, Oh, how are we going to solve this particular problem? Or just make this easier. Jason would just crack his knuckles and go, I think you'll find we can just pass some parameters to Cloudinary and it'll happen by magic.
And there's some clever stuff behind the scenes in Cloudinary that was really fun to explore. Yeah.
Jason Lengstorf: [00:12:18] This is a little bit of a tangent, but didn't you just do something super cool with Cloudinary and Netlify redirects.
Phil Hawksworth: [00:12:23] But, yeah, I've been having fun with that just a bit, just because, Jason knew and I, did a bit of work together where we were trying to make it simple to, serve images from Cloudinary, without having to go through the process of uploading them first, just transforming the content that you have on your own site.
So we're looking at building a build plugin and things like that. And then. It's just a really nice example of clouds and Rees API, where you can say to them, just by putting something in there in the URL, it'll say, okay, this is where the source image is. Get that for me. And then all the transformations that are done to that, you can send from your CDN and it just turns out that will, if it's just a URL, then we could do that with a Netlify redirect rule.
so yeah, I, I did, made a little thing, which is. The two lines of redirect config that now clouds an area FYS, which is definitely, my, my side or any sites. so yeah, that's been really, that's another example of Cloudinary having a very slick interface that you can do powerful things with.
so yeah, I'm keen to go down the Cloudinary rabbit hole more and more as I discover stuff.
Tara Z. Manicsic: [00:13:25] So just one thing that I would like to do, is we're all extremely familiar with these technologies at this point, but just in case people aren't, can we give a quick description of each of them starting with Cloudinary?
Sure.
Jason Lengstorf: [00:13:38] Cloudinary is a, it's a like asset delivery software as a service platform. You upload images, videos. you really, you can put anything up there, but they're primarily focused on images and videos. and you can then using the URL or one of their SDKs apply transformations to it.
So if you've got an image, you can say, I want the width to be this, and I want the quality to be adjusted. I want to change the format from JPEG to PNG or whatever. you put those into the URL and then they will generate that asset and serve it at a cache URL so that you can put that into your own site or as Phil did you put it behind a redirect and then it's still on your own site.
and they have a bunch of other things they can do, but that's the elevator pitch
Tara Z. Manicsic: [00:14:24] and then next, and we also use next on Netlify right? Yeah. Cassidy, would you like to give this a little, a very, infomercial spiel on,
Cassidy Williams: [00:14:34] are you tired of your standard static site generator?
yes is a, it's a react framework. And so it gives structures to your react applications. and it can either server-side render or statically generate. Sites with, with react. and what's cool about it is because you can do either or you have a very hybrid application and what's cool about the next on Netlify package, the NPM package.
It allows you to use Netlify functions to do that kind of server side rendering stuff. So you can have even more flexibility in your applications while still having a powerful static site built with next JS.
Tara Z. Manicsic: [00:15:14] yeah, our team has been doing a lot of work on next time that with buy in it's open source.
So if anybody wants to contribute, take a look at it. do we'll put the. Link to it in our show notes. speaking of we'll say this again, but explorers that netlify.com is where this project actually exists. I always forget about that part, the information part. and then we also. I know we also worked with sanity IO, a headless CMS.
do we typically, I think we've covered what headless CMS is our before, but just in general, you're basically taking away. That, basically you're putting in data somewhere and they don't care how you use it. So you have the UI, your users are able to get the information in, and then it gets sent somewhere for the developers to use.
But if you're just a content contributor, you don't need to know anything about that. You can just.
Sarah Drasner: [00:16:12] What I really liked about working with sanity was that everything was programmatically creating the, UI that you're using instead of globbing things together in a gooey that might be frustrating to piece together.
I might come together in a way that you weren't expecting, or you can't really modify because you're programmatically connecting everything and defining these things. Schemas, you can also create custom validation. They have really nice validators to say, you just pass it in and say, minimum characters is this.
Or, please don't let us up too much because it's so flexible too. You can we were hooking things up with serverless functions to, bring in content, which is super flexible. You can do whatever you want with it. And that's really one of the nicest. Pieces, especially because as you go into the dashboard guides you through different levels of the application.
Like you can go several levels deep. If you're going through, like for instance, we have, our missions, which are the course and then the stages, which are the, each one of the videos, but for each stage you have a transcript. And things like that, and you can associate different relationships with instructors and things like that.
So it's really flexible. And it's more on the Devery side in terms of setting things up, which I personally really liked because it, you can have that control over it.
Phil Hawksworth: [00:17:29] Yeah. I love the fact that the scheme is defined in code and that code lives in your repo. And we'd have conversations about how the scheme might.
Might evolve over time and then it does. And it's, it's versioned in the repo. I really liked that. It reminds me a tiny bit of using Django and going through like migration, like database migrations and things like that as you evolve those, it just, I don't know, it feels really clear because you can see it in code says.
Defined that way. yeah, that was lovely. That was the first time I'd really done very much with sanity other than just poking around and doing some hello world stuff and experimenting. And it's really nice to see how powerful it was and how, and how well it would work for us, but I just also really liked the model of a decoupled.
CMS. I really like the fact that we, we've put all of this investment of effort in defining the schema and then evolving it and then populating content and, using next has worked out well for us. But if we, if halfway down the line, we decided that we would, if we'd been using a different tool, and said, Oh, actually we, this isn't going to do it for us.
We could have been adopted next halfway through and not have to throw away all of the work in the background. I really liked the fact that, you're portable in that way into, you've got those two things living in different places. So you can switch out tools as they evolve over time.
It's really nice kind of freedom. I think.
Jason Lengstorf: [00:18:53] Absolutely. I like what I liked about it really is, when we first started this project, we had a big meeting where we talked through all of our ideas. And then we were all really confused because we didn't like we had all these ideas and we didn't know what to do with them.
And so then we got into a whimsical document, which whimsical is like a, a collaborative whiteboard sort of deal. And we put all of our ideas on the board and then drag them into a shape. And then we were more or less able to just write that shape down as a Jason schema. And there's a little bit more too.
It's not just Jason, but The mental model is there. if you go into sanity and you say, this is the schema of our thing, that's the thing. So we were able to translate our mess of ideas into a mind map and whimsical into an actual schema insanity. And it was easy to trace that kind of evolution over time.
that part has been really nice. Like it, it felt a little less messy than trying to get into some of the other CMS where it's all point and click. Sarah said,
Sarah Drasner: [00:19:54] one of the other kind of interesting technologies we used with serverless functions to generate the certificate. So basically Taking a serverless function, putting in, programmatically creating it with SVG because you can change the names and the dates and things like that. And then using HTML to, to PDF, to take those, basically you're turning it into streams that you then turn into a PDF if it ends up being a little bit tough.
Like it's one of those things where it. Doesn't end up being that much code, but the streams themselves are very, you have to work with them in a very particular order and type of way, otherwise everything kind of explodes. so it's at the end, you're like, wow, I spent a really long time writing six lines of code.
but it, it's fun because what you're doing is basically generating all of these things on the fly based on the date and the name of the person.
Tara Z. Manicsic: [00:20:47] I think another thing that was really interesting is, we definitely stuck to a lot of the get workflow. as far as, I think one of the big things for me that attracts me, that attracted me to the JAMstack architecture was the accessibility of a get workflow.
Whereas like we're all on, let alone different time zones. so we'd be working at different times, but also Ben, you jumped in at the start of this project, re We didn't drown you.
Divya Tagtachian: [00:21:13] but
Sarah Drasner: [00:21:14] I think at times
Divya Tagtachian: [00:21:15] it, it
Tara Z. Manicsic: [00:21:17] was amazing to see how you would, pick up issues, but, how do you feel like the workflow went for you coming into the team?
Ben Hong: [00:21:23] Yeah, yeah, so that's some context I came in the middle where a lot of decisions had been made at this point. So I'm getting to see all these, like I'd never worked with sanity before never worked with next before. So it was definitely a very. Fire hose approach of like, all right, where can I, where's the smallest amount of contribution I can have to, I just start getting comfortable with things.
and then just like just rinse and repeat until eventually, and, a big shout out to Jason for just being awesome at pair programming and helping to get, navigate me through a lot of the bigger pieces. Cause I don't think I would have solved the MDX in next problem by myself in a month.
Sarah Drasner: [00:22:01] Looking like Ben's contribution graph. It's it looks like a launch of a project that goes
Divya Tagtachian: [00:22:06] okay.
Tara Z. Manicsic: [00:22:11] Yeah, we definitely got
Sarah Drasner: [00:22:12] less
Tara Z. Manicsic: [00:22:12] spoiled because we each, like either in multiples or one-on-one had our own personal learn with Jason's. Yeah.
I feel like we need to sell that. We need to make that a product somehow.
Divya Tagtachian: [00:22:34] So
Phil Hawksworth: [00:22:34] do you think that, the, do you think that the fact that we use these various tools that you know, that many of them are, as a service or it's something that is, an open source tool, do you think that makes it easier for people to draw? I think it makes it easier for people to drop in.
and arrive on a project and then pick some of these things up and have them be familiar. But Ben, as you mentioned, you hadn't used these things before, so I'm just wondering if it's just the model might be somewhat familiar or somewhat widespread now because of this kind of decoupled approach and you're consuming API APIs and then.
Doing stuff with them. so did the model feel familiar even if the tools didn't or was that also what are they doing? Why are they doing it this way?
Ben Hong: [00:23:19] yeah, certainly, as 10 mentioned, so Sarah and I do a lot with the view community, so we've done a lot of work with NOx. So in that regard, A lot of mental models from next did at least partially migrate over to next because they have made some different decisions.
but to Phil's point though, the mental models, as far as like gems, like API calls, that was, that did help me to just tread water as I was going through. Just feeling my way through things. but I do think that obviously with each new tool that has its standards, it can be intimidating for someone new because then it's like the Cloudinary, the several lists, the, this the, that, and it does feel like a lot.
like I think. Before I joined, I knew that y'all were using sanity. So I tried to read all the stuff, but that's definitely not the way to go about it. just sitting with Jason for 30 minutes, it's already got me like just enough knowledge to be dangerous with sanity. Cause I wasn't architecting the whole thing from scratch, but it was like to understand where things were coming from and then getting that hands on experience is really what I think got me familiar.
But, It's like a catch 22,
Jason Lengstorf: [00:24:14] Ben was incredible. Like I've never seen anybody dive into a project with both feet and start running that fast. It was really incredible. but we also made some very specific architectural decisions at the beginning. Like for example, sanity has multiple ways that you can work with it.
They have the graph QL approach, and then they have their own query language. And then they have a, like a markdown approach or they have their own I don't even know, markup schema that they use. And we very intentionally chose not to use the proprietary formats because it would be harder to ramp people up on.
so we wanted the things that people would know. We want to graph QL. We wanted Mark down things that you can find documentation and onboarding for. Outside of the company. and so I think that was a consideration, That, and honestly, I think if that hadn't been an option, we probably would have ended up using a different platform.
Sarah Drasner: [00:25:05] Yeah. Yeah. That's definitely true. And I think like in terms of transferring things over from next to. next JS. I think Ben and I were in chat sometimes where we're like, this equals this, like
getting the kind of mental model between the two things like, okay, if you, if we want it to do this in Knox.
And even for some of the SVG, UI elements, like the tracker. I wrote it in view first and then transferred it over to react because it's just easier for me since I'm so fluent in view with while I'm building it, it's easier for me to think through it that way. And then it wasn't so hard.
they transfer really directly, so it wasn't so hard to just transfer it over once. It was done. It's just whatever you're the most fluent in. But I think what's interesting about these technologies is that they are really comparable in a lot of ways. the, there's kind of one-to-one things, right?
everybody has some concept of a loop. It just goes. It's different in each one. And so you can move things over. I don't know if Tara, you felt like that coming from English.
Tara Z. Manicsic: [00:26:05] there's so many things where it's just I know what I want to do. What's the name for it and next, or in react, And it's just it's definitely. I try. I think, I feel like I bring this up a lot, but it's just yeah, all the same concepts are there. We've just given them different names and small things are tweaked in the background to change it. But yeah, spot on. I totally did the same kind of logic puzzle.
Cassidy Williams: [00:26:26] I definitely did that.
Like with the responsive navbar I did it all in code pen first, and then I copied it over and
Divya Tagtachian: [00:26:32] reacts a little bit.
Sarah Drasner: [00:26:34] Kopin is really good for that because you're not thinking about any other things. Dependencies, you're not, it allows you to think in kind of a sandbox of just what's the problem I'm trying to solve right now without anything.
Yeah.
Tara Z. Manicsic: [00:26:46] So I think the biggest thing with our team is basically merging yourself into the ponds and uses of tacos. And I
Divya Tagtachian: [00:26:55] have to say,
Tara Z. Manicsic: [00:26:58] I think then. Fully succeeded off the charts with that. what more could you ask? Yeah, that
Cassidy Williams: [00:27:04] was a big part of his onboarding.
Divya Tagtachian: [00:27:06] Yeah.
Tara Z. Manicsic: [00:27:08] Yes. If you all could see the Slack chat for this project and we would be very embarrassed.
Divya Tagtachian: [00:27:14] I think
Phil Hawksworth: [00:27:15] that's true across, I think that's actually true across a lot of Netlify. and. No, that's, I'm sure that's not a terribly negative thing to say. I was catching myself, but there is a lot of, there are lots of puns around, not just our team, they're all over the place and there's lots of food chatter.
and there's a really, I wish I had the exact number, but it was something like 1100 and something or other, Important data that describes what it's like to be at Netlify 1100 and something or other custom emojis. That's true.
Sarah Drasner: [00:27:48] Let's do them are from
Tara Z. Manicsic: [00:27:49] Jason
Phil Hawksworth: [00:27:53] Jason's then
Tara Z. Manicsic: [00:27:55] Lindsay too.
Divya Tagtachian: [00:27:56] Since Lindsay has
Tara Z. Manicsic: [00:27:57] joined the team, we have great next on Netlify coverage and lots of emojis,
Divya Tagtachian: [00:28:02] which is what matters. Exactly.
Tara Z. Manicsic: [00:28:04] that was the whole job description. So I see no problem there. so yeah, I want to wrap this up today because we could talk about this for a very long time.
And, we hope to in the future have on remotely interesting, like more in depth conversations on the different technologies we used in general because, we find them extremely interesting. and we would love to teach you about them or talk to you about them or over, but as always at the end of the mildly interesting, we ask the really hard hitting questions, and just try to dig in real seriously into topics.
So I thought I would ask the team, would you go live in space for a month?
Phil Hawksworth: [00:28:39] Would you go live in space or where
Tara Z. Manicsic: [00:28:41] did that? Where it didn't. They.
Cassidy Williams: [00:28:43] So when you sit, so I have a lot of questions about this.
Tara Z. Manicsic: [00:28:49] You've got 45 seconds just very quickly.
Cassidy Williams: [00:28:52] Where in space are we living? Are we living on a space station or are we living on a planet or a moon?
Tara Z. Manicsic: [00:28:58] So here's the thing I thought about it being like the Marsh habitation.
Phil Hawksworth: [00:29:04] Why is it, why was that in a Dutch Jackson?
Jason Lengstorf: [00:29:08] I thought she was, I thought she was paying homage to, to serve Sean.
Divya Tagtachian: [00:29:14] No,
Tara Z. Manicsic: [00:29:14] I just couldn't open my mouth correctly. so yeah, I guess in my mind, I'm thinking more like interstellar.
Space community.
Cassidy Williams: [00:29:23] Okay. Yeah. Cause I'm thinking like, is it interstellar type or is it gravity or is it the Martian? there's a lot of movies where everything goes wrong and I want to know which center.
Tara Z. Manicsic: [00:29:33] Yeah, exactly.
Phil Hawksworth: [00:29:34] Yeah. It makes a difference.
Tara Z. Manicsic: [00:29:37] Okay. Yes,
Cassidy Williams: [00:29:38] Mars. Okay. So living on Mars for a month?
Tara Z. Manicsic: [00:29:42] Yes or no?
Technically. Okay, good. Yeah. Is
Jason Lengstorf: [00:29:50] there wifi?
is it, is this the Mars colony before or after Starlink starts working
Phil Hawksworth: [00:29:59] there's
Tara Z. Manicsic: [00:30:00] wifi, but it's, Phil's wifi,
Jason Lengstorf: [00:30:02] my wife
Ben Hong: [00:30:06] all the time.
Phil Hawksworth: [00:30:08] I love
Jason Lengstorf: [00:30:09] it. I love it because. As she throws that insult spilled grows,
I would live in space. Why now? I feel like you're not going to get on your death bed and regret that.
Phil Hawksworth: [00:30:24] Is it okay to any of you that maybe it's
Divya Tagtachian: [00:30:26] all of your
Phil Hawksworth: [00:30:27] wifi, a problem. And mine is fine.
Tara Z. Manicsic: [00:30:35] Another remotely interesting theme
Divya Tagtachian: [00:30:37] is, feel sense that it's us, not his way.
Phil Hawksworth: [00:30:44] I'm sorry. I've got to, I live in England. So we have the victim. We have Victorian wifi that was built by the Victorians.
Tara Z. Manicsic: [00:30:52] It runs on T
Phil Hawksworth: [00:30:54] I definitely would, by the way, I definitely to go. I don't like the idea of the journey there and back, because that might be a little bit more than a month, but the
Tara Z. Manicsic: [00:31:03] month
Phil Hawksworth: [00:31:05] the journey, but no a month there.
Tara Z. Manicsic: [00:31:09] Okay. So follow up then. Would you live on Mars for a month with this team? Yes, Cassidy left again. Cassie was just
Phil Hawksworth: [00:31:19] so done with us.
I would, it would have to be February. I have to be the shortest one.
Tara Z. Manicsic: [00:31:38] I totally would. If Jason had like unlimited cooking material, I think I would. Yeah.
Cassidy Williams: [00:31:45] Yeah. Cause I, my hesitation with saying yes to any of this or the modern conveniences that have made me lazy, I really just, I want good food. I want to be able to play video games. I don't know if the ping would be really good on Mars.
Jason Lengstorf: [00:32:01] Yeah. This is actually a really good point. What's the kitchen setup? what kind of oven do we have?
Phil Hawksworth: [00:32:06] Yeah.
Tara Z. Manicsic: [00:32:08] Okay, okay. So full scenario is like Mars, like from the movie. but it's America's test kitchen and we have, every source of. I said every source of animal byproducts. That's just weird.
Phil Hawksworth: [00:32:26] It sounds to me like what you're describing earth.
Cassidy Williams: [00:32:30] Yeah. I'm gonna say no, I might be an odd one out, but I'm
Phil Hawksworth: [00:32:34] saying this interaction.
Jason Lengstorf: [00:32:36] No, in general or just no, not with the team.
Cassidy Williams: [00:32:40] With this team, it's a, maybe depending on the resources that we have, but I would not go just by myself. I'd rather
Tara Z. Manicsic: [00:32:48] have
Cassidy Williams: [00:32:49] gravity
Tara Z. Manicsic: [00:32:50] that I say yes or no question
Phil Hawksworth: [00:32:54] sensitive.
Cassidy is tentative.
Jason Lengstorf: [00:32:58] I don't know. Now that we'll put down Cassidy as question marks. All right, Joel, I think we're going to call that done because we could debate about outer space all day. so next time, make sure you tune in where we're going to have a really nice discussion about the JAMstack ecosystem with a special guest.
more details on that soon. So make sure you Mark your calendars. Come hang out with us until then. I am Jason. Sparkly meteor, shower, Lang store.
Ben Hong: [00:33:36] I am Ben the bean black hole.
Phil Hawksworth: [00:33:44] I am Phil. Dark side of the moon. Hawksworth
Sarah Drasner: [00:33:48] I'm Sarah diggity, dark matter.
Phil Hawksworth: [00:33:57] Happy Saturdays. Look how happy she is with dignity.
Tara Z. Manicsic: [00:34:04] And I am Tara mama Milky way. And the next
Divya Tagtachian: [00:34:06] thing
Phil Hawksworth: [00:34:14] we
Tara Z. Manicsic: [00:34:14] should be sleep deprived more often. And that's how I showed you. Oh no.
Phil Hawksworth: [00:34:20] Cause he's going to do one Cassidy. He's going to do, when she came back specifically,
Jason Lengstorf: [00:34:24] you need a name.
Cassidy Williams: [00:34:25] I'm Cassidy, Matt Damon Williams.
Phil Hawksworth: [00:34:32] It was worth it.
Divya Tagtachian: [00:34:36] I
Sarah Drasner: [00:34:36] don't know if people can tell that we're
Divya Tagtachian: [00:34:38] completely delirious.
Tara Z. Manicsic: [00:34:45] Thank you all for joining us remotely and
Phil Hawksworth: [00:34:51] is waving.