SirPepe

import { prop, attr, bool, string, formDisabled, listen } from "@sirpepe/ornament";
export * from "@sirpepe/ornament";

const CONFIG_KEY = Symbol();

const INTERNALS_MAP = new WeakMap();

const defaultConfig = {
  getElementInternals(element) {
    let internals = INTERNALS_MAP.get(element);

SirPepe

/**
 * Flexbox-Übung
 */

SirPepe

Grundgesetz für Web Components
------------------------------

§ 1 Web Components sind HTML-Elemente und müssen sich wie HTML-Elemente verhalten. Sie sind kein 1:1-Ersatz für andere Komponenten-Konzepte, sondern universelle, einfach zu benutzende Erweiterungen des HTML-Vokabulars. Ihre Attribute und APIs müssen so konzipiert sein, das sie HTML-Autoren nicht überraschen. Das stellt sicher, dass Web Components universelle Plugins sind, die in jedem Browser und Framework gut funktionieren. Insbesonders zu beachten ist:

  § 1.1 Web Components müssen einen nützlichen Use Case anbieten, der allein mit HTML-Mitteln umgesetzt werden kann. JavaScript-APIs können den Funktionionsumfang einer Web Component beliebig erweitern, dürfen aber nicht zur Pflicht werden (vgl. <video>). Das stellt sicher, dass jeder Mensch, der ein bisschen HTML kann, Web Components nutzen kann.

  § 1.2 Web Components müssen Fail-Safe sein. Sie dürfen keine JavaScript-Exceptions werfen sondern müssen wie native HTML-Elemente mit jeder Art von 

SirPepe

/**
 * Vorlage Selektor-Übung
 */

SirPepe

/* Source: http://nicolasgallagher.com/micro-clearfix-hack/ */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {

SirPepe

// Init boilerplate
function CanvasQuery(c){
	"use strict";
	if(!(this instanceof CanvasQuery)) return new CanvasQuery(c);
	if(typeof c == "string"){
		var canvas = document.getElementById(c);
		if(!canvas) throw new Error("Canvas element #" + c + " doesn't exist");
	}
	if(typeof canvas == "undefined"){
		if(c.getContext) canvas = c;

SirPepe

// Datenbank anlegen
var request = indexedDB.open('html5', 1);

// Änderungs/Erzeugungs-Event
request.onupgradeneeded = function(){
  console.log('Datenbank angelegt');
  var db = this.result;
  if(!db.objectStoreNames.contains('features')){
    store = db.createObjectStore('features', {
      keyPath: 'key',

SirPepe

module.exports = function(grunt){

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json')

  });

  grunt.loadNpmTasks('grunt-contrib');

SirPepe

/**
 * Unter-Überschriften in Dachzeilen verwandeln (breite Version)
 */

header {
  display: flex;
  flex-direction:column-reverse;
}

SirPepe

/**
 * Unter-Überschriften in Dachzeilen verwandeln
 */

header {
  display: flex;
  flex-direction:column-reverse;
}