Skip to content

Instantly share code, notes, and snippets.

Avatar

Devin Weaver sukima

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

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 Mar 14, 2022
Very small DOM micro-lib using Proxy
View simple-dom.js
/*******************************************/
/* 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
View controllers.application\.js
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 Jul 28, 2021
Vanilla Select in out-of-box Ember
View controllers.application\.js
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.
View components.my-component\.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked counter = 0;
constructor() {
super(...arguments);
this.startPolling();
}
willDestroy() {
View components.my-component\.js
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
Batching ember-concurrency
View controllers.application\.js
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 });
}
View components.example-manager\.js
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;
View components.my-component\.js
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.`;
}
}
View controllers.application\.js
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() {