![Ryan Haskell](/img/default-banner.jpg)
- Видео 81
- Просмотров 53 944
Ryan Haskell
Добавлен 28 окт 2013
Professional Elm engineer sharing what I've learned with the Elm Land framework, free learning resources, and developer tooling.
Welcome to Elm - 8.5 You Made It!
Learn about other helpful learning resources and tools.
Просмотров: 97
Видео
Welcome to Elm - 8.4 Elm Land
Просмотров 24521 день назад
Learn how to use the Elm Land framework to quickly create new projects that use all the fundamentals we learned in this course.
Welcome to Elm - 8.3 Elm Format
Просмотров 9021 день назад
Learn how to use elm-format to provide no-configuration formatting across all your Elm projects
Welcome to Elm - 8.2 Program Testing
Просмотров 9321 день назад
Learn how to use elm-program-test for testing what a user actually sees.
Welcome to Elm - 8.1 Unit Testing
Просмотров 10621 день назад
Learn how to use elm-test for unit testing.
Welcome to Elm - 7.4 Context & Effect
Просмотров 47421 день назад
Learn how to connect Elm pages together and allow them to communicate
Welcome to Elm - 7.3 Browser.application
Просмотров 18428 дней назад
Learn how to give Elm access to the URL and browser navigation APIs
Welcome to Elm - 7.2 File Structure
Просмотров 25628 дней назад
Learn how to organize Elm pages in a web application
Welcome to Elm - 7.1 Browser.document
Просмотров 138Месяц назад
Learn how to control an entire page with Elm
Welcome to Elm - 6.5 Web Components
Просмотров 293Месяц назад
Learn how web components allow you to embed JavaScript in Elm
Welcome to Elm - 6.4 Ports
Просмотров 221Месяц назад
Learn how to communicate between JavaScript and Elm
Welcome to Elm - 6.3 Flags
Просмотров 187Месяц назад
Learn how to send initial data from JavaScript to Elm
Welcome to Elm - 6.2 Vite Setup
Просмотров 306Месяц назад
Learn how to use Elm with Vite for a better developer experience
Welcome to Elm - 6.1 Minimal Setup
Просмотров 181Месяц назад
Learn the simplest way to compile Elm to JavaScript and drop it in a project
Welcome to Elm - 5.2 The Elm Architecture
Просмотров 190Месяц назад
Welcome to Elm - 5.2 The Elm Architecture
Welcome to Elm - 4.3 Component Modules
Просмотров 133Месяц назад
Welcome to Elm - 4.3 Component Modules
Pin me i loved ur work
I love when it sorts the import section. 🤩
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.
Great suggestion- thanks for calling that out!
I always thought ELM was a FE framework 😮
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!
😂😂😂 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.
Great series overall! Thanks, Ryan!
Thanks for following along, hopefully more to come in the future 🤞
the elm guide doesnt do 10% this guide does
mom I wanna cry I wont see any Ryan notifications anymore
RIP notifications (for now!) At least you can relive the video content whenever you’re feeling nostalgic 😅
@@HeyRyanHaskellI'll watch your other series since I feel I have a stronger foundation now
Awesome content!
Thanks, Gary! 😊
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.
Thanks, I’m glad you enjoyed it! I love working with Dillon, elm-pages is great!
Hi! Ryan, congrats for this awesome series. So far the best Elm resource on RUclips!. 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.
Thank you, and I love your suggestion too!
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.
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 😎
hahahahahahaha best beginning ever
I was also wondering if you disabled elm language server also because the rapid feedback in the editor was missing imo
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...
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!
you would love to have all your ports in typescript so even the outside world is typesafe
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
I'll add that to my list for upcoming course ideas, thanks for your suggestion!!
@@HeyRyanHaskell you are a blessing to the community
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
Thank you for taking time to leave feedback! I’ll need to brainstorm some alternatives 🧠
I believe I'll reach a higher understanding when I build my first mapping function. it's really hard to grasp
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
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.
yessssss I finished it!!
Hands down the best Elm series ever! Thanks a ton for breaking it down and sharing it for all of us!
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.
hardest episode yet
This is the most advanced unit and includes the stuff it took me the longest to learn! Might need a while to sink in 🧠
@@HeyRyanHaskell it is clicking. I'm watching it on repeat in different parts of the day so it clicks more
Seems like integrating with anything JS is a bit of a hands full, whether through ports or web components
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!
Seeing what you do with these videos makes me want to start with Elm after a few years. Great work Ryan!!
Thank you, go for it and build something cool!
Great videos on how flags, subscriptions and ports work in Elm. Thank you. Especially your comments on how to make it robust.
You're very welcome- I'm glad you enjoyed the video!
i used Elm for some websites. do long-term Elm jobs exist? what are your thoughts on elm-ui and iced?
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!
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 👍
Honestly, I wasn't really interested in learning Elm, but now I am, all because of your well delivered tutorials.
Thank you, I’m glad I could trick at least one person into accidentally becoming an Elm developer - hope you enjoy the learning journey! 😃
@@HeyRyanHaskell 😂lol
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.
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! 😊
Always looking forward to the next video. Thank you so much for sharing this!!!
yeah always wanted to feel elm as a prod developer and his series hit the nail
Thanks, Tom! Glad you’re enjoying the videos so far - there’s more exciting stuff to come!
How do I nest this. How it works for medium size project?
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!
Great angle with converting React code to Elm, exceptionally well delivered and so easy to follow. Thank you!
Thanks, Max! This is one of my favorite videos in the course, I’m glad you enjoyed it too ☺️
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😂
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!
I don’t want to spoil anything, but I think you are REALLY going to like the second half of this series 😁
@@HeyRyanHaskell haha nice!
Keep having too much fun. 😀
6:20 now I finally undestood Html.map. why in the tutorial is it not recommending to use it?
oh you just explained. I have to rewatch this episode this was a mindful
yay love this series. have you even did roc from richard? do you think it is in a good direction?
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 🤩
Love ❤ it
Thanks for the encouraging comment- more fun Elm stuff to come!!
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.
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
I've been coding Elm for 12 months now and never used HTML... I'm elm-ui all the way - it's great
Elm UI is a wonderful package- I'm glad you are having a great time using it! ❤️
I need more
I'm excited for me too 😄
So, how can I make a custom ADT comparable so to be able to use it with the Set?
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!
@@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.
What happens if you set 5th element on array of size 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!
Thanks!
Guess my Haskell fits right in ;). Thank you, excellent series
Thank you for watching! Hope you enjoy the rest of it 😊
But you are not sure?
Maybe not… 🤔
8:20 correction. I think it would be correct to call it map "method". Function is not bound and methods are bound to the datastructure or the much called object
When I use the word "method", I also think of functions bound to objects. In languages with objects, I say "method" when calling a function that is available on an instance of an object like this: > myMaybe.map(double) rather than > Maybe.map double myMaybe Although most functions in Elm take data structures as arguments, I'll refer to these as "functions" throughout this course rather than "static methods" If you prefer to call these methods, I think that’s also fine! Whatever term is most helpful when you’re learning or building stuff with Elm
@@HeyRyanHaskell yes I believe you are correct. it's just that js looks so OO lang to me that I use to keep the OO terminology.
yay honey new ryan video dropped
Thank you, thank you, thank you. I look forward to watching the rest of the episodes in the series.
You’re very welcome- I’m glad you're enjoying the videos!
FWIW: ELectronic Mail (ELM), mostly defunct, may have a name conflict with this.