Skip to content

Instantly share code, notes, and snippets.

View nfreear's full-sized avatar

Nick Freear nfreear

47 followers · 165 following
View GitHub Profile
@nfreear
nfreear / was-errata.html
Created May 25, 2022 07:42
<!doctype html> <title> WAS test </title>
<style>
body { margin: 1rem auto; max-width: 35rem; padding: 0 .5rem; }
</style>
<h1> WAS test </h1>
<p><input type="reset" name="reset" value="Clear Form"></p>
@nfreear
nfreear / no-cookie-icon.svg
Last active May 24, 2022 17:16
No cookies | https://github.com/mozilla/fxemoji/blob/gh-pages/svgs/objects/u1F36A-cookie.svg
@nfreear
nfreear / infinite-content-scroll-trap.js.html
Created May 17, 2022 18:27
Infinite content / infinite scroll trap - HTML + Javascript.
<!doctype html> <title> Infinite content trap </title>
<style>
body { margin: 1rem auto; max-width: 35rem; }
button,
[ role *= button ] {
background: #eee;
border: 1px solid #ccc;
border-radius: 1px solid #ccc;
@nfreear
nfreear / fx-rate.live-region.js.html
Created May 11, 2022 21:01
FX Rate Live-Region Demo
<!doctype html> <title> Exchange rate live-region </title>
<style>
body { font: 1rem sans-serif; margin: 1rem auto; max-width: 36rem; }
label { display: inline-block; width: 10rem; }
input { font-size: inherit; padding: .2rem 1rem; }
:invalid { background-color: pink; border-color: red; }
/* For screen readers.
*/
@nfreear
nfreear / calculate-countdown.js
Last active May 6, 2022 17:48
Calculate countdown in days, hours, minutes and seconds | https://geeksforgeeks.org/create-countdown-timer-using-javascript/
/**
* Calculate countdown in days, hours, minutes and seconds.
*
* @author Nick Freear, 06-May-2022.
*
* @see https://geeksforgeeks.org/create-countdown-timer-using-javascript/
*/
console.log('Countdown:', calcCountdown('2022-05-19'));
console.log('Countdown:', calcCountdown('dec 31, 2022 00:00:00.000 '));
@nfreear
nfreear / aria-live-region-monitor.bookmarklet.js
Created May 3, 2022 16:38
ARIA Live Region Monitor Bookmarklet Javascript
/*!
ARIA Live Region Monitor Bookmarklet.
NDF, 29-April-2022.
https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom,
https://developer.mozilla.org/en-US/docs/web/api/mutationobserver,
https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm,
*/
@nfreear
nfreear / ou.jquery.oembed.js
Created April 18, 2022 20:52
jQuery oEmbed plugin - The Open University | https://embed.open.ac.uk/scripts/jquery.oembed.js
/*auto-generated: 2022-04-18T21:50:42+01:00 */
/*!
* jquery oembed plugin
*
* Copyright (c) 2009 Richard Chamorro
* Licensed under the MIT license
*
* Author: Richard Chamorro
*/
@nfreear
nfreear / keyboard-trap.html
Created April 15, 2022 07:02
Demo of a keyboard trap.
<!doctype html> <title> Keyboard trap </title>
<style>
* {
outline-offset: 2px;
}
input {
X-border-radius: .2rem;
font-size: medium;
@nfreear
nfreear / animated-glow.html
Created March 30, 2022 19:32
Animated glow on focus - CSS + Javascript
<!doctype html> <title> Animated Glow </title>
<style>
@keyframes glowing {
0% {
X-background-color: #2ba805;
X-box-shadow: 0 0 5px #2ba805;
outline-width: 0;
}
@nfreear
nfreear / grammar-spelling-test.html
Created March 18, 2022 22:12
Grammar and spelling error tests
<!doctype html><html lang="en"> <title> Grammar and spelling error tests </title>
<h1> Grammar and spelling error tests </h1>
<ul class="test" contenteditable="true">
<li> I cantain spelling errors. </li>
<li> And, Ive got a missing apostrophe. </li>