Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSDC

 JSDC

Talk @ JSDC 2014
12.10.2014

Afd3cc3e385d754183336c859d9e694a?s=128

Mu-An Chiou

October 12, 2014
Tweet

More Decks by Mu-An Chiou

Other Decks in Programming

Transcript

  1. ! େ๯ᯃ "

  2. twitter@muanchiou github@muan

  3. None
  4. ᅇᅇ᜝ح zeczec.com

  5. ! github.com

  6. 236 hubbers are spread across 101 cities right now

  7. None
  8. muan & jlord defunkt

  9. Be asynchronous

  10. Be non-blocking

  11. @github/css @github/design @github/engineering @github/accessibility @github/billing @github/education

  12. @github/ @github/ @github/ @github/ @github/ @github/ $44 ઃܭ ޻ఔ ແো᛻

    ڭҭ
  13. @github/css @github/design @github/engineering @github/accessibility @github/billing @github/education

  14. engineering

  15. engineering design css accessibility

  16. The front-end team Linting + CI Accessibility

  17. The front-end team

  18. DESIGN FRONT-END

  19. FRONT-END + DESIGN

  20. FRONT-END + DESIGN Serious JavaScripters

  21. PROTOTYPES # $

  22. CARES ABOUT CODE ♥ $

  23. ALWAYS INVOLVED &

  24. DESIGN + CODE = +

  25. Linting + CI

  26. ' ( ) * + ଌࢼᔒա, ෆڅ㟬EFQMPZ。

  27. None
  28. None
  29. These classes are no where to be found: ! .avatar-upload-label

    .billing-extra-yolo .login-form-fixed Stale selectors and partials
  30. These selectors are too damn complicated: ! #adv_code_search .enterprise .site-search

    .search-page-label: body.page-profile .profilecols .tabnav .pagehead-actions li.t .discussion-hidden .timeline-comment-content .timeline-commen .prose-diff > .markdown-body li .wraps-task-list-item-checkbo Deep selectors
  31. Stylesheets should not contain js- prefixed classes: ! .js-avatar-uploader .js-prorated-for-days

    .js-branch-name-suggestion Special prefixed classes
  32. Stylesheets should not contain js- prefixed classes: ! .js-avatar-uploader .js-prorated-for-days

    .js-branch-name-suggestion Special prefixed classes git grep -n '[#.]js-' -- app/assets/stylesheets
  33. Accessibility

  34. Limited resources ➡️ Reactive

  35. None
  36. None
  37. The ALT attribute if(!img.hasAttribute('alt')) { console.warn(“Missing alt attribute on", img)

    } if(!img.hasAttribute('alt')) { console.warn(“Missing alt attribute on", img) }
  38. label.control if(!label.control) { console.warn("Label missing control”, label) }

  39. <a>/anchor tag declaration if(!this.getAttribute("href") || !this.getAttribute("role") == “button") { console.warn("Missing

    link declaration", link) }
  40. Accessible text – aria-label text = node.innerText text += node.getAttribute(‘alt')

    text += node.getAttribute(‘aria-label') ! if(text.length == 0) { console.warn("Missing accessible text", this) }
  41. None
  42. Be asynchronous

  43. Be non-blocking

  44. DESIGN + CODE = +

  45. Lint your code

  46. Care about accessibility

  47. Accessibility Camps www.accessibilitycamp.org

  48. WE HAVE STICKERS

  49. None