Hexalys hexalys

Hacky way to detect if app was launched in standalone mode in Chromium (with manifest.json) without problems with `AppCache` (and possibly `ServiceWorker`).

As suggested on one of the Google Developers sites, one may use search params in start_url of the manifest.json to notify page about that it was launched in standalone mode: start_url: '/?standalone'.

This works well unless your page uses AppCache (or ServiceWorker). In case of AppCache, every url with different search params is treated as separate entry in cache. So if you have listed / path in AppCache and naively used start_url: '/?standalone' in your manifest.json, then your Web App won't work offline from the Home Screen.
_With ServiceWorker, however, there is few ways to fix this directly in its code, like ignoreSearch option for match() method (currently not supported in Chromium) or just traversing cache entries manually and comparing new URL(event.request.url).pathname with stored request `new URL(...).path

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

update

I've created a little repository that simply exposes the final utility as npm module.

It's called html-escaper

there is basically one rule only: do not ever replace one char after another if you are transforming a string into another.

	#!/usr/bin/env bash

	if [[ -x $(which php) ]]; then
	PHP_ICU_VERSION=$(php -r 'echo defined("INTL_ICU_VERSION") ? INTL_ICU_VERSION : "none";')
	echo "PHP ICU version: $PHP_ICU_VERSION"
	else
	echo 'WARNING: PHP not installed'
	PHP_ICU_VERSION=none
	fi

	# Description
	Piecing together lots of information from different sources, this covers setup and configuration for:

	1. Creating a self-signed, mulit-domain certificate for a development environment running OS X.
	2. Generating a multi-domain certificate signing request (CSR) for staging/production environments running on CentOS 7.
	3. Installing certificate and Apache configuration.

	This assumes all environments are running OpenSSL v.0.9.8f or later and Apache 2 with Server Name Indication (SNI) support. SNI is the bit of magic that allows one certificate to be valid to use with Virtual Hosts with different domains on one server. See Apache configuration link in the Sources section below for more information and a much better explanation on how it all works.

	# Development

	### No longer needed as of nginx-1.13.6-1.el7_4.ngx.x86_64.rpm from nginx.org
	### it was compiled against OpenSSL 1.0.2 from CentoOS 7.4 so it supports ALPN (HTTP2 works)

	yum -y groupinstall 'Development Tools'
	yum -y install wget openssl-devel libxml2-devel libxslt-devel gd-devel perl-ExtUtils-Embed GeoIP-devel rpmdevtools

	OPENSSL="openssl-1.0.2l"
	NGINX_VERSION="1.13.5-1"
	NJS_VERSION="1.13.5.0.1.13-1"

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>WebKit bug workaround: outside click of inline or floated contentEditable-elements focuses the element</title>
	<script>

	if (/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)) {
	document.addEventListener('DOMContentLoaded', function(){
	var fixEl = document.createElement('input');
	fixEl.style.cssText = 'width:1px;height:1px;border:none;margin:0;padding:0; position:fixed; top:0; left:0';
	fixEl.tabIndex = -1;

	interface AesGcmEncryptResult {
	readonly attribute ArrayBuffer ciphertext;
	readonly attribute ArrayBuffer tag;

	};

	interface BookmarkCollection {
	readonly attribute long length;

	any item(unsigned long index);

	// This list of common devices was put together from various online sources by me, Jan Keromnes.
	//
	// The device features are:
	// - name: The device brand and model(s).
	// - width: The viewport width.
	// - height: The viewport height.
	// - pixelRatio: The screen's pixel ratio (e.g. HiDPI > 1).
	// - userAgent: The device's UserAgent string on the web.
	// - touch: Whether the device's screen is touch-enabled.
	//

	# Create a new jail via Plesk
	# generated in /etc/fail2ban/jail.local
	[wp-auth]
	enabled = true
	filter = wp-auth
	action = iptables-multiport[name=NoAuthFailures, port="http,https"]
	logpath = /var/www/vhosts/system//logs/access*log
	/var/log/httpd/*access_log
	maxretry = 15

Hexalys hexalys

Hacky way to detect if app was launched in standalone mode in Chromium (with manifest.json) without problems with AppCache (and possibly ServiceWorker).

What forces layout / reflow

Element APIs

Getting box metrics

Hacky way to detect if app was launched in standalone mode in Chromium (with manifest.json) without problems with `AppCache` (and possibly `ServiceWorker`).