Sivan sivan

Prerequisites

gfind (via brew install findutils)
Time Machine drive mounted on your computer (or you can change path from standard /Volume/Time\ Machine\ Backups/Backups.backup.db/
Admin/sudo access in the OSX terminal

Script

Be sure to set the correct machine name. You can check the actual folder things are going into by looking in the backup location.
By default, it erases all backups older than 30 days. Adjust as desired.

Wordpress & Docker

This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command

$ docker-compose up -d

# To Tear Down
$ docker-compose down --volumes

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	javascript: Promise.all([import('https://unpkg.com/[email protected]?module'), import('https://unpkg.com/@tehshrike/[email protected]'), ]).then(async ([{
	default: Turndown
	}, {
	default: Readability
	}]) => {

	/* Optional vault name */
	const vault = "";

	/* Optional folder name such as "Clippings/" */

	<html>
	<head>
	<style>
	.item {width:300px; display: inline-block; }
	.item .itemtitle {font-weight:bold; font-size:2em;}
	.hidden {display:none;}
	</style>
	</head>
	<body>
	<h1>Amalgam Comics Characters</h1>

	.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}

	.flex.flex--reverse {
	-webkit-box-orient: horizontal;

	import android.content.Context;
	import android.content.SharedPreferences;
	import android.text.TextUtils;
	import android.util.Log;

	import java.io.*;
	import java.net.CookieStore;
	import java.net.HttpCookie;
	import java.net.URI;
	import java.net.URISyntaxException;

	var selector = 'img' // Replace this with the selector for the element you want to make transformable


	jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
	jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {

	(function() {
	var $, applyTransform, getTransform, makeTransformable;

	$ = jQuery;