Elm Radio

• Lindsay Wardell (github)
• Vite
• ESM (native JS module import statement)
• esbuild
• Rollup
• Vitest
• Turbopack
• Vite SSR mode (for framework authors)
• vite-plugin-elm
• Docs on configuring Vite
• Lindsay's vite-elm-template
• Web Workers API
• Lindsay's blog post Utilizing Elm in a Web Worker
• elm-watch Elm Radio episode
• Article about finding Google Fonts embeds to be in violation of GDPR
• Google fonts download plugin setup in the elm-pages docs site
• vite-node
• awesome-vite repo
• Lindsay's ViteConf 2022 talk Functional Programming in Vite with Elm
• ViteConf 2022 talks

• elm-pages v3 (still in pre-release)
• elm-pages v2 DataSources are called BackendTasks in v3
• Feels similar to elm/core Task (andThen, map, mapError)
• Script.log
• Minimal setup repo for running scripts
• wolfadex/elm-ink
• BackendTask.Custom
• mdgriffith/elm-codegen
• FatalError
• BackendTask.allowFatal
• Zod
• dillonkearns/elm-cli-options-parser (Elm package for parsing command-line flags and showing help text)
• Other Elm tools for running scripts
  • elm-posix
  • elm-script
• elm-pages V3 starter (still pre-release)
• elm-pages V3 beta package
• #elm-pages Slack channel

• Georges Boris (twitter) (github) (Uncover)
• elm-widgets
• Twitter Bootstrap
• elm-theme
• elm-theme Tailwind plugin
• elm-sortable-table philosophy in readme
• Confidenceman02/elm-select/latest/
• tesk9/elm-accessible-html
• tesk9/palette
• elm-theme showcase site using Elm Book
• elm-theme theme generator
• Why Breaking Up with CSS-in-JS blog post
• Loading widgets
• Modal widgets
• details HTML element
• dialog HTML element
• Tooltips
• CSS :has() pseudo-class
• JS tool for theming Theme UI

• Bobby Tables XKCD comic
• SQL injections
• DDoS attacks
• XSS (Cross-Site Scripting) attack prevention cheatsheet
• Jeroen's blog post Fixing vulnerabilities in Elm's virtual DOM
• HTTP cross origin cookie policy options
• Richard's Oslo Elm Day keynote where he discusses rolling your own tools for security reasons
• lukewestby/elm-http-builder
• Output Encoding article
• Elm's Virtual DOM implementation
• Feross' CS 253 Stanford Web Security course on YouTube
• Web Security course notes and slides
• Feross' blog post What's Really Going On Inside Your node_modules Folder?

Guests

• Mario Rogic (twitter) (github)
• Matthew Griffith (twitter) (github)

Links

• Elmcraft.org
• Jeroen's Elmcraft article ESLint equivalents in Elm
• Martin Janiczek's Elmcraft article on Let Polymorphism
• Elmcraft project on GitHub
• Elmcraft discord
• elm-codegen
• elm-gql
• Matt's Strange Loop talk CodeGen with Types, for Humans, by Humans
• Tail recursion modulo cons elm optimize level 2 pr
• elm-review extractors feature
• elm-pages-v3-beta
• elm-pages Script (v3 feature)
• OpenAI whisper project on GitHub
• elm-watch
• elm-book
• elm-widgets
• L*a*b color space
• elm.dev
• elm-watch episode
• elm-tailwind-modules color parameterization PR

• Practice makes permanent
• Flow book by Mihaly Csikszentmihalyi

Key Principles of Deliberate Practice

• Isolation

• Appropriate level of challenge

• Introspection

• Code katas

  • Fuzz buzz
  • Tennis kata
  • Roman Numerals Kata
  • Gilded rose

• Constraint games

• TDD is a core tenant of katas

• Exercism

• Martin Janiczek fuzz testing (and elm-test v2) episode

• Advent of Code

• Dillon's elm-katas starter repo

• Elm Gilded Rose starter repo

• TCR (test commit revert)

• Dillon and Corey Haines pairing using TCR on the Gilded Rose kata in Elm

• Dillon's example TCR script for snapshot testing workflow

• vendrinc/elm-gql
• dillonkearns/elm-graphql
• elm-codegen
• The Insomnia API client has a graphql tool
• GraphQL variables
• Wrap early, unwrap late
• GraphQL Union Types
• GraphQL Enum types
• Dillon's Types Without Borders elm-conf talk
• GraphQL fragments
• Richard Feldman's talk Immutable Relational Data
• Elm Store Pattern episode
• remotedata package
• Elm Radio elm-graphql episode
• Vendr is hiring
• Dillon's Types Without Borders Isn't Enough blog post
• elm-ts-interop episode
• GraphQL approach for sending allow listed hashed query to server
• GraphQL field aliases
• Matthew's Strange Loop talk CodeGen with Types, for Humans, by Humans
• harmboschloo/graphql-to-elm
• Deprecated jahewson/elm-graphql tool
• elm-gql repo guide
• elm-gql GitHub API example repo

• Is TDD Dead? (TDD is Dead and associated video discussions with TDD experts)
• Roc-lang's tagged unions
• XP (Extreme Programming)
• 80-20 rule (i.e. Pareto Principle)
• Amanda Laucher's ScalaDays talk Types vs Tests
• Kent Beck's book TDD by Example
• dtwrks/elm-book
• Martin Janiczek's Elm Online talk on Storybook-driven development
• Talk with demo of program synthesis
• Relentless Tiny Habits
• Code Katas

• Getting Things Done methodology
• Elm Radio Developer Productivity episode
• Elm Radio Parse, Don't Validate episode
• Scaling Elm apps Elm Radio episode
• Ruby's method_missing
• Ruby's Enumerble API methods
• Joël Quenneville's recommendation to write functions at a single level of abstraction
• elm-pages v3 API makes HttpOnly cookies opt-out instead of opt-in
• Llewellyn Falco and Woody Zuill's video Practical Refactoring ("Understand the code so we can change it" vs. "change the code so we can understand it")
• Elm Radio Incremental Steps episode
• Elm Radio Opaque Types episode

• Aaron White (github) (twitter)
• Vendr (github)
• Vendr, Software Procurement Startup, Raises $150 Million at Unicorn Valuation - Bloomberg
• Make Impossible States Impossible
• Luke Westby's talk on Web Components
• Richard Feldman's 2016 meetup talk on Web Components
• elm-spa-example
• elm-spa
• elm-spa-realworld example
• Evan's elm-sortable-table repo
• Actor framework or taco or Msg translator (nested TEA) didn't work out well
• elm-codegen
• Plop templating tool
• Storybook
• Evan's vision for data interchange
• Vendr is hiring

• Matthew Griffith (twitter) (github)
• elm-codegen
• elm-syntax
• elm-syntax-dsl
• elm-ui
• Elm.Type.Type from elm/project-metadata-utils represents all possible Elm types
• elm-codegen announcement post on Discourse
• Guides from the elm-codegen repo

• Simon Lydell (twitter) (github)
• elm-watch
• Parcel build tool
• Building Trustworthy Tools Elm Radio episode
• Vite
• klazuka/elm-hot
• elm-tooling episode
• elm-watch run-pty example folder
• Simon's run-pty tool for running commands in parallel

Sponsor: CareRev

CareRev is looking for Senior Frontend Elm engineers (job listing).

• elm-review-simplify
• Elm Radio Root Cause of False Positives episode
• Dillon's pairing session using snapshot testing prototype with Corey Haines
• elm-snapshot-test prototype repo
• Approval testing
• elm-coverage
• elm-instrument
• Llewellyn Falco Gilded Rose kata video
• Idea: intellij integration for elm-coverage
• Idea: code actions for safe refactorings
• Idea: elm-review integration in intellij
• Idea: sparksp/elm-review-imports either new feature, or separate project to give suggestions to make all inconsistent imports in a project consistent
• Idea: elm-review code actions
• Idea: elm-review collection mechanism to gather data from an AST
• Pairwise testing (or all pairs)
• Idea: pairwise permutation API that minimizes the number of permutations to go through to get complete coverage
• Idea: mutation testing tool for Elm (is Phillip's tool relevant here?)
• Idea: generated API for elm-graphql but with factory-style API for mocking out data that is compliant to the graph schema, for use with things like elm-program-test
• Idea: Browser.application wrapper that provides some common initial flags like start time, initial window dimensions etc
• Idea: HTTP Error type to get bad status payload that can be shared between libraries to reuse the same type (similar to the HttpError type defined in elm-graphql)
• Aaron's community-standard elm-color package
• Idea: tool to automatically vendor or un-vendor Elm packages
• Idea: elm-format in Elm
• Idea: elm diff, but it gives you more detailed information about code changes even if they don't change the API
• Idea: Phantom Builder analyzer that generates a state diagram from Elm code
• Idea: suggest types based on what's possible in your current editor context
• Idea: type inference and value inference in elm-review
• elm-http-fusion
• Idea: use a collection of HTTP requests to an endpoint in elm-http-fusion to gather better type incormation about an API
• Idea: make tools like elm-http-fusion embeddable in the elm-pages dev server so you can interactively fix decoder errors, etc.
• Idea: elm-pages dev server code actions from the UI, like scaffolding new routes
• elm-codegen
• Idea: use elm-codegen for elm-pages scaffolding for user-customizable templates
• Official Elm blog post The Syntax Cliff
• Idea: show ANSI color code error messages embedded in blog posts
• Talk about the Hedy language: What every programmer should know about cognition by Felienne Hermans
• Elm Guide translated into French
• Idea: translatable error messages and language keywords for Elm
• Idea: elm-css tool to make inline styles into static CSS files and replace the styles with a reference to the generated class. Goal: reduce bundle size and performance overhead
• Idea: codemod tool to post-process Elm code using elm-review fixes in a hidden temp directory
• Idea: Elm step debugger
• Idea: elm/parser debugger to see the state machine of what has been consumed
• Idea: Elm debugger improvements like filtering Msg types, customizable inspecting for certain types
• Idea: inspectable Cmds in the debugger, or similar idea for debugging elm-pages DataSources to see why a failure happened and what the breadcrumbs are
• Idea: React ink, but for Elm
• awesome-elm-sponsorship repo

• Jeroen's tweet on the root cause of false positives
• Epistemology
• Isabelle and TLA+ (proof systems)
• Precautionary principle
• array-callback-return ESLint rule
• elm-review's ModuleNameLookupTable
• Jeroen's Safe unsafe operations in Elm blog post
• Jeroen's Lambda Days 2022 talk (video not yet published)

• Martin Janiczek (github) (twitter) (youtube)
• elm-test episode
• Fuzzing is also known as Property-Based Testing
• Parameterized tests
• Martin's pure Elm text editor includes some fuzz tests
• Martin's pull request for the elm-test v2 changes
• Integrated shrinking vs the value-based (AKA type-based) approach
• Fuzz.andThen and Fuzz.filter (existed in 0.18 but were removed because they didn't shrink well)
• elm-test v2 upgrade guide and change notes
• Passing in random generators in elm-test v2 doesn't do shrinking so best to avoid that escape hatch and instead implement an equivalent fuzzer
• Scott Wlaschin's post Choosing properties for property-based testing
• Discourse post on call for testing help and how to install the beta release
• Martin's video series on designing the new fuzz testing API
• #testing channel on the Elm Slack
• Hypothesis library
• Hypothesis project's blog
• A paper about the Hypothesis reduction approach: Test-Case Reduction via Test-Case Generation: Insights From the Hypothesis Reducer

• Parse, Don't Validate
• etaque/elm-form
• Codecs episode
• Some similarities in the design for how you build up Custom Type codecs with elm-codec

• Error messages should give three pieces of info
  • The problem
  • Why it's a problem
  • How to go forward
• Needing to do magic incantations to get things into a good state adds cognitive load and makes debugging harder
• Make tools more predictable
  • Clear mental model (avoid inconsistencies and leaky abstractions)
  • Doing an operation through different means should consistently arrive at the same result
  • Give context
  • Avoid caveats
• Tweet about layering platforms properly
• Extensible web manifesto
• Avoid boy who cried wolf (becoming blind to noise from errors or warnings or other feedback)
• Halo Effect

• Primitive Obsession episode
• Parse, Don't Validate episode
• Dillon's Entry Gatekeepers and Exit Gatekeepers blog posts
• Dillon's talk on semantic types

• Martin Janiczek (github) (twitter) (youtube)
• Martin's Store Pattern talk
• Store Pattern example GitHub repo
• Gizra fetch pattern blog post elm-fetch, and Easier HTTP Requests to Reason with
• Gizra elm-fetch package
• RemoteData package
• RemoteData blog post How Elm Slays a UI Antipattern
• elm-program-test is useful for integration testing data loading
• elm-suspense proof-of-concept repo
• Okay to use Store pattern for mutations, just kick them off outside of dataRequests
• Defunctionalization
• Wrap early, unwrap late
• Derive from source of truth instead of storing derived data

• Martin Stewart (github)
• State of Elm 2022 GitHub Repo
• Brian Hicks' State of Elm talk from Elm Europe
• Brian's State of Elm 2018 blog post
• GitHub issues for state of Elm repo
• elm-pages showcase page
• Martin's GOTO conference talk - Hobby Scale: Making Web Apps with Minimal Fuss
• Evan's talk What is Success
• What's Working for Elm episode
• Martin's Elm Online talk (including a preview of lamdera-test framework)

• Georges Boris (twitter) (github)
• elm-book
• Elixir's Hex docs
• Leaf lang docs site (built with elm-book)
• elm-verify-examples
• elm-book in elm-book guide
• elm-visualization examples site
• elm-charts site
• elm-widgets (alpha package docs)
• elm-admin (alpha package docs)
• elm-ui-explorer (alternative Elm storybook style framework - comes with knobs)
• dmy's Elm package repo site
• dmy's github
• elm-graphql selection set docs page (reads like a tutorial top to bottom)
• uncover.co

• Alex Russell's post Platform Adjacency Theory
• VoiceOver rotor utility
• Use semantic HTML to improve screen reader experiences
• Forms - use onsubmit with a form to get nice keyboard handling and screen reader accessibility
• datetime-local <input> tags
• MDN docs for sending form data
• HTMHell (examples of non-standard HTML from the wild and why it matters)
• Dillon's Use the Platform blog post

• Incremental Steps episode

• Built-in quality (from Lean principles)

• Tiny commits

• Kent Beck's book TDD by example

• Dead Code episode

• Close open loops

• Getting Things Done (GTD) methodology

• Capturing

• Processing

• Pomodoro Method

• rainymood.com

• Centered App

• Trunk-based development

• elm-review template flag (preview folder)

• sparksp/elm-review-no-forbidden-words

• Self-documenting code

• Self-documenting code tweet and blog post

• elm-verify-examples

• API Design Lessons episode

• Hammock-Driven Development

• Releasing vs. shipping

• Continuous Delivery

• Naming as a Process article by Arlo Belshee

• Oxbow code (code that was once used but is no longer in use)
• Jeroen's elm-review-unused elm-review rule
• Jeroen's blog post Safe dead code removal in a pure functional language blog post
• elm-review-simplify
• Getting Things Done (GTD) methodology
• Inbox Zero
• Jeroen's no-extraneous-dependencies rule
• Try out elm-review-unused with elm-review --template jfmengels/elm-review-unused/example
• Jeroen's You thought you had no dead code post

• Joël Quenneville (Twitter)
• Elm's Universal Pattern episode
• List.concatMap is the same pattern as andThen under a different name
• andThen identity can be used to flatten something
• Dillon's Combinators article
• Martin Janiczek's elm-list-cartesian package gives two valid map2 implementions for List
• Monoid - need a way of having something empty, and way to combine two things - for example addition for numbers starting with 0
• Jeroen's elm-review-simplify package

More of Joël's distillation of category theory ideas:

• Running out of maps (applicatives)
• The Mechanics of Maybe (taking maybe apart and putting it back together)
• Two ways of looking at map functions (functors)
• Elm's universal pattern (applicatives)
• Inverting a binary tree (folding, catamorphisms)
• Joël's directory of blog posts on the ThoughtBot blog

• Solving the Boolean Identity Crisis (Elm Conf talk by Jeremy Fairbank)
• If It Compiles, It Works episode
• Opaque Types episode
• Life of a File talk by Evan Czaplicki
• Roc language
• ianmackenzie/elm-units package
• Parse, Don't Validate episode
• Using Semantic Types to Squash Bugs - Dillon's talk where he walks through the mechnical steps to safely introduce a wrapper type
• Dillon's Entry Gatekeepers blog post

• Ju Liu (twitter) (github)
• Elm at NoRedInk
• Ju's blog
• noredink-ui is NoRedInk's internal UI kit (live demo page)
• avh4/elm-program-test
• elm-sortable-table API
• Implementing Elm Podcast season 1
• cultureamp/react-elm-components (React library for embedding Elm as a Web Component)
• elm-community/js-integration-examples
• NoRedInk is hiring Elm and Haskell devs
• Ju Liu's blog

• Robin Hansen (twitter) (github)
• elm-optimize-level-2
• Html.Lazy API
• Outperforming Imperative with Pure Functional Languages - talk about Roc by Richard Feldman
• Tail call optimization
• Successes, and failures, in optimizing Elm’s runtime performance - Robin's blog post series on his elm-optimize-level-2 optimizations
• WASM
• Maybe you don't need Rust and WASM to speed up your JS
• Brian Carroll's blog posts on an Elm WASM prototype
• Robin's Stabel language - a stack oriented language that compiles to WASM
• What's Working for Elm Elm Radio episode
• Process.elm comment about the potential for parallelizing work

• Dillon's blog posts If It Compiles It Works and When It Compiles But Doesn't Work
• Wiring
• Refactoring
• Running code paths to check it works vs checking assumptions at the gate
• Dillon's talk Types Without Borders
• Shotgun surgery - Parse, Don't Validate episode
• Order independent
• You can trust your tests
• Keeping what you depend on to a minimum helps make things trustworthy
• Semantics can make it harder to predict (like parser)
• Json.Decode.maybe is almost never what you intend
• Scaling Elm Apps talk by Richard Feldman
• Gary Bernhardt's Wat video
• Elm Radio Opaque types episode

• Woody Zuill on Turn Up the Good
• Mob Programming

Where Could We Turn Up the Good?

Pure FP

• Elm 0.19 removing side effects
• Purity is what makes elm-review interesting
• Jeroen's post Safe dead code removal in a pure functional language
• No runtime exceptions

Useful Error Messages

Useful error messages

• Evan's 2017 Deconstructconf talk Evan Czaplicki On Storytelling
• Evan's talk What is Success?

Having a single language flavor

• Isomorphic code
• Meta frameworks (elm-pages, Lamdera, elm-spa)

Decoupled tools

• The community can iterate quickly and experiment with new changes
• elm-optimize-level-2 and elm-format are great examples
• elm-optimize-level-2 can make their way upstream and don't break Elm's guarantees or assumptions
• Robin Hansen's blog post series Successes, and failures, in optimizing Elm’s runtime performance
• Extensible Web Manifesto
• Platform should provide building blocks, not solve every specific use case

Stable Core

• Stable data layer, architecture allows ecosystem to evolve around it with less churn

Community Members Working on What They're Passionate About

• People passionate about a problem working on it in the ecosystem

Performance

• Leveraging Elm's unique characteristics for performance (immutability, static language, known types, etc.)
• Elm compiler performance - compiler speed matters

Content and Conferences

• Elm community content and conferences
• Elm Online meetdown

The Elm Philosophy

• Evan's Elm philosophy tweet
• Philosophy has influenced package design in the ecosystem
• Elm Slack #api-design channel

Our special guests

• Ryan Haskell-Glatz (twitter) (github)
• Brian Hicks (twitter) (github)
• Robin Heggelund Hansen (twitter) (github)

• Make impossible states impossible
• Teaching elm episode
• Dillon's first Elm project, Mobster pair/mob programming timer

Ideas for Effective Learning

• Have a playground to try out ideas
• Try a new tool or technique with a familiar problem or exercise
• Small scale exercises and real world projects
• Small scale exercises are helpful for quickly developing a skill
• Feedback loops
• Tiny steps shorten the feedback loop
• Use code katas like bowling, tennis, roman numeral katas
• Analogous to empirical scientific method (hypothesis, test, analyze)
• Call your shot
• Don't forget to analyze test results after
• Listen to smart people, but come to your own conclusions
• Try two alternate ways of doing something out for yourself
• Failure is part of learning
• Follow your curiosity
• Look at the source for projects you depend on or come across
• Growth Mindset vs. Fixed Mindset
• You have to make knowledge your own (synthesis) - connect it to what you know
• Just in time vs. just in case learning - focus on what you need or seems important now
• Flexbox Froggy game
• Demystify things (for example custom type constructors vs type alias constructors)
• Mind mapping
• Elm Radio Opaque Types episode
• Zettlekasten second brain
• How to Take Smart Notes book
• Make declarative statements in second brain system
• Dillon's use the platform note from his digital garden
• Digital gardening
• Learn in public movement
• Richard Feldman's talk Scaling Elm Apps
• Richard experimenting with dream writer in a component architect
• Make It Stick book (and some notes summarizing key ideas)
• Elm Radio API Design Lessons episode
• Let your background processing do some work for you
• Dan Pink's book When
• Early bird vs night owl thinking
• Jeroen's blog

Guest: Andrey Kuzmin (github) (twitter)

• elm-explorations/webgl
• GLSL syntax
• Two shaders: vertex shader and fragment shader
• Uniforms are declarative bindings to Elm values. Type safe mapping
• Simple cube example
• elm-explorations/linear-algebra/latest
• Projection matrices
• elm-webgl-lessons
• ianmackenzie/elm-3d-scene/latest/
• Luca's listing of 3d Elm examples and resources
• elm-3d-scene examples
• elm-csg (Constructive solid geometry)
• Elm Japan 3d SVG art
• #gamedev and #webgl channels in Elm Slack
• James Carlson's talk about communicating with the GPU from Elm using Futhark: Making Elm Talk to Your Personal Supercomputer
• Andrey's elm-webgl-playground examples

• Richard Feldman (Twitter) (GitHub)
• Richard's Elm book Elm in Action
• Richard's Frontend Masters courses
• Richard's talk Teaching Elm to Beginners
• Find motivation
• Mloc.js conference (by Prezi)
• Pairing as a way to teach Elm
• Intro to Elm Frontend Masters workshop exercises are open source
• South Park therefore/but storytelling technique
• "I like teaching things the wrong way and then showing what's wrong with it."
• The importance of finding good examples
• Training From the Back of the Room
• Dillon's Elm JSON Decoder koans repo
• Gradual release of responsibility technique
• Brian's JSON Survival Kit book
• NoRedInk jobs (looking for Elm and Haskell engineers)
• Richard's Frontend Masters advanced Elm course and Elm intro course

• TypeScript and Elm have different goals
• Soundness is not a goal of the TypeScript type system
• TypeScript Design Goals (and non-goals)
• TypeScript's any type
• Nominal vs structural typing

TypeScript's any vs. Elm's Debug.todo

TypeScript's any essentially "turns off" type checking in areas that any passes through.

In Elm:

• You can get a type that could be anything with Debug.todo, but you can't build your app with --optimize if it has Debug.todo's in it
• You will still get contradictions between inconsistent uses of a type that could be anything (see this Ellie example)

This Ellie example (with compiler error as expected) and this TypeScript playground example (with no error) show the difference.

• any can not be used in places that take never
• any vs unknown
• JSON.parse returns any, as do many core and published typings
• io-ts lets you validate JSON similar to JSON decoders in Elm
• Definitely Typed (published type definitions for NPM packages)
• Definitely Typed search
• noImplicitAny
• TypeScript `strict mode in tsconfig
• Dillon's post TypeScript's Blind Spots
• JS semantics allow types that may not be intended (like adding a string + object, '' + {} === '[object Object]')
• Function parameters are inferred to be any regardless of implementation if they aren't given an explicit type
• Type narrowing
• TypeScript has untagged unions (just called Unions) - in Elm, there are only tagged unions (called Custom Types)
• Undefined vs null
• TypeScript's Void type
• TypeScript doesn't have checked exceptions like Java (there is a discussion about this on GitHub) - Elm only has explicit errors as data that must be handled exhaustively like other data types
• Discriminated unions vs Elm custom types
• Literal types
• TypeScript allows number literal values, but arithemtic expressions return generic number values instead of literal types
• Enums
• Branded types in TypeScript vs opaque types
• Elm Radio Opaque Types episode
• Switch statements are not exhaustive - you can add an eslint rule to check that (or the never trick, assert unreachable)
• Key of operator in TypeScript
• TypeScript's type system can do some cool things that Elm can't (for better and for worse)
• Prisma
• Prisma advanced TS meetup talks
• Tuples in TypeScript are just arrays and use narrowing - Tuple in Elm is a specific type
• elm-ts-interop
• TypeScript handbook on official site

• dillonkearns/elm-markdown
• Markdown was built to be friendly to humans more than parsers. Example of a markdown quirk for human-friendliness: numbered lists starting with 1 interrupt paragrpahs, starting with other numbers don't
• Babelmark helps compare output of different markdown implementations
• Some parts of the markdown spec are ambiguous
• John Gruber created markdown (Daring Fireball)
• Jeff Atwood pushed for CommonMark spec
• CommonMark
• GitHub-Flavored Markdown (gfm) is a superset of CommonMark (Auto-links, Todo syntax, tables, etc.)
• Bear notes app (Mac only)

dillonkearns/elm-markdown's Core Tools for Extensibility

• Custom Renderers

• Html handlers (example)

• Transforming parsed Markdown Blocks (AST)

• incrementalelm.com code for getting back references from parsed markdown

• Jeroen's Hierarchy of Constraints note

• Helpers for folding over Blocks and Inlines

• Extracting table of contents example

• Discussion to formalize HTML parsing and error handling spec in dillonkearns/elm-markdown

• Example of unintuitive raw HTML tag handling in markdown: <span> closed by whitespace (ignores closing tag)

• Zettlekasten

• Wikilinks

• Foam Research

• GFM Autolinks extension

• elm-explorations/markdown

• Matthew Griffith's elm-markup package

• Matt's Oslo talk on fault tolerant parsing A Markup for the Statically Typed

• elm-optimize-level-2

• Shiki

• Deckset

• UnifiedJS markdown transformation ecosystem

• elm-markdown-transforms

• Render to a function (example)

• Scheme evaluator example (demo) (code)

• elm-pages 2.0 episode

• Markdown announcement blog post Extensible Markdown Parsing in Pure Elm

• #markdown channel in The Elm Slack

• Example of extracting title and description from parsed markdown

• Elm Online Meetdown

• Submit a talk proposal to the Elm Online Call for Speakers form

• Phantom types (happens at compile time, not runtime)

• Helps avoid things like adding centimeters and inches

• ianmackenzie/elm-units

• Joël Quenneville's phantom types talk from Elm in the Spring A Number by Any Other Name

• Extensible records

• Builder pattern

• Jeroen's Hierarchy of Constraints

• elm-graphql SelectionSet scope type variable

• Builder Pattern episode

• Brian Hicks' builder pattern talk Robot Buttons from Mars

• with functions

• Phantom builder is a state machine for your types

• elm-review Rule API uses phantom builder

• Phantom types discourse post on time package Simon Herteby

• Snapshot test in Elm review for expected error messages

• Phantom Builder live stream episode

Possible operations with phantom extensible builders

• Add a new field
• Remove a field
• Change the type of a field
• Remove the previously existing phantom type and change it to an empty record (not extensible, just a hardcoded return type) i.e. Replace

What you can do with phantom builder

• Require something to be always called
• Forbid something being called more than once
• Cause other constraints dynamically after calling something
• Make function calls mutually exclusive
• Enable a function only if another one has been called

• Tereza Sokol (GitHub) (Twitter)
• terezka/elm-charts
• elm-charts.org
• Original APIs: line-charts and elm-plot
• Tereza's Elm Europe talk elm-plot: the big picture
• Tereza's talk If Coco Chanel Reviewed Elm
• Edward Tufte
• New version tries to be less prescriptive
• Extensible Web Manifesto
• gampleman/elm-visualization
• elm-vega
• GHCJS (mentioned in Elm Town episode 6)

• Mario Rogic (GitHub) (Twitter)

• Lamdera

• Lamdera 1.0 release

• Elm Europe conference talk introducing Lamdera

• Elm Europe conference talk about Lamdera's Evergreen

Lamdera is about removing non-essential complexity - 6 concepts

1. Stuff that happens for the client (in the browser)
2. Stuff that happens in the server (like scheduled job)
3. Data from client to backend
4. Data from backend to client
5. Frontend knows what it knows
6. Backend knows what it knows

• Lamdera docs
• Semantic boundaries (remove glue code)
• Real-time chat example app and other Lamdera example apps
• Lamdera "Anti-Marketing" page
• Lamdera Discord
• elm-pkg-js spec
• Elm Online meetdown group
• Calls email sending service through HTTP
• Martin Fowler's "Memory Image" idea
• Event Sourcing
• Martin Stewart talk introducing a Lamdera end-to-end testing tool
• Wire size improvement in Lamdera alpha12 release notes
• elm-webapp
• Lamdera real world repo (PR 1) (PR 2)

• elm-review-performance
• Tail call optimizations
• Jeroen's blog post on Tail-call optimization in Elm
• Evan Czaplicki's chapter on Tail-Call Optimization and how to write optimized code
• Lighthouse Elm Radio episode
• Ju Liu's Performant Elm blog post series
• Avoid memoized state when possible to avoid stale data
• Html.Lazy
• Elm's html lazy only works when the function and args have the same reference as before. List.map will return a list with a new reference, for example.
• Elm has function-level dead code elimination
• Referencing a record pulls the whole record in no matter how many fields are used directly
• bcp-47-language-tag package
• Elm list extra gets split by function, unlike lodash which needs to be split
• Elm Core Dict package has O(logn) complexity for operations like insert
• JavaScript Objects aren't optimized for removing/adding properties
• "What's Up With Monomorphism"
• elm-optimize-level-2
• elm-explorations/benchmark
• Jeroen's list-extra PRs (with reference to the benchmark for it) for functions gatherWith isInfixOf
• webpagetest.org (or web.dev performance testing)
• Netlify Lighthouse plugin
• RSLint - fast version of ESLint, but doesn't have custom rules
• Instructions to minify Elm code
• Jake and Surma talk about optimizing sites - Setting up a static render in 30 minutes
• Jake Archibald's talk explaining JavaScript's event loop and requestAnimationFrame - In The Loop

• Introducing elm-pages v2!
• Pre-rendered pages
• elm-pages has a build step
• Parse, Don't validate
• Frontmatter
• DataSource.File
• DataSource.fail
• DataSource.Glob
• Distill API DataSource.distillCodec
• elm-graphql DataSource example from incrementalelm.com
• The 2.0 docs are at elm-pages.com
• #elm-pages channel on the Elm Slack
• Incremental Elm source code
• Elm Radio site source code

• Ryan Haskell-Glatz (Twitter) (GitHub)
• elm-spa V5 Docs
• elm-spa v5 episode

Key new features in v6

Protected pages

• Provide/redirect protected custom type

• Eject workflow

• Vuepress

• elm-program-test docs site

• Can Eject not found page

• Eject workflow stops generating files when they're ejected

• File-based routing in elm-spa

• Inspired by Nuxt

• Page builder API (like browser sandbox)

• No more int or string in url

• elm-pages 2.0 routing and splat routes

• elm-spa add command

• elm-live

• Vite

• elm-spa View module

• UI namespace in elm-spa docs repo has a shared page helper function for building the shared header/footer

• Shared module

• elm-spa 6 has fewer ignored arguments compared to v5 - now wired through in page top level function and you can wire to update, init, etc.

• Effect pattern - elm-spa v6 has an ejectable Effect module

• elm-real-world SPA example (elm-spa-example using elm-spa framework)

• elm-spa.dev

• elm-program-test example folder

• Blissfully jobs

• #elm-spa-users channel on the Elm Slack

• Idiomatic Elm package guide
• dillonkearns/elm-package-starter

Lessons

1. Avoid unexpected or silent behavior
2. Give context/feedback when things go wrong so the user knows their change was registered, to enhance trust
3. Good errors aren't just for beginners - Curb Cut Effect
4. Sandi metz - code has a tendency to be duplicated - be a good role model - we're influenced by precedence
5. Matt Griffith - API design is holistic. It's a problem domain. Rethink from the ground up.
6. Learn from the domain and terms, but don't limit yourself to it when you can create better abstractions.
7. Linus Torvalds' definition of elegance/good taste - recognize two code paths as one. Reduce the number of concepts in your API when you can treat two things as one, then things compose more easily. How Elm Code Tends Towards Simplicity.
8. You don't need a direct mapping of your domain, but start with the spec and terms. Leverage existing concepts, and have an economy of concepts. Tereza's talk: elm-plot The Big Picture
9. API design is a tool to help you solve problems.
10. There's a qualitative difference when you wire up feedback before you up front.
11. Avoid toy examples, use meaningful use cases to direct your design.
12. Design for concrete use cases, and drive changes through feedback from concrete use cases. Legal standing. Better to do it right than to do it right now Evan's concept from the Elm philosophy. If you don't have a motivating use case, then wait. Extract APIs from real world code. It's okay for there to be duplication. Premature abstraction is the root of all evil. sSmplicity is the best thing you can do to anticipate future API design needs.
13. Come up with an API with the most benefits and the least pain points.
14. If there's something that you want to make really good, invest in giving it a good feedback mechanism.
15. Rich Hickey's talk Hammock Driven Development. We don't design APIs, our extremely creative subconscious designs APIs - let your conscious brain do the hard work to put all the information in front of your subconscious so it can do what it does best. elm-pages 2.0 screencast with Jeroen and Dillon.
16. Pay no attention to the man behind the curtain. Parse, Don't validate at the high level, but under the hood you may need a low level implementation.
17. Have a clear message/purpose - whether it's an API, or an internal module.
18. Take responsibility for user experiences.

• Tessa Kelly (GitHub) (Twitter)
• The 4 Principles of Accessibility
• prefers-reduced-motion media query
• Guide to using Mac's built-in VoiceOver screenreader
• Ace Accessibility tools
• Skip Links
• Navigating headings with a screenreader (see keyboard shortcuts for the VoiceOver rotor)
• WCAG checklists
• VPAT documents
• ARIA attributes
• The Accessibility Tree
• Google's explanation of The Accessibility Tree
• An API for the Accessibility Object Model is in draft form
• Avoid modals, instead try a different ux
• Accessible radio buttons
• Tessa's Accessible HTML package tesk9/accessible-html
• list-style-image in CSS
• Progressive enhancement
• Remix's approach to progressively enhancing forms
• Package for using Accessibile HTML with elm-css - tesk9/accessible-html-with-css
• Jeroen's hierarchy of static checks
• Chorded keyboard
• Emily Shea's talk Voice Driven Development: Who needs a keyboard anyway?
• WCAG accessibility guidelines
• webaim.org
• Angela Hooker's Juneteenth Conf talk Empowerment to the People! What You Need to Know about Black People, Disability, and Accessibility
• AxeCon talks
• Deque's education resources site - Deque University
• Axe Dev tools Chrome extension
• Tessa Kelly (GitHub) (Twitter)
• NoRedInk jobs

• Joël Quenneville (Twitter)
• Joël's blog post Elm's Universal Pattern
• map2
• Maybe.map2

Metaphors

Some common metaphors for Elm's Universal Pattern (Applicative Pattern).

• Mapping

• Combining

• Lifting

• Wrapping and unwrapping boxes

• Blog post on Two ways of looking at map functions

Examples

• Random generators
• Apply mapping functions to vanilla value functions to keep things clean

Tips

• Separate branching code from doing code (discussed in-depth in Joël's blog post Problem Solving with Maybe)

• Stay at one level of abstraction

• Json decoders as combining functions

• Scott Wlaschin Railway Oriented Programming

• Dillon's blog post Combinators - Inverting Top-Down Transforms

• The JSON structure and Elm type don't have to mirror each other - start with your ideal type and work backwards

• Applicative pattern

• Applicative needs 1) way to construct, 2) map2 or andMap

• Json.Decode.Pipeline.required function

Record constructors

• Practice writing it with an anonymous function to convince yourself it's equivalent
• Record constructors are just a plain old elm function
• map2 doesn't take a type, it takes a function -
• NoRedInk/elm-json-decode-pipeline is a useful reference for implementing this kind of api on your own
• Applicative Laws in Haskell
• Monomorphic vs polymorphic
• Parser Combinators
• elm/parser episode
• Joël's blog posts on the ThoughtBot blog
• Joël's Random generators talk
• Joël's Maybe talk

Some more blog posts by Joël that related to Elm's Universal Pattern:

• Running out of maps
• Pipeline Decoders in Elm

Joël's journey to building a parser combinator:

• Nested cases - https://ellie-app.com/b9nGmZVp9Vca1
• Extracted Result functions - https://ellie-app.com/b9qtqTf8zYda1
• Introducing a Parser alias and map2 - https://ellie-app.com/b9MwZ3y4t8ra1
• Re-implementing with elm/parser - https://ellie-app.com/b9NZhkTGdfya1
• Getting Unstuck with Elm JSON Decoders - because mapping is universal, you can solve equivalent problems with the same pattern (described in this post)

• What's the source of truth?

• Teach the Elm compiler about external things like schemas

• elm-graphql

• dillonkearns/elm-graphql

• Types Without Borders

• Macros in other languages

• C macros compared to Lisp macros

• ReScript ppx macros

• Vanilla code generation can be inspected and debugged like plain handwritten code

• Gitignore gen code so you know you didn't forget to generate it on the build server

Watchers for rerunning codegen

• Rerun code gen when the source of truth changes ideally

• Chokidar CLI

• The Design of Everyday Things by Donald Norman

• Affordances

• Mappings

• elm-tailwind-modules

• Chadtech/elm-vector

• the-sett/salix

• elm-ts-interop

Scaffolding

• elm-review init, new-rule, and new-package
• elm-spa new
• html-to-elm.com
• End to end testing your generated code
• Snapshot testing
• elm-graphql's snapshot testing script
• html-to-elm.com generated test suite
• elm-verify-examples

• Rubber ducking
• Lay out your assumptions explicitly
• Veritasium video The Most Common Cognitive Bias

Elm Debugging techniques

• Debug.todo
• Frame then fill in
• Annotation let bindings
• Using nonsense names as a step
• Elm review rule to check for nonsense name

Hardcoded values vs debug.todo

• Todos don't allow you to get feedback by running your code
• TDD
• Fake it till you make it
• Simplest thing that could possibly work
• Joël Quenneville's article Classical Reasoning and Debugging
• Debugging is like pruning a tree

Breaks

• Take a walk. Step away from the keyboard when you're grinding on a problem
• sscce.org (Short, Self Contained, Correct (Compilable), Example)
• Create a smaller reproduction of the problem
• Reduce the variables, you reduce the noise and get more useful feedback
• Reasoning by analogy from Joël's post
• Elm debug log browser extension
• node --inspect
• elm-test-rs

Debug.log in unit tests

• Test.only for running just one test or describe
• Put Debug.logs in each path of an if or case expression
• Use the browser elm debugger to inspect the model
• Scaling Elm Application episode
• Narrow down your search space with Elm types
• Parse, Don't Validate episode
• Tiny steps help you prune the tree
• Exploratory Testing
• Wrap early, unwrap late

• dillonkearns/elm-review-html-to-elm (elm-review version of html-to-elm.com)

• Rule naming guidelines docs

• Elm review cli new rule command

• stil4m/elm-syntax

• Elm.Syntax.Range

• elm-review ignoreErrorsForFiles

• Review context

• withFinalModuleEvaluation

• elm-review's context is like Model, elm-syntax Node is like a Msg, Review Errors are Cmds, visitors are like update

• elm-review's new configuration errors API

• Import aliases feature: ModuleNameLookupTable

• Parse, don't validate episode

• elm-review Fixes API

• Jeroen's Safe Unsafe Operations blog post

Getting started

Some repos to look at for inspiration

• github.com/jfmengels/elm-review-unused
• github.com/jfmengels/elm-review-common
• github.com/jfmengels/elm-review-debug
• github.com/jfmengels/elm-review-simplify

The elm-review package docs are very through and worth reading

• Continuous Integration (CI)
• CD (Continuous Delivery, Continuous Deployment)
• Mob programming
• elm-program-test episode
• Cypress testing framework
• GH actions on events (schedule, workflow_dispatch, pull_request, etc.)
• elm-review new-package
• npm-run-all
• Can run npm-run-all test:*, but don't know the order it will run in
• git hooks
• Dependabot
• Dillon's blog post about using dependabot for Elm dependencies
• Send a tweet with a GH action
• Dillon's GH profile (and the GH action workflow for it)
• GH Action to include blog posts in profile feed
• GitHub's Octokit API
• Core GitHub Actions JavaScript packages
• JavaScript GitHub Actions starter template
• Unix toolchain philosophy
• elm-tooling-action
• Simon Lydell's example GitHub Actions workflow
• GitHub Actions cache api
• Brian Douglas' dev.to blog post series
• Edward Thomson's GitHub Actions advent calendar

• Our guest: Philipp Krüger, aka matheus23 (github) (twitter)
• matheus23/elm-tailwind-modules
• elm-reduce (Philipp's Bachelor's thesis)
• TailwindCSS
• The Tailwind config file
• elm-ui
• Sass/Scss
• CSS inheritance
• Cohesion and coupling - don't separate things that need to be understood together
• monty5811/postcss-elm-tailwind paved the path for Philipp's library
• PurgeCSS
• Philipp's library is a fork of justinrassier/postcss-elm-css-tailwind
• rtfeldman/elm-css (it's a drop-in replacement for elm/html)
• CSS in JS
• miyamoen/elm-origami
• matheus23/elm-default-tailwind-modules is the best way to start (it's the generated elm-tailwind-modules code for the default TailwindCSS configuration)
• elm-tailwind-modules currently requires you to order your breakpoints from high to low (see docs)
• tesk9/accessible-html
• github.com/dillonkearns/elm-pages-starter
• elm-pages-tailwind-starter
• CSS grid
• Elm Radio elm-ui episode
• miniBill/elm-ui-with-context
• TailwindUI - a paid catalog of TailwindCSS templates and widgets/components
• elm-ts-interop landing page (built with elm-tailwind-modules)
• html-to-elm.com
• elm-review rule for html-to-elm.com, dillonkearns/elm-review-html-to-elm
• Refactoring UI book
• React presentational components vs ???
• This blog post talks about the View Objects pattern in Object-Oriented Programming
• Elm Radio Incremental Steps episode
• FullStack Radio podcast
• A FullStack episode about the TailwindCSS philosophy
• elm-css's fromUnstyled and toUnstyled are helpful for incremental adoption (start refactoring from the leaves)

• #PLTalk programming language panels
• #PLTalk panel discussion on funding
• Elm compiler roadmap document
• elm-language-server
• elm-format's abstract syntax tree output is in the brainstorming phase
• elm-typescript-interop (the old approach)
• elm-ts-interop Elm Radio episode

• elm-ts-interop
• Now-deprecated original library - elm-typescript-interop
• The Importance of Ports - Elm Conf talk by Murphy Randle
• Evan's Vision for Data Interchange document recommends against implicit serialization. The deprecated elm-typescript-interop relied on Elm's automatic JSON serialization flags/ports. elm-ts-interop passes Json.Decode.Value's which is what the guide recommends.
• Blog post about TypeScript's Blind Spots
• TypeScript discriminating unions are analagous to Elm custom types
• Types Without Borders Elm Conf talk
• elm-ts-json Elm pacakge
• Elm ts interop npm package

What's the source of truth?

• Nexus - code-first GraphQL server
• graphql-js - schema-first GraphQL
• Hasura and PostGraphile - Postgres schema is the source of truth
• Elm Codecs episode
• elm-ts-json Encode docs

Getting Started

• Get your discount code, and learn more about the Pro version, including the scaffolding tool and Pro CLI at elm-ts-interop.com.

Two articles about the redesign of elm-ts-interop (originally published in Bekk's Functional Christmas posts)

• Combinators - Inverting Top-Down Transforms
• Types Without Borders Isn't Enough

• Aaron VonderHaar (github) (twitter)
• elm-format episode
• elm-program-test
• elm-test
• elm-test episode
• BDD As It's Meant To Be Done video by Matt Wynne
• BDD (Behavior-Driven Development)
• Gherkin syntax
• Outside in vs. inside out testing
• ensure vs. expect functions
• The Effect Pattern
• Http simulation example from examples folder
• An elm-program-test example using a generalized Effect type
• elm-program-test GitHub issues for contributing
• The Official elm-program-test Guidebook
• The elm-test HTML querying API
• #testing channel in Elm Slack
• Writing Testable Elm keynote by Tessa Kelly

• elm-format
• prettier
• gofmt, the built-in Go formatting tool
• Some discussion of IntelliJ trailing whitespace issues
• elm-format editor integrations table
• elm-tooling
• elm-tooling Elm Radio episode
• Jeroen's elm-format tips tweet
• NoExposingEverything rule
• Discussion about single-line conditionals
• The original Elm style guide
• Join lines (J in vim, also available with intellij keybindings)

• Simon Lydell (twitter) (github)
• elm-tooling-cli
• elm-json
• Install elm-tooling into your npm dev dependencies
• npx
• elm-publish-action
• NPM's package.json scripts section
• NPM postinstall scripts
• Richard's recommendation to use npm config set ignore-scripts true, which can cause issues because it also skips the postinstall from your package.json
• elm-tooling-cli docs website

Elm tooling in ci

• GitHub Actions
• Simon's example GitHub Actions workflow with elm-tooling
• Separate steps for Elm tooling install and npm install to optimize caching
• npm run --silent (or -s) to reduce noise (more ways to do it in this StackOverflow answer)
• npm test and npm start to run start and test from your package.json scripts
• elm-tooling quick start page

• The npx command runs NPM binaries from your shell

Some tricks to easily try elm-review with no setup:

npx elm-review --template jfmengels/elm-review-unused/example

Init with a given template:

npx elm-review init --template jfmengels/elm-review-unused/example

Incremental adoption

• Don't enable lots with errors, better to have few with no errors
• Enable in CI
• ignoreErrorsForFiles
• ignoreErrorsForDirectories
• Try the --fix, --fix-all, and --watch flags (see how to run elm-review)

Useful packages and workflow

• Review rule for Documentation.ReadmeLinksPointToCurrentVersion

• elm-verify-examples

• Safe unsafe operations in Elm blog post

• elm-spa Elm Radio episode

• jfmengels/elm-review-debug

• jfmengels/elm-review-common

• sparksp/elm-review-ports

• sparksp/elm-review-imports

• Getting started with elm-review episode

• Incremental Steps episode

Our special guests

• Tessa Kelly (twitter) (github)
• Mario Rogic (twitter) (github)
• Matthew Griffith (twitter) (github)

Links

• Lamdera

• Richard Feldman's talk Scaling Elm Apps

• Life of a File Elm Radio episode

• Richard Feldman's talk Scaling Elm Apps
• Life of a File Elm Radio episode
• Web Components (can be used to encapsulate state heavy view components)
• How Elm Code Tends Towards Simplicity
• GOOS book
• elm-spa framework

Performance metrics

• First Contentful Paint
• Time to Interactive
• Cumulative Layout Shift

Best practices

• Lighthouse SEO Audits
• Lighthouse Best Practices Audits

Performance best practices

• CDN
• Netlify

Image Optimization

• Cloudinary
• loading=lazy
• SVG

Icons

• Apple touch and other icons to add to <head>
• Some resources on icons
• What the apple touch icons mean
• Google web.dev resource on apple touch icons
• manifest.json

PWAs

• Progressive Web Apps
• Must be HTTPS
• About service workers
• Stale while revalidate service worker cache policy
• Workbox
• elm-starter

Performance

• Elm optimization instructions for using Terser, the --opimize flag, and elm-optimize-level-2

• Dev tools performance tab

• Ju Liu's article, Performant Elm, on analyze Elm performance using Chrome Dev Tools

• HTTP2 Push is dead

• Using preload tags

• Here's an in-depth conference talk on different script tag techniques. Ishows the differences between different ways to load script tags, including using async, defer, and in HTML <head> vs. <body>

SEO

• meta viewport tag
• Axe accessibility tools
• Canonical URLs
• OpenGraph tags
• Lighthouse accessibility audits

Resources

• Lighthouse netlify plugin
• web.dev learn section

• miniBill/elm-codec - JSON codec library
• MartinSStewart/elm-codec-bytes

Backwards compatibility

• elm-codec's FAQ section on backwards compatability

• Mario Rogic's talk on Elm Evergreen

• Mario Rogic's talk on Lamdera

Keeping data in sync

• Elm Radio episode on elm-graphql
• Two Generals Problem

Elm codec API - string, Bool, object

• MartinSStewart/elm-serialize/latest/, encodes in a format that is optimized for compactness

• dillonkearns/elm-graphql
• Elm Radio episode 4 - JSON decoders
• Dillon's Elm Conf talk about the principles behind elm-graphql: Types Without Borders
• Phantom Types
• elm-graphql's FAQ document Article about simple design in Elm
• elm-graphql Scalar Codecs tutorial

How can elm graphql decoding fail?

• SelectionSet.nonNullOrFail
• SelectionSet.mapOrFail
• Custom Scalars don't include type information, though there are some proposals for supporting optional type information

Backend Frameworks for Full-Stack GraphQL Type Safety

• Juniper for Rust

• Hasura (database-schema based API)

• Postgraphile (database-schema based API)

• Discourse thread on differences between all the Elm graphql libraries

• harmboschloo/graphql-to-elm - library for generating Elm functions to make queries from GraphQL strings

• Dillon's Elm Europe talk Incremental Type Driven Development
• Test driven development
• Fake it till you make it
• elm-markdown GitHub-Flavored Markdown table live stream
• Succeed is the key to success
• Practical refactoring with Llewllyn Falco and Woody Zuill
• Llewllyn Falco doing Gilded Rose kata with TCR and snapshot testing
• Dillon's article on Relentless, Tiny Habits

• Evan Czaplicki's talk The Life of a File.

• Richard Feldman's Frontend Masters Elm courses

• Explore many different data modeling options

• Make Impossible States Impossible Elm Radio episode

• Wait until you feel the pain vs create abstractions before you need them

• Does the code quality metric of line count apply in Elm since there's no spooky action at a distance

• Aim for loose coupling, high cohesion

• Localized reasoning

Core mechanics of Elm modules

1. (Organize) Grouping functions values types
2. (Hide) You can hide some of those things. Allows encapsulation, shielding from breaking changes, avoiding coupling.

• Create modules around domain concepts
• Use ubiquitous language

Giant update functions

• You can think of the update function as a delegator - get things to the right place rather than doing the work itself

• elm-review

• TCC (test && commit || revert)

What are you gaining from extracting a module?

• Protecting invariants

• Hiding internals

• Decoupling

• TDD helps drive module design.

• Experiment, but review your experiments before they become deeply ingrained.

• Pain in code is for sending a message.

• Technical debt isn't about "clean code". It's abstractions that serve what the code is doing. Abstractions are inherently expensive and a type of tech debt if they don't serve a purpose for your specific needs.

• Be proactive - immediately as soon as there is a clear way to make code better (not perfect, small improvement) - do it

• Relentless, Tiny Habits

• elm-test Elm Radio episode

• Testing is helpful for identifying modules - see keystone testing habit blog post

• Property based testing is a sign that something is a module - it has a clear property, which means you want to protect the internals

• It's okay to get it wrong, just don't get it all wrong up front with premature abstractions.

The talks

• Make Impossible States Impossible from Elm Conf 2016
• Make Data Structures from Elm Europe 2018
• Elm Radio Episode 2: Intro to Opaque Types

Dealing with Impossible States

• Building up a "truth table" of possible states (see Evan's guide Types as Sets)
• Which rows are invalid?
• Create a new type with only the valid ones possible

More references

• elm-css

• Tereza's line-charts package

• Tereza's elm Europe talk

• elm-graphql

• Gilded rose live stream

• Snapshot testing (also called Approval Tests)

• Jeremy Fairbank's Boolean Blindness talk

• elm-spa
• Richard Feldman's elm-spa-example GitHub repo
• Elm's Browser.application
• Url.Parser - URL parsing in Elm for routing single-page apps
• elm-shared-state pattern (formerly called elm-taco)
• Next.js and NuxtJS
• Routing and dynamic routing in elm-spa
• Scaling Elm Apps talk - Elm Europe keynote by Richard Feldman

Getting Started Resources

• Offical elm-spa Guide

• #elm-spa-users channel on the official Elm slack

• elm-spa-realworld (Ryan's version of elm-spa-example using his elm-spa framework)

• Exploring elm-spa example - Richard's conference talk walking through codebase

• Richard's Frontend Masters courses focus heavily on his elm-spa-example repo

• Elm Radio Episode 7: Extending Elm

• Alexis King's article Parse, Don't Validate

the difference between validation and parsing lies almost entirely in how information is preserved

• Shotgun parsing (original academic paper)
• Mixing processing and validating data

Shotgun parsing is a programming antipattern whereby parsing and input-validating code is mixed with and spread across processing code—throwing a cloud of checks at the input, and hoping, without any systematic justification, that one or another would catch all the “bad” cases.

Why the term "parse"?

a parser is just a function that consumes less-structured input and produces more-structured output [...] some values in the domain do not correspond to any value in the range—so all parsers must have some notion of failure

• Conditionally return types
• Don't have to repeatedly check condition
• Look out for "lowest common denominator" built-in values being passed around (like empty String)
• Maybe.withDefault might indicate an opportunity to parse

Two ways to use this technique:

• Weaken return type

• Strengthen input type

• Design by contract

• Elm Radio JSON decoders episode

elm-test Basics

• elm-test NPM package
• elm-explorations/test Elm package
• elm-test init command
• Running elm-test finds exposed values of type Test

TDD Principles

• Testing in Elm is easier because it's just expectations of input to output (deterministic)
• TDD is a design practice too
• Programming by Intention
• Writing test first makes code testable & decoupled
• Red, green, refactor
• YAGNI
• "Make the change easy, then make the easy change"
• Kent Beck's TDD by Example
• Here's a staring template of a code kata in Elm that you can use to practice
• Emily Bache has many more code katas you can practice on her GitHub

Fuzz Testing

• Also known as Property-Based Testing

• Martin Janiczek's elm-minithesis project

• elm-test's view testing API includes Test.Html.Query, Test.Html.Selector, and Test.Html.Event View objects

• Testing pyramid

• Mocking and stubbing are not needed or possible in Elm

• Order dependent test helper in Ruby: i_suck_and_my_tests_are_order_dependent

When to Use Types or Tests

• Jeroen's Safe Unsafe Operations blog post
• Richard Feldman's talk on Types and Tests
• Make Impossible States

Should you test implementation details?

• Discourse thread discussing testing internals
• Think in terms of a modules responsibility

Higher-Level Testing in Elm

elm-program-test Martin Janiczek's elm Europe talk on testing Msg's with ArchitectureTest

• Richard test-update package

• elm-ui package
• Fewer overlapping ways to express views
• Element.padding (no concept of margin)

Previously called style-elements

• There used to be a notion of a single type defining all possible styles

• Latest elm-ui simplifies that by using only inline styles. You build your own abstractions with vanilla Elm functions/modules etc.

• Element type is the equivalent of the Html type from elm/html

• elm-css package

• Mobster app

Escape hatches

• Element.html works at leaf nodes, but elm-ui in general doesn’t mix with plain html

• Element.htmlAttribute

• Refactoring is a huge asset for a team, so much easier than css refactoring

• Doesn’t expose all the css tricks directly, sometimes you need escape hatches to access those

Responsiveness

• Pass in window size from your Elm model
• Doesn’t use media queries, so that approach doesn't play well with with pre-rendered html like in elm-pages
• classifyDevice is an optional helper for responsiveness

Semantic html

• Express layout with Element.row, column, el
• Semantic HTML is independent from layout. Set with attributes using the Element.Region module.

Wrapping

• Element.paragraph uses text wrapping

em/rem

• elm-ui doesn't expose access to rem and em units to simplify the mental model and reduce overlapping ways to express something

Cookbooks/examples

Lucas Payr's elm-ui-widgets Alex Korban's elm-ui patterns )

Debugging elm-ui views

• Element.explain gives you highlights around nested elements
• Inspecting developer tools doesn't help much with elm-ui, but elm-ui is much more traceable because it doesn't have layout cascading like CSS

Resources

• Matt's elm-ui announcement talk at Elm Europe (was about elm-style-elements, but still worth a watch)
• Matt's more recent elm-ui conference talk
• Richard Feldman's talk CSS as Bytecode (uses style-elements, but it's a great intro tutorial on elm-ui concepts)
• #elm-ui channel in the Elm slack

What is a Builder?

• Init a builder data structure with a set of reasonable defaults
• Customize those defaults through a series of chained function calls
• Builders have the same type for the return type and final argument, so that they work nicely in a pipeline

Resources and Examples

• Luke Westby's http-builder package
• Brian Hicks' Robot Buttons from Mars talk
• elm-review package docs
• elm-pages/phantom builder live coding
• Richard Feldman's Oslo Elm Days keynote

• Platform.worker

What can you do with Elm?

• Html
• Http
• Ports
• Web Components

Different techniques for extending elm

• elm-pages StaticHttp API

• Elm radio episode 1 on elm pages

• elm-graphql

• Codegen

• Macros

• Elixir exunit

• Wrapper elm apps

• Can emulate effect managers

• Platform.worker

• Introspection

• elm-typescript-interop

• Ports and flags

• Web Components

• Code transformation

• Elm asset loader webpack

• Hacking JS to get FFI

• Depending on internal details could end up with broken code

elm-hot and elm-hot-webpack-loader

Pitfalls and considerations

Codegen

• Have a single clear source of truth for codegen
• Prevent bad states with airtight abstractions, rather than having lots of caveats
• Make sure public APIs for generated code look nice
• Use doc comments

Macros

• Elm code that doesn’t look like elm code
• Tooling doesn’t work then - see Babel ecosystem
• Violates Open close principle - you’re modifying the language, not extending it

Provide a platform with extensions in mind when you build tools so you don’t require users to hack

When you build a tool, think about the mental model for uses, let that guide you. Avoid leaky abstractions

Be opinionated about the core things, and unopionated about what’s not essential to the tool

• [elm-spa](https://github.com/ryannhg/elm-spa)

What is a parser?

• yacc/lex
• AST (Abstract Syntax Tree) vs. CST (Concrete Syntax Tree)
• JSON decoding vs. parsing
• JSON decoding is validating a data structure that has already been parsed. Assumes a valid structure.
• elm/parser
• Haskell parsec library - initially used for the Elm compiler, now uses custom parser

What is a parser?

• One character at a time
• Takes input string, turns it into structued data (or error)

Comitting

• Backtrackable parsers
• chompIf and chompWhile
• Parser.oneOf

Benchmarking

• elm-explorations/benchmark
• Benchmark before making assumptions about where performance bottlenecks are
• Write unit tests for your parser
• GFM table parsing live stream
• Parser.succeed

Elm regex vs elm parser

Indications that you might be better off with parser

• Lots of regex capture groups
• Want very precise error messages

Getting source code locations

• Parser.getRow and getCol
• Parser.getSource

Parser.loop

• Loop docs in elm/parser
• Looping allows you to track state and parse groups of expressions
• Loop over repeated expression type, tell it termination condition with Step type (Loop and Done)

Error Messages

• You can fail with Parser.problem
• Parser.Advanced module is designed to give you more precise context and error messages on failure
• Parser.Advanced.inContext

Getting Started with a Parser Project

• Write lots of unit tests with elm-test!

There's likely a specification doc if you're parsing a language or formal syntax

• CommonMark Spec
• GitHub-Flavored Markdown Spec
• dillonkearns/elm-markdown test results directory from executing spec examples

Look at examples of parser projects

• dillonkearns/elm-markdown
• elm-in-elm parser
• elm-in-elm conference talk
• mdgriffith/elm-markup - good reference for parsing, fault-tolerant parsing, and giving nice error messages
• Tereza's YAML parser
• Tereza's elm conf talk "Demystifying Parsers"
• Jeroen's elm/parser Ellie
• "It's not hacking if you have tests."

Look at elm/parser docs and resources

• elm/parser project's semantics document describes backtrackable behavior in detail

What is an Elm Package?

• Elm package repository
• Elm packages enforce SemVer for the public package API
• The SemVer (Semantic Versioning) Spec
• Interesting note: the SemVer spec says breaking changes only refers to the public API. But a core contributor clarifies that breaking changes can come from changes to the public contract that you intend users to depend on. See this GitHub thread.
• list-extra package
• dict-extra package
• Minimize dependencies in your package to make it easier for users to manage their dependencies
• "Vendoring" elm packages (using a local copy instead of doing elm install author/package-name) can be useful in some cases to remove a dependency from your package

Should you publish a package?

• The Elm package ecosystem has a high signal to noise ratio
• Elm packages always start at version 1.0.0
• SemVer has different semantics before 1.0.0 (patch releases can be breaking before 1) - see SemVer spec item 4

Major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable.

• Elm package philosophy is to do an alpha phase before publishing package

Keep yourself honest about solving meaningful problems

• Start by asking "What problem are you solving? Who are you solving it for?"

• Scratch your own itch

• elm-graphql

• servant-elm (for Haskell servant)

• Keep yourself honest about solving problems by starting with an examples/ folder

• Early elm-graphql commits started with examples before anything else

• Write meaningful test cases with elm-test

• elm-verify-examples

• Have a clear vision

• Ask people for feedback

• Let ease of explanation guide you to refine core concepts

Make it easy for people to understand your package goals and philosophy

• Include code examples in readme and docs to make it easier for people to get started
• elm-review live stream video
• Use meaningful examples solving concrete problems (images/screenshots are good, too)
• Richard Feldman's Exploring elm-spa-example talk
• Luke's elm-http-builder package
• elm-spa-example's custom http request builder module
• Instead of writing a package, in some cases it could make sense to publish a blog post to share a pattern

Porting libraries vs. Coming Up With an Idiomatic Solution for Elm

• Instead of moment js ported to Elm, have an API built for a typed context
• Ryan's date-format package

How to design an Elm package API

• Define your constraints/guarantees, make impossible states impossible
• Charlie Koster's Advanced Types in Elm blog post series
• Avoid exposing internals of your data
• Elm Radio episode 002: Intro to Opaque Types

Pay attention to how other packages solve problems

• Richard Feldman's talk The Design Evolution of elm-css and elm-test
• Brian Hicks' talk Let's publish nice packages
• Look at prior art, including in other ecosystems
• Look at github issues and blog posts from projects in other ecosystems

Pick your constraints instead of trying to solve every problem

• Helps you choose between tradeoffs
• Having clear project goals explicitly in your Readme makes it easier to discuss tradeoffs with users and set expectations
• Idiomatic elm package guide has lots of info on basic mechanics and best practices for publishing Elm packages

The mechanics of publishing an elm package

• elm make --docs docs.json will tell you if you're missing docs or if there are documentation validation errors
• elm-doc-preview
• Can use elm-doc-preview site to share documentation of branches, or packages that haven't been published yet
• Set up a CI
• Dillon's CI script for dillonkearns/elm-markdown package
• Dillon's elm-publish-action GitHub Action will publish package versions when you increment the version in your elm.json - nice because it runs CI checks before finalizing a new package release
• elm publish will walk you through the steps you need before publishing the first version of your Elm package
• #packages channel on the Elm slack shows a feed of packages as they're published
• #api-design channel on the Elm slack is a good place to ask for feedback on your API design and package idea

Continue the Conversation

Share your package ideas with us @elmradiopodcast on Twitter!

Basics

• elm/json package docs
• Elm Guide section on JSON Decoders
• Validates that data has the expected shape. Similar to the pattern we discussed in episode 002 Intro to Opaque Types.

Ports and Flags

Here's an Ellie example that shows the error when you have an implicit type that your flags decode to and it's incorrect.

Sorry Dillon... Jeroen won the trivia challenge this time 😉 It turns out that ports will throw exceptions when they are given a bad value from JavaScript, but it doesn't bring down your Elm app. Elm continues to run with an unhandled exception. Here's an Ellie example.

Flags and ports will never throw a runtime exception in your Elm app if you always use Json.Decode.Values and Json.Encode.Values for them and handle unexpected cases. Flags and ports are the one place that Elm lets you make unsafe assumptions about JSON data.

Benefits of Elm's Approach to JSON

• Bad data won't end up deep in your application logic where it's hard to debug (and discover in the first place)
• Decouples serialization format from your Elm data types
• You can do data transformations locally as you build up your decoder, rather than passing your giant data structure through a single transform function

Decoding Into Ideal Types

• Richard Feldman's elm-iso8601 package
• elm/time package
• Programming by intention
• Json.Decode.succeed is helpful for stubbing out data
• Dillon's Incremental Type Driven Design talk at elm Europe
• Json.Decode.fail lets you validate data and fail your whole decoder if there’s a problem
• Parse, don’t validate blog post by Alexis King
• Dillon's elm-cli-options-parser package
• Json.Decode.maybe docs

Note about Decode.maybe. It can be unsafe to use this function because it can cover up failures. Json.Decode.maybe will cover up some cases that you may not have intended to. For example, if an API returns a float we would suddenly get Nothing back, but we probably want a decoding failure here:

import Json.Decode as Decode

""" {"temperatureInF": 86} """ |> Decode.decodeString (Decode.maybe (Decode.field "temperatureInF" Decode.int))
--> Ok (Just 86)

""" {"temperatureInF": 86.14} """ |> Decode.decodeString (Decode.maybe (Decode.field "temperatureInF" Decode.int))
--> Ok Nothing

Json.Decode.Extra.optionalNullableField might have more intuitive and desirable behavior for these cases.

Thank you to lydell for the tip! See the discussion in this discourse thread.

Learning resource

• Brian Hicks' book The JSON Survival Kit

Joël Quenneville’s Blog Posts About JSON Decoders

• Getting Unstuck with Elm JSON Decoders
• 5 Common JSON Decoders
• Elm's Universal Pattern

Guaranteeing that json is valid before runtime

• elm-graphql package
• The basics of GraphQL
• Dillon's Types Without Borders Elm Conf talk
• Elm Radio 001 Getting Started with elm-pages
• elm-pages StaticHttp API docs
• Kris Jenkins' elm-export tool for Haskell types to Elm.
• Mario Rogic's Evergreen Elm elm Europe talk

Autogenerating json decoders

• json-to-elm tool - generates Elm decoders from raw JSON values
• intellij-elm JSON decoder generator

Organizing your decoders

• Evan Czaplicki's elm Europe keynote The life of a file
• Evan's experience report on implicit decoding in Haskell

Getting Started

• Understand Json.Decode.map
• Understand record type aliases - the function that comes from defining type alias Album = { ... }

Submit your question to Elm Radio!

• elm-review
• review-rgb-ranges package by Runar
• Elm Analyse
• elm-review 1.0 release announcement blog post
• elm-review 2.0 release announcement blog post
• Custom Scalars in elm-graphql

Opaque Types

Some patterns

• Runtime validations - conditionally return type, wrapped in Result or Maybe
• Guarantee constraints through the exposed API of the module (like PositiveInteger or AuthToken examples)

Package-Opaque Modules

Example - the Element type in elm-ui.
Definition of the Element type alias

elm-ui's elm.json file does not expose the internal module where the real Element type is defined.

Example from elm-graphql codebase - CamelCaseName opaque type

elm-pages hydrates into a full Elm app. It solves similar problems to what GatsbyJS solves in the ReactJS ecosystem.

Static site generators with JS-free output

https://korban.net/elm/elmstatic/
https://jekyllrb.com/
Eleventy

Meta Tags

Open Graph tags

Asset management with elm-pages (CSS vs. SASS,etc.)

Github issue discussing using the Unix Toolchain Philosophy in the context of keeping elm-pages focused on primitive assets for elm apps

Compared to extending the Gatsby webpack config

SOLID Open-Closed Principle

elm-pages showcase

Chandu's art showcase (built with elm-pages) - https://tennety.art/

Headless CMSes vs. monolothic site providers

https://www.sanity.io/
contentful.com
https://airtable.com/
netlifycms.org

CDN hosting provider Netlify

Static Site Generators and The JAMstack

https://jekyllrb.com/ - static site builder in Ruby - perhaps the first static site generator?
Eleventy - spritual successor to Jekyll - but more flexible
More info on what exactly is the JAMstack?

Getting started with elm-pages

elm-pages-starter repo

elm-pages vs. elm/browser

Pages.Platform.application

The elm-pages StaticHttp API

StaticHttp Docs (there's a description of when and why you would use this compared to elm/http)

elm-pages.com blog post A is for API - talks about StaticHttp and its lifecycle, including some example code.

Core Concepts

• SEO - elm-pages SEO API docs
• Secrets - docs
• Section in StaticHttp blog post about how you don't use Msgs for your StaticHttp data
• generateFiles hook

Incremental Elm Live - Twitch streaming series

Where to learn more

• elm-pages.com
• Join the Elm slack and say hello in the elm-pages channel!