Skip to content

Instantly share code, notes, and snippets.

View ryanmorr's full-sized avatar

Ryan Morr ryanmorr

View GitHub Profile
@ryanmorr
ryanmorr / tiny-vdom.js
Last active March 29, 2024 06:38
A tiny virtual DOM implementation
function updateAttribute(element, name, newVal, oldVal = null) {
if (name[0] === 'o' && name[1] === 'n') {
name = name.slice(2).toLowerCase();
if (newVal) {
element.addEventListener(name, newVal);
}
if (oldVal) {
element.removeEventListener(name, oldVal);
}
} else if (newVal == null || newVal === false) {
@ryanmorr
ryanmorr / callback-middleware-proxy.js
Last active March 29, 2024 06:37
Add middleware to any callback function
function callbackMiddlewareProxy(callback) {
const middleware = [];
const push = middleware.push.bind(middleware);
return new Proxy(callback, {
get: (target, prop) => {
if (prop === 'use') {
return push;
}
return target[prop];
},
@ryanmorr
ryanmorr / speech-synthesis.js
Last active January 16, 2024 07:45
JavaScript can talk
const msg = new SpeechSynthesisUtterance();
msg.voiceURI = 'native';
msg.text = 'Hello World';
msg.lang = 'en-US';
speechSynthesis.speak(msg);
@ryanmorr
ryanmorr / shadows.css
Last active January 29, 2024 07:23
Some shadows I like of increasing depths
.shadow-light {
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.23), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.shadow-medium {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.16);
}
.shadow-heavy {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
@ryanmorr
ryanmorr / body-shadow.css
Created January 16, 2024 08:02
Add a shadow to the body
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
z-index:100;
}
@ryanmorr
ryanmorr / vertical-rule.css
Created January 16, 2024 20:06
Vertical rule to separate things
.vr {
display: inline-block;
align-self: stretch;
width: 1px;
min-height: 1em;
background-color: currentcolor;
opacity: 0.25;
}
@ryanmorr
ryanmorr / svg-icon.css
Last active January 16, 2024 21:01
Allow an SVG icon to seamlessly blend with text
/* Courtesy of: https://www.24a11y.com/2018/accessible-svg-icons-with-inline-sprites/ */
.svg-icon {
/* Place the icon on the text baseline. */
position: relative;
top: .125em;
/* Prevent the icon from shrinking inside a flex container. */
flex-shrink: 0;
/* Scale the icon to match the font-size. */
height: 1em;
@ryanmorr
ryanmorr / at-rule-support.js
Last active January 22, 2024 19:44
Check if the browser supports some cutting edge at-rules
function supportsContainerQueries() {
return !!window.CSSContainerRule;
}
function supportsCustomPropertyDefinitions() {
return !!window.CSSPropertyRule;
}
function supportsScopedCSS() {
return !!window.CSSScopeRule;
@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"
@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