tutorial todos

[NullVoxPopuli]

• localCopy: use with modals

  • here it is in Preact / Signals
  • some prose
  • another demo

• composing resources

• sanitizing HTML

• native JS State / encapsulation

Convert to tutorial:

• https://codesandbox.io/p/github/lepikhinb/example-nuxt-studio-gradient/master?file=/src/components/BaseCard.vue:1,1

[NullVoxPopuli]

How to do Polling with a resource:

import { resourceFactory, resource } from 'ember-resources';

class State {
  // this part I don't know, and is specific to your use case
  @tracked foo;
  @tracked bar;
}

const Status = resourceFactory((pollingInternal = 10_000) => {
  return resource(({ on }) => {
    let state = new State();
    async function getStatus() {
       // make your request here 
       state.foo = "foo";
    }

    let interval = setInterval(getStatus, pollingInterval);

    on.cleanup(() => clearInterval(interval));

    return state;
  });
});

and then in a component or something:

{{#let (Status) as |status|}}
  {{status.foo}}
{{/let}}

or in js

class {
  @use status = Status;
  
   get foo() {
    return this.status.foo;
  }
}

Wait for composition to be more widely supported in ember-resources?

const Status = resourceFactory((pollingInternal = 10_000) => {
  return resource(({ on, use }) => {
    let time = cell(0);
    let request = use(TrackedFunction(async () => {
       // ...
    }, time));

    let interval = setInterval(() => time.current++, pollingInterval);

    on.cleanup(() => clearInterval(interval));

    return () => request.current;
  });
});

but this isn't implemented yet for TrackedFunction, and I think may have some ergonomics / coherance issues when done this way -- still need to work through it.

[NullVoxPopuli]

Convert to tutorial:

• Dependent Select dropdowns

[NullVoxPopuli]

Convert to tutorial:

• using d3 in modifiers

[NullVoxPopuli]

Fancy CSS effects

• input focus effect from @evoactivity - here
  • codepen
  • also, it'd be good to support <style lang="postcss">

[NullVoxPopuli]

If you absolutely must

• effects

[NullVoxPopuli]

Topics to cover

• pagination
• data sorting
• component patterns https://emberjs-1.gitbook.io/ember-component-patterns/
• component composition
  • passing components
    • multiple, single
  • provider component
  • components as arguments
  • contextual components
  • blocks
  • how to avoid prop drilling
  • element-helper: Cant set attributes tildeio/ember-element-helper#68
• form validation

[NullVoxPopuli]

Convert to tutorial:

• timers / intervals: a countdown
• debounce w/ initial -- explain the return fn - compare to original implementation

[NullVoxPopuli]

more glimmer features:

• unbound

j/k: https://discuss.emberjs.com/t/the-status-of-unbound/11187

no one should use this

[NullVoxPopuli]

Integrations with bonkers libraries

• MathJax

[NullVoxPopuli]

"an" implementation for throttle here

[NullVoxPopuli]

casting:

@value={{String f.value}}
@value2={{Boolean f.value}}

[NullVoxPopuli]

Conditional attribute rendering: https://limber.glimdown.com/edit?c=MQAgMglgtgRgpgJxAUQCYQC4HsEChfCgCCGGCEMArhnCAnAHaqIQMDm%2BA8gA6MgYALWgGMsDAM5YANrWwhxcWvSaI4qEFmrdquAAb62AK3EgpEAG5xcAHhpRuUgIY0AfDdbaMIKJSkYIDnAAvADeIQBmjlIKAL4xIKjOjgC0ANasqEEARJHRcFn8AJ682eEQMllu1h7U3r7%2BgaEhZJRwcQlJaRnZLflFJTnl%2BVU1Xj5%2BATJNlCplDGrtiRgp6UzZM8xzagUYxcGDFSMMnnUTjWEMvlKLnauZWZdSUjt7pUOV7se14w1TYVlZG7LLprLJwey7ZLiMisNgvAZlQ42AD0dgczjgbn0ulwQA&format=glimdown

[NullVoxPopuli]

Reactive collections: https://limber.glimdown.com/edit?c=MQAgSgpghgxgLgSwG4RAZQnA9AWSgBwChCALOOfAZwC4ss4B3BciAJwDoYB7AWy3wCurAUgBWAEwhIslOFDgDKWAIwB2AMzKAbAA5VO9QCYtWgAwAWZeYCcy68QAGTgOajKIADbIIhBD3xcrHAgAN4gACqssADWEOJ4%2BAA0EVEwseIYwQC%2BIABmrLwgAORwqekAtABGAggecOUIAHaURQDcvv6BwWFcjSA5%2BYVFAAIQPJVsWDxc4gi5CGxtxB6YIJSrALwgjRAMKTFxmQAUAJTtK8E8BCBbO3uRB-EEp%2B2EuQKN8Ai9IFDi4uEuMcTqFCCA1ph2H9xEc8HASOwoo1xLxTmdCFk3h8vj9oYCEqdQeCrvh2Os4LD5AikSieKdkg4kFAPAIIOUACQhOHUqDI1EnLIOdGYwgAHjgY3wHnkEAAfGCQKL5hAPOJybLRStnBBkbLyaKsFqdeJ5eDwaLquQfiEQj8ijAvGkir9-oDMlksrKAIL-A2WuC9DWVVims024DQGAkCHBKDuAA%2BzDG8Y9CrN4JtSZ4HotIbToRCWEjJFT5qwytV6oVCqVC0rmA1Rt1JINTZN%2BYtAitfRtdodCCdLoBXASHu9vqw-sDudDGZCEdgJAafRJvwTsQAniAmSyICnMemwyFNx6QNQCzvWTng7OC0XF8vS4ry3W1Q3iAaJf5pRL5U4HEAA&format=glimdown

[NullVoxPopuli]

The lifecycle of resources

[NullVoxPopuli]

Custom reactive collections that are efficient on memory
demo here

[NullVoxPopuli]

Passing the constantly-reactive value from a resource to a helper
demo here

and the short way:
demo here

[NullVoxPopuli]

From socials:

• is @cached getters / Formulas / and/or techniques for only triggering a tracked value only if it actually has changed.
• data loading section could use more examples: ember-data, ember-concurrency, and custom logic (a la trackedfunction). Especially highlighting footguns, entanglement of tracked state, etc

[NullVoxPopuli]

add proper <style> tutorial chapters.

• see: Add to the Glimmer / <template> tutorial soxhub/ember-scoped-css#36
• and: https://github.com/cardstack/glimmer-scoped-css/blob/main/glimmer-scoped-css/src/postcss-plugin.ts

hopefully one of those two libraries allows for browser-only usage