Skip to content

Instantly share code, notes, and snippets.

🏃
Happy to help if I can!

Chris Krycho chriskrycho

🏃
Happy to help if I can!
Block or report user

Report or block chriskrycho

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
bleh: [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@chriskrycho
chriskrycho / overview.md
Last active May 7, 2019
principled forms ideas
View overview.md

A principled model for forms

Over the past two years, we’ve experimented with a bunch of different ways to build forms, including the whole range from what we might call mutate all the things! to do nothing without an action! Each of those ends of the spectrum has significant pain points. Indeed: we recently built another couple of large forms, one of which used lots of mutability and one of which did exactly the opposite: modifying everything via actions. Both had serious pain points. Thinking on that, plus Danielle Adams’ EmberConf talk “Mastering the Art of Forms”, crystallized a couple things for me into what I think is a coherent way of approaching forms in general. So here we go:

  1. Every form has its own model, where the model is a data structure representing each form field’s type, current value, validation rules, and current validity. The form validity is the composition of the validity of all its fields using the validations.
  2. If an input chan
View components.tasty-pancakes.js
import Ember from 'ember';
import layout from '../templates/components/yummy-waffles';
export default Ember.Component.extend({
layout
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
plainOldMethod() {
alert(`this is totally bound: ${this.appName}`)
}
});
@chriskrycho
chriskrycho / cloudSettings
Last active May 6, 2019
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2019-05-06T13:25:48.006Z","extensionVersion":"v3.2.9"}
View components.the-wrapper.js
import Component from '@ember/component';
import { inject } from '@ember/service';
export default Ember.Component.extend({
myService: inject(),
clear() {
this.myService.clear();
},
@chriskrycho
chriskrycho / alt-maybe.ts
Created Dec 1, 2018
Thinking about `Maybe` and TS and structural typing and…
View alt-maybe.ts
// A spike: `Maybe` for a pure-FP approach, which doesn't require a container
// type, and which could provide helper functions just as True Myth does today.
// Most of the mechanics here are the same, but it drops the container types in
// favor of just using TS's knowledge of `null` and `undefined`.
//
// The big downside is that people *can* still use `!` or explicit casts to get
// out of this; with the container types those kinds of coercions simply aren't
// allowed.
//
// A related question: what would something like `Either` look like in this kind
View controllers.application.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';
import { action, computed } from '@ember-decorators/object';
export default class ApplicationController extends Controller {
init() {
super.init(...arguments);
const initial = [
{ emailAddress: 'hello@example.com' },
View components.counting-textarea.js
import Component from '@ember/component';
import { set } from '@ember/object';
import { action, computed } from '@ember-decorators/object';
import { layout, classNames } from '@ember-decorators/component';
import hbs from 'htmlbars-inline-precompile';
const WORDS_PER_SEC = 200 / 60; // Assumption: 200 words per minute
export class CountingTextareaManager {
constructor(str) {
@chriskrycho
chriskrycho / awesome-thing.ts
Created Aug 29, 2018
Our current mirage types at work
View awesome-thing.ts
import Mirage, { faker } from 'ember-cli-mirage';
export default class AwesomeThingFactory extends Mirage.Factory.extend({
id(i: number) {
return i;
},
name: faker.hacker.noun,
city: 'Buffalo',
state: 'NY',
}) {}
You can’t perform that action at this time.