Learn Elm, a strongly-typed functional programming language that is used for building frontend applications.
Learn Elm, a strongly-typed functional programming language that is used for building frontend applications.
Each lesson focuses on a single aspect of building the project, like modeling the data, building a GraphQL server in Elixir, or building a mobile client for it in Flutter.
A brief introduction to the Elm programming language and links to various useful resources.
Installation and a brief syntax introduction.
An overview of the Elm package tool, ecosystem, and some related sites.
Building a basic counter HTML application, using `Html.beginnerProgram`.
Links getting a bit further introduced to the Elm ecosystem, and an exercise to expand upon the Counter application we started in the last episode.
Your first exercise - expanding on the counter.
A list of useful introductory links when early on your path to learn Elm.
A solution to Elm 001.5's exercise, and readings to prepare you for implementing TodoMVC in Elm.
Implementing the initial counter app without StartApp, to see exactly what it provides.
Preparing to implement TodoMVC by modeling the problem domain.
Beginning our TodoMVC implementation in a new project, with the models we've identified, and pulling in existing styles.
Adding the ability to add Todos to the model in our TodoMVC implementation by pressing Enter in the input field.
A few more links to explore, and an exercise: Modifying the TodoMVC implementation to support adding specific todos to the model, rather than just using our `mockTodo` function.
Must-see links per the elm-lang slack channel and found via the Mailing List.
Solving the previous TodoMVC exercise, and planning for editing and filtering our Todos.
Adding an identifier to each Todo, and wiring up the checkbox to toggle their completed state.
Fixing a bug introduced in the previous drip.
Filtering Todos by their completion state.
Removing Todos from the list.
Links from around the internet, and an exercise suggestion: clearing the completed todos.
A collection of links from the ML, Slack, and the internet in general. A video by Richard Feldman, a way to find new Elm libraries, and dealing with CSS/HTML Animations in Elm, and more!
An implementation of the previous exercise, as well as introductory readings to prepare you for Cmd, Tasks, and Ports.
Implementing the RandomGif example from the elm-architecture-tutorial as a means of introducing Tasks and Cmd, for HTTP requests.
Seeing how tagged actions plus `Cmd.batch`, `Cmd.map`, and `Html.map` can allow you to easily compose components.
The week's links, and an exercise to implement both inbound and outbound ports from scratch to reinforce our understanding.
There are a lot of fun links this week. A bit of learning, a bit of new libraries, and a great Richard Feldman video.
Preparation for the week and the solution to the Ports exercise. This week we'll cover LocalStorage via Ports, and custom JSON encoding and decoding.
Storing the state of our model in the browser's LocalStorage by using Ports.
Storing a slightly more complicated model into LocalStorage, and encoding / decoding that model via JSON.
Implementing custom JSON encoders and Decoders in order to store our custom types in LocalStorage for our TodoMVC implementation.
Introducing `elm-decode-pipeline` for a better way to decode JSON.
Quite a few links around the Elm ecosystem, and an exercise to build an app around a Chuck Norris API.
There are a lot of dense links this week. Maybe too many. But there's a trove of useful information if you want to deep dive into understanding the core concepts behind Elm.
This week we'll take a break from HTML and start exploring Elm's Graphics capabilities.
Learning about the Graphics capabilities that Elm provides, as well as an introduction to the Mouse module.
Reviewing various other shapes at your disposal from the `Collage` module.
Building an application that allows the user to place stamps on a canvas, learning more about subscriptions in the process.
Adding the ability to stamp multiple shapes.
An exercise to add a message to the Stamps application
Just a few high quality links this week, with a heavy focus on content from NoRedInk. Everything from code style suggestions to tools to help build JSON decoders.
This week we'll implement an Etch-A-Sketch, introducing various methods of Graphics Input and Animation.
Exploring more of Elm's Graphics capabilities by building an Etch-A-Sketch application.
Introducing `Time.every` and `Keyboard.Extra` to allow us to introduce key repeat in our Etch-A-Sketch application.
Introducing Graphics.Input to add a Shake button to our Etch-A-Sketch, and adding some animation with elm-animation.
Handling multiple sequential animations in our Etch-A-Sketch.
An exercise adding color-changing functionality to the Etch-A-Sketch.
Structuring larger Elm apps, creating web components that use Elm internally, how languages can encourage productivity by being difficult, a blip on a Radar, and $$$$.
This week we'll look at setting up our Projects a bit more intelligently, and bringing in some tooling to help us maintain and test them.
Defining a reasonable project structure, adding a good README, adding `build` and `publish` scripts, and publishing to GitHub Pages.
Using `elm-format` to make your code pretty.
Debugging in Elm with `Debug.crash` and `Debug.log`.
Using `elm-test` to write tests for your applications and run them easily from the console, and using Travis CI to run them every time you push new code.
Today's exercise will focus on writing tests for the Etch-A-Sketch update function.
This week: an awesome elm sound toy; nesting components; Elm and Elixir; another Elm intro video; and an idea for disambiguating some union tags.
This week we'll look at the Date and Maybe modules in the Elm standard library, as well as a package that adds Date functionality, and we'll review Elm's pipes.
Dealing with Dates and Times in Elm.
Using `elm-date-extra` to provide some much-needed Date functionality, including easy relative modification and comparison.
Handling computations that aren't guaranteed to have a meaningful return value.
Looking at the use of Backwards and Forwards Function Application.
This week we learned how to deal with Dates and how Maybe worked. For this week's exercise, we'll combine the two.
This week: Accidentally Concurrent, Fractal UI Patterns, Ray Tracing, Electron, the role of Effects and Tasks, and a discussion of producing Swift code from Elm (or not).
This week we're going to talk about the Web Audio API. There's a lot to it, but in general it boils down to this: you make nodes in an Audio Processing Graph and hook them together.
Building a Web Audio-powered Theremin, controlled by the mouse position from Elm.
Gathering fast Fourier transform data from web audio, and sending it to Elm over a port (which involves dealing with Uint8Arrays, sort of)
Graphing our Audio Graph's data in Elm as an oscilloscope, centered in our window.
Making our oscilloscope look slightly more retro by adding traces of its history to the rendered graph.
For this week's exercise, we'll essentially manually memoize some function calls to reduce CPU load.
A solution to reducing elm_theremin's CPU usage re: the alpha oscilloscope traces, and prepwork for our upcoming Phoenix <-> Elm channels work.
Building an Elm client to an Elixir Phoenix-based chat application using the elm-phoenix-socket package.
We refactor the views for the chat client to make it easier to follow as we add more logic, and we accept a username before initializing the Phoenix Socket.
Contributing to our first library, by adding Phoenix.Presence support to fbonetti's elm-phoenix-socket library.
Some articles on Elm Types; convincing your co-workers to give it a shot; explanations for the present Native situation; a paper that has consumed my life; a React-based immutability-focused rich text editor to integrate with ports; a mental model for Elm 0.17's program loop.
A JSON Decoder for `PresenceDiff`, and preparation for implementing the remaining client-side support for `Phoenix.Presence` features.
Test-Driving our Phoenix Presence client by porting the existing phoenix.js test suite to Elm.
Porting more of the `presence_test.js` test suite and implementing `syncDiff`.
Making use of our Phoenix.Presence support in elm-phoenix-socket in an application.
We cover why walking's great but the existence of legs doesn't magically make bicycles not amazing; `child->parent` communication; Porting a module to 0.17 with detailed discussion; Vega Lite, which should be great for charting from Elm but I haven't tried yet; modal dialogs; Static Type Checking; the reasoning behind the Elm Logo; and filtering on `Sub`.
This week we'll extract a `Presence` module and continue creating a PR for `Phoenix.Presence` in `elm-phoenix-sockets`, as well as do some more interesting `Json.Decode` work. We'll also see how to make our own Parameterized Types.
Extracting a Presence module for the `elm-phoenix-socket` library so that we can reduce our userland code.
We implement `Presence.list` in `elm-phoenix-socket`, and in the process I have a bit of a eureka! moment re: functional composition.
Making the Presence support in `elm-phoenix-socket` more friendly regarding user-defined-values that are passed in the presence metadata.
Strap in, we've got another substantial list of Elm-related (and occasionally not-exactly-related) posts to dig into from the community. We'll cover a quick vim function to stub out your main elm modules, an example of writing a full site in Phoenix and Elm, `Parent<->Child` communication, some metal, a bit of F#, and yet another Elm game.
Preparing for a new project where we'll build a Single Page App, and the exercise solution from last week.
Tiny submodules and introducing Navigation.
Building out links for our navigation elements, using types to make sure we don't do stupid things.
Nested Routes, and some more modularity.
This week: we'll cover more Phoenix and Elm; see another Elm game; learn a bit about building Effect Managers; learn how to enquire about DOM properties; see how to generate boilerplate; compare react/redux/elm; and hopefully contribute to a Mailing List thread that I find fascinating.
Styling in Elm with `elm-css`, as well as the exercise solution from last week.
A CSS preprocessor for Elm.
Breaking out the CSS into its own file and introducing variables as well as `withClass`.
Producing CSS files for use externally.
Build some GIFs (pronounced "jiff"); Learn from Philip Wadler; Stop writing clever code; Test your dependencies; Have 99 problems, but have Elm not be one.
Exploring various component communication patterns, and an exercise solution with further work using elm-css.
Parent <-> Child communication by way of building the beginnings of a Chat module that's a TEA Component.
Introducing our own `OutMsg` type to send messages to the parent from the Chat component.
A package to reduce boilerplate when using the `OutMsg`, `Maybe OutMsg`, or `List OutMsg` patterns to communicate up to your parent.
A smattering of interesting links in Elm-land, and implementing Translator for our exercise.
Examining a dictionary of child components, and testing the Translator Pattern.
A pattern for managing dynamic stateful components in your application, and a discussion of situations where you shouldn't.
A discussion around alternatives to recursive `updates`.
Adding RPC-style calls from our server to a given user's client.
Another juicy linkdump, and an exercise to further flesh out our chat interface.
The solution to last week's exercise, and some prep reading for an `elm-mdl` deep dive.
An introduction to using Google's Material Design language in Elm, with elm-mdl. Covers the basics, as well as the Layout module.
A super brief introduction to text fields and menus in elm-mdl. With a bonus really long pair programming session where we refactor some code with Luke Westby and introduce elm-mdl into a project.
Using elm-mdl Lists and Cards to make our chat application a bit nicer.
An exercise to use more elm-mdl. Also: drive a browser with Elm; find a function by its type signature; write friendlier code; stalk a developer; Curry-Howard.
Using Material.Textfield, fixing up our header, adding badges and a list of messages. Also, prep readings for the upcoming week.
A brief overview of elm-mdl's Grid and Table components, as well as implementing elm-markdown and fixing a bug in our elm-mdl implementation.
Adding Snackbars and Toasts to our chat app, for transient user notifications.
A look at introducing Tabs and Dialogs to our chat application.
An exercise to add webpack hot module reloading; also: bugs, matrices, json, games.
Preparing for work on a full-featured Single Page App, and reviewing last week's exercise.
An initial pass at interacting with our backend API from an Elm SPA.
Extracting an API module, deleting and viewing users, and dealing with API calls on page load based on the route.
Making our users list use a Material.Table and adding the ability to sort it.
An exercise to add an edit form. Also: what to do, humor, loops, bad words, proselytizing, and structure.
Preparing to refactor our Single Page App and last week's exercise: Editing a User.
Introducing View Helpers for per-route custom headers, and making a few ugly things less ugly.
Refactoring our API to be nicer to deal with and extend.
Refactoring our Update and Msg to improve maintainability, without adding new files.
Time for some elm links! Also, an exercise to add a new CRUD resource for organizations. This week's links cover: mandelbrots, skimmers, beginnings, BDD, State, and Spaceships.
Adding another resource to our single page app (and seeing how it's still too much work), and preparing for further refactorings, tweaks, and form validations.
Capturing and decoding API Errors, showing them in the Snackbar, and introducing elm-simple-form for live form validations.
A couple of great libraries that taste great together.
Making server-side validations play nicely with elm-mdl and elm-simple-form.
The Glorious Day of Links!
Validating our other resources and some refactoring, and preparing to add authentication and some nicer UI.
Interacting with a remote API that requires authentication, along with a note about CORS.
Flip between Table and Card views for our users resource.
Building a Project's Tasks as a Tree structure and rendering it using elm-mdl Lists.
Links on SVG, TDD, designer-love, and easy elm app bootstrapping. Also an exercise, to store auth tokens in localStorage.
A solution for storing and reloading an API Key, and preparation for adding a couple of interesting graphs.
Building a widget that looks strikingly similar to the GitHub Contribution Graph.
Being forced to log in for ever hot module replacement is unacceptable.
Using wuct/elm-charts to render a line chart over some data.
Links on elm-conf, interesting projects, and some blog posts (so many links). Also, an exercise to provide 401 handling across the API.
Preparing to integrate Leaflet in an Elm app, and solving API-wide 401 redirects.
Extending our existing Leaflet.js integration by adding the ability to add markers with popup text to our map.
An exercise to extend Leaflet.js, and: parsing in Elm; an online REPL; Convincing Bosses; elmifying Ruby; animation in depth.
Solving last week's Leaflet exercise, and preparing to paginate our resources.
Using elm-combine to parse a draft RFC that adds support for links in headers.
Adding pagination to our tables using the Link header we learned to parse in the previous episode.
Completing our work on paginated data tables.
Links on: Thinking Computationally; Fancier SVG Graphics; immutability outside Elm; 'crappy' games; scroll progress. Also, an exercise re: generalizing our paginating table.
Preparing to introduce loading indicators and search, and solving generalizing pagination in the views.
Leveraging the type system to ensure we don't overlook parts of the user experience.
Extending our RemoteData types to allow us to show a loading display.
Quickly adding the ability to search to our data tables.
Links covering: Geocoding, Web Components, Lenses and Prisms and Isomorphisms, and a Category Theory course. Also: a exercise to spread search and loading screens to the rest of our app.
Planning for server-side sorting and better charting, and solving last week's exercise to generalize our loading indicators and search.
Adding the ability to specify the sort order we prefer from the backend.
Implementing server-side sorting throughout the rest of our resources.
A package for charting that's inspired by D3's data model.
Links covering: REST and GraphQL; Plotting; Genetic Algorithms; Monads; and Spaceships. Then an exercise to extend our chart to be a bit nicer.
Preparations for resource detail views, and solving an exercise to extend our charts.
Adding a much more full-featured resource show view.
Adding tab interactions, multiple tabs, and implementing a view of a user's friends.
Implementing a view that shows user activity as a timeline.
Links covering: Elm 0.18 released, and upgrading made easy; type bombs; ML in Erlang; a more featureful input field; forms made easier. Then an exercise to add project cards.
Preparing to introduce web components, and an exercise to add a new Projects tab to the time-tracker.
A quick primer on using Web Components with Elm
A substantial and deep dive into building out a Material-style layout in Elm using Polymer App Layout components.
An introduction to a few more intriguing Paper components.
An exercise to build a credit card form with Web Components, and links covering: Elm Europe, terrain with WebGL, editing Elm in the browser, producing static HTML with Elm, React Storybooks for Elm, visualizing Turing Machines, and raycasting.
Preparing to style our app and release it, and an exercise to create a Credit Card form.
A library to make using Polymer a bit nicer, and a look at how to style Web Components.
Hooking into Polymer events to drive our app's messages.
Adding vulcanize-loader into the mix and building a minified release.
An exercise to improve the user experience in our Elm+Polymer app, and a host of links.
Building a signup flow for a subscription site, and interacting with Stripe from your Elm app.
Integrating with Stripe.js via Ports.
Sending a token to the backend to complete a Stripe subscription, and changing our stripe configuration between development and production.
A sign up flow for an Elm app that requires a paid subscription, powered by Stripe.
An exercise, and links ranging from Technical Debt to Haskell to Progressive Web Apps.
Using the FileReader API from Elm with a Native package, and managing direct S3 uploads from Elm.
Using a Native package to read file inputs and extract image previews before uploading.
Talking to a new API endpoint to request and store permission to upload a file directly to S3.
Using a backend-provided capability to upload directly to S3 from Elm, with FileReader.
Links covering plotting, tacos, editor features, ember+elm, and optionality. Also, an exercise to manage multiple file uploads at once.
Building a moderately complex SVG-based drawing tool with support for editing and tracking metadata on shapes.
Building the foundation for an Interactive SVG Editor in Elm.
Adding an interface to select shapes in our SVG editor.
Adding sidebar tools and tracking our mouse's SVG coordinates to add shapes by clicking on the drawing area.
Adding a move operation to our SVG editor, and reviewing what's been going on around the community.
Solving the exercise to move shapes around, via SVG drag and drop.
Adding resize handles to change the size of our shapes interactively.
Fixing some usability issues and extracting our update function.
Adding the ability to change the order in which our shapes are layered.
An exercise to expand our SVG editor with text nodes, as well as links covering Prisms, Elm on iOS, XML parsing, secret decoders, and a replacement for `(!)`
Adding text shapes and preparing for further shape editing and firebase integration.
Adding a form to modify the properties of our SVG shapes, using the HTML5 color picker and number inputs.
Getting the basics of Firebase support in place.
Using Firebase to synchronize our Elm model, providing persistence and collaboration.
3D Geometry, Production Success Stories, View Maturity Upgrades, and an exercise to make our Firebase collaboration a bit nicer.
Solving our overzealous persistence issue and preparing to integrate with more of Firebase.
Integrating with Firebase to support signing in with multiple providers, easily.
Using Firebase Storage from Elm to store uploaded images.
Adding the UI elements necessary to support uploading images to Firebase Storage to be used in our SVG Editor.
VR, Web-based Elm Editing, and a host of node-related Elm tools. Also an exercise to add SVG images to our editor.
Adding support for SVG Image nodes to our editor, and preparing to play with elm-ffi.
Exploring more of elm-ffi's features - safety and asynchronous functions.
An elm package that makes it easy to add context menus to your application.
A week of links and an exercise to expand on our context menu
Preparing to build a mobile native app using elm-native-ui, and solving last week's context menu exercise.
Elm and React Native in Holy Matrimony, via elm-native.
Looking into some elm-native-ui apps' code and talking through it a bit.
Building our own Elm Native App - basic, but enlightening.
Links from the community and an exercise to build a native app with navigation in Elm.
Build native apps for iOS and Android declaratively.
Using Elm to write cross-platform mobile apps with Fuse.
Using Fuse's navigation features from Elm
Starting a new Single-Page App by focusing on routing, with tests.
Setting up the data types for a new Elm Single-Page-App that will become the frontend for the [Firestorm Forum](http://www.firestormforum.org)
Extending our existing views to make them a bit more complete.
Showing the difference between two times in words for a nicer user experience.
Setting the page title for a given route via ports.
Storing nested data in a normalized dicts locally.
Adding the ability to look up resources by slugs in the store.
Towards a structured way to define fetching a page's data from the Model.
Using the style-elements package to style our Elm applications in style.
(Dangerously) Setting innerHTML in an Elm HTML node.
The code in the applications was produced by:
Our content library is pretty great, here are a few lessons we think you might like.
Some other people were willing to publicly state that they like us!
Smooth Terminal has easily been one of the most helpful resources on my journey to better understand Elixir and the Phoenix web framework.
With any language there are so many details to learn. What functions are built-in? How should I structure my code? What tools are available for improving my workflow? It’s rare to find one source that can answer so many of these questions, but Smooth Terminal does this and more.
Smooth Terminal is by far the best resource for learning Elm anywhere, and among the very best online learning platforms, period.