How to Easily Explore Coding Ideas

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. 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.

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 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. 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.

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.

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

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

You're making me think.

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

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.

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,

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,