- Oct 2020
-
github.com github.com
-
They even named the main file
react.js
so when converting/migrating components from React you could (at least some of the time, perhaps) simply leave some of the imports as-is:import {createHooks, useRef} from './react';
-
-
github.com github.com
-
This reactive statement is just used to have the store automatically subscribed and unsubscribed.
-
I'm not sure I understand the problem, everything you are describing is already possible.
-
Svelte right now has a lot of opportunities to have component state become out of sync with props.
-
I'm suggesting this is a problem generally. Users will not think of being out of sync with props
-
Svelte doesn't re-render, so you need to respond to component mount/dismount and prop changes separately as they are distinct concepts and never tied together, unlike in React.
Tags
- different way of thinking about something
- trying to doing things the same way you did in a different library/framework (learning new way of thinking about something / overcoming habits/patterns/paradigms you are accustomed to)
- investing time to really understand something
- lifecycle callbacks
- issues: not taking the time to really understand the issue before closing
- too quick to dismiss
- easy to get wrong
- missing feature leading to less-than-ideal workarounds
- can we do even better?
- distinction
- easy to forget
- issues: discuss more before closing
- UI library: reacting to prop changes
- a problem worth solving properly
- abuse of feature
- general problem
Annotators
URL
-
-
dylanvann.com dylanvann.com
-
the code is a bit verbose/convoluted
-
To fix our Svelte version you might think we could use beforeUpdate or afterUpdate, but these lifecycle functions are related to the DOM being updated, not to prop updates. We only want to rerun our fetching when the album prop is changed.
-
When using React hooks there is no concept of onMount because the idea of only running some code on mount leads to writing non-resilient components, components that do one thing when they mount, and then don’t take prop changes into account.
-
Beautiful, except that switching albums does not update the PhotoGrid. This is not the automatic reactivity we were promised by Svelte.
Tags
- Svelte for someone coming from React
- easy mistake to make
- lifecycle callbacks
- easy to get wrong
- not delivering on promise
- failed to deliver on expectations
- false assumptions
- easy to confuse (mix up)
- confusing for newcomers
- ugly/kludgey
- hard to understand
- the natural assumption
- component design: resilient components
- missing feature leading to less-than-ideal workarounds
- convoluted
- surprising
- easy to forget
- Svelte
- UI library: reacting to prop changes
- abuse of feature
Annotators
URL
-
-
dylanvann.com dylanvann.com
-
Using another reactive statement with $effect we have Svelte automatically handle subscribing and unsubscribing to the store
-
I’d still be interested in Svelte making things easier so I’ve opened a feature request for Reactive statement cleanup functions.
Tags
- cross-linking so readers can get the full context / see the outcome/resolution
- Svelte: store: custom
- cross-linking to issue
- take the extra time/effort to open an issue (in the appropriate project)
- missing feature leading to less-than-ideal workarounds
- don't just complain; help improve/fix things
- can we do even better?
- abuse of feature
- awkward workarounds
- community (for a project or product)
Annotators
URL
-
-
github.com github.com
-
It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
-
-
recoiljs.org recoiljs.org
-
For reasons of compatibility and simplicity, it's best to use React's built-in state management capabilities rather than external global state.
-
-
medium.com medium.com
-
Sometimes, you may be tempted to write that wrapper. Because all your (React or Vue or insert your reactive framework here) instincts tell you so.Resist the temptation. There is a better way. A svelter way. Introducing: the use-directive (a.k.a. “actions”).
-
However, especially when starting out, it’s very easy to fall into the “this is how I did things in my previous framework” trap.
Tags
- getting a fresh perspective
- overcoming preconceived opinions
- paradigm shift
- Svelte
- different way of thinking about something
- trying to doing things the same way you did in a different library/framework (learning new way of thinking about something / overcoming habits/patterns/paradigms you are accustomed to)
- Svelte: action (use:)
Annotators
URL
-
-
rjlipton.wordpress.com rjlipton.wordpress.com
-
A “solution” to GR is more like a model in logic: it may satisfy a theory’s axioms but have other properties that are contingent (unless the theory is categorical, meaning that all of its models are isomorphic).
-
-
bookbook.pubpub.org bookbook.pubpub.org
-
Safiya Noble, Algorithms of Oppression (New York: New York University Press, 2018). See also Mozilla’s 2019 Internet Health Report at https://internethealthreport.org/2019/lets-ask-more-of-ai/.
-
-
blog.joinmastodon.org blog.joinmastodon.org
-
So that’s already a huge advantage over other platforms due the basic design. And in my opinion it’s got advantages over the other extreme, too, a pure peer-to-peer design, where everyone would have to fend for themselves, without the pooled resources.
Definitely something the IndieWeb may have to solve for.
-
-
www.economist.com www.economist.com
-
“INFORMATION RULES”—published in 1999 but still one of the best books on digital economics—Carl Shapiro and Hal Varian, two economists, popularised the term “network effects”,
I want to get a copy of this book.
-
-
-
In the Ars memorandi noua secretissima, published in 1500 or 1501,20 Jodocus Weczdorff de Triptis (Weimar) inserted an alphabetical list of words, similar to that of Celtis, but he simply suggested that it could be used as a memory house without any scope for our private associations. Moreover, the alphabetic table of Celtis was included in the famous Margarita philosophica nova of Gregor Reisch, which was probably the most popular handbook of the artes scholars in the fi rst two decades of the 16th century.
Books on memory that used Celtes' trick
-
“The Art of Memory in Late Medieval East Central Europe (Bohemia, Hungary, Poland): An Anthology,” co-written by Lucie Doležalová, Rafał Wójcik and myself.
-
-
-
In 1945 Jacques S. Hadamard surveyed mathematicians to determine their mental processes at work by posing a series of questions to them and later published his results in An Essay on the Psychology of Invention in the Mathematical Field.
I suspect this might be an interesting read.
-
-
myscript.com myscript.com
-
MyScript MathPad
This looks like something I could integrate into my workflow.
-
-
bookbook.pubpub.org bookbook.pubpub.org
-
In April of 2019, at a digital learning conference, Manuel Espinoza spoke with educators, technologists, and annotation enthusiasts about R2L.d-undefined, .lh-undefined { background-color: rgba(0, 0, 0, 0.2) !important; }.d-undefined, .lh-undefined { background-color: rgba(0, 0, 0, 0.5) !important; }1Nate Angell and “the role that Hypothesis plays in human rights work.”
Manuel Espinoza, “Keynote,” AnnotatED Summit, April 2, 2018, https://youtu.be/5LNmSjDHipM.
-
-
danallosso.substack.com danallosso.substack.com
-
Horwitz argued a fairly radical point, which I think never received wide enough recognition due to the subject matter and his extremely difficult (dense and dry) style. He said, “I seek to show that one of the crucial choices made during the antebellum period was to promote economic growth primarily through the legal, not the tax, system, a choice which had major consequences for the distribution of wealth and power in American society”
I'll have to add this book to my to read stack.
Tags
Annotators
URL
-
-
longviewoneducation.org longviewoneducation.org
-
Universal Design for Learning: Theory and Practice by Meyer, Rose, and Gordon (a book recognized as the core statement about UDL, which you can read for free) walks us through how educators actively change their practice to become more inclusive and helps us weigh choices in terms of how we create unnecessary barriers:
-
-
github.com github.com
-
Solid supports templating in 3 forms JSX, Tagged Template Literals, and Solid's HyperScript variant.
-
So while Solid's JSX and might resemble React it by no means works like React and there should be no illusions that a JSX library will just work with Solid. Afterall, there are no JSX libraries, as they all work without JSX, only HyperScript or React ones.
Tags
- flexibility
- template language
- React
- javascript: tagged template literals
- programming: multiple ways to do the same thing
- unopinionated
- misleadingly similar (don't expect everything to be the same just because some things are)
- SolidJS
- misleading
- hyperscript
- decoupled
- JSX
- differences
Annotators
URL
-
-
-
Unfortunately people lack the the time to invest to really understand those things
-
If there was a place I thought reactivity would be weak, I embraced it and I worked on it until I was happy with the results.
-
It was clear no one was interested in what I was working towards.
-
but everything they were doing started to make sense
-
I kept on wanting them to work like Fine-Grained reactivity, since it was much more intuitive.
-
Vue was always felt contrived for me.
-
I couldn't land on how I wanted to box primitives. Should I use a getter/setter, or function form like Knockout, or explicit get/set like MobX? These were all ugly.
-
Over time Adam, Surplus' creator, had less and less time to spend on the project and I decided to take my own shot.
-
I started Solid years ago before I thought anyone would be interested in using it. I only started promoting it because it had already achieved the goals I had set out for it.
Tags
- work on it until happy with the results/how it works/looks/feels
- having a clear vision in mind / goal you're working towards even if no one else seems to understand/be interested
- intuitive
- beauty
- reactivity
- constant evolution/improvement of software/practices/solutions
- feels natural
- build your own ideas
- API design
- forking
- contrived
- ergonomics (software API)
- finally got it right
- ugly/kludgey
- going a different direction
- not enough time
- only as good/strong/etc. as weakest link
- sharing/publishing what started as a personal project; so others can use it/benefit too
- abandoned due to lack of free time
- investing time to really understand something
- build the product you want to use yourself
- API
- better/superior solution/way to do something
- build your own
- can we do even better?
- finding time for open-source projects
- common/shared goal
- primitives
- finally / at last
- being explicit
- needs to feel right
Annotators
URL
-
-
github.com github.com
-
Might have to cut my own version of the extension if its maintainers won't add support.
Tags
Annotators
URL
-
-
-
Templates are prone to unnoticed runtime errors, are hard to test, and are not easy to restructure or decompose.
-
In contrast, Javascript-made templates can be organised into components with nicely decomposed and DRY code that is more reusable and testable.
-
-
-
The $: can also be used to trigger effects.
-
We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.
-
MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data.
-
-
twitter.com twitter.com
-
Matt Bishop on Twitter. (n.d.). Twitter. Retrieved October 9, 2020, from https://twitter.com/MatthewLBishop/status/1313949882454077441
-
-
www.thingiverse.com www.thingiverse.com
-
-
final-form.org final-form.org
-
Note that if you are calling reset() and not specify new initial values, you must call it with no arguments. Be careful to avoid things like promise.catch(reset) or onChange={form.reset} in React, as they will get arguments passed to them and reinitialize your form.
-
-
github.com github.com
-
It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases, features are absent for a reason.
-
-
-
Here's a proxy store I wrote to derive the value of a store nested within other stores, it plays nice with typescript and can go infinitely deep
-
-
html.com html.com
-
If a part of the content deserves its own heading, and that heading would be listed in a theoretical or actual table of contents, it should be placed in a <section>. The key exception is where the content may be syndicated; in this case, use <article> element instead.
-
-
neilkakkar.com neilkakkar.com
-
Confidence to express ignorance is a super power. One good way I hone this skill is by saying “Nothing to add” when I have nothing to add, instead of repeating what other people said.
-
-
github.com github.com
-
React hook for creating a value exactly once. useMemo doesn't give this guarantee unfortunately - https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
-
-
github.com github.com
-
Because I haven't worked with React Native, and so I'm not a specialist in it, and developing a React Native version of this package would better be done by someone being an expert in React Native.
-
-
atomicdesign.bradfrost.com atomicdesign.bradfrost.com
-
-
impedagogy.com impedagogy.com
-
How To Write This Poem
begin here …with TIME
where words
are layered with text
where the pen
etches into screen …
then go here …
(https://www.vialogues.com/vialogues/play/61205)
… only to leap from one place
to another,
where my mind goes
I hardly every know,
only that it ventures forward …
… heard by hearts,
and scattered stars,
where I see the sky fall,
you find the debris …
our thoughts.
(https://nowcomment.com/documents/234044)
Might we be permitted them?
The dragonfly
rarely yields her ground
to the critics among
us.
-
Kevin's Response
How To Write This Poem
begin here …with TIME
where words
are layered with text
where the pen
etches into screen …
then go here … https://www.vialogues.com/vialogues/play/61205
... only to leap from one place to another, where my mind goes I hardly every know, only that it ventures forward ...
… heard by hearts, and scattered stars, where I see the sky fall, you find the debris …. https://nowcomment.com/documents/234044
Your thoughts?
-
-
github.com github.com
-
This library exports a single React Hook, useMethods, which has all the power of useReducer but none of the ceremony that comes with actions and dispatchers.
-
-
learn-us-east-1-prod-fleet02-xythos.content.blackboardcdn.com learn-us-east-1-prod-fleet02-xythos.content.blackboardcdn.com
-
r self-r
This paragraph discuses the use of the word "bullshit" as it is used in every day life. Decide whether this is arguement, structure or both.
-
A Kind Word for Bullshit: The Problem of Academic Writin
Add MLA citation
-
-
www.amazon.com www.amazon.com
-
The Pianist: The Extraordinary True Story of One Man's Survival in Warsaw, 1939-1945 Paperback – Illustrated, September 2, 2000
-
-
rjlipton.wordpress.com rjlipton.wordpress.com
-
www.quantamagazine.org www.quantamagazine.org
-
leanprover-community.github.io leanprover-community.github.ioSchedule1
-
www.nature.com www.nature.com
-
The Indian government is pushing a bold proposal that would make scholarly literature accessible for free to everyone in the country
"... accessible for free ..."
open access sampai hari ini memang hanya diartikan sebagai membuat artikel ilmiah dapat diunduh dengan membayar APC atau dikenal sebagai modus Gold OA.
Artikel oleh Peter Suber ini menjelaskan bahwa OA tidak hanya bisa dilakukan melalui jurnal Gold OA.
-
-
-
But maybe this PR should still be merged until he finds time for that?
-
Sorry this sat for so long!
Tags
- don't let big plans/goals get in the way of integrating/releasing smaller changes/improvements
- not a blocker (issue dependency)
- pull request stalled
- big change/rewrite vs. continuous improvements / smaller refactorings
- iterative process
- waiting for maintainers to review / merge pull request / give feedback
- open-source software: progress seems slow
Annotators
URL
-
-
fs.blog fs.blog
-
be quick to start books, quicker to stop them, and read the best ones again right after you finish
farnam street blog tips on reading
-
-
stackoverflow.blog stackoverflow.blog
-
He says that he sees the combination of long form pieces and Q&A as a new level of support. “We used to have level one, which was sending a ticket to the help desk, and it was something we could easily resolve for you. Level two was a more complex problem that maybe required an engineer or specialist from a certain team to figure out. I look at this new system as a level zero.” Before sending us a ticket, folks can search Teams. If they find a question that solves the problem, great. If they need more details, they can follow links to in-depth articles or collections that bring together Q&A and article with the same tags.“
-
-
leanprover.github.io leanprover.github.ioLean1
-
I'm so tempted to toy around with this.
-
-
github.com github.com
-
I created a pull request to have the if (node.parentNode) conditional added to detach. It was not applied due to the desire to find the root cause of the <meta> tag manifestation of this issue.
-
However, IMO, having the conditional in the detach function is necessary, because there are other manifestations of this error. For example, if the DOM element in a component is removed from software outside of svelte, detach will have the same error.
-
IMO, the conditional needs to be added to detach to fix all manifestations of this error.
-
- Sep 2020
-
github.com github.com
-
remaining: 0, callbacks: [] r: 0, // remaining outros c: [], // callbacks p: outros // parent group
Ugh. Why did he change this?
Similar question here: https://hyp.is/kayb_AN1EeuCb5OkL5-Yqg/github.com/sveltejs/svelte/pull/3209
Answer here: https://github.com/sveltejs/svelte/pull/3209
-
-
github.com github.com
-
Why the obfuscation of remaining to r and callbacks to c? This is fine for function-local variables but in this instance makes the code significantly harder to reason about? There is no notion of what c and r mean.
-
-
github.com github.com
-
I pushed the build files & tested it in my environment so this should work as is.
-
I pushed a hotfix, based on v3.6.3 proposed by #2086 (comment) In package.json, under devDependencies, use: "svelte": "btakita/svelte#svelte-gh-2086-hotfix"
-
-
stackoverflow.com stackoverflow.com
-
do I really have to do something like that in order to have my local modules working? it's quite impracticable to explain it to a team! there's nothing a little bit more straightforward?
-
-
sapper.svelte.dev sapper.svelte.dev
-
page components can have an optional preload function that will load some data that the page depends on. This is similar to getInitialProps in Next.js or asyncData in Nuxt.js.
-
-
www.youtube.com www.youtube.com
-
-
www.youtube.com www.youtube.com
-
-
lukeplant.me.uk lukeplant.me.uk
-
nedbatchelder.com nedbatchelder.com
-
www.theatlantic.com www.theatlantic.com
-
This dynamic is playing out during the pandemic among the many people who refuse to wear masks or practice social distancing.
people who are refusing not to wear a mask are not helping reduce transmission of coronavirus
-
-
final-form.org final-form.org
-
Keep in mind that the values in meta are dependent on you having subscribed to them with the subscription prop.
-
-
-
I guess we could always add a bunch of adapter code to watch the flag and trigger a callback when it becomes true or false...
-
-
svelte.dev svelte.dev
-
www.javascriptjanuary.com www.javascriptjanuary.com
-
The problem I have with this approach to state and prop variables is that the difference between them is very blurry. In React you can clearly see that a prop is an input to component (because of clear function notation), and that state is something internal. In Svelte they are both just variables, with the exception that props use export keyword.
This is something I've seen before: people noticing that Svelte is missing some kind of naming convention.
React has use___ convention, for example. Without that, it makes it hard to see the difference between and know just from the name that a function is an (mentioned in the other article I read) action and not a event handler or even component, for example.
-
-
svelte.dev svelte.dev
-
Because Svelte is a compiler, we're not bound to the peculiarities of JavaScript: we can design a component authoring experience, rather than having to fit it around the semantics of the language.
-
-
rollupjs.org rollupjs.orgRollup1
-
/node_modules/
This might be better than explicitly listing all external modules...?
Tags
Annotators
URL
-
-
discuss.rubyonrails.org discuss.rubyonrails.org
-
Insisting on a specific implementation, rather than proposing a clear problem, suggesting a possible solution, and “not being married” to your initial preferred solution.
-
-
shipshape.io shipshape.io
-
medium.com medium.com
-
Modules using code that doesn’t exist in browsers such as process.env.NODE_ENV and forcing you to convert or polyfill it.
-
The benefit of this approach is that rather than having these defaults and fighting against them, it’s fully up to you to decide how to handle everything.
-
Instead, rather than trying to implement what it thinks is the best way to bundle different type of assets, it leaves that entirely up to the developer to decide.
-
Personally for me, this is incredibly hard to read. Regex everywhere, nested objects with different rules and configurations that are very intuitive, multiple loaders that resolve backwards, built in loaders having obscure issues that require using third party loaders in between, separation of plugins and loaders, and so on.
-
In my opinion, because Webpack was one of the first bundlers, is heavily packed with features, and has to support swathes of legacy code and legacy module systems, it can make configuring Webpack cumbersome and challenging to use. Over the years, I’ve written package managers, compilers, and bundlers, and I still find configuring Webpack to be messy and unintuitive.
-
Unfortunately, many third party libraries, even though they are written in ESM, are published to npm as CJS modules, so we still need to concatenate them.
Tags
- fighting against your tools
- unintuitive
- hard to use
- webpack
- holdover
- javascript: server environment vs. browser environment
- under my control
- CommonJS modules
- unfortunate decisions leading to less-than-ideal workarounds
- strange problems
- configurable
- unopinionated
- unfortunate
- hard to read (readability)
- legacy designs being a hindrance for building upon
- obscure issues
- misunderstanding
- not user-friendly
- control (programming)
- feeling in control
- it's up to you to decide
- having more control/certainty when you do something manually
- slow to upgrade/switch to latest version/current best practice/way of doing things
- better/superior solution/way to do something
- workarounds
Annotators
URL
-
-
stackoverflow.com stackoverflow.com
-
Wow, no answers to this question. That's too bad. Did you ever find the solution?
-
-
jimmyutterstrom.com jimmyutterstrom.com
-
Did you know that you can create a Svelte component and with almost no extra steps distribute- and use it like any classic old Javascript library through a global constructor (let myComponent = new MyComponent())?
-
-
github.com github.com
-
So I guess what @Rich-Harris is trying to say is that (sorry, I'm just logging it here for my own benefit)
-
we've learned why you might want to use external but not globals: libraries. We've started to factor some of our client-side JS as libraries to share between projects. These libraries import $ from 'jquery'. However they don't want to presume how that import might be "fulfilled". In most projects it's fulfilled from a global i.e. a script loaded from a CDN. However in one project it's fulfilled from a local copy of jQuery for reasons I won't get into. So when these libraries bundle themselves for distribution, as ES6 modules, they mark 'jquery' as an external and not as a global. This leaves the import statements in the bundle. (Warning: Don't bundle as an IIFE or UMD, or Rollup will guess at fulfilling the import from a global, as @Rich-Harris mentions above.)
-
-
engineering.mixmax.com engineering.mixmax.com
-
There are two ways of handling this with Rollup, as described by the troubleshooting link from the warning. Unfortunately, both Rollup and React recommend the wrong one.
-
-
github.com github.com
-
Luckily, there is absolutely no good reason not to use strict mode for everything — so the solution to this problem is to lobby the authors of those modules to update them.
-
-
medium.com medium.com
-
small modules allow library authors to become lazy. Why include that six-line helper function when you can do a one-line `require`?
-
These are all things that make your life as a library author easier.
-
This happens because npm makes it ridiculously easy for people to release their half-baked experiments into the wild. The only barrier to entry is the difficulty of finding an unused package name. I’m all in favour of enabling creators, but npm lowers the barriers right to the floor, with predictable results.
-
I think I know why: it’s because the small modules philosophy favours library authors (like Sindre) at the ultimate expense of library users.
-
-
github.com github.com
-
I hope I won’t forget, but I’ll come back to you once we’ve got an idea on how to improve this Svelte API
-
-
github.com github.com
-
DX: start sapper project; configure eslint; eslint say that svelt should be dep; update package.json; build fails with crypt error; try to figure what the hell; google it; come here (if you have luck); revert package.json; add ignore error to eslint; Maybe we should offer better solution for this.
-
When the message say function was called outside component initialization first will look at my code and last at my configuration.
Tags
- dev experience
- errors are helpful for development (better than silently failing)
- error messages: should reveal/point to why/how error was caused and how to fix/prevent it
- web search for something brings me here
- good point
- errors
- useless/unhelpful/generic error messages that don't reveal why/how error was caused
- can we do even better?
- what a reasonable person would do
- reasonable expectation
- expectations
- frustrating
Annotators
URL
-
-
github.com github.com
-
GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.
It was actually cross-posted here: https://stackoverflow.com/questions/62101637/urql-svelte-function-called-outside-component-initialization-if-not-in-onmou
-
-
stackoverflow.com stackoverflow.com
-
The recommended solution for onMount is the same as for useEffect — place an async function inside the handler
-
(Note that you're responsible for handling any race conditions that arise as a result of the component being destroyed before the promise resolves, though assigning state inside a destroyed component is harmless.)
-
-
-
Most simple example: <script> import ChildComponent from './Child.svelte'; </script> <style> .class-to-add { background-color: tomato; } </style> <ChildComponent class="class-to-add" /> ...compiles to CSS without the class-to-add declaration, as svelte currently does not recognize the class name as being used. I'd expect class-to-add is bundled with all nested style declarations class-to-add is passed to ChildComponent as class-to-add svelte-HASH This looks like a bug / missing feature to me.
-
Also Svelte is so great because developer do not need to worry about class names conflict, except of passing (global) classes to component (sic!).
-
-
I wrote hundreds of Rect components and what I learned is that Componets should be able to be styled by developer who is using it.
-
Just throwing in <div class="{$$props.class || ''} otherChildClass"></div> seems the easiest, and it'll avoid undefined classes. I feel like many aren't noticing the undefined values getting inserted in their classes.
-
color: red; //doesn't apply this rule, because scoping doesn't extend to children
-
Say I want to style this javascript routing anchor tag on various pages (some may be buttons, plain links, images) it makes it incredibly difficult. Eg:
-
TBH It is a bit disheartening to see this issue closed when all proposed solutions do not sufficiently solve the issue at hand, I really like svelte but if this is how feature requests are handled I am probably not going to use it in the future.
Tags
- how to affect child component components without their cooperation
- who should have control over this? (programming)
- easy mistake to make
- features
- missing feature
- caveat
- unfortunate
- missed opportunity
- Svelte: how to affect child component styles
- common mistake
- +0.9
- easy to miss / not notice (attention)
- not adding features that users really want/often request
- key point
- framework taking care of responsibility so users can leverage it and not have to worry about that responsibility themselves
- user can always abandon/quit/leave your site/app
- feature request
- consistency
- surprising behavior
- frustrating when maintainers stubbornly stick to opinions/principles/decisions and won't change despite popular user support
Annotators
URL
-
-
-
I think instead, there would need to be some special way to make the distinction of what is a slot attribute and what is a slot prop to be consumed with let:. Maybe a new directive like <slot attr:class="abc"/>?
-
I can't add special props and keywords to every single component I have and will ever create for this to work.
-
There are work arounds, but nothing clean. I just feel like this should be functionality that should be part of the slot feature.
Tags
- how to affect child component components without their cooperation
- library/framework could make this easier
- how to affect child components
- too hard/difficult/much work to expect end-developers to write from scratch (need library to do it for them)
- clean solution
- distinction
- maintenance burden to explicitly define/enumerate/hard-code possible options (explicit interface)
- workarounds
- first-class support
Annotators
URL
-
-
github.com github.com
-
Explicitly exposing any attributes that might get overridden by a parent seems impractical to me.
-
feel like there needs to be an easy way to style sub-components without their cooperation
-
There's no way to change style incapsulation method without patching the compiler, and this means maintaing a fork, which is not desirable.
-
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.
Tags
- impractical
- how to affect child component components without their cooperation
- missing out on the benefits of something
- Svelte: how to affect child component styles
- trying to prevent one bad thing leading to people doing/choosing an even worse option
- maintenance burden to explicitly define/enumerate/hard-code possible options (explicit interface)
- +0.9
- important point
- control (programming)
- key point
- quotable
- interesting wording
- scalability
- avoid forking if possible
- Svelte: CSS encapsulation
- arbitrary limitations leading to less-than-ideal workarounds
- forking to add a desired missing feature/change
Annotators
URL
-
-
github.com github.com
-
There is a good amount of properties that should mostly be applied from a parent's point of view. We're talking stuff like grid-area in grid layouts, margin and flex in flex layouts. Even properties like position and and the top/right/left/bottom following it in some cases.
-
Svelte will not offer a generic way to support style customizing via contextual class overrides (as we'd do it in plain HTML). Instead we'll invent something new that is entirely different. If a child component is provided and does not anticipate some contextual usage scenario (style wise) you'd need to copy it or hack around that via :global hacks.
-
Explicit interfaces are preferable, even if it places greater demand on library authors to design both their components and their style interfaces with these things in mind.
-
If you want this control then wrap them in a DOM node that the parent controls. If you want to pass in values then use props and if you want to pass in values from higher up the tree, the new style RFC may be able to help.
-
new style RFC
-
This allows passing classes to child components with svelte-{hash} through the class prop and prevents removing such classes from css.
Tags
- who should have control over this? (programming)
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- Svelte: components are their own boss (encapsulation)
- missed opportunity: link to what you are referring to
- workarounds
- missed opportunity
- Svelte: how to affect child component styles
- explicit interfaces
- trying to prevent one bad thing leading to people doing/choosing an even worse option
- maintenance burden to explicitly define/enumerate/hard-code possible options (explicit interface)
- ugly/kludgey
- forced to fork/copy and paste library code because it didn't provide enough customizability/extensibility / didn't foresee some specific prop/behavior that needed to be overridable/configurable (explicit interface)
- official opinion/stance/position
- official preferred convention / way to do something
- component/library author can't consider/know ahead of time all of the ways users may want to use it
- maintenance burden
- make it a link if can be made a link to something useful/relevant
- forking to add a desired missing feature/change
- burden
- being explicit
Annotators
URL
-
-
svelte.dev svelte.dev
-
github.com github.com
-
Would style .classInChild from your parent. The only drawback is that you might need an extra wrapping element.
-
-
github.com github.com
-
This has already forced me to forgo Svelte Material because I would like to add some actions to their components but I cannot and it does not make sense for them to cater to my specific use-case by baking random stuff into the library used by everyone.
-
The point of the feature is to not rely on the third-party author of the child component to add a prop for every action under the sun. Rather, they could just mark a recipient for actions on the component (assuming there is a viable target element), and then consumers of the library could extend the component using whatever actions they desire.
-
For my simple tooltip example, I could create a TooltipHitbox component with a <slot/> inside a <div use:myTooltip={tooltipProp}> and then wrap MatButton instances with that component.
-
I think Svelte's approach where it replaces component instances with the component markup is vastly superior to Angular and the other frameworks. It gives the developer more control over what the DOM structure looks like at runtime—which means better performance and fewer CSS headaches, and also allows the developer to create very powerful recursive components.
Tags
- contrast
- feeling in control
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- programming paradigm
- flexibility
- React
- better/superior solution/way to do something
- why this feature is needed
- powerful
- better than the alternatives
- comparison
- component/library author can't consider/know ahead of time all of the ways users may want to use it
- reusability
- Angular
- extensibility
- arbitrary limitations leading to less-than-ideal workarounds
- pass-through arguments/props/options
- Svelte: action (use:)
Annotators
URL
-
-
github.com github.com
-
Lets not extend the framework with yet another syntax
-
Your LazyLoad image is now inextensible. What if you want to add a class? Perhaps the author of LazyLoad thought of that and sets className onto the <img>. But will the author consider everything? Perhaps if we get {...state} attributes.
-
I totally get not wanting to extend the syntax. I tried doing these things and in practice it was not easy or pretty. Actions provide a much cleaner and easier way to accomplish a certain set of functionality that would be much more difficult without it.
Tags
- library/framework could make this easier
- avoid complexity
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- you aren't going to need it
- inextensible
- just use/do...
- programming: multiple ways to do the same thing
- could be easier / more difficult than it needs to be
- feature not needed; better to use a different approach/feature instead
- component/library author can't consider/know ahead of time all of the ways users may want to use it
- clean solution
- clean
- extensibility
- keep things simple
Annotators
URL
-
-
github.com github.com
-
<LazyLoad component="img" data-src="giant-photo.jpg" class="my-cool-image" />
-
Why not just do something like this?
-
I'm still confused about the need for this, so at the expense of continuing to be that obnoxious kid at the playground, I'm going to stick my neck out again.
-
Devil's advocate: I'm not convinced the functionalities you list can't already be done within the JS of the component. Example: autofocus can simply be done w/ a method or oncreate.
-
Actions aren't necessary, otherwise they would have been implemented from the start. But they do allow for easier code-reuse and better shared libraries without exploding/complicating the ecosystem.
-
You'll have to create a new component that brings in the functionality of both. TooltipButton, TooltipLink, Link, and TooltipRoutedLink. We're starting to get a lot of components to handle a bit of added functionality.
-
For the tooltip example, if you had a whole bunch of tooltips on different elements, it would be annoying to have different event listeners and "should it be shown" variables for each one.
-
I'm just pushing on the "is this really a good idea" front
-
If this was tied into Svelte's flow with hooks this would not be necessary since it would know when it was being removed from the DOM.
-
You must: reference each element you are extending using refs or an id add code in your oncreate and ondestroy for each element you are extending, which could become quite a lot if you have a lot of elements needing extension (anchors, form inputs, etc.)
-
This is where hooks/behaviors are a good idea. They clean up your component code a lot. Also, it helps a ton since you don't get create/destroy events for elements that are inside {{#if}} and {{#each}}. That could become very burdensome to try and add/remove functionality with elements as they are added/removed within a component.
-
I would be willing to take a stab at it if you think it would be a task within reach.
-
This can and should be done with other components, IMHO.
-
the ability to pass around element names as strings in place of components
-
I'm a lot softer on this feature now - I'm starting to believe that every single use case that you would use a hook for, you could/should use a component for.
Tags
- just use/do...
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- not strictly necessary but helpful / nice to have
- could be easier / more difficult than it needs to be
- contributing: willing to attempt/try to implement it
- feature not needed; better to use a different approach/feature instead
- comparison
- annotation meta: linking to/relationship between annotations
- reusability
- different way of solving/implementing something
- library/framework could make this easier
- you aren't going to need it
- scalability
- too hard/difficult/much work to expect end-developers to write from scratch (need library to do it for them)
- framework taking care of responsibility so users can leverage it and not have to worry about that responsibility themselves
- why this feature is needed
- from different perspective/point of view
- I want this too
- difficult/hard
- Svelte: problem: how to pass dynamic element name
Annotators
URL
-
-
-
Perhaps at that point we're better off settling on a way to pass components through as parameters? <!-- App.html --> <Outer contents={Inner}/> <!-- Outer.html --> <div> <div>Something</div> <[contents] foo='bar'/> </div>
-
But some sort of official way to do that in the language would make this nicer - and would mean I would have to worry less about destroying components when their parent is destroyed, which I'm certainly not being vigilant about in my code.
-
I would hope for it to come with React-like behavior where I could pass in a string (like div or a) and have it show up as a normal div/a element when the child component used it.
Tags
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- flexibility
- framework taking care of responsibility so users can leverage it and not have to worry about that responsibility themselves
- Svelte: problem: how to pass dynamic element name
Annotators
URL
-
-
github.com github.com
-
The more I think about this, the more I think that maybe React already has the right solution to this particular issue, and we're tying ourselves in knots trying to avoid unnecessary re-rendering. Basically, this JSX... <Foo {...a} b={1} {...c} d={2}/> ...translates to this JS: React.createElement(Foo, _extends({}, a, { b: 1 }, c, { d: 2 })); If we did the same thing (i.e. bail out of the optimisation allowed by knowing the attribute names ahead of time), our lives would get a lot simpler, and the performance characteristics would be pretty similar in all but somewhat contrived scenarios, I think. (It'll still be faster than React, anyway!)
-
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?
-
I'll work on a preliminary PR (which I expect will need some love from maintainers, sorry!)
-
The lack of spread continues to be a big pain for me, adding lots of difficult-to-maintain cruft in my components. Having to maintain a list of all possible attributes that I might ever need to pass through a component is causing me a lot of friction in my most composable components.
-
No worries, I was just thinking that this issue should probably get necro'd back to open.
Tags
- necroposting (posting to a long-inactive discussion thread)
- arbitrary limitations
- run-time dynamicness/generics vs. having to explicitly list/hard-code all options ahead of time
- React
- copying/doing the same as how another project/library did it
- javascript: spread syntax
- reasonable
- reviving old/style issue
- comparison
- unfounded concern (no need to worry about it)
- code contribution: doing some of the work but leaving some for others to pick up/finish
- Svelte
- arbitrary limitations leading to less-than-ideal workarounds
- optimization
Annotators
URL
-
-
github.com github.com
-
No, this is about using a string to create an element of that tag name.
-
Use case: Wrapper components that need to render an element (e.g. because they attach event listeners). You'd probably use a <div> there by default but there may be places where this is not desirable for semantic reasons (e.g. in lists).
-
-
{#each section as {tag, is_self_closing, props, content}} {#if is_self_closing} <{tag} {...props} /> {:else} <{tag} {...props}>{content}</{tag}> {/if}
-
-
-
const components = { Label, Tree, Menu };
-
-
www.imdb.com www.imdb.com
-
Via Hank.
-
-
neilyoungarchives.com neilyoungarchives.com
-
Via Whatever.
-
-
stackoverflow.com stackoverflow.com
-
Note that Array.entries() returns an iterator, which is what allows it to work in the for-of loop; don't confuse this with Object.entries(), which returns an array of key-value pairs.
-
-
developer.mozilla.org developer.mozilla.org
-
The value of dotAll is a Boolean and true if the "s" flag was used; otherwise, false. The "s" flag indicates that the dot special character (".") should additionally match the following line terminator ("newline") characters in a string, which it would not match otherwise: U+000A LINE FEED (LF) ("\n") U+000D CARRIAGE RETURN (CR) ("\r") U+2028 LINE SEPARATOR U+2029 PARAGRAPH SEPARATOR This effectively means the dot will match any character on the Unicode Basic Multilingual Plane (BMP). To allow it to match astral characters, the "u" (unicode) flag should be used. Using both flags in conjunction allows the dot to match any Unicode character, without exceptions.
-
-
journals.plos.org journals.plos.org
-
Jagan, Mikael, Michelle S. deJonge, Olga Krylova, and David J. D. Earn. ‘Fast Estimation of Time-Varying Infectious Disease Transmission Rates’. PLOS Computational Biology 16, no. 9 (21 September 2020): e1008124. https://doi.org/10.1371/journal.pcbi.1008124.
-
-
-
Part of the functionality that is returned are event handlers. I'd like to avoid needing to manually copy the events over one by one so the hook implementation details are hidden.
-
-
github.com github.com
-
The feature is highly likely to be implemented, the API and implementation are the only real topics of discussion right now.
-
-
-
Three tests to prove a small piece of behavior. Although it might seem overkill for such a small feature, these tests are quick to write—that is, once you know how to write them
-
-
-
To learn about canceling fetch requests, search the internet for
-
-
github.com github.com
-
You should install the packages individually. Alternatively, you can install all of them at once with the svelte-material-ui package.
-
-
-
github.com github.com
-
I don't plan to push this to npm, cause I'm in favour with Deno's approach.
Tags
Annotators
URL
-
-
github.com github.com
-
In a similar vein to (#33), it is arguably just something that compensates for the lack of power in the template language relative to JavaScript.
-
-
-
However, we've another unresolved problem - passing parent's styles to child components.
-
-
github.com github.com
-
Even without going to that extreme, the constraint of having a single <style> can easily force component authors to resort to the kinds of classes-as-namespaces hacks that scoped styles are supposed to obviate.
-
-
jsrocks.org jsrocks.orgJS Rocks1
-
6to5 attempted to ship a quick and dirty TDZ static checking feature but had to retract it immediately afterwards due to various bugs in the algorithm.
-
-
github.com github.com
-
The complaint is that by choosing less powerful languages, template-based frameworks are then forced to reintroduce uncanny-valley versions of those constructs in order to add back in missing functionality, thereby increasing the mount of stuff people have to learn.
-
-
github.com github.com
-
Please focus on explaining the motivation so that if this RFC is not accepted, the motivation could be used to develop alternative solutions. In other words, enumerate the constraints you are trying to solve without coupling them too closely to the solution you have in mind.
Tags
- contribution guidelines: should explain motivation for change
- answer the "why?"
- iterative process: building on previous attempts/work
- defining the problem clearly is as valuable coming up with specific implementation/solution
- okay for proposal to not be accepted
- iterative process
Annotators
URL
-
-
-
I wonder at what point Svelte would add this feature if, for example, a majority of their users ended up migrating to a fork that added this missing feature (like this one)?
Would they then concede and give in to popular demand in order to avoid a schism of the community?
Kind of like Rails swallowed / consolidated with Merb after they saw how great its ideas were?
-
-
svelte.dev svelte.dev