Ep. #137, Building Sophisticated Functionality with Steven Schkolne of MightyMeld

Brian Douglas: Welcome to another installment of Jamstack Radio. On the line we've got Steven Schkolne. How you doing?

Steven Schkolne: Hey, how's it going, Brian?

Brian: I am fantastic. I crushed two slices of pizza for lunch and a salad, so a good balance. No breakfast. Barely dinner, so I'm burning the candle at both ends. But happy to take a little bit of a break with you and chat about MightyMeld. But before we talk about MightyMeld, I want to actually find out who are you and how'd you get here?

Steven: Yeah, I'm a developer with a CS background and also a self taught designer. I have a tremendous passion for creative tools and the creative experience. We can go into MightyMeld a bit later, but MightyMeld is just an expression of my passion for trying to make things better. I've worked with a lot of different frameworks so I'm not a strictly web person.

I have been doing web stuff almost the whole time the web's been around, but I've also worked for a lot of different platforms, I've made games, I've done things with computer vision and AI from back in the day, iPhone apps, Native apps, Windows apps. Basically anything with a user interface I've worked on and I always gravitate towards UI and frontend on the web, and things that deliver some kind of experience that's visceral to people. It's what I've been really passionate about in my development career.

Brian: Yeah, you mentioned in passing, it's amazing to hear you have so many experiences, at least engineering in a few different platforms. Design thing, how did you get into the design aspect of your approach in your career?

Steven: I started designing things before, I didn't even actually know what design was. In high school I was the layout editor of the newspaper and was working on the yearbook, and I remember my senior year of high school I had a friend who was like, "I'm going to go major in design." And I was like, "What is that?" I didn't even know design was a thing, but I went to college and there was some classes, I did a concentration in graphic design and got really interested in art.

I actually spent the early part of my career doing digital art and my PHD project was this VR creative tool, so I think I just kind of spilled into it. I loved computers from a very early age, the thing I really loved about computers was their way to deliver images to us so my continuing passion for that kind of stuff just had me noodling around with design.

Then moving on from that, I had an agency for a while and I started doing design and working on the design side of things and more recently I've worked as a UX designer for a number of companies. So I've kind of followed this self taught path into the design world just out of passion and doing it a lot.

Brian: Very cool. Yeah, I think like eight years ago I got a Sketch license because our designer, Sketch was his thing. He didn't build it, he just used Sketch. Then I learned how to make the boxes and the buttons, and how to unblock myself for a while.

So I don't think I'd ever consider myself a designer, I thought I was going to do graphic design back in college, but ended up going into a completely different path and then came back to engineering. So I've always appreciated folks who have the skillset in both directions, design and engineering. Yeah, it's very much appreciated.

Steven: Yeah. A lot of my design is actually being the guy who would make the flyer. Just something is going on, we need a T-shirt or a flyer or a poster, I would just be, "I'll do that." I got a lot of iterations and I was really bad at it for a really long time, but with cycles and also learning from a lot of really talented designers that I had the opportunity to work with, I managed to get a little more comfortable with it.

Brian: Yeah. So cool. We got a bit of your background, engineering, different platforms, got into design. So what is MightyMeld?

Steven: Yeah. So MightyMeld is a React dev tool and it's basically a visualization and creation platform for sophisticated, coded, React web apps. I think it's easiest just to think of MightyMeld as kind of picking up where Chrome Dev Tools leaves off. It gives a code aware view of your web app while it's running and so you can see the component structure, kind of run your app, falls at a neat point, see all the components that are driving what you're seeing.

You can bounce back to VS Code really easily if you need to add hooks or tie it to redux or that kind of thing or context. The MightyMeld also allows you to do some creation in your app, it kind of feels like a no code tool but it's actually working on your codebase so you can change props, you have dropdowns to change properties and do styling, color pickers. You can drag and drop tree order. We have a little bit of AI in there so you can some prompt stuff, pick your styles.

Then as you do this work, it does these clean, surgical, micro code updates to your code.

It's kind of like trying to bring some of these things, I think we've all seen these no code tools that are really fun to use and really fast, and wondered, "Why am I still typing everything?"And MightyMeld gives you a way to have that kind of visual experience in your product that's code relative.

Chrome Dev Tools is very Dom relative, or in the language of the Dom, so in the language of your codebase and then do these kinds of updates. That's what it's about.

Brian: Yeah, so dev tool had me think, "Oh, is it a Chrome extension?" But it sounds like it's a VS Code type extension, but maybe it's not VS Code specific. So how are developers interacting with this thing?

Steven: Yeah. It's actually a standalone. Basically, you take your react project, you add a couple of dependencies to it, and then you tell MightyMeld the command to launch your dev server, and then you type in VX MightyMeld, MightyMeld launches our studio which is this thing that runs in your browser that has browsers inside it with your web app and iframes.

Then MightyMeld Launcher app, and you see it there. So it runs in the browser, it's a little difficult to talk about. I find it a little difficult to talk about because there's all this Inception stuff with browsers inside of browsers, and we actually used MightyMeld to develop MightyMeld which was a whole trip.

Brian: Yeah. That's fun.

Steven: Yeah. It's a lot of fun. Basically, it's a local browser based tool that works on your local dev build and as it's running in your browser it's also talking to our server which does a lot of the code analysis and stuff like that. We have this little reverse compiler, it takes things down to the AST level, and then as you do moves it updates the AST and then generates clean, little code updates to the very little bit of the code that your update affected.

Brian: Yeah. For folks who are listening and maybe haven't seen on the website already, but on the website there's a visual representation of this browser. You make the changes, and then you can see those changes happen in your code itself. I love this because having that sync between the WYSIWYG thing... Whenever I talk about no code tools, I talk about my experience with my older brother who is a designer by trade, almost no engineering experience at all.

He'll build a Wix, now he's in a Web Flow but before Web Flow he would do a Wix or a Squarespace and be like, "Hey, can you help me fix this thing?" And I'm like, "I don't even know where to start with these no code tools. I can't help you. I don't want to learn this. Go ask their support, pay for some service or whatever."

But this is the thing I would push him towards, like, "Hey, yeah. Cool. Make it work for you, make the details make sense, and if you need me to jump in, I can always jump into the code." Would you consider Web Flow one of your competitors, or is it a completely different space because you're on the developer side?

Steven: Yeah. I think Web Flow does a really good job of doing landing pages, marketing pages, really single stack kinds of pages and if you're going to build one of those pages I would just point you to Web Flow because it's great. But the kinds of projects our early customers are building are things like type system generators, crypto trading app, dashboards for SaaS products.

Things that have that more sophisticated functionality, and that's really where you find a lot of benefit out of using MightyMeld. I think of Web Flow and a lot of these no code tools, they go in one direction. It's like design to code, and MightyMeld is trying to go in the opposite direction, so we take your existing codebase. You can do a brand new project, but also a legacy codebase or evolving codebase, ideas to let your code be whatever it is and give you a nice visual dev tool on it.

Yeah, I would even say that someone who doesn't know how to code, they're not the kind of people that are really using MightyMeld these days. It's more developers, they know React, they know they could type it, it's just a lot faster to not have to type it and not have to think so much about styling and have these additional superpowers. So it's still very much in the code, but visual. It's really inspired, getting back to some of my background, by things like the Unity game engine and X Code, and using those kinds of things.

MightyMeld dates back to a conversation almost a decade ago, a friend of mine, we were working on this VR project and we had to hop back to the web for some reason and we were like, "Why am I just typing all this stuff? I want to change it looks and I'm typing and all this weird CSS stuff." And that was the itch that eventually turned into MightyMeld. It's a lot harder to do something like this for the web because it's not a closed, corporate owned ecosystem like with Apple or with the Unity game engine.

But it's also kind of cooler because hot reloading is a thing on the web, and in Unity when you do changes you actually have to pause... it's harder, you don't have this hot reload experience. In some ways it's more difficult to do something like this on the web, but also with hot reload it's a way cooler experience than you actually get with X Code or the Unity game engine. It's been a really fascinating project on so many different levels, to work on this tool.

Brian: So you mentioned AST, you have this syncing engine, compiler, recompiler thing that's happening constantly during this hot reloading for MightyMeld?

Steven: Yeah. So basically we use Babble extensively under the hood, which is a really great AST engine. Basically we will store your AST and then when you do an update, we'll then generate the new code, write the code to disc on your dev box, and then rely on your existing hot reload technology to fire. So in some ways it's almost simulating what you do as a dev, where you type it into VS Code, the file gets saved, and then I see the update, except you're doing it with a visual move instead.

Brian: Yeah. My other thought that I had around this is let's say I'm using MightyMeld, it's synced up. But then I have some engineer that jumps in, he's like, "I'm going to rewrite some stuff. I don't know about MightyMeld but I'm going to build." Do I get out of sync? Do I have a weird merge conflict thing down the road?

Steven:

You could always make merge conflicts, as we all know. Right? But because it goes from code, visualizes your existing code, there's no lock in. We don't even change your code at all, right? There are these dependencies that only run when the MightyMeld is set in your environment, essentially. So yeah, other engineers can go in, do whatever they want, use MightyMeld, don't use MightyMeld. If they add some stuff it's what you experience the first time you added it to your project, MightyMeld is seeing a bunch of code it's never seen before and attaching itself to it.

Yeah, so there's not really a lock in or a buy in, and the reasons for that... I'm sure everyone knows in the audience, you don't want to have to change your code for a tool and I think we all know that we want to be able to do things the way we want, and that's super important with MightyMeld. Especially in comparison to some of these closed ecosystem kinds of tools.

The important thing is for you to be able to be like, "Listen, I need full control. I just want to do this this way."MightyMeld also gracefully works with things that even if it doesn't support it, you can add it and it just works its way around it. There's all kinds of stuff in the codebase that it doesn't understand right now, like your calls to your backend and things like that. It doesn't really get too close to that quite yet.

Brian: Yeah. To be fair, my earlier comment about this Wix situation, Wix has definitely come along over the years. So folks who are worried about closed ecosystems and beyond Wix, check out MightyMeld, but also I don't want to disparage Wix and all the good work they've done in the last years.

Steven: Not at all, Wix is amazing. There are a lot of amazing no/low-code tools out there. WordPress is amazing. I don't know if you pay attention to the WordPress ecosystem. It actually turns out that we have some people starting to use MightyMeld because you can integrate React into WordPress so some people are actually using MightyMeld on their React that goes into WordPress.

So these lines of no-code, low-code, it's getting really blurry these days. Yeah, they're all great products and I think it's just about the level of control you want to have and that's where I think most engineers like me are. If you're a full stack person, you want that full stack level of control and there's certain kinds of products where you need it.

I'm not sure if you know a good word for this, complex, sophisticated, coded, I'm not sure of the word but there's a certain kind of thing you're like, "I got to code this myself." And that's where we are with the MightyMeld.

Brian: Yeah. It's this sort of ownership that I guess developers have. Sometimes I'd rather go build the library because I know I can get something that can do the thing, but I'll have a bunch of bloat alongside of it so I'm like, "I'm just going to go learn the thing, build the small thing I need, and then if it ever gets to big we can always get the other thing." I keep saying thing over and over again, but I don't have a concrete example.

I think doing daytime stuff, everyone used Moment back then, They, now there's a bunch of them like DayJS and for specific calculations for my small, little... I was actually counting down the days till Beyonce's last album launch, so I was like, "How do I count these days and then make it work in every timezone?" Because I wanted to ship this really quickly as an Astro app, so let me get the one little lib to do the calculation of the day/time thing and it just works no matter what country, what city you're in.

I love dealing with those problems, and I imagine having... Actually, I was going to ask the question of what's the ideal project or team to reach for MightyMeld?

Steven: Yeah. Basically we look at the standard kind of team. The pod with five developers and one designer, seven developers. That's the kind of team that MightyMeld is really built for.

Brian: Okay. Yeah, very cool. I imagine that you get to expand bandwidth if everyone's got access to the WYSIWYG, low-code experience, but also can write the code. The example that I was thinking of is I like building Astro sites or really quick websites to solve a problem or a marketing page that's not a marketing page, but as like a now founder... I got a bunch of side project ideas, let me just throw something up together but I don't want the full on React ecosystem come along for the ride.

This seems like something I'd be like, "Let me just try something out, see what happens when I put this up on the social media platform formerly known as Twitter." What I'm getting at is I just want to throw things up together, real quick, on a weekend or in front of an audience on stage, and then change it again next time I have to go stand this thing up and be like, "Oh yeah, let me change and prepare for the next Beyonce launch date," or whatever.

Steven: Yeah. You could do something like that in Web Flow or you could do it in React and often we choose different tools for different reasons. Yeah, it's an interesting question. People ask me, "What exactly is MightyMeld for?" And I'm like, "Well, the things that you code. Why do you code stuff?" It's either a small thing and you want more control, or it's a larger project and it's going to have a lot of sophisticated functionality and you know that no-code tools actually tend to thrive when they're built around narrow use cases.

If you lean into that generality, it's usually when you tend to code or you have multiple engineers who are doing something sophisticated. Yeah. That's really what MightyMeld is designed for and that's why we think of it as a dev tool, as the easiest way to think of it. That's really the spirit of it, is it's in the same way that you use your Chrome Dev Tools. It's there while you're developing and we made it for people who develop the kinds of things that need to be developed.

Brian: Yeah. How big is the team currently?

Steven: We're four full time, and we have several people helping us out part time. It's been a really exciting journey with the four original members who have been building this. As you might or could imagine, there's quite a lot of work and a lot of moments with this project it seemed like we thought it was impossible for various reasons. It took us quite a while to crack some of those really tough problems of getting all this to harmonize and flow together.

Yeah, so four core members and then lately we've been adding to the team, but it's just been people from the community. People get really excited about MightyMeld and they've been helping us out in various ways, and it's just been exciting.

It's really great to work on dev tools because you get to work with developers and developers love your product and what you're doing, and then they can work on what they love with you and the community energy.

It's my first real dev tool project, this, and I have to say it's amazing to be part of the community and doing something with developers, for developers. So yeah, that's how the team is growing. I think it's probably not an atypical story, but it's been really, really good to me.

Brian: Yeah. So cool. I was thinking through, my next question I want to ask is what's next, but I was also thinking through how we were talking about the low-code, no-code experience. It seems to be quite a bit of a movement in the last couple of years of folks starting to adopt, and if you don't have the sort of skillset to jump in and do a bunch of stuff, you've got other solutions for you. But then there's this whole other movement which is this AI movement now, so I'm just curious if you've thought about that and had any conjunction to MightyMeld? I'm sure everyone is thinking about this thing, but yeah.

Steven: Oh yeah. We've found some really great ways to leverage AI in MightyMeld and the way we're working with AI is we use it for... We built this foundation where you have your running code and you visually see your places and go to different places of it. With your UI you can click on an element and just ask the AI to update its style, and it's really helpful, really solid. People are on the fence, I talk to a lot of developers about AI. Some love it, some say, "What does it really do for me?"

I feel like the AI we have right now in MightyMeld is a definite, definite win. It's just about styling and sometimes it's like, "Make this green." Or you're like, "Add a top margin of 10px." And it's easier than typing margin-top. Most useful I find is for things like with Chakra UI, if you want to do responsive style, it's all these brackets and colons and stuff and you can just say, "Make this 100% width, but at the large break point make it 500 pixels."

And it figures all that stuff out for you. So that's kind of how we're using AI and it's really cool because it updates your live app while you're working on it. You can see what it does in case you need to tweak it or undo it. In some ways, yeah, that's how it works with MightyMeld and it's been a real win for us, to the point that we're like, "It's a no brainer. It's not going anywhere," and we're looking to take it further in terms of changing components around or doing deeper changes in the codebase.

We're a little sensitive to sending information to the LLM, so right now we're just sending single elements which are basically things that anyone using the product would be able to see it would be something close to it in the DOM. So we haven't really crossed that bridge yet, in terms of, "Well, actually we want to send the whole codebase to the LLM," and there's security and permissions around that but that's certainly where were heading with it because we've had a lot of good success.

That's how it works, and I think that's how I think AI is best for development. At least for the technology right now, which is something with a human in the loop to help you get there a little bit quicker but not like, "Oh, here are the reins. Solve everything for me," kind of approach.

Brian: Excellent. Cool. Yeah. What is next for MightyMeld? What are you guys working on? What do you want folks to be excited about?

Steven: Yeah. I think right now we're really just starting to get the word out about MightyMeld. Our closed beta has only been going on for a couple of months, so I think we're just excited to get more developers on the platform and we've really been doing a lot of work to fine tune that parallel developer experience. You talked about seeing things update in VS Code, if you work in VS Code, updates in MightyMeld.

So I think at this point we're just... There's this new way of developing, developers have never had it this good before on the web. I would even say, compared to Unity this is better than what I experienced with Unity just due to the nature of hot reload, and so I think we're just excited to be here and doing this, and sharing what we discovered with the community.

In terms of our roadmap, it's all kinds of capabilities that we're looking to add in terms of things like building out new components, as I mentioned, pushing AI forward and then broadening our support and making things better for a variety of styling systems, as well as opening things up to the community. We already have some ways where you can extend and customize MightyMeld to work around your internal design system, for example. So we're looking into building some of those functionalities out as well.

Brian: Very cool. Yeah, looking forward to kicking the tires. I didn't get a chance to check it out before the podcast, but I'll definitely end up there a bit later. Perhaps I got to get opted to go test it out for my next little side project. But yeah, folks, if you're interested, definitely reach out to Steven about MightyMeld. Steven, if you don't mind, I want to transition us to picks. These are things that we're jamming on. Could be music, could be food related, could be tech related. All of the above is on the table, and if you don't mind I'll go first.

Steven: Sure, sure.

Brian: Just earlier today I saw one of my favorite developers, a developer advocate at Vercel launched a new product called Git Headshots and it's exactly what it sounds like. You upload up to... I don't know what the top of it is, but minimum four headshots or selfies, rather, and it'll generate you a headshot for your LinkedIn profile or whatever. What a genius idea for a generative AI.

I love that a lot of folks are having, "I want to do the ChatGPT and just ask any question, but then I also want to generate whatever art like with Midjourney," but having a specific use case for a nice, little side project... This is what I love developing for, is that you can solve a simple problem and generate a headshot. My problem is I'm always wearing a hat and glasses everywhere, so then the time I do have a haircut I never take a selfie.

So then I'm like, "Oh man, how do I get a new headshot that's up to date for this conference I'm going to speak at?" I'm just going to generate one. So yeah, I did that earlier today. Yeah, I think it's a cool use case that the Vercel team has thrown together, and getting people to deploy stuff to production with these small, little wins.

Steven: Yeah. That sounds like a great app. I certainly could use a better headshot, and it's also been great to see this. With a lot of the opening up of the models to see these fine tuned and tailored models coming out with very specific use cases. What was that called again? I want to check it out.

Brian: GetHeadshots.ai. So just launched today. I think it might actually be hitting some server load or something, because it took a while for me to get my confirmation email and then it took me a while to get the images to upload. But some growing pains, I think they'll probably figure it out. They're using a bunch of other services in the Jamstack to put this thing together, so I think some of their partnered companies are struggling right now.

Steven: Cool. Yeah, I think for my picks, I'm a big YouTube fan so I think I'll maybe call out that I'm also an NFL fan. I don't know if you watch football at all, but I've really been loving this show called That's Good Sports which is basically an NFL show, but it's kind of like The Daily Show for sports. This one guy does it in his basement, and he writes everything and he's just hilarious. So if anyone is a football fan, I recommend That's Good Sports.

Brian: I've actually not heard of that. I do occasionally, I watch less football nowadays. I watch way more NBA. Whenever NBA comes on, then I stop watching football which is basically the first couple of weeks of the season. But I am a fan of Shannon Sharpe and Steven A. Smith. Actually have you heard of the Broadcast Boys?

Steven: No, no.

Brian: Okay. Another of these basement show. It started in a basement during the pandemic where they would just do TikToks on sports stories, and these guys were these amazing storytellers where everyone actually copied their format, the Broadcast Boys. They did one on Mohammed Ali or about some obscure NFL receiver that maybe you've heard of, but here's a story of how he got to where he's at and who he played in college and stuff like that.

It's just a very engaging three minute storytelling, and then they pivoted. Well, they didn't pivot, I think they already had a podcast but they did that to get people to their podcast. They just signed on, they haven't announced who they signed on with but they just signed on with a network to do the Broadcast Boys. This is a run up of like end of 2021 until now, now these guys have a real deal.

Anyways, I guess I'll make that my pick, the Broadcast Boys. Specifically, the Broadcast Boys, if you go to their Tiktok. I don't watch the show Love Is Blind, my wife does, but the Broadcast Boys they do... usually towards the end of the Love Is Blind season they do a roundup as if you were looking at playoffs for the NFL but they do it with the couples and who's with who and how they got there.

They do a whole backstory. I've literally not watched any of the show, but I know everybody, everything about everybody because they just do a really good, like the NFL Red Zone where you just see the ending.

Steven: Yeah. Just the highlights. That's great.

Brian: Yeah. I feel like I could talk more about sports, but for now I'm going to check out that show on YouTube.

Steven: Yeah, That's Good Sports.

Brian: Yeah. And just a reminder for folks, check out MightyMeld, give feedback. You'll find Steven and his contact information in the show notes.

Steven: Yeah. Thanks, Brian.

Brian: And keep spreading the jam.