Tutorial Todos

[NullVoxPopuli]

This issue is for collecting ideas, topics, and resources for expanding https://tutorial.glimdown.com.

Anyone is free to PR changes to the tutorial, and the more new to ember, or new to open source, the better.

Here are some example PRs for how others have contributed so far:

• feat: Arg Components #1680 (by @MichalBryxi)
• New tutorial chapter: dependent select dropdowns #1152 (by @MehulKChaudhari)
• Controlled Inputs #1758 (by me)

---

• 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:

• 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

[NullVoxPopuli]

ember / framework concepts:

• transitionTo is thennable
  • also managing qps without a controller (in a component)

[NullVoxPopuli]

OkLab Color Picker

[NullVoxPopuli]

nested reactivity