170 Matching Annotations
  1. Nov 2020
  2. Oct 2020
    1. I use a mutator and use it's changeValue function to 'change' the value of the relevant field (I supply the same value). This in turn notifies all relevant parties of the change to the form's state, and a validation is triggered.

      Nearly duplicate annotation here: https://hyp.is/I2t56hjLEeuPXIsZG-jYog/xtzmf.csb.app/

    2. Some user experience issue with the proposed solution: This won't show up the inline field error message if you just hit on submit and other fields already contained errors since the code on the onSubmit won't be hit
    3. This is for a time picker. If you're picking times for today, you may pick a time that is 15 minutes from now. It's valid now because it's currently in the future. If you don't touch the form for the next 20 minutes then click submit, the submission should be prevented because your selected time is now 5 minutes in the past.
    1. Form Validation
    2. Form State Management
    3. return { type: "COUNTRY_BLACK_LIST", succeeded, message: succeeded ? "" : "This country is not available" }
    4. It is easily extensible (already implemented Final Form and Formik plugin extensions).
    5. React Final Forms is a great library, an enhanced version of Redux Form
    6. If you want to implement a form with a superb User Experience, you have to take care of many variables:
    7. Form validation can get complex (synchronous validations, asynchronous validations, record validations, field validations, internationalization, schemas definitions...). To cope with these challenges we will leverage this into Fonk and Fonk Final Form adaptor for a React Final Form seamless integration.
    8. Just let the user fill in some fields, submit it to the server and if there are any errors notify them and let the user start over again. Is that a good approach? The answer is no, you don't want users to get frustrated waiting for a server round trip to get some form validation result.
  3. Sep 2020
    1. I love how they have this example with plain JS to show how slim and simple it can be even when not using react and react-final-form. It demystifies things so you can see how it works and how it would be if not using React (which in turn helps you appreciate what react/react-final-form do for you).

    1. Form validation is hard. That's why there are so many different form handling libraries for the popular web frameworks. It's usually not something that is built-it, because everyone has a different need and there is no one-fit-all solution.
  4. Aug 2020
    1. Allows batch updates by silencing notifications while the fn is running. Example: form.batch(() => { form.change('firstName', 'Erik') // listeners not notified form.change('lastName', 'Rasmussen') // listeners not notified }) // NOW all listeners notified
  5. Jul 2020
  6. Jun 2020
  7. May 2020
  8. Apr 2020
  9. Mar 2020
    1. The equality of all sorts of human labour is expressed objectively by their products all being equally values; the measure of the expenditure of labour power by the duration of that expenditure, takes the form of the quantity of value of the products of labour; and finally the mutual relations of the producers, within which the social character of their labour affirms itself, take the form of a social relation between the products.

      Every form of particular, useful labor, that which directs physiological energy towards specific outcomes, is grouped under the category of "abstract labor" under capitalism. The magnitude and duration of "abstract labor" is expressed as exchange value in commodities, which brings products into reducible, quantifiable relation to each other. It is because commodities are all equal to each other insofar as they are bearers of quantifiable exchange value that so many forms of human labor are equated as different magnitudes and durations of "abstract labor" (many value-form theorists and value critics have argued that "labor" as such is not a transhistorical category, but only a category under capitalism by virtue of its being the source of exchange value). The distribution of value amongst commodities indexes and organizes the division and distribution of labor, and this is what Marx means when he writes that "the mutual relations of the producers, [...] take the form of a social relation between the products." That "social relation" is the relation between producers, which is determined by the relations of value between commodities produced for the market.

  10. Jan 2020
    1. presents

      In Ben Fowkes translation in the Penguin edition, we find "The wealth of societies…appears as."

      In the German edition, Marx uses the verb erscheint ('scheint' shares an etymological link to the English word, shine.)

      On p. 127, Marx uses the Hegelian expression, Erscheinungsform (form of appearance). In this edition, it is rendered "the phenomenal form."

      Marx uses this term to describe the way that, in order for exchange-values to present an equivalence between two distinct use-values (i.e. x corn, y silk) they must possess some common element of identical magnitude. As exchange-values, commodities "cannot be anything other than the mode of expression, the 'form of appearance' [Erscheinungsform], of a content distinguishable from it," (Karl Marx. Capital, Vol. I, p. 127)

  11. Dec 2019
    1. The beauty of using Google Sheets or another spreadsheet tool for your to do list is that you have so many formatting options. Sometimes I change the color of a cell to indicate that it's high priority. Other times I bold it. And other times I just write IMPORTANT in front of it. Whatever works. But if you like to be more consistent, you can choose colors to indicate specific things: priority, level of effort, type of tasks, or anything else you want to be able to see at a glance. For example, I always highlight a row in blue if I'm going to be out of the office. That way, I don't overschedule the week. And I highlight a row in red if it's a non-negotiable—something I have to do the day it's scheduled because of an external deadline. And because you have text formatting options—which many to do lists don't—you can make your formatting as granular as you'd like. Bold certain types of tasks, italicize others, or even add a border around cells. Whatever stands out to you visually, go with that

      Free-form text formatting has its pros and its cons.

      Pros: It's very flexible. Since it's free-form, you can ad hoc make any new system you want, and designate, say, bold or blue to mean whatever you want it to.

      Cons: No way to enforce the rules you made for yourself. In fact, it may be hard to even remember the rules you made for yourself. You may have to create a key/legend for yourself to be safe.

      This is like why I dislike software where the only way to change font is to manually choose a font. I like it better when you can define a style/class (I think Word can do this, IIRC; and obviously HTML/CSS can), choose how that class should be formatted (font, etc.) and then can style any text with that class. This is a better way to go because classes have semantic meaning. This is the same dilemma I remember facing ~10 years ago when WYM editor was fairly new: It let you select use semantic classes/elements, whereas WYSIWIG editors were the norm (probably still are) and only let you do manual free-form formatting, with no semantic meaning conveyed.

    1. It's not for beginners, but it's extremely flexible once you get a handle on things. If sticking to a system is hard for you, I highly recommend giving this system a try.
    1. There are thousands of to-do list apps out there, in part because no system works perfectly for everyone. I’m not going to say todo.txt is the exception, and that it will work for everyone, because that would be crazy. But todo.txt is the most flexible tool I’ve come across. In part, this is because of the sheer number of clients available, but also because the simplicity lends itself to improvisation.

      First time I've seen improvisation used like this.

    1. The beauty of todo.txt is that it's completely unstructured; the fields you can attach to each task are only limited by your imagination.
  12. Nov 2019
    1. So the main thing this gives us is a way to set indeterminate property of input via an indeterminate property?

      This is misnamed. Doesn't actually give us a tri-state checkbox. Just a binary checkbox.

    1. input.indeterminate = indeterminate

      So the main thing this gives us is a way to set indeterminate property of input via an indeterminate property?

      Not sure how that supposedly gives us a tri-state checkbox.

    1. Instead of using the empty_data option – which is only called if we create an object, but not if we update it – we will implement a custom data mapper. Symfony's data mappers are responsible for mapping the data of a form to its fields and back. For our MoneyType, Symfony's default data mapper will call the following methods when we display a form with an existing Money instance: $form->get('amount')->setData($money->getAmount()); $form->get('currency')->setData($money->getCurrency()); The properties of the Money are copied to the form simply by calling the appropriate getters. When we submit the form, the data mapper inverts that behavior: $money->setAmount($form->get('amount')->getData()); $money->setCurrency($form->get('currency')->getData()); That's where the data mapper fails. The setters setAmount() and setCurrency() don't exist. To create a custom data mapper we need to implement DataMapperInterface. Let's look at this interface: namespace Symfony\Component\Form; interface DataMapperInterface { /** * Maps properties of some data to a list of forms. * * @param mixed $data Structured data. * @param FormInterface[] $forms A list of {@link FormInterface} instances. */ public function mapDataToForms($data, $forms); /** * Maps the data of a list of forms into the properties of some data. * * @param FormInterface[] $forms A list of {@link FormInterface} instances. * @param mixed $data Structured data. */ public function mapFormsToData($forms, &$data); } These methods correspond to the two previous code blocks. The method mapDataToForms() calls setData() on all passed forms by reading the passed $data. Conversely, mapFormsToData() updates $data by reading the data of the passed forms.

      This is so important & useful, when working in DDD & immutability, where setters are avoided.

  13. Oct 2019
  14. Sep 2019
    1. types.refinement might be what you're looking for, you could combine that with for example react-final-form. it is not depending on redux anymore. a form component of react-final-form wrapped by an @observer and using an action within onSubmit callback of it to actually persist the state has worked out well for me recently.
  15. Aug 2019
    1. Designers can group related fields into sections. If your form has more than six questions, group related questions into logical sections. Don’t forget to provide a good amount of white space between sections to distinguish them visually.Generally, if your form has more than six questions, it’s better to group related questions into logical sections. Put things together that make sense together. (Large preview)
    2. This rule has a few exceptions: It’s helpful to validate inline as the user is typing when creating a password (to check whether the password meets complexity requirements), when creating a user name (to check whether a name is available) and when typing a message with a character limit.
    3. Ideally, inline validation messages should appear around 500 to 1000 milliseconds after the user has stopped typing or after they’ve moved to the next field.