37 Matching Annotations
  1. Dec 2022
  2. Sep 2021
  3. Aug 2021
    1. You can add event modifiers with the on:click$preventDefault$capture={handler} syntax. If you use Svelte's native on:click|preventDefault={handler} syntax, it will not compile. You have to use "$" instead of "|". (The extra S inside the | stands for SMUI.)

      How does it do that? I didn't think components could introspect to see which event handlers were added by the calling component?!

      Does it actually somehow generate an event named something like click$preventDefault$capture? I still don't get how that would work.

  4. Jul 2021
    1. Please note that the strategy: :build option must be passed to an explicit call to association, and cannot be used with implicit associations:
  5. Jun 2021
  6. Mar 2021
    1. Dave Rupert has a good solution that uses an input's invalid event. Instead of using the :invalid pseudo selector, he adds a CSS class to the input when it becomes invalid. We will extend this approach by removing the CSS class when the element becomes valid again.
  7. Feb 2021
  8. Jan 2021
  9. Nov 2020
    1. Thanks so much for the reply! Due to space limitations for comments, I have appended my reply to my original question. Thanks again! (P.S. I can't up-vote your reply until my rep hits 15... Sorry about that.)
  10. Oct 2020
    1. When I'm prototyping components I like to manage the data where it appears, and not send it back and forth if there is no reason for it. I also don't like to be forced by a language to do things a certain way.
    1. Especially when coming from a framework like React, it might feel very tempting to start creating a component wrapper around the input (i.e. <input> becomes <Input/>) and add your custom event handlers in there.This is a great approach in React, but not so much in Svelte. Why, you ask?Well, Svelte (at least in its current form, v3) really shines when you have native DOM elements at your disposal. You can use transition directives, conditionally switch CSS classes, bind to the current value with ease, and more.
  11. Sep 2020
    1. The problem with working around the current limitations of Svelte style (:global, svelte:head, external styles or various wild card selectors) is that the API is uglier, bigger, harder to explain AND it loses one of the best features of Svelte IMO - contextual style encapsulation. I can understand that CSS classes are a bit uncontrollable, but this type of blocking will just push developers to work around it and create worse solutions.
    2. In the end this is an opinionated framework, and you can limit developers as you like, but I think it's a shame to block the possibility of what is available natively in the web.
    1. Also, I'm starting to wonder if maybe it's okay to have multiple spreads? If the alternative to <Foo {...a} {...b} {...c} d={42}> is that people will write <Foo {...Object.assign({}, a, b, c)} d={42}> anyway, then do we gain anything with the constraint?
  12. Jul 2020
    1. Creating and calling a default proc is a waste of time, and Cramming everything into one line using tortured constructs doesn't make the code more efficient--it just makes the code harder to understand.

      The nature of this "answer" is a comment in response to another answer. But because of the limitations SO puts on comments (very short length, no multi-line code snippets), comment feature could not actually be used, so this user resorted to "abusing" answer feature to post their comment instead.

      See

  13. May 2020
  14. Jan 2020
    1. ssh doesn't let you specify a command precisely, as you have done, as a series of arguments to be passed to execvp on the remote host. Instead it concatenates all the arguments into a string and runs them through a remote shell. This stands out as a major design flaw in ssh in my opinion... it's a well-behaved unix tool in most ways, but when it comes time to specify a command it chose to use a single monolithic string instead of an argv, like it was designed for MSDOS or something!
  15. Dec 2019
    1. This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
    1. caution do not use package.json for the folder name if you want to clone this project to your machine - it will break yarn (An unexpected error occurred: "EISDIR: illegal operation on a directory, read".).
  16. Nov 2019