14 Matching Annotations
  1. Apr 2022
    1. Because promise handlers aren’t immediately executed, you might imagine that they act a little like timers — giving the browser a chance to repaint and perform other important tasks before the handler is executed.

      is this because callbacks go into the callback queue ie. lower priority than the microtask queue ?

      promises and mutation observer go into the microtask queue and have higher higher priority, are DOM mutations the "important tasks" that James is refering to ??

    2. In fact, promises aren’t like timers at all. If there are any promise handlers waiting to be executed when your script completes, they’ll be executed immediately.

      is this because promises go into the microtask queue ( higher priority than the callback queue ) ??

    3. rejection handler for then()

      this is also applicable tor .catch() . since catch() is just a special case of .then() ie. .then(null , failure handler). Check the description of promise.catch in the "A Spoonful of Sugar" chapter.

  2. Mar 2022
    1. onChange

      The callback seems to receive 2 arguments. e and reactChild

      In the past I got the selected value using e.target.value This seems to work.

      Not sure of the use of the reactChild element that the callback receives.

      Another important note regarding recording the recorded value of the select is noted in the "value" prop explanition ( below, on this very page )

  3. Feb 2022
    1. Custom objects

      Are you getting an error along the lines of cityConverter is not a function ?

      Dont miss a single ; ( semicolon ) especially after the cityConverter object, this should solve your problem. It is a simple JS parsing problem, nothing related with Firestore or your understanding of Firestore

    1. Changing the semantic element

      You might want to turn it into a span for any number of reasons. eg if you want one word in a sentence to be another color / style eg. I wear a red hat

      <Typography component="div" > Contact Details : <Typography component="div" display="inline" variant="body2" color="black"> elroinoronha2@gmail.com </Typography> </Typography>

      (copy it to a code editor for the code to make sense)

      is a good solution since it defeats the "h1 cannot be a child of h1" DOM error + let us use the sx prop.

      We would not be able to use sx prop to style the inline part if we would use the native <span> component ie. <Typography > yo mama <span> so fat </span> </Typography>

      You would have to use inline style styling instead.

    1. Another option (at least in v5) is to use the Box component and select the underlying html element to be img as given in the example below (copied from official docs for v5)

      This <Box/> method is the preffered way of doing it. The <Paper/> method too is a good idea. The basic reasoning is that only MUI components support the sx prop ie. only they can fully use the MUI systems features. Thus, it doesnt make sense to use the native <img/> component in the markup, as it does not support sx

    1. The SX prop does not work with non MUI components eg. native <img/> component. To style this, you will have to use the native inline styling ie. <img style=" ............". /> If you want to style the img and use some MUI system specific features, ie. you need to use sx ; do the following. Use <Box component="img" sx={{ }} /> instead. This supports the sx prop, thus your image will be customizable with sx prop.

    1. Color

      The color prop does not support all MUI theme colors / their shades DIRECTLY through its color prop. Eg. The color prop supports primary but not primary.main/dark. It does not support the palette warning color at all.

      To remedy this you have 2 options 1 BETTER -- give the icon the desired color through the sx prop OR 2. wrap the icon in a box and give the box to desired color

  4. Nov 2021
    1. doc()

      Cannot wrap your head around the arguments that this function takes ? read this first. https://firebase.google.com/docs/firestore/data-model

      read the "References part" from this article

    1. { target: { value } }

      This might seem confusing at first glance. However this is just simple "nested destructruing" and "smart function parameters" used together

      Read the "Nested Destructuring" and "Smart Function Parameters" sections from the link below to get a better idea of what's going on.


      the set() function can also be written as -----

      let set = (name) => {
          return ( (e) => {
              setDetails( {...details , [ name ] : e.target.value });

      notice how the predeclared variable name is being used as a key in the object. { [name] : value } NOT { name : value}. Skipping the box brackets will throw you an error This is because name is actually a variable. Similar to the way in which we use object[key] = value; notation to add a k-v pair, we have to use { [name] : value } ie. enclose the variable name in square brackets while creating an object using object literal syntax to make sure that the code works