Skip to content

Instantly share code, notes, and snippets.

@SirPepe
SirPepe / decorator.js
Created November 30, 2023 08:51
@formElement
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
SirPepe / draft.txt
Created February 19, 2021 11:39
Grundgesetz für Web Components
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
SirPepe / grab.js
Created May 14, 2015 15:15
Karten-Grab
// 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
SirPepe / dabblet.css
Created May 4, 2015 15:47
Lösung Adaptives Layout
/**
* 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
SirPepe / dabblet.css
Created May 4, 2015 15:42
Übung Adaptives Layout
/**
* Ü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
SirPepe / inbox.js
Created July 8, 2014 13:42
Lights up an led when there's unread mail
/* usage: node inbox.js -u username@server.com -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);
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.loadNpmTasks('grunt-contrib');
@SirPepe
SirPepe / dabblet.css
Created November 11, 2013 11:36
Unter-Überschriften in Dachzeilen verwandeln (breite Version)
/**
* Unter-Überschriften in Dachzeilen verwandeln (breite Version)
*/
header {
display: flex;
flex-direction:column-reverse;
}
@SirPepe
SirPepe / dabblet.css
Created November 11, 2013 11:30
Unter-Überschriften in Dachzeilen verwandeln
/**
* Unter-Überschriften in Dachzeilen verwandeln
*/
header {
display: flex;
flex-direction:column-reverse;
}
@SirPepe
SirPepe / dabblet.css
Created August 14, 2013 13:00
Vorhang-Effekt (Lösung)
/**
* Vorhang-Effekt (Lösung)
*/
/* Container */
#Box {
position: relative;
background:blue;
color: blue;
text-align: center;