Skip to content

Instantly share code, notes, and snippets.

View ryanmorr's full-sized avatar

Ryan Morr ryanmorr

View GitHub Profile
@ryanmorr
ryanmorr / unload.js
Last active March 29, 2024 00:30
The MDN recommended way of executing unload code
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon#sending_analytics_at_the_end_of_a_session
const callbacks = [];
function unload(callback) {
callbacks.push(callback);
};
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
@ryanmorr
ryanmorr / state-generator.js
Last active March 29, 2024 00:30
Simple redux-style state machine via a generator function
function *stateGenerator(state, reducer) {
let action;
while (true) {
if (action) {
state = reducer(state, action);
}
action = yield state;
}
}
@ryanmorr
ryanmorr / raf-engine.js
Last active April 2, 2024 06:45
Simple abstraction for using requestAnimationFrame
let raf = 0;
const animations = [];
function remove(animation) {
const index = animations.indexOf(animation);
if (index > -1) {
animations.splice(index, 1);
}
}
@ryanmorr
ryanmorr / pathfinder.js
Last active March 29, 2024 03:11
Get and set deeply nested object properties via paths
const has = {}.hasOwnProperty;
function getPath(root, tester, path = []) {
for (const key in root) {
if (has.call(root, key)) {
const value = root[key];
if (tester(key, value) === true) {
path.push(key);
return path;
}
@ryanmorr
ryanmorr / is-constructable.js
Last active March 29, 2024 00:30
Detect if a function is a constructor
// https://stackoverflow.com/a/46759625
function isConstructable(fn) {
try {
Reflect.construct(function () {}, [], fn);
return true;
} catch (e) {
return false;
}
}
@ryanmorr
ryanmorr / breakpoints.css
Created January 30, 2024 17:10
Some default CSS breakpoints inspired by common device resolutions
@media (min-width: 640px) {
/* Small */
}
@media (min-width: 768px) {
/* Medium */
}
@media (min-width: 1024px) {
/* Large */
@ryanmorr
ryanmorr / script-data.js
Last active January 30, 2024 08:44
Pass data from an HTML script tag to JavaScript
const JSON_RE = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/;
function parseData(data) {
if (data == null || data === 'null' || data === 'undefined' || data === '') {
return null;
}
if (data === 'true') {
return true;
}
if (data === 'false') {
@ryanmorr
ryanmorr / parse-html.js
Last active May 23, 2024 07:19
Parse an HTML string into a document fragment
const cache = new Map();
const template = document.createElement('template');
function parseHTML(html) {
if (cache.has(html)) {
return cache.get(html).cloneNode(true);
}
template.innerHTML = html;
const content = template.content;
cache.set(html, content);
@ryanmorr
ryanmorr / is-mobile.js
Last active January 26, 2024 18:11
Experimental new API to detect mobile devices
// Spec: https://wicg.github.io/ua-client-hints
// Support: https://caniuse.com/mdn-api_navigator_useragentdata
const isMobile = navigator.userAgentData.mobile; //=> true/false
@ryanmorr
ryanmorr / timezone.js
Last active January 26, 2024 16:52
Get the timezone of the client
// Get the IANA timezone
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// My result
console.log(timezone); //=> "America/Toronto"