Elm

Learn Elm, a strongly-typed functional programming language that is used for building frontend applications.

Lessons

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.

free

The Elm Programming Language

A brief introduction to the Elm programming language and links to various useful resources.

free

Introduction and Installing

Installation and a brief syntax introduction.

free

Elm Packages

An overview of the Elm package tool, ecosystem, and some related sites.

free

Our First HTML Application

Building a basic counter HTML application, using `Html.beginnerProgram`.

free

Elm Weekly Drip #1 and Exercise: Counter Extended

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.

free

Exercise - Counter Extended

Your first exercise - expanding on the counter.

free

Elm Weekly Drip #1

A list of useful introductory links when early on your path to learn Elm.

Understanding beginnerProgram and Building Todo

A solution to Elm 001.5's exercise, and readings to prepare you for implementing TodoMVC in Elm.

StartApp Excised

Implementing the initial counter app without StartApp, to see exactly what it provides.

TodoMVC Planning

Preparing to implement TodoMVC by modeling the problem domain.

TodoMVC Part 1: Model and Views

Beginning our TodoMVC implementation in a new project, with the models we've identified, and pulling in existing styles.

TodoMVC Part 2: Adding Todos

Adding the ability to add Todos to the model in our TodoMVC implementation by pressing Enter in the input field.

free

Elm Weekly Drip #2 and Exercise: TodoMVC - Adding Todo Details

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.

free

Elm Weekly Drip #2

Must-see links per the elm-lang slack channel and found via the Mailing List.

Extending Todo and Filtering

Solving the previous TodoMVC exercise, and planning for editing and filtering our Todos.

TodoMVC Part 3: Marking Todos Completed

Adding an identifier to each Todo, and wiring up the checkbox to toggle their completed state.

TodoMVC Part 4: Fixing Identifier Bug

Fixing a bug introduced in the previous drip.

TodoMVC Part 5: Filtering

Filtering Todos by their completion state.

TodoMVC Part 6: Removing Todos

Removing Todos from the list.

free

Elm Weekly Drip #3 and Exercise: Clearing Completed Todos

Links from around the internet, and an exercise suggestion: clearing the completed todos.

free

Elm Weekly Drip #3

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!

Cmd, Tasks, and Ports

An implementation of the previous exercise, as well as introductory readings to prepare you for Cmd, Tasks, and Ports.

Tasks and Cmd with RandomGif

Implementing the RandomGif example from the elm-architecture-tutorial as a means of introducing Tasks and Cmd, for HTTP requests.

Composing Components with RandomGifPair

Seeing how tagged actions plus `Cmd.batch`, `Cmd.map`, and `Html.map` can allow you to easily compose components.

Ports

Interop between JavaScript and Elm uses Ports. In this episode, we see how to send data to Elm from JavaScript over a port.

Outbound Ports

Sending data from Elm to JavaScript by way of ports.

free

Elm Weekly Drip #4 and Exercise: Ports, Outbound and Inbound

The week's links, and an exercise to implement both inbound and outbound ports from scratch to reinforce our understanding.

free

Elm Weekly Drip #4

There are a lot of fun links this week. A bit of learning, a bit of new libraries, and a great Richard Feldman video.

LocalStorage in TodoMVC

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.

LocalStorage via Ports

Storing the state of our model in the browser's LocalStorage by using Ports.

LocalStorage and JSON

Storing a slightly more complicated model into LocalStorage, and encoding / decoding that model via JSON.

free

TodoMVC Part 7: LocalStorage

Implementing custom JSON encoders and Decoders in order to store our custom types in LocalStorage for our TodoMVC implementation.

Why `map4`?

Introducing `elm-decode-pipeline` for a better way to decode JSON.

free

Elm Weekly Drip #5 and Exercise: External APIs and JSON

Quite a few links around the Elm ecosystem, and an exercise to build an app around a Chuck Norris API.

free

Elm Weekly Drip #5

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.

Graphics

This week we'll take a break from HTML and start exploring Elm's Graphics capabilities.

Graphics Introduction

Learning about the Graphics capabilities that Elm provides, as well as an introduction to the Mouse module.

Graphics Shapes

Reviewing various other shapes at your disposal from the `Collage` module.

Stamps

Building an application that allows the user to place stamps on a canvas, learning more about subscriptions in the process.

Extending Stamps

Adding the ability to stamp multiple shapes.

Adding More Messages to Stamps

An exercise to add a message to the Stamps application

free

Elm Weekly Drip #6

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.

Graphics Input and Etch-A-Sketch

This week we'll implement an Etch-A-Sketch, introducing various methods of Graphics Input and Animation.

free

Etch-A-Sketch

Exploring more of Elm's Graphics capabilities by building an Etch-A-Sketch application.

Repeating Keypresses

Introducing `Time.every` and `Keyboard.Extra` to allow us to introduce key repeat in our Etch-A-Sketch application.

Graphics Input and Animation

Introducing Graphics.Input to add a Shake button to our Etch-A-Sketch, and adding some animation with elm-animation.

Multiple Animations

Handling multiple sequential animations in our Etch-A-Sketch.

Graphics Input: Picking Colors

An exercise adding color-changing functionality to the Etch-A-Sketch.

free

Elm Weekly Drip #7

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 $$$$.

Project Setup and Tooling

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.

Project Setup

Defining a reasonable project structure, adding a good README, adding `build` and `publish` scripts, and publishing to GitHub Pages.

elm-format

Using `elm-format` to make your code pretty.

Debug

Debugging in Elm with `Debug.crash` and `Debug.log`.

elm-test

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.

Testing Update

Today's exercise will focus on writing tests for the Etch-A-Sketch update function.

free

Elm Weekly Drip #8

This week: an awesome elm sound toy; nesting components; Elm and Elixir; another Elm intro video; and an idea for disambiguating some union tags.

Date and Maybe

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.

Date

Dealing with Dates and Times in Elm.

elm-date-extra

Using `elm-date-extra` to provide some much-needed Date functionality, including easy relative modification and comparison.

Maybe

Handling computations that aren't guaranteed to have a meaningful return value.

Pipes

Looking at the use of Backwards and Forwards Function Application.

Maybe Dates

This week we learned how to deal with Dates and how Maybe worked. For this week's exercise, we'll combine the two.

free

Elm Weekly Drip #9

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).

Web Audio

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.

free

Building a Theremin with Web Audio

Building a Web Audio-powered Theremin, controlled by the mouse position from Elm.

Web Audio Analyzer / Elm Interop

Gathering fast Fourier transform data from web audio, and sending it to Elm over a port (which involves dealing with Uint8Arrays, sort of)

An Oscilloscope Appears!

Graphing our Audio Graph's data in Elm as an oscilloscope, centered in our window.

Alpha Oscilloscope History

Making our oscilloscope look slightly more retro by adding traces of its history to the rendered graph.

Reduce CPU Usage for Oscilloscope

For this week's exercise, we'll essentially manually memoize some function calls to reduce CPU load.

Phoenix and Elm

A solution to reducing elm_theremin's CPU usage re: the alpha oscilloscope traces, and prepwork for our upcoming Phoenix <-> Elm channels work.

free

elm-phoenix-socket

Building an Elm client to an Elixir Phoenix-based chat application using the elm-phoenix-socket package.

Refactoring the Chat Client

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.

Adding Presence Support to `elm-phoenix-socket`

Contributing to our first library, by adding Phoenix.Presence support to fbonetti's elm-phoenix-socket library.

free

Elm Weekly Drip #11 and Exercise: Support PresenceDiff Types

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.

Phoenix and Elm, Continued

A JSON Decoder for `PresenceDiff`, and preparation for implementing the remaining client-side support for `Phoenix.Presence` features.

Phoenix `syncState` in Elm

Test-Driving our Phoenix Presence client by porting the existing phoenix.js test suite to Elm.

Phoenix `syncDiff` Implementation

Porting more of the `presence_test.js` test suite and implementing `syncDiff`.

Using Presence

Making use of our Phoenix.Presence support in elm-phoenix-socket in an application.

free

Elm Weekly Drip #12 and Exercise: Enhance `elm-phoenix-socket`

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`.

Extracting Modules, Nested Records, and Parameterized Types

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 Presence Module

Extracting a Presence module for the `elm-phoenix-socket` library so that we can reduce our userland code.

Presence.list

We implement `Presence.list` in `elm-phoenix-socket`, and in the process I have a bit of a eureka! moment re: functional composition.

Nested Records and Phoenix.Presence

Making the Presence support in `elm-phoenix-socket` more friendly regarding user-defined-values that are passed in the presence metadata.

free

Elm Weekly Drip #13 and Exercise: Use Presence Metadata in Elm Phoenix Example

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.

Single Page Apps

Preparing for a new project where we'll build a Single Page App, and the exercise solution from last week.

Content Catalog, Part 1: Initial Setup

Tiny submodules and introducing Navigation.

Content Catalog, Part 2: Link Helpers

Building out links for our navigation elements, using types to make sure we don't do stupid things.

free

Content Catalog, Part 3: Topics and Content

Nested Routes, and some more modularity.

free

Elm Weekly Drip #14 and Exercise: Marking Active Routes

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

Styling in Elm with `elm-css`, as well as the exercise solution from last week.

elm-css

A CSS preprocessor for Elm.

Structuring elm-css

Breaking out the CSS into its own file and introducing variables as well as `withClass`.

Generating CSS Files with `elm-css`

Producing CSS files for use externally.

free

Elm Weekly Drip #15 and Exercise: Go Crazy With Styling

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.

Component Communication

Exploring various component communication patterns, and an exercise solution with further work using elm-css.

free

Componentizing Chat

Parent <-> Child communication by way of building the beginnings of a Chat module that's a TEA Component.

Componentizing Chat, Part 2

Introducing our own `OutMsg` type to send messages to the parent from the Chat component.

OutMessage

A package to reduce boilerplate when using the `OutMsg`, `Maybe OutMsg`, or `List OutMsg` patterns to communicate up to your parent.

free

Elm Weekly Drip #16 and Exercise: Translator Pattern

A smattering of interesting links in Elm-land, and implementing Translator for our exercise.

Dictionaries of Components and Phoenix Control Channels

Examining a dictionary of child components, and testing the Translator Pattern.

Dictionaries of Components

A pattern for managing dynamic stateful components in your application, and a discussion of situations where you shouldn't.

Recursive Update

A discussion around alternatives to recursive `updates`.

Phoenix Control Channels

Adding RPC-style calls from our server to a given user's client.

free

Elm Weekly Drip #17 and Exercise: Add Chat Notifications and Channel Switching

Another juicy linkdump, and an exercise to further flesh out our chat interface.

Elm Material Design Lite

The solution to last week's exercise, and some prep reading for an `elm-mdl` deep dive.

free

`elm-mdl` Introduction

An introduction to using Google's Material Design language in Elm, with elm-mdl. Covers the basics, as well as the Layout module.

free

elm-mdl: Textfields and Menus

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.

elm-mdl Lists and Cards

Using elm-mdl Lists and Cards to make our chat application a bit nicer.

free

Elm Weekly Drip #18 and Exercise: Use More elm-mdl

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.

More elm-mdl exploration

Using Material.Textfield, fixing up our header, adding badges and a list of messages. Also, prep readings for the upcoming week.

elm-mdl Grid and Tables

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.

elm-mdl Snackbar and Toast

Adding Snackbars and Toasts to our chat app, for transient user notifications.

elm-mdl Tabs and Dialogs

A look at introducing Tabs and Dialogs to our chat application.

free

Elm Weekly Drip #19 and Exercise: Webpack Hot Module Replacement

An exercise to add webpack hot module reloading; also: bugs, matrices, json, games.

Time Tracker Single Page App

Preparing for work on a full-featured Single Page App, and reviewing last week's exercise.

Basic CRUD in a Single Page Application

An initial pass at interacting with our backend API from an Elm SPA.

Cleaned Up CRUD

Extracting an API module, deleting and viewing users, and dealing with API calls on page load based on the route.

Finishing a CRUD Resource with a Sortable Table in elm-mdl

Making our users list use a Material.Table and adding the ability to sort it.

free

Elm Weekly Drip #20 and Exercise: Edit Users

An exercise to add an edit form. Also: what to do, humor, loops, bad words, proselytizing, and structure.

Editing Users and a Week of Refactoring

Preparing to refactor our Single Page App and last week's exercise: Editing a User.

A Grab Bag of Refactoring and Tweaks

Introducing View Helpers for per-route custom headers, and making a few ugly things less ugly.

Refactor API

Refactoring our API to be nicer to deal with and extend.

Refactor Update and Msg

Refactoring our Update and Msg to improve maintainability, without adding new files.

free

Elm Weekly Drip #21 and Exercise: Add resource - organizations

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.

More Single Page App Fun

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.

Validation and Error Messages

Capturing and decoding API Errors, showing them in the Snackbar, and introducing elm-simple-form for live form validations.

Integrating elm-simple-form with elm-mdl Inputs

A couple of great libraries that taste great together.

free

Server-Side Validations (Josh Adams and Luke Westby pairing)

Making server-side validations play nicely with elm-mdl and elm-simple-form.

free

Elm Weekly Drip #22 and Exercise: Use Validations on Remaining Resources

The Glorious Day of Links!

Authentication and More UI Niceties

Validating our other resources and some refactoring, and preparing to add authentication and some nicer UI.

Authentication and APIs

Interacting with a remote API that requires authentication, along with a note about CORS.

Cards for Users

Flip between Table and Card views for our users resource.

Trees

Building a Project's Tasks as a Tree structure and rendering it using elm-mdl Lists.

free

Elm Weekly Drip #23 and Exercise: Remember Auth Token

Links on SVG, TDD, designer-love, and easy elm app bootstrapping. Also an exercise, to store auth tokens in localStorage.

Yet more Single Page App!

A solution for storing and reloading an API Key, and preparation for adding a couple of interesting graphs.

Activity Graph

Building a widget that looks strikingly similar to the GitHub Contribution Graph.

Handling Expiring API Keys

Being forced to log in for ever hot module replacement is unacceptable.

Charts

Using wuct/elm-charts to render a line chart over some data.

free

Elm Weekly Drip #24 and Exercise: App-Wide 401

Links on elm-conf, interesting projects, and some blog posts (so many links). Also, an exercise to provide 401 handling across the API.

Integrating Leaflet.js

Preparing to integrate Leaflet in an Elm app, and solving API-wide 401 redirects.

Interacting with Leaflet for Maps

An example of integrating from Elm with a large UI-based JavaScript library.

Responding to Leaflet Interactions

Handling events on the Leaflet JavaScript side and reflecting them in our model.

Adding Markers to Leaflet

Extending our existing Leaflet.js integration by adding the ability to add markers with popup text to our map.

free

Elm Weekly Drip #25 and Exercise: Extend Leaflet Interactions with Markers

An exercise to extend Leaflet.js, and: parsing in Elm; an online REPL; Convincing Bosses; elmifying Ruby; animation in depth.

Preparing for SPA Tables with Pagination and Search

Solving last week's Leaflet exercise, and preparing to paginate our resources.

Parsing RFC 5988 for API Pagination

Using elm-combine to parse a draft RFC that adds support for links in headers.

Paginating Tables in Elm

Adding pagination to our tables using the Link header we learned to parse in the previous episode.

Finishing Table Pagination

Completing our work on paginated data tables.

free

Elm Weekly Drip #26 and Exercise: Build a Generalizable Paginating Table View

Links on: Thinking Computationally; Fancier SVG Graphics; immutability outside Elm; 'crappy' games; scroll progress. Also, an exercise re: generalizing our paginating table.

Remote Data and Search

Preparing to introduce loading indicators and search, and solving generalizing pagination in the views.

Using RemoteData for Better UX

Leveraging the type system to ensure we don't overlook parts of the user experience.

Smoother Loading of RemoteData

Extending our RemoteData types to allow us to show a loading display.

Searching in our Tables

Quickly adding the ability to search to our data tables.

free

Elm Weekly Drip #27 and Exercise: Loading and Search Everywhere

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.

Server-Side Sorting and Better Charts

Planning for server-side sorting and better charting, and solving last week's exercise to generalize our loading indicators and search.

Server-Side Sorting

Adding the ability to specify the sort order we prefer from the backend.

Generalizing Server-Side Sorting

Implementing server-side sorting throughout the rest of our resources.

Better Charts with elm-visualization

A package for charting that's inspired by D3's data model.

free

Elm Weekly Drip #28 and Exercise: Extend Charts

Links covering: REST and GraphQL; Plotting; Genetic Algorithms; Monads; and Spaceships. Then an exercise to extend our chart to be a bit nicer.

Preparing for Resource Details

Preparations for resource detail views, and solving an exercise to extend our charts.

Making the Users Show View Nicer

Adding a much more full-featured resource show view.

More Detailed Users Show View

Adding tab interactions, multiple tabs, and implementing a view of a user's friends.

Adding an ActivityFeed View

Implementing a view that shows user activity as a timeline.

free

Elm Weekly Drip #29 and Exercise: Add Projects Tab

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 for Web Components

Preparing to introduce web components, and an exercise to add a new Projects tab to the time-tracker.

free

Web Components Introduction

A quick primer on using Web Components with Elm

Polymer App Layout

A substantial and deep dive into building out a Material-style layout in Elm using Polymer App Layout components.

Paper Cards, Menus, and Floating Action Buttons

An introduction to a few more intriguing Paper components.

free

Elm Drip 030.5: Elm Weekly Drip #30 and Exercise: Credit Card Form

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.

Styling and Releasing an Elm + Web Components App

Preparing to style our app and release it, and an exercise to create a Credit Card form.

Using elm-polymer and Styling Our App

A library to make using Polymer a bit nicer, and a look at how to style Web Components.

Responding to Events from Polymer Components

Hooking into Polymer events to drive our app's messages.

Building a Release

Adding vulcanize-loader into the mix and building a minified release.

free

Elm Weekly Drip #31 and Exercise: Close Drawer on Click

An exercise to improve the user experience in our Elm+Polymer app, and a host of links.

Signup and Pay with Stripe

Building a signup flow for a subscription site, and interacting with Stripe from your Elm app.

Accepting Credit Cards with Stripe

Integrating with Stripe.js via Ports.

Stripe Subscriptions and Your Backend

Sending a token to the backend to complete a Stripe subscription, and changing our stripe configuration between development and production.

Users and Subscriptions

A sign up flow for an Elm app that requires a paid subscription, powered by Stripe.

free

Elm Weekly Drip #32 and Exercise: No Layout Until Login

An exercise, and links ranging from Technical Debt to Haskell to Progressive Web Apps.

FileReader and S3 Direct Uploads

Using the FileReader API from Elm with a Native package, and managing direct S3 uploads from Elm.

Introducing FileReader

Using a Native package to read file inputs and extract image previews before uploading.

Requesting S3 Upload Capability from the Backend

Talking to a new API endpoint to request and store permission to upload a file directly to S3.

Uploading Directly to S3

Using a backend-provided capability to upload directly to S3 from Elm, with FileReader.

free

Elm Weekly Drip #33 and Exercise: Multiple Uploads

Links covering plotting, tacos, editor features, ember+elm, and optionality. Also, an exercise to manage multiple file uploads at once.

Preparing to Build a Drawing Tool

Building a moderately complex SVG-based drawing tool with support for editing and tracking metadata on shapes.

Adding and Editing SVG Shapes

Building the foundation for an Interactive SVG Editor in Elm.

Selecting Shapes

Adding an interface to select shapes in our SVG editor.

Adding Shape Tools

Adding sidebar tools and tracking our mouse's SVG coordinates to add shapes by clicking on the drawing area.

free

Elm Weekly Drip #34 and Exercise: Moving Shapes

Adding a move operation to our SVG editor, and reviewing what's been going on around the community.

SVG Editor Week 2

Solving the exercise to move shapes around, via SVG drag and drop.

free

Editing Shapes Interactively

Adding resize handles to change the size of our shapes interactively.

SVG Editor Cleanup

Fixing some usability issues and extracting our update function.

Reordering Shapes

Adding the ability to change the order in which our shapes are layered.

free

Elm Weekly Drip #35 and Exercise: Add Text

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 `(!)`

SVG Editor Week 3

Adding text shapes and preparing for further shape editing and firebase integration.

Editing SVG Properties

Adding a form to modify the properties of our SVG shapes, using the HTML5 color picker and number inputs.

Firebase Setup

Getting the basics of Firebase support in place.

free

Synchronizing Our SVG Editor with Firebase

Using Firebase to synchronize our Elm model, providing persistence and collaboration.

free

Elm Weekly Drip #36 and Exercise: Remedy Firebase Synchronization

3D Geometry, Production Success Stories, View Maturity Upgrades, and an exercise to make our Firebase collaboration a bit nicer.

Firebase Authentication and Storage

Solving our overzealous persistence issue and preparing to integrate with more of Firebase.

Firebase Authentication

Integrating with Firebase to support signing in with multiple providers, easily.

Firebase Storage

Using Firebase Storage from Elm to store uploaded images.

SVG Editor Images

Adding the UI elements necessary to support uploading images to Firebase Storage to be used in our SVG Editor.

free

Elm Weekly Drip #37 and Exercise: Add Image Shapes

VR, Web-based Elm Editing, and a host of node-related Elm tools. Also an exercise to add SVG images to our editor.

Solution for Adding Image Shapes

Adding support for SVG Image nodes to our editor, and preparing to play with elm-ffi.

Introducing elm-ffi

A package for prototyping Elm and JavaScript interop.

elm-ffi Safety and Async

Exploring more of elm-ffi's features - safety and asynchronous functions.

elm-contextmenu

An elm package that makes it easy to add context menus to your application.

free

Elm Weekly Drip #38 and Exercise: More Contextmenu

A week of links and an exercise to expand on our context menu

Elm Native UI Prep

Preparing to build a mobile native app using elm-native-ui, and solving last week's context menu exercise.

free

Building Native Mobile Apps with Elm

Elm and React Native in Holy Matrimony, via elm-native.

Exploring Elm Native UI Further

Looking into some elm-native-ui apps' code and talking through it a bit.

Elm Native App "from Scratch"

Building our own Elm Native App - basic, but enlightening.

free

Elm Weekly Drip #39 and Exercise: Native Navigation

Links from the community and an exercise to build a native app with navigation in Elm.

free

Preparing for Fuse Native Apps

Build native apps for iOS and Android declaratively.

Introducing elm-fuse

Using Elm to write cross-platform mobile apps with Fuse.

Navigation in elm-fuse

Using Fuse's navigation features from Elm

Routing with UrlParser

Starting a new Single-Page App by focusing on routing, with tests.

Modeling Data for a Forum Frontend

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)

Building Views for a Forum

Extending our existing views to make them a bit more complete.

Time Difference In Words

Showing the difference between two times in words for a nicer user experience.

Page Titles

Setting the page title for a given route via ports.

Modeling a Local Data Store

Storing nested data in a normalized dicts locally.

Adding Indices to the Store

Adding the ability to look up resources by slugs in the store.

Colocating Queries with Pages

Towards a structured way to define fetching a page's data from the Model.

free

Style Elements

Using the style-elements package to style our Elm applications in style.

innerHTML in Elm

(Dangerously) Setting innerHTML in an Elm HTML node.

Authors

The code in the applications was produced by:

./josh adams

Josh Adams

I've been building web-based software for businesses for over 18 years. In the last four years I realized that functional programming was in fact amazing, and have been pretty eager since then to help people build software better.

Featured Lessons

Our content library is pretty great, here are a few lessons we think you might like.

What our Superusers are Saying!

Some other people were willing to publicly state that they like us!

Taylor Dolezal

Software Architect

Smooth Terminal has easily been one of the most helpful resources on my journey to better understand Elixir and the Phoenix web framework.

James Edward II

Developer

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.

Rex Van Der Spuy

Game developer

Smooth Terminal is by far the best resource for learning Elm anywhere, and among the very best online learning platforms, period.