56 Matching Annotations
  1. Feb 2021
  2. Jan 2021
  3. Nov 2020
    1. A great thing about CSS variables is their reactive nature. As soon as we update them, whatever property has the value of the CSS variable gets updated as well.
  4. Oct 2020
    1. My version of https://svelte.dev/repl/9c7d12357a15457bb914705702f156d1?version=3.19.2 from https://github.com/sveltejs/svelte/issues/4586

      to try to simplify and help me understand it better.

      So the lack of synchronousness is only noticed inside handleClick.

      By the time the DOM gets updated, it has a consistent/correct state.

      In other words, the console.log shows wrong value, but template shows correct value. So this might not be an actual problem for many/most use cases.

    1. I too have been confused by behavior like this. Perhaps a clearly defined way to isolate atomic units with synchronous reactivity would help those of us still working through the idiosyncrasies of reactivity.
    2. For performance reasons, $: reactive blocks are batched up and run in the next microtask. This is the expected behavior. This is one of the things that we should talk about when we figure out how and where we want to have a section in the docs that goes into more details about reactivity. If you want something that updates synchronously and depends on another value, you can use a derived store:
    1. Imperative UI causes all sorts of problems, most of which revolve around state, which is another fancy term meaning “values we store in our code”. We need to track what state our code is in, and make sure our user interface correctly reflects that state.
    1. The $: can also be used to trigger effects.
    2. Any variable referenced on the lines marked with $: is marked as a dependency of the derived variable.
    3. We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.
    4. There's one downside to Reacts reactivity model - the hooks (useState and useEffect) have to always be called in the same order and you can't put them inside an if block.
    5. It's possible to run a function whenever some reactive state changes using the useEffect hook. In the example we log the length of the todoList whenever it changes. The first argument to useEffect is the function we want to run, and the second is a list of reactive values to track - whenever one of these values changes the effect will run again.
    6. So how do we declare the variable y to be the value of x plus 5? That's where reactive programming comes in. Reactive programming is a way of programming that makes it possible solve this problem
    1. Do these blocks allow for reactive assignments? @lukeed They're read-only, but values update when their dependencies do
  5. Sep 2020
    1. As you can see, it uses Javascript label syntax to tell the compiler where recalculation should be carefully managed. And you thought that no one uses labels any more.
    2. You know those useMemo and useCallback hooks? Well, Svelte has something like this. If you declare a variable like this: $: double = counter * 2;, Svelte will recalculate it only if counter changes.
    1. for example, reactive declarations essentially do the work of React's useMemo, useCallback and useEffect without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
    1. $: declares a relationship, where remaining should always be 10 - count. This might seem weird, but it’s conceptually the same as declaring a variable that you know will be re-calculated in every React render loop — except that remaining will get recalculated only when count changes.
    2. Since you often want to do calculations based on state, Svelte also has the “reactive declaration” symbol, $:. It’s like a let declaration, but whenever any variable referenced in the expression — count in this case — is updated, the expression is re-run, the new variable’s value is updated, and the component is re-rendered.
    3. The heart of Svelte’s magic is “reactivity”. Every let declaration sets up a listener, where any time the variable is assigned to, the change triggers a render of the component. So when the increment function calls count++, the component will re-render, which will update the value shown to the user by Count: {count}.
    1. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
    1. You're not limited to using $count inside the markup, either — you can use it anywhere in the <script> as well, such as in event handlers or reactive declarations.

      Don't forget to make the statement reactive. Referencing $count is not enough to get it to be re-run on update!!


      $: console.log(`the count is ${$count}`);
  6. Aug 2020
    1. Mateus, J., Grifoni, A., Tarke, A., Sidney, J., Ramirez, S. I., Dan, J. M., Burger, Z. C., Rawlings, S. A., Smith, D. M., Phillips, E., Mallal, S., Lammers, M., Rubiro, P., Quiambao, L., Sutherland, A., Yu, E. D., Antunes, R. da S., Greenbaum, J., Frazier, A., … Weiskopf, D. (2020). Selective and cross-reactive SARS-CoV-2 T cell epitopes in unexposed humans. Science. https://doi.org/10.1126/science.abd3871