819

September 9th, 2024 × #javascript#node#tooling

Fun & Profitable Side Projects for Developers

In this episode Scott and Wes discuss side projects - where developers get ideas, setting goals, choosing technology stacks, keeping notes, and actually finishing.

or
Topic 0 00:00

Transcript

Scott Tolinski

Welcome to Syntax. In this Monday Sanity treat, we're gonna be talking all about side projects.

Scott Tolinski

We're gonna be talking about things that you can do for fun or for profit. We have all these awesome abilities. Let's use these abilities to do something cool. My name is Scott. I'm a developer from Denver. With me, as always, is Wes. What's up, Wes?

Wes Bos

Yes. I'm excited to talk about this. So we are in day 2 right now as of recording in Century Hack Week, which is the whole week. Everybody gets to work on whatever they want. And it's always kinda fun because you think like, oh, what should I build? You know? What can I make? And it's very similar to developers, us, trying to build a side project. Right? When you're starting a new side project, there's lots of questions in terms of, like, what are you gonna use? What Wes what are the ideas? Do I wanna learn something? Do I wanna make money here? Do I wanna solve some sort of problem? How do you sort of tackle that? Because a blank slate where you can choose whatever you want in terms of tech and directions that you wanna go is exciting, but also can be a little bit overwhelming. So we're gonna talk a little bit about how we, like, sort of plan and solidify that type of thing. We'll talk real quick about Sentry, and Sentry will email you when a error comes up.

Topic 1 00:20

Wes working on thermal printer Sentry integration during Hack Week

Wes Bos

An issue pops up in your your website. It'll send you an email, give you a bit of information about that, but I'm trying to change that and also make it on a receipt.

Wes Bos

So, my Hack Week project I'm it's still I've only put a couple hours into it so far, but my Hack Week project is learning how thermal printers work and being able to hook them up to JavaScript in the web and all all kinds of fun stuff like that. So one of the things I'm going to do is when a a new issue comes in, I'm using the Sentry API for webhooks.

Wes Bos

I'm going to

Scott Tolinski

be able to print it to a receipt printer that's sitting here on my desk, which I thought was pretty funny. That's amazing. I I you know, I saw you doing the thermal printer stuff. I had no idea you were gonna wrap it back in this entry.

Scott Tolinski

Oh, yeah. That's pretty incredible. That rolls.

Wes Bos

Rose. It's it's like working in a kitchen. Right? Like, oh, man. You gotta grab the ticket and got, oh, man. What's going on here? Error loading dynamically imported module. Alright. And I like you almost need, like, one of those, like, check rails that at, like, a they, like you throw it up there. Alright. I'm working on this.

Scott Tolinski

Man, that rules. That's super fun. I love that.

Wes Bos

Do you wanna we're gonna Scott give this talk about this in the context of of these projects as well as other side projects we've done in the past. But do you wanna give, like, a quick rundown of what you are working on so we can give context?

Scott Tolinski

Yeah. Yeah. For for Hack Week. And we should do an episode once these are all all complete to talk about. Once they're done, we'll do, like, a whole how it went. Yeah. We're we're building, CJ and I are tag teaming to build a desktop application as a production assistant for syntax.

Topic 2 02:44

Scott & CJ building Syntax podcast assistant desktop app with Rust, Svelte, IndexedDB

Scott Tolinski

We'll show you this a little bit more when we get into the actual project itself later on, not in this episode. But the production workflow for syntax is kind of atypical.

Scott Tolinski

We have some some crazy stuff, and I was showing Courtney exactly what it looked like in the Notion document. And I was just like, scroll, scroll, scroll, scroll, scroll. Here are the all of the steps we have to do.

Scott Tolinski

So our our production assistant app is looking to remove all of those steps. That way, we can free up Randy to do some cooler stuff for syntax. But, yeah, it's basically taking pnpm MP 4, processing it into all sorts of things, pulling out metadata using some AI features. And, we're gonna see how far we can take it. We made a really ambitious Node map.

Scott Tolinski

And who knows how many of the things we'll get to. But seeing as how we had one day and we already have a working desktop app even as an icon, and it accepts a a drop zone video. It Sanity, Scott to process that with FFmpeg.

Scott Tolinski

We have all that going in inside, and it's all built with Tori. So we're using Rust.

Scott Tolinski

It's using Svelte five, and it's using a database,

Wes Bos

with IndexedDB indexe. So it's it's pretty dope. Cool. I can't wait to to hear all about the tech that went into that, and it seems pretty neat. So let's let's talk about the first thing is, like, where do you get ideas for a side project? Because I think, for me, I'm the type of person where I'm constantly having ideas. Oh, how does that work? Oh, wouldn't that be a funny app to build? Wouldn't that be wouldn't that be really helpful? Oh, I have this problem. I can solve that with code. And I'm always coming up with ideas, especially for a lot of my courses as well as, not necessarily side projects, but just like things you can build that could turn into to something larger. And for me, I have a list on my computer where anytime I have an idea, I will throw it onto that list. And if I'm out and about, I I all of my notes, I just keep in markdown, and I don't have them as, like, on my phone. Mhmm. So I usually just throw it into my, like, to do list, and then I'll when I get back to my desk, I'll I'll move that on over.

Wes Bos

But that's that's me. It's just kind of just always thinking of new ideas.

Topic 3 05:15

Scott keeps side project ideas in notes and task manager

Wes Bos

Do you have any process for, like, when this type of thing came up for what should I be building?

Scott Tolinski

Yeah. I mean, for Hack Week, it was a little bit different because Yeah. You know, working with somebody else. So collaborating, we just hit into a a room and started brainstorming a whole bunch of anything that could pop into our brain.

Scott Tolinski

That that type of ideation process is different because it's, like, focused. Right? You're like, alright. We need to come up with an idea. Where do we go? But the way that my brain typically works, especially for side projects in general, is that I just kind of, sit here and these things flow in from the universe and Yarn constantly interrupting my thought process with, oh, hey. You should stop what you're doing right Node, and you should build this specific thing. And, it takes every bit of ounce of my, you know, willpower to not drop what I'm doing and start working on stuff. So more recently, what I I do is Node to do app that I have, and the current one I have is Tweak. I always make sure that I have a a to do list that is specifically side project ideas, and I'll just drop it in there. JS, you know, the it has to be accessible to me. The moment that it comes into my head, I just drop it in there. And sometimes I get 2 or 3 of these ideas a day, and sometimes they're all awful. Or I'll wake up the next morning and look at this and be like, I don't think that's actually a great idea.

Scott Tolinski

So for me, it's it's almost always that they're just coming to me all the all the time, and I have to filter out the bad ones rather than I'm struggling to find good ones.

Scott Tolinski

Mhmm. Yeah.

Wes Bos

Yeah. It's it I think if you don't sort of have those ideas coming in because a lot of times, people are like, I would love to have a side project that I could hack on. I just don't know what to build. Yeah.

Topic 4 06:50

Solving own problems or others' problems can spark good side project ideas

Wes Bos

And I think it can kinda break down into, a, if you have a problem or or if you're talking to people that have problems. So I have people come all the time over for a beer, or they call me up and say, hey.

Wes Bos

I work in x, y, and z. You know? I manage a hockey team. I, work in patient booking in the hospital, and I feel like this could be done better.

Wes Bos

Those are often really interesting ideas that sort of come your way. But also just like looking at new tech that comes out, we've seen this a lot recently with AI JS, wow, there's this new tech. How can this be applied to some other aspect of something that I'm working in? And a lot of times, it's it's some sort of interest that you have that is outside of tech. It certainly can be oh, it's an AI CSS writer. You know? Yeah. Yeah. But it can also be like, oh, like, Scott is a breakdancer. And Yep. He's like, I wish I could build a, and he does, a breakdancing app that helps you

Scott Tolinski

real quick. You've talked about it a lot, but what does it do? Yeah. It does a lot of things. It's called the break Scott app JS the URL, and it's a local first app, Wes. I actually transformed it into being local first using That's a local. IndexedDB.

Scott Tolinski

And, it's what? It's loco. It is loco, actually.

Scott Tolinski

Node, you know what? It it's actually funny that the need for it to be local first came out of me actually using it. So, you know, when you're a dancer, it's frowned upon to do the same move over and over again. If you watch the Olympics, you might have seen somebody lose who you thought won. And one of the reasons why they lost is because they did the same movement over and over and over again. That's a big no no. Someone like me with memory, ADHD issues, you know, if I'm in a a competition, I need to make sure that I'm not reusing stuff. So it allows me to keep track of all my moves and then mark if I've used them in a battle or also keep track of using them in practice.

Scott Tolinski

I also built in a AI set generator so I can assign each of my moves a props value, like, how how many cheers I get for doing that move. And I can click generate. I want 6 sets of moves, and it will give me evenly distributed 6 sets of moves based on their their props and stuff like that. So it's just, like, little things. But in in battles and practice, oftentimes, Wi Fi or, you Node g is not good, so I made it local first Wes I can use it offline. You know?

Wes Bos

Beautiful.

Wes Bos

Let's talk about end goals for a side project, and I I wanna start this off by encouraging you to start that project.

Topic 5 09:30

Side projects can just be for learning or solving problems, not necessarily businesses

Wes Bos

So many of the businesses, so many of the neat projects that we have today, so many things in every single industry are not started where someone sits down and says, I want to build Yeah. This business. It's where someone is sort of pulling out a thread or poking at something and saying, I wonder if there's something here. I wonder I'm gonna explore this idea, and it will compound into to something larger. Like, Node projects can change your life. So the end goal of a side project can simply be, I want to learn a some new tech. Right? I wanna learn how to put all this stuff together.

Wes Bos

A lot of people are talking about x, y, and z. I don't get to use this stuff at my day job because our stack is very well defined. Totally. This is a chance for you to sort of pick something up and learn,

Scott Tolinski

learn that new tech. Yeah. A massive amount of my side projects start either by I'm picking it up to learn a specific tech. Local first has been one of those for me recently where it's like, what type of applications make sense to work offline or locally first? Or or 2, I have a very specific problem, and I'm trying to solve that problem.

Scott Tolinski

And maybe there's apps out there that do solve that problem already, but they don't solve it in the way that I want them to solve it. For instance, habit trackers. There's a 1,000,000,000 habit trackers. I've talked about my app all the time on on this show, but I'm so sick of habit trackers that want to do a 1000000000 things. So I made a dead simple one. I made that to solve my own problem. So good. And, Solve your own problem. Solve my own problem. And then that led to some interesting tech stuff. That app is also running local first. It allowed me to learn Replicash. It allowed me to learn actually, it was the 1st app I did with Drizzle. So it allowed me to learn Drizzle.

Scott Tolinski

So I I Wes able to solve a problem and learn some tech in in that one instance. So for me, I think those are both really good drivers.

Topic 6 11:19

Scott's side project drivers are learning tech or solving specific problems

Scott Tolinski

Mhmm. You know, maybe building an app to learn a specific tech isn't necessarily the great greatest reason if you're trying to have it be in long term real project, you know, because you could get bogged down in the technical choices rather than, building a product. That's another reason. Maybe you wanna build a product. Maybe you are, you know, working 9 to 5. You're grinding Yarn. Or maybe you you know, you you don't have a job and you're grinding Yarn. And you want some extra cash.

Scott Tolinski

So that has a completely different motivation and a completely different structure in which you're gonna wanna, like, build this thing. Right? Mhmm. From the ground up, you're thinking about market fit and how this thing feels to actual users and where this can be ESLint interacting with those communities to get in front of people. But building a product as a side project to make money is not shameful or wrong or weird or anything. A lot of people do it all the time. And in fact, it makes me makes me feel like kinda, sad. Not sad in, like, a, maybe sad in a jealous way, where if I see an app that I could have built blowing up on Product Hunt and dead simple app, I'm just thinking, man, I had an opportunity to make this, to do this cool thing, and I didn't do it because of why. You know? You know, so I feel like that. Yeah. Exactly.

Wes Bos

Almost always you see those where either somebody makes a product, where they're like, right now, we're seeing a lot of people selling, like, web starter kits. You know? Someone puts a whole bunch of Npm installs together and some boilerplate code and $99 out the door. Like, damn it. Like, that's huge. Or like a software as a service. You know? People are selling AI headshots, and Yeah. That's that's really big right now. You know what it used to be Wes?

Scott Tolinski

Wes, like, ThemeForest themes.

Scott Tolinski

Yeah. The WordPress themes. People used to make a killing on ThemeForest for Magento, WordPress, Drupal.

Scott Tolinski

They build these massive themes that had a ton of options that were kind of like a platform in itself. And maybe some people are still making a a crazy money on that.

Scott Tolinski

That that that exists as an option. Yeah. I tried to do that, like, 3 or 4 times, and I was just never good enough as a designer, and they just never were good. I was just like, this is what I'm gonna do. I'm gonna make $1,000,000,000 on a theme, and then I would get, like, a week into it and be like, yeah. This thing kinda sucks.

Topic 7 13:24

Theme & template selling used to be profitable side project area

Wes Bos

Yeah. I I think also, like, I wanted to get into it because I saw lots of other people making bank on it. Totally. And at that point, it was it's kind of too late to to start that type of thing. And, really, the people that are cleaning up on this are the ones that are are early to it and and sort of understanding, people want a template. People wanna design. People wanna be able to buy CSS for buttons. You know? Like, maybe that's pnpm.

Wes Bos

Bos for 700 CSS buttons.

Wes Bos

Yeah. You could go to build that. Instagram

Scott Tolinski

and see all kinds of products in other industries that people are making. You know? Yeah. Like the fitness space. People are selling premade workouts. It's like, can you make a a workout program yourself? Absolutely.

Scott Tolinski

Are the ones that you're spending $200 on or whatever from Instagram that different than the one you could probably find on the Internet? No. But people are making them, and they're making a lot of money on them. So, like, you have the abilities to do stuff like that. Well, you know, it's all about just getting it in front of people and making it good.

Wes Bos

Yep.

Wes Bos

Other other end goals for side projects we have here is is to make content and to have fun. I I wrote in here, beat off that burnout monster. Yeah. I think a lot of times Wes you are programming, you can get very sick of it because it's not fun anymore, and you don't feel like doing it. But a surefire way to sort of do that is to to build something that has has is is dumb, like a receipt printer, or is is really fun, like a receipt printer or whatever it is that that you're working on. If you're having fun and you're learning new tech and, in my case, I'm making a bunch of Instagram and TikTok videos, tweets about it, It's really fun to to have that energy around a side project even if it is

Scott Tolinski

it seems silly at the end of the day. Yeah. Wes, I have currently in my side projects folder, because I have a side projects folder inside of my sites folder. And these are ones that I'm actively working on because I also have, like, an archive or, you know, whatever folder. Actively working on. And I kid you not, 22 side projects.

Scott Tolinski

And, you know what? At the very least, I would say most of them have gotten at least 1 or 2 shows of syntax out of them in terms of things that I've learned from making them, whether that is local first stuff or it is a specific database technology, CSS technology, or even just, heck, a show like this. So, like, they are all learning experiences, and I have them all here whether or not they amount to anything.

Scott Tolinski

Clearly, most of them have not.

Scott Tolinski

But they they do inform a lot of decisions we make. And, also, they beyond that, they also you know, when we talk about to learn a technology, they learn technologies for me that I then implement into the syntax site. I I then take that knowledge and Sanity.

Scott Tolinski

I'm able to utilize that in an actual project that is getting, you know, real use.

Wes Bos

Mhmm.

Wes Bos

Let's talk about what tech should you use. So whenever you start a new project, I have have this conundrum JS do you pick something fresh off the shelf that you've not used before because that's exciting? You get to learn something new, or do you pick something that you already know and so you can move really fast? And the way that I make that decision is, am I doing this to learn a new piece of tech? And if that's the case, then, yes, I go grab a whole bunch of new stuff. And in my case with the receipt printer, I initially, I had scaffolded it out with Hano, and then I moved to HanoX, which is kind of their, like, framework. And then I TypeScript it, and then I went to Astro, and then their RPC was not like, being able to call server functions from the client wasn't that great, so I scrapped that. And then I was like, you know what? I'm just going with Next. Js. I've built probably 5 things with React server components Next. Js in the last 6 months, and I feel comfortable enough with it to move extremely fast because I'm not worried I'm not doing this to learn React framework. I'm doing this to learn thermal printer, formatting and, like, all of the intricacies of that, which is is something that is totally different. So too many new things will distract you from your end goal, unless your actual end goal is simply learning how to put these things together.

Scott Tolinski

Yeah. If if I'm doing a a Node project to accomplish and complete a application, I almost always pick what I I created this thing for myself, which is a drop in. It's a starter kit for myself. And what's so cool about drop in for me is that it includes all of the base CSS that I am comfortable with. It includes all of my base CSS variables. It includes a font system. It now includes a, a bunch of actual Svelte five components, which I I just added to it last night. So I'm constantly adding things to it. It's funny. I I build so many sites with drop in now that I was like, I'm building the same components over and over again, and I don't wanna necessarily bring in a bunch of dependencies.

Topic 8 18:15

Use new tech for learning, otherwise use familiar tech to ship product

Scott Tolinski

So maybe I should make my own component library even though it's not like a full on library that I'm expecting other people to use, but just common commonly used components that I I have myself. So it's even funny. I I my wife, Courtney, had a a really good idea for an app that she really wanted to have. She thought this thing would, like, really help her, and I thought it was a great idea. So I started working on it, and then I did the wrong thing, which is I wanted an actual app, and I wanted to learn some new tech. So I started throwing new tech at it.

Scott Tolinski

Next thing you know, I've made no progress on this thing because I've reevaluate the tech choices on it 8 times, and it's just sort of sitting there. And so I decided to start it over with drop in because it's like, I'm actually making this to walk out out of here with something. I'm not making this to learn this tech. So why am I, shoehorning new tech into this when I want to actually accomplish something? So those things can get in the way, and and I totally a 100% agree with you. Like, what is the outcome? Is the outcome to have an app at the end of the day, or is the outcome to potentially not have an app and learn new tech? You're you're the side project final final boss here Wes your side projects have a literal side project Yes. So that you can Node project so hard. I I've side project so hard. In fact, drop in even has, like, drop in has a CLI. It has I mean, it has so many little things that are, like, in its own. It it started off as just, like, an opinionated starter for myself, but then it's like, I I made my own personal blog out of this thing. And then I was like, well, you know what? I should have a blog template built in this. Sorry to make a blog template. You know? It's like yeah. It's it's too much sometimes.

Wes Bos

Keeping notes. So one of the things I I do when I'm about to start a project, like, the week before I actually started this thing, I I ESLint a lot of time, like, when I'm in the shower or when you're going for a walk somewhere, trying to think about, like, how should I do this? You know? How should I architect it? How should I design the code base so that I can do all the things that I want? Because I feel like if I have, like, a pretty good idea of yeah. Okay. I'm gonna have a server running, and then I'm going to have, like, a Next. Js app that can communicate with that, but then I'll have a bunch of endpoints at the the webhooks. And then I'm gonna have, like, this adapter pattern so that ever see the Sanity webhook can hit it, but then maybe the GitHub issue webhook could also hit that. It's nice to sort of think about that, like, high level architecture, and I'll often just keep notes either on my phone or in a markdown somewhere about how I would like to to sort of approach it. That's usually as far as I get for that type of thing, unless it's like I'm building a course, then I'll go into, like, a mind mapping software where you can, like, break out an idea into many different subtrees.

Topic 9 21:45

Scott uses TODOs in code as roadmap for side projects

Wes Bos

And I know you you use Figma for this? Yeah. Figma Fig Jam,

Scott Tolinski

specifically, is awesome for building mind maps. It's great. And what's cool about Fig Jam, if you're it's, the best part about it being collaborative is that multiple people are working on the same mind map, but there's, like, this sticker interface where you can drop in a stamp or a sticker or something. So, like, if CJ adds a feature and I like that, I can just put a little stamp plus 1 on his feature. And it's so visual and fun, and it's it's playful, and it's great for that. The thing that I do typically if I'm working solo on these types of things is my lowest five version of this is just straight up sprinkling to dos all over the code.

Scott Tolinski

I am in this page. I write to do. Do this, do that, do this, do that, whatever.

Scott Tolinski

Add a filter, add a sort, whatever. I just litter the thing with to dos, and then that to me acts as like a road map. So if I'm just staring blankly at my code base, I'm like, alright. I can pick up this little task. Let me pick up this little task and knock this out. Alright. Next one, this one here. And as I go, I add more.

Scott Tolinski

I oftentimes even use, GitHub issues for this too. If I have big ideas and I wanna keep maybe links, something to come back to later, like, I wanna add this functionality.

Scott Tolinski

For instance, I wanna add YouTube uploading to our syntax assistant. I just made it an issue on the GitHub repo, and I pasted in the links to the API docs for uploading to YouTube. There. I can come back to it later. You know?

Wes Bos

Beautiful.

Wes Bos

Last couple things here is finishing side projects.

Topic 10 23:20

Finishing means hitting your intended end goal, not necessarily launching

Wes Bos

I I've always said, like, finish your stuff. You know? Like, then you can have sort of satisfaction.

Wes Bos

But I I don't know if that's necessarily true for absolutely every single one. I think there is a space where you simply just get what you need out of a side project, which is I I dove into it. I understand how it works. I've built some really fun stuff, and and that that's that's what I needed it. In in my opinion, that is finishing it if you hit your end goal of it. But the other thing is, like, simply just, yeah, there needs to be a few more features before I launch it, and I never actually launched this thing. Mhmm. That last 10%, if you can actually push yourself to finish something and get it up, that's a whole another level of being a skilled developer of actually finishing your stuff and and and putting it out to production. So I highly recommend you when you start your your side project, determine what does finishing a project look like to you. You know? Then you can actually check that off and say, I I did finish. Yeah. And and here here's some hacks there. If you get other people invested in it,

Scott Tolinski

then you have to finish it. Because Yes. Like, for instance, HabitPath, which is my habit tracking app, I have 600 users on that thing now. And if I'm pushing up a PR and it's incomplete or it's broken or I I'm using it, which I use my habit tracker daily, which is one of the things that helps me JS that I'm I'm dogfooding it like crazy. But if I'm using this thing and it's broken and I know that other people are using it, I have to work on it. And it it then it becomes maybe a little less fun, but the fact that I'm dogfooding it and the fact that I I really like using the app myself makes working on it easy. Because when I'm using it, I could say, man, it would be really great if this thing could do this. And if it's your application, you can make it do whatever you want.

Scott Tolinski

And you you wanna do it well because other people are using it. But and I'm of the the mind that typically that nothing's ever finished, but it's good to put even unfinished things up and online.

Scott Tolinski

Right now, I'm working on a workout sharing system for the tonal system because tonal, has not chosen to build in a great workout sharing system within their own app. So I built a little app. It's got a QR code link reader thing so you can, you know, just scan it on your phone and get the the workouts instantly on your tonal and stuff like that. I threw it up. It looks ugly as hell right now. It sucks. And just last night, I was like, I wanna add a workout to it, and I did that, and it was painful to use. So what I do, I take some notes. I'm like, alright. I Scott, do this and do that. So I'm I'm definitely of the mind of that. Like, nothing is ever finished, really.

Scott Tolinski

But if you get it out there, maybe you get some other people using it. It could push you to make it more and more complete.

Wes Bos

It's the beauty of being able to open source them as well Wes sometimes you other people will get really excited about it as well and and wanna contribute to that as alongside you. That's a lot of my side projects of the past, I'm not so excited about them anymore.

Wes Bos

But because they're open source, they are continually being updated.

Scott Tolinski

Yeah. I'm the king of getting really excited about a side project for about a week and then, realizing that, not only do I not need this, but nobody needs this. It's like it took the exploration to figure that out. Yeah.

Wes Bos

Alright. That's Node projects.

Wes Bos

Hopefully, you can build something really cool. Would love to see what you're working on. Tweet us at Syntax FM. We should maybe even do, like, a whole shameless plug a sode of people plugging their own projects Yes. Which I think would be pretty cool. Let's say that right now. If you have a side project that you're working on and you wanna shamelessly plug it, tweet us at Syntax FM. Use hashtag shameless plug, and that way we'll be able to find them once we do do that show. I think it'd be kinda cool to go through everybody's projects and plug them and see what they're working on. Yeah. Also, leave a a comment on YouTube. Leave a comment on the YouTube video for this. This is on YouTube. If you want, leave a comment.

Scott Tolinski

Post a link to your your side project and maybe just give a quick here's what this side project's about.

Scott Tolinski

We'll we'll take a look at it. We'll we'll share it with everybody, and we'll help help each other, like, get some of our stuff out there if you want. Or maybe we'll just even, like, celebrate the fact that we can build cool stuff. Because I honestly think that's the coolest part about what we get to do JS that we can make our dreams a reality just simply by utilizing the skills that we've built up.

Wes Bos

Cool. Alright. Thanks for tuning in. Catch you later. Peace. Peace.

Share