Skip to content

Instantly share code, notes, and snippets.

View martynchamberlin's full-sized avatar

Martyn Chamberlin martynchamberlin

View GitHub Profile
@martynchamberlin
martynchamberlin / index.html
Last active December 18, 2021 23:04
A six-input 2FA form that behaves as Apple’s
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
</head>
<body>
<div class="wrap">
<input inputmode="decimal" type="number" maxlength="1" />
<input inputmode="decimal" type="number" maxlength="1" />
@martynchamberlin
martynchamberlin / serialize.ts
Created July 19, 2021 22:31
Serialize a series of async requests called simultaneously
const promises: Record<string, Promise<void>> = {};
/**
* Serializes a series of promise-returning function calls to ensure they
* occur linearly (as FIFO) rather than concurrently. To group calls that
* are to be serialized together, send a matching key.
*/
export async function serialize(key: string, callback: () => Promise<void>) {
if (promises[key]) {
await promises[key];
@martynchamberlin
martynchamberlin / opacity.html
Last active October 3, 2019 17:10
Turns out that opacity doesn't evenly compound. If you have a layer of black at 20% opacity and a layer on top of that at 10%, the result is not 30%. If you're wanting a total of 30% in this scenario, that top layer should instead be 13%.
<div class="has-children">
<div class="ten">
10%
</div>
<div class="twenty">
20%
</div>
<div class="thirty">
@martynchamberlin
martynchamberlin / minimum-universe.js
Created October 6, 2017 01:04
If 47% of respondents answered affirmative, what is the minimum number of total respondents necessary such that rounding the affirmatives to the closest integer would result in that percentage? Express the answer in terms of a formula that could be applied to any percentage from 1-99.
const minimumUniverse = (knownPercent) => {
knownPercent = parseInt(knownPercent);
if (!(knownPercent > 0 && knownPercent < 100)) {
return 'Please enter a number between 0 and 100';
}
for (let i = 1; i < 100; i++) {
for (let j = i + 1; j <= 100; j++) {
const currentPercent = Math.round((i / j) * 100);
if (currentPercent < knownPercent) {
break;
@martynchamberlin
martynchamberlin / footnotes.js
Last active December 1, 2020 15:21
JavaScript Footnotes
$(document).ready(() => {
/**
* @param {element} e The element that was clicked
* @return {element} The element that is being pointed to
*/
const goTo = (e) => {
let goTo = $(e.currentTarget).attr('href');
// remove the pound sign
goTo = goTo.substr(1);
// Use document.getElementById() to accomodate colon in element id
@martynchamberlin
martynchamberlin / benchmarks.md
Last active June 26, 2017 15:43
Does Vue Slow down initial page render?

Take these two DOMs:

<div id="vue">
  <custom-component>
    <div>
      <p>Here's a static output of how the custom component would render></p>
     </div>
  </custom-component>
@martynchamberlin
martynchamberlin / part-2.md
Last active June 12, 2017 11:46
JavaScript ES6 Promises Example

Let's say we want to call a function that does some work, then we want to do our own work, then let the function know that we've completed our work. We could achieve that by doing this:

var s = () => {
  console.log('start');
  return Promise.resolve(() => { console.log('run after finish') });
};


const start = s();
@martynchamberlin
martynchamberlin / scrollbars.md
Last active November 7, 2024 10:14
On the Width of Scroll Bars on Mac and Windows

How It Works on Mac

By default, scroll bars do not appear on Mac except when the user is scrolling and when there is hidden content. You can double check this by going to System Preferences -> General -> Show scroll bars: Automatically based on mouse or trackpad.

When you do scroll, the width of viewport and the available width of the inner content does not change from what it was. If the width was 300 pixels, it still is 300 pixels.

If you change the "Show scroll bars" setting to "Always" then the scrollbar takes up a decided amount of width - 16 pixels to be precise.[^1] Let's say your browser height is 300 pixels and your broswer width is also 300 pixels. With this setting, if you toggle the height of the body from 300 to 600, causing scrollableness, then a scrollbar will appear only have you have done the toggle. The width of your body will have gone from 300 to 284 pixels, because the scrollbar takes up space in a way that it did not in the other setting. Interestingly, if you're talking about

@martynchamberlin
martynchamberlin / example.html
Last active February 27, 2017 02:07
How to conditionally load Google Font client-side while avoiding FOUT
<html>
<head>
<script>
/**
* This function used with gratitude from
* http://stackoverflow.com/a/34666534/1591507
* I want to refactor this to ES6 so badly but
* since it has to reside in the DOM to avoid FOUT,
* we can't transpile with Babel unfortunately
*/
@martynchamberlin
martynchamberlin / bench.html
Last active September 12, 2016 20:39
Benchmarking localStorage in small big versus big small
<script>
// Store and retrieve 1000 100-byte items. Then store and retrieve 10 10000-byte item
let test = (numBlocks, byteSze) => {
let bytes = 'a';
for (let i = 0; i < byteSze; i++) {
bytes += 'a';
}