honsa.ch honsa

CSS animation (walking man)

Bernard Bernoulli (The Day of the Tentacle) walking with CSS animations over Monkey Island background, using CSS3 steps() and audio HTML5 (add autoplay to audio tag for play sound).

Forked from Manz's Pen Monkey Island CSS Animation.

A Pen by honsa on CodePen.

License.

Installing Xdebug for XAMPP with PHP 7.x

Requirements

XAMPP for Windows: https://www.apachefriends.org/download.html
The VC14 builds require to have the Visual C++ Redistributable for Visual Studio 2015 x86 or x64 installed
The VC15 builds require to have the Visual C++ Redistributable for Visual Studio 2017 x64 or x86 installed

Setup

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

	#!/bin/bash
	# from https://chromium.woolyss.com/
	# and https://gist.github.com/addyosmani/5336747
	# and https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
	sudo apt-get update
	sudo apt-get install software-properties-common
	sudo add-apt-repository ppa:canonical-chromium-builds/stage
	sudo apt-get update
	sudo apt-get install chromium-browser
	chromium-browser --headless --no-sandbox http://example.org/

	function simulateDragDrop(sourceNode, destinationNode) {
	var EVENT_TYPES = {
	DRAG_END: 'dragend',
	DRAG_START: 'dragstart',
	DROP: 'drop'
	}

	function createCustomEvent(type) {
	var event = new CustomEvent("CustomEvent")
	event.initCustomEvent(type, true, true, null)

	I
	1100 version
	JOY

	OS: Windows
	Name: Saitek X52 Pro Flight Control System
	Display: Saitek X52 Pro

	Assignments:
	--------------------------------------------------------------

	$(function () {
	"use strict";

	// for better performance - to avoid searching in DOM
	var content = $('#content');
	var input = $('#input');
	var status = $('#status');

	// my color assigned by the server
	var myColor = false;

	BEGIN
	SET @tag = NEW.slug;

	If length(@tag) >= 3 THEN
	SET @ruleTitle = CONCAT('title matches " ', @tag,' "');
	SET @ruleContent = CONCAT('content matches " ',@tag,' "');
	INSERT INTO wallabag_tagging_rule (config_id,rule,tags) VALUES (1,@ruleTitle, @tag);
	INSERT INTO wallabag_tagging_rule (config_id,rule,tags) VALUES (1,@ruleContent, @tag);
	END IF;
	END

	<!DOCTYPE html>
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
	body {
	background: repeat url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/7QCIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAGscAVoAAxslRxwCAAACAAAcAnQAV8KpIENoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbGQgLSBodHRwOi8vd3d3LnJlZGJ1YmJsZS5jb20vcGVvcGxlL0NoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAA

	document.getElementsByTagName('button')[0].onclick = function () {
	scrollTo(document.body, 0, 1250);
	}

	function scrollTo(element, to, duration) {
	var start = element.scrollTop,
	change = to - start,
	currentTime = 0,
	increment = 20;