/web-helpers

some common web patterns

MIT LicenseMIT

web-helpers

some common web patterns

CSS – general

native font-stack

see:

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

mono font-stack

html {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
}

box-sizing

*,
*::before,
*::after {
  box-sizing: border-box;
}

mobile – prevent font scaling while rotating iOS device while allowing user to zoom

html {
  -webkit-text-size-adjust: 100%;
}

mobile – prevent zooming on double-tap

button {
  touch-action: manipulation;
}

accord native elements to website style

button,
input,
textarea,
select {
  font: inherit;
  color: currentColor;
  text-align: inherit;
}

font aliasing

.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

momentum scrolling

.module {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

hidden and accessible

.hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

CSS – with JS

accessible focus ring (enabled by tabbing with a keyboard)

body:not(.user-is-tabbing) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
  }
}
function handleFirstTab(e) {
  if (e.keyCode === 9) {
    // the "I am a keyboard user" key
    document.body.classList.add(`user-is-tabbing`);
    window.removeEventListener(`keydown`, handleFirstTab, { passive: true });
  }
}
window.addEventListener(`keydown`, handleFirstTab);

javascript

native array unique

[...new Set(myArray)];

external promise creation

function defer() {
  var res, rej;
  var promise = new Promise((resolve, reject) => {
    res = resolve;
    rej = reject;
  });
  promise.resolve = res;
  promise.reject = rej;
  return promise;
}