SirPepe

import {
  subscribe,
  reactive,
  define as baseDefine,
  connected,
  debounce,
} from "@sirpepe/ornament";
import { html, htmlFor, svg, render } from "uhtml/keyed";
import { adoptStyles } from "./styles.js";

SirPepe

// Set up the easing function
import BezierEasing from "bezier-easing";
const ease = BezierEasing(0.25, 0.1, 0.25, 1);

function value(from, to, step, steps) {
  return from + (to - from) * ease(step / steps);
}

// Interpolate positions of text elements
function interpolateTextPositions(fromFrame, toFrame, steps, step) {

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

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

// Benötigt PhantomJS. Benutzung: $ phantomjs grab.js

var page = require('webpage').create();
page.viewportSize = {
  width: 10000,  // A0: 9933
  height: 15000  // A0: 14043
};

page.open('http://localhost/~peter/map/map.html', function(){
  setTimeout(function(){

SirPepe

/**
 * Lösung Adaptives Layout
 */
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }
#main, footer { clear: both; padding: 1em 0; }
footer { border-top: 1px solid #999; }
#main > section { float: left; width: 65%; }

SirPepe

/**
 * Übung Adaptives Layout
 */
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }
#main, footer { clear: both; padding: 1em 0; }
footer { border-top: 1px solid #999; }
#main > section { float: left; width: 65%; }

SirPepe

/* usage: node inbox.js -u [email protected] -p hunter2 */

var Q = require('q');
var minimist = require('minimist');
var inbox = require('inbox');
var Five = require("johnny-five");


function handleError(err){
  console.error(err);

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;
}