Elm Radio

• 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

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

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

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

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

• 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

• 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

• 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

• 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

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

• 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

• 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

• 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

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)