Ever feel overwhelmed by the crazy number of new frameworks? We’ve got a solution for you. In this episode, the JavaScript jamboree sits down with Anthony Campolo, a software developer who’s spreading the word about a powerful yet flexible new tool--Slinkity. They talk about how Slinkity answers the age-old question and simplifies everything, how to prevent the nasty “uncanny valley” from rearing its head during loading, and why eBay and Slinkity are on the same page about “the basics”.

“I think Slinkity is an interesting new way to build websites in a framework-agnostic way. It’s like using little sprinkles of JavaScript!”

In This Episode:

If you’re feeling overwhelmed by all these new frameworks, Anthony explains how Slinkity simplifies it all
 How to effectively use Slinkity’s bundling capabilities with Vite and other tools
 What tools and techniques you need to prevent an “uncanny valley” from popping up every time you sit down to program
 Remember eBay? Anthony explains how Slinkity and eBay are making programmers want to “go back to the basics”.

Sponsors:

Roundtable Picks:

AJ’s
 M1 Max MacBook Pro
Wheel of Time TV show on AmazonPrime

Anthony’s
 Discord servers: LunchDev, FrontEnd.Horse

Charles’s
 Marvel Legendary board and card game
Auth0 authentication and authorization tool
Jon Rich and Mike Rowe song “Santa Has a Dirty Job”

Steve’s
 Venom 2 movie
https://twitter.com/Dadsaysjokes

Learn more about Slinkity:
 Home Page
Twitter
GitHub

Connect with Anthony:
 Twitter
GitHub
Blog

Special Guest: Anthony Campolo.

Sponsored By:

CHARLES MAX_WOOD: Hey everybody and welcome back to another episode of JavaScript Jabber. This week on our panel, we have Steve Edwards. 

STEVE_EDWARDS: Hello from a hold in rainy Portland. 

CHARLES MAX_WOOD: AJ O'Neill. 

AJ_O’NEAL: Yo, yo, yo. Coming at you live from Pleasant Grove. 

CHARLES MAX_WOOD: I'm Charles Maxwood from Top End Devs. And this week we have a special guest and that is Anthony Campolo. Anthony, do you want to introduce yourself real quick? Let us know who you are and why you're famous.

ANTHONY_CAMPOLO: Hello, hello, I'm coming from little overcast Pleasanton, California. Very happy to be back. This will be my second time on the show. I am a web developer, a developer advocate for a company called StepZen. And I actually didn't have the job at all. Last time I was talking to you all, I was still kind of finding my way in this whole web dev world and originally came up through this project Redwood JS, which is a full stack react framework. But that's not what I'm going to be talking about at all today. I'll be here to talk about slinkity, which is a project that combines 11 D and beat to bring dynamic client side interactions to static 11 D sites. So really excited to talk about this. It's if you've heard of Astro at all, somewhat of the context to understand what is going on here. But it's just kind of part of this new breed of static side generators. And it's very influenced by the island's architecture. And you can get into all these terms and what they mean. But really happy to be here. I'm such a huge fan of the show. Been listening to it for so long. So glad to get to talk about this stuff with you all. 

 

Tired of explaining your absurdly high big tech cloud bills to your boss? Let me tell you about this cloud infrastructure company talk of the tech world. The name is VULTR, that's V-U-L-T-R. They pack high performance cloud compute at a price that AWS and the other big clouds can't compete with. So reap the benefits of advanced networking features, managed Kubernetes, developer friendly API and 20 global locations, offering elastically scalable computing power. Over a million users have deployed on Volter in 60 seconds or less, across 12 pre-selected operating systems with their own ISO. With pricing starting as low as $2.50 per month for Volta Cloud Compute, they offer plans for developers and businesses of all sizes. You can try VULTR for free today by visiting Volta.com slash Jabber, and you'll receive a $100 credit. That's VULTR.com slash Jabber. 

 

CHARLES MAX_WOOD: Yeah, absolutely. It's funny because, what was it? Two weeks ago, we recorded an episode on RubyRogues about VEET Ruby which is a gem that brings V into Ruby apps. And we also talked about, just speaking of this kind of hybrid world where you have kind of the static site generators slash content system slash whatever you wanna call it, right, like 11D, and then bringing modern build processes and stuff into it. We did an episode on Bridgetown, also on RubyRogues, and it's the same idea. It took Jekyll, which was one of the first static site generators that a lot of these other ones are based on that was written in Ruby, but had kind of been abandoned and they brought Webpack into it and stuff like that. And so, like you said, we're seeing this as a trend, right? And then I think people are much more familiar with some of like the stuff going on with like Gatsby and Next and some of these others that, again, they pull the front end in as part of the, as a first class citizen on these otherwise static pages.

ANTHONY_CAMPOLO: 11D was created essentially to be like Jekyll, but with Node and JavaScript. So Jekyll is very famous, that I excited January created by Tom Pressman Warner, and it is written in Ruby. And so if you're Ruby dev, that's really great. But for JavaScript devs, they would kind of have to learn this extra language to get it to work the way they want it to, and to really customize it and write plugins and things like that. And so 11D is what if we took that same idea and did it in JavaScript? So it makes it a little easier for people who want to customize it more and want to dig into the, like the build process and get it to do what they want. And it's originally- 

AJ_O’NEAL: And be fast. 

ANTHONY_CAMPOLO: And be fast, yeah. 

AJ_O’NEAL: I mean, that's a huge night and day difference between running a static site builder in Ruby versus running in Node. 

ANTHONY_CAMPOLO: Yeah, and well, that's interesting because even further down that line, you would have tools like Hugo which would give you go. And so that would be even faster. And this is where things like V are using es build, which is written in go. So we're also seeing this like big trend of writing JavaScript build tools and go or Russ, like with SWC. So this is a big trend to even further speed things up by getting more like systems level languages in. But the thing with 11 D is that it has a lot of different template languages that you could use. Like you use NunJux and Liquid and Pug and these like kind of more like server rendered type template languages. And for someone like me, I kind of came up through more of like the React world. Like when I went to my boot camp, I learned a lot of React. And that was kind of like the main thing we did. And so for me, writing like JSX is really natural. And it's kind of how I think of templating to a certain extent. And so with 11D, you can't use any of these types of tools. You can't really use React or Vue or Spelt with it. And some people who came up with these tools, they want to use those with their 11D sites. And it's not really a good way to do that. And so this is where Slinkity comes in. Slinkity is created by Ben Holmes who is a friend of mine that we got to know each other just through like developer discords. We both hang out in the front-end horse discord and the react, now the lunch dev discord, previously the react podcast discord. And he was building this tool called Slinkity. And the name is specifically so that he could sell Slinkies as merch as the one and only. We got his name. 

CHARLES MAX_WOOD: That's awesome. 

ANTHONY_CAMPOLO: Yeah, right. And so he was a big fan of 11D and wanted to expand a lemony out into more of this like Astro type tool. So if people have ever heard of Astro, it's created by Fred Shot. And it's like a multi framework tool that lets you write either react for view or spelt. And then the build tool essentially handles how to turn that into the HTML. So it's getting to a point now where the tooling is trying to accommodate essentially any type of workflow that a developer could want. And it's not super simple to do, but once you kind of get it all set up, it's a really nice workflow because with some like beat, it was originally created by Avenue for View, but people in the community kept expanding it out to do more things. So eventually got to the point where it works just as well with JSX as with Vue. And then now it works just as well with Svelte as it does with Vue. So once you figure out the kind of build process, you get to have the best of all worlds and write in whatever tool you want. So Ben saw what Asher was doing and he'd already been building slinkity actually at the time, and so he was talking about this a lot and kind of putting it out into the world and he's actually talking about and promoting it before it was actually like a thing that existed and people were getting really excited about it. And we're like, Hey, cool, I want to use slinkity. And I remember going to like install it. And I was like, Ben, like this, there is no slinky package. Like how do you use slinkity? And he's like, Oh, slinkity is like, it's, it doesn't actually exist yet. So he eventually put something out in August. So it's very new tool. And this is though, it's really important to, I think, emphasize when going out and kind of promoting these new tools that this is like very much a like alpha, not even beta probably type tool where we are kind of experimenting with what can be done with these different tools. So I wouldn't recommend going out and rewriting your entire production app in slinkity quite yet, but I do think it's an interesting new way to think about how to build websites in a more framework agnostic way, because you are able to start with like a static HTML templating kind of thing, and then bring in the other ones as you kind of feel the need for it. So this is where the islands architecture comes into play. This is a term that Jason Miller has been a big proponent of. He wrote a famous blog post about this, and islands architecture is having little islands of interactivity, which I think you all will probably have thought of as like sprinkles of JavaScript. This is the term that I think is- 

CHARLES MAX_WOOD: Yeah!

ANTHONY_CAMPOLO: thing I think of like no sprinkles of JavaScript is fairly similar idea I think to the to the islands of interactivity, which is only bring in JavaScript when you actually need it like, don't just ship an entire JavaScript bundle with this like, you know, huge like a renderer and like a runtime essentially unless you really need it unless you actually need the interactivity and you need the power that these tools give you. So he Ben likes to use this metaphor of like food metaphor. You have like your salads and you have your, your beefy meat like burgers. And so the HTML is like the light salad and that's kind of like your base. And then you don't want to have just like all meat all the time. You want to just have like a little bit. So you want to bring in the heavy meat stuff when you just need it. And so that's kind of the, the idea and the like the philosophy of the framework. 

STEVE_EDWARDS: So you've mentioned Astro a few times and I'm trying to understand the difference between Slinkity and Astro and what's the need. Is it just that Slinkity is built specifically for 11D versus, versus Astro or what's the, I guess what's the need for Slinkity? Let's put it that way. 

ANTHONY_CAMPOLO: Yeah. I think that's probably the best way to put it is that 11D is already a fairly well known stable tool. It's not quite at 1.0 yet. It's on 1.0 beta right now, but it's been out for close to three years now. So it is actually very stable and it has a fairly large community behind it. And just people are like really big fans of 11D and have already built up a lot of like templates and just workflows around it. So the idea is that you can leverage all this work that's already been done with 11 D versus Astro. They built their own compiler. They have their own build process and they had to figure out a lot of the stuff from the ground up that 11 D already had. And Astro eventually had to go through a huge rewrite because they were using snowpack but then switched to VEAT, which is really interesting because the Astro was created by the same people who created snowpack. So they eventually decided that VEAT was going to give them kind of more of the dev experience that they, they wanted. So it's a question of what is like the base you're building on? Like what are the different pieces you need to actually make a framework like this function in the, in the first place is need to be able to build the HTML and you need to be able to bundle it and you need to be able to do all of that. So if we take what 11 E already has, we can leverage a lot of that work. And then you just have to figure out how do you basically bolt and beat on to handle the interactivity and all of that. So that's kind of the main difference. And whether one will appeal to you more than the other will probably depend on have you already used 11D or you already kind of bought into 11D or you cool learning everything just a whole new tool from scratch. So that's kind of the biggest difference between the two. I think eventually they're going to reach fairly close parity. Right now I think Slinky has a bit of a head start because it's building on 11D. 

CHARLES MAX_WOOD: Yeah, devchat.tv was on 11D for a year or two. And yeah, I mean, it felt like I was always tweaking it to make it work. The other reason I moved off of it was because I had non-technical people writing my show notes and stuff. And so I had to go find a third party CRM and that never quite hand out the way I wanted. And so anyway, eventually I moved it back to WordPress and then WordPress turned into a headache. And so now I'm actually using a software as a service to host all the shows. And there are trade-offs all the way along. That's the thing that's so interesting to me about all these different stacks and approaches is that you have the different trade-offs for different things. I also happen to be a fan of the sprinkles of JavaScript as DHH puts it. And I've been using stimulus, which is another kind of lightweight framework. And it's nice because I just, I stick a controller on where I want it tell it what the interactions are and it just kind of does the right thing. But then I can do the rest of it off the server, which is kind of the power you get behind 11. So it's a really interesting approach that I think a lot of people will pick up depending on what their needs are. 

ANTHONY_CAMPOLO: Yeah, definitely. And I think that it's partly like, what kind of site do you need to build? So this is going to really appeal, I think to more developers who don't necessarily need to have content editing people as well, but we will be able to also hook this into a third party CMS if you want to, because you can do, you can put basically those into the build and there's lots of integrations already with 11D. So if you want to set it up in a way where you're not just writing markdown files, there are lots of great tools that integrate with it already. So there's also another thing you get is there's going to be plugins that are already built in for 11D, because other people have figured out how to plug in things like Sanity or Prismic or any of these kind of CMSs. So if you want to have a build process that takes in content from a CMS, and then you have an editor for that CMS for the people who just want to edit content, you can also do that as well. So that's something that's available to you. 

CHARLES MAX_WOOD: Makes sense. So Slinkity, does it dictate then a front-end framework or is it just VEET and whatever you want to use?

ANTHONY_CAMPOLO: Yeah, so we're going to be going down a similar path that Astro did where they have renderer plugins. So you are going to specify whether you want to use react or view or spelt. So right now, the react not angular. Yeah, that's that's funny, actually. So someone actually did figure out angular for Astro by like kind of hacking around brand, Brandon Roberts. And I chatted with him. 

CHARLES MAX_WOOD: Brandon's awesome.

ANTHONY_CAMPOLO: I get this. You know, I get this working with Slinkadini is like, yeah, maybe. So if there is enough people who asked for it, we may actually have an angular one at one point. But the, the reactive one was the first one that was built out because it's, you know, the most popular, most people are going to ask for react first. And then we're currently working on the view and the spelt renderers. Ben spoke at spelt summit just a couple of weeks ago and spelt I think especially is going to be an interesting one because it's already set up in a way where you have like a compiler that's just building mostly like HTML for you anyway. So it's they had already bought into this kind of idea of we want to have a nice syntax that can be compiled away into something that's going to be like native to the browser. So that's something that is still kind of in the process. I know Ben has been talking about the renderer plugins for going on like a month or two now. So those should be coming out fairly soon by the time people listen to this podcast. Hopefully have those going on. And then there's also other frameworks that are kind of more optimized for like you. Like there's one called Isles. So same idea, Islands of Interactivity. And that one kind of started as like a view first one. So everyone wants this kind of like setup. And so different people want different front end frameworks. And so it partly just depends on the people building the frameworks, which ones they're kind of more bought into. And then those ones will usually kind of get built out first. And then there's a question of can you leverage different frameworks because they have the same syntax like solid also uses JSX. So once you get the JSX kind of figured out that you can kind of get both React and Solid for free. So there's different frameworks and there's different languages. So it's kind of a couple of different levels here. But for the most part, you can almost always expect to be able to use React with any of these, unless they specifically want to use Preact. So then you also have Preact versus React, because it's a similar syntax and it's slightly more lightweight. And so this is why, for people who are using these tools, we're kind of getting back into like some of the JavaScript fatigue type stuff, I think, with these tools in this conversation, because like there's so many new frameworks now, people are just like, oh my god, I thought we just like settled on React and Vue and Spel, and like now we have all these new things. And so figuring out how to get these all to work is really like the framework author's job. And it should just work for the user to basically say, I want to write with this tool specifically. So I'm just going to basically drop in a configuration script and then just write the thing and should work. So the figuring out how to get that to work is like really complicated and requires really digging into like low level implementations of these different tools. But for the end user of these frameworks, they shouldn't really have to think about any of that. Makes sense. 

CHARLES MAX_WOOD: I guess the other question that I have about this and about systems like this is, and this was another issue that I had with 11D, right? Was I'd want to pull in like some other JavaScript library, you know, that wasn't necessarily like a reactor view or Angular Svelte or whatever, a specific library and do things with it. I always had to figure out how to put it in my assets and then tell the browser to go grab it out of my static assets and all that stuff because I didn't have a solid build process for the JavaScript on the front end. And it sounds like Vite provides that. So you just do the rest of that stuff the way you would normally do it with Vite. 

ANTHONY_CAMPOLO: Yeah, exactly. And this is why building on a tool like VEAT is so useful. And a lot of the challenges that would come with bringing in other tools also comes with like figuring out whether it's like ESM or common JS and that whole kind of world. And so VEAT is built on this idea that we're eventually going to have just everything in ESM. And so you don't have to worry so much about how to like finagle the require versus import syntax. And so we're still not quite there yet. We're getting very close in the sense that the vast majority of tools now will have an ESM syntax already ready to go. And so if that's already been kind of figured out, then you can just import it in and it's going to work just fine. And then the handles all the other stuff, because with the, you have just like an index.html is kind of like the entry point into your project. So you're not doing the same thing you would with like webpack where you'd have like a JavaScript entry file and then that's building it and then injecting it into an HTML file. Instead, you actually have a main and just HTML file, which is the entry point. And then you can load in script tags or you can load in style sheets. And as long as that part of the build works, then you're always going to be set. So Vite is a really incredible tool. And it's been awesome because so many different projects are being built on it. Now, there was a just recently, one of the main maintainers of Vite wrote a blog post where he just showed like all the different tools that are using it now. And so by having all these different projects, use it and kind of test it out and they all have their own weird specific dependencies. They want to bring in. It's becoming the first tool, I think, since web pack that is capturing enough of the mind share to hopefully work for essentially any use case you would want. And then the one last kind of interesting part about VEET is that it's using ES build, which is this kind of new school build tool that's built with. go, but it's not actually bundling with ES build. Like yes, build is doing like file transformations, basically turn like a JSX into a shamo. But then if you want to actually bundle for production, it's using a rollup. And so it's using an older bundler that has already been kind of battle tested. So it's not really like redoing this whole workflow for production builds. It's actually just using rollup. And saying, okay, we already have a way to do our production build. So it's, it's more so for like development is really where it's useful because with yes, build and with VEET. It's just super, super fast. And it's about getting like crazy fast, hot module replacement and getting it to where you essentially can just like save and then it instantly refreshes and is up on your screen. And it's only things that it's hard to appreciate until you've like actually sat down and used it because the feedback loop you can get once you have cut all that bundling time out is just so nice. And it makes such a big difference for when you want to just do like your testing stuff out, you want to make a change, save it and see the change. And you can get that to happen essentially instantly. Then you're in a much better place than you are with some of these other tools where there's just like constant lag of when you like save after way for webpacked, then bundle everything and then refresh. And even if it's just like a second, like that time adds up over time. So it's the really, really fast feedback loop that you can get with these tools. That's really the most useful part. And then when it comes to like bundling it and building it for production, they're bringing in an older tool that's already been battle tested and there's all these plugins and stuff for it. So that's kind of the real value that I see with feed is for when you're actually in development and you want to get this kind of like next gen super fast build experience. 

CHARLES MAX_WOOD: So one other thing that I'm kind of wondering about is when I was using 11 D I was hosting it on Netlify and it pretty much detected, Hey, this is 11 D. So I'm just going to run the 11 D command, right. And just build and it worked great, right? That, that part of it was easy. But now that you've kind of added this bundling component to the front end with VEET, is it, I mean, do net netlify and oh, what's the other one? The other big one. 

ANTHONY_CAMPOLO: Versel. 

CHARLES MAX_WOOD: Versel. Right. Do they detect, oh, this is a slinkity, not 11y. Or do you have to go in, because you could go in and say, no, run this command instead of that command to build. Do you just have to go in and modify that in order to deploy it? 

ANTHONY_CAMPOLO: Yeah. So for the deploy step, it's almost identical, because for any of this stuff, it's you just have a build command and you have a publish directory. So for Netlify the way you can specify this is with a Netlify.toml file. So we have like just a, some docs that shows like, Hey, if you want to build this on Netlify, create Netlify.toml account and copy paste this little snippet. And it'll give you the build command and the publish directory. And then you push that up and then Netlify will know exactly what to do with that. And it's same with Versel. And then one other one that I've tested out with is CloudFlare pages which is Cloudflare's kind of like jam stack competitor tool, which is basically exactly like Netlify and Versel. So yeah, for any of those, it's gonna be just as simple and they don't have like a slinkety preset like button yet, but that's essentially just cause we haven't like opened a PR yet into their repos to get those in. But if you just take the build and publish commands just kind of as is and just plug those in, then it's going to build and it's going to work just fine. So anywhere that you can host like static jam stack kind of sites, it's going to work great for that. And this is one of the things that just like we're we're very big fans of the jam stack. I host a jam stack podcast, F.S. Jam. And so the whole kind of like everyone agreeing on how to do web dev like this, because you just have like a build command. And then if you want to bring in like serverless functions, that's something that's 11 D is just recently starting to add. So there's now an 11 D serverless plugin, which lets you integrate with Netlify functions, which are basically just lambdas. So there's also kind of more like full stacky type things that are starting to be added to 11 D. And this is going back to what do we get from 11 D that we don't get from ash or that'd be another good example of something that's because it's built into 11D core, we already have a nice kind of like serverless function abstraction as well. And that's going to be useful because I'm starting to build out some like full stacks linkity examples where we're doing like GraphQL calls into like a GraphQL API because I also work for a GraphQL API company. So I've been kind of experimenting a bit with that. And if you're doing that, then you may need to authenticate when you hit that API gateway. And so to do that, you have then like API keys and you can't just put those in your client and then deploy that to Netlify. Cause then it's like, 

CHARLES MAX_WOOD: what? 

ANTHONY_CAMPOLO: That's a, that's an issue. You didn't know. 

CHARLES MAX_WOOD: It's a bad idea. 

ANTHONY_CAMPOLO: Yeah. Oh yeah. No, yeah, Chuck, you, you should go, go check some of your projects. It sounds like, but yeah. So that's a, that's definitely a thing that if you need to worry about like key management and that sort of stuff, you now have 11D serverless where you can place your keys. So I'm very big into like taking these kind of jam stack ideas and like expand them out and like more like full stack stuff. So like full stacks, lengthy projects is also something you can do. It's not just like a static front end for like a blog or something like that. If you want to build like a whole dashboard, because if you're adding interactivity, it's like, well, the interactivity needs to go somewhere like if you're if you're putting in interactivity, it's probably because you have a user who's doing something and whatever that user is doing probably needs to be persisted somewhere. So there's kind of like a larger vision here of not only adding interactivity, but also giving you an ability to have like a whole back end that's set up for you as well. And so there's lots of different ways you can do that in terms of like, there's like super base now, which is really nice Postgres hosting service or like railway. So there's also now like back end tools that are as built out as like a Netlify or a Versel. And so, um, that's where I'm kind of adding a lot of stuff to this project is I'm figuring out kind of how to stitch like the backend into the Slinky project as well, while Ben is figuring out like the additional like rendering plugins and stuff like that. 

CHARLES MAX_WOOD: That's cool. 

ANTHONY_CAMPOLO: Yeah. I'm curious. Have any of you guys tried out like Astro or any of these kind of like Islands of Interactivity type things or have you heard about it at all? 

STEVE_EDWARDS: Yeah, I've heard about it. We've talked about it. I think on Views on View, we've talked about it and the different, you know, the Islands whole approach. I haven't had a chance to sit down and play with it yet, but I'm too busy playing with inertia myself. But yeah, I definitely know about it. It certainly seems to be gaining traction because I hear about it more and more. 

ANTHONY_CAMPOLO: Yeah, you had the Isles creator on Views on View. I've been wanting to to reach out to him as well to get him on my podcast. Cause it's cool to see similar ideas play out across different frameworks. And something that I'm always a big fan of is seeing how people approach a similar problem, but from like slightly different areas. And so the fact that there's people in view world and react world who are both like, yeah, this seems like a thing that we want. It's like, okay, well, like what is the the base kind of like layer that is interesting to everyone. So I'm always looking at different things that are doing similar things, trying to abstract out like what is actually the thing that makes these all similar. 

CHARLES MAX_WOOD: My base layer is German chocolate. 

STEVE_EDWARDS: It's just I thought about the meat as the base and not the salad. I thought the salad is more on top, the light fluffy stuff. But I guess it still works. 

CHARLES MAX_WOOD: Yeah. Oh, yeah. Go into that analogy. Yeah, I'll just go for the meat every time anyway. 

AJ_O’NEAL: But yeah, it's not familiar with the island stuff. I've never heard of it until today. 

STEVE_EDWARDS: Yeah. I forgot what talks with Maximo. He was, that was a good interview. It was fun. 

ANTHONY_CAMPOLO: Yeah. So I can, I can talk about that a little bit more. 

 

Hey folks, this is Charles Maxwood from Top End Devs. And lately I've been working on actually building out Top End Devs. If you're interested, you can go to topendevs.com slash podcast, and you can actually hear a little bit more about my story about why I'm doing what I'm doing with Top End Devs, why I changed it from a devchat.tv to Top End Devs, but what I really want to get into is that I have decided that I'm going to build the platform that I always wished I had with devchat.tv and I renamed it to Top End Devs because I want to give you the resources that are going to help you to build the career that you want, right? So whether you want to be an influencer in tech, whether you want to go and just max out your salary and then go live a lifestyle with your family, your friends, or just traveling the world or whatever, I want to give you the resources that are going to help you do that. We're going to have career and leadership resources in there. And we're going to be giving you content on a regular basis to help you level up and max out your career. So go check it out at topendevs.com. If you sign up before my birthday, that's December 14th. If you sign up before my birthday, you can get 50% off the lifetime of your subscription. Once again, that's topendevs.com. 

 

ANTHONY_CAMPOLO: This is something that Jason Beller was there is a really big proponent of, and he wrote this blog post in August of 2020. And this came from a lot of work that he was doing at Google in terms of different rendering modes. So they wrote this very long blog post that compared server rendering to static SSR to SSR with hydration and then client side rendering with pre rendering and then full client side rendering. And they have this like long like chart that compares them all to each other. And it's about how do you basically split the difference between the different types of performance metrics. And it's you know, Dan on right now, cause Dan would have been for this cause it's about like, how do you balance time to first bite versus time to interactivity, I think is what it is. So there's the moment when you first see the content and then the moment when you can interact with the content. And there's this idea that there's gonna be like an uncanny valley between the two because there'll be a brief period of time where you'd be able to see the content because they rendered like a skeleton screen for you and sent that to you but the JavaScript hasn't kicked in yet. So you're still waiting for the JavaScript to kick in before you can actually do anything on the page. And so that's the point in time where you may see the page, but then you try and click something and nothing happens. And so there's this like uncanny valley and so Addy Osmani is the one who wrote a blog post about this and I can share links to all this stuff. I wrote a blog post kind of talking about the whole history of this, where it's called, What is Partial Hydration? Why is everyone talking about it? So I felt like going for a little click bait with that title, but it's basically, how do you balance all these different competing ideas of what should you make most? Should you aim for giving someone content that they can look at very, very quickly, or should you aim to give them interactivity very, very quickly? So with the islands architecture and with partial hydration, it's trying to really limit the JavaScript that you need to send to make it interactive. It's like absolute smallest amount so that you can send them the content and then they can see the content and then the JavaScript can just load in like milliseconds and then you won't have this uncanny valley. And so this is why you'll also hear preact come up a lot in this conversation being from Jason Miller, because Preact is an almost identical API to React, but it's a lot lighter weight and requires a much smaller bundle. So you can render the HTML out and then send that. And then for the JavaScript to kick in with Preact will be a much smaller amount of time than with React, because React is kind of heavy and requires like building a lot of the, there's like, yeah, bring a React, you know, bring a React DOM. And so this is why people want to figure out a way to kind of just like shave all this down to the absolute most necessary JavaScript you need to make something happen. And so that's why they use the term islands because they're talking about an island of interactivity. So if you have JavaScript in a certain part of the page, maybe it's towards like the bottom because you have a button that is going to like be for contact or something like that. So you can set it up. So you wouldn't even load that until you start scrolling down to it. So if it's not shown on the page in the first place, then you wouldn't need to build it at all. So you need a lot of optimizations and you need a lot of, you need your build tools, essentially to have a lot of like knowledge of your project and how it works. And so this is where bringing in tools like V enables some of this more complex sort of stuff, because you can start to basically tell your specific components where and when and how they should render. So this is one of the things that we're really taking a lot of influence from, from Astro, which is with Astro, they have these different client directives. So they have client load, which will hydrate the component on the page load. Or they have client idle, which will hydrate the component as soon as the main thread is free. Or they'll have client visible, which will hydrate the component as soon as the element enters the viewport. And then there's a media query one, so as soon as the browser matches, you give it media query. And then there's client only, which will hydrate at page load, but it'll be skipped at build time. These are the types of things that we're adding into Slinky now. These are the same things you're going to see in projects like isle. And the, the first one actually that I know of that was doing all of this was this framework called Marco. And so almost no one has really heard of Marco, even though it's been around since like 2014, and this was a framework that was created by eBay and they pioneered a lot of these kind of like partial hydration tools. And so now a lot of people are starting to like go back and see like, okay, actually this there has been like years and years and years of work on this. It just hasn't really been a big part of the conversation. And then now that people realize that like we're shipping way too much JavaScript. And like a lot of people have kind of come to realize that we're using react way too much and we're using it when we don't really need it. And it's like causing this huge load on the device. And so by being a little more intelligent about when we're actually using JavaScript and how we're using it, we can get to a point where the developers can still write JavaScript and do all the fancy JavaScript things they want to do, but without having a detrimental effect on the actual user experience. 

CHARLES MAX_WOOD: One other thing just keep in mind is that, and this I think is part of the the appeal of something like Slinkity is, at least for folks that I talk to in the Ruby community and in other communities where they have a robust backend system that renders HTML, is that they can get, they can do a lot of the things that they need to do just with the backend. And so this allows them to drop those pieces in only where they want them, right? And we had a debate actually at my previous employer because a lot of our applications were written with hot wired stimulus. And then there were certain aspects of it that had been built in React. And so we were having a discussion over whether to unify one way or the other. And it was interesting because the conversation kept coming back to, well, React does all these things and HotWired Stimulus does not. And the argument in favor of HotWired Stimulus was, yeah, HotWired and Stimulus don't do that. They just give you these little pockets of JavaScript and Rails does the thing that you're telling us that React, you want React to do. And in a lot of cases, not every case, but in most cases, the backend rendering was faster and less load in the browser than react.

ANTHONY_CAMPOLO: Yeah, yeah, that definitely sounds about right because we, you know, have had tools that have allowed us to do all the things we've done with react before react existed. So it makes sense. It's like, well, if you don't really need react to do anything, it's just that people like using react and this is like me, especially like, you know, I learned how to do web dev with React. And this is something that, you know, AJ, you're always talking about this, is you're not the biggest fan of React. And I think all the criticisms of React, they're totally valid. And it's partly because the reason why people use it so much is just because it's just the way they know how to do things. And so for people who learned how to do things before the React days they don't see the need for it. Cause like, well, we can't really do all this stuff without it. Whereas for someone like me, I'm like, okay, well yeah, but then I'm have to, you have to learn a new way to do these things. Cause I know a way to do it and it works, but there's maybe issues with that because you're, you're trying to fit a square peg into a round hole sometimes by shoving react into every single problem. So we are trying to give you a nice slinky shaped hole to shove that react into.

CHARLES MAX_WOOD: Yeah. Well, the other thing is, is that as I've talked to people and as I've used different frameworks, I mean, sometimes it's really nice to just do it. The re you know, it's like, this is the react way. Okay. I don't have to think about it. I can just write it right now. Technically there are some trade-offs, but just for me to be able to quickly write what I'm going to write. Yeah. A lot of times it's just, it's convenient because the API, the methodology, all of that is, is well understood. And if you do it the way that they tell you to do it, it just kind of blows. 

STEVE_EDWARDS: I guess you could say that using all that react is a severe overreaction. 

CHARLES MAX_WOOD: Where's that sound effect? 

ANTHONY_CAMPOLO: What did you say? 

STEVE_EDWARDS: There it is. I hit the head, you hit the button twice. Little delay there. Oh, no, I was, 

ANTHONY_CAMPOLO: I haven't heard that yet. 

STEVE_EDWARDS: I was also going to ask you, so you were talking about the framework that eBay has called Marco. Did I hear that right? Yeah. Did they ever have a polo? Thank you. 

CHARLES MAX_WOOD: Or a camp polo. Anyway.

ANTHONY_CAMPOLO: What a great addition to the show. Thank God someone gave Steve a soundboard. 

STEVE_EDWARDS: Oh, I love it. As soon as I discovered that Riverside had sound effects like that, I was loving life. 

CHARLES MAX_WOOD: I've overused it on a few shows too, anyway. 

STEVE_EDWARDS: What do you mean too? I don't overuse it, I use it perfectly. I guess that's up for debate, oh well. 

CHARLES MAX_WOOD: I left my camera on so you could see the doubtful look on my face. Anyway, so is there anything else that we need to know about this? One thing that I like about some of these approaches is that in some cases it's somewhat beginner approachable, right? If I'm trying to figure out JavaScript or figure out React or figure out something else, right? I can put something together with this and just kind of have a really simple way of getting data to the front end and learning on those systems. Have you seen anybody use it that way? 

ANTHONY_CAMPOLO: Yeah, this is actually one of the things that Ben has talked about. One of his big goals for the project is for it to be useful as a learning tool and for people who don't have a ton of web dev experience because if you want, you can just start writing basic HTML and CSS and it can kind of grow with you as you want to add more complex frameworks and tools on top. So if you just start with your basic HTML and start building out a site, you wouldn't even necessarily notice a difference to that or that it even does all this react stuff and it would function just the way you'd expect a regular website to function. But then once you want to start bringing in tools like React, then you can do that. And it's already set up for you to do that. So you don't have to then figure out, okay, well, I've built this kind of like HTML site that works, but then I'd figure out, okay, how do I install Webpack? And how do I configure Webpack? And how do I do all that? It will just be there already. So it's like, okay, well, all you have to do is just start writing React, and you don't need to do any configuration whatsoever. And another use case he's talked about is like the kind of portfolio website use case where you're going to have mostly content, but you may want to have little interactivity for like a contact form or something like that, or you want to do like some, you know, validation on that. Or if you want to just kind of, you know, show off that you actually know how to do more complicated things on your website, because the portfolio is usually like a showcase for your web dev ability. So you can build something that is fairly simple and works the way you'd expect your regular website to work. But then when you want to bring in this more complex kind of use case stuff, it's already there for you and it's already set up. So I think that's definitely a really good way to think about these types of tools is that they give you a lot of power that is kind of under the surface until you really need it. And so you can build a site just the way you would a regular site. And then once you want bring in these kind of newer tools. I was like, all right, I can do that. And I don't need to then get a PhD in webpack to figure out how to do that. 

CHARLES MAX_WOOD: Makes sense. 

ANTHONY_CAMPOLO: So yeah, and I would just recommend if people are interested in this and want to check it out, we have a lot of kind of community resources. So the main site is slinkity.dev and then from there, you can get to the GitHub and all that. We have an awesome Slinkity repo as well that I've been maintaining, and we have a lot of streams that Ben has gone out and done. We have some articles that he's written. And if you're curious about learning more about this stuff, like it's pretty much just me and Ben are really only two people working on this kinda as a continuing basis. But yeah, we're both really, really passionate about it. We think that it's a cool way to expand out into some of these like newer tools that necessarily having to like entirely buy into them. Cause they were saying if you want to just build a regular HTML site, you can do that and then kind of dip your toe in where you want. And then our, we have, have a discord channel that's been like sectioned off for us in the 11 D and discord. So you can check that out as well. And yeah, if this is at all interesting to you, we would love to have contributors. You'd love to have people come in, check it out. We're still working on the view and the spelt support. So if you're someone who's very passionate about view or spelt and want to help kind of push those across the finish line, now would be a good time to kind of add some contributions. 

STEVE_EDWARDS: So are you dogfooding with your site? Are you using Slinkity to build the Slinkity site? 

ANTHONY_CAMPOLO: That's a good question. I think that. The slinky site, I think is being built with 11 D right now, because there's not really any interactivity on it yet. But that's something that we'll probably will end up doing. I know that always a big fan of dog fooding. So I was trying to build as much as I can with like the tools that I'm using. So I had been working on like migrating my own blog over to 11 D. And then once like the kind of came around, I was like, I should actually use this instead. So I'm definitely using it and building some stuff with his wife. Ben will actually show that like I use a slinky way more than he does because he's just kind of like building it. But I definitely think that if you want like anything to really work well, you need to dog food it. So I'm working on building some stuff with it right now and definitely will push to switch the actual site over to it if that's not currently the case. 

CHARLES MAX_WOOD: Very cool. Any other aspects of this we should dive into guys before we go to picks? 

STEVE_EDWARDS: No, like you said, it's pretty early in there. So I'm sure as there will be items coming up as they develop it, they will be interesting to watch. Definitely, you mentioned earlier, Anthony, the JavaScript fatigue. It seems like more and more, you know, I'm just reading article, you're seeing more and more of these similar frameworks that are trying to address the same thing. You know, how to go from the old monoliths of the WordPress type site to the completely decoupled, everything's decoupled. So now we're sort of back trying to build a combination of the two monoliths that are made of multiple pieces. And so, yeah, it's always fascinating for me just to watch the open source world and watch what happens when you just let people, people are free to just scratch their own itch, you know, develop a new mousetrap, whatever euphemism you want to use and to just watch all of the boy, the words are not coming out of my mouth. You know, the new things that, there's a word I'm thinking of, just the new things that come out of people's brains and they throw it out there and it's like, hey, this is cool, yeah, I'll use it, works great. And then things eventually coalesce. JavaScript frameworks, you've got some major ones and some minor ones, but yeah, it's interesting to watch all the available tools that are out there. And particularly, you mentioned earlier how you're trying to make it for the newbie to come in and build something similar, a brochure wear site, which is what a lot of people need probably. I'd be curious to see what types of sites things are used mostly for. It's going to be, hey, I need a bunch of information about my organization, maybe so somebody can log in and a contact form or something like that. This is the kind of stuff that's really great for that, combined with something like Netlify's forms handling, where you just build an HTML form and point it and say, and they handle all the email notifications stuff like that. So I'm rambling, so I'll stop. But anyway, just to say, it's great to see more tools like this coming out. 

ANTHONY_CAMPOLO: Yeah. I think that there's always going to be a million different tools that you can use at any given point in time. And for me, I find it to be a useful learning exercise to see these different frameworks. And that's why I wrote an article that kind of compared a lot of them to each other, but I definitely recognize that it can be like the JavaScript fatigue thing, it can be very frustrating for people coming in, especially as new people. And remember when I was learning web development, like just a couple of years ago, like I was seeing Gatsby and Next and Nuxt and GridSum, and there was all these different tools and I didn't even have the context to really understand like what they were or how they even related to each other. And it took a really long time to wrap my head around them and what they actually did. So I'm very sympathetic of that viewpoint like throwing one more tool into the mix. It's like that XKCD thing is like, all right, it was too many standards. Now we have one more standard. 

STEVE_EDWARDS: Yes, that's a classic one. I know exactly which one you're talking about. 

ANTHONY_CAMPOLO: Yeah, yeah. So it's like, give it a try, see if it works for you. I'm not saying it's like the one true way to do this that everyone should be using Slinky. It's just, we have our own kind of take on this kind of new paradigm and and we think it's a nice way to build. I personally like really enjoy using. I think it's just a really fun tool to use and be able to just like have a stack side generator where you can just like drop in react. It's, it's, it's cool. Like for me, it's, it's really fun. So I would say just, just give it a try and see what you think. And don't worry so much about like the FOMO of like, Oh, I need to be using all these new tools. It's like, well, you know, just like play around with them, like get a, get a simple kind of like example thing, like spun up and, and deploy it should be fairly simple to do that and then you can kind of get a feel of what it's like using this and that you can decide whether you want to actually like heavily buy into using these tools. 

CHARLES MAX_WOOD: Makes sense. 

 

Hi, this is Charles Maxwood from Top End Devs and lately I've been coaching some people on starting some podcasts and in some cases just taking their career to the next level. You know, whether you're a beginner going to intermediate and an intermediate going to advanced, whether you're trying to get noticed in the community or go freelance, I've been helping these folks figure out how to get in front of people, how to build relationships and how to build their careers and max out and just go to the next level. So if you're interested in talking to me and having me help you go to the next level, go to topendevs.com slash coaching. I will give you a one hour free session where we can figure out what you're trying to do, where you're trying to go and figure out what the next steps are. And then from there we can figure out how to get you to the place you want to go. So once again, that's topendevs.com slash coaching. 

 

CHARLES MAX_WOOD: All right, well, I'm going to push us into picks. AJ, do you have some picks for us? 

AJ_O’NEAL: Oh, goodness. I haven't been thinking about it, but off the top of my head, I could pick, I definitely could pick the M1 Max. I'm full send on the 16 inch M1 Max. Loving it. Also, the Wheel of Time has come out on Amazon and there are some major story changes, maybe. 

CHARLES MAX_WOOD: So major story changes. 

AJ_O’NEAL: I have not been able to get into the Wheel of Time, the book, but here's the good news. Now I actually know what the plot of the book is after watching a couple of episodes on Amazon Prime. So now when I go listen to the book, I start listening to the book again, now I actually get what's going on because I had like five hours in and I still don't know what is their quest? What are they trying to do? What is the thing that is going on? All I know is there's some trollecks that are chasing them.  And some mysterious Lady Moraine is really ambiguous about things that she says. And I had no idea. What are we going towards? Is there going to be an end of this book one? Is there, is there some sort of resolution where we'll know that something happened? Or we just listen to some kids complain as they walk through the woods. But now I get it. There's this thing, it's the dragon reborn. It's going to be important. One of these kids has some sort of connection to the dragon reborn. So both the dark ones and the white coats and the ice to die all want to get at these kids. And Moraine got at them first and she's hopefully a good ice to die, not a bad one. That's what it is. So for anybody that's, uh, wanted to, there you go. But a fun fantasy, I don't think it's as good as Brandon Sanderson. Cause the magic system, well, so far is not really well worked out and it's not worked out in the Amazon series at all. They just do yoga and then all of a sudden they have powers. Sorry, it's not Yo gets Tai Chi, but anyway, you know what I'm saying. And you know, that's all I got for this week. 

CHARLES MAX_WOOD: Yeah, I have to chime in just because I've been watching it too, but I've read the books multiple times and I really love the books. I just had to get over all the things they changed. But yeah, so the magic system is much more fleshed out in the book. 

AJ_O’NEAL: Oh, okay, good. Yeah, so far. So far. Yeah, it's not. 

CHARLES MAX_WOOD: Yeah, so and and a lot less Tai Chi. So anyway, Steve, do you have some picks?

STEVE_EDWARDS: Yes, I do. One legitimate pick before I get into the high point of the episode, the dad jokes. So this last weekend, I went and took my son and we saw the new Venom movie, Venom 2, Let There Be Carnage. It's a Marvel movie. And I usually don't get into all the whole Marvel universe and follow all the characters and stuff, but I've liked the Venom 2 just because I like Tom Hardy, his acting. And it's a killer sense of humor they have throughout. The Venom characters got, it's really funny, a lot of real quick humor that I really like kept me laughing. But on to the dad jokes. So first question of the day, why did no one laugh when the king farted in front of his court? Anybody? No. Because noble gases do not cause reactions. Thank you. 

CHARLES MAX_WOOD: That one's made me smile. 

AJ_O’NEAL: Wow. You got a smile. I appreciate a good physics joke. 

STEVE_EDWARDS: Now did you hear about the town that legalized marijuana, but they banned alcohol? The residents were left high and dry. For those of you who can't see, Anthony is really laughing. He's just sort of quiet. And then finally, my wife has always been a real cat person, has always had cats around. Me, not so much, but I handle it. But one time, not too long ago, she looked at one of her cats and said, you know, I'm going to teach you how to speak English. And the cat looked at her and said, me, how? 

CHARLES MAX_WOOD: We need a drone sound effect. 

AJ_O’NEAL: No, that was awesome. I really like that one. 

STEVE_EDWARDS: Dang it. My laughing sound effect is not working and I was all, I had it all timed and everything, but just imagine people laughing. 

CHARLES MAX_WOOD: Oh, all right. Anyway, I'm gonna get in with some picks. So I always pick a board game. This week I'm going to be picking legendary. It's more of a card game than a board game. They do have a game board that you play the cards on. I've been playing the Marvel legendary. I guess I should specify that since they have, they have like DC Legendary and I think I saw a Firefly Legendary, which would be cool. But anyway, the Marvel Legendary, they've got like two dozen expansions or something you can get. We really enjoyed playing it. I actually wrote a React Native app that helps you randomly select heroes. Anyway, so it's a super fun game and I've really enjoyed it. Basically, you just shuffle a deck of like five or six heroes. You have a villain, like a master villain. You have- villain like henchmen and then you're trying to stop the henchmen as they advance through the city. The villain has different effects on the game and if they complete their scheme, then they win. And, or if you get to the bottom of the villain deck and you haven't completed the, the win, the condition for winning, then you lose. So anyway, and the condition for winning is beating the master villain. So anyway, the mastermind. So it's a fun game. It's super fun. They've got all kinds of mixes that you can get. And yeah, we've really, really enjoyed it. Spent hours and hours playing that game. As far as other picks go, one pick that I'm going to throw out there is Auth Zero. I've just been integrating more stuff with it for top end devs. And it's awesome. It's really awesome. So I'm going to pick it. And then the other pick I have is I went on theme for us because I needed kind of a, an admin type theme and I picked up the Metronic theme and it has like react view, angular, HTML. I think there's one other in there, but anyway, so you can build it for whichever framework you want or just have it, you know, do its thing with just HTML and jQuery. And so I've been pulling that into an app that I'm working on and it's probably also going to be used on the admin for top end devs. So anyway, it's, it's terrific. I've, I've really been happy with it. So I'm gonna, picked that as well. And then my last pick is John Rich from Big and Rich. Before he was with Big and Rich, he was the lead singer for Lone Star, both country bands. He and Mike Rowe from Dirty Jobs got together and released a single and it's called Santa Claus Has a Dirty Job and it's awesome. So, you can go pick it up as a single off of iTunes or wherever you get your music. 

STEVE_EDWARDS: I think it was huge. Wasn't like top of every chart or something. 

CHARLES MAX_WOOD: Yeah, it was. For like two weeks. Yeah. So. Anyway, definitely go check it out because I've been playing it. I've been enjoying it. So yeah, those are my picks. Anthony, do you have some picks for us? 

ANTHONY_CAMPOLO: Sure. I'm going to pick some Discord servers. I mentioned these briefly during the episode. So Discord servers are for me really where I've gotten a lot of my connections and kind of camaraderie as you know, we've been living through this whole pandemic and it's been just such a great way to connect with other devs and share notes and just hang out and have a good time. So two that I've really enjoyed have been the lunch dev discord, which up until about a week ago was the React podcast discord, but we have recently rebranded it because it's not really React based. Like we talk about all sorts of different things and different frameworks. This was created by Michael Chan, the host of the now defunct, possibly coming back at some point podcast, the React podcast. And so if you go to events dot lunch dot dev, you can find a list of our events that we have. And then you find a link to the discord from there. And we have lots of people who like to hang out and share what they're learning and what they're working on. And we have a lot of people who are working on frameworks as well, who will pop in and chat as well. So this is actually where I met Ben originally. And then the other one is the front end horse discord. So if you go to frontend.horse, this is Alex Trost, has a whole horse-based aesthetic. He has a stream and he has a Discord and he works for Prismic. And so there's a lot of more like design-heavy, front-end-heavy type stuff there. And they do a lot of creative coding, what he calls. And so like generative art and stuff like that. And so both of them are just really awesome communities where lots of really cool people hanging out just working on stuff and talking about what they're working on. You can get a lot of feedback and you lost support. And it's just a great way to share notes and or to just hang out and have fun and meet some people. So really enjoyed those. And I'm just a huge fan of discord in general. I think that it's really kind of like the next big thing in terms like developer communities, like we've had slack and we've had message boards and we've had stuff like that. But with discord, you really get everything because you can do like screen shares and you can do streaming and we do all sorts of stuff. So love, 

STEVE_EDWARDS: if you go back far enough, you remember IRC. 

ANTHONY_CAMPOLO: Yeah. So yeah, those are VMA picks. 

CHARLES MAX_WOOD: Awesome. All right, Anthony, if people want to follow you or connect with you, what are the best places to do that? 

ANTHONY_CAMPOLO: Yeah. I am AJC web dev pretty much everywhere on Twitter and GitHub or dev two. So that's where you can get a hold of me. And then if you want to learn more about Slinkity, slinkity.dev will have links to all of our stuff. So yeah, thanks so much for having me. Always enjoy getting to chat with you all and hopefully some people learned some new stuff and have some more cool projects to check out. 

CHARLES MAX_WOOD: Awesome. All right, folks, we're gonna wrap it up here and until next time, Max out. 

STEVE_EDWARDS: Adios. 

CHARLES MAX_WOOD: Oh, hang on, one more thing I gotta throw out there. So my last pick, I actually set up a phone number Community and so if you want to text me you can now this number does not take phone calls the voicemail message literally says that you can't leave me a voicemail because I won't get it but if you want to text me I I will actually text you back and this is a way for me to stay in touch with folks see what you're working on periodically ask questions and see where you're at. The phone number is 801-877-3287 And yeah, if you shoot me a text, I will text you back and yeah, I'm really looking forward to connecting with people this way. And yeah, until next time folks, Max out. 

AJ_O’NEAL: Adios. 

 

Bandwidth for this segment is provided by Cashfly, the world's fastest CDN. Deliver your content fast with Cashfly. Visit c-a-c-h-e-f-l-y.com to learn more.