Skip to content

Instantly share code, notes, and snippets.

View martynchamberlin's full-sized avatar

Martyn Chamberlin martynchamberlin

30 followers · 11 following
View GitHub Profile
@martynchamberlin
martynchamberlin / scrollbars.md
Last active March 28, 2024 09:40
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 / 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 / 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 / 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 / bootstrap-cheat.css
Last active June 1, 2018 21:41
Bootstrap Cheat Sheet
/*
Here's a brief explanation of the breakpoints
lg: 1200+
md: 992-1199
sm: 768-991
xs: 767-
*/
@martynchamberlin
martynchamberlin / functions.php
Last active February 16, 2018 00:09
How to get_the_content() with formatting
<?php
/**
* Instead of calling get_the_content(), call this function instead, and it'll all be good
*/
function get_the_content_with_formatting()
{
ob_start();
the_content();
$the_content = ob_get_contents();
@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 / 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();