johnmellor’s gists

johnmellor / index.html

Last active November 4, 2019 17:56

Minimal push notifications demo (sends via XHR)

	<!doctype html>
	<!-- View this at https://rawgit.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf/raw/ -->
	<meta name=viewport content="initial-scale=1">
	<a href="https://gist.github.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf">View code</a><br>
	<a href="https://rawgit.com/johnmellor/d792819c4faa24a190bb7ea0138fba3e/raw/">cURL variant</a>

	<p id="loading">Loading...</p>
	<div id="loaded" style="display: none">
	<p><strong>Endpoint:</strong> <output id="registration-id"></output>
	<p><button id="send-button">Send push</button><br>

johnmellor / index.html

Last active September 12, 2016 11:52

Minimal push notifications demo (sends via cURL)

	<!doctype html>
	<!-- View this at https://rawgit.com/johnmellor/d792819c4faa24a190bb7ea0138fba3e/raw/ -->
	<meta name=viewport content="initial-scale=1">
	<a href="https://gist.github.com/johnmellor/d792819c4faa24a190bb7ea0138fba3e">View code</a><br>
	<a href="https://rawgit.com/johnmellor/460bdac0c5b30832df898e67b4b7cedf/raw/">XHR variant</a><br><br>
	<code id="code">Loading...</code>
	<script>
	navigator.serviceWorker.register('sw.js');
	navigator.serviceWorker.ready.then(swr => {
	swr.pushManager.subscribe({

johnmellor / index.html

Last active September 16, 2016 12:35

Notification image demo

	<!doctype html>
	<!-- View this at https://rawgit.com/johnmellor/4d9d1d32d8c7915b63a48f462cceaf74/raw/ -->
	<meta name=viewport content="initial-scale=1">
	<a href="https://gist.github.com/johnmellor/4d9d1d32d8c7915b63a48f462cceaf74">View code</a><br><br>
	<button id="show">Show notification</button>
	<script>
	navigator.serviceWorker.register('sw.js');
	document.getElementById('show').addEventListener('click', event => {
	navigator.serviceWorker.ready.then(swr => {
	Notification.requestPermission(permission => {

johnmellor / index.html

Last active January 6, 2017 15:38

GCM/FCM server key tester

	<!doctype html>
	<!-- View this at https://rawgit.com/johnmellor/50624d8908af69e8f7aca40f5fbc7ba2/raw/ -->
	<meta name="viewport" content="initial-scale=1">
	<style>
	form { display: table; }
	form > label { display: table-row; }
	form > label > * { display: table-cell; }
	</style>

	<h1>GCM/FCM server key tester</h1>

johnmellor / toggle-dark-theme-bookmarklet.js

Last active January 21, 2023 00:55

Bookmarklet to toggle dark theme on any website

	javascript:
	/* Toggle dark theme. Tested in Chrome 108. */
	(()=>{
	var id = 'toggle-dark-theme-bookmarklet';
	var el = document.getElementById(id);
	if (el) { el.remove(); return; }
	document.head.insertAdjacentHTML('beforeend', `
	<style id="${id}">
	html {
	filter: invert(100%) hue-rotate(180deg);

johnmellor / hide-fixed-bookmarklet.js

Created April 25, 2023 21:50

Bookmarklet to hide fixed position elements and unlock scrolling; good for decluttering websites

	javascript:
	/* Hide fixed elements and unlock scrolling. */
	(()=>{
	/* Unlock scrolling. */
	for (let el of [document.documentElement, document.body]) {
	let cs = getComputedStyle(el);
	if (['hidden', 'clip'].includes(cs.overflowY)) el.style.setProperty('overflow', 'visible', 'important');
	if (cs.position === 'fixed') el.style.setProperty('position', 'static', 'important');
	}
	/* Hide fixed position elements. */

John Mellor johnmellor