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
 * ====

vitalyfriedman

Authors Guide: Article Template

Please submit your article including all of the information below. You can include this as a seperate file if you like - but please complete each section. Please use an online service to write your article, for example Dropbox Paper, Draft.in, Google Docs. For more help, see the editorial guide

Article Title

Ideally under 67 characters, what problem does this article solve?

Quick Summary

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.