Web - goatandsheep/goatandsheep.github.com GitHub Wiki

Browser Events

Focus:

• focus
• blur
• focusin
• focusout

Note: iOS emits mouseout but not mouseleave nor blur and only when going from one focusable to another focusable. Local chrome doesn't emit mouseout nor mouseleave for tabs even in mobile responsive mode.

Browser Storage

• Cookies
• LocalStorage: simple key-value storage, default on all browsers
• IndexedDB: NoSQL local DB available everywhere except Safari, Opera
• WebSQL: Safari's only advanced DB

PouchDB: abstraction layer across IndexedDB and WebSQL that works on more browsers than one or the other. Also works on Cordova and Node.js. Syntax similar to CouchDB.

Cookies

• When testing: disable HttpOnly
• path=/: there's an imaginary wildcard symbol at the end

Caps lock detection:

document.addEventListener('keydown', (event) => {
    let caps = event.getModifierState && event.getModifierState('CapsLock');
    console.log(caps);
});

CORS

• Access-Control-Allow-Headers: wildcard is not acceptable input
• OPTIONS / Pre-flight requests

Icons

https://www.favicon-generator.org/

Accessibility

• governed by WCAG. See WCAG quick reference guide
• Accessibility statement generator
• WAI-ARIA: for non-standard components. Rely on tags that define the state, name / label, and role
• WCAG roles and strategies for accessibility-focused organizations

Mobile issues

• convert all types of quotes to one str.replace(/[\u2018\u2019\u201B]/g, "'") as iPhone uses smart quotes
• if you want to prevent back button behaviour on iOS, use onpageshow

Accessibility

Captions should be no longer than 35 characters per line for vertical video