tkadlec

:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====

zackcreach

console.log('Starting instagram..');

const fetchData = (url) => {
  return fetch(url)
    .then(data => data.json())
    .then(json => {
      if (json) {
        return Promise.resolve(json);
      } else {
        return Promise.reject(Error('json is undefined!'));

ryanve

• approachability (be simple, expressive)
• decoupling (create bridges, swim lanes)
• empowering (inspire confidence)
• feedback (listen, collaborate, ask why)
• inclusivity (accessibility, empathy, appropriate tone)
• impact (exposure to diverse ideas)
• prototyping (facilitate consumption, deliver standards)
• resilience (compose isolated modules, enforce with tooling)

Gaafar

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

Gaafar

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data)
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }

ryanve

!function() {
  var emitter = {
    emit: console.dir.bind(console)
  }

  function emit(mutation) {
    var target = mutation.target
    var name = mutation.attributeName
    var value = target.getAttribute(name)

ryanve

Imagine a web application that uses multiple CSS frameworks, libraries, components, etc. Class names are bound to conflict. Imagine two libraries: freeform.css and aid.css

Namespaced by prefixing classes

<a class="freeform-text--bold freeform-display--block aid aid--focusable">example</a>

Namespaced by data attribute

<a data-freeform="text--bold display--block" data-aid="focusable">example</a>

xta

ffoodd

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

nathanacurtis

$space-inset-default = 16px 16px 16px 16px;
$space-inset-xs = 4px 4px 4px 4px;
$space-inset-s = 8px 8px 8px 8px;
$space-inset-m = 16px 16px 16px 16px;
$space-inset-l = 32px 32px 32px 32px;
$space-inset-xl = 64px 64px 64px 64px;
$space-stack-default = 0 0 16px 0;
$space-stack-xs = 0 0 4px 0;
$space-stack-s = 0 0 8px 0;
$space-stack-m = 0 0 16px 0;