Welcome to Elm - 8.4 Elm Land
4:31
Welcome to Elm - 8.3 Elm Format
5:01
Welcome to Elm - 8.1 Unit Testing
5:11
Welcome to Elm - 6.4 Ports
16:57
2 ай бұрын
Welcome to Elm - 6.3 Flags
10:20
2 ай бұрын
Welcome to Elm - 6.2 Vite Setup
7:06
Welcome to Elm - 5.6 Commands
14:19
Welcome to Elm - 5.5 Subscriptions
13:40
Welcome to Elm - 5.4 Elm Packages
6:28
Welcome to Elm - 5.3 Debugging
10:31
Welcome to Elm - 5.1 React to Elm
9:34
Welcome to Elm - 4.4 HTML Events
10:40
Welcome to Elm - 4.2 Components
8:43
Welcome to Elm - 4.1 HTML
7:34
3 ай бұрын
Welcome to Elm - 3.6 Set
6:33
3 ай бұрын
Welcome to Elm - 3.5 Dict
6:46
3 ай бұрын
Welcome to Elm - 3.4 Array
5:32
3 ай бұрын
Welcome to Elm - 3.3 List
13:15
3 ай бұрын
Welcome to Elm - 3.2 Result
12:30
3 ай бұрын
Welcome to Elm - 3.1 Maybe
10:14
3 ай бұрын
Пікірлер
@coder_one
@coder_one 4 күн бұрын
Are you planning to record an episode on how to create and publish Elm packages? Especially packages with ports to modern browser APIs or SDKs from companies 3 related to authentication/authorization which are not avaliable in elm standard library?
@ccrsis
@ccrsis 10 күн бұрын
Very good series. I think it would be helpful to see something like "build with elm" kind of series. Where we can see how to solve real world problem. I appreciate for this really nice series.
@coder_one
@coder_one 10 күн бұрын
I have a question from another thread - I want to write a package to publish on elm-packages. The task of the package will be to support a certain API provided by the browser and a 3rd party library from the JS ecosystem, so I will have to use ports to communicate with each other elm and JS. The problem for me is the "javascript" part of the code responsible for ports - it is required there to call the function that initializes Elm, and on this instance to call the corresponding methods that communicate with ports. Only as a package developer I have no knowledge of how the end-user initializes Elm (whether he uses an HTML element with id "elm" or another) etc. I have not found valuable information on the web about writing and publishing such packages whose purpose is to provide ports to a specific external JS API. How to do this correctly?
@johndeighan8890
@johndeighan8890 17 күн бұрын
Why do you call them "variables" when they're immutable. It would make more sense to call them "constants".
@CharlonTank
@CharlonTank 29 күн бұрын
If you could do a more extensive tutorial on web components it would be amazing! <3
@HeyRyanHaskell
@HeyRyanHaskell 18 күн бұрын
Thank you for the suggestion! I’ll add that idea to the list ❤️
@sayedahmads
@sayedahmads Ай бұрын
Thank you for this nice series. Thats what was missing😊. In the next series If you could do a web development utilising a REST API that would be amazing:)
@HeyRyanHaskell
@HeyRyanHaskell Ай бұрын
That’s a GREAT suggestion! Working with HTTP and JSON is on the top of my list for the next course, I’m glad you’re enjoying the series so far!
@sayedahmads
@sayedahmads 19 күн бұрын
@@HeyRyanHaskell It would be really helpful😊 looking forward to it 😊
@somindwithgames9827
@somindwithgames9827 Ай бұрын
Pin me i loved ur work
@finnpedersen9342
@finnpedersen9342 Ай бұрын
I love when it sorts the import section. 🤩
@finnpedersen9342
@finnpedersen9342 Ай бұрын
I have been struggling a with the Fuzz module. Maybe an idea for an extended video (8.1b) on more advanced tests. Otherwise a great introduction to elm-test.
@HeyRyanHaskell
@HeyRyanHaskell Ай бұрын
Great suggestion- thanks for calling that out!
@MacOSeX10
@MacOSeX10 Ай бұрын
I always thought ELM was a FE framework 😮
@HeyRyanHaskell
@HeyRyanHaskell Ай бұрын
Practically speaking, you aren’t wrong! 😃 It’s designed to solve the same problems as FE frameworks, it just solves them by choosing a different approach than building on top of JavaScript!
@finnpedersen9342
@finnpedersen9342 Ай бұрын
😂😂😂 So funny. This is exactly why JavaScript and I are not so good friends and why I got started on Elm in the first place.
@borkomne
@borkomne 2 ай бұрын
Great series overall! Thanks, Ryan!
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thanks for following along, hopefully more to come in the future 🤞
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
the elm guide doesnt do 10% this guide does
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
mom I wanna cry I wont see any Ryan notifications anymore
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
RIP notifications (for now!) At least you can relive the video content whenever you’re feeling nostalgic 😅
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
​@@HeyRyanHaskellI'll watch your other series since I feel I have a stronger foundation now
@GaryChike
@GaryChike 2 ай бұрын
Awesome content!
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thanks, Gary! 😊
@mrdmajor
@mrdmajor 2 ай бұрын
Thank you Ryan 👍🙏. This playlist is a VERY helpful visual explanation of Elm and building SPAs with Elm. It helped me resolve a few things I couldn't 100% mentally resolve in the Elm site documentation. Educating on how to manually build a code solution before providing the convenience of your framework is brilliant. You should work with Dillon Kearns to do that for elm-pages.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thanks, I’m glad you enjoyed it! I love working with Dillon, elm-pages is great!
@martinrame
@martinrame 2 ай бұрын
Hi! Ryan, congrats for this awesome series. So far the best Elm resource on KZbin!. I don't know if you plan to follow up with more videos, but I think one must have is how to build stateful components in Elm/Elm-land.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thank you, and I love your suggestion too!
@ralphtq
@ralphtq 2 ай бұрын
Greatly appreciate these videos, thank you. Maybe this has already been asked, is there a repo for them? BTW, I'm working with elm-land and Tauri.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thank you!! There isn’t a repo for these Elm examples, but I’ve heard some folks are creating their own as they go as a learning exercise 😎
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
hahahahahahaha best beginning ever
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
I was also wondering if you disabled elm language server also because the rapid feedback in the editor was missing imo
@simonlewis6686
@simonlewis6686 2 ай бұрын
I've been using "vanilla" Elm (with elm-ui) for the last 12 months without any external build tools - mainly because I'm not really a web dev and don't know much about these, or indeed much about html, css, js etc. I've found the standard elm-watch tool does a fantastic job of hot reloading, so wondering why not just stick with this. I guess Vite brings extra things to the table which I'll see in future episodes...
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
If you don’t have any need to work with existing NPM packages or other build steps like TailwindCSS, there’s no need to upgrade! I originally made this Vite plugin for use with Elm Land, where folks had more varied and advanced needs. If you’re already using elm-watch, I’d stick with that!
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
you would love to have all your ports in typescript so even the outside world is typesafe
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
can you make a very nice application with a already made backend with tests as a series? you can absolutely own all of the other elm videos as a defacto elm introduction. I used to watch Jack's Franklin Building Elm Apps for understanding some patterns but this series is already much higher graded
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
I'll add that to my list for upcoming course ideas, thanks for your suggestion!!
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
@@HeyRyanHaskell you are a blessing to the community
@HerozTech
@HerozTech 2 ай бұрын
Your video title is really vague and does give a clue to what the video is about i literally click it to know what it is about
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thank you for taking time to leave feedback! I’ll need to brainstorm some alternatives 🧠
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
I believe I'll reach a higher understanding when I build my first mapping function. it's really hard to grasp
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
how is this a free course? this is top notch quality tips that was always behind a paid course that I could never pay. this is godsent
@space_ship643
@space_ship643 2 ай бұрын
I truly wish that Elm development gets alive again and gets the recognition it deserves. Kudos to Ryan and others contributing to keep Elm alive.
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
yessssss I finished it!!
@realyogi007
@realyogi007 2 ай бұрын
Hands down the best Elm series ever! Thanks a ton for breaking it down and sharing it for all of us!
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
totally. the url from document -> to application is something I've never thought about in all my pet projects I've done in elm this is sooooo much valuable. also I'm still struggling to make a mapper fn from Msg map And Cmd map I hope I can learn in the next sections.
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
hardest episode yet
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
This is the most advanced unit and includes the stuff it took me the longest to learn! Might need a while to sink in 🧠
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
@@HeyRyanHaskell it is clicking. I'm watching it on repeat in different parts of the day so it clicks more
@maxreuv
@maxreuv 2 ай бұрын
Seems like integrating with anything JS is a bit of a hands full, whether through ports or web components
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Definitely! This is a very common reason why folks prefer working with other languages in the web space. With Elm, you get the guarantee that your type system works BUT it comes at the cost of needing to be more cautious when working with raw JS or JSON values. For my personal experience, this tradeoff is worthwhile- but using a language with an "any" type has more ergonomic benefits. I encourage folks to try both and see which style they prefer!
@tomazbracic6568
@tomazbracic6568 2 ай бұрын
Seeing what you do with these videos makes me want to start with Elm after a few years. Great work Ryan!!
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thank you, go for it and build something cool!
@finnpedersen9342
@finnpedersen9342 2 ай бұрын
Great videos on how flags, subscriptions and ports work in Elm. Thank you. Especially your comments on how to make it robust.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
You're very welcome- I'm glad you enjoyed the video!
@bibliusz777
@bibliusz777 2 ай бұрын
i used Elm for some websites. do long-term Elm jobs exist? what are your thoughts on elm-ui and iced?
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Hello! Yes, there are many companies offering long-term Elm roles. ( Although you'll find a HUGE number of JS framework jobs! ) I have used Elm UI and think it's great, especially for backend folks who want to avoid HTML/CSS altogether. I personally use HTML/CSS because I'm familar with the technology, and like to have more explicit control over my UI. I have not heard of iced before, however!
@tom95368
@tom95368 2 ай бұрын
do I have to config something to open VSC from the browser, when there is an error message? ... (some minutes later) VSC was not in path. Works great 👍
@GaryChike
@GaryChike 2 ай бұрын
Honestly, I wasn't really interested in learning Elm, but now I am, all because of your well delivered tutorials.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thank you, I’m glad I could trick at least one person into accidentally becoming an Elm developer - hope you enjoy the learning journey! 😃
@GaryChike
@GaryChike 2 ай бұрын
@@HeyRyanHaskell 😂lol
@indierusty
@indierusty 2 ай бұрын
Thank you. You made elm much more simpler for me to understand. I always wanted to learn functional programing but couldn't find any quality resourse. I'm in high school not a professional programming but everthing you explain is very clear to understand.
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
That’s great to hear! Elm was my first functional programming language, and it convinced me that I was smart enough to figure out how to build real stuff in a functional way. Glad I’m able to pay it forward! 😊
@tom95368
@tom95368 2 ай бұрын
Always looking forward to the next video. Thank you so much for sharing this!!!
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 2 ай бұрын
yeah always wanted to feel elm as a prod developer and his series hit the nail
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thanks, Tom! Glad you’re enjoying the videos so far - there’s more exciting stuff to come!
@indierusty
@indierusty 2 ай бұрын
How do I nest this. How it works for medium size project?
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
That’s a great question! We’ll answer that in detail later in the series- that was the part of Elm that took me the longest to figure out!
@maxreuv
@maxreuv 2 ай бұрын
Great angle with converting React code to Elm, exceptionally well delivered and so easy to follow. Thank you!
@HeyRyanHaskell
@HeyRyanHaskell 2 ай бұрын
Thanks, Max! This is one of my favorite videos in the course, I’m glad you enjoyed it too ☺️
@maxreuv
@maxreuv 3 ай бұрын
Noticed an ETA reduction opportunity on fromFooterMsg, and was glad to find that Elm does support ETA reduction!👌 Wish there was deriving support also on custom types. But hey, maybe some time. Thank you for the video, very interesting, specifically the trick with messages passing. As an Elm noob, that would have taken me ages to figure out😂
@brielov
@brielov 3 ай бұрын
I don't know where this series is headed, I'm really enjoying it so far. But I would love to (maybe at the end) see building a real world app, not a todo list, but rather something that includes routing, multiple pages, and somewhat big state. The thing I could never wrap my head around being a react dev is the lack of local component state, so I'm very curious to know how this is handled in elm. Anyway, thanks for the awesome series!
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
I don’t want to spoil anything, but I think you are REALLY going to like the second half of this series 😁
@brielov
@brielov 3 ай бұрын
@@HeyRyanHaskell haha nice!
@finnpedersen9342
@finnpedersen9342 3 ай бұрын
Keep having too much fun. 😀
@viniciusataidedealbuquerqu2837
@viniciusataidedealbuquerqu2837 3 ай бұрын
yay love this series. have you even did roc from richard? do you think it is in a good direction?
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
I’ve played around with Roc a bit and I think it’s an exciting new language! Would be awesome to see folks making Roc backend applications that work with Elm on the frontend 🤩
@finnpedersen9342
@finnpedersen9342 3 ай бұрын
Love ❤ it
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
Thanks for the encouraging comment- more fun Elm stuff to come!!
@LudovicCoullet
@LudovicCoullet 3 ай бұрын
Thank you so much for all these videos. Pleased to watch concepts that I already know and excited for those I'll surely learn in the future.
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
You’re very welcome! If you’re familiar with Elm, I think you're really going to like the unit on Project Architecture - it’s the one that took me the longest to wrap my head around
@simonlewis6686
@simonlewis6686 3 ай бұрын
I've been coding Elm for 12 months now and never used HTML... I'm elm-ui all the way - it's great
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
Elm UI is a wonderful package- I'm glad you are having a great time using it! ❤️
@brielov
@brielov 3 ай бұрын
I need more
@WolfgangSchuster
@WolfgangSchuster 3 ай бұрын
I'm excited for me too 😄
@maxreuv
@maxreuv 3 ай бұрын
So, how can I make a custom ADT comparable so to be able to use it with the Set?
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
I love that question! The helpfulness of my answer will depend on your specific problem, but my most common use case is when I've used a custom type like this for ID values: type ID = ID String This made it so I wouldn't mix up IDs with other string types, but now it isn't ergonomic to use it with something like "Dict ID Project" or "Set ID". In the past, I've tried a few things: 1. Created a separate `Id.Set` module with an identical API, that handles wrapping/unwrapping this custom type before inserting in the set. (This preserves the type-safety and speed, but takes some work!) 2. Gave up some of the type safety, by storing ID as a String directly. This means using "type alias ID = String" instead, but allows me to use Dict and Set normally 3. Gave up on the speed, by using the "elm-community/assoc-set" package. This has the Set API, but uses a List under-the-hood. (Because Elm is only for web apps, there's rarely been something I've been storing that's been big enough to see a significant speedup) After working with Elm for a few years, the 3rd option seems to give me the most bang-for-my-buck. Converting custom types to/from comparable values is rarely worth it in my experience, but you might encounter scenarios where it is worthwhile!
@maxreuv
@maxreuv 3 ай бұрын
@@HeyRyanHaskell Thank you very much, I seem to like option 3 the most so far. But the challenge itself goes to show that Elm could have benefited from some sort of typeclass support, at least something like Haskell's `deriving` for custom types.
@borkomne
@borkomne 3 ай бұрын
What happens if you set 5th element on array of size 3?
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
That's a GREAT question! Something that surprised me when first working with Arrays in Elm (coming from JS) is that you can't set indices past the array's size. So in our specific example if we tried this: Array.set 5 "hi" (Array.fromList [ "ryan", "scott", "alexa" ]) It would NOT insert "hi"! In the next video we cover the "Dict" type: Dict.insert 5 "hi" (Dict.fromList [ (0,"ryan"), (1,"scott"), (2,"alexa") ]) Calling insert on a dictionary works fine! It will add "hi" in the place we expect: Dict.fromList [ (0,"ryan"), (1,"scott"), (2,"alexa"), (5, "hi") ] Hope this explanation makes sense!
@borkomne
@borkomne 3 ай бұрын
Thanks!
@maxreuv
@maxreuv 3 ай бұрын
Guess my Haskell fits right in ;). Thank you, excellent series
@HeyRyanHaskell
@HeyRyanHaskell 3 ай бұрын
Thank you for watching! Hope you enjoy the rest of it 😊