Tune in to the tools and techniques in the Elm ecosystem.
021: elm-review Tips
The npx command runs NPM binaries from your shellSome 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 adoptionDon't enable lots with errors, better to have few with no errorsEnable in CIignoreErrorsForFilesignoreErrorsForDirectoriesTry the --fix, --fix-all, and --watch flags (see how to run elm-review)Useful packages and workflowReview rule for Documentation.ReadmeLinksPointToCurrentVersionelm-verify-examplesSafe unsafe operations in Elm blog postelm-spa Elm Radio episodejfmengels/elm-review-debugjfmengels/elm-review-commonsparksp/elm-review-portssparksp/elm-review-importsGetting started with elm-review episodeIncremental Steps episode
020: Holiday Special!
Our special guestsTessa Kelly (twitter) (github)Mario Rogic (twitter) (github)Matthew Griffith (twitter) (github)LinksLamderaRichard Feldman's talk Scaling Elm AppsLife of a File Elm Radio episode
019: Scaling Elm Apps
Richard Feldman's talk Scaling Elm AppsLife of a File Elm Radio episodeWeb Components (can be used to encapsulate state heavy view components)How Elm Code Tends Towards SimplicityGOOS bookelm-spa framework
018: Lighthouse Scores
Performance metricsFirst Contentful PaintTime to InteractiveCumulative Layout ShiftBest practicesLighthouse SEO AuditsLighthouse Best Practices AuditsPerformance best practicesCDNNetlifyImage OptimizationCloudinaryloading=lazySVGIconsApple touch and other icons to add to <head>Some resources on iconsWhat the apple touch icons meanGoogle web.dev resource on apple touch iconsmanifest.jsonPWAsProgressive Web AppsMust be HTTPSAbout service workersStale while revalidate service worker cache policyWorkboxelm-starterPerformanceElm optimization instructions for using Terser, the --opimize flag, and elm-optimize-level-2Dev tools performance tabJu Liu's article, Performant Elm, on analyze Elm performance using Chrome Dev ToolsHTTP2 Push is deadUsing preload tagsHere'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>SEOmeta viewport tagAxe accessibility toolsCanonical URLsOpenGraph tagsLighthouse accessibility auditsResourcesLighthouse netlify pluginweb.dev learn section
017: Codecs
miniBill/elm-codec - JSON codec libraryMartinSStewart/elm-codec-bytesBackwards compatibilityelm-codec's FAQ section on backwards compatabilityMario Rogic's talk on Elm EvergreenMario Rogic's talk on LamderaKeeping data in syncElm Radio episode on elm-graphqlTwo Generals ProblemElm codec API - string, Bool, objectMartinSStewart/elm-serialize/latest/, encodes in a format that is optimized for compactness
016: elm-graphql
dillonkearns/elm-graphqlElm Radio episode 4 - JSON decodersDillon's Elm Conf talk about the principles behind elm-graphql: Types Without BordersPhantom Typeselm-graphql's FAQ document Article about simple design in Elmelm-graphql Scalar Codecs tutorialHow can elm graphql decoding fail?SelectionSet.nonNullOrFailSelectionSet.mapOrFailCustom Scalars don't include type information, though there are some proposals for supporting optional type informationBackend Frameworks for Full-Stack GraphQL Type SafetyJuniper for RustHasura (database-schema based API)Postgraphile (database-schema based API)Discourse thread on differences between all the Elm graphql librariesharmboschloo/graphql-to-elm - library for generating Elm functions to make queries from GraphQL strings
015: Incremental Steps
Dillon's Elm Europe talk Incremental Type Driven DevelopmentTest driven developmentFake it till you make itelm-markdown GitHub-Flavored Markdown table live streamSucceed is the key to successPractical refactoring with Llewllyn Falco and Woody ZuillLlewllyn Falco doing Gilded Rose kata with TCR and snapshot testingDillon's article on Relentless, Tiny Habits
014: The Life of a File
Evan Czaplicki's talk The Life of a File.Richard Feldman's Frontend Masters Elm coursesExplore many different data modeling optionsMake Impossible States Impossible Elm Radio episodeWait until you feel the pain vs create abstractions before you need themDoes the code quality metric of line count apply in Elm since there's no spooky action at a distanceAim for loose coupling, high cohesionLocalized reasoningCore mechanics of Elm modules(Organize) Grouping functions values types(Hide) You can hide some of those things. Allows encapsulation, shielding from breaking changes, avoiding coupling.Create modules around domain conceptsUse ubiquitous languageGiant update functionsYou can think of the update function as a delegator - get things to the right place rather than doing the work itselfelm-reviewTCC (test && commit || revert)What are you gaining from extracting a module?Protecting invariantsHiding internalsDecouplingTDD 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 itRelentless, Tiny Habitselm-test Elm Radio episodeTesting is helpful for identifying modules - see keystone testing habit blog postProperty based testing is a sign that something is a module - it has a clear property, which means you want to protect the internalsIt's okay to get it wrong, just don't get it all wrong up front with premature abstractions.
013: Make Impossible States Impossible
The talksMake Impossible States Impossible from Elm Conf 2016Make Data Structures from Elm Europe 2018Elm Radio Episode 2: Intro to Opaque TypesDealing with Impossible StatesBuilding 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 possibleMore referenceselm-cssTereza's line-charts packageTereza's elm Europe talkelm-graphqlGilded rose live streamSnapshot testing (also called Approval Tests)Jeremy Fairbank's Boolean Blindness talk
012: elm-spa
elm-spaRichard Feldman's elm-spa-example GitHub repoElm's Browser.applicationUrl.Parser - URL parsing in Elm for routing single-page appselm-shared-state pattern (formerly called elm-taco)Next.js and NuxtJSRouting and dynamic routing in elm-spaScaling Elm Apps talk - Elm Europe keynote by Richard FeldmanGetting Started ResourcesOffical elm-spa Guide#elm-spa-users channel on the official Elm slackelm-spa-realworld (Ryan's version of elm-spa-example using his elm-spa framework)Exploring elm-spa example - Richard's conference talk walking through codebaseRichard's Frontend Masters courses focus heavily on his elm-spa-example repoElm Radio Episode 7: Extending Elm
011: Parse, Don't Validate
Alexis King's article Parse, Don't Validatethe difference between validation and parsing lies almost entirely in how information is preservedShotgun parsing (original academic paper)Mixing processing and validating dataShotgun 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 failureConditionally return typesDon't have to repeatedly check conditionLook out for "lowest common denominator" built-in values being passed around (like empty String)Maybe.withDefault might indicate an opportunity to parseTwo ways to use this technique:Weaken return typeStrengthen input typeDesign by contractElm Radio JSON decoders episode
010: elm-test
elm-test Basicselm-test NPM packageelm-explorations/test Elm packageelm-test init commandRunning elm-test finds exposed values of type TestTDD PrinciplesTesting in Elm is easier because it's just expectations of input to output (deterministic)TDD is a design practice tooProgramming by IntentionWriting test first makes code testable & decoupledRed, green, refactorYAGNI"Make the change easy, then make the easy change"Kent Beck's TDD by ExampleHere's a staring template of a code kata in Elm that you can use to practiceEmily Bache has many more code katas you can practice on her GitHubFuzz TestingAlso known as Property-Based TestingMartin Janiczek's elm-minithesis projectelm-test's view testing API includes Test.Html.Query, Test.Html.Selector, and Test.Html.Event View objectsTesting pyramidMocking and stubbing are not needed or possible in ElmOrder dependent test helper in Ruby: i_suck_and_my_tests_are_order_dependentWhen to Use Types or TestsJeroen's Safe Unsafe Operations blog postRichard Feldman's talk on Types and TestsMake Impossible StatesShould you test implementation details?Discourse thread discussing testing internalsThink in terms of a modules responsibilityHigher-Level Testing in Elmelm-program-test Martin Janiczek's elm Europe talk on testing Msg's with ArchitectureTestRichard test-update package
009: elm-ui
elm-ui packageFewer overlapping ways to express viewsElement.padding (no concept of margin)Previously called style-elementsThere used to be a notion of a single type defining all possible stylesLatest 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/htmlelm-css packageMobster appEscape hatchesElement.html works at leaf nodes, but elm-ui in general doesn’t mix with plain htmlElement.htmlAttributeRefactoring is a huge asset for a team, so much easier than css refactoringDoesn’t expose all the css tricks directly, sometimes you need escape hatches to access thoseResponsivenessPass in window size from your Elm modelDoesn’t use media queries, so that approach doesn't play well with with pre-rendered html like in elm-pagesclassifyDevice is an optional helper for responsivenessSemantic htmlExpress layout with Element.row, column, elSemantic HTML is independent from layout. Set with attributes using the Element.Region module.WrappingElement.paragraph uses text wrappingem/remelm-ui doesn't expose access to rem and em units to simplify the mental model and reduce overlapping ways to express somethingCookbooks/examplesLucas Payr's elm-ui-widgets Alex Korban's elm-ui patterns )Debugging elm-ui viewsElement.explain gives you highlights around nested elementsInspecting developer tools doesn't help much with elm-ui, but elm-ui is much more traceable because it doesn't have layout cascading like CSSResourcesMatt'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 talkRichard 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
008: The Builder Pattern
What is a Builder?Init a builder data structure with a set of reasonable defaultsCustomize those defaults through a series of chained function callsBuilders have the same type for the return type and final argument, so that they work nicely in a pipelineResources and ExamplesLuke Westby's http-builder packageBrian Hicks' Robot Buttons from Mars talkelm-review package docselm-pages/phantom builder live codingRichard Feldman's Oslo Elm Days keynote
007: Extending Elm
Platform.workerWhat can you do with Elm?HtmlHttpPortsWeb ComponentsDifferent techniques for extending elmelm-pages StaticHttp APIElm radio episode 1 on elm pageselm-graphqlCodegenMacrosElixir exunitWrapper elm appsCan emulate effect managersPlatform.workerIntrospectionelm-typescript-interopPorts and flagsWeb ComponentsCode transformationElm asset loader webpackHacking JS to get FFIDepending on internal details could end up with broken codeelm-hot and elm-hot-webpack-loaderPitfalls and considerationsCodegenHave a single clear source of truth for codegenPrevent bad states with airtight abstractions, rather than having lots of caveatsMake sure public APIs for generated code look niceUse doc commentsMacrosElm code that doesn’t look like elm codeTooling doesn’t work then - see Babel ecosystemViolates Open close principle - you’re modifying the language, not extending itProvide a platform with extensions in mind when you build tools so you don’t require users to hackWhen you build a tool, think about the mental model for uses, let that guide you. Avoid leaky abstractionsBe opinionated about the core things, and unopionated about what’s not essential to the tool[elm-spa](https://github.com/ryannhg/elm-spa)