Skip to content

Instantly share code, notes, and snippets.

Avatar

EJ Mason mxmason

View GitHub Profile
@mxmason
mxmason / webflow-disable-scroll-prefers-reduced-motion.js
Last active Jan 15, 2021
These snippets completely disable the smooth-scroll animation that is present on all Webflow sites. Animated scrolling can disorient or surprise users, or even cause motion sickness!
View webflow-disable-scroll-prefers-reduced-motion.js
// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system
// 1. Place this snippet before the end of the <body> tag;
// NOT in the <head> tag!
// 2.Make sure it's inside $(function() {})!
$(function() {
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mediaQuery.matches) $(document).off('click.wf-scroll');
})
View a-better-form.markdown

A Better Form™

Don't mind this. I made it because I was mad about a specific thing that I saw on the Internet.

A Pen by EJ Mason on CodePen.

License.

View cryptoUUID.js
// Using the web crypto API is a quick way to get a pseudo-random number.
// It's is experimental in IE11 and namespaced behind a prefix.
var crypto = window.crypto || window.msCrypto;
// Generates a uuidv4-compliant string
// credit: https://gist.github.com/jed/982883
function uuidv4() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(
c ^
View getFocusableChildren.js
const FOCUSABLE_ELEMENTS = `
a[href]:not([tabindex^="-"]):not([inert]),
area[href]:not([tabindex^="-"]):not([inert]),
input:not([disabled]):not([inert]),
select:not([disabled]):not([inert]),
textarea:not([disabled]):not([inert]),
button:not([disabled]):not([inert]),
iframe:not([tabindex^="-"]):not([inert]),
audio:not([tabindex^="-"]):not([inert]),
video:not([tabindex^="-"]):not([inert]),
View pe-generic-setup-demo.html
<!-- External dependencies the component needs to run (optional) -->
<script src="https://unpkg.com/PATH_TO_FILE.js"></script>
<!-- Polyfill loaders - Will not execute for modern browsers -->
<!-- WebComponents -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-loader.js"></script>
<!-- JS features -->
<script src="https://polyfill.io/v3/polyfill.js?features=default"></script>
View soFetch.js
/**
* A small lib for fetching with query parameters.
* CREDIT: discussion in this issue thread: https://github.com/github/fetch/issues/256
* @param {String} url
* @param {Object} [opts={}] The init options for the fetch request
* @param {Object} [opts.params] The key-value pairs that will be used to build a query string
* @example
* // Makes a GET request to `foo.com`
* soFetch('https://foo.com');
* // Makes a GET request to foo.com with query params
View DSA_nodeploy.md

Data Structure and Algorithms: Full Stack Project

You've been asked to create a site for an animal shelter which allows adoption of cats and dogs. These are the only two animals allowed in the shelter. The adoption process works strictly on a first-in, first-out basis. People can adopt a cat, or a dog, or both, but they may only adopt the oldest one (by arrival time, not age) that is in the shelter.

The following instructions should guide you to through the project from start to finish. Be sure to follow them in the order!

If you’re the sort of person who likes a working example, you can see the working client and the working server for yourself.

Setting up

This app will use two distinct repositories: one for the client, and one for the server.

  • Create the parent directory for your app on your local machine: mkdir AnimalShelter