Elm Radio: Recent Episodes
Dillon Kearns, Jeroen Engels
- Ryan Haskell-Glatz (twitter) (youtube) (github) (sponsor)
elm-land- Elm Radio elm-spa episode
- Evan's talk Let’s be mainstream!
- "Take responsibility for user experiences" (from the Elm philosophy)
- Ryan's live stream video 🌱 Upgrading from elm-spa • Elm Land LIVE
- Ryan's experimental NPM tool css-in-elm
- elm-land guide's section on components
- Elm Radio elm-watch episode
- Bats-core: Bash Automated Testing System
- Join the elm-land Discord
- Sponsor Ryan on GitHub
elm-review-unused- Safe dead code removal in a pure functional language
- Elm Town 60 with Wolfgang Schuster - Productivity and the culture of moving a little bit slower
- Mario Rogic (GitHub) (Twitter)
- Lamdera
- Mario's Elm Europe talk Evergreen Elm
- Lamdera 1.1.0 release notes (automatic migration generator)
elm-pkg-jsspec
elm-pagesscripts episodeOptimizedDecoderin elm-pages v2- Netlify's DPR (Distributed Persistent Rendering)
elm-pagesv3 Express community adapter- elm-pages v3 Session API
- Writing Great Docs episode
dillonkearns/elm-formepisodeelm-pagesv3 announcement post
- Ruby Enumerable module
- Ruby Shovel Operator
- Jeroen's Elmcraft post ESLint Equivalents in Elm
- Lamdera
elm-uielm-tailwind-moduleselm-formatlamdera/program-test
- Evan's Elm philosophy tweet
elm-reviewdocselm-doc-previewelm-review-documentationelm-verify-examplessparksp/elm-review-forbidden-wordselm-package-starter- Idiomatic Elm Package Guide
elm-book- Elm Radio episode How (And When) to Publish a Package
- Docs for Developers book
vendrinc/elm-gqldillonkearns/elm-graphqlelm-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
remotedatapackage- Elm Radio
elm-graphqlepisode - 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-spaelm-spa-realworldexample- 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-codegenelm-syntaxelm-syntax-dslelm-uiElm.Type.Typefromelm/project-metadata-utilsrepresents all possible Elm typeselm-codegenannouncement post on Discourse- Guides from the
elm-codegenrepo
- 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-testprototype repo- Approval testing
elm-coverageelm-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-importseither new feature, or separate project to give suggestions to make all inconsistent imports in a project consistent - Idea:
elm-reviewcode actions - Idea:
elm-reviewcollection 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-graphqlbut with factory-style API for mocking out data that is compliant to the graph schema, for use with things likeelm-program-test - Idea:
Browser.applicationwrapper 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
HttpErrortype defined inelm-graphql) - Aaron's community-standard
elm-colorpackage - Idea: tool to automatically vendor or un-vendor Elm packages
- Idea:
elm-formatin 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-fusionto gather better type incormation about an API - Idea: make tools like
elm-http-fusionembeddable 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-codegenfor 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-csstool 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-reviewfixes in a hidden temp directory - Idea: Elm step debugger
- Idea:
elm/parserdebugger 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 debuggingelm-pagesDataSources to see why a failure happened and what the breadcrumbs are - Idea: React
ink, but for Elm awesome-elm-sponsorshiprepo
- Jeroen's tweet on the root cause of false positives
- Epistemology
- Isabelle and TLA+ (proof systems)
- Precautionary principle
array-callback-returnESLint 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-testepisode- 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.andThenandFuzz.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
#testingchannel 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-fetchpackage RemoteDatapackage- RemoteData blog post How Elm Slays a UI Antipattern
elm-program-testis useful for integration testing data loadingelm-suspenseproof-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 upcoming 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-chartssiteelm-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 githubelm-graphqlselection 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-unusedelm-reviewrule - 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-unusedwithelm-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.concatMapis the same pattern asandThenunder a different nameandThen identitycan be used to flatten something- Dillon's Combinators article
- Martin Janiczek's
elm-list-cartesianpackage gives two validmap2implementions forList - 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-simplifypackage
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-unitspackage- 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-2Html.LazyAPI- 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.elmcomment 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.maybeis 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 MessagesUseful 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-sceneexamples- 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-playgroundexamples
- 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
anytype - Nominal vs structural typing
TypeScript's any vs. Elm's Debug.todoTypeScript'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--optimizeif 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.
anycan not be used in places that takeneveranyvsunknownJSON.parsereturnsany, as do many core and published typingsio-tslets 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
anyregardless 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
numbervalues 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
1interrupt 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-graphqlSelectionSetscope type variable- Builder Pattern episode
- Brian Hicks' builder pattern talk Robot Buttons from Mars
withfunctions- Phantom builder is a state machine for your types
elm-reviewRule 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-chartsandelm-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-visualizationelm-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
- Stuff that happens for the client (in the browser)
- Stuff that happens in the server (like scheduled job)
- Data from client to backend
- Data from backend to client
- Frontend knows what it knows
- 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-jsspec- 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.mapwill 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-tagpackage- 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-2elm-explorations/benchmark- Jeroen's list-extra PRs (with reference to the benchmark for it) for functions
gatherWithisInfixOf - 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-pagesv2! - Pre-rendered pages
elm-pageshas a build step- Parse, Don't validate
- Frontmatter
DataSource.FileDataSource.failDataSource.Glob- Distill API
DataSource.distillCodec elm-graphqlDataSourceexample 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-spaV5 Docselm-spav5 episode
Key new features in v6Protected pages
- Provide/redirect protected custom type
- Eject workflow
- Vuepress
elm-program-testdocs 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-pages2.0 routing and splat routeselm-spaadd commandelm-live- Vite
elm-spaView 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-spav6 has an ejectableEffectmodule elm-real-worldSPA example (elm-spa-exampleusingelm-spaframework)- elm-spa.dev
elm-program-testexample folder- Blissfully jobs
#elm-spa-userschannel on the Elm Slack
- Idiomatic Elm package guide
dillonkearns/elm-package-starter
Lessons1. 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-motionmedia 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-imagein 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
map2Maybe.map2
MetaphorsSome 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-graphqldillonkearns/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.Rangeelm-reviewignoreErrorsForFiles- Review context
withFinalModuleEvaluationelm-review's context is likeModel, elm-syntaxNodeis like aMsg, ReviewErrors areCmds, visitors are likeupdateelm-review's new configuration errors API- Import aliases feature:
ModuleNameLookupTable - Parse, don't validate episode
elm-reviewFixes API- Jeroen's Safe Unsafe Operations blog post
Getting startedSome 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-testepisode- Cypress testing framework
- GH actions
onevents (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-moduleselm-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-tailwindpaved 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 forelm/html)- CSS in JS
miyamoen/elm-origamimatheus23/elm-default-tailwind-modulesis the best way to start (it's the generatedelm-tailwind-modulescode for the default TailwindCSS configuration)elm-tailwind-modulescurrently requires you to order your breakpoints from high to low (see docs)tesk9/accessible-htmlgithub.com/dillonkearns/elm-pages-starterelm-pages-tailwind-starter- CSS grid
- Elm Radio
elm-uiepisode miniBill/elm-ui-with-context- TailwindUI - a paid catalog of TailwindCSS templates and widgets/components
elm-ts-interoplanding page (built withelm-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'sfromUnstyledandtoUnstyledare helpful for incremental adoption (start refactoring from the leaves)
-
PLTalk programming language panels
-
PLTalk panel discussion on funding
- Elm compiler roadmap document
elm-language-serverelm-format's abstract syntax tree output is in the brainstorming phaseelm-typescript-interop(the old approach)elm-ts-interopElm 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-interoprelied on Elm's automatic JSON serialization flags/ports.elm-ts-interoppassesJson.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-jsonElm 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-formatepisodeelm-program-testelm-testelm-testepisode- BDD As It's Meant To Be Done video by Matt Wynne
- BDD (Behavior-Driven Development)
- Gherkin syntax
- Outside in vs. inside out testing
ensurevs.expectfunctions- The Effect Pattern
- Http simulation example from examples folder
- An
elm-program-testexample using a generalized Effect type - elm-program-test GitHub issues for contributing
- The Official
elm-program-testGuidebook - The
elm-testHTML querying API #testingchannel in Elm Slack- Writing Testable Elm keynote by Tessa Kelly
elm-formatprettiergofmt, the built-in Go formatting tool- Some discussion of IntelliJ trailing whitespace issues
elm-formateditor integrations tableelm-toolingelm-toolingElm Radio episode- Jeroen's
elm-formattips tweet NoExposingEverythingrule- Discussion about single-line conditionals
- The original Elm style guide
- Join lines (
Jin vim, also available with intellij keybindings)
- Simon Lydell (twitter) (github)
elm-tooling-clielm-json- Install elm-tooling into your npm dev dependencies
npxelm-publish-action- NPM's package.json
scriptssection - NPM
postinstallscripts - Richard's recommendation to use
npm config set ignore-scripts true, which can cause issues because it also skips thepostinstallfrom yourpackage.json elm-tooling-clidocs 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
npxcommand 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 libraryMartinSStewart/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
- (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 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-exampleGitHub repo - Elm's
Browser.application Url.Parser- URL parsing in Elm for routing single-page appselm-shared-statepattern (formerly calledelm-taco)Next.jsandNuxtJS- 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.withDefaultmight 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 Elmelm-program-test
Martin Janiczek's elm Europe talk on testing Msg's with ArchitectureTest
- Richard
test-updatepackage
elm-uipackage- 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/examplesLucas 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 considerationsCodegen
- 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 parserIndications 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-markdownelm-in-elmparser- 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 ConversationShare 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 FlagsHere'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 TypesSome 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 ModulesExample - 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 outputhttps://korban.net/elm/elmstatic/
https://jekyllrb.com/
Eleventy
Meta TagsOpen 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 providershttps://www.sanity.io/
contentful.com
https://airtable.com/
netlifycms.org
CDN hosting provider Netlify
Static Site Generators and The JAMstackhttps://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-pageselm-pages-starter repo
elm-pages vs. elm/browserPages.Platform.application
The elm-pages StaticHttp APIStaticHttp 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!