elm-land with Ryan Haskell-Glatz

elm-land with Ryan Haskell-Glatz

We discuss elm-land, how it compares to elm-spa, and its philosophy of making Elm mainstream.

PublishedSeptember 11, 2023

Episode#90

Ryan Haskell-Glatz (twitter) (youtube) (github) (sponsor)
elm-land
Elm Radio elm-spa episode
Evan's talk Let’s be mainstream!
"Take responsibility for user experiences" (from the Elm philosophy)
Ryan's live stream video 🌱 Upgrading from elm-spa • Elm Land LIVE
Ryan's experimental NPM tool css-in-elm
elm-land guide's section on components
Elm Radio elm-watch episode
Bats-core: Bash Automated Testing System
Join the elm-land Discord
Sponsor Ryan on GitHub

Transcript

Hello Jeroen. Hello Dillon. It's time to take off that face mask, take those cucumbers off

your eyes and get out of the spa because we are moving on to Elmland. Oh Elmtown is back

but you're going to Elmland? Absolutely and no more cringing at my pronunciation of it

because it's just Elmland, simple as that. I mean now you only you always say Elm SPA

so I'm good with it. That's fair. All that work for nothing. All that work for nothing

but if there ever comes a new Elm SPA then I know you'll be good. But now Elmland and

we have a nice guest with us. We have Ryan again. Ryan Haswell-Glass, welcome. Hello.

How's it going everyone? 1000% renamed the project because spa and SPA. Could not, I

didn't know how to resolve that conversation. But yeah, first when you said face mask I

was like oh god it's COVID. Like I was so scared. Like what's happening? Am I not in

the loop? And then the cucumbers. The cucumbers. That would be a weird combo. Yeah that brought

me back. I'm like ah alright I'm getting the visual. This is good. This is definitely better.

I was confused until a little bit later. But no it's great to be back. Thanks for having

me back on the show. Yeah great to have you Ryan. And well so we're here to talk about

Elmland and it is not quite 1.0 but why don't you just tell us like what is the gist of

Elmland and you know in a nutshell how does it compare to Elm SPA? Totally. Yeah Elm SPA

I mean if people walk away from this and be like oh Elmland's the next Elm SPA I'll be

happy with that. Elmland is kind of a I took a step back. I might have brought this up

on the previous episode of Elm SPA but when I first got into Elm SPA I really thought

I was just going to make an Elm package and that's all that I needed to do. I just wanted

to make something to make that boilerplate for like wiring up a browser application easier.

And as I started to like get deeper I realized I couldn't get the ergonomics I was looking

for without doing a little bit of code gen or generating those basically that case expression

in the update or in the view without having the person's custom type in my package there'd

be a lot of like pattern matching with underscores at the end. It was kind of a it wasn't a win.

So I didn't want to have that. I didn't want to have bugs for people forgetting to wire

things up. So Elm SPA was initially just like it kind of brings me back to like the early

days when I was learning Elm where we kind of had one tool for everything and that was

like I feel like a sense of like we had a sense of pride around that. It was like if

you want to use UI we have Elm UI. If you want to use GraphQL, Elm GraphQL. And if you

want to do routing, Elm routing, just kidding. Elm SPA because I had to break the pattern

there. But no like I feel like I wasn't interested in kind of providing answers for those other

areas but as I started to you know talk to more friends about Elm and try to figure out

like you know what's what's keeping you from trying it you know where'd you get stuck.

I started to realize that the holistic experience of building web apps is tricky and I wanted

Elmland to kind of be like hey let's just like handle the whole problem like how do

I do this how do I do that. Not necessarily make tools for everything but I wanted Elmland

to be able to just focus on like the most critical issue and address that. So that's

kind of that's kind of how Elmland spiritually differs I guess from Elm SPA if that makes

Right. So yeah philosophically I hear you talking a lot about Evans let's be mainstream

talk in this context. I believe that's the inspiration for the rainbow logo.

Absolutely. Yeah totally. Yeah that was my first that was my first talk and that was

like what got me hooked. So that always gives me a nice warm fuzzy nostalgic feeling.

That's awesome. Can you summarize like what were your takeaways from the let's be mainstream

talk for anyone who hasn't seen it or doesn't hasn't seen it for a little while maybe.

Totally. Yeah my takeaway was so when I watched that the context was I was a JavaScript developer.

I was working at a web agency and I was using like react and Vue.js primarily. And when

I saw that talk I felt like it was addressed to me and I felt like the gist of the talk

was like hey there's this weird thing called functional programming. And if it's the quote

he had that really like it hit it was just like if it function if type functional programming

is so great outcome no one's using it. And that just like as someone that didn't know

it I was really satisfied to hear that. I was like yeah what's up with that. You know

what's going on over on the other side. The big takeaway for me was that historically

you know these functional languages have been maybe maybe the direction of the marketing

wasn't exactly what we wanted but almost designed for like people building front ends. And so

when I heard that it was like let's let's make a tool for people building front end

UI as opposed to like let's make a nice UI language for functional programmers. And that

really like I think helps like guide a lot of the decisions with Elmland which is like

yeah like if I have the choice whether to make it like familiar and accessible to a

JavaScript developer or make it like the most type safe or the most correct I'll usually

lean towards approachable. Normally I don't have to make a trade off because I'm so so

nice about that but that's kind of that's why we like it right. Totally totally. But

so that's kind of that was my takeaway. It's like what I realized I had been doing for

years as like a community member was that telling not showing and I was really being

like oh like there's all these guarantees and you know you have all this and you don't

like you don't get it. There's you know this is like a whole new level of building things

and I wasn't really connecting with some of those core concerns is like I feel like a

lot of people do get bought into the vision of Elm but they just have a hard time. How

do I use it now. It's like great like this is perfect. This sounds like I don't want

to run time exceptions but like how do I use it. And so I really wanted to start shifting

to focus on how to answer those questions. Right. I've noticed that the way you talk

about it and the way the guide the language of the guide the tone is very focused on the

task at hand and not jargon and not like just high level. What are you doing rather than

how you're doing it and what language features and immutability and even talking about like

custom types and the specifics of how you're doing it. It's more just like hey let's let's

add a new URL to our app kind of general language that anyone could understand. So you don't

mention monads it and we're in the guide. No no I do that. Yeah I do that never. That's

my advice. I still don't. I still feel like after using Elm professionally for like over

five years I still don't feel like I have a good grasp on exactly what that word draws

a line around. Like I know I'm using them. I know that there's like oh this and that

and this and I've heard the rules maybe three or four times and I forget them every time

and it's never matter. Sorry sorry functional programmers. I feel like I've got a good grasp

of what it means. But then whenever people really use it in a context like oh it's a

monadic X or monadic Y. I'm like no you lost me there. Yeah. Oh that's the monadic bind

that I'm like yeah you betcha. Yeah. Monadic bind. Yeah. That is like the literal thing

what it makes a monad in my opinion or in my understanding at least. But then whenever

they use it somewhere else I'm like oh no I don't get it. From what I understand it's

like a burrito and I consider myself an expert on burritos. I'm not very good at binding

burritos but I know that people do bind burritos so that must be why they're monads. So I feel

like the title barista is totally misused on coffee people. That should be on burrito

experts. I just. Why don't we have a word for that. And monad experts. Yes. Baristas.

So you've talked about this sort of like more holistic vision of making Elmland accessible

to people beyond just making a tool making a guide making a community. I think you know

you've really explored like that broader vision which is really cool just to like for people

who are new to Elmland to bring it back to like what it is exactly. There's still an

NPM package at the end of the day just like there's an Elm SPA NPM package. You can NPM

install Elmland as well and it gives you something that you can run commands to give you a dev

server to add new routes and like the actual tool itself at the core of it is pretty similar

to Elm SPA right. Yes that's very true. Yeah the CLI tool it's really just yeah a bit of

scaffolding a bit of code gen and then the only difference is that dev server kind of

got upgraded from Elm SPA. I think that's like the biggest difference in terms of capability.

So when you say that that's or you mean a tool that helps you run it in development.

Exactly. Yeah. Yeah. So I mean this this is a great example of like a difference between

Elm SPA and Elmland in terms of philosophy with Elm SPA. I made my server. There was

an Elm SPA server command. I was like oh it'll be like Elm Reactor. It's not really you're

not supposed to really use it for like you know doing full development because you can't

you know with Elm Reactor you can't like import your JavaScript you know web components or

anything like that. And with Elmland server I'm like why am I why am I asking people to

download this thing and then kind of giving them like half a tool where it's like yeah

you can use this until you like really want to use it and then you should go figure out

here's like a bunch of examples for how to use something else. Then it goes back to like

that core thing. It's like people don't want to pick a dev server. They just want to just

want to build something and just the tool should get out of their way. And I always

thought it was crazy before my days of Elm the fact that like the front end engineers

have to like build their own compilers for like oh this is my SAS pipeline and it's going

to go here. And like in the early days it was like Gulp and Webpack and you just write

all this code about how to like it's like cut it out. I want to make the button round

you know like get out of my face. But yeah. So with Elmland it's there's like there's

a little bit of configuration I kind of put in air quotes that don't probably translate

over the radio if I don't say that out loud. But the thing with configuration is it's like

yeah what link tags do you want to render in the HTML. Do you want the debugger. Yes

or no. You know for development for production. But you can just run Elmland server on a new

project and you don't have to configure anything special. It'll just work out of the box.

Right. And it has a Vite integration built in right.

Correct. Yeah it's using Vite under the hood and I don't expose the internals of that.

I might have like there's some discussion in the community about you know should we

just have that with like a warning. Basically my fear with exposing the internals for the

server is that if I you know JavaScript changes so fast if something happens in six months

and now everyone's using what's the Vercel one turbo turbo something turbo pack. It's

like the whole you know JS ecosystem pivots to using turbo pack for whatever reason. I

don't want Elmland developers to have to do that upgrade by hand. I'm like yeah that's

something that the framework can handle. You just want a really fast development experience.

You want your error messages in the browser. That's a framework problem. That's not a your

company problem or your side project problem. So I've done my best to try to hide that it's

Vite not like hide and sneak away but not have people bound to that technology the same

way that I feel like a lot of frameworks you know before would be like OK like here's your

web pack integration or here's your gulp. You know here's where you put your build tool

stuff because I've just seen how that changes so fast.

Right. So can you if you wanted to use SAS as CSS could can you configure Vite to do

that or I guess maybe Vite has that out of the box. I can't remember.

I'm not sure. They might have SAS the way that you would do it in Elmland is so there's

an example in the repo. I think there's assets and a CSS like folder up on the official repo

but the way you do it is you just compile your SAS to CSS using like the SAS package

from NPM those CLI tools you just kind of would run concurrently with with the server

and then output that in a generated CSS file. But it's not coupled to Vite in any way or

coupled to the dev server in the way that we're used to.

So they have to do it manually or with their own custom scripts next to Elmland right.

Basically yeah. So the example is you run NPM dev and it spins up Elmland server and

it spins up SAS watch or whatever it is. SAS watch.

SAS. Yes. But that allows you to you know in a few months everyone's doing post CSS

for everything everyone's doing tailwind. It's like yeah just plug in whatever you want.

The artifact that Elmland cares about is a CSS file. Give me that CSS file. We'll put

it in the browser and you're done. Everything else I don't think needs to be conflated but

I know I know that's kind of the direction that a lot of the ecosystem is right now.

So I'm curious about something now. So you're saying that the main difference between Elmland

and Elm SPA is the dev server. So so why didn't you just add a dev server to Elm SPA.

I think on the tooling side the big the big upgrade on the CLI side was the dev server.

But in terms of like the scope of the project I think Elmland more so differs in like its

philosophy and the amount of guides and resources and like I think a big example is like the

VS Code plugin. That is not a CLI tool by any means but it's like I watched someone

on Twitch try to use Elmland for the first time and it was an early version of Elmland.

There were plenty of little bugs that I was taking notes as I watched. And the biggest

problem that they ran into is their editor would just kind of be crashing giving them

false positives on errors. And I was like this is the number one problem with Elmland

is that they can't type. So like whatever it takes to make that holistic experience

work that that's kind of what Elmland is. It's not just the not just the CLI tool whereas

Elm SPA kind of was. Yeah. So you felt like a rename was probably a good step. Yeah totally

just just a step back and maybe it's just because I got the domain. Who knows. But it's

definitely a different project in spirit. It feels like. Just to clarify it is Elm.land.

Elm.land. Yeah. That is pretty cool. That's pretty sick. Yeah. So are you now president

of Elmland or. I am the janitor of Elmland. Okay. CEO janitor. I'm the only employee.

I'm literally anything. So I don't know. I do it all. But we do have a dictator. A benevolent

dictator for life. Yeah. In charge of one person. Yeah. So I don't know. That's like

every political system. You could pick any of them and it would work. Just one guy. It

does remind me of something I heard with with Bunn the creator of this Bunn JS runtime was

talking about how if like since the goal of Bunn is performance oriented like I guess

backward node backwards compatible high performance runtime he was saying that he didn't want

anything to be out of scope of what he would tackle if it was on the critical path for

improving performance. So if it's right to put it. Yeah. There's some like package he

need NPM package he needs to build because that's what's slowing down people's experience

executing JavaScript code quickly. Then it's like OK that's in scope. So your attitude

here reminds me of that in a similar way where it's just like all right let's look at somebody

is maybe somewhat experienced with web development but their interest they're curious about Elm

and how can you give them an on ramp that's going to make it as delightful as Elm promises

to be holistically as the whole experience of getting started using it. Totally. Totally.

Yeah. And there's like so many steps on the way like I when I was first learning it was

like finding the right educational like content the right resources and like wrapping my head

around the concepts and finding like analogies to what I knew. So like I think there's going

to be more development in that space in terms of like what I work on with Elmland is like

just providing more concrete resources like look this is a real app. Here's how it works

you can play around with it. And yeah yeah it's really about that whole that whole experience

just like you said. I really do like I like the like that perspective when you shared

with the bun crater. That's cool. Yeah. Yeah. I mean I've heard people saying really good

things about the Elmland guides and I think that's really cool that you're kind of I mean

you know as as you run loves to quote the Elm philosophy take responsibility for user

experiences. So it is very Elmy to take that ownership and say like it's not enough to

say that someone else's problem. Like if it's if they're experiencing that problem using

my thing then I'm going to take responsibility for that. That kind of ties into like a feeling

that I had early on and I know I've talked to you about this and I've talked to like

Matt Griffith about this. But when the community was so small in the beginning there felt like

there was a contrast of like stepping on people's toes and like it because it felt emotionally

easier to be like oh like I don't want to like mess with UI because that's like you

know Matt's domain or I don't want to mess with GraphQL that's Dillon's domain. And so

yeah there was like I think there was a hesitation initially. So I definitely I definitely get

why that hasn't happened historically in the Elm community because everyone's so friendly

and everyone's so close that no one wants to really be like hey don't use this use this

you know and no one wants to be competitive internally. So yeah I think that was probably

the biggest like emotional hurdle for trying to like make a framework that encapsulated

so many different aspects of building web apps. I'm like am I going to be stepping on

the toes of the people that like helped me get here. You know what I mean. That was like

a freaky. That was a freaky thing. And in talking to you and talking to Matt you guys

were both like no don't worry about it. Like what. Yeah great stuff. We want great stuff.

Totally totally. I totally understand that. Yeah it is true that when people say oh I

want to make this tool for doing GraphQL and like well there's Elm GraphQL that Dillon

made and like yeah but I still want to do like my own thing or like there's something

that Elm GraphQL doesn't support or something like that. The best solution is usually like

go talk to the author and see if you can do if you can improve their solution because

that leaves less choices to the user like which GraphQL package do you want to use.

Well this if there's one and it's great then that's the best experience that a user

can could ask for. If there's like five and they're all like well in this case in your

situation you might want to use this one or this one or these three other ones then that's

not as great. So there's this advice which I tend to give and I still tend to give but

I totally understand that also prohibits people from doing something because yeah you're going

to need to do something new in some cases like with Elmland.

That reminds me of that reminds me of the coolest. Hey coolest is extreme. The coolest

thing I ever heard in a tech talk from the Elm community was Richard Feldman gave a talk

about Elm UI and Richard Feldman most I'm sure everyone on this podcast knows and if

not don't feel bad sorry but Richard Feldman is like he made Elm CSS which was like in

my opinion like the de facto way to do CSS before Elm UI came out. It was you know there

was no alternative besides just not writing not writing it at all. And the cool thing

that he did was in his talk he was like yeah I made an alternative to this but like use

use this guys use Elm UI. I was like that was so cool because it gave us the benefit

of like yeah if you're like new to the community everyone regardless of who made what is like

advocating for you know the whatever the best tool at the moment is or whatever the most

likely to be successful tool is. But it's still allowed like Matt to create Elm UI which

like if you tried to this is maybe a silly example but like if he tried to coordinate

with Richard Feldman it's like hey I think you know like we really want one way to do

UIs maybe Elm CSS should look like this instead. I think that would have been like slower for

him and so I'm kind of glad that he went and said like no I don't in order to like experiment

or explore I don't need to really necessarily coordinate with Richard Feldman in terms of

like the projects like vision you know what I mean. Does that make sense or is it kind

of a yeah. A hundred percent. Yeah. In this example the vision of Elm CSS and of Elm UI

are different. So if the vision is different then you don't want to pursue the same path.

You don't want to have one project or at least if they're two different. Totally. Yeah they're

similar enough. I think it's great to collaborate. So was there like other projects which you

thought ElmLens visions conflicted with or coincided with. I don't think it conflicted

with anything. I mean the only similar tool in the space is Elm Pages and at the time

I mean before the v3 update there really wasn't too much overlap in terms of use cases. Now

the v3 is more like dynamic and it's kind of more like remix like style. There's definitely

overlap there. But I don't know I don't I don't see like I guess Dillon and I will talk

about like hey like this API is what I'm thinking about and we like share share ideas and ideas

from I know like Dillon's error messages for example from Elm Pages v2. That was something

that inspired ElmLand. And was it the shared model or what was the thing that was borrowed

from Elm SPA was the shared. I definitely definitely yeah borrowed shared you know you

doing the file based routing definitely gave me the confidence to be like oh yeah I guess

I guess that would work OK and like because at first I was like all these JS tools that

do it have much more flexible file naming patterns that you can use whereas with Elm

like you can only has to start with a capital letter and the only special character you

can use is underscore but but not at the beginning for some reason. Yeah exactly. Yeah totally

yeah. Yeah. I feel like I feel like that's an example of like two explorations that strengthened

each other as they grew because I mean the culture the culture within the Elm community

has never felt to me like you know X versus Y. Yeah for me the biggest like responsibility

that that I've felt and we've discussed this together is just like how do we explain to

people how to navigate these choices like how do we help them understand what the trade

offs are so that they know going into it how to how to make a good choice. And I think

that's like because I don't know I mean I think we're just trying we're all just trying

to improve the Elm community and strengthen that and having different having different

perspectives out there different you know tools that have a different approach or that

solve different you know maybe slightly different maybe overlapping problems but slightly different.

There's a lot of value to that and the innovation in itself is really valuable too. So even

if something is overlapping a little bit but it's innovating I mean it can get to the whole

JavaScript fatigue level and that's you know that's not ideal but I definitely don't think

we're there and I think there's value to the experimentation too. So is Elmland if somebody

is starting a new project right now should they use Elmland or Elm SPA? Elmland even

though it doesn't have that 1.0 version we have now surpassed the functionality as well

as the I think the quality of Elm SPA. On August 12th I know this podcast is going to

be recorded or posted a little in the future so I'll try to be specific but on August 12th

I released a live stream video on my YouTube of you know upgrading Elm SPA from scratch.

Yerun was hanging out in the chat I think Yerun's the first chatter you'll see if you

watch that but it took about you know an hour and hour 15 I'd say to migrate the real world

Conduit app over and it was mostly half of that was me just joking around and chatting

with people so sorry if you have to watch all that it's it come join the Twitch stream

it's more fun that way but yeah I upgraded the real world app and it was really just

it always comes back to the same thing Evan did such great work with the Elm compiler

I just get to piggyback off of that awesome user experience so if you have an Elm SPA

project and you want to like upgrade it like the Elm compiler will literally just tell

you everything you will in that stream you will watch me use about 2% of my brain and

hopefully the Elmland guide will cover the rest of like what does this error mean kind

So if you thought that Ryan was smart he's actually 50 times smarter than that.

Yeah no I think that what people should know about me is that I choose Elm because I want

to be dumb you know I don't I don't like I don't want to be fancy at work I don't want

to be clever I just I want to just do it the dumbest way possible and that just works and

it's reliable and it doesn't keep me up at night so Elm matches my personality I would

Yeah I would say I like to be smart I like to feel smart but I don't like having to be

smart in order to program.

Fair enough I think it's hilarious to say I'm stupid I think that's just like a funny

sentence and fun to say so like if you just say that a few times it's like all of a sudden

starts to grow on you it's like I'm an idiot you know it feels good.

And that's one of those sentences where the more you say it the more people will believe

Only a fool would think that they're smart though let's be honest.

Yeah there's a name for that thing but I don't remember it.

So you said that if someone went to start with building a new Elm application you would

probably recommend Elmland or at least if they considered Elm SPA.

Do you think that Elmland is also at a point where if you just if you're new to Elm you

should start with Elmland or should they go through the Elm guide first?

I think if you're like me and you you learn with like examples I think Elmland is a great

place to start just so that you can it depends where you're coming from.

So Elmland was designed for for folks working with React or Vue who are familiar with you

know frameworks like Next.js or you know SvelteKit or whatever that just lets them just like

add a page add a button that kind of stuff.

Definitely the Elm guide is like a resource that you should check out but when it comes

to getting a feeling for the language and like experiencing the compiler I think leading

with syntax especially in Elm can be harmful because it gives the wrong idea.

I think we kind of have a culture of like hello world like when you're looking at the

examples how many lines of code is it how weird do the letters look and it doesn't really

capture the feeling of oh I like change this and I got a really nice error message.

So I personally think that starting with examples whether that's Elmland or you know another

framework I think starting with the framework is a really good way to get a honest view

of what it would be like to work with the tool as opposed to comparing kind of snippets

and learning like like whoa they use plus plus instead of plus like I'm out of here

like what is this.

It's like that's not what you're going to hate in a year.

Yeah that's actually true like the Elm guide is amazing but one of the other amazing things

with Elm is the compiler error messages and I don't think the guide mentions it much or

nearly enough like just the fact that you should rely on the compiler error messages

and that this is just great part of Elm.

I don't think it does put enough emphasis on it.

Yeah it's hard because it's like a you know a Gitbook and it's really the goal of that

document is like how does the language work at a fundamental level.

I mean that's that actually really does resonate what you just said with me because when I

was reading the Elm guide I was I was I was I had like one foot out the door.

I remember looking at the syntax being like this is weird.

I don't think even if I could figure it out if this is something that I'd want my coworkers

to be exposed to and then it wasn't until I saw that button example like the counter

you know plus minus and there was a challenge at the end of the guide section was like hey

It wasn't until I did that that I experienced the compiler and I'm like oh like this is

I just typed in like some weird alien language and I just added a feature and it was right

on the first guess with no help and I'm like whoa.

And it circles back to I'm not smart like I'm telling you guys this is something you

could do with no experience and the compiler does guide you.

I think yeah I think a lot of people when they see people that can use these tools the

assumption is oh they must be different than me they must be able to do something.

I was a Vue.js developer like we're all on the same team here.

I didn't know you really have to believe Ryan he's really not that's not so dumb.

You guys someone tell me.

I'll just you have to ask my coworkers.

Is there anything else on your radar.

We talked about like that this idea that nothing is out of scope for trying to like give this

easy on ramp for helping people get acclimated to Elm with this goal of let's be mainstream.

Like what other points of friction do you see for users with their on ramp to Elm right

Some of which you might have solved already and some of them you haven't.

Of the things I haven't solved.

So I set out with that like initial like Elm land you know hello world post or whatever

I set out for the goal of like you should be able to build GitHub with Elm and every

you know the framework should be able to handle an app with that level of complexity and without

without setting like that concrete goal I wouldn't have catch all routes right because

you can't have GitHub without that file explorer page where you don't know the depth of the

users you know get repo you don't know if it's source CLI read me or if it's you know

read me dot basically like the depth of the URLs.

So catch all routes was something that was added.

But in terms of things that are still missing like if I wanted to make it up there's two

big things that are missing one you could get around by using you know some type of

I don't know like serverless function or something which is like meta tags for GitHub when you

share a repo you want to see a nice preview of that image you want to see you know you

shared on discord shared on Twitter you need to have meta tags at server render time for

those those meta tag crawlers to work and that's not something that Elm land supports

that's not something in the near term that I think about adding but it would be nice

to have an example of how to do that you know maybe with for sale or with Netlify like hey

if I wanted to do meta tags if someone had I think it was someone at Elm camp that was

I was like yeah I don't use Elm land for anything that needs meta tags and they were just like

can I just do that function I was like oh yeah I guess yeah thanks so that makes sense

the other thing is initially I was thinking about a UI plug-in and a graph QL plug-in

I've since backed off of the UI angle I think making a UI frameworks really hard yeah there's

like ideas I had an experiment that actually is public if anyone wants to play around with

it this is not Elm land related this is at Ryan NHG slash CSS dash in dash Elm CSS and

Elm and what it does is I just write my CSS file and I use this like you know 2 million

plus NPM download package that Svelte uses to just scan the AST grab the class names

and just generate me a file called CSS so I can just say CSS dot row that goes so far

I've been building out like a product with this just like you know playing around with

it and it's insane you can delete a CSS class and get an Elm error message you don't make

typos in Elm it's like you can use Elm review to figure out unused CSS in your dot CSS file

all with the ergonomic benefits of just typing CSS and like getting the auto complete from

your editor and all that I was that was like 40 lines of code and I just published it so

that people could could try it out and it's not it's like not perfect there's like little

like bugs that I work around because I don't care about it being right I just I'm using

it and it's great but I don't want to make a UI package for Elm land I think Elm UI 2

might be on the horizon I don't know the timeline is for that I want to hold anyone anything

but I've heard rumors that that might be a thing and then GraphQL when I was working

at vendor I kind of started that I kind of started the GraphQL project a little bit but

then with like resourcing and stuff Matt Griffith was able to take that and take push over the

line there were some ideas that I wanted to explore with GraphQL that I think would be

really great and most importantly I want to have a really good documentation experience

for people working with GraphQL so if you're making a GitHub app you're going to want to

use the GraphQL API so that's actually something I've been working on in the past like within

the past week I was just kind of tinkering around with that and seeing where that goes

but yeah I think GraphQL meta tags those are the biggest limitations right now and when

it comes to building real things but I think they have a future for Elm land for me is

building stuff and finding those gaps that's been really satisfying I love to start new

projects and I love to like deploy things and share cool cool screenshots and gifts

so I think I'll continue to do that and then that'll reveal more more holes in the framework

but yeah that's cool so it sounds like maybe like the guides fill a big part of that gap

for you of making the onboarding experience easier absolutely yeah I think there's a lot

of stuff where it's like it's doable now but it's not clear how to get there and so like

there's some things where it's like yeah I don't even have to implement a feature I just

have to explain a concept components the component section of the guide is something that it

took me years to really find a pattern that I was happy with when it came to like advanced

you know components that needed to not only keep their own state but also you know bubble

up events to the to the parent and so I think the components section in the online guide

is like one of my favorites because I feel like I could finally share that share that

that problem I had for years solution to that with people what are some of the highlights

of the component section of the guide yeah highlights is you know using using the simplest

component possible so it starts by just introducing you to like if you want to make a footer and

it doesn't have any interactivity just make a function called footer and put some markup

in there and if you want to make something that's highly configurable I recommend using

Brian Brian Hicks had that robot button from Mars pattern so if you just find yourself

trying to do the first thing where you're just making a function but you have all these

optional arguments that you don't want to specify explicitly every time use that builder

pattern very useful and then yeah when it gets in the stateful the there's it's I think

it's called like the one two threes of elm components or whatever in the guide that third

level is the really interesting one which like answer the question that I had which

is how do I keep state private how do I guarantee that like my drop downs closing itself and

you know when I search it's managing that that search string but I'm not making the

the call or wire that up every time and so a lot of that is optimizing for making the

component easy to call at the cost of making the update function do the you know do the

HTML mapping and all that kind of stuff for you doing doing them the mapping internally

so so is this more of a tutorial or a really a guide or does element also do something

special with those components it is just a just a guide or a tutorial and it's in the

concept section if you go to elm elm dot land slash guide it's just kind of introducing

you to components in general but kind of putting in context of the elm framework or sorry the

elm land framework where we have a fact dot send message which is kind of a core core

feature of bubbling up events and things like that but you could use this in a vanilla elm

app you could use this in elm pages the technique totally stands for anyone who has an existing

on project today and it's what we've adopted we adopted at vendor and we are not using

elm land you know at vendor yeah I recognize a lot of patterns that we use at work as well

so definitely good things in here someone tweeted something that really warmed my heart

the other day it was something like this like oh I just wish I knew about this elm land

framework it's like all the things we use at work that it's like public now or whatever

I forget the exact wording but it was cool to like to feel validated by it's like yeah

if you made a bunch of people figure it out on their own and no one coordinated they'd

all arrive at that solution it's a concurrent evolution yeah I think the point that he was

trying to make was something like I spent years coming out arriving at the same solution

so if elm land was here today or back when I started then I would have jumped a few years

already yeah hopefully that's what we're that's what we do we can you know achieve as a community

it's like just building those foundations so people the next wave of elm developers

starts a little bit higher up the rung than we did mm-hmm yeah I mean when I started the

question was like how do you do an elm SPA yeah right and now we're we're past that it's

like how don't you do an elm SPA how do you do a single page app which with literally

one page place great I tried I tried making one page but I had to make two like what the

hell it was very difficult figuring out in those early like the early elm 19 days figuring

out how do you build an SPA I mean because you we really do rely on these patterns and

examples and you know once you've done it you you know what to look for so you can you

know plunk it out but but yeah I mean like how do you approach components how do you

build an SPA you know in the case of elm land it takes care of the routing for an SPA and

all the wiring so that's even better you don't even have to think about it which really is

I think as it should be like it just I don't see any value in manually doing that wiring

yourself personally I think I think that's well done as a solved problem but um but there

are many things in elm where it is sort of like elm is such a simple language that it's

just like there are these patterns and this is the natural way to do it but it's hard

to figure out those patterns on your own so a little guidance goes a long way for things

like how do I do a component and and in this guide you're choosing to use these terms I

think that someone from a JS background would be more comfortable with even though it is

sort of frowned upon to talk about it like a component in elm because it's like well

components are object-oriented things that hide state and we don't do that in elm yeah

I I had like an elm SPA component guy that was with that energy was like well we don't

really do it that that's not the elm way that's the JavaScript way and we do it this way and

then I joined vendor and that's I shared this with Matt Griffith and he's like well then

how do you do this and I'm like well well it's I guess I don't do that then because

I can't with that limited you know I was so now I kind of embrace like no it's fine we'll

do it that way because that's I don't know how else to do it good you know so it's okay

to very rarely I will create a stateful component like that but when I need it it's great to

know how to do it I think that's probably the biggest difference with JS it's like everything

is is that by default one thing I really liked with elm SPA so Dillon talked about that it

does all the wiring for you handle all the boilerplate or a bunch of boilerplate one

thing I really liked with elm SPA is that that boilerplate was made using code gen and

that you could actually just find that boilerplate you could because it was in your dot elm SPA

folder or something and if you were wondering like where is this page used or how is elm

SPA using it in this boilerplate that I don't know well you can look at it and the magic

would vanish it's like oh it's just it's just that simple do you still have that in elmland

yeah still look great yeah absolutely yeah so now there's a big changes instead of an

elm SPA folder I've moved it to an elm land folder and oh my god so sorry I will say the

biggest difference in terms of the generated code is two big differences I'll call out

one elm land doesn't use a package elm SPA did so there was some portion of the elm SPA

generated code that was kind of behind an elm SPA package with elm land it's just using

URL it's just using like all the all the native kind of elm modules that people are used to

so there's no like other thing to look at and there's no confusion when I talk about

you know installing elm land it's like no not the package you can't find it so if you

if you go to the elm packages thing and you search for elm land I didn't make one someone

could please don't it'll confuse people I was thinking of doing it right now no I did

not do this there will be a for this episode there'll be a your own elm land with a reading

that says got him but no the that's one big difference and the other difference is with

elm SPA when I couldn't figure out how to solve a problem I would just make main elm

customizable and what that did was it allowed people to like you know they weren't limited

by the framework and I felt like I would get you know pinged less or whatever but with

elm land I'm really doing my best to be like if you have a problem everyone's gonna have

that problem how do we solve it in the framework in a way where I'm not putting the cost on

each individual company or each individual user using the project so main is no longer

customizable in that same way but now because of that trade-off now pages and layouts they

have access to these hooks they have URL change hooks which in most cases were more ergonomically

beneficial and was one of the requested features for elm SPA so by constraining you know the

ability to customize main all of a sudden oops it's just a better experience out of

the box for everyone and more features that are helpful so you can't eject out of some

parts of well and elm SPA I guess that's because you could configure your view or you can configure

your main or you can configure some things right but now yeah with elm land the only

difference is the main file is not ejectable but view is ejectable effect shared everything

that you you needed to have access to before the 404 page all those are still ejectable

totally customizable except for main main was my name was just like I don't know guys

here you go you know please don't don't yell at me on slack that was just like a I don't

know what the word is can you also define your own index that HTML or something so you

do but rather than specifying at as HTML you're gonna specify what tags you want in your elm

land JSON file and the reason for that is if you have control over the HTML file you

are coupled to beat if you're using a certain module import for example that works in beat

I didn't want anyone to get coupled to the framework so what I did was I exposed those

link tags those script tags those meta tags as data that can be specified in a data format

and then I can translate that into whatever you know dev server we're we're using in six

months a huge example of when this can be beneficial I need to coordinate with Simon

Lydell about this you had a you had a elm radio episode with him about elm watch that

tool is amazing I want that in elm land I think it's like the best elm hot reloading

experience I've ever seen with this approach without being able to customize the HTML file

I can upgrade everyone to use elm watch for the elm files and they can continue to use

beat for their you know npm packages and all that stuff but the but the core could be using

that yeah when you said you're defying your own dev server I was like oh then you can't

use elm watch exactly awesome the trick is we need to you know figure out this there's

some it's like oh I like parcel better like feet better but at the end of the day it's

like performance when you save the file that's another huge thing I need to work on at the

elm land performance when you when you're generating the code but we just want the best

thing it doesn't matter like if people want to argue tabs versus spaces or you know indent

two versus four or like beat versus parcel I'm like that's great for the elm community

if you want that's not great for elm land elm land is like I want to make a button it's

got to be red I'm talking like real red and you got to be able to click it and make dollars

we're not going to worry about the those little those little debates within within the framework

so you don't define your index at html but you define it in some other way and you can

also define your own ports or define your own web components if you wanted to exactly

yep and I think it takes an approach similar to I think Dillon did this in elm pages where

rather than have a html file we're importing like the elm and doing elm main init it's

just a file where you can say hey this is where my flags are gonna go this is where

my this is a function I call when my elm app is ready and they have access to environment

variables and they have access to the app that that second function has access to the

app where you can access the ports and all that kind of stuff I really like that approach

and that does keep it agnostic of the framework or the dev server

yeah no it's it's really interesting to hear how your thinking has evolved with the customizing

main because in our elm spa episode that we had with you a while back you talked about

not wanting to have users blocked on something you didn't think of and I mean I thought that

was a really cool insight in in general this idea that like you know let's not make users

too dependent on me thinking of every single way they could possibly build an app but I

think you've maybe still kept that thinking that you you don't want users to be limited

by your imagination but maybe by providing some hooks and extension points you can give

them all the tools they need to do that in a more cleanly packaged way that isn't as

much of a sharp knife totally I think the I think the big thing is that's easy for me

to make a main customizable but what's really cool in terms of like a social like structure

is if I don't make it customizable I get bug reports and I actually get feedback so maybe

it's a little bit messed up but that's how I get I can get you know hey this how do I

do this and I'm like great if you could customize main you never would have told me that you

couldn't do this and then you'd come in you'd do it you'd have a bad time and that would

be a secret thing that happened at your company that you'd be suffering with for months and

I'd be like if you just told me I could have flipped this switch you know let me know about

it you know yeah and then you could come up with the best solution for everyone and now

no one will have that problem anymore I think a great example is something that I didn't

do is like the a lot of people want to use tailwind CSS and they're like how do I use

that the in the online discord there's a community member Dazoni who just like made a made a

plugin it's just so cool when just having a place where people are like I just want

to build it with this how do I do it and I can like link to someone's repo I feel like

there's a huge weight off my shoulders and people are like working together and that's

like a space where yeah no one's like everyone's like collaborating and I want to see more

of that I want to see more people joining that community and feeling empowered to make

suggestions and even like code changes to the the framework I don't want to be like

the bottleneck in terms of feature development so I try to encourage people when they do

suggest a feature I'm like that's a great idea and I would I'd love to review that here's

here's what I would need like if you just add this example or you know show what you

want we have a really cool test suite this is a bit of a tangent where it's not unit

tests it's not elm tests it is it's called bats and it's bash automated testing something

I don't think that's something but it's something else that starts with s and all I do is I

just have like tests that are like run elm land expect the output says welcome to elm

land run elm land add page blah blah blah you expect an error message it says hey specify

a valid url it's really nice and so with all these examples in the official repo I just

have run elm land build in that folder and that's a part of my automated testing so it'll

catch if I add a feature that breaks interop you know as long as there's an example that

perfect pretends prevents regressions and the cost of adding a test is adding an example

which is also beneficial because then people have something to click through and run on

their computer that is the most happy I've been with tests in my entire life I feel like

I'm not a very good TDD person so like I never really know how to start or how to but those

are like the most payout out of any test I've ever written I'm sure Dillon is like super

proud of you yeah no that's amazing it does sound great yeah and enters are huge I would

like to have actually more of this kind of fully end-to-end tests where it's actually

like running the CLI for for elm pages I do have a lot of Cypress tests where it's actually

spinning up a browser and running through examples and executing back-end tasks and

running tests against them and I mean it's it's very easy to write you know you just

like expect this text to exist in the browser and you know it's like it's it's not rocket

science but it gives you a lot of confidence that it's actually doing this thing it's actually

printing this error message when you go to this route or if you if you remove a route

the 404 page in the dev server correctly guides the user on how to add a new page or whatever

you want to do you know so yeah that's huge it's huge for contributors yeah yeah I think

it's great because it's like the most important thing to me is that the promises that I make

on the guides are kept and so I love that the tests that cover my cover my butt when

uh when there's a breaking change so like I that's that's been great yeah and and I

mean talking about like creating a delightful on-ramp for for users right I mean if it's

if it's janky if it's glitchy it's not gonna be super delightful and at the end of the

day we're we're stupid right that's we're all self-admitted idiots so yeah except for

you and he's like no stop calling that you guys that fool how could he how could he not

think he's stupid but uh Dillon and I are stupid yeah definitely we're very stupid I'm okay

you're in the middle of the road you mean I stand in the middle of the road I don't

know I don't think that would be very middle of the road of you but yeah if you're if you're

stupid then you'd better write some tests to make sure when you make a mistake it catches

it because you will make a mistake because you're stupid right so I wouldn't love the

um compiler so much if I wasn't if I was able to like remember everything about everything

all the time you know like there's a certain like implicit like you know why you're here

because you know you make typo and typo make bug exactly elm is not a very good language

if you are a perfect genius who never makes any mistakes then yeah use assembly like get

out of here imagine the imagine the elm compiler remembered all of your mistakes and reminded

you of past mistakes when you make errors like oh again made this typo again yeah I

want that you know you sorry go ahead do you know you've made this mistake like 432 times

now that would be awesome another type mismatch come on I think what we should actually add

to the elm compiler is uh sometimes I make a typo that's a funny word it should chuckle

it should like ha you accidentally type like fart or something you know it's like I think

you meant to type first but that's hilarious bro I think you should have a sense of humor

the dictionary I often write uh list dot fitler oh yeah I do that too yeah I typed something

live on stream it was horrible oh I I mistyped flags and I'll just I'll stop there I like

screened oh and I just like immediately deleted it I was like I'm gonna get my VOD taken down

I'll get canceled it's horrible I had a heart attack but we should change that for your

name you do not deserve that rainbow logo that's true yeah yeah so earlier you mentioned

someone made a tillwind plugin they made a example repo uh they didn't make anything

too fancy or too specific to the framework but um yeah they basically made a resource

for people to use they click on it and then this is like a just like the examples in the

folder I think at some point I need to work that into the official repo but I haven't

had a chance to run it and play around with the experience to make it like official yet

but it's people have been using it and it's been really nice um allegedly from those people

I haven't I uh as as I told you I'm writing raw CSS and doing weird things that's cool

how do you think about that community so you have you have an elmland discord we'll drop

a link in the show notes to that tell us a little bit about the discord and the community

and and how you kind of think about building that community totally yeah I think so since

we already have the elm slack it didn't really make sense for me to have a separate space

with the same goals it's just like hey what if we had a smaller pool of the existing developers

something I noticed on the elm slack is that there is a big variety of of different folks

on there there are people that are excited about uh functional programming like language

syntax there's people that want to you know uh make cool packages and then there's you

know there's some people that want to like build apps and and get unblocked and do stuff

like that so the goal with the elmland community was to be able to set a tone of you know if

you join this discord if you know whether you're coming from react or view or angular

we don't x versus y here we're never gonna make a a subtle joke about you know oh like

this wow let's look at this new react library this is pretty bad or something like we're

not gonna do that kind of stuff what you come to the elmland discord for is hey I've got

this cool project I want to share it with people that are enthusiastic about you know

using elm to build things I'm looking at the I'm looking at the discord itself on the right

here but like I have a question right I'm a beginner I tripped up on got this error

message so it's really like a practical like troubleshooting as well as kind of celebrating

like real real work but there's no like channel for like you know argue about oh camel versus

you know haskell syntax and I kind of joke about that but like no moral judgment on that

at all it's just like that's not what I wanted this space to be it's just uh it's off topic

I guess is the way to think about it but yeah I mean uh what's come out of that so far is

like my favorite thing about elm favorite thing to see online is when people share like

things they built whether that's like a 3d car or like a website or an app or like a

I saw someone make like a midi app one time I wanted to create a space where people you

know if they weren't on twitter and they didn't feel comfortable doing that publicly they

had like a safe space where they could drop their project and we could all just spam it

with hard emojis and elm land rainbows and just have that kind of energy there so there's

been some really really cool projects that have come out of that and that's I'll post

my projects in there too so it's not just asking people to do it I'll do it too but

yeah I love that I mean I think you know like in in an elm spa or elm land slack channel

I mean I think you're gonna tend to feel a little more constrained if you want to just

spam with a cool project you're working on as you're giving updates on like oh this little

thing because it's like one channel and then somebody else is like asking a beginner's

question or somebody else is like trying to coordinate on like hey I want to add this

feature how can I contribute you know so it just opens up a little more space to give

people the the sense of comfort to just stretch out and do different things there in this

space and really build a community so I think I think that's a great idea to build a little

discord community sweet yeah I mean incremental elms out there I remember that too and it

is cool you have channels for different topics and you can kind of mute what you don't want

to talk about and it's a good vibe yeah which ones do you mute we're gonna judge you now

I'm gonna pull it open and see what I got muted do I have anything muted I don't have

anything muted I was too excited what a nerd anything muted do I no for anybody who doesn't

know incremental elm is a is a discord we have for contributing to the elm ecosystem

so it's completely focused on rolling up your sleeves and building things or giving feedback

less focused on the sort of slack what slack excels at giving help for for user questions

and things like that so yeah that's been a really cool space for us to cheer each other

on as we're kind of building fun projects yeah it's cool to see like all these channels

like cogen and like a forum and like all these different threats where it's like yeah if

you want to contribute to the ecosystem you've kind of got like a channel for everything

here which is great yeah I'm a big fan of these little communities with a very clear

purpose and I think I think communities thrive when there's kind of a clear theme to it all

so we talked about elm land 1.0 and is it basically is the headline for 1.0 that it

will come when you can successfully recreate github with elm land yeah I don't know if

if I'm gonna wait until like like an actual github clone is is out or like a you know

like a basic github clone is out that might that might be what stops the 1.0 release that

might be like a satisfying way to go but I really think it's it's about those features

that I would need to make that possible let me see if I've got it here yeah so like performance

improvements is big I think elm watch is a must it's it's like very very high very high

up maybe not a must necessarily because you still have a dev server but I think there's

a big room for improvement there's some missing guide sections for some reason I just forgot

about the interop section and the environment variables for anyone listening right now like

today you can make a dot env file and it just works it's very good but I didn't write I

didn't put no one I told nobody so that's kind of stupid so I got to put that in the

guide hard dogs are so hard I admire you for putting so much love into these docs because

it really is extremely hard yeah it's been the most time-consuming part of the project

though as they say the code is the easy part and it's really just been yeah a lot of docs

work I want to have like a clear answer to testing I want to like figure out what's the

easiest way like I've got elm review on here like the things like that where it's like

what's the like the normal de facto way to build an app and GraphQL is I need to have

an answer for it not necessarily a library I'd like to make an onland GraphQL plugin

but it does as long as I can point people in the direction of like hey here's how you

write GraphQL code and and make queries without having to write those decoders by hand I think

that's good and then beyond 1.0 I think it's just more more examples and more interactive

videos or more educational videos sorry it kind of feels like minor improvements or not

major improvements so it feels like you're almost there yeah it really is it's a lot

of minor stuff this last released 0.19 weirdly intersecting with elms current version that

was like the big that was the big thing where it was like I'm finally past elm SPA it's

finally like I've got those framework errors and you know it's it's ready for people to

upgrade to and yeah it was such a weight off my shoulders when I when I finally released

that so that was huge but yeah it's much a minor stuff but it's like the little stuff

that I think is really important it's like the remaining the remaining bit but yeah yeah

if you want to help contribute to that hop in discord and help me please we're almost

there then we can be big and exciting 1.0 people that's so cool yeah I mean it sounds

like you know I mean if I were if I were to guess before we had this conversation what

1.0 would involve I would guess like parody with elm SPA and and stability and and not

expecting any like major breaking changes for the sort of core functionality but it

sounds like that sort of 1.0 vibe is is kind of there at this point and you're like let's

be ambitious let's have 1.0 be like the guides are something I can fully get behind and say

I didn't miss any pages I you know people aren't tripping up on anything and we've built

like a holistic onboarding experience that's going to be really positive for people who

are new to elm for me 0.19 just means 1.0 so yeah right I think you're there our brain

translates it yeah well then I'll 2.0 to your own and 1.0 to the world I'll probably I'll

probably have a 20 in there before I have a 1.0 but we'll see but yeah no I'm excited

because I for a while I was streaming and then I was kind of streaming elm land development

and that's fine but like I'm excited about now that elm lands done getting to make goofy

things I was on the house on the way to lunch with my fiance or sorry not lunch I was I

was going for a walk with her this morning I was talking about you know what I want to

make I want to make a pet only Instagram you know you know just a bit goofy or it's just

like you can only have dogs and cats and they're just like doing stuff they're even doing like

influencer things you know like product placement but like only pets or something I don't know

I'm afraid of it and I'm not buying any domain so it'd probably be only pets that elm.land

oh that might have bad connotation so we'll think about the name we'll workshop that you

know like a mobile friendly dark mode that movies app that I just released last week

is like I really I really enjoyed that that was like a dark mode using a real rest API

type thing I want to I want to do more projects like that where people can just like have

fun using it you know they don't you don't have to dive in the code you can just be dazzled

that's fine yeah yeah at the end of the day we're trying to build cool stuff not build

cool stuff to let you build cool stuff yeah yeah although we spend a lot of time doing

that the three of us I'd say someone's got to do it you know and it's all right to do

and once it's done though you got to remember what our goal was in the beginning right exactly

yeah well amazing what should people look to to follow you for for future updates and

to keep an eye on elm land and what's going on there for sure yeah yeah if you want to

keep an eye on elm land if you go to join dot elm dot land that's that'll take you straight

to the discord I'm very cool subdomains I figured it out but yeah so elm dot land is

the website and then if you want to follow me on twitter I'm just at rhg underscore dev

I'll post when I go live on twitch on youtube if I have like youtube videos or whatever

but yeah the discord is a great place to see what the community is building so I definitely

if you only went to one of those links I would definitely recommend checking out the discord

or following following on twitter I guess if you're not a discord user yeah amazing

yeah and then I do have a github sponsors page for anyone that's interested in like

supporting the project you can go to l-9's website there's a sponsors section at the

bottom and you can just click sponsor and it'll take you to my face but yeah that would

that that'd be great there's just a few sponsors and they're already and it's just it's such

a satisfying feeling to know that like people are benefiting from it that they're excited

to to say thanks in that way and every dollar means I can like spend a little bit more time

on it it'll be really cool to be able to focus on this full time because there's a lot of

marketing work that would need to go into this before you know before we see that that

mainstream traction that I think everyone's hoping for yeah it's a great way to contribute

back if you if you enjoy the project well amazing stuff thanks so much Ryan for for

coming on and sharing all these thoughts with us it was really lovely having you back on

yeah for sure thanks for having me and Jeroen until next time until next time