How to Easily Explore Coding Ideas

Welcome to Syntax. On this Monday, hasty treat, we're gonna be exploring some ideas on how you can explore your ideas in coding. We're gonna be talking about all the different ways you can get up and running quickly with demos to explore any ideas that pop into your head. Hey. You thought of something in CSS? You gotta get it down on paper really quick. That be that way, you don't forget it. You can maybe validate your idea before tossing it into a real project. We're gonna be talking all about services you can use to do this or just ways that we like to do this ourselves. My name is Scott Talinski. I'm a developer from Denver. With me JS always is Wes Bos. Hey. Excited to talk about this. I think it's kind of important to know how to if you have an idea or if you have a problem,

being able to quickly get that up and running somewhere with quick feedback and to see how it works is is really key. Both if you're trying to send a demo to somebody else or if you just, like, see a new API, you hear about us, talk about it on syntax, and you wanna try it out, That 0 to 60 of, like, I'm up and running with this type of thing is really important. Because I don't know about you because if it's too hard, then I'll just, like, oh, you wanna go ride bikes?

Yeah. You know what the worst thing in the world is? You're sitting there. You have a seed of inspiration.

You're like, oh, I gotta try this out. This is gonna be so exciting. You sit down. You start to install a build process or create React app or, you know, use Vite or whatever. And you spend some time getting your tooling up and running. You pick your framework.

You to code on it, and then you're just like, alright. I'm tired. I'm, ready for a nap. And it's not like it's that Yarn. But, like, when you have an idea, it's really nice to be able to just start working on that idea at that moment. And maybe it's just because I'm hyperactive. But if I if I don't, like, get that idea out of my brain, I begin to, like, really get distracted and start to think about something else really quickly. So there's a a number of things that we can do both online in in little services here, as well as we're gonna be talking about code platforms you can have for yourself. You set it up once, and then you can use it for all your own demos. We're even gonna be talking about easy ways to work with data as well. But before we get going, if that little idea that you have blossoms into a massive project, you're gonna wanna throw Sentry on that thing to make sure that you're tracking all of your errors and exceptions. So head on over to century.ioforward/syntax.

Sign in and get 2 months for free for, really, the best platform for error tracking, performance management. I mean, we find so many different little things, either whether it's, like, slow database queries, slow pages, caching opportunities, or bugs. And now we're tracking metrics with this new metrics API that's in beta, so we can check anytime. It's like analytics. Anytime anybody listens to a specific episode, we can, know about which episodes are being clicked on, and we can track listens on our own website rather than having to, reach for Google Analytics or even a third party service for that. And you can tie it all in together with the rest of your Sentry information.

It's really pretty slick. So let's get on into it, and let's talk about I think I think a good place to start would be JavaScript services because a lot of us are writing JavaScript. That's, like, a big part of this podcast.

So if you need an idea down on paper, and maybe it's just that you're learning JavaScript and you you have an idea for, like, technique or maybe you wanna see if something works or maybe you have some data and you just wanna iterate over it. There's a number of quick services you can use to just get this going. In fact, many of these people have either been on the show or we've talked to them before. And one of these services is Val Town, and Val Town is a really great social network. And this really is more of a social coding platform than I would even say GitHub is because it's very social. You can write these little snippets.

You can execute them. You can import other people's little snippets. And then if this is That's really cool. Fantastic. Yeah. It's so cool. They said it's if GitHub Gists could run and AWS Lambda was fun. It rhymes. And, honestly, it's great. And they I just thought they got a a big, funding round too. So Val tone's not going anywhere if you were, concerned about that. It's a really cool little Sanity here.

Yeah. If you if you ever find yourself being like, man, I would love to run a scraper, or I would love to interact with the Spotify API and pull once a day, email myself my best my top tracks or, like, literally anything. Val town has a lot of, like, little built in libraries. You can require other people's libraries. You can run a cron jobs, and it's really cool. It's just like the the barrier to to entry is the lowest it's ever been with with Val Town. And I think that that's what makes it really cool for anyone who just wants to have something up and running really quickly. You know? Because if you're not using something like Val Town, then you Scott, Wes. You Node a front end. You Node a back end. You need to host it somewhere. You need to, like, restart the thing. You had a Npm install. There's CI. There's there's quite a bit to this type of thing, especially, like, when it goes past fiddling around, which is most of what I do with this type of stuff. It's just fiddling around, but it goes past to, like, actually, I wanna run this every once a day or when people visit the URL.

Yeah. Yeah. It's it's really pretty fantastic. And Wes you think about platforms like this, you wonder if, like, all the ideas have been explored considering it's like, what else could you do beyond a a REPL? And I think this is, like, a really unique approach to solving this problem, and I think it it it really succeeds.

Another thing in the same kind of world is Observable HQ.

And they kind of brand themselves as being the best place to write dashboards, but it's it's really more than that. We talked a little bit ago about writing, like, Jupyter Notebooks with TypeScript and JavaScript.

Like, what is the good flow for that? I I think Observable HQ is the best flow for that, and that's really what it is more so than building dashboards. I mean, it gives you, basically, ability to write and then drop in code snippets.

And maybe they're pivoting to be more dashboard type of service. Maybe that's that's where their marketing is headed. But it's a really, really good product too on top of that. You use markdown, and then you can toss in JavaScript, SQL, Python, R, any languages in there, and have, like, little mini apps in your code. It's really cool. Yeah. The the notebooks thing

is is really interesting to me because I've had this problem for for quite a long time, and and we even have a little bit with the show notes right now JS that we want a good note taking experience that is like, uses markdown. Right? Like, when I plan a course, I write all my notes in markdown.

And but then I also have a whole bunch of demos and stuff that goes along with the course. You know? And and some of those are are front end demos, and some of those are server side demos.

And for the longest time, the, like, the way to do this in the Python world was this thing called Jupyter Notebooks, which is what observable HQ is is built on top of.

And I've always looked at that, and it's extremely big in the, like, data science world because the data science world can be like, well, here, we're we're looking at a process for, grouping like elements into filtering them into groups, and then it will just, like, immediately, next line, a chunk of code, import some data, shows how you loop over it. And then below it, you can actually click the button and run it and see the actual output of it. And I was like, yeah. That's that's kinda what I want. Right? You Node, I kinda wanna be able to write my markdown, and I wanna be able to, like, author my TypeScript or whatever in my code editor and get all the stuff that I'm used to and then also run it in the same go. And for the longest time, I was like, we need this for JavaScript. And there was a couple hacks, and Observable HQ works, but, like, it it doesn't work locally. And that's always the the killer for me with these things JS, like, I just want my editor. You know? Like, I wanna feel comfortable. I wanna be home. I I don't wanna use some other website where I don't have all my snippets and linters and everything totally built in. But a couple days ago or a couple months ago, Deno announced support for Jupyter Notebooks, meaning that with with Jupyter Notebooks, like, the idea is, like, you have this IQMBD file. It's some weird extension, and you write your notebook in there. And then when you want some code, you add a code block, and you can write the code in there. But how it actually runs is via the course, and you can now Deno has a a core where you can run your server side JavaScript via Deno, and then it will pass back to you either data or you you can decide how how the output is displayed. But one of the things you can pass back is HTML or React components or charts or, like, there's all these different ways you can display the data that gets passed back in a Jupyter Notebook. So I dipped into it for a weekend at Node point, and I still haven't, like, moved my whole process over to it, but pretty excited about that type of thing. I don't know if that's really like the it's more of like a note taking experience for me versus, like, making demos, but very excited about it.

Yeah. And I I've never heard of that. I love that. It it feels like that's where Deno is exploring and really evolving the platform. Right? Whether that is their new package manager or stuff like this, they're they're really I think they're exploring some cool air areas. I I honestly have have never heard of this until just now. I think that's pretty neat. You know, one other thing I really like is small and playgrounds for various projects.

You know, the one that I think of JS being, you know, definitely a trendsetter here is the Svelte repl pnpm svelte dot dev. If you go to svelte dot dev, you can click examples and see a bunch of examples and mess with them, or you can click REPL and have essentially a, you know, a a Node pen, code sandbox style REPL here and just start writing Svelte. And I think this went a long ways for people who had never used Svelte to see it in action and be, like, quickly without installing anything, without writing this on your your own code. And since then, a lot of other folks have done this as well. I know Solid has a playground like this, but many other people, Tailwind, etcetera, they have they have playgrounds. And that to me JS, like, a really nice thing, especially the playground works the best when you can log in with GitHub and you can just save it right there. That way, you can have a catalog of every exploration you've ever done. Or if you have bugs in your the thing you're writing, you can share it with folks on the the the development teams there. But I use the Svelte repo all the time for validating ideas. Definitely. And and beyond that, if you wanna take that into a more simple path, I would say, CodePen is the one that you see being most used for CSS based stuff. And CodePen has a really great community. Granted, you can write JavaScript, HTML, and CSS in CodePen. But I think where CodePen really shines is the community around what people are building. And the fact that there is sort of blog like aspects of CodePen Wes you can see in code the most popular projects of any given week.

You can see visually, aesthetically, in a little embed how cool they are, and then you can say, oh, I wanna explore that and maybe take that idea. You can quickly fork it and quickly start using it. So to me, that's really where where CodePen shines JS that this this social sharing aspect and inspiration aspect. If you're looking to, like, how can I do cool stuff? You end up following the people who do cool stuff and then see how they did it. Bingo. Bingo. You're learning all kinds of stuff.

Yeah. And I know, CodePen's working on, like, a CodePen 2 ESLint o or something something like that. I've heard rumblings of it.

So excited to see what they they come out with as well because, like, there's there's a 1,000,000, like, Versus Node in the browsers. You Node? IDX, Stackblitz, Node Sanity, Gitpod, ESLint. There's 10,000 of those things, and they all have their own, like, benefits. I know they're not exactly all the same, but, like, I I go to those places to put my bugs, and I go to CodePen to, like, find inspiration and, like, I look for buttons and share cool CSS things that I'm doing with people.

Yeah. They're not the same in that regard, which is funny because you could make a strong argument that something like ESLint or CodeSandbox or any of these things, Stackblitz, Gitpod, they're all You could you could make an argument that they're better because it's you got your you got your back end support. You got ID. You got your your full standard kind of, like, web or editor experience that you might be used to. And in that regard, the tools are better, but, like, the social different Vercel you those are many of the different services you might wanna use if you're just quickly spinning up a project. But, again, I might even, stay away from some of the full stack ones, you know, unless you're, like, really writing features for the full stack application.

Because when you're exploring an idea or you're putting together a demo or you're trying out something, the less code you have to write to to do anything, the better. The less code you have to be responsible for, the better.

If you're getting bogged down in installation or versions or any of this stuff Yeah. You're gonna hate yourself. So, you really want to have a as minimal of a setup as possible. And this is where I think Wes idea really shines here. CSS, Wes Wes is the demo king. He's been doing hot tip demos since, most of us were in diapers. Right? And so, in that regard, he has this hot tips Deno, which we'll share, and you can certainly fork this thing. It it's really amazing, and you can see exactly how he he creates all of his demos. I took his and I forked it and I tweaked it a little bit, and I have mine. It's called cool treats. It's I don't have any demos in it. I've been spending all my time working on the the the cool The treats. Tickets of the demos. Yes.

That's my my exploration.

But what makes these things really cool is that for Wes' Scott tips idea, you really just have to create a folder, have an HTML file, and that's it. And then You don't even need a folder. Yeah. Oh, yeah. You just need an HTML file. Right? And then when you have that process being run, obviously, there's a a a development process there. But, typically, it's something you already have preset up. So that way, when you're inspired, you create an HTML file or you create a folder, a HTML and JavaScript even a TypeScript file, and then you just navigate to it, and it runs.

Yeah. So it's it's a folder with every single demo that I'm working on. So anytime I wanna fiddle or fuss with something, I go into the it's it's a folder called code, and I either make a folder if it's gonna be more than Node files, or I just make an HTML file if it's a single file, and I name it whatever I want. And I type npm Scott, and what that does is it fires up a Vite server that will also give you a directory listing of all the files in there. I've separated that part out into an Npm package called v dir. So if you type n p x v dir, it will just immediately fire that right up for you. But But I've taken it 1 step further in my hot tips repo where I can have, like, a nested package JSON if I want to have my own project inside of it. And then but I can still just run it from the same process, which is really nice. But then I can also I have one prettier config for it. I can override it per project if I want to. It's all compiled on demand. So you visit some crazy navigator Scott new thing and it will just fire up a server, has SSL certificates already for you. I have tips Scott local host mapped to it so I can go directly to that. It has library load built right in, and when you type npm start, it automatically opens up the latest edited HTML file in the browser. So I don't even have to, like, find where the folder is that I'm working on. And, like, that is so handy just to be able to quickly get up and running. The one thing I don't have with it just yet, and I played around with it for a bit, is it's all in a GitHub repo. Right? And if I wanna send somebody like, the other day, I sent Scott a media recorder example, and I said, you have to download it and run Vite whatever on that thing. Like, what would be cool is if I could run development or Node demand via that in in production. Like, I want a website I can send to people, and they can also visit that. And I don't think that would be all that difficult Yeah. To do because there's no like, I don't wanna run a build command and run, like, have a 1,000,000 different inputs for each of those. I just wanna be able to link somebody to an HTML file with TypeScript and CSS and node modules and for it to just work. And I think you can do that with the programmatic v API.

Yeah. That would be a nice little upgrade. Because if you think about it, you do kind of get, like if you start building enough demos, you get kind of, like, a whole little demo site going. Maybe you even attach that to your blog or you link to it from here or there. Yeah. And suddenly, what you're not doing is you're not linking to some third party service that might not exist in 5 years. You're linking to your own stuff and your own stuff that's backed by Git and version control that's not living in a database.

I I think it's a really cool I I took so what I did at Wes is I took your Deno, and I added, like, templating support to it. So, basically, you can have an HTML wrapper.

That way, you can have base CSS for each of your Deno. And then there I made up a little just like it's not a specific actual templating language because it's not robust. It's just like a bracket percentage sign and then the name of the HTML file. Yeah. And it finds that as a HTML file and inserts it there. That way, I have default CSS. I have a default header, and the default header has a, like, back to demos button, and then it has a show code button which links to GitHub.

So that way, any of the demos could automatically have, like, a link to code button.

That would be in preparation for this to be public. And it'd also be in preparation of me actually writing any real demos. I I do have I do have 2 demos. I have a Wes mini demo where I was experimenting with I connected a mini keyboard to my computer, and I was playing tones with it. And then I also did a demo with p three j s. Another thing that I added to mind just recently, Wes, was, like, a default template and in a template script.

So I added the p n p m new and then the name of a demo.

So if I wanna create a new demo, pnpm new Wes, and it would create a folder with test Scott HTML and test Scott t s for me right there. So I wouldn't have to create those files or link them myself.

Very, very simple Bos That's Yeah. Templating. Every hot tip I do, make an index HTML hit exclamation mark tab to get HTML, link up the the script tag. If it's external script tag, link up the CSS.

That's just extremely simple scaffolding. Yeah. Takes 30 seconds out of it, and you're you're up and running. Right? Like, even on this podcast, sometimes we are talking about something and we need to go test something.

I will do this process where I make the HTML file. So, like, sometimes it's even faster to do that. Yeah. Yeah. You have the cool thing is is if it's your demo engine, you get to do stuff like that to it. You you could take somebody else's base system and start to add on to it. But it it my my the reason why I like this approach more than anything else besides the fact that it's running locally on your machine and it's fast for those reasons, right, you're it's you're running you're not on off some third party service, you get all of your own local tools. If you are a Vim user, if you're a Neo Vim user, if you're a Versus Node user, whatever, you get to use that stuff without having to use some Wes UI for an editor where you hit command s and Yarn pop up pops open the side menu because they, have bound command s to the browser as a shortcut. You know? It it's stuff like that where you get to actually work in a real ID, a real text editor, and with all of your shortcuts and your fonts and all that stuff, and it feels so much nicer than typing in a Wes UI.

Nothing beats it. I'm I'm even thinking, like, you know, BUN has, like, the file system router? Yeah. Is there something there that you could do? Because There's something there. I I kinda miss, and and this might be getting ahead of myself, but, sometimes I I think, oh, this demo would be better if it just had a little bit of reactivity.

And I find myself loading, Preact's signals library, which is Mhmm. Every time I say it, I have to say it's not React only. React signals library works with vanilla JavaScript.

And it's really nice because you can like, for my webcam example, I when you wanna get the user's webcams, like, the list of all of the available webcams, you first have to request one of the webcams. And then once you have access to that, you can get a list of all of them.

And, what it is, I just created an empty array of webcams. And then once I have access to it, I simply just update that array, and then it's it's all reactive. It just updates. Right? It's like a a JavaScript library without the overhead of, Yeah. Having to to do that type of thing. I would love that, but maybe even a little further with some maybe, like, a server side route as well. I'm gonna tell you. I used that

BUN file routing for my, hype framework that I was working on with It was definitely easy. It was it was really cool. A lot of basically, it just gives you a function that allows you to look inside of a folder, and then it gives you files to load. And you can load which ones you want easily enough. For me, if there were Svelte, I had to run it through the Svelte, like, compile function or whatever whatever it ends up being. You can return any HTTP response. So if it's just an HTML file, you can just return it as an HTML response.

Oh, so I could I could throw an HTML file or a a JSX file in there and say Wes it's HTML, then run it through Vite. And when it's when it's programmatic version of Vite, which I have not done. But yeah. That that's exactly what I I had was working on. I was like, I can I run I just wanna run vdev mode in production? Mhmm.

You know? And but then I also don't wanna, like, run a server, every single time I wanted to run it serverless.

So I had built a demo that inlined that ran Vite against the HTML file and inlined everything. Every image was base 64. All the CSS and all the JavaScript was inlined, and it it actually worked pretty good, but it it needed that, like, last step. Why why is it gotta be serverless? Because I didn't I Wes it doesn't have to be, but, like, I just didn't want to be running, an entire server just for this type of thing, or I wanted to just do it on demand. But, like, I don't know. I could I could throw it on even, like now I wanna try COOLIFY, so maybe I should be doing it in a long running server, then I just have to run Vee. Right? Yeah. Right.

Yeah. It sounds like the server won't be able to handle it. I mean, it's really efficient. Dev server run? Oh, I just restart it every

hour or 2. No. It runs more than it runs longer than that. I've sometimes have stuff running for weeks. Yeah. Couldn't you just have it even be watched with forever or whatever anyways? Yeah. Or, I mean, Coolify would do that for you. So yeah.

You're making me think.

I know. I know. There's so many cool things here. And and, in fact, it's like it's hard not to get bogged down in that stuff because for me, man, I like working on that kind of stuff. I I could like going nuts working on this stuff all day. But another cool thing here beyond bringing your own tools is, like you mentioned, if if you're hosting this in, like, a parent project, you can do things like having all of your format errors or linters or all that stuff set up and configured once. We all complain about config files being an absolute mess. Can you imagine anytime you're spinning up a demo, you have a new project with a 100 config files in there, whatever you have, you know, even it's just 4. This, you get to have them once, and then you can, you know, you can override them if you put them in the folder. And I think that's, like, a a really nice thing to be able to do. Right? You can use your standardized way of doing things. Not only that, you can share CSS.

You can write 1 CSS variables file and use that in all your projects, or maybe you're linking it with post CSS. It could be your project. You can do anything with it. And I think that's just a really nice little hack. If you take hour or 2 to set up something like this, even just fork Wes and just, you know, make your own demos instead of using his. That's it. That's all you gotta do.

Yeah. I'll I'll link it up in the the show notes here. But again, you don't even you don't even need to fork mine. You just run.

Yeah. Npm v dir and it will give yourself, it'll give you an HTML file for the root, and then you can just start making files from, from there on out. I Node it specifically for my TypeScript course because we have so many little demos that I wanna be able to to navigate to, and then having, like, a package JSON for every single demo is brutal. You know? Like, I think you got a node modules for every single one, and then you got a finished version and a a Node. And it's just, like, before you know it, you've got 18 different node modules, and, it's just too much.

It's it's also hard to share that stuff too. I love so much about the Scott tips repos. You just give somebody an HTML file, and the only weird thing is that it's

linking to a type TypeScript file instead of a JavaScript file, but That's probably for the best. Yeah. That's probably for the best, honestly. I like that you get to use those types of things.

Let's talk about working with data really quick here because anybody who's worked in, SQL based databases know that the moment that you wanna start saving data somewhere, you're like, oh, I gotta write my schemas. I gotta worry about migrations and all that stuff. So let's talk about what are the easiest ways to get data, for something like this. A a low key, super easy way to to have data stored is is just write it to a file. You could just write data to a file if it's local or anything like that you have access Wes. Node you can just write data to a file. You can even throw it in local storage if you wanna throw it in local storage, and it doesn't need to be, like, permanent data or something like that.

Yeah. That's usually what I go for because I find myself making these demos, and then I find myself wanting to save some of this data.

And and usually Wes I'm doing, like, a server side version of it, I just I just run, TSX. And TSX execute, and it runs like a quick node server, or I'll just run BUN or Deno.

And and then you say, I wanna save this data, but I don't wanna have to do the whole schema definition thing. I just wanna save it somewhere really quickly. And a file is really good at that. If not, there's a package I've used quite a bit called LowDB.

I've used another one called DiskDB, but I just looked it up, and there's like I feel like I might be the only person that actually uses it. It's Scott, like, a 100 100 downloads a month or something like that. But Node is is a schema less database that will write to file, and it's it's kinda like local storage. Right? You just put, and then but when you restart the process, your data is is still there. Key value is also really good for for that type of thing. And now those are built into BUN and, Deno. So key value is a good spot to throw stuff as well if you really don't care about the schema.

Yeah. It it's funny that you mentioned being the only user or something like that. There was a package that I was using that was it was just a caching in JavaScript memory or it's just caching in memory, right, in JavaScript.

But it the only thing that the package was special about it is that it had the complete Redis API.

So you could use the same Redis code you had before, but it was saving it to local memory. And I don't know. I was, like, the only person using this package. The same thing I was like, I thought this was something everybody JS using, and I looked at that. I was like, We got a 100 100 people using this thing. Okay.

That's great. I also will reach for SQLite and do a quick drizzle schema, because it's not that big of a deal to write a quick drizzle schema. The SQLite database is just a file in your folder, so you don't have to run a server or something like that. The only annoying thing I find with that is that you have to do the schema, and then you gotta do the you gotta generate the migration file, and they gotta apply the migration file. So that's obviously, it's it's somewhat quick, but when I'm just, like, playing really quickly,

sometimes I just wanna just save it somewhere really quickly as as fast as I can. Yeah. I think that that's the key that low d b seems like the best option for writing to a file. Also, people who are experienced with Google Sheets, you know, you can write stuff to Google Sheets as well, and that's a a free database. You know? It's a CSV. You can just throw it into Google Sheets. I I don't do that a lot myself, but I know a lot of people do. So the the exact process for that, I'm not going to outline here, but it's an option. It's a free database. It's a a CSV. Yeah. For sure. Yeah. There was there was 1

the other day. Let me let's find it. Hold on. Okay.

I I don't know if this is if this is it or not, but I remember seeing people use Google Sheets, but, like, have a JSON API for it really Sanity. Because I imagine using the Google Sheets API is a whole day of Yeah. Node. Thanks. Procuring API keys and and whatnot in the in that Google thing. So SheetDB,

turn a Google spreadsheet into a JSON API. Yeah. Well, if you're out there and you do, some fun demos and have your own process for doing this or maybe even some interesting ways to quickly and easily store data if you would need to do that, leave a comment. The best place to do that is on YouTube. So youtube Scott comforward/atsyntaxfm.

This this is, this episode will be a video on YouTube. You can leave a comment there, and we read all the comments. So I wanna see what types of cool demo apps you're building, where you're building them, how you're building them, and maybe tell us, like, what services do you prefer? You know, do you like Val Town? Do you like Observable? Do you like Replit? What's your, what's your vibe? Are you doing all the stuff bespoke like Wes and I are? Hot hot tips and cool treats. So Cool treats is so good.

I had to I had to do a a reference to what you were doing, and I, you know, didn't wanna you know, I had to had to put my own spell on it. That's good. It's like Dairy Queen. It's exactly what it is. Yes. Yeah. Cool. Alright. Thanks, everybody, for tuning in. Catch you later. Peace.