Webdesign links
Forms
- https://adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post/
- https://adamsilver.io/blog/live-validation-is-problematic/
- https://adamsilver.io/blog/where-to-put-buttons-on-forms/
{ | |
"openapi": "3.0.2", | |
"info": { | |
"title": "Ferry - waterfront-backend", | |
"version": "1.0.0" | |
}, | |
"servers": [ | |
{ | |
"url": "https:\/\/waterfront.sandwaveio.dev" | |
} |
import {HtmlBehaviorResource} from "aurelia-framework"; | |
const orig: (...args: any[]) => any = HtmlBehaviorResource.convention; | |
HtmlBehaviorResource.convention = function(name: string, ...args: any[]) { | |
if (name.endsWith("Component")) { | |
name = name.replace(/Component$/, "CustomElement"); | |
} | |
if (name.endsWith("Route")) { | |
name = name.replace(/Route$/, "CustomElement"); | |
} |
/** | |
* Vormt een wrapper om async operaties waarin de staat van de operatie | |
* bijgehouden wordt. | |
*/ | |
export class AsyncContext { | |
bezig = false; | |
mislukt = false; | |
geslaagd = false; |
// tslint:disable:align ban-types | |
export type DeepPartial<T> = | |
T extends Array<infer U> ? DeepPartialArray<U> : | |
T extends ReadonlyArray<infer V> ? DeepPartialReadonlyArray<V> : | |
T extends object ? DeepPartialObject<T> : | |
T; | |
export type DeepPartialNoMethods<T> = | |
T extends Array<infer U> ? DeepPartialArrayNoMethods<U> : | |
T extends ReadonlyArray<infer V> ? DeepPartialReadonlyArrayNoMethods<V> : |
import {decorateMethod} from "util/objects"; | |
export interface ConfirmUnloadConfig { | |
hasUnsavedChanges(): boolean; | |
getUnloadConfirmMessage(): string; | |
} | |
export function confirmUnload(viewModel: any): any { | |
decorateMethod(viewModel, "attached", function attached() { | |
const self: ConfirmUnloadConfig = this; |
<template> | |
<router-view></router-view> | |
</template> |
<template> | |
<div class="element-wrapper ${invoerFocus ? 'focus' : ''} ${invoerRegels.length >= 10 ? 'vol' : ''}" | |
e2e="wrapper" data-focus.bind="invoerFocus"> | |
<ol class="regelnummers" ref="regelnummers" e2e="regelnummer-wrapper" css="height: ${hoogte + 24}px"> | |
<li repeat.for="i of aantalGetoondeRegels" e2e="regelnummer" | |
data-actief.bind="invoerRegels.length > i && invoerRegels[i].trim() !== ''" | |
class="regelnummer ${invoerRegels.length > i && invoerRegels[i].trim() !== '' ? 'actief' : ''}"></li> | |
</ol> | |
<div class="invoer-wrapper"> | |
<textarea value.bind="invoer" ref="invoerElement" e2e="invoer" |
import {autoinject, bindable} from "aurelia-framework"; | |
declare const ga: ( | |
command: "send", | |
type: "event", | |
category?: string, | |
action?: string, | |
label?: string, | |
) => void; |
interface OperationQueue { | |
queue: Promise<void>; | |
} | |
export function makeOperationQueue(): OperationQueue { | |
return {queue: Promise.resolve()}; | |
} | |
export function queuedOperation(operationQueue: OperationQueue) { | |
return function(_target: any, _key: string, descriptor: TypedPropertyDescriptor<(...args: any[]) => any>) { |