Skip to content

Instantly share code, notes, and snippets.

Avatar

Jeremy Keith adactio

View GitHub Profile
@adactio
adactio / giveFeedback.js
Last active Sep 30, 2020
An unobtrusive animation effect for providing feedback to the user.
View giveFeedback.js
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
/*
This function takes two arguments:
element: a reference to a DOM node in the document e.g. a button.
feedbackContent: a string of text or HTML.
An example of usage would be:
document.querySelector('button').addEventListener('click', function() {
@adactio
adactio / sharebutton.js
Last active Sep 30, 2020
A polyfill for `button type="share"`
View sharebutton.js
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
/* Use <button type="share"> in your HTML.
Include this JavaScript in a <script> element on the same page or in an external script.
The script checks for three ways of sharing:
1. Native support for <button type="share">.
2. Support for the JavaScript Web Share API.
3. A mailto: link.
This will share the current URL and page title.
@adactio
adactio / submitFormFromDatalist.js
Last active Sep 30, 2020
HTML's datalist element autocompletes. This script is my attempt to get it to autosubmit as well.
View submitFormFromDatalist.js
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function (win, doc) {
'use strict';
// Cut the mustard
if (!doc.querySelectorAll || !doc.querySelectorAll('input[list]') || !win.HTMLDataListElement || !win.addEventListener){
return;
}
// Loop through each input element with a list attribute
@adactio
adactio / getEmbedCode.php
Created Mar 24, 2020
A PHP function to return an oEmbed result from a URL.
View getEmbedCode.php
<?php
function getEmbedCode($url="") {
$return = '';
$providers = array(
'flickr.com' => 'https://www.flickr.com/services/oembed/',
'huffduffer.com' => 'https://huffduffer.com/oembed',
'instagram.com' => 'https://api.instagram.com/publicapi/oembed',
@adactio
adactio / indyMap.js
Created Oct 21, 2019
Scrape the current page for h-geo data and plot the result as a polyline on a Stamen watercolour map.
View indyMap.js
(function (win, doc) {
win.addEventListener('load', function() {
var latlons = [];
doc.querySelectorAll('.h-geo').forEach( function(geo) {
var lat = geo.querySelector('data.p-latitude').getAttribute('value');
var lon = geo.querySelector('data.p-longitude').getAttribute('value');
if (lat && lon) {
latlons.push([lat, lon]);
}
});
@adactio
adactio / timestampComparison.js
Last active Jul 30, 2019
Compare server and client timestamps
View timestampComparison.js
// Generate a timestamp (in seconds) on the server. This won't change if the page is served from a cache.
var serverTimestamp = <?php echo time(); ?>;
// Create a new Date object from the local date and time on the client.
var localDate = new Date();
// Convert the local date and time to Universal Time (same as the server).
var localUTCString = localDate.toUTCString();
// Create a new Date object from the UTC date and time on the client.
var UTCDate = new Date(localUTCString);
// Generate a timestamp (in seconds) from the UTC date and time on the client.
var clientTimestamp = UTCDate.getTime() / 1000;
@adactio
adactio / beforeInstallPrompt.js
Created Aug 3, 2018
Show a dismissable option to add The Session to the home screen (only shown to logged in users).
View beforeInstallPrompt.js
(function (win, doc) {
win.addEventListener('beforeinstallprompt', function (e) {
e.preventDefault();
var deferredPrompt = e;
var insertionPoint = doc.querySelector('main .contents');
insertionPoint.insertAdjacentHTML('afterbegin',`
<div class="feedback" role="dialog" aria-labelledby="homescreen">
<h2 id="homescreen">Install The Session</h2>
<p>Would you like to add The Session to your home screen?</p>
<button class="back">No, thanks</button>
@adactio
adactio / trimCache.js
Last active Aug 17, 2020
A recursive function to limit the number of items in a specified cache.
View trimCache.js
// Limit the number of items in a specified cache.
function trimCache(cacheName, maxItems) {
caches.open(cacheName)
.then( cache => {
cache.keys()
.then(keys => {
if (keys.length > maxItems) {
cache.delete(keys[0])
.then( () => {
trimCache(cacheName, maxItems)
@adactio
adactio / minimal-serviceworker.js
Last active Sep 3, 2020
An attempt at a minimal viable service worker.
View minimal-serviceworker.js
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)
const cacheName = 'files';
@adactio
adactio / playSparkline.js
Last active Apr 6, 2020
A function to convert numbers into sound.
View playSparkline.js
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// Pass in an array of numbers ranging from 0 to 20.
function playSparkline(notes) {
if (!window.AudioContext && !window.webkitAudioContext) {
return;
}
var playing = null;
You can’t perform that action at this time.