How to Easily Explore Coding Ideas

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? And it's really nice because you can like, for my webcam example, 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.

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? pretty excited about that type of thing. I don't know if that's really like the TSX. And TSX

just for this type of thing, or I wanted to just

And I find myself loading, grouping

running, like, have a 1,000,000 different inputs for each of those. I just wanna be able to link somebody a a core where you can run your server side JavaScript via Deno, Yeah. That's usually what I go for because 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, 10,000 of those that is will reach for SQLite and do a quick drizzle schema, an entire server That's great. I also there. I I kinda miss, and and this might be getting ahead of myself, but, if I could run 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.

request one of the webcams. And then once you have access to that, you can get a list of all of them.

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, is via the course, and you can now Deno has because it's not that big of a deal to write a quick 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 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 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 some crazy

It was definitely easy. It was it was really cool. A lot of 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,

Preact's is is really interesting to me because

Because I didn't I Wes it doesn't have to be, but, like, I just didn't want to be to to entry is Very, very simple Bos That's Yeah. Templating. Every hot tip I do, make an index HTML hit it's a folder with every single demo that I'm working on. So anytime I wanna fiddle or fuss with something,

doing it in a long running server, then I just have to run Vee. Right? Yeah. Right.

I don't know. I could I could throw it on even, like now I wanna try COOLIFY, so maybe I should be

when you wanna get the user's webcams, like, the list of all of the available webcams,

any HTTP response. So if it's just an HTML file, you can just return it as an HTML response.

every single time I wanted to run it serverless.

And, in my code editor 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.

you first have to 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

So I had built a demo 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.

it's more of like a note taking experience for me versus, like, making demos, but very excited about it.

exploring and really evolving

like elements into filtering them into groups, and then it will just, like, immediately, next line, a chunk of code,

apps in your code. It's really cool. Yeah. The the notebooks thing Yeah. That would be a nice little upgrade. Because if you think about it, you do kind of get, like

but it's it's really more than that. We talked a little bit ago about writing,

for a weekend at Node point, and I still haven't, like, moved my whole process over to it, but that

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

like, Jupyter Notebooks with TypeScript

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 and the default header

file. It's some weird extension,

And a schema less

announced support for Jupyter Notebooks, meaning that

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.

Yeah. And I I've never heard of that. I love that. It it feels like that's where Deno is if if you're hosting this in, like, a parent project,

and I wanna be able to, a CodePen 2 ESLint o or something something like that. I've heard rumblings of it.

well, here, we're we're looking at a process for,

with with Jupyter Notebooks, like, the idea is, like, you have this IQMBD

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,

And they kind of brand themselves as being the best place to write dashboards, 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.

and linters and everything totally built in. But a couple days ago or a couple months ago, Deno 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

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

You're making me think.

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

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.

yeah.

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,

got 18 different inlined 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.

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.

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 is that for Wes'

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 And and usually Wes I'm doing, like, a server side version of it, I just I just run,

for every single demo and, it's just too much.

Yeah. Npm You know? And but then I also don't wanna, like, run a server, Nothing beats it. I'm I'm even thinking, like, you know, BUN has, like, the file system router? node modules,

v dir and it will give yourself, it'll give you an HTML file for the root, and then you can just start making

you're like, oh, I gotta write my schemas. I gotta worry about migrations stay away from some of the full stack ones, you know, unless you're, like, really writing features for the full stack application.

That's my my exploration.

development

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

edited HTML file in the browser. So I don't even have to, like, find

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.

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 and run, an Npm package called v dir. So if you type n p x

to an HTML file with TypeScript 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.

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,

and

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

Yeah. So it's

navigator Scott do it on demand. But, like, I

you really just have to

I go into the it's it's a folder called code, and I either make a folder like, author my TypeScript or whatever

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

which is really nice. But then I can also

new thing

Scott tips idea, the p n p m

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, like, uses markdown. Right? Like, when I plan a course, I write all my notes in markdown.

that will also give you a directory listing of all the files in there. I've separated that part out into

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

and CSS and node modules and for it to just work. And I think you can do that with the programmatic v API.

and I said, you have to download it and run Vite whatever on that thing. Like, what would be cool 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

But what makes these things really cool

is

have an HTML file, But it the only thing that the package was special about it is that it had the complete Redis API.

you can have an HTML wrapper.

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 that's not living in a database.

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

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,

sometimes I I think, oh, this demo would be better if it just had a little bit of reactivity.

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 of CodePen Wes you can see in code the most popular projects of any given week.

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

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,

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,

and your own stuff that's backed by Git and version control

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

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.

It it's stuff like that where you get to actually work in a real ID, a real text editor, and in a template script.

So if I wanna create a new demo, pnpm

new and then the name of a demo.

Yeah. Is there something there that you could do? Because There's something Mhmm.

exclamation mark tab to get HTML,

So I added

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

link up the the script tag. If it's external script tag, link up the CSS.

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

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

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 code sandbox style

something like Val Town, then you Scott, once a day or when people visit the URL.

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.

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

unique approach to solving this problem, and I think it it it really succeeds.

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

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

funding round too. So Val tone's not going anywhere if you were, concerned about that. It's a really cool little Sanity here.

So if you need an idea down on paper,

caching opportunities,

let's get on into it,

really, the best platform for error tracking, 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.

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,

to save some of this data.

memory or it's just caching in memory, right, in JavaScript.

And and then you say, I wanna save this data, 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 and then but when you restart Node demand 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

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 saving data somewhere, hype framework that I was working on with

I've used another one called DiskDB, but I just looked it up, and there's like

and it's it's kinda like local storage. Right? You just put, Yeah. If you if you ever find yourself being like, man, I would love to somewhere with quick feedback and to see how it works

it was just a caching in JavaScript 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.

execute, and it runs like a quick node server, or I'll just run BUN or Deno.

when you have an idea,

being able to quickly get that up and running 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

oh, you wanna go ride bikes?

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,

install a build process or create 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.

Sign in and get 2 months for free for,

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, 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. You know what the worst thing in the world is? You're sitting there. You have a seed of inspiration.

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, has a, like, back to demos button, and then it has a show code button which links to GitHub.

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, files Deno. So key value is a good spot to throw stuff as well if you really don't care about the schema.

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 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 write and then drop in code snippets.

some ideas on how you can explore your ideas 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

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.

Because when you're exploring an idea or you're putting together a demo or you're trying out something,

I go to those places to put my bugs, I find myself making these demos, and then I find myself wanting database that will write to file,

Wes is the demo king. He's been doing hot tip demos since, most of us were in diapers. Right? And so,

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,

Yeah. They're not the same in that regard, which is funny because you could make a strong argument that something like ESLint performance management. I mean, we find so many different little things, either whether it's, like, slow database queries, slow pages, 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.

the less code you have to write to to do anything, the better. The less code you have to be responsible for, the better.

or CodeSandbox

idea really shines here. CSS, Wes

you 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

things, and they all have their own, like, benefits. I know they're not exactly all the same, but, like, I

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

Vercel 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 Like, what is the good flow for that? 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?

Yeah. And I know, CodePen's working on, like,

for people who had never used Svelte to see it in action and be, like, 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

the community BUN file routing for my, and JavaScript.

you can click examples and see a bunch of examples and mess with them, or you can click REPL and have essentially a, 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 know, a a Node pen, It's really pretty slick. So 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 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

REPL here and just start writing Svelte. And I think this went a long ways

around what people are building. And the fact that there is sort of blog like aspects 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.

We got a 100 100 people using this thing. Okay.

you could use the same Redis code you had before, but it was saving it to local memory. And for various projects.

playing really quickly, 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

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,

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

So

leave a comment. The best place to do that is on YouTube. So youtube Scott comforward/atsyntaxfm.

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

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?

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,

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.

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.