https://erikras.com/ erikras.com 2026-05-21T00:00:00.000Z https://github.com/jpmonette/feed Erik Rasmussen rasmussenerik@gmail.com https://erikras.com Erik Rasmussen's personal website https://erikras.com/og-image.jpg https://erikras.com/favicon.ico © Erik Rasmussen <![CDATA[⏯️ AudioCard — The React audio player designed for podcasts and Twitter cards]]> https://erikras.com/blog/audiocard 2019-04-16T00:00:00.000Z But there was one final piece of the puzzle that I needed: an in-page audio > player. Surveying the React audio player landscape, I found that the two leading contenders are [Cassette](https://benwiley4000.github.io/cassette/styleguide) and [React Audio Player](https://github.com/justinmc/react-audio-player). Cassette is quite sophisticated, and does video as well, but it was playing my MP3 files using the ` Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Beatles in Code]]> https://erikras.com/blog/beatles-in-code 2021-11-09T00:00:00.000Z https://twitter.com/erikras/status/1394204791929196544 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Introducing… 🔒 Blockchain Form]]> https://erikras.com/blog/blockchain-form 2019-04-01T00:00:00.000Z Now you can! From [the guy](https://twitter.com/intent/follow?screen_name=erikras) that thought putting form state in Redux was a good idea... ## 🔒 Blockchain Form Now every single keypress, change of focus, and validation error of your form fields can be stored on the Ethereum blockchain, which has an average transaction speed of only 6 minutes per transaction. It’s the securest way ever invented to store your form data. _**It’s 🔥 BLAZING 🔥 secure!**_
How Blockchain Form Works
Simple animation showing how 🔒 Blockchain Form works. Want to modify field B when field A changes? No problem! Just write a quick and easy [smart contract](https://en.wikipedia.org/wiki/Smart_contract) to modify the other value! Just make sure you don’t make any mistakes in coding your smart contract — and that your requirements will never change — because those motherfuckers are **permanent**. > But wait! There’s more!
But wait!
Every time someone submits a form with 🔒 Blockchain Form, both the website and the user will receive one free FormCoin™. _**OMGamification!!!**_ FormCoin™s are a secure cryptocurrency that can be exchanged for goods and services if you can convince someone that they’d rather have a virtual currency than whatever it is they have that you want. ```bash npm install blockchain-form ``` > [👉 Read the easy-to-follow, thorough documentation 👈](https://www.npmjs.com/package/blockchain-form) Get started today! Because remember, kids: 🤔 > When your form data is distributed, no one is in control! ✊
Spinning coin
]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🔔 CI Ding: Get Notified When CI Passes]]> https://erikras.com/blog/ci-ding 2026-04-11T00:00:00.000Z The biggest bottleneck in my workflow is remembering to check if my CI passed. Sometimes I'll come back to a PR and CI will have passed or failed 30 minutes earlier, but I hadn't noticed because I wasn't watching it constantly. There's gotta be a better way! > 💡 I want a browser extension (or first party implementation @github) that > puts a "Notify me when CI finishes" checkbox on my PRs, and then sends an > OS-level notification. v2 would buzz my Apple watch if I get up from my desk > to stretch. > > – @erikras, > [Aug 19, 2021](https://x.com/erikras/status/1428290614945329164?s=20) I've been wanting a PR notiication for _almost five years_! So I built one. It's called [CI Ding](https://ciding.app/). It does one thing: it plays a happy sound when CI passes in an open, but backgrounded, tab, and it plays a sad sound if it fails. 10-15 minute breaks between projects are healthy and promote focus and flow, but it's important to remember to stop your break.
Get On Extension Store
Let me know what you guys think. [Download now](https://chromewebstore.google.com/detail/ci-ding/lojjpdolaokdkdkiidmcobbmhoombfjo) while supplies last! It's free for your first 10 notifications. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[The Colbert Questionert]]> https://erikras.com/blog/colbert-questionert 2026-05-21T00:00:00.000Z You can't put peanut butter on an orange! ## Have you ever asked anyone else for their autograph? Obviously this question makes more sense directed at celebrities, but I think my only "standing in line to get an autograph" story is for [Muggsy Bogues](https://en.wikipedia.org/wiki/Muggsy_Bogues), the famously shortest player to ever play in the NBA. At the time, he played for my local [Charlotte Hornets](https://en.wikipedia.org/wiki/Charlotte_Hornets), and I went to a dozen or so games to see him play. It's not like I was a massive fan or anything, but he must have been visiting my town for something and I got his autograph. ## What do you think happens when we die? This might seem like the hardest question, but to me it's the easiest: Nothing. There is no afterlife. We just invented it because it's hard to reason about "Where is [dead person]?" I've always appreciated the quote often attributed to Mark Twain: > I do not fear death. I had been dead for billions and billions of years before > I was born, and had not suffered the slightest inconvenience from it. That's perfection. The [best answer](https://www.youtube.com/watch?v=8T3vwIXkTEc) ever on Colbert's show was a question to Keanu Reeves that actually started the entire Questionert series: > I know that the ones who love us will miss us. Even more perfect than Twain. ## What is your favorite action movie? People like to say _Die Hard_ to this one, but I've gotta go with Sean Connery. I'm not sure why, but [_Indiana Jones and the Last Crusade_](https://en.wikipedia.org/wiki/Indiana_Jones_and_the_Last_Crusade) hit me at the perfect age. The Nazi punching and the boobytrapped cave and the whole Grail myth and the "cup of a carpenter" line. Just excellent. ## Window or Aisle? This changed for me in adulthood. As a kid, I used to love to look out the window, but I've seen all the clouds and tiny landscapes I need to by now, and as a 6' (183cm) fellow, I've grown to appreciate the aisle, although it does come with the risk of a food trolley banging your knee if you take too much advantage of the aisle. Stephen always jokes about the window involving bothering neighbors when you need to go to the bathroom, but he never mentions one of my favorite lines from _Fight Club_ where Brad Pitt muses about "Do I give you the ass or the crotch?" ## Favorite Smell? Brewing coffee is lovely, but I've gotta go with _frying garlic_. Which is a thing I do very often in my Mediterranean lifestyle. ## Least Favorite Smell? I've thankfully yet to experience a decomposing corpse, and my son is just on the cusp of becoming a stinky teenager (which is often an answer people give), but my answer here is super basic. I'm gonna go with _poop_, even my own. ## Earliest Memory? This is the hardest one of all for me because ever since reading [_The Invisible Gorilla_](https://en.wikipedia.org/wiki/The_Invisible_Gorilla), and similar books about how memory works, I have lost all faith in memory. If I am ever called to be on a jury, I will probably get kicked off because I differ from most people in that I give _zero_ credence to "eyewitness testimony". Gun to my head, it's probably playing monochrome computer games with my best childhood friend, Jacob. Especially hitting the ⬅️➡️ arrow keys repeatedly to "run" in [Decathlon](https://en.wikipedia.org/wiki/Olympic_Decathlon). I was probably five? ## Cats or Dogs? I currently have a cat, and that decision was mostly because my apartment lifestyle means that a dog is a _lot_ more work, because you've gotta walk them, rain or shine, and also you can't leave them alone in the apartment for days at a time to go on trips. But dogs give so much more love back to you, so the answer is an unequivocal: _dogs_! ## You get one song to listen to for the rest of your life: what is it? He always specifies that it's not always playing, but any time you go to listen to music, that's the song that plays. This is a tough one. I don't think I want lyrics. The first one that comes to mind is [Rhapsody in Blue](https://en.wikipedia.org/wiki/Rhapsody_in_Blue). ## What number am I thinking of? This is always played as a joke when Stephen says, "Nope". He claims in his self-Questionert that Meryl Streep and Ethan Hawke both correctly guessed 3. But to be scientific about it, I'm gonna go with _37_, because that's the [most common number](https://www.youtube.com/watch?v=d6iQrh2TK98) people think of when you ask them for a "random" number. ## How would you describe the rest of your life in five words? Proud parent. Happy traveling husband. --- Thank you, Stephen Colbert. 🫶 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Declarative Form Rules]]> https://erikras.com/blog/declarative-form-rules 2018-03-22T00:00:00.000Z How can I update field B when field A changes from X to Y? As the API stands currently, this could not be accomplished with [🏁 Final Form Calculate](/blog/final-form-decorators), as it matters what the _previous value_ was. We need a way to run some code to update another field when one field changes, _without calling the update in `render()`_. This requires a _**stateful**_ component to subscribe to changes to a field and keep track of what the previous value was. It was pretty trivial to code up an `OnChange` component that doesn’t render anything, but calls a callback when the field value changes. This seemed so potentially useful that I went ahead and, for completeness, created `OnBlur` and `OnFocus`, resulting in the library [🏁 React Final Form Listeners](https://github.com/final-form/react-final-form-listeners#-react-final-form-listeners). Having just discovered this idea, I have not yet decided how useful it is, or whether or not it’s a good idea, but I’m sharing it to get feedback from others. These components allow us to write “form rules” as non-rendering components, like this: ```jsx ``` How do we write `WhenFieldChanges`? Well, we need a `Field` to get the `onChange` function for the field we want to change, and then the OnChange component to notify us when the field we want to listen to has changed value. ```jsx const WhenFieldChanges = ({ field, becomes, set, to }) => ( {( // No subscription. We only use Field to get to the change function { input: { onChange } } ) => ( {(value) => { if (value === becomes) { onChange(to); } }} )} ); ``` It’s important to notice that the function given to `OnChange` will _only_ be called when the value changes, not on every render. Let’s see how it looks in practice. ## Conclusion I’m still not convinced how useful this concept is, but it’s kind of fun to explore the boundaries of what React allows us to do. Component composition, and letting them keep state as the data cascades through them, is extremely powerful. As always, feedback welcome and encouraged! 🤔 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Final Form – Announcement]]> https://erikras.com/blog/final-form-announcement 2017-11-27T00:00:00.000Z Redux Form Logo As I write this in late 2017, Redux-Form has well over 8k stars on Github and 800k monthly downloads on NPM. By my recent calculations, based entirely on NPM download figures, about half of React projects use Redux, and about a quarter of those use Redux-Form, so about 11% of the _7 million_ projects that download React, also download Redux-Form. With this popularity and usage has come a deluge of feedback. Everyone has had a slightly different use case and requested a slightly different behavior out of Redux-Form. I have done my best to accommodate these, and merge in pull requests for features that never would have occurred to me. I’ve done a lot of thinking about forms and form state management. ## Problems with Redux-Form Over these years, I have heard four primary complaints about Redux-Form. For some reason, unlike with most complaints, I have most heard these in person at conferences than on Twitter or Github or Stackoverflow. They are as follows, in no particular order, but with growing emoji angst: 1. **🙁 It’s only for React?** “Redux works with Angular, _et. al._, it’s too bad that Redux-Form doesn’t.” 2. **😢 I have to use Redux?** “I really need a form solution, but my project isn’t using Redux.” Also, everyone high up in the React community, [_including both inventors of Redux_](https://github.com/reactjs/redux/issues/1287#issuecomment-175351978), say that Redux is **_not_** the best place to keep form data. Oops. 3. **😖 I can’t use inline render functions?** “Why does my input lose focus on first keypress?” Well, it’s because Redux has asynchronously updated both your input and the surrounding form component (because now `dirty === true`), and because your inline render function is !== the previous one, blah blah blah 😢 4. **😭 It’s [over 26k gzipped?](https://bundlephobia.com/result?p=redux-form) No way!** “Bundle size, bro. I’m watching my weight.” ## Premature Optimization As `v5` of Redux-Form became very popular, the biggest complaint I had was that it was slow. The theory behind why was that it was rerendering the _entire_ form on every single keypress, since the `values` were provided to the form component. In early 2016, I solved this, by completely rewriting it from scratch, in what became `v6`, creating a `` component, which only updated when _its_ state changed, but did not update when another field’s state changed. This complicated matters greatly, because now the whole `
` only received a few select form-wide props, so the people that needed more information had to `connect()` with a [suite of selectors](https://redux-form.com/8.3.0/docs/api/selectors.md/) to get other form state that was no longer provided by default. It is entirely possible that the fear of rerendering the entire form drummed into me by the complaints that lead to Redux-Form `v6` is unfounded, but, whether or not the user notices it, it must be true that rerendering parts of your tree needlessly _is_ going to be slower than avoiding it. I decided that my next form solution should have built-in “only rerender if you need to” logic, which most people will never need, but that will allow fine tuning of complex forms. ## Solution Some time in early 2017, I had the idea to create a “form state management engine” that was totally independent of React or Redux, just pure javascript. My first attempt was using Immutable.js, leveraging its power for fast “has this whole tree changed?” checks. I was about halfway done with it in May, when I mentioned it to fellow form library author, [David Khourshid 🎹](https://twitter.com/davidkpiano). His reaction to involving Immutable.js (15.3k gzipped) was negative, and it made me rethink my approach; could I do it without the help of _any_ third party libraries? In August, during an offline vacation, I began coding a dependency-free form management library. ## Going with the Flow Normally I would build a library from the inside out, from the core to the public API, but this time, I defined the API first, even writing some tests, before implementing the core functionality. By strongly typing my API with [Flow](https://flow.org/), I was able to catch bugs and ensure that the internals were satisfying the contracts of the API. It felt a little like pair programming with an annoying partner that was constantly saying, “Well actually, that’s supposed to return a string!”, _but in a good way!_ Flow is awesome. 😍 ## Clogged Namespace Before I get to the _finish line_ of this post, I’d like to talk about the process of choosing library names. I probably tried a hundred different names involving the word “form” before finding one that was not taken already on NPM. So many of them are rotten unused/unfinished/undocumented libraries that have not been updated in a long time, and others are just empty namespace squatters — a tactic I was forced to resort to in reserving the name of my library until launch. I guess it was inevitable that a good NPM library name would become as hard to acquire as a good .com domain, but it’s still frustrating. Speaking of namespace..._Emojispace!_ After seeing the emoji branding succcesses of popular 2017 libraries [Styled Components 💅](https://www.styled-components.com/), [Glamorous 💄](https://github.com/paypal/glamorous), and [Downshift 🏎️](https://github.com/paypal/downshift), I decided that my library needed an emoji to go with it. I have been very nervous that someone might steal the one I chose (months ago) before launch, which has been very motivating! Okay, now on to the announcement…..
Final Form Banner
## 🏁 Final Form Today I am launching a new form library, called [🏁 Final Form](https://final-form.org/). It’s based on the [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern), so observers can subscribe to receive updates for either form or field state changes. Each observer must explicitly define _which_ parts of the state they want to be notified about, and they will _only_ be called when the parts they have subscribed to have been changed. It has **zero** dependencies, is framework agnostic, and weighs in at 💥 **3.5k** gzipped 💥.
React Final Form Banner
## 🏁 React Final Form Of course it had to come with a companion library, [🏁 React Final Form](https://final-form.org/react), which is a thin wrapper around 🏁 Final Form that allows it to be used in React. And when I say thin… it weighs in at 💥 **2.2k** gzipped 💥, for a combined weight of **5.7k** gzipped. It has no dependencies, and only two peer dependencies: 🏁 Final Form and React…..as the name would suggest 🙄. ## Problems with Redux-Form: ✅ Solved! 1. **🙂 Is it only for React?** Nope! There’s nothing stopping anyone from implementing a 🏁 Final Form wrapper in Angular, Ember, Vue, Preact, Elm, ReasonML, TheNextHotness™, etc. 2. **😊 Do I have to use Redux?** Nope! State is canonically kept inside the 🏁 Final Form instance, and the React components know when to rerender by calling `setState()` when they are notified of a state change. 3. **😀 Can I use inline render functions?** Of course you can! It’s almost 2018, for Pete Hunt’s sake! And to paraphrase a prominant thoughtleader of the React community: > “OMG!! Render functions! RENDER FUNCTION ALL THE THINGS!!!11one11" > > –– Michael Jackson Both the `` and `` components use the three ways of rendering that I have humbly stolen from the awesome rival library, [Formik](https://github.com/jaredpalmer/formik#formik-render-methods), by [Jared Palmer](https://twitter.com/jaredpalmer). Brilliant idea. You can either pass a component, a render prop, or a render function to the children prop ([see docs](https://final-form.org/docs/react-final-form/types/FormProps#render)). 4. **😍 It’s only 5.7k gzipped? 21% the size of Redux-Form? AWESOME!** Lean and mean. 😎 ## What does it look like? People familiar with the Redux-Form syntax should feel right at home, in fact many custom component libraries that have been adapted for Redux-Form should Just Work™ in 🏁 React Final Form. I will eventually write a Migration Guide, but I haven’t gotten around to that yet. August 2019 Update: [Migration Guide!](https://final-form.org/docs/react-final-form/migration/redux-form) Simple Example — No custom inputs ## Roadmap 🏁 Final Form is not yet up to feature parity with Redux-Form. For example, at launch, it’s missing the concept of `` to edit an array of values (**EDIT:** `` functionality [released 7 days after this post](https://erikras.com/blog/final-form-arrays-and-mutators) and `` to edit several fields in a single component. Nor does it have some of the more esoteric features such as `autofill`. I plan on being a little more willing to say, “No, I will not implement your specific feature,” with this library, to minimize its complexity and surface area. I suspect that most edge cases that previously required a new Redux action could be managed within React state. I very much look forward to working with others who want to wrap 🏁 Final Form into another view framework, or even other implementations of 🏁React Final Form. One suggestion: get in early if you want to be the dominant library (see first paragraph). ## Conclusion I cannot wait to get feedback from the community; I have learned so much from you all in my years with Redux Form. ❤️ I do plan on continuing to maintain Redux Form. If you’ve built a huge enterprise application on top of Redux Form, don’t worry; I’m not going anywhere. But maybe you could try out 🏁 Final Form on the next form page you build? 🙏 Thanks for reading. Go install it, star it, and give it a try! 🎉 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Final Form – Field Arrays and Mutators]]> https://erikras.com/blog/final-form-arrays-mutators 2017-12-04T00:00:00.000Z { changeValue(state, name, () => undefined) } /** Converts a form value to uppercase **/ const upper = ([name], state, { changeValue }) => { changeValue(state, name, value => value && value.toUpperCase()) } const form = createForm({ onSubmit, mutators: { clear, upper } }) ... form.mutators.upper('foo') ... form.mutators.clear('foo') ``` These are dumb examples, but what else does this allow? Well, for one, it allows….. ## Field Arrays Everyone doesn’t need to include the code for field arrays in their bundle, but for those that do….. Introducing: ## [🏁 Final Form Arrays](https://final-form.org/arrays) This library ([687 bytes gzipped](https://bundlephobia.com/result?p=final-form-arrays@1.0.0)) contains mutators for performing array operations on form values in 🏁 Final Form. ```js import { createForm } from "final-form"; import arrayMutators from "final-form-arrays"; // Create Form const form = createForm({ mutators: { // potentially other mutators here ...arrayMutators, }, onSubmit, }); // push form.mutators.push("customers", { firstName: "", lastName: "" }); // pop const customer = form.mutators.pop("customers"); ``` And of course it needs a companion: ## [🏁 React Final Form Arrays](https://github.com/final-form/react-final-form-arrays) This library ([1.7 kB gzipped](https://bundlephobia.com/result?p=react-final-form-arrays@1.0.0)) consists of a `` component that very closely mimics the functionality of [Redux Form's `` component](https://redux-form.com/7.2.0/examples/fieldarrays/), providing a fields object that is very array-like, with methods like `forEach`, `map`, `push`, `pop`, `shift`, `splice`, etc. When you iterate through it, it gives you the array-syntax strings (e.g. `foo[0]`) for the array value in your form, ready to be used with the `` component. An example is worth 1,024 words… ## Going Forward I have some other ideas of functionality that can be provided by mutators, and I’m sure you do, too. They could provide some very powerful features to your forms in the future, without imposing feature bloat on applications that just need a simple login and account form. As always, feedback welcome! Thanks for reading. ❤️ ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Final Form — Decorators, Calculated Fields, and Warnings]]> https://erikras.com/blog/final-form-decorators 2017-12-11T00:00:00.000Z In object-oriented programming, the **decorator pattern** is a design pattern > that allows behavior to be added to an individual object, either statically or > dynamically, without affecting the behavior of other objects from the same > class. In terms of 🏁 Final Form, a decorator is just a function that takes the form object, subscribes to it somehow, and returns a function that can be called to “undecorate” (undo all of its subscriptions). This allows a decorator to listen for changes and enact side-effects. This simple pattern allowed me to write a [45 line](https://github.com/final-form/final-form-calculate/blob/master/src/decorator.js) — and those are post-[Prettier](https://prettier.io/) lines! — library to perform realtime calculations between fields, not unlike a spreadsheet. ## [🏁 Final Form Calculate](https://github.com/final-form/final-form-calculate) This library creates a 🏁 Final Form decorator based on a set of calculation rules you provide. Here’s what it looks like: ```js import { createForm } from "final-form"; import createDecorator from "final-form-calculate"; // Create Form const form = createForm({ onSubmit }); // Create Decorator const decorator = createDecorator( // Calculations: { field: "foo", // when the value of foo changes... updates: [ { // ...set field "doubleFoo" to twice the value of foo doubleFoo: (fooValue, allValues) => fooValue * 2, }, ], }, { field: /items\[\d+\]/, // when a field matching this pattern changes... updates: { // ...sets field "total" to the sum of all items total: (itemValue, allValues) => (allValues.items || []).reduce((sum, value) => sum + value, 0), }, } ); // Decorate form const undecorate = decorator(form); // Use form as normal ``` Here is a live demo showing what this looks like. Kind of a silly example, but there are valid use cases for this feature. ## [🏁 Final Form Set Field Data](https://github.com/final-form/final-form-set-field-data) This library is a trivial little thing that provides a mutator that set any arbitrary metadata for a field. You use it like this: ```js import { createForm } from "final-form"; import setFieldData from "final-form-set-field-data"; // Create Form const form = createForm({ mutators: { setFieldData }, onSubmit, }); form.mutators.setFieldData("firstName", { awesome: true }); form.registerField( "firstName", (fieldState) => { const { awesome } = fieldState.data; // true }, { // ...other subscription items data: true, } ); ``` Why would you want this? Well, for one, it allows you to create….. ## ⚠️ Field Warnings ⚠️ Way back in September of 2016 — in the horrible Dark Times before Prettier–a user and prolific contributor to Redux-Form submitted [a pull request](https://github.com/erikras/redux-form/pull/1780) for a feature that never would have occurred to me. He needed fields to have what he called “warnings”, which are just like synchronous validation errors, but they don’t prevent submission. The way it was implemented was the way new features are often added to software: by taking the existing validation pipeline and duplicating all the methods and data structures to create a warning pipeline. It worked perfectly, of course, but as is often the case with code duplication, it created problems in the future, where someone fixed a bug in the error-handling code, but not in the mirror image _warning_-handling code. And, of course, it wasn’t long before someone came along and said, “You know, it’d be cool if we could set, just, like, any arbitrary metadata on a field that we want, maaaan.” With the ability to set arbitrary metadata into fields provided by `final-form-set-field-data`, coupled with the subscription-based form state paradigm of 🏁 Final Form, it becomes trivial to implement your own warning system. Behold: ```jsx const WarningEngine = ({ mutators: { setFieldData } }) => ( // FormSpy lets you listen to any part of the form state you want. // If you provide an onChange prop, FormSpy will not render to the DOM. { setFieldData("firstName", { warning: values.firstName ? undefined : "Recommended", }); setFieldData("lastName", { warning: values.lastName ? undefined : "Recommended", }); }} /> ); ``` This component subscribes to the form values, so its onChange function gets called every time they change, and it sets or removes a warning value in the fields. All you have to do is include this somewhere inside your form — after all the fields, so that they are registered when onChange is called the first time. Here it is in action: (tab through the fields to see the warnings appear) ## Conclusion My goals with 🏁 Final Form is to be as lean and flexible as possible. Rather than implementing a feature like field arrays or field warnings or calculated fields directly in the core library, the core library allows ways for them to be implemented outside, so that each application can only use the tools and pieces it needs, and unforeseen use cases can be implemented for their specific project and not for all. What interesting form features can you imagine building? Happy coding, y’all. ❤️👩‍💻👨‍💻 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Final Form goes to TypeScript]]> https://erikras.com/blog/final-form-to-typescript 2025-06-07T00:00:00.000Z Final Form is more or less feature complete. It handles a huge portion (> 95%) of form use cases, and those use cases haven't changed in the eight years since I wrote it. Nor will they. Form state management will still be the same general shape of problem even when our great-grandkids are filling out their Space Academy applications. Values, validation, dirty, touched, submission errors, etc. The UI frameworks will change, but the underlying form state won't. As far as I know, Final Form remains one of only two framework agnostic form state solutions (the other is the brand new [TanStack Form](https://tanstack.com/form), which solves the same problems in a similar way). ### Complaints People have been contacting me lately asking me to mark the library as dead or at least update it to modern, say, React 19, standards. For years my response has been, "Volunteers welcome!", but it turns out no one _really_ wants to help, [certainly not a corporation](https://erikras.com/blog/open-source-sustainability). In a recent [response on Github](https://github.com/final-form/react-final-form/issues/1045#issuecomment-2853580304), I said: > It is true that: > > - I am no longer _actively_ maintaining FF. > - An unattended `package.json` _will_ develop cobwebs. > > However, it's also true that: > > - The code still works. > - IMHO, RFF is still the most ergonomic way to manage form state in React. > - For the first time ever, I'm actually consuming RFF at my day job. > > I would love to hand the keys to the chapel over to a responsible young monk > who will come in and sweep the floors and clear the cobwebs every so often. > Any volunteers? As per usual, this response received only crickets chirping. But the more I thought about it, the more I liked my cobwebs metaphor.
Cobwebs in a Church
If only there were a way to find junior developers that would work for little or no money and keep working until all the linting and tests pass! Rather than an intern to sweep the floors, what if there were like, some sort of... _robot_ vacuum?! ## LLMs to the rescue! It's 2025! We've all got an army of junior devs at our fingertips!
Robot monks sweeping
So I set about asking LLMs to convert Final Form from Flow to TypeScript, and it went better than I could have expected. Of course, it helped that long ago I had put in all of the legwork to have near 100% test coverage, so I could be certain that the migration did not introduce any bugs. Now that the code is modernized, I feel less apathy towards maintaining it, so I hope to be more attentive in the future, though I am not promising anything. In total precaution, I am bumping all the versions as if this were a breaking change, even though I'm 99.9% sure that it isn't, unless you were relying on the flow types, and in that case, you work for Meta and can build your own 🤬 internal form library. | Library | Version | | ----------------------------------- | ----------------------------------------------------------------------------------------------- | | `final-form` | [`v5.0.0`](https://github.com/final-form/final-form/releases/tag/v5.0.0) | | `final-form-focus` | [`v2.0.0`](https://github.com/final-form/final-form-focus/releases/tag/v2.0.0) | | `final-form-calculate` | [`v2.0.0`](https://github.com/final-form/final-form-calculate/releases/tag/v2.0.0) | | `final-form-arrays` | [`v4.0.0`](https://github.com/final-form/final-form-arrays/releases/tag/v4.0.0) | | `final-form-submit-listener` | [`v2.0.0`](https://github.com/final-form/final-form-submit-listener/releases/tag/v2.0.0) | | `react-final-form` | [`v7.0.0`](https://github.com/final-form/react-final-form/releases/tag/v7.0.0) | | `react-final-form-arrays` | [`v4.0.0`](https://github.com/final-form/react-final-form-arrays/releases/tag/v4.0.0) | | `react-final-form-arrays` | [`v2.0.0`](https://github.com/final-form/react-final-form-listeners/releases/tag/v3.0.0) | | `react-final-form-html5-validation` | [`v2.0.0`](https://github.com/final-form/react-final-form-html5-validation/releases/tag/v2.0.0) | ❤️ Thank you for reading, and thank you all for bearing with me during these years. 🫶 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Finite State Machines in ReScript]]> https://erikras.com/blog/finite-state-machines-in-rescript 2021-03-22T00:00:00.000Z It eliminates a whole class of bugs! 👆 This is a phrase that has come out of my mouth very often in the last couple of years since being baptized into the Holy Church of TypeScript. I have spread the Good Word far and wide, and even created a meme which I have used multiple times on PRs with my team. 1308736441753767937 ## ReScript [ReScript](https://rescript-lang.org), the artist formerly known as BuckleScript and Reason, takes "It eliminates a whole class of bugs" to the next level. Quoth the docs: > ReScript has **no** pitfalls, aka the type system is "sound" (the types will > always be correct). e.g. If a type isn't marked as nullable, its value will > never lie and let through some undefined value silently. **ReScript code has > no null/undefined errors.** Okay, you have my attention! I read through the docs [one day](https://twitter.com/erikras/status/1370007991202758657) like it was a _Jack Reacher_ novel, very excited to see the sort of tradeoffs ReScript was making. In my n00b experience so far, the interop edges where ReScript must consume – moreso than provide – third party JavaScript libraries feels a bit awkward...at least more awkward than modern 2021 TypeScript which has huge community support (so the comparison is not really fair). Since acquiring this itch, I've been looking for a simple example project to try out my ReScript skills. ## Twitter's "Follow" Button Last week, I noticed an interesting thing about the "Follow" button on Twitter's webapp. Rather than having four states, `not-following`, `following`, `not-following-hover`, and `following-hover`, it actually has _five_! There's a special state when you've just clicked "Follow", but are still hovering over the button. 1372838015656136708 **Perfect!** This is a job perfect for a state machine, and also tiny enough that maybe I could implement it in ReScript! At the time of this writing, there are virtually zero search results that come back for "XState ReScript". There is one article about ReScript and state machines called [Modelling domain with state machines in ReasonML](https://dev.to/margaretkrutikova/modelling-domain-with-state-machines-in-reasonml-n29), from almost a year ago by [Margarita Krutikova](https://twitter.com/rita_krutikova), in which she mentions XState, but codes in ~~ReasonML~~ ReScript. That is what I shall attempt to do, as well. One could imagine a ReScript interop layer for XState existing (ReXState? 🦖), but it doesn't seem to at the moment. ## "Follow" Button State Machine I admit to usually rolling my eyes at the point of David 🎹's talks where he recommends: > Start with a sheet of paper or a whiteboard, and draw out the states you need. "I can see the Matrix and visualize all the states just looking at the code", I think smugly to myself. However, this time, darned if he wasn't right! I struggled with considering all the interactions writing just code (plus, this coding language is foreign to me), so I found great benefit in drawing up my state machine by hand first. Of course I used [Excalidraw](https://excalidraw.com/), not paper – I'm not a caveman! Follow Button Finite State Machine The clicks without hovering are there for completeness (and maybe accessibility?). Notice that from `not-following-hover`, it's pretty hard to get to `following-hover` (with red background and "Unfollow" text), when you would think would be the next state; you have to: 1. Click 2. Mouse out 3. Mouse over again ## ReScript Implementation ### Types Let's start with our types: ```reason type state = | Following | FollowingHover | FollowingNeverMouseOut | NotFollowing | NotFollowingHover type event = Click | MouseOver | MouseOut type style = Highlight | Danger | Hover | None ``` The actual Twitter "Follow" button doesn't have a style for `NotFollowingHover`, but I decided to improve on that and make a `Hover` style. ### `getText()` What should the text of the button be in each state? Notice that you can "fall through" just like you can with a `switch-case` statement in JavaScript if you leave out the `break`. ```reason @genType let getText = (state: state) => { switch state { | NotFollowing | NotFollowingHover => "Follow" | FollowingHover => "Unfollow" | Following | FollowingNeverMouseOut => "Following" } } ``` Notice the `@genType`. One fun fact that made me want to attempt adopting ReScript is that: **_IT GENERATES TYPESCRIPT TYPES FOR YOU_!!!** 🤯 It's not the most beautiful TS ever, but it gives you the typings and then defers the calls to the generated JavaScript. For example, here's an excerpt of the TypeScript the code above generated: ```ts // tslint:disable-next-line:no-var-requires const followButtonBS = require("./followButton.bs"); // tslint:disable-next-line:interface-over-type-literal export type state = | "Following" | "FollowingHover" | "NotFollowing" | "NotFollowingHover" | "FollowingNeverMouseOut"; // tslint:disable-next-line:interface-over-type-literal export type event = "Click" | "MouseOver" | "MouseOut"; // tslint:disable-next-line:interface-over-type-literal export type style = "Highlight" | "Danger" | "Hover" | "None"; export const getText: (state: state) => string = function (Arg1: any) { const result = followButtonBS.getText($$toRE161065015[Arg1]); return result; }; ``` However, more interesting, is the JavaScript that it generates. Check this out: ```js function getText(state) { switch (state) { case /* FollowingHover */ 1: return "Unfollow"; case /* NotFollowing */ 2: case /* NotFollowingHover */ 3: return "Follow"; case /* Following */ 0: case /* FollowingNeverMouseOut */ 4: return "Following"; } } ``` All nicely documented so you can follow along. ### `getStyle()` Now we declaratively define how the state relates to the style (think, "CSS class") of the button. ```reason @genType let getStyle = (state: state) => { switch state { | FollowingHover => Danger | Following => Highlight | NotFollowing => None | NotFollowingHover | FollowingNeverMouseOut => Hover } } ``` Pretty similar to `getText()`. Notice that the "fifth state", `FollowingHover`, is special in both functions. ### The Machine Here's where it gets fun! The machine is a simple mapping from state to state via events. This is just the code that represents the arrows in the drawing...nothing more. ```reason @genType let machine = (. state:state, event: event) => switch state { | NotFollowing => switch (event) { | Click => Following | MouseOver => NotFollowingHover | MouseOut => state } | NotFollowingHover => switch event { | Click => FollowingNeverMouseOut | MouseOut => NotFollowing | MouseOver => state } | FollowingNeverMouseOut => switch event { | Click => NotFollowingHover | MouseOut => Following | MouseOver => state } | Following => switch event { | MouseOver => FollowingHover | Click => NotFollowing | MouseOut => state } | FollowingHover => switch event { | MouseOut => Following | Click => NotFollowingHover | MouseOver => state } } ``` ...which compiles nicely – in milliseconds! – to this efficient JS code: ```js function machine(state, $$event) { switch (state) { case /* Following */ 0: switch ($$event) { case /* Click */ 0: return /* NotFollowing */ 2; case /* MouseOver */ 1: return /* FollowingHover */ 1; case /* MouseOut */ 2: return state; } case /* FollowingHover */ 1: switch ($$event) { case /* Click */ 0: return /* NotFollowingHover */ 3; case /* MouseOver */ 1: return state; case /* MouseOut */ 2: return /* Following */ 0; } case /* NotFollowing */ 2: switch ($$event) { case /* Click */ 0: return /* Following */ 0; case /* MouseOver */ 1: return /* NotFollowingHover */ 3; case /* MouseOut */ 2: return state; } case /* NotFollowingHover */ 3: switch ($$event) { case /* Click */ 0: return /* FollowingNeverMouseOut */ 4; case /* MouseOver */ 1: return state; case /* MouseOut */ 2: return /* NotFollowing */ 2; } case /* FollowingNeverMouseOut */ 4: switch ($$event) { case /* Click */ 0: return /* NotFollowingHover */ 3; case /* MouseOver */ 1: return state; case /* MouseOut */ 2: return /* Following */ 0; } } } ``` ## Demo Time The following button (pun intended) is written using the logic described above, with the actual JavaScript compiled from ReScript.
Notice how there are two states where it reads "Following", the one right after you've clicked it, and the button is still gray, and the one after you've moused away and the button is purple. So concludes my first of what will hopefully be [many posts about ReScript](/blog/categories/rescript). Feel free to follow me on Twitter as I ask questions from people smarter than myself and get help learning this promising language. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Focus On Errors 🧐]]> https://erikras.com/blog/focus-on-errors 2018-03-19T00:00:00.000Z “How can I focus on the first field that has an error?” Merely asking this question demonstrates a perceptive level of UX intelligence. Clearly it’s an order of magnitude better to actually take a user to the problem spot rather than just tell them “There’s an error up there somewhere. Scroll up and try to find it!” Here’s the answer I usually give: > Well, that’s a tough problem, because calling focus() on an input requires > having direct access to the DOM instance, and [form library] does not have > that; all [form library] does is provide a `value` and `onChange` (and other > listeners) to you, the developer that actually renders the ``, and > there is no good way for you, who may have a DOM reference to the input, to > give that back to [form library] to allow [form library] to call focus() on > the DOM element. 🙄 Just typing that practically put me to sleep. Yawn! 😴
Sleepy...zzzz
## 🤔 Can we do better? It ocurred to me that, at least in DOM-land (sorry React Native folks!), we have this ancient structure which, like Seinfeld — _“What’s the deal with render props?!”_ — dates back to the early 1990’s, that modern web developers might not know about. Did you know that _document.forms[0][0]_ will give you a reference to the first input on the first form on your page? Or, that if you give your form a name, e.g. ``, that you can iterate through an `HTMLCollection` of its inputs at `document.forms.foo`? 🤯 So, maybe a higher level form library can gain access to the input DOM elements, as long as they are given the name value that matches the field name the form library knows about? --- 🥁 🥁 🥁 Introducing, the alliterative… ## 🏁 Final Form Focus 🧐 [🏁 Final Form Focus 🧐](https://github.com/final-form/final-form-focus) is a decorator for 🏁 Final Form. That means that you just import it and plug it in, and it does all the rest. There is only one possible change in configuration: in the interest of future proofing it and maybe allowing non-DOM platforms, like React Native, to take advantage of it, you may provide a `getInputs()` function that will give a list of “focusable inputs” (i.e. objects with a `name` property and a `focus()` method) that correspond to the fields in your form. For those of us in DOM land, you can omit that parameter and it will default to searching through your `document.forms` structure and will "just work". Whenever your form is submitted and the submission fails due to synchronous, asynchronous, or submission validation errors, the first input on the page that has a `name` prop that matches the path to an error will have `focus()` called on it. What does it look like? Well, if you’re using 🏁 React Final Form, you just add the decorator like this: ```jsx import React from 'react' import { Form, Field } from 'react-final-form import createDecorator from 'final-form-focus' const focusOnErrors = createDecorator() ... ... inputs here ... } /> ``` Step 1: Add the decorator to your form. Step 2: There is no Step 2! Let’s see it in action: ## Vanilla JS Code For those of you that have arrived to this post by googling “how to focus on the input with the first validation error” (_Look, ma! I’m SEOing!!_), or looking to add this functionality to your own form solution, this is all it takes: ```js function focusOnFirstError(formName, hasError) { const form = document.forms[formName]; for (let i = 0; i < form.length; i++) { if (hasError(form[i].name)) { form[i].focus(); break; } } } ``` `hasError()` is a predicate that returns truthy if a field has an error ## Conclusion Almost none of the web forms — or native forms, for that matter — I use on a daily basis are sophisticated enough to bring focus to the first field with an error, and thus introduce friction and frustration into the user experience. Implementing “focus on first error” manually on every form is quite difficult, e.g. keeping track of all the DOM refs, sorting them by which is first on the page, and examining the error structure at submission to determine which one to focus on. But now, with 🏁 Final Form, there is a pluggable way to get that functionality _**on every form you write**_. ❤️ Thanks for reading, and I look forward to your feedback! ❤️ ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Should we follow Observables?]]> https://erikras.com/blog/follow-observables 2021-03-19T00:00:00.000Z > Now we are getting to one of the more dangerous perceptions — that podcasts > cost money. This is a flat out misconception, but it’s one that _we_ created > with our continual insistence that people “subscribe” to our show. With the > exception of a YouTube channel, you pay for things you subscribe to — > magazines, satellite radio, HBO, the fruit-of-the-month club. The listeners we > have may understand that podcasts are largely free. But many of The [millions > of Americans who do not listen to podcasts] do not. How interesting! This immediately resonated with me because a year or two ago, I wrote a talk to discuss my JavaScript library [🏁 Final Form](https://final-form.org) at a conference. I mentioned how what really set 🏁 Final Form apart from the competition was the use of the [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern), which allows the library consumer fine grained control over rerenders via _subscriptions_. You can _subscribe_ to exactly which parts of form state you'd like to be notified about when they change. I sent my talk proposal off to be reviewed by a non-technical person who was offering to broker a deal with the conference organizers to get my talk accepted. She wrote me back and said, "I don't think they will accept your talk if you're going to be hocking a paid subscription service." 🤯 The twGo meanings of the word had never once occurred to me! In the same way that we took the old magazine/newspaper "tell me when something is new" nomenclature for blogs and podcasts, we had done the same thing with `Observable`s. I used the word "subscribe" because [RxJS did](https://rxjs.dev/api/index/class/Observable#subscribe-), and the ["pub-sub" pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern) long predates Rx. This got me thinking... perhaps it's time to deprecate the word "subscribe" in our code as well as in our social networks? I don't really love `follow()`, but perhaps that's so ubiquitous in other realms that it's the way to go. The other obvious words that occur to me are `listen()` and `observe()`, evoking our senses of hearing and vision. What do you think? Hit me up on Twitter to discuss... I'll be \_\_\_\_\_\_\_\_ing [to] your tweets. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Guide to the Internet]]> https://erikras.com/blog/guide-to-the-internet 2023-08-01T00:00:00.000Z Figure 1 Figure 1

There is an Internet access service in Charlotte, North Carolina called VNet Internet Access. VNet provides a UNIX interface. The people that are members there are very kind and willing to help on any subject. VNet has wonderful menu-driven text and mail editors (see E-mail). VNet is a fast and user-friendly system. If you aren't familiar with UNIX, you can find a book on UNIX commands in most libraries and bookstores. For an individual account the cost is $25 per month. Another account in the same family costs only $10 per month. This includes two free hours every day during "peak" times. "Peak" times are from 2:00 PM to midnight. All other times are free. The monthly payment entitles you to up to 2 megabytes of storage space in your area on the network. Any more than 2 megabytes and you will be charged 25¢ per megabyte per day. To become a member on VNet Internet Access Service, call, by modem, (704) 347-8839. Type "new" at the login prompt (see Figure 2). To set up an account by voice, call (704) 374-0779.

Figure 2 Figure 2

## How do I find the information? There are many ways of finding information on the Internet. Two of the best and easiest ways are Gopher and Archie. ### GOPHER Gopher really has nothing to do with rodents. Gopher is a coined phrase that is short for go-fer or go-for, because it goes for things. Gopher is a huge web of menus. Most computers attached to the Internet have a Gopher system. The menus start out at very broad topics and get more and more detailed as you choose items that better represent the topic you are interested in. If the information that you requests gets too detailed for the computer Gopher system that you are on to handle, then you get transferred to another Gopher system that specializes in that topic. #### SYNTAX On most computers, you can just type "gopher" at your prompt. This will run the Gopher system that is on the computer that you are using. Another helpful syntax of Gopher is like the Telnet command (see Telnet). Unlike Telnet, you don't need to have a password or a login name at that certain computer. If a computer has a Gopher system, and you know its telnet address, you can go ot that computer's Gopher system by typing "gopher <telnet address>". This command is the equivalent of logging in to that machine and typing "gopher". ### ARCHIE Archie is a command that is used to find the location of information. The Archie command searches over 600 computers to find out if each one has any information on the topic. Archie is the quickest and easiest way to find a file on a certain subiect. Archie is easy to understand too. If you just type "archie" at your command prompt, the computer will display a list of other commands and switches that can be used with the archie command (see Figure 3).

Figure 3 Figure 3

To search for a specific string, type "archie <strings>". For example, to search for any information on baseball and have the computer display each location of information on its own line, you would type "archie -l baseball" (see Figure 4).

Figure 4 Figure 4

Once you find out the location of the information, you are ready to go get it. Let's go get it! ## How do I get the information? There are two main ways to go places on the Internet. You can either go by Telnet or FTP. There are four things you need to be able to "telnet" or "FTP" to another computer. You need an Internet access. You have to know the Telnet address or IP address of a host computer. Most of the time you need a valid login name and password for Telnet, and sometimes for FTP. ### TELNET Telnet is a way of moving your control from one computer to another on the Internet. Telnet is easy to use once you understand the Telnet address system. #### TELNET ADDRESSES The telnet address for the internet access called _The WELL_ that we talked about earlier is well.sf.ca.us. To the average person this is just a bunch of letters and periods, but to the experienced Internet user, this means a lot. Let's decipher this thing. > `well.sf.ca.us` Okay. From the first part, _well_, we can tell what the name of the computer or organization that this is the address is for: _The WELL_. From the last part, _us_, we can tell what country the computer is located: the United States. From the third part, _ca_, we can tell what state, the computer is in: California. Finally, from the second part, _sf_, we can guess that it is located in San Francisco. Not all Internet addresses are this simple. Most, in fact, are nothing but letters and periods, unless you have some idea of what or where they are. For example, can you tell what this is the address to? > `locis.loc.gov` Let's take it apart. The _gov_ at the end must mean that it is a government organization. _Locis_ might be the name of the computer, but that doesn't help us much. Hmmm. What could _loc_ mean? Could it mean Library of Congress? **Yes!** This is the address of the Library of Congress in Washington, DC! The address of the VNet Internet Access that we have talked about earlier is _char.vnet.net_. The _net_ at the end stands for network. The vet stands for the name of the organization. And the _char_ stands for Charlotte, because the location of the network is in Charlotte, NC. Now, we have gone from a bunch of letters and periods to a detailed description of the computer. _char.vnet.net_ is a network named VNet in Charlotte, North Carolina. Some other standard Telnet address suffixes are:
com Commercial A company or other commercial organization.
edu Education A college, university, or other educational institution.
gov Government A federal, state, or local government site.
net Military A military site such as the U.S. Army.
mil Network Gateways or other hosts in a network.
org Organization A private organization such as a non-profit group, a foundation, or other association.
Some Telnet addresses have suffixes that tell what country the computer is located in. Some example suffixes are:
au Australia il Israel
ca Canada nl Netherlands
de Germany fi New Zealand
fi Finland se Sweden
fr France tw Taiwan
jp Japan uk United Kingdom
kr Korea us United States
#### SYNTAX To actually go to and control a computer using the Telnet command, type "telnet <telnet address>". To "telnet" to _The WELL_, for example, from another computer on the Internet, type "telnet well.sf.ca.us" (see Figure 5).

Figure 5 Figure 5

## IP ADDRESSES Sometimes you are only given a set of numbers to contact a system. Then what? The computer doesn't actually use the Telnet address. It uses something called an IP address. The IP address really is a set of numbers and periods. Each computer on the Internet is numbered. Its number is its IP address. To make the addresses easier for humans to understand and remember, the computer translates it to what we know as the Telnet address. If you know the IP address of a computer and you don't know the Telnet address, you can "telnet" to a computer by typing "telnet <IP address>". For example, "telnet 198.93.4.10". The WELL's IP Address is 198.93.4.10. So typing "telnet 198.93.4.10" is the same as typing "telnet well.sf.ca.us". Another example of an IP address is 140.147.254.3. This is the IP address of Library of Congress. As we mentioned earlier, the Telnet address of the Library of Congress is _locis.loc.gov_. The IP address and Telnet address of a computer can usually be used interchangeably. ## FTP FTP stands for File Transfer Protocol. FTP is a way of transferring files from one computer to another. Telnet is to FTP what a sports car is to a U-Haul truck. Every once and a while, while using Telnet, a computer will offer to let you download a file. With FTP, you go to a computer and can download almost any file. #### SYNTAX FTP is used like Telnet. To go to a computer via FTP, simply type "ftp <telnet address>" (see Figure 6). If you have an account on the computer that you are "FTP"ing to then you can get rights to more files at that system. If you don't have an account there then you have to use a technique called Anonymous FTPS. With most FTP hosts, you can type "?" at the FTP prompt and get a list of commands (see Figure 6). For more information on a certain command, type "? <command>" (i.e. "? get").

Figure 6 Figure 6

The _dir_ command tells you what is in the directory that you are in. The command _cd_ changes directories. The _get_ command is used to get files. For example, if you wanted a file called _b.clinton_, you would type "get b.clinton". To upload a file, or send a file to the host computer, you would have to go to the directory with the file on the remote computer, before using the FTP command. Once you had logged on to the host computer, you would use the _send_ command. For example, you could type "send b.clinton". To disconnect from a host computer, type "close". To disconnect and leave the FTP prompt type "quit" or "bye". ## ANONYMOUS FTP There are several things that you need to have before you can use the technique called Anonymous FTP. You need an Internet access with FTP, a valid E-mail address (see E-mail) and a host computer that will let you use Anonymous FTP. With Anonymous FTP, you don't need a login or password at a host FTP computer. The syntax for the FTP command is the same ("ftp <telnet address>"). When you have connected to the host computer, and it asks you for a login name, type "anonymous". When it asks you for a password, type in your E-mail address. When you type in your E-mail address, it wil not echo on the screen, so you have to be careful when typing in in. This technique lets you download public files. The computer wants to know your E-mail address so that if there is a problem with a download or something, then it can send you E-mail about it. Usually there is no use for any more rights than the basic "anonymous" rights. Anonymous FTP is probably the most popular form of downloading files. ## How do I communicate with others on the Internet? Communication is an important feature of the Internet. Not only can you get information from computers around the world, but you can send information to people around the world. Many companies that do business internationally and nationally use the Internet system to send information to their clients. Others use the Internet as a huge social structure. Some people have dozens of friends that they write little short messages to every day. You can even send mail to the President or the Vice President of the United States. The system that is used to send mail around the Internet is called E-mail. ### E-MAIL (ELECTRONIC MAIL) Imagine having the U.S. Mail service, UPS, or Federal Express being able to send things at the speed of light. You could do all of your Christmas shopping on the 23rd! Using a technology called fiber optics, the Internet system can send E-mail at the speed of light. One computer sends a set code of quick, little flashes of light through a piece of glass thinner than a human hair, and another computer on another continent reads those flashes of light and translates the flashes into letters and numbers for a human to read. Fifty pages of information or a long letter could be sent in about a second using this technology. #### SYNTAX There is no syntax of E-mail that will work on every system. You really have to learn the mail system on the computer that you will be mailing from. Most mail systems are compatible. For example, if I use my mail system and send a message via Internet to you at your mailing system, you should receive the message exactly as I sent it even if your mail system is completely different from mine. Most mail programs ask you for an E-mail address (see E-mail Addresses), and a subject of the message. Some ask you more (i.e. carbon copies, etc.). Messages can be written in any form; sometimes a business style is more appropriate, and for other purposes a more personal style may be better. There are several mail-reading techniques that can be used. A quick way, and one that saves time, is to copy each message to a file and then download the file to your own computer. After reading or printing the message, you can write your reply in a word processor or simple text editor. Then you can upload the message to your Internet access computer and read the file into your reply through the mail system. Some mail services won't let users use this method, but most will. This is an easy and money-saving technique that is highly recommended. Of course, you can also just read and reply to your messages while you are on-line. ### E-MAIL ADDRESSES E-mail addresses are really very simple to understand. An E-mail address is a person's login name combined with the Telnet address of the computer that they are a member on. The login name and the Telnet address are separated by an _at sign_ ("@"). For example, say you know someone at _The WELL_ named George (this name is not real). His E-mail address would be: > `george@well.sf.ca.us` This system is used with all Internet addresses all around the world. There are several ways to find out someone's Internet address. The easiest and most obvious way to find the address of someone you know is to call them by voice or mail them and ask them. Unfortunately we can't do that for everyone. Most Gopher systems have some kind of Address Finder. With these systems, you give the computer all the information you know about a person, and it tries to locate the person's E-mail address. The Internet is a vast network of networks of information. The Internet can be used in many ways, from finding information on past micro-biology experiments to writing a letter to your best friend in Australia. Almost anyone can use the Internet. It all comes down to Telnet Addresses. If you understand Telnet addresses, then you can understand almost all parts of the Internet. --- ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[The HOC Drill Pattern]]> https://erikras.com/blog/hoc-drill-pattern 2016-04-27T00:00:00.000Z Most such libraries are polite enough to pass through any props that they do not use as parameters down to your wrapped component, but sometimes they will not provide a way, e.g. getWrappedInstance, to access instance methods on your wrapped component. What can you do? How can you get through this barrier? ## Concrete Example Let’s lay out a concrete example. Your MyWrappedComponent has instance methods of load(), save(), and clear(), and you need buttons in your MyContainer to be able to call these. ```jsx // MyContainer.js import React, { Component } from "react"; import MyWrappedComponent from "./MyWrappedComponent"; export default class MyContainer extends Component { constructor() { // bind handlers this.handleLoad = this.handleLoad.bind(this); this.handleSave = this.handleSave.bind(this); this.handleClear = this.handleClear.bind(this); } handleLoad() { // somehow call load() on MyWrappedComponent } handleSave() { // somehow call save() on MyWrappedComponent } handleClear() { // somehow call clear() on MyWrappedComponent } render() { return (
); } } ``` ```jsx // MyWrappedComponent.js import React, { Component } from "react"; import { hocLibrary } from "some-hoc-library"; @hocLibrary({ config: "parameters" }) export default class MyWrappedComponent extends Component { load() { // load something } save() { // save something } clear() { // clear something } render() { return
Gorgeous UI
; } } ``` How can MyContainer drill through the HOC to call methods on `MyWrappedComponent`?
Wrapped Components Diagram
This HOC is tough! ## Callback Drill Because our HOC allows us to pass props down through it, we can pass a callback that will give our container component references to the wrapped component’s instance methods. Let’s see that in action. When the inner `MyWrappedComponent` is going to be mounted, it sends up the API that it wants to expose to `MyContainer`. ```jsx // MyContainer.js import React, { Component } from "react"; import MyWrappedComponent from "./MyWrappedComponent"; export default class MyContainer extends Component { constructor() { // bind handlers this.handleCallback = this.handleCallback.bind(this); } handleCallback(load, save, clear) { // save instance methods from MyWrappedComponent to this this.handleLoad = load; this.handleSave = save; this.handleClear = clear; } render() { return (
); } } ``` ```jsx // MyWrappedComponent.js import React, { Component } from "react"; import { hocLibrary } from "some-hoc-library"; @hocLibrary({ config: "parameters" }) export default class MyWrappedComponent extends Component { componentWillMount() { this.props.methodCallback( this.load.bind(this), this.save.bind(this), this.clear.bind(this) ); } load() { // load something } save() { // save something } clear() { // clear something } render() { return
Gorgeous UI
; } } ``` ## Conclusion It is a little messy, but breaking through barriers often is. I have used this pattern on several occasions, and it works well. One important side note: If your wrapped component might be unmounted while your container remains, to prevent a memory leak, you should “unregister” the instance methods via another callback in `componentWillUnmount()`. Happy coding! ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Final Form: Form state management via Observers]]> https://erikras.com/blog/holy-js-moscow-2018 2019-03-19T00:00:00.000Z fxEW4jgoX-4 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[You're a Wizard Form, Harry.]]> https://erikras.com/blog/infobip-shift-2021 2021-09-09T00:00:00.000Z 0bY9_DasGEg The slides can be found{" "} here , and the code here , if you so desire. ## Photos

Pre-talk Selfie Obligatory Pre-talk Selfie

Front Row Groupies My front-row groupies: Tomasz Łakomy, Jenny Truong, Jacob Paris, David 🎹, and Kent C. Dodds.

360º Crowd 360º Crowd. Photo by Shawn Wang.

Panorama It was a huge venue! Photo by Shawn Wang.

Flow I ended with a pitch for my new employer, Centered. Photo by Shawn Wang.

Speaker's Dinner We had a speakers dinner in an abandoned church, where I enjoyed the company of Atila Fassina, Misko Hevery, Kent C. Dodds, and Ives van Hoorne.

Ives and Kitze Me with the legendary Ives van Hoorne and Kitze.

]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[💡 IDEA: JavaScript Compatibility as a Service]]> https://erikras.com/blog/javascript-compatibility-as-a-service 2018-04-16T00:00:00.000Z 🔥🔥🤯🔥🔥 --- ## Introducing... Nah, I'm just kidding. I haven't built this. I have too many other startup irons already in the fire. I'm just throwing it out there as a "Wouldn't it be cool?" product idea, but I promise I'll be a customer if _you_ build it. It seems like it would be easiest for someone with the infrastructure in place already, like _CloudFlare_ or _DigitalOcean_, to implement, but I bet a leaner company could handle it with a moderate cloud storage plan. ## A few things to consider - You'd need to have to be _very_ confident in your User-Agent-to-browser-feature mapping. You can't make many mistakes there. - Ideally you would automatically detect what esoteric features, e.g. `Symbol` or `for...of`, are being used in the code to know if you need a polyfill or not, but you could also do feature checkboxes on a settings screen. - You might also consider pulling the code from a Github branch. 🤷‍♀️ - Doing all bundle versions lazily (on first request) might not be the optimal solution; it would require some thinking and testing. - You could maybe provide source maps to people that had an auth cookie for your website. - Might be a good idea to have a "dev mode" that puts in some error tracking code, like _Rollbar_ or _New Relic_ do, to detect edge cases when your `User-Agent`-to-browser-feature mapping wasn't up to snuff. ## Conclusion The minimum step in this direction would be an open source library for the Express middleware with a detailed description of how to tailor existing build tools to output browser-specific bundles - like [this](https://gist.github.com/newyankeecodeshop/79f3e1348a09583faf62ed55b58d09d9), but as a published lib. I'd also be grateful to learn of something like that. If you know of one, or have just finished building it after being inspired by this article, [@ me on Twitter](https://twitter.com/intent/follow?screen_name=erikras). And if you don't want to build this and get filthy rich, but think it might make everyone's experience better on the web, maybe share this until it finds someone who _does_ want to build it. ### Updates - [@Raathigesh](https://twitter.com/Raathigesh) on Twitter [pointed me](https://twitter.com/Raathigesh/status/985827397030129664) towards [Polyfill.io](https://polyfill.io), a service from _The Financial Times_, that "reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser." And it's [open source](https://github.com/Financial-Times/polyfill-service), too! 👍 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Abstracting Form State with Redux Form]]> https://erikras.com/blog/js-channel-2016 2016-08-02T00:00:00.000Z eDTi7lYR1VU ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Modern Forms in React]]> https://erikras.com/blog/jsdc-2019 2020-02-07T00:00:00.000Z dIhODcA1Tv4 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Model Based E2E Testing with State Machines]]> https://erikras.com/blog/model-based-e2e-testing 2023-06-05T00:00:00.000Z Ropa Vieja and Queso Asado Ropa Vieja and Queso Asado

Afterwards, we actually did want to try the meat, so we ordered one _solomillo_. In Spanish, the word "_solomillo_" is used for both beef sirloin steak and pork tenderloin, the beef usually being way more expensive. This meat was _so_ tasty and juicy, we were genuinely unclear as to whether we were eating beef or pork. We confirmed with the waiter that it was pork, and someone at the table exclaimed, "_¡Menudo cerdo, tío!_" ("Man, what a pig!")

Pork Tenderloin Solomillo de Cerdo (Pork Tenderloin)

Rather than present us with a dessert menu, the waiter just brought us three of their homemade desserts. When we couldn't eat or drink any more (we'd had 6 liters of local red wine), we went to pay. There had never been any mention of prices, of course (no menus 🙄). When the waiter told us 66€, our reaction was, "That's actually not a bad price for what we ate!", assuming it was 66€ _each_. I mean, just the wine should cost that much! But when he clarified that it was 66€ _in total_, we were astonished! I've placed a digital pin on the map, so I can find that place every time I go back to Tenerife. Wow! ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Modeling React in XState]]> https://erikras.com/blog/modeling-react-in-xstate 2022-06-24T00:00:00.000Z "I wonder if I could test my knowledge of React and state charts, and model > the React lifecycle methods in a state chart?" 🤔 So I gave it a try! ## React Lifecycle State Chart

React Lifecycle State Chart Elegant, ain't it?

One thing that immediately jumped out at me was how all the lifecycle methods – and `render()` itself! – ended up being side effects, or "actions" in XState parlance. This makes total sense, as they really are _where you put side effects_! > Rendering is a side effect! ### The Code This is the XState machine that the visual editor generated: ```js import { createMachine } from "xstate"; export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxysA6AWQIFdrIBiAVXKKesVDNgBLLIIp8QAD0QBaAIwAGAGw0ALAE4AHPICsigMxrFi+RqMAaEAE8ZAJhsaaAdm0qVsmyb12bamwF8-C1RMXEJSCipaBmYsNgA5MAB3HAAFACcCEngkEAFhUXJxKQRpNxsaeVk9FUc1Xz09DTttC2sS-WUG9wbtbUdXWUcAoPRsfGIySmp6HliIVgBlMFwFrDRY8TyRMRzi2SqaRTVHE3t+tS7HVplFDxofBUUVDQ1ZC5tZYZBgsbDJyJmMTYADECGkMGAcOwSBB1mBNgQhNtCrsZAp5DRZC4zvI9I4DPtriVtC8aGoVDZtLImoZHI4ngFAiByAQIHBxD9QhMItNoiwIDRUOQ2WlIAikQUijJapj8U19iSVLpZCoidI9L0KvJ5EqdQTNEovpzxuEplFZmKcltJaiSio9MpKtVavVGs01S8MV07I4fJoLiojaMuaaAZxuECIOL8jtQHs8WT5fI7KY3eYrLYsU4XColIZFNofP4mca-jysNHkVK7cYKlUanUbA0mpS1XUvXp3DZatVc7JFIy-EA */ createMachine({ description: "made by @erikras", initial: "Mounted", states: { Mounted: { entry: [ "constructor", "getDerivedStateFromProps", "render", "componentDidMount", ], initial: "Rendered", states: { Rendered: {}, }, on: { Unmount: { actions: "componentWillUnmount", target: "Unmounted", }, "New Props": { actions: ["getDerivedStateFromProps", "render", "componentDidUpdate"], cond: "shouldComponentUpdate", target: ".Rendered", }, "Set State": { actions: ["render", "componentDidUpdate"], cond: "shouldComponentUpdate", target: ".Rendered", }, "Force Update": { actions: ["render", "componentDidUpdate"], target: ".Rendered", }, }, }, Unmounted: { type: "final", }, }, id: "React Component", }); ``` The crazy comment at the top is how the visual editor encodes the location of all the boxes and arrows and whatnot, so if you open this exact file in the editor, the layout will be the same. Clever, huh? Of course, because [I tweeted it](https://twitter.com/erikras/status/1539984775523475457), I got [a clever response/challenge](https://twitter.com/donavon/status/1540112177515970567), from my friend, Donovan: > Nice. Now do this one. with a link to [this chart](https://github.com/donavon/hook-flow) he, his son, and Dan put together three years ago:

React Hooks Lifecycle React Hooks Lifecycle

I couldn't turn down such a challenge, now could I? ## React Hooks State Chart It actually didn't take me long at all to whip up this one. Although React hooks, as an API, is full of footguns with which to shoot yourself, the actual mental model of what is happening is simpler than the lifecycle methods.

React Hooks State Chart React Hooks State Chart

With this one, I took the additional step of imagining we were actually implementing it as an XState state machine, where we could have to save the props, state, and context into the machine's context (that's the XState term for the internal storage of the machine). ### The Code ```js import { assign, createMachine } from "xstate"; export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxzdBkAhwAkCCBrWHAMQBsCB3AOgCyBAK7VIfVOQhgATpADEABRkESbPAAs05GIlBlYASyyGKekAA9EAWgAsAdgAMfewGYAnK9e3XARgBs7v6OrgA0IACeNvYATPZ8tgAcMX7BjgH+9r4AvtnhqJi4hKQUVLQMTKwc3PxColjiktJyEPIAylhoDfhaOmDmBsam5OZWCHb+iXzuvgCsvr6J7rY+7u724VHj-r7u0zGJib5uwa7+B7n56Nj4xGSU1Dh0jCxsXLyCImIQElTNCoQxBYir1dEgQIMTGZwWM7PYpnEVolzjFbLNXEdNjZ5lMfPYso5-LZHGtZjFLiACjdivcyk8Kq9qh86t95ABVchEL5YAYEIxQkYwxD2WZ8SaxWKuRwxYJJXxY7Zk6azFU7HZJFX2XJ5EDkAjSeDgqlFO6lR7PSpvGqfeqNP6ySC8-nDUY2A6uaZHEW+Ry+1zo1wbSLRGIxBIHI7pUNrGUU423EoPcovKrvWrcx3gyEuoXjWbSviIpIotEY+XB8aJeYJZKpX0ZLJx64mxN0i2MtN8Dlc20QJ1DaGgMa2fx8ZFSvy+Ym+QOzWwK6yzI58RxkxyJJKuGJT3ZNwoJ2nmhmpmr9gWuvMywv2JEl9GYivWIK+GspUMi-xz-za7JAA */ createMachine( { description: "made by @erikras", initial: "Mounted", context: { props: {}, state: {}, context: {}, }, states: { Mounted: { entry: "Run Lazy Initializers", initial: "Rendered", states: { Rendered: { entry: [ "Render", "Cleanup Layout Effects", "Run Layout Effects", "Browser Paints Screen", "Cleanup Effects", "Run Effects", ], on: { "Props Change": { actions: "setProps", }, "State Change": { actions: "setState", }, "Context Change": { actions: "setContext", }, }, }, }, on: { Unmount: { target: "Unmounted", }, }, }, Unmounted: { type: "final", }, }, id: "React Component – Hooks Flow", }, { actions: { setContext: assign({ props: (_context, event) => event.props }), setProps: assign({ props: (_context, event) => event.props }), setState: assign({ props: (_context, event) => event.props }), }, } ); ``` ## Conclusion Am I trying to reimplement React using state machines? Hell no! But this exercise _has_ served to benefit my understanding – and maybe yours too? – of how React works, how to model flows in state charts using Stately's visual editor, and how to read and understand state charts. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Creating an Observable Subject in ReScript]]> https://erikras.com/blog/observable-subject-in-rescript 2021-03-30T00:00:00.000Z Observables are lazy Push collections of multiple values. They fill the > missing spot in the following table: > > | | Single | Multiple | > | ---- | :--------: | :----------: | > | Pull | `Function` | `Iterator` | > | Push | `Promise` | `Observable` | They can represent streams of data or a series of events over time. I like to use them to notify interested parties to changes of values (a.k.a. "state") over time. My favorite kind of observable is called a Subject. Back to the [RxJs docs](https://rxjs.dev/guide/subject): > A Subject is like an Observable, but can multicast to many Observers. Subjects > are like EventEmitters: they maintain a registry of many listeners. I like to think of a Subject sort of like a physical object on a table. Vizualize a Rubik's Cube on the desk in front of you. You can look at it and see its position. If I go and move it, as soon as I do, _if you're still looking at it_, you will immediately know its new position. But if you look away, I can change it a lot and you won't know until you look back at it. ## The Perfect Exercise Creating a Subject is a nice exercise to try when learning a new programming language, as it requires: - Passing functions as arguments - Adding to a data structure of items - Iterating through a data structure of items - Removing items from a data structure So what a great task to tackle in my online learning of ReScript! --- Due to [recent musings](/blog/follow-observables), I'm going to use the verb `listen()` rather than `subscribe()`. --- ## Types The most important contract with observables is that the `listen()` function returns a function to "unlisten", to unregister the listener. We're going to define our `unlisten` type, our `listener` type, and a record type that keeps a unique `id` along with our `listener`. This is to tell them apart for unlistening. ```reason type unlisten = () => unit type listener<'value> = (. 'value) => unit type listenerId<'value> = {id: int, listener: listener<'value>} ``` Remember that `unit` is like `void` in TypeScript Now let's define the shape of our Subject... Sometimes you can have a Subject and you want to know what its value is without subscribing to all future updates – a "glance" at the Rubik's Cube, if you will. One way to do this, following the strict Observer pattern, is to quickly listen and unlisten. In JavaScript, that would look like: ```js let value; subject.listen((v) => (value = v))(); // ^^-- immediately unlisten ``` But that's gross, and the internal implementation always has the value anyway, so I like to provide a simple `get()` function on my Subjects. ```reason type subject<'value> = { listen: listener<'value> => unlisten, get: unit => 'value, set: 'value => unit, } ``` Notice our Subject is strongly typed with a [Type Parameter](https://rescript-lang.org/docs/manual/latest/type#type-parameter-aka-generic), also known as a "Generic" in other languages. All type parameters are prefixed with a `'`, which I learned the hard way, [_is not a backtick_](https://twitter.com/erikras/status/1372857612442726402)! `unit` is like `void` in TypeScript. Okay, I think we're ready to attempt the... ## Implementation A few things to notice for non-ReScript folks: - `let` bindings, by default, are immutable (like `const` in JS/TS), but you can [make them mutable](https://rescript-lang.org/docs/manual/latest/mutation#mutate-let-binding) by surrounding them with `ref()`, and then access the value with `myRef.contents`. Any React devs will find this nearly equivalent to the `useRef()` and `myRef.current` API that React provides. There is some syntax sugar that means that `myRef.contents = 7` can be written as `myRef := 7`. - The `open Js.Array2` line "opens that module" into my current scope so that I can use `forEach` rather than `Js.Array2.forEach`. It's a bit like `import com.initech.frontend.js.array.*;` in Java. - Why are there [`Js.Array`](https://rescript-lang.org/docs/manual/latest/api/js/array) _and_ [`Js.Array2`](https://rescript-lang.org/docs/manual/latest/api/js/array-2) modules, with identical docs? ReScript is still a growing language that hasn't quite figured out what their API dogma is yet. If that's a dealbreaker for you, then avoid it. [Quoth the docs](https://rescript-lang.org/docs/manual/latest/api/js#jsxxx2-modules): - > ### Js.Xxx2 Modules > > Prefer `Js.Array2` over `Js.Array`, `Js.String2` over `Js.String`, etc. > The latters are old modules. - `->ignore` is required because ReScript doesn't like you calling functions that return a value and you not doing anything with it, so you have to explicitly ignore the value. ```reason export createSubject = (initial: 'value) => { open Js.Array2 let value = ref(initial) let nextId = ref(0) let listeners: array> = [] { get: () => value.contents, set: (v: 'value) => { value := v // notify all listeners listeners->forEach(({listener}) => listener(. v)) }, listen: (listener: listener<'value>) => { let id = nextId.contents nextId := id + 1 listeners->push({id: id, listener: listener})->ignore // notify listener of value on listen listener(. value.contents) () => { let index = listeners->reducei( (foundIndex, listener, index) => listener.id === id ? index : foundIndex, -1, ) if index >= 0 { listeners->removeFromInPlace(~pos=index)->ignore } } }, } } ``` When I implement this in TypeScript or JavaScript, I will often store the listeners in a `Record` rather than an array, to allow for easier removal, but it doesn't look like ReScript supports that syntax. And I wasn't paying enough attention on [Big O Day](https://en.wikipedia.org/wiki/Big_O_notation) in Data Structures 201 to know which is better. ReScript also supports linked lists, which pleases someone who still remembers what [CAR and CDR](https://en.wikipedia.org/wiki/CAR_and_CDR) are, but they aren't useful for this random access deletion needed for my Subject. I couldn't find a "remove the item for the first time this predicate is true and stop iterating" function, so rather than `filter`ing through the array (and making the reference mutable), I chose to search for the `index` (which still goes through the entire array) and then delete (mutating) with that. Thanks for reading! Comments and suggestions via Twitter are welcome! ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Open Source Sustainability]]> https://erikras.com/blog/open-source-sustainability 2020-07-01T00:00:00.000Z Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Getting a Promise from Redux Actions]]> https://erikras.com/blog/promise-from-redux-actions 2018-03-30T00:00:00.000Z How can I use `redux-saga` or `redux-observable` to submit my form via a > side-effect? I have to answer, “Well… the form library is expecting the `onSubmit` function to return a `Promise` to know when it is submitting, so...” At least with [Redux Form](https://redux-form.com/), because all of its state was managed in Redux, including whether or not the form was currently being submitted, it was possible to let users _dispatch_ the `START_SUBMIT` and `STOP_SUBMIT` actions themselves, rather than allowing Redux Form to manage that for them via the `Promise`. But, if you [take your form state out of Redux](/blog/final-form-announcement), you’re just sort of screwed…
Crying emoji
### Until now.
Sweat-Smile emoji
--- What if you had a way to create an asynchronous function that dispatched a START action when it was called, and resolved or rejected the returned `Promise` when either a `RESOLVE` or `REJECT` action was dispatched? That would totally solve this problem. Right? ## 💥 React Redux Promise Listener 💥 The name is not the catchiest on NPM, but... I’ve just released [React Redux Promise Listener](https://github.com/erikras/react-redux-promise-listener#react-redux-promise-listener), a library that solves just this problem. The API looks something like this: ```jsx {(asyncFunc) => ( ... )} ``` The `promiseListener` comes from a piece of Redux middleware that must be installed. By default, the values passed around are kept in `action.payload`, but there are config options that let you read and write those from anywhere in the actions. ## Conclusion It should be a lot easier now to use async side-effect Redux libraries with other async components, like routers, that were built on the assumption of Promises being “how async is done” in Javascript. ❤️ Enjoy! ❤️ ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[A practical guide to Redux Form]]> https://erikras.com/blog/react-alicante-2017 2017-11-08T00:00:00.000Z ey7H8h4ERHg ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Next Generation Forms with React Final Form]]> https://erikras.com/blog/react-alicante-2018 2018-09-19T00:00:00.000Z WoSzy-4mviQ ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Modern Forms in React]]> https://erikras.com/blog/react-au-2020 2020-03-04T00:00:00.000Z v1JAUiqskiw ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[React Beyond the DOM]]> https://erikras.com/blog/react-beyond-the-dom-2025 2025-12-31T00:00:00.000Z UKdhU4S216Y You can also watch the [Alicante](https://vimeo.com/reviews/87d87007-8c91-4daf-b0a5-ec96feb8d5f4/videos/1128472877), [New York City](https://gitnation.com/contents/react-beyond-the-dom-3054), [London](https://gitnation.com/contents/react-beyond-the-dom) versions, or watch a [20 minute podcast interview](https://www.youtube.com/watch?v=U1uVgm8PzQI&pp) I did about it. I'm embarrassed to say that it took me halfway through the year before I came up with the line, "And it wouldn't be a React talk with _props_!!" line as I pulled out the light bulbs. As I have often been asked after giving it, all the code from talk, both projects, can be found [here](https://github.com/erikras/react-html-to-markdown). Thank you for reading, and I hope to see you in 2026! ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Render Props are Not Dead]]> https://erikras.com/blog/react-europe-2020 2020-05-16T00:00:00.000Z pn0pIgdQvhU ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 React Final Form HTML5 Validation]]> https://erikras.com/blog/react-final-form-html5-validation 2018-03-27T00:00:00.000Z “Why not add this functionality directly into the officially bundled `Field` > component?” Good question. The reason is that not everyone needs this functionality, and not everyone is using 🏁 React Final Form with the DOM (e.g. some people use it with React Native). Therefore it makes sense to make this a separate package. This version of `Field` is a thin wrapper over the official `Field` component, and the only `Field` API that this library uses/overrides is the field-level validate prop, so even if you are using this library’s `Field` component, you will still get improvements as features are added to the 🏁 React Final Form library in the future. > "How to use it?" Well, first you change this: ```js import { Field } from "react-final-form"; ``` to this: ```js import { Field } from "react-final-form-html5-validation"; ``` All the regular API of `Field` stays the same, except that now you can pass in props like `maxLength={25}` or `required` and, optionally, messages to display when those rules are broken, e.g. `tooLong="Be more concise!"` or `valueMissing="You need to answer this"` respectively. All of these prop names are taken from the [HTML5 Specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), so if you have staff already trained to the standards, they should pick it up right away. ## What does it look like? Well, the error UI look slightly different in every browser. No doubt the users of each of these browsers will recognize this format of displaying error messages.
HTML5 Validation in Safari
Safari
HTML5 Validation in Chrome
Chrome
HTML5 Validation in Firefox
Firefox And here’s the obligatory sandbox embed for you to play with… Go ahead! Play around with it! ## Conclusion HTML5 Form Validation is yet another step towards making 🏁 Final Form the most versatile, extensible form state management framework for React and beyond. Just think how pleased your boss will be when you inform her that you’ve made all your forms much more accessible! 😜 ❤️ Thanks for reading. ❤️ ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[A reducer is a single-state state machine]]> https://erikras.com/blog/reducer-single-state-machine 2021-03-23T00:00:00.000Z switch (state, event) { | (Idle(value), Increment) => Idle(value + 1) | (Idle(value), Decrement) => Idle(value - 1) | (Idle(_), Reset) => initial } ``` Notice that we are always returning to our only state, `Idle`, and our events are only modifying our context. A single-state state machine American Idle What have we created here? A simple **_reducer_**. This is the equivalent, in TypeScript, of: ```ts export const initial = 0; export function transition( state: number, event: "Increment" | "Decrement" | "Reset" ) { switch (event) { case "Increment": return state + 1; case "Decrement": return state - 1; case "Reset": return initial; } } ``` It's the kind of thing that powers Redux or what you might give to a `useReducer()` hook in React. I can hear you rolling your eyes already. ### Yeah, so what? Well, what if we wanted to temporarily disable our counter, so that the value couldn't be changed? You could add another `disabled: boolean` to your reducer's `state` value... But if you were implementing it as a state machine, you could have your `Pause` event shift the machine into the `Paused` state, where it would ignore the `Increment` and `Decrement` events. ```reason type state = Idle(int) | Paused(int) type event = Increment | Decrement | Reset | Pause | Unpause export let initial = Idle(0) export let transition = (. state:state, event:event) => switch (state, event) { | (Idle(value), Increment) => Idle(value + 1) | (Idle(value), Decrement) => Idle(value - 1) | (Idle(_), Reset) => initial | (Idle(value), Pause) => Paused(value) | (Paused(value), Unpause) => Idle(value) | (Idle(_), Unpause) | (Paused(_), _) => state } ``` These are very, very trivially simple examples, but I think there may be a significant difference "at scale" with a real application. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Redux Dead Drop]]> https://erikras.com/blog/redux-dead-drop 2016-11-05T00:00:00.000Z A **dead drop** or **dead letter** box is a method of espionage tradecraft > used to pass items or information between two individuals (e.g., a case > officer and agent, or two agents) using a secret location, thus not requiring > them to meet directly and thereby maintaining operational security. The method > stands in contrast to the live drop, so-called because two persons meet to > exchange items or information.
Book Safe
Image from{" "} Chad Chandler You already see where this is going, don’t you? The sending component needs to dispatch an action that will set some slice of the state that the receiving component is listening to. The flow goes like this: 1. User interacts with **Sender** 2. **Sender** dispatches an action to modifiy `state.deaddrop` to `true` or to any value that it wants to pass with the message. 3. **Receiver** has `mapStateToProps` with a selector for `state.deaddrop`, and thus gets rerendered with a new prop. 4. **Receiver** initiates whatever action is required. It is important to note here that the flow does not _need_ to begin with a user interaction. With the rise of asynchronous middleware like `redux-saga` and `redux-observable`, the ability to trigger any code on a component anywhere is very useful.
Redux Dead Drop Logo
redux-dead-drop logo ## Implementation I briefly considered writing a `redux-dead-drop` library, even going so far as “designing” a logo, with its own higher order reducer to enable this functionality on any reducer and a HOC to connect any component the dead drop location on the reducer, and even have it call an instance method on its wrapped component. I'm still reasonably certain that it would be possible to write, but the design pattern is so simple that it takes hardly any effort to implement it on any existing reducer, so I rejected abstraction for abstraction's sake. If you would like to try and implement such a library, help yourself to the name and logo. As in the world of covert government agents, is important that the Receiver component clear out the dead drop once the message has been received. I have used this pattern in my [`redux-form`](https://redux-form.com) library to enable the triggering of a form submission via the dispatch of an action. This allows the form component to know about how it needs to be submitted and validated, but also allows any actor in the entire application to trigger the submission. This post will self destruct in 5…. 4…. 3…. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[State Machines on the Edge]]> https://erikras.com/blog/remixconf-2022 2022-06-24T00:00:00.000Z r4xI6LPf6iQ The slides can be found{" "} here , and the code here , if you so desire. ## Photos

The audience during my talk The audience during my talk. I had the perfect slot, right before the morning coffee break.

View from the back The view from the back. That's Kent C. Dodds' pink sleeve on the far left, furiously live tweeting.

Fisheye from the stage Fisheye from the stage.

Heroes and friends A few of my heroes that I now call friends, Tanner Linsley, Jenny Truong, Matt Pocock, David Khourshid, and Chance Strickland.

Michael Chan and Chance Strickland Photogenic lads, Michael Chan and Chance Strickland.

Van Selfie We morbidly joked about what a loss to the JavaScript community it would be if this van crashed.

Scooter Crew John Lindquist lent some scooters to Jenny Truong, Matt Pocock, David Khourshid, and me to ride around his neighborhood.

Smash Burgers Jason Lengstorf taught me the meaning of "smash burgers", and my life will never be the same.

## Salt Lake City – Aerial Shots

Flying into Salt Lake City As an East Coast boy whose never been to the rocky mountains, the terrain around Salt Lake City was gorgeous!

Salt Lake Apparently they have a big – dare I say "great"? – lake of salt there.

]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Coding in Flow]]> https://erikras.com/blog/renderatl-2022 2022-07-19T00:00:00.000Z nyxI1RsF49c ## Photos

High-Rise Selfie Speaker and Sponsor Brunch was hosted on the umpteenth floor of a downtown high-rise

Cocktail Ken Some sort of spicy volcanic cocktail across from the inimatable Ken Wheeler, one of the conference speakers I was most looking forward to finally meeting.

Atlanta Sunset Atlanta Sunset

Ken, Ben, and Jay Close runners up to Ken on my want-to-meet list were Ben Lesh and Jay Phelps. We were instant friends.

Outdoor Stage The outdoor stage seemed like a good idea, but we were in Atlanta in June, and it was hot! No one could stand to be in the grassy area, so everyone was very far from the stage.

Bar Smores with Joe and Facundo New friends made: Joe Previte and Facundo Giuliani. Also: Bar Smores!!!

Selfie with Fardeem Also at the conference was my colleague at Centered, Fardeem Munir, whom I had met in person once before.

Smash Burgers My new Polish friends, Aleksandra, Piotr, their boss, Brandon, and some other people that agreed to have a shot of Polish vodka. These three are dear to my heart because they are fans of my Final Form library. 😍

]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[🏁 Ripple Final Form]]> https://erikras.com/blog/ripple-final-form 2025-10-04T00:00:00.000Z It's like Esperanto for frontend. When playing with Ripple, every time I went to the docs with an "I wonder if it supports...?" question, the answer was not just "Yes", but "Yes, and that API is surprisingly nice!" The API, however, is still in constant flux. The code I wrote a week ago working on this no longer works, and likely what I'm showing today will not work next week. **_THIS IS NOT PRODUCTION READY!_** The metaphor that comes to mind is a polar bear walking on ice that has not yet solidified. Polar bear walking on ice That said, let's look at what I've built! ## Proof of Concept The primary component is one called `RippleFinalForm`, which creates a Final Form instance, saves it to the context, and then renders a `
` component with its `children` inside it. Then the inputs and error components are connected to the Final Form instance via the `ref` syntax. ```typescript export component App() { } ``` Notice that a "component" is not a "function", and it doesn't "return" anything, it just declares JSX. Also spot the `ref`s that allow attaching logic directly to the DOM nodes. I was able to implement a proof of concept that connects Ripple inputs to Final Form in [86 lines of code](https://stackblitz.com/edit/github-wqe28xcx?file=src%2FApp.ripple) (Stackblitz). ### Cool, now what? My instincts tell me that Ripple might actually be capable of toppling the React Empire, but it's going to take a lot of work to get there. **DO** check out [the docs](https://github.com/trueadm/ripple) and learn how Ripple does things. **DO** play around with it and submit issues and pull requests. **DO NOT** (yet, in October 2025) use this anywhere near production. Remember, form state – and much of frontend state – has nothing to do with UI frameworks. Choose a headless solution and it just might outlast your UI framework. Thank you for reading. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Solid Final Form – Proof of Concept]]> https://erikras.com/blog/solid-final-form-poc 2022-11-26T00:00:00.000Z Form State is framework independent. ## Solid JS I've been hearing rumors of this new React competitor getting more and more popular. I'd glanced at it a few times, but at a recent conference, I got to meet the creator, and generally sense the wind of interest headed in its direction. The "no virtual DOM" and "reactivity" claims are incredibly intriguing. [insert React is not [reactive](https://en.wikipedia.org/wiki/Reactive_programming) joke here] What really put me over the edge to attempt what I'm about to present to you is realizing that Solid lets you tack on "directives" to your JSX, which are little functions that get to manipulate the DOM directly, a benefit of not having a virtual DOM. This could make a very interesting way to connect inputs to a form management library. Especially if there were a form state management library that were framework agnostic... 🤔 ## Proof of Concept What I'm about to show you is an example of what a Solid Final Form library _might_ look like. It calls `useForm()` to create a form instance and expose its API. Potentially all form state could be exposed via Solid's [signals](https://www.solidjs.com/docs/latest/api#createsignal). From the docs: > Signals are the most basic reactive primitive. They track a single value > (which can be any JavaScript object) that changes over time. In this proof of concept, I have only exposed `values` and `isSubmitting`, but Final Form has a [veritable plethora](https://final-form.org/docs/final-form/types/FormState) of other form state it manages. `useForm()` also gives us two [directives](https://www.solidjs.com/docs/latest/api#use___), `field` and `error`. To connect an input (i.e. attach blur, change, and focus listeners) to Final Form, we: 1. Throw a `use:field` directly on the `` 2. There is no step 2, you're done already! 3. How fun are `
  • ` gags? The `field` directive reads the `name` prop on the `input` and knows what field it is. To show errors, we don't have a `name` prop, so we have to tell the `error` directive with: ```jsx ``` Here's the full form component: ```tsx export const App: Component = () => { // Create Form const { error, field, handleSubmit, isSubmitting, values } = useForm( onSubmit, initialValues, validate ); // Calculated Signal const formattedValues = () => JSON.stringify(values(), undefined, 2); return (

    Solid Final Form 🏁

    {formattedValues()}
    ); }; ``` In this [100-line proof of concept](https://codesandbox.io/s/agitated-maxwell-7jpnxw?file=/src/useForm.tsx), what are the features we're getting? - Realtime client side validation (as you fix errors, they go away) - Tracking if a field is "touched" (focused and then blurred) to only show the error if a user has visited the field _or attempted to submit the form_ - Blocking submission when there are validation errors - A signal to tell us if the form is being submitted - None of that "Is the whole form rerendering? Waaahhh!! 😭🍼" nonsense that React gives us - Render props? What are those?? - A robust battle-tested framework (300k weekly downloads) for managing our form state ## Sandbox ## Future At the time of writing, this is just a fun Saturday morning fun project. I don't really feel like I have the bandwidth right now to pursue maintaining another open source library, but I'd be happy to work closely with anyone who would like to take this and run with it. You can find me [on Twitter](https://twitter.com/intent/follow?screen_name=erikras). ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Solid for React Developers]]> https://erikras.com/blog/solid-for-react-developers 2023-06-05T00:00:00.000Z The Kaseya Center The speakers' hotel was right across the street from where the Miami Heat play. On the second day of the conference, they hosted, and were beaten by, the Boston Celtics.

    The day before the conference, I spent the entire day with a soon-to-be good friend, [Alexandra Spalato](https://alexandraspalato.com), a French woman who lives on the Spanish island of Mallorca. Both being expats in Spain, we had a ton to talk about. She had the brilliant idea of visiting Little Havana, a gorgeous little _barrio_ of Miami full of Cuban culture. We then felt obligated to check out the famed Miami Beach, but both living near good beaches, we were very underwhelmed. The pelicans were cool, though.

    Me and Alexandra at lunch Lunch with Alexandra.

    Cuban Fajitas Cuban fajitas for lunch. Just like Mexican fajitas, but instead of tortillas, it's crispy banana cakes.

    ## Infobip Shift Miami – 2023

    The venue Look at this disgusting venue! 🌴🌴🌴🌴🌴

    The conference itself was great! Much like how it's nice to transition back and forth between sandals and sweaters as the seasons change, it's refreshing to alternate between single-track and multi-track conferences. So it was nice to know that there was only ever one talk going on at this one. I tried to attend most of them, both for knowledge, but also for emotional support for my fellow speakers. It's so nice to have someone in the front row nodding when you're behind the podium. There were three talks that really stood out to me. The first was from [John Romero](https://twitter.com/romero), the creator of [DOOM](), on the timeline of how they created a genre-defining masterpiece in a fury of development effort that can only be mustered in one's twenties. I especially appreciated how, despite being in Texas at the time, they modeled all the weapons after toys they found in Toys Я Us. My favorite part of seeing him was getting to talk to him afterwards, and telling him how, as a school project in high school, a friend and I modeled our school in a DOOM level editor, somehow got teachers into the racquetball court (white background) to pose in all 32 (64?) poses to generate sprites for them, and then we ended up with a DOOM level that allowed the player to walk around the school shotgunning teachers in the face. This was before Columbine. Everyone took it in good fun. Nowadays, you'd be #canceled for life for such abhorrent ideas.

    Me and John Romero The creator of DOOM with the harbinger of it.

    The second was from [Joyce Lin](https://twitter.com/PetuniaGray). I met her two years earlier at my first conference in Croatia, and we clicked immediately. Our senses of humor align disturbingly well. [Her talk](https://www.youtube.com/watch?v=8aHzQEgM1gg) was about the history of APIs, and, having been a web developer for 20+ years, I knew every single part of it. She did a gimmick where she gave the audience quizzes and awarded Postman swag as prizes. About halfway through, she had to tell me to STFU because I knew all the answers.

    Me and Joyce Lin Joyce Lin and I, just getting started with the tequila.

    The one that probably most blew me away was from a guy I've known on Twitter for years, named [Jhey Tompkins](https://twitter.com/jh3yy). Turns out he really does wear that hat all the time! Gotta respect his personal branding. [His talk](https://www.youtube.com/watch?v=88D6jLHFw3Q) included some crazy ambitious things, like interacting with his slides in realtime via voice and hand gestures with his phone. He concluded by showing a QR code where we, the audience, could all connect and pop up emojis and comments over his slides. Credit to the audience for being completely tasteful when we had full control to be jerks. ## My Talk My talk was one I've been thinking about giving for 6 months, ever since seeing a talk about Solid JS and meeting its creator, Ryan Carniato, at [[a disaster of a conference](https://blog.tomayac.com/2022/11/23/modern-frontends-live/)] in London last November. I find Solid extremly interesting. Hence my blog posts about [Solid Final Form – Proof of Concept](https://erikras.com/blog/solid-final-form-poc) and [XState in Solid](https://erikras.com/blog/xstate-in-solid). As a React developer by profession, I figured I had a unique perspective to explain Solid to other React devs. The day after the conference, as a result of a "what to do in Miami" search, I took a boat tour of celebrity houses. I saw the mansions of Antonio Banderas, Jackie Chan (which is available on Airbnb for $7k/night for 10 people), Floyd Mayweather, Celia Cruz, Ricky Martin, DJ Kali, Puff Daddy, JLo, Will Smith, Rihanna, David Beckham, Gloria and Emilio Estefan, and Fisher Island, with no bridges, where property is owned by Tom Cruise, Julia Roberts, and Oprah.

    Miami skyline selfie Miami skyline selfie.

    Rainy sunset plane There was a fantastic Florida lightning storm in the distance as I waited to board my plane back to the Olde Worlde.

    Thank you so much to the Infobip Shift team for knocking another conference out of the park. It was an amazing experience. 💙 ]]>     Erik Rasmussen rasmussenerik@gmail.com https://erikras.com     <![CDATA[iOS Detective: The Case of the Stolen iPhone]]> https://erikras.com/blog/stolen-iphone 2018-09-17T00:00:00.000Z My flight was boarding. I walked towards my gate and saw a line of about 25 people scanning their boarding passes. I looked down at my watch to see the time to get an idea of if I would make my next flight, and… _My watch was connected to my phone!!_ One of the most useful features on the Apple Watch is the ability to make the iPhone it’s paired with emit a loud beeping sound, even if it is in silent mode. I’ve lost count of the number of times it has helped me locate my phone between the couch cushions. I quickly swiped up and hit the “Ping” button. Ears wide open, amidst the airport bustle… I heard nothing. _Shit!_ Then it occurred to me that my iPad might have a better Bluetooth range than the Watch, so I pulled out my iPad (wifi only, not cellular), which I had recently had attached to the phone’s Personal HotSpot. After a moment of searching, push notifications started rolling in. It was connected!! I opened up the _Find iPhone_ app, which was ironically using the wifi hotspot of the iPhone I was searching for to hit iCloud to ask the iPhone for it’s GPS location to pass back to me through iCloud and then through the phone’s wifi to me. There it was, on the map, very close to me. Before searching, I tapped the “Lost Mode” button, and it asked me to enter a phone number to display on the device. I struggled to remember my home landline phone and typed it in. > The search was on! To try to orient myself on the map, I walked 10 meters in one direction, but both the little dots were bouncing around in unpredictable ways. I turned 90º and walked another 10 meters. The dots seemed to be closer! I kept walking, frantically searching the crowd of anonymous faces. In the movie version of this story, the camera would be whirling around the protagonist as he searched the crowd for a person he couldn’t identify. You know the trope. As I was walking in the direction that made the dots closer, an airline employee stopped me. “Sir, you can’t go past this security checkpoint.” I explained that I had lost my phone, but that I knew it was around here somewhere. She asked if I’d like to report it to the police, and I expressed some doubt that I had time for that, since I was about to board a flight, but it turned out the police had a little kiosk very close by. I explained the situation to the cops, and they said, have you tried to make it ping? I said yes, but that I hadn’t heard it. They said, “Do it again.” I did, this time via the _Find Phone_ app, which I think emits a louder ping. > WE HEARD IT!! The three police officers jumped out of their little kiosk and said, “Again!” I tapped it again. It was coming from the other side of the security barrier! The cops raced through a door through the barrier not open to the public, and I followed. > PING! We turned to see a man at the front of a long queue about to board a flight, holding my phone. “Is that it?”, asked the cop. “Yes!”, I said, as I swiped it from the man’s hand. “I called the number it said to call!”, shrugged the British man, in English. (I did later confirm that I had a missed call on my landline phone from my phone at that time) I thanked the police profusely and ran off towards my gate. I grabbed my bags and fumbled for my boarding pass and walked down the corridor towards my plane. _So relieved!_ But of course the corridor was full of passengers waiting to get on the bus to take us to the plane. I started up my podcast again and breathed a long sigh. And [tweeted about the incident](https://twitter.com/erikras/status/1041391205542711296), of course. 🙄 1041391205542711296 A few minutes later, the airline employee that had just scanned my boarding pass came down the corridor and said the police wanted to talk to me. My face must have expressed my concern of not making the flight, and she told me that I needn’t worry, that the bus wasn’t leaving until she told the driver it was okay. The cop wanted my name, address, and info, so I gave in my ID card to copy it from. He then requested the IMEI number from the phone. Weird, but I guess he had to write it up for his report. I didn’t quite understand if they had detained the other guy or not, but I’m sure they pulled him out of the line to get his details as well. I guess the guy at least made an effort to call the owner of the phone, but he did not do the responsible thing of turning it in to the police, like I have done on several occasions, much to my own personal inconvenience, with phones and wallets. I’m sure he was hoping to walk/fly away with it. --- After some serious sprinting through the Madrid airport, my iPhone, Apple Watch, iPad, MacBook Pro, and I _barely_ caught our next flight and made it home safely. --- Thank you, Apple, for adding features like these to your operating systems. And _muchas gracias_ to the Alicante Airport police for your quick action. 🙏 ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[Building Complex UI with State Machines]]> https://erikras.com/blog/ui-with-state-machines 2024-12-16T00:00:00.000Z 6yM839PycHU The code can be found [on Github](https://github.com/erikras/search-state-machine).

    The state chart The state chart.

    ## CityJS – Athens, Greece

    The Acropolis at night The Acropolis at night.

    The Temple of Poseidon with Kadi The Temple of Poseidon with Kadi.

    All the speakers at the Temple of Poseidon All the speakers at the Temple of Poseidon

    The Parthenon The Parthenon

    ## React Alicante – Alicante, Spain

    Speakers Selfie Speakers Selfie

    Plisplay with Stately Plisplay with Stately

    Speakers' Night Out Speakers' Night Out

    ## What The Stack – Skopje, North Macedonia

    Alexander the Great Statue of Alexander the Great, the most famous Macedonian.

    The organizers, Blagica and Darko The organizers, Blagica and Darko

    ## React Africa – Casablanca, Morocco

    Hassan II Mosque Hassan II Mosque, the must-see building in Casablanca

    Interior of the Hassan II Mosque Interior of the Hassan II Mosque. As a non-muslim, I was not allowed inside.

    Colorful grains at the market Colorful grains at the market

    Speakers on a bus We took a speaker trip to Rabat.

    I am so grateful to the organizers that invited me to their conferences, [Aris](https://x.com/arismarko), [Darko](https://bsky.app/profile/darko.io), [Victoria](https://bsky.app/profile/vicqr9.bsky.social), and [Aymen](https://bsky.app/profile/aymenbenamor.bsky.social); I love you all. 🫶 What a great year! I can't wait to do it all again next year. I've already got my talk planned. Stay tuned... ]]>     Erik Rasmussen rasmussenerik@gmail.com https://erikras.com     <![CDATA[JavaScript Unsubscribe Sugar Proposal]]> https://erikras.com/blog/unsubscribe-sugar-proposal 2022-09-14T00:00:00.000Z JavaScript is an "event-driven" language. As a JavaScript developer, I spend all day "subscribing" and "unsubscribing" to events (["Follow"](https://erikras.com/blog/follow-observables) never caught on), from the user/DOM, a database subscription, or literally any other actor in the system. It is so easy, for even a veteran, senior, 10x developer to forget to call `unsubscribe()`. It's _such_ an easy footgun. And so I ask myself, > How could we make it impossible to leak memory by forgetting to unsubscribe? There are three primary ways that I see subscriptions happening in JavaScript. ## addEventHandler / removeEventHandler When you're down and dirty mucking about in the DOM, these are your tools. And it's _so_ awkward because of the instance-equality (`===`) check on `removeEventHandler`. ```ts div.addEventHandler("click", () => { alert("Nice click!"); }); // don't forget to unsubscribe! div.removeEventHandler("click", () => { alert("Nice click!"); }); ``` ❌ WRONG! Those are different functions. ```ts const onClick = () => { alert("Nice click!"); }; div.addEventHandler("click", onClick); // don't forget to unsubscribe! div.removeEventHandler("click", onClick); ``` ✅ There ya go! You had to define the function before subscribing and unsubscribing! ## on / off In my experience, this feels more node-y to me, but I think the real culprit is Our Holy Savior jQuery, that really popularized this syntax. It's less explicit than `addEventListener` / `removeEventListener`, but `on` makes sense, and "Gosh, what's the opposite of 'on'??" ```ts const onClick = () => { alert("Nice click!"); }; div.on("click", onClick); // don't forget to unsubscribe! div.off("click", onClick); ``` It suffers from the same exact problem as `addEventListener` / `removeEventListener`, namely that you've got to maintain the same instance... and also remember to actually `off` each of your `on`s. ## subscribe() returns unsubscribe() This is the most elegant of the solutions, because it's so beautifully _functional_, and you don't have to worry about instance-equality – the closures do that for you. As a library developer, it's really comfortable to use. I first noticed this with RxJS, and adopted it when I wrote [Final Form](https://erikras.com/blog/final-form-announcement). Imagine my delight when upgrading React Final Form to use React Hooks, and the API for `useEffect()` was exactly the same as my existing API! However, the problem of _remembering to unsubscribe_ is still ever-present! (These examples are going to be React-y, but the issue remains throughout the JS ecosystem) ```ts useEffect(() => { return subscribeToPosts((posts) => setPosts(posts)); }, []); ``` It's not immediately obvious from this code that there's a function being returned there. And it's even more non-obvious if you eliminate the braces: ```ts useEffect(() => subscribeToPosts((posts) => setPosts(posts)), []); ``` But what if you need multiple subscriptions in the same effect? ```ts useEffect(() => { const unsubscribes = []; unsubscribes.push(subscribeToPosts((posts) => setPosts(posts))); unsubscribes.push(subscribeToUser((user) => setUser(user))); // ... return () => unsubscribes.forEach((unsubscribe) => unsubscribe()); }, []); ``` I really wish there was a way for me to mark a function as: > I'm gonna subscribe to some stuff in here. Please return a function that > unsubscribes! # Proposal Remember what a pain working with `Promise`s was before `async`/`await`? _So_ many `.then()`s!!! It occurred to me that it might be cool if we had something similar for the ubiquitous subscribe/unsubscribe pattern. I'm going to share the first thing that occurred to me, but I'd love for us, as a community, to iterate on it. Best idea wins! ## Sugar `sub` – marks a function as "imma subscribe to some stuff", sort of like `async`. In TypeScript land, it forces that the function return a `() => void` `unsub` – marks a line that returns an unsubscribe function ## Examples ```ts useEffect(sub () => { unsub subscribeToPosts((posts) => setPosts(posts)) unsub subscribeToUser((user) => setUser(user)) // Look, Ma! I'm returning nothing! }, []) ``` The syntax sugar will take care of establishing the array of `unsubscribes` and calling them all when the function completes, ideally inside of a `finally` block. I'd like it to special case the common handler systems of before. ```ts useEffect(sub () => { document.addEventListener('keypress', () => { alert('Nice key!') }) someThing.on('download', () => { alert('One file, coming right up!') }) }) ``` There must be a way for those of you, that understand AST better than I, to transpile this into some JS that manages the requisite `removeEventHandler` and `off`. # Conclusion Of course, in the same way that your `async` won't do you much good if you forget the `await` keyword, you still have to remember the `unsub` keyword, you can still shoot yourself in the foot, but I think a syntax like this might remove a _lot_ of boilerplate from typical JS code, and fix a lot of yet-undetected bugs in our existing codebases. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[What I learned at Distru]]> https://erikras.com/blog/what-i-learned-at-distru 2021-08-20T00:00:00.000Z ## Conclusion No one at Distru asked me to write this. In fact, I'm about to ask them for permission to post it. If you're reading this, they approved. Distru is an amazing place to work, and I wanted to write down all these brilliant ideas to suggest them to every subsequent employer I ever have. If Distru sounds like the kind of place you'd like to work, I happen to know that they could really use a frontend engineer right now. [Apply here](https://www.distru.com/careers). Distru Team I'm gonna miss these beautiful faces. 💚 #muchlove ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com <![CDATA[XState in Solid]]> https://erikras.com/blog/xstate-in-solid 2022-12-08T00:00:00.000Z When you write your JSX with conditionals and props that are > [signals](https://www.solidjs.com/docs/latest/api#createsignal), Solid is able > to notice exactly which pieces of your UI depend on which signal value, and > can rerender _only that dependent UI_ when the signal value changes. When I wrote my [Proof of Concept](/blog/solid-final-form-poc) using an external state management system with Solid, I realized that I had to communicate via signals, i.e. I had to keep the state I wanted to use in the UI in a signal. This is _vaguely_ analogous to how the way to force a React component to rerender is to change some part of its state with `setState()`. > One important difference in Solid, when coming from React, is realizing that > your "render function" (the component body itself) is **ONLY CALLED ONCE** on > first render. All UI updates are dependent on signal changes _from inside the > JSX_. So let's try and plug my favorite framework agnostic state management library into Solid! ## XState The way you use XState is that you create a machine definition of your finite state machine, and then you "boot up an instance" of that machine using `interpret()`, which gives you a "service". Once you `.start()` your service, you can `.send()` events to it, and generally observe it via listeners or grabbing a snapshot of the state of the service at any given time. ### `select` The primary way that you can subscribe to one particular slice of the machine's "context" (where it stores data) is via a "selector", very much [like Redux](https://redux.js.org/usage/deriving-data-selectors). ### `matches` The way you determine what state the machine is in is with a `.matches()` function. From [the XState docs](https://xstate.js.org/docs/guides/states.html#state-matches-parentstatevalue): > The `state.matches(parentStateValue)` method determines whether the current > state.value is a subset of the given `parentStateValue`. The method determines > if the parent state value “matches” the state value. For example, assuming the > current `state.value` is `{ red: 'stop' }`: > > ```ts > state.matches("red"); // => true > state.matches("red.stop"); // => true > state.matches({ red: "stop" }); // => true > state.matches("green"); // => false > ``` ### `can` A predicate that tells you if you "can" send a given event – i.e. that the machine is currently listening for that event. Quoth [the docs](https://xstate.js.org/docs/guides/states.html#state-methods-and-properties): > The `state.can(event)` method determines whether an `event` will cause a state > change if sent to the interpreted machine. The method will return `true` if > the state will change due to the event being sent; otherwise the method will > return `false`. This is especially useful for visually disabling buttons that don't do anything right now. ### `send` A state machine isn't much good if you can't send events to it, so we're going to need to expose the `.send()` function as well. ## `useMachine()` I've written a ~~hook~~ function called `useMachine()` that takes a state machine definition and then exposes the above API to be consumed in Solid. `can`, and `matches` use signals internally, and `select` returns the actual signal to the data selected. Remember that we must use signals if we want Solid to rerender parts of our UI. Oh, and it's all strongly typed AF. This is what it looks like to consume: ```ts import { Component, Match, Switch } from "solid-js"; import { useMachine } from "./useMachine"; import { trafficMachine } from "./trafficMachine"; import "./App.css"; export const App: Component = () => { const { can, matches, select, send } = useMachine(trafficMachine); const cycles = select((s) => s.context.cycles); // defines a signal on first render return (
    Cycles: {cycles()}
    Stopped
    Started
    ); }; ``` ## State Chart Just a humble traffic light that counts how many times it's gone through `Red`. Traffic Light State Chart ## Demo Click "Open Sandbox" to dig into the actual `useMachine()` code. If you inspect the DOM, you'll see that _only the nodes that need to change are changing_. Traffic Light DOM GIF ## Conclusion This was mostly a learning exercise for me. I'd be happy to contribute this code to initiate an official `@xstate/solid` library. The Stately people, that maintain XState, know how to contact me. Thanks for reading, and I hope you learned something. ]]> Erik Rasmussen rasmussenerik@gmail.com https://erikras.com