Skip to content

Instantly share code, notes, and snippets.

Avatar

Thomas Gossmann gossi

View GitHub Profile
View index.html
Text w/ Date: <input type="text" inputmode="date">
Text w/ Numeric: <input type="text" inputmode="numeric">
Date: <input type="date">
View controllers.application\.js
import Controller from '@ember/controller';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
@action
sayHello() {
console.log('hellooooooo');
}
View routes.application\.js
import Route from '@ember/routing/route';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ApplicationRoute extends Route {
@tracked foo = 'foo';
get bar() {
return `${this.foo} bar`;
}
@gossi
gossi / invoke-modifier.ts
Created Dec 5, 2019
{{on "click" ...}} vs {{invoke ...}} in regards to a11y
View invoke-modifier.ts
import Modifier from 'ember-modifier';
import { action } from '@ember/object';
interface InvokeArgs {
positional: [() => void],
named: {}
}
/**
* Invoke modifier:
@gossi
gossi / idea.md
Last active Jun 10, 2019
Concept: Ember Pages vs Route/Controller
View idea.md

In response to: https://gos.si/blog/ember-2019-reduce-complexity/

The idea in short

  1. Keep routing as-is
  2. Delete Route and Controller
  3. Replace with Page
  4. Page extends a glimmer component with special sauce to handle transitions and (query) params

Imagine the following layout (yeah, I like MU):

View input-event-demo.ts
import { CompatibleInputEvent, IS_INPUT_SUPPORTED, normalizeInputEvent } from 'event-support';
// assuming `element` is a reference to an <input> elem
element.addEventListener('keydown', (event: KeyboardEvent) => {
const e = normalizeInputEvent(event);
if (!IS_INPUT_SUPPORTED || event.key.length > 1) {
handleEvent(e);
}
@gossi
gossi / normalize-input-event.ts
Created May 3, 2019
Event Support: normalize-input-event
View normalize-input-event.ts
export const normalizeInputEvent = function(event: KeyboardEvent | InputEvent): CompatibleInputEvent {
const e: CompatibleInputEvent = {
originalEvent: event
};
if (event instanceof KeyboardEvent) {
if (event.key === 'Backspace') {
e.inputType = 'deleteContentBackward';
e.navigationType = 'cursorLeft';
} else if (event.key === 'Delete') {
@gossi
gossi / compatible-input-event.ts
Created May 3, 2019
Event Support: CompatibleInputEvent
View compatible-input-event.ts
/**
* A normalized event from InputEvent and KeyboardEvent that works from ie11
* over modern browsers to android browsers (because that beast is worse than ie6)
*/
export interface CompatibleInputEvent {
data?: string;
inputType?: string;
navigationType?: string;
originalEvent: KeyboardEvent | InputEvent;
}
@gossi
gossi / is-input-supported.ts
Last active May 3, 2019
Event Support: is-input-supported
View is-input-supported.ts
// Reference for InputEvent: https://w3c.github.io/input-events/#interface-InputEvent
export const IS_INPUT_SUPPORTED = (function() {
try {
// just kill browsers off, that throw an error if they don't know
// `InputEvent`
const event = new InputEvent('input', {
data: 'xyz',
inputType: 'deleteContentForward'
});
let support = false;
@gossi
gossi / .explanation.md
Last active May 1, 2020
Ember Single File Component (markdown approach)
View .explanation.md

A syntax we are widely used to write is markdown, which also has a syntax to write blocks of code. In this variant of a potential SFC thingy, the only allowed "top-level-syntaxes" are code blocks. Based on the language they are assigned script, template or style. Everything other than code blocks is ignored (= comment)

References