Tune in to the tools and techniques in the Elm ecosystem.
036: elm-pages 2.0
Introducing elm-pages v2!Pre-rendered pageselm-pages has a build stepParse, Don't validateFrontmatterDataSource.FileDataSource.failDataSource.GlobDistill API DataSource.distillCodecelm-graphql DataSource example from incrementalelm.comThe 2.0 docs are at elm-pages.com#elm-pages channel on the Elm SlackIncremental Elm source codeElm Radio site source code
035: elm-spa v6
Ryan Haskell-Glatz (Twitter) (GitHub)elm-spa V5 Docselm-spa v5 episodeKey new features in v6Protected pagesProvide/redirect protected custom typeEject workflowVuepresselm-program-test docs siteCan Eject not found pageEject workflow stops generating files when they're ejectedFile-based routing in elm-spaInspired by NuxtPage builder API (like browser sandbox)No more int or string in urlelm-pages 2.0 routing and splat routeselm-spa add commandelm-liveViteelm-spa View moduleUI namespace in elm-spa docs repo has a shared page helper function for building the shared header/footerShared moduleelm-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 moduleelm-real-world SPA example (elm-spa-example using elm-spa framework)elm-spa.develm-program-test example folderBlissfully jobs#elm-spa-users channel on the Elm Slack
034: API Design Lessons
Idiomatic Elm package guidedillonkearns/elm-package-starterLessonsAvoid unexpected or silent behaviorGive context/feedback when things go wrong so the user knows their change was registered, to enhance trustGood errors aren't just for beginners - Curb Cut EffectSandi metz - code has a tendency to be duplicated - be a good role model - we're influenced by precedenceMatt Griffith - API design is holistic. It's a problem domain. Rethink from the ground up.Learn from the domain and terms, but don't limit yourself to it when you can create better abstractions.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.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 PictureAPI design is a tool to help you solve problems.There's a qualitative difference when you wire up feedback before you up front.Avoid toy examples, use meaningful use cases to direct your design.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.Come up with an API with the most benefits and the least pain points.If there's something that you want to make really good, invest in giving it a good feedback mechanism.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.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.Have a clear message/purpose - whether it's an API, or an internal module.Take responsibility for user experiences.
033: Accessibility in Elm
Tessa Kelly (GitHub) (Twitter)The 4 Principles of Accessibilityprefers-reduced-motion media queryGuide to using Mac's built-in VoiceOver screenreaderAce Accessibility toolsSkip LinksNavigating headings with a screenreader (see keyboard shortcuts for the VoiceOver rotor)WCAG checklistsVPAT documentsARIA attributesThe Accessibility TreeGoogle's explanation of The Accessibility TreeAn API for the Accessibility Object Model is in draft formAvoid modals, instead try a different uxAccessible radio buttonsTessa's Accessible HTML package tesk9/accessible-htmllist-style-image in CSSProgressive enhancementRemix's approach to progressively enhancing formsPackage for using Accessibile HTML with elm-css - tesk9/accessible-html-with-cssJeroen's hierarchy of static checksChorded keyboardEmily Shea's talk Voice Driven Development: Who needs a keyboard anyway?WCAG accessibility guidelineswebaim.orgAngela Hooker's Juneteenth Conf talk Empowerment to the People! What You Need to Know about Black People, Disability, and AccessibilityAxeCon talksDeque's education resources site - Deque UniversityAxe Dev tools Chrome extensionTessa Kelly (GitHub) (Twitter)NoRedInk jobs
032: Elm's Universal Pattern
Joël Quenneville (Twitter)Joël's blog post Elm's Universal Patternmap2Maybe.map2MetaphorsSome common metaphors for Elm's Universal Pattern (Applicative Pattern).MappingCombiningLiftingWrapping and unwrapping boxesBlog post on Two ways of looking at map functionsExamplesRandom generatorsApply mapping functions to vanilla value functions to keep things cleanTipsSeparate branching code from doing code (discussed in-depth in Joël's blog post Problem Solving with Maybe)Stay at one level of abstractionJson decoders as combining functionsScott Wlaschin Railway Oriented ProgrammingDillon's blog post Combinators - Inverting Top-Down TransformsThe JSON structure and Elm type don't have to mirror each other - start with your ideal type and work backwardsApplicative patternApplicative needs 1) way to construct, 2) map2 or andMapJson.Decode.Pipeline.required functionRecord constructorsPractice writing it with an anonymous function to convince yourself it's equivalentRecord constructors are just a plain old elm functionmap2 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 ownApplicative Laws in HaskellMonomorphic vs polymorphicParser Combinatorselm/parser episodeJoël's blog posts on the ThoughtBot blogJoël's Random generators talkJoël's Maybe talkSome more blog posts by Joël that related to Elm's Universal Pattern:Running out of mapsPipeline Decoders in ElmJoël's journey to building a parser combinator:Nested cases - https://ellie-app.com/b9nGmZVp9Vca1Extracted Result functions - https://ellie-app.com/b9qtqTf8zYda1Introducing a Parser alias and map2 - https://ellie-app.com/b9MwZ3y4t8ra1Re-implementing with elm/parser - https://ellie-app.com/b9NZhkTGdfya1Getting Unstuck with Elm JSON Decoders - because mapping is universal, you can solve equivalent problems with the same pattern (described in this post)
031: Elm Code Generation
What's the source of truth?Teach the Elm compiler about external things like schemaselm-graphqldillonkearns/elm-graphqlTypes Without BordersMacros in other languagesC macros compared to Lisp macrosReScript ppx macrosVanilla code generation can be inspected and debugged like plain handwritten codeGitignore gen code so you know you didn't forget to generate it on the build serverWatchers for rerunning codegenRerun code gen when the source of truth changes ideallyChokidar CLIThe Design of Everyday Things by Donald NormanAffordancesMappingselm-tailwind-modulesChadtech/elm-vectorthe-sett/salixelm-ts-interopScaffoldingelm-review init, new-rule, and new-packageelm-spa newhtml-to-elm.comEnd to end testing your generated codeSnapshot testingelm-graphql's snapshot testing scripthtml-to-elm.com generated test suiteelm-verify-examples
030: Debugging in Elm
Rubber duckingLay out your assumptions explicitlyVeritasium video The Most Common Cognitive BiasElm Debugging techniquesDebug.todoFrame then fill inAnnotation let bindingsUsing nonsense names as a stepElm review rule to check for nonsense nameHardcoded values vs debug.todoTodos don't allow you to get feedback by running your codeTDDFake it till you make itSimplest thing that could possibly workJoël Quenneville's article Classical Reasoning and DebuggingDebugging is like pruning a treeBreaksTake a walk. Step away from the keyboard when you're grinding on a problemsscce.org (Short, Self Contained, Correct (Compilable), Example)Create a smaller reproduction of the problemReduce the variables, you reduce the noise and get more useful feedbackReasoning by analogy from Joël's postElm debug log browser extensionnode --inspectelm-test-rsDebug.log in unit testsTest.only for running just one test or describePut Debug.logs in each path of an if or case expressionUse the browser elm debugger to inspect the modelScaling Elm Application episodeNarrow down your search space with Elm typesParse, Don't Validate episodeTiny steps help you prune the treeExploratory TestingWrap early, unwrap late
029: Writing an elm-review Rule
dillonkearns/elm-review-html-to-elm (elm-review version of html-to-elm.com)Rule naming guidelines docsElm review cli new rule commandstil4m/elm-syntaxElm.Syntax.Rangeelm-review ignoreErrorsForFilesReview contextwithFinalModuleEvaluationelm-review's context is like Model, elm-syntax Node is like a Msg, Review Errors are Cmds, visitors are like updateelm-review's new configuration errors APIImport aliases feature: ModuleNameLookupTableParse, don't validate episodeelm-review Fixes APIJeroen's Safe Unsafe Operations blog postGetting startedSome repos to look at for inspirationgithub.com/jfmengels/elm-review-unusedgithub.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
028: GitHub Actions
Continuous Integration (CI)CD (Continuous Delivery, Continuous Deployment)Mob programmingelm-program-test episodeCypress testing frameworkGH actions on events (schedule, workflow_dispatch, pull_request, etc.)elm-review new-packagenpm-run-allCan run npm-run-all test:*, but don't know the order it will run ingit hooksDependabotDillon's blog post about using dependabot for Elm dependenciesSend a tweet with a GH actionDillon's GH profile (and the GH action workflow for it)GH Action to include blog posts in profile feedGitHub's Octokit APICore GitHub Actions JavaScript packagesJavaScript GitHub Actions starter templateUnix toolchain philosophyelm-tooling-actionSimon Lydell's example GitHub Actions workflowGitHub Actions cache apiBrian Douglas' dev.to blog post seriesEdward Thomson's GitHub Actions advent calendar
027: elm-tailwind-modules
Our guest: Philipp Krüger, aka matheus23 (github) (twitter)matheus23/elm-tailwind-moduleselm-reduce (Philipp's Bachelor's thesis)TailwindCSSThe Tailwind config fileelm-uiSass/ScssCSS inheritanceCohesion and coupling - don't separate things that need to be understood togethermonty5811/postcss-elm-tailwind paved the path for Philipp's libraryPurgeCSSPhilipp's library is a fork of justinrassier/postcss-elm-css-tailwindrtfeldman/elm-css (it's a drop-in replacement for elm/html)CSS in JSmiyamoen/elm-origamimatheus23/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-htmlgithub.com/dillonkearns/elm-pages-starterelm-pages-tailwind-starterCSS gridElm Radio elm-ui episodeminiBill/elm-ui-with-contextTailwindUI - a paid catalog of TailwindCSS templates and widgets/componentselm-ts-interop landing page (built with elm-tailwind-modules)html-to-elm.comelm-review rule for html-to-elm.com, dillonkearns/elm-review-html-to-elmRefactoring UI bookReact presentational components vs ???This blog post talks about the View Objects pattern in Object-Oriented ProgrammingElm Radio Incremental Steps episodeFullStack Radio podcastA FullStack episode about the TailwindCSS philosophyelm-css's fromUnstyled and toUnstyled are helpful for incremental adoption (start refactoring from the leaves)
026: Funding Open Source with Evan Czaplicki
#PLTalk programming language panels#PLTalk panel discussion on fundingElm compiler roadmap documentelm-language-serverelm-format's abstract syntax tree output is in the brainstorming phaseelm-typescript-interop (the old approach)elm-ts-interop Elm Radio episode
025: elm-ts-interop
elm-ts-interopNow-deprecated original library - elm-typescript-interopThe Importance of Ports - Elm Conf talk by Murphy RandleEvan'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 SpotsTypeScript discriminating unions are analagous to Elm custom typesTypes Without Borders Elm Conf talkelm-ts-json Elm pacakgeElm ts interop npm packageWhat's the source of truth?Nexus - code-first GraphQL servergraphql-js - schema-first GraphQLHasura and PostGraphile - Postgres schema is the source of truthElm Codecs episodeelm-ts-json Encode docsGetting StartedGet 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 TransformsTypes Without Borders Isn't Enough
024: elm-program-test
Aaron VonderHaar (github) (twitter)elm-format episodeelm-program-testelm-testelm-test episodeBDD As It's Meant To Be Done video by Matt WynneBDD (Behavior-Driven Development)Gherkin syntaxOutside in vs. inside out testingensure vs. expect functionsThe Effect PatternHttp simulation example from examples folderAn elm-program-test example using a generalized Effect typeelm-program-test GitHub issues for contributingThe Official elm-program-test GuidebookThe elm-test HTML querying API#testing channel in Elm SlackWriting Testable Elm keynote by Tessa Kelly
023: elm-format
elm-formatprettiergofmt, the built-in Go formatting toolSome discussion of IntelliJ trailing whitespace issueselm-format editor integrations tableelm-toolingelm-tooling Elm Radio episodeJeroen's elm-format tips tweetNoExposingEverything ruleDiscussion about single-line conditionalsThe original Elm style guideJoin lines (J in vim, also available with intellij keybindings)
022: elm-tooling with Simon Lydell
Simon Lydell (twitter) (github)elm-tooling-clielm-jsonInstall elm-tooling into your npm dev dependenciesnpxelm-publish-actionNPM's package.json scripts sectionNPM postinstall scriptsRichard's recommendation to use npm config set ignore-scripts true, which can cause issues because it also skips the postinstall from your package.jsonelm-tooling-cli docs websiteElm tooling in ciGitHub ActionsSimon's example GitHub Actions workflow with elm-toolingSeparate steps for Elm tooling install and npm install to optimize cachingnpm 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 scriptselm-tooling quick start page