0:00

Oh, come to Syntax on this Monday hasty

0:02

treat. We're gonna be exploring some ideas on

0:04

how you can explore your ideas Encoding: We're

0:06

going to be talking about all the different

0:08

ways you can get up and running quickly

0:11

with demos to explore any ideas that pop

0:13

in your head hate you thought of something

0:15

in Css. you gotta get it down on

0:17

paper really quick That been that will you.

0:19

Don't forget it. You can maybe validate your

0:21

idea before tossing and into a real project.

0:24

Where to be talking all about services you

0:26

can use to do this or just ways

0:28

that we like to do this ourselves. Money

0:30

Miss Got to Lynskey. I'm a developer

0:32

from Denver with me as always is

0:35

west boss. Hey excited! Talk this. I

0:37

think it's kind of important to know

0:39

how to if you have an idea

0:41

or if you have a problem. Being.

0:44

Able to quickly get that up

0:46

and running. It somewhere

0:48

with quick feedback into see how it

0:50

works is is really key both of

0:53

you're trying to. Send. A demo

0:55

to somebody else or if you just like see

0:57

a new A P I hear about us talk

0:59

about it on syntax and you want to try

1:01

it out. That zero to sixty of like. I'm.

1:04

Up and running with this type of thing is really important

1:06

because I don't have a year because if it's too hard

1:08

than I'll just like. Oh you.

1:10

Wanna go ride bikes? Yeah, you're the

1:12

worst thing in the world is you're

1:14

eating there. You have a seat of inspiration.

1:17

You're like oh I gotta try this

1:19

out. This is gonna be so exciting.

1:21

You sit down, you start to install

1:23

a build process or grade. Am

1:25

react app are you know usually eat

1:27

or whatever and you spend some time

1:29

getting your tooling up and running. You

1:31

pick your frame were you start to

1:33

code on and near to psych. I'm

1:35

tired, I'm not ready for a nap

1:37

and it is not. I guess that

1:40

hard. but like. When you have

1:42

an idea. It's. Really nice to

1:44

be able just start working on that idea

1:46

that mom. and maybe it's just because I'm

1:48

hyperactive. but if I if I don't make

1:51

get that idea out of my brain, I

1:53

begin to like, really get distracted and start

1:55

to think about something else really quickly. So

1:57

there's a a number of things that we.

2:00

do both online and in little

2:02

services here as well as

2:04

we're going to be talking about code platforms you

2:06

can have for yourself. You set it up once

2:08

and then you can use it for all

2:10

your own demos for even be talking about easy

2:13

ways to work with data as

2:15

well. But before we get going, if

2:17

that little idea that you have blossoms

2:19

into a massive project, you're going to

2:21

want to throw century on that thing

2:24

to make sure that you're tracking all

2:26

of your errors and exceptions. So head

2:28

on over to century.io/syntax, sign in again

2:30

two months for free for really the

2:32

best platform for error tracking, performance

2:34

management. I mean, we find so

2:37

many different little things, whether it's

2:39

like slow database queries, slow pages,

2:42

caching opportunities or bugs. And now

2:44

we're tracking metrics with this new

2:46

metrics API that's in beta. So

2:48

we can check any time. It's

2:50

like analytics. Anytime anybody listens to

2:52

a specific episode, we can know

2:55

about which episodes are being clicked on and

2:57

we can track listens on our own

2:59

website rather than having to reach for

3:01

Google Analytics or even a third party service

3:03

for that. And you can tie it all in

3:06

together with the rest of your century information is

3:08

really pretty slick. So let's

3:11

get on into it and let's

3:13

talk about I think I think a good

3:15

place to start would be JavaScript services because a lot

3:17

of us are writing JavaScript. That's like a big part

3:19

of this podcast. So if

3:22

you need an idea down on paper,

3:24

and maybe it's just

3:26

that you're learning JavaScript and you have an idea

3:28

for like technique, or maybe you want to see

3:30

if something works, or maybe you have some data

3:32

and you just want to iterate over it. There's

3:35

a number of quick services you can use to just

3:37

get this going. In fact, many of

3:39

these people have either been on the show or we've talked

3:42

to them before. And one of

3:44

these services is Valtown.

3:47

And Valtown is a really great social

3:49

network. And this really is more of

3:51

a social coding platform than I would

3:53

even say GitHub is because it's very

3:55

Social. You Can write these little snippets,

3:57

you can execute them, you can import

3:59

other people's. Snippet and then it

4:01

has Really cool fantastic get it's so

4:03

cool he said it's a good hub

4:05

just could run and eight of us

4:07

lambda was fun, it rhymes and honestly

4:10

it's great in a i saw the

4:12

gotta a big guy funding round to

4:14

so vile towns not going anywhere if

4:16

you were are concerned about that it's

4:18

us Really cool little side here. Yeah

4:21

if you, if you ever find yourself being

4:23

like man I would love to. Run

4:26

a scraper or I would love to

4:28

interact with Spotify a P I N

4:31

poll once a day. Email myself my

4:33

best, my top tracks or like literally

4:35

anything valve home. In. Has

4:37

a lot of like little built in

4:39

libraries you can require other people's. Libraries.

4:42

You can run a cron jobs and

4:44

it's really close. Sick that the barrier.

4:46

To to entry is.

4:49

At. The lowest it's ever been with with

4:51

val town and I think that that's what

4:53

makes it really cool for anyone who just

4:56

wants say something up and running really quickly.

4:58

you know, cause if you're not using. Something.

5:01

Like val town? Then you got em. Vs

5:04

on in your front end in the back

5:06

and news host to somewhere you need to

5:08

like. Restart the saying he had Mtm install

5:10

their see I there's There's quite a bit

5:12

to the cyber thing, especially like when it

5:14

goes past settling around which is most of

5:17

what I do with this type of stuff

5:19

is just fiddling around, but it goes past

5:21

So as you want to run this every.

5:24

Once a day or when people visit the are all.

5:27

The our gaze it's really pretty fantastic. An

5:29

immunity about platforms like this you wonder if

5:31

like all the ideas of the been explored

5:33

considering it's like what else could you be

5:36

under a rebel and I think this is

5:38

like a really. Unique. Approach

5:40

to solving this problem in i think

5:42

it is it really succeeds. Another thing

5:44

in the same kind of world is

5:47

observable Hq and they kind of brand

5:49

themselves as being the best place to

5:51

dashboards, but it's it's really more than

5:53

that. We talked a little bit of

5:56

go about writing. Like. Jupiter. No

5:58

bugs with the tape script. In

6:00

Javascript like what is the good flow for that.

6:03

Either I think observable excuse the best

6:06

low for that and that's really what

6:08

it is. More so then building dashboards.

6:10

I mean it gives you basically ability

6:12

to. right? And then

6:14

drop in code snippets and maybe they're

6:16

pivoting to be more a dashboard type

6:19

of service. Maybe that's that's where their

6:21

marketing has had it's but it is

6:23

really really good product to. On top

6:25

of that you use marked down and

6:28

then you can toss in javascript sequel

6:30

python are in languages in there and

6:32

have like little mini apps in your

6:34

coat. It's really got yes the

6:37

the notebooks is a thing is is

6:39

really interesting to me because. I've.

6:41

Had this problem for for quite a

6:43

long time and in we even have

6:45

a little bit with the show notes

6:48

right now as that's we want a

6:50

good note taking experience that is. Like.

6:53

That uses markdown right? Like a when I

6:55

plan a course I write all my aunts

6:57

and markdown and but then I also have

6:59

a whole bunch demos and stuff that goes

7:02

along with the course you know and and

7:04

some of those are our front and demos

7:06

that the summers are server side demos and.

7:09

A for the longest time the like

7:11

as way to do this in the

7:13

Python world was a single Jupiter notebooks

7:15

which is why Observable Hq is is

7:17

built on top of and I've always

7:19

looked at that and it's extremely big

7:21

in the like data science world's because

7:23

a data science world can be like.

7:27

Well era where we're looking at

7:29

a process for a grouping like

7:31

elements into filtering them into groups

7:33

and then it will just like

7:35

immediately next line of the chunk

7:37

of code. Imports. And data

7:39

shows how you loop over it and then

7:41

below it. You can actually click the button

7:43

and run it and see the actual output

7:45

of and us again. That's that's kind of

7:47

what I want right in. I kind of

7:49

want to be able to write my marked

7:51

down and I want to be able to

7:53

like author my type script or whatever in

7:55

my code editor. Get all the

7:58

stuff that I'm used to and then. Are

8:00

also run it in the same go and

8:02

for long time as like we need this

8:04

for javascript and there was a couple hacks

8:06

and he observable H T works by it.

8:09

Like. It It doesn't work locally. Nuts? I was

8:11

that. the killer for me with these things is

8:13

that I just want my editor. You know, like

8:15

I want to feel comforted by want to be

8:18

home. I don't want to use some other web

8:20

site where I don't have all my snippets and

8:22

linters and everything totally built in. but. A.

8:24

Couple days ago. Our a couple months

8:26

ago. Dino. Announce. Support for

8:29

Jupiter Know Bucks many nights with with Jupiter

8:31

Know Bucks like. The idea is that you

8:33

have this I Q, M B D file.

8:35

it's some weird extension and you're right, you

8:38

know but in there and then when you

8:40

want some code you add a code block

8:42

and you can write the code in there.

8:44

But how would actually runs his V of

8:47

the course and you can Now Dino has

8:49

a A core where you can run. Your.

8:52

Servers I Javascript via Dino. And

8:54

then it will pass back to you

8:56

either Data: Are you even decide how

8:58

how the output is displayed by? One

9:00

of things you can pass back is

9:03

Html or React components or charts or

9:05

like. There's all these different ways you

9:07

can display the data that gets passed

9:09

back in a Jupiter notebook. so I

9:11

dipped into it. For. Of a

9:13

weekend at one point may still haven't

9:15

like moved my whole process over to

9:18

replace. Pretty. Excited about that

9:20

type of thing. I don't know if that's

9:22

really like them. It's

9:24

more of like a note taking experience

9:26

for me vs like of making demos

9:28

but very excited about it. yeah

9:31

and i have never heard of that

9:33

i love that is it feels like

9:35

that's where dino is exploring and really

9:38

evolving the platform right with or that

9:40

is their new package manager or stuff

9:42

like guess they're they're really i think

9:44

they're exploring some cool air areas i

9:47

honestly have have never heard of this

9:49

until just now and gets pretty neat

9:51

in a one other thing i really

9:53

like is small rebels and playgrounds for

9:56

various projects you the one that i

9:58

think of is being you definitely

10:00

a trendsetter here is

10:02

the Svelte REPL on Svelte.dev. If

10:05

you go to Svelte.dev, you

10:07

can click examples and see a bunch of

10:09

examples and mess with them or you

10:12

can click REPL and have essentially a

10:14

code pen, code

10:17

sandbox style REPL here and

10:20

just start writing Svelte. And I think this went

10:22

a long ways for people who

10:24

had never used Svelte to see it in

10:26

action and be like quickly without

10:28

installing anything, without writing this on your

10:30

own code. And since then a lot

10:32

of other folks have done this as

10:34

well. I know Solid has a playground

10:37

like this but many other people at

10:39

Tailwind etc. they have playgrounds and that

10:41

to me is like a really nice

10:43

thing especially the playground works the best

10:45

when you can log in with github

10:47

and you can just save it right

10:49

there. That way you can have a

10:51

catalog of every exploration you've ever done

10:53

or if you have bugs in

10:56

the thing you're writing you can share it with folks

10:58

on the development teams

11:00

there. But I use the Svelte REPL

11:02

all the time for validating ideas definitely.

11:04

And beyond that if you want to

11:06

take that into a more simple path

11:09

I would say code pen is

11:11

the one that you see being most used

11:13

for CSS based stuff. And code

11:15

pen has a really great community.

11:17

Granted you can write JavaScript HTML

11:19

and CSS in code pen but

11:21

I think where code pen really

11:23

shines is the community around what

11:26

people are building and the fact

11:28

that there is sort of blog

11:30

like aspects of code pen where

11:32

you can see in code the

11:34

most popular projects of any given week.

11:37

You can see visually aesthetically and a little

11:39

embed how cool they are and then you

11:42

can say oh I want to

11:44

explore that and maybe take that idea

11:46

you can quickly fork it and quickly

11:48

start using it. So to me that's

11:50

really where code pen shines is that

11:53

this social sharing aspect and inspiration

11:55

aspect if you're looking to like how

11:57

can I do cool stuff you

11:59

end up following the people who do cool stuff and then

12:01

see how they did it. Bingo bango, you're learning all

12:03

kinds of stuff. Yeah. And I

12:06

know CodePen is working on CodePen

12:08

2.0 or something like that. I've

12:11

heard rumblings of it. So I'm excited

12:13

to see what they come out with as

12:16

well because there's a million like VS code

12:18

in the browsers. IDX, StackBlitz,

12:20

CodeSandbox, Gitpod, Replit. There's 10,000 of

12:24

those things and they all have

12:26

their own benefits. I know they're not exactly all

12:28

the same, but I go

12:31

to those places to put my bugs and

12:34

I go to CodePen to find inspiration

12:36

and look for buttons and share cool

12:38

CSS things that I'm doing with people.

12:42

Yeah, they're not the same in that regard, which

12:44

is funny because you could make a strong argument

12:47

that something like Replit or

12:49

CodeSandbox or any of these things,

12:51

StackBlitz, Gitpod, they're all... You could

12:53

make an argument that they're better

12:55

because you got your back-end support.

12:58

You got ID. You got your full

13:00

standard kind of like web experience or

13:02

editor experience that you might be used

13:04

to. And in that regard, tools are

13:06

better, but like the social aspects may

13:08

CodePen really one of the better services

13:11

for exploring and getting inspired

13:13

visually. So those are many

13:15

of the different services you might want to use

13:18

if you're just quickly spinning up a project. But

13:20

again, I might even stay away

13:22

from some of the full stack ones

13:24

unless you're like really writing features for

13:26

the full stack application because when you're

13:29

exploring an idea or you're putting together

13:31

a demo or you're trying out something,

13:34

the less code you have to write to

13:37

do anything, the better. The less code

13:39

you have to be responsible for, the

13:41

better. If you're getting bogged down in installation

13:43

or versions or any of this stuff, you're going

13:45

to hate yourself. So you really

13:48

want to have as minimal of

13:50

a setup as possible. And this

13:52

is where I think Wes's idea

13:55

really shines here. So Wes, Wes

13:57

is the demo king. He's been doing hot tip

13:59

demos. Though since most of us were

14:01

in diapers, right Sam. So. I

14:05

air in that regard. He has this hot

14:07

tips repo which will share and you can

14:09

certainly for this thing is it's really amazing.

14:11

You can see exactly how he he creates

14:13

all of his demos. I took his and

14:15

I for didn't I tweeted a little bit.

14:18

I have mine is called cool treats its

14:20

it. I don't have any demos and I've

14:22

been spending all my time working on that.

14:24

the to secure the who wrote the job

14:26

with the at or that's my my exploration

14:28

but what makes these things really. Cool

14:30

is that. For. Bless his.

14:33

Heart. Tips: Idea. You

14:36

really just have to. Create.

14:38

A folder. Have an

14:40

Html file. And. That's it.

14:42

And then you don't even need a

14:44

folder. Yeah, oh yeah, you just the

14:46

in a similar right. And then when

14:48

you have that process being run, obviously

14:50

there's a L A development process there,

14:53

but typically it's something you already have

14:55

pre set up. So that way when

14:57

you're inspired ukraine Html file, or you

14:59

create a folder, html and java, scrip,

15:01

or even a type script file and

15:03

only just navigate to it and it

15:05

runs. Yeah. So it's. It's.

15:07

A folder with every single demo that

15:09

I'm working on. So anytime I want

15:11

to settle our fuss was something I

15:13

go into the As as a folder

15:16

called code and I either make a

15:18

folder if it's gonna be more than

15:20

one spot files or I just make

15:22

an Html files. It's a single file

15:24

and a name at whatever I want

15:26

and I type and Pm starts in.

15:28

What that does is it fires up

15:30

as eat server at that will also

15:32

give you a directory listing of all

15:34

the files in there I'm I've separated

15:36

that part out into. And

15:39

Ntm packets called. The. Their

15:41

says he type mtx. Vietor.

15:44

It. Would just immediately fire that right up

15:46

for yachts, but I'm taking it one step

15:49

further. My hot tips repo! where. I

15:51

can have like a nested package days on if

15:54

I want to have my own project, insight,

15:56

events, and and but I can still just run

15:58

it from the same process. Which. Is

16:00

really nice but then I can also.

16:03

I have one prettier can fake for it.

16:05

I can override it per project if I

16:07

want to. It's all compiled on demand so

16:10

you you visit. Some. Crazy

16:13

Navigator.new things

16:15

and. It.

16:17

Will just the fire up? A server

16:19

has Ssl certificates are ready for you.

16:21

I have. Tips.local: host maps

16:23

to it so I can go

16:25

directly to that's as library load

16:28

built right in and when you

16:30

type Ntm start it automatically opens

16:32

up the latest edited Html file

16:34

in the browser so I don't

16:36

even have to like find. Where.

16:39

The folder is that I'm working on and like that.

16:41

a so handy to see below the quickly get up

16:43

and running. The one thing I don't have with it

16:45

just yet and I played around with it for a

16:47

bit as. It's all in a get

16:49

have repo. Rate. And if I

16:51

want to send somebody like the other day

16:53

I say scott a meteor a quarter example.

16:56

And I said yeah. so downloader and runs

16:58

eat whatever on that thing. My woes be

17:00

cool. Is. If.

17:03

I could run the

17:05

development or viewed on

17:07

demand. Via that in in

17:09

production like I want to website I can send

17:11

to people and they can also visit that. I

17:13

don't think that be all that difficult sell to

17:15

do because there's no like I don't want to

17:17

run a build command. And. Run.

17:20

They have. A million different inputs for

17:22

each of those. I just want to be

17:24

able to link somebody to an Html file

17:27

with type, script and Css and node modules

17:29

and for it to just work. And I

17:31

think you can do that with the programmatic

17:33

V A P I. Guess.

17:36

that would be and i love great because

17:38

it's think about it you do kind of

17:40

get like if you start building enough demos

17:42

you get kind of like a whole little

17:45

demo say going maybe even a test bed

17:47

tier blogger you linked to from here there

17:49

and suddenly what you're not doing is you're

17:51

not linking the some third party series that

17:53

may not exist in five years you're linking

17:55

pull your own stuff and your own stuff

17:57

that's backed by him get and version control

17:59

it not living in a database. I

18:02

think it's a really cool, I took,

18:04

so what I did was I took

18:06

your repo and I added like templating

18:08

support to it. So basically you can

18:10

have an HTML wrapper, that way you

18:12

can have base CSS for each of

18:15

your demos and then I made up

18:17

a little, just like, it's not a

18:19

specific actual templating language because it's not

18:21

robust, it's just like a bracket percentage

18:23

sign and then the name of the

18:25

HTML file. Yeah, and it

18:27

finds that as a HTML file and

18:30

inserts it there, that way I have

18:32

default CSS, I have a default header

18:34

and the default header has

18:36

a like back to demos button and then

18:38

it has a show code button which links

18:40

to GitHub. So that way any of the

18:42

demos, you automatically have like a link to

18:45

code button. That would be

18:47

in preparation for this to be public. And

18:49

it'd also be in preparation for me actually

18:51

writing any real demos. I

18:54

do have two demos, I have a web

18:56

MIDI demo where I was experimenting with, I

18:58

connected a MIDI keyboard to my computer and

19:00

I was playing tones with it and

19:03

then I also did a demo with P3JS.

19:06

Another thing that I added to mine just

19:08

recently, Wes, was like a default template and

19:11

then a template script. So I added

19:13

the PNPM new

19:16

and then the name of a demo. So

19:19

if I wanna create a new

19:21

demo, PNPM new test and it

19:23

would create a folder with test.html

19:25

and test.ts for me right there.

19:27

So I wouldn't have to create those files

19:29

or link them myself. Very,

19:32

very simple basic, yeah, templating. Every

19:34

hot tip I do, make an

19:37

index.html, hit exclamation mark tab to

19:39

get HTML, link up

19:41

the script tag, if it's external script tag,

19:43

link up the CSS. Yeah,

19:46

that's a great idea. This is just extremely

19:48

simple scaffolding, yeah. Takes 30 seconds out of

19:50

it and you're up and running, right? Like

19:52

even on this podcast sometimes we are talking

19:54

about something and we need to go test

19:56

something. I will do this process

19:58

where I make the HTML. I also like. Some.

20:01

Numbers even faster to do that. Gap.

20:04

Like. You have nothing is if it's

20:06

your demo engine. You. Get to

20:08

do stuff like that to it. Easy for

20:10

you could take somebody elses space system and

20:12

start to add on to it but it

20:15

it might might the reason why and like

20:17

this approach more than anything else besides the

20:19

fact that is running locally on your machine

20:21

and it's fast for those reasons right? Your

20:24

it's you're running you, not on acid, some

20:26

third party service. You get all of your

20:28

own local tools if you are a vim

20:30

user, if you're a new of him user,

20:33

if you're vs code user whatever you get

20:35

to use that stuff without having to use

20:37

some web. You why? For an editor where

20:39

you hit command as an arc pop up

20:41

pops open the side menu. Today I have

20:44

found command S to the browser as a

20:46

short you know that is. It's stuff like

20:48

that will you be to actually work in

20:50

a real Id? a real text editor and

20:53

with all of your short cuts in your

20:55

funds and all that stuff and it feels

20:57

so much nicer than typing in a web

20:59

you ice, nothing beats it. I'm I'm even

21:02

thinking like you know Been has like the

21:04

file system, router, Pr.

21:06

Is a sudden they're that you could yeah because there's

21:08

like the another that I i kind of mess and

21:11

as as might be getting ahead of myself but. Ah,

21:14

Sometimes I just I think ah the

21:16

summer would be better if it's sad

21:18

a little bit of reactivity it's and

21:20

I find myself loading pre acts signals

21:22

library which isn't Every time I said

21:25

I have to say it's not react

21:27

only me as Signal library works with

21:29

vanilla javascript arm and as really nice

21:31

because you can like for my webcam

21:33

example. I. When

21:36

you want to get the users web cams

21:38

like the list of all available web cams,

21:40

you first have to. Request.

21:43

One of the web cams and then once you have

21:45

access to that, you can get a list of all

21:47

of them and. or what it is

21:49

i just created an empty array of web

21:51

cams and then once i have access to

21:53

it i simply just update that array and

21:55

then it's it's all reactive is just updates

21:57

rates it's like at a jobs for fiber

22:00

without the overhead of having to do

22:02

that type of thing. I

22:04

would love that, but maybe even a

22:06

little further with maybe a server-side route

22:09

as well. I'm going to tell

22:11

you, I used that BUN file

22:13

routing for my hype

22:15

framework that I was working on with HTMx.

22:17

It was definitely easy.

22:20

It was really cool. Basically,

22:23

it just gives you a function that allows you to

22:25

look inside of a folder, and then it gives you

22:27

files to load. You can load which ones you want,

22:29

easily enough. For me, if they were

22:31

Svelte, I had to run it through the

22:33

Svelte compile function or whatever it ends up

22:35

being. You can return in the HTTP response.

22:38

If it's an HTML file, you can just

22:40

return it as an HTML response.

22:44

I could throw an HTML file or a JSX

22:47

file in there and say, when it's HTML,

22:49

then run it through VIT and when it's...

22:53

Yeah, you'd have to use a programic version of VIT,

22:55

which I have not done. That's

22:57

exactly what I was working

22:59

on. I

23:01

just want to run VIT dev mode in production. But

23:06

then I also don't want to run a server every

23:09

single time I wanted to run it serverless. I

23:12

had built a demo that ran

23:16

VIT against the HTML file and inline

23:18

everything. Every image was base64. All

23:21

the CSS and all the JavaScript was inline.

23:24

It actually worked pretty good, but it needed

23:26

that last step. Why's it got to be

23:28

serverless? Because

23:31

I guess it doesn't have to be, but I just

23:33

didn't want to be running

23:35

an entire server just

23:38

for this type of thing. I wanted to

23:40

just do it on demand, but

23:42

I could throw it on. Even

23:45

now I want to try Kool-afai, so maybe I

23:47

should be doing it in a

23:49

long-running server. Then I just have to run VIT,

23:51

right? Yeah, right. Yeah, it

23:54

sounds like the server won't be able to handle

23:56

it. How long will the VIT dev server run?

23:58

I just restarted every... Hour

24:00

two, you know, it runs more than that. It runs

24:02

longer than that. I've sometimes have stuff running

24:04

for weeks Yeah, couldn't you just have it

24:06

even be watched with forever or whatever? Yeah,

24:08

yeah, or I mean cool If I

24:11

would do that for you. So, you know

24:14

You think I know I know

24:16

there's so many cool things here And in fact, it's like

24:18

it's hard not to get bogged down in that stuff because

24:20

for me man I like working on

24:22

that kind of stuff. I could like that's working

24:24

on this stuff all day But another cool thing

24:26

here beyond bringing your own tools is like you

24:29

mentioned if you're hosting

24:31

this in like a parent project you can

24:33

do things like having all of your Format

24:36

errors or linters or all that stuff

24:38

set up and configured once we all

24:40

complain about config files being an absolute

24:43

mess Can you imagine anytime you're spinning

24:45

up a demo you have a new project with a

24:47

hundred config files in there? Whatever you have, you know,

24:49

even it's just for this you get

24:51

to have them once and then you can you know You

24:54

can override them if you put them in the folder And

24:56

I think that's like a really nice

24:58

thing to be able to do right you

25:00

can Use your standardized way of

25:02

doing things not only that you can share

25:04

CSS You can write one

25:06

CSS variables file and use that in all

25:08

your projects or maybe you're linking you with

25:11

post CSS It could be your

25:13

project You can do anything with it And

25:15

I think that's just a really nice little hack

25:18

if you take our two to set

25:20

up something like this Even just

25:22

fork wesses and just you know, make your own

25:25

demos instead of using his that's it. That's all

25:27

you got to do Yeah, I'll

25:29

link it up in the show

25:31

notes here. But again, you don't even you don't

25:33

even need to fork my used run Yeah,

25:36

NPX Sure feet there and

25:38

it will give yourself it'll give you

25:41

an HTML file for the root and then you

25:43

can just start making files From

25:46

from there on out I made it specifically

25:48

for my type script course because we have

25:50

so many little demos that I want to

25:53

be able to Navigate to and then having

25:55

like a package JSON for every single demo.

25:58

It's brutal, you know, like I think You

26:00

got a node modules for every single one, and then you got

26:02

a finished version and a not. And

26:04

it's just like, before you know it, you've got

26:07

18 different node modules, and

26:10

it's just too much. And

26:12

it's also hard to share that stuff too. I

26:14

love so much about the Hot Tips repos. You just

26:16

give somebody an HTML file, and the

26:18

only weird thing is that it's linking

26:21

to a TypeScript file instead of

26:23

a JavaScript file, but other than that.

26:25

Yeah, that's probably the best, honestly. I

26:28

like that you get to use those types of things. Let's

26:30

talk about working with data really quick

26:32

here, because anybody who's worked in SQL-based

26:35

databases know that the moment that

26:37

you want to start saving data

26:39

somewhere, you're like, oh, I gotta

26:41

write my schemas, I gotta worry

26:43

about migrations, and all that stuff.

26:45

So let's talk about one of

26:47

the easiest ways to get data

26:50

for something like this. A low-key,

26:52

super easy way to have data stored is just

26:54

write it to a file. You could just write

26:56

data to a file if it's local or anything

26:58

like that, you have access to node. You can

27:00

just write data to a file. You can even

27:03

throw it in local storage if you want to

27:05

throw it in local storage, and it doesn't need

27:07

to be permanent data or something like that. Yeah,

27:10

that's usually what I go for, because

27:12

I find myself making these demos, and

27:14

then I find myself wanting to save

27:17

some of this data. And usually

27:19

when I'm doing a server-side version

27:21

of it, I just run TSX,

27:23

and TSX stands for TypeScript, Execute,

27:27

and it runs like a quick node server, or

27:29

I'll just run bun or dino. And

27:32

then you say, oh, I wanna save this data, but

27:34

I don't wanna have to do the whole

27:36

schema definition thing. I just wanna save it

27:38

somewhere really quickly. And a file

27:40

is really good at that. If not,

27:43

there's a package I've used quite a bit called

27:45

lowdb. I've used another one called

27:47

diskdb, but I just looked it up, and there's like,

27:50

I feel like I might be the only person

27:52

that actually uses it. It's got like 100 downloads

27:54

a month or something like that, but lowdb is

27:57

a schema-less Database, That's-

28:00

We're right to file. And it's

28:02

it's gonna like local storage right you

28:04

the I put in there but when

28:06

you restart the process the your data

28:08

as is still there are t values

28:10

also really good for for that type

28:12

of thing and now those are built

28:14

into been and. Do.

28:17

You know, so. He values a good

28:19

spot to throw stuff as well. You really don't

28:22

care about the schemer. Yeah, I'd

28:24

It's funny that you mention being the only

28:26

users on you that there was a package

28:28

that I was using. that was he was

28:30

just a cashing in javascript memory as or

28:33

it's just cashing in memory right in javascript

28:35

but it's the only thing that the package

28:37

was special about it is that it had

28:39

the complete read S a P I so

28:41

you could use the same rate as code

28:44

you had I had it was saving at

28:46

a local memory and I don't know how

28:48

is like the only person using the saxons

28:50

to say because like I love this is

28:53

on the everybody. Is using and I

28:55

like the hot one hundred hundred

28:57

people using the thing. Okay. That's

29:00

great. I've also will reach for

29:02

a sequel lie and do quick

29:04

drizzle scheme. I'm not because it's

29:06

not that big of a deal

29:08

to write a quick. Doesn't

29:11

ski Mother's sequel I databases the file in

29:13

your folders. You don't have to run a

29:15

server something like that's. the only annoying thing

29:17

I fine with that is that you have

29:19

to do the schemer and then he added

29:21

to the you get to generate the migration

29:23

filed. They apply the migration file so that's

29:26

obvious it's It's somewhat quick by when I'm

29:28

just like. Playing. Really

29:30

quickly. Sometimes. I just wanna

29:32

just say that some are really quickly as

29:34

as fast as I can. Yeah, I think

29:36

that that's the key that low Db seems

29:38

like the best option for writing to a

29:40

file. Also people who are experience with Google

29:42

seat seen a You can write stuff to

29:44

google sheets as well. That's a free database.

29:46

you know it's a Csv in his throat.

29:48

And Google sheets? I don't do that allow

29:50

myself. I know lot of people do so

29:52

that the exact process for that. I'm not

29:54

going to outline here but it's an option.

29:56

It's a free database is a see as

29:58

yeah yeah for sure. He. There was.

30:01

There was one. The

30:03

other day let me slipped find it homeland and

30:05

Gov. I don't know as as

30:07

as is a zit or not but I

30:10

remember seeing people use google sheets and but

30:12

like have a jace on a P I'm

30:14

for it really easy because I imagine using

30:16

the do the ccp I as a whole

30:19

day as yeah nothing procuring a P, I

30:21

keys and and whatnot in the in that

30:23

google thing. so C d be. Turner.

30:25

Google Spreadsheet intuit Chase on a the I

30:28

guess. Well if you're of their new, do

30:30

have some fun demos and have your own

30:32

process for doing this. or maybe even some

30:34

interesting ways to quickly and easily stored data.

30:36

If you need to do that, leave a

30:39

comment. The best place to do as on

30:41

you Tube So you tube.com Ford Flash at

30:43

Syntax Sm This this is that this episode

30:45

will be a video on Youtube. Can leave

30:47

a comment there and we read all the

30:49

comments saw. Want to see what types of

30:52

cool demo apps you're building? Where you're building

30:54

them? How you're building them. And maybe

30:56

tell us like what services do prefer.

30:58

You know do you like val town?

31:00

do like observable d like rap little

31:02

whoa what's your what's your vibe? Are you

31:04

doing all the stuff bespoke like how

31:06

West and I are Hot hot tips in

31:09

cool treats. Salah is a circus that

31:11

ah had it had to do a

31:13

a reference to what you're doing and I

31:15

you know the owner had a had

31:17

put my own I like it I

31:19

look at sixty I clean as exactly what

31:21

it is. Yes. I

31:24

think they're ready for tuning in. Catch you later. Be.

31:26

Face.