Skip to content

Instantly share code, notes, and snippets.

View sukima's full-sized avatar

Devin Weaver sukima

View GitHub Profile
@sukima
sukima / ember-intl-lists.md
Created September 18, 2022 13:46
An enhanclement to handle internationalized lists in Ember.

Ember-intl uses the format.js library under the hood which uses the ICU Message Syntax. This syntax has many provisions for handling different types of interpolated data such as plural and select. But it lacks list formatting. Deep in the ICU Documentation it hints at the correct course of action:

Format the parameters separately (recommended)

You can format the parameter as you need before calling MessageFormat, and then passing the resulting string as a parameter to MessageFormat.

ICU Messages § Argument formatting

Luckily, JavaScript has a solution for this in the specs with [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc

@sukima
sukima / simple-dom.js
Last active May 2, 2024 05:56
Very small DOM micro-lib using Proxy
/*******************************************/
/* Version 1.0.0 */
/* License MIT */
/* Copyright (C) 2022 Devin Weaver */
/* https://tritarget.org/cdn/simple-dom.js */
/*******************************************/
/**
* This micro lib is a compact and simple method to interact with the DOM. It
* facilitates the query mechanisms that querySelector and querySelectorAll use
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
flat = {
'some.nested.keys': 'flat'
};
nested = {
some: {
nested: {
@sukima
sukima / controllers.application\.js
Created July 28, 2021 15:43
Vanilla Select in out-of-box Ember
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
@tracked selected = 2;
get isSelected() {
// The {{get}} helper will coerce values to strings. Thus
// an POJO lookup works even if the type is a number.
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked counter = 0;
constructor() {
super(...arguments);
this.startPolling();
}
willDestroy() {
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked counter = 0;
constructor() {
super(...arguments);
this.startPolling();
}
willDestroy() {
@sukima
sukima / controllers.application\.js
Last active May 5, 2021 17:14
Batching ember-concurrency
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { all, task } from 'ember-concurrency';
export default class ApplicationController extends Controller {
@task({ maxConcurrency: 10, enqueue: true })
*fetchCollection(item) {
return yield fakeResponse({ filename: item.filename });
}
@sukima
sukima / components.example-manager\.js
Last active May 10, 2021 07:45
Derived async manager
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
const tasks = new WeakMap();
class Task {
@tracked isLoading = true;
@tracked lastError;
@tracked result;
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked trackedValue = '';
get getterResult() {
return `Working '${this.trackedValue}' as expected.`;
}
}
import Controller from '@ember/controller';
import { task, timeout } from 'ember-concurrency';
export default class ApplicationController extends Controller {
@(task(function * () {
yield timeout(1000);
}))
fooTask;
get isLoading() {