Skip to content

Instantly share code, notes, and snippets.


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';
sayHello() {
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 `${} bar`;
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 /
Last active Jun 10, 2019
Concept: Ember Pages vs Route/Controller

In response to:

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) {
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 / 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 / is-input-supported.ts
Last active May 3, 2019
Event Support: is-input-supported
View is-input-supported.ts
// Reference for 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 /
Last active May 1, 2020
Ember Single File Component (markdown approach)

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)