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

JSDC

 JSDC

Talk @ JSDC 2014
12.10.2014

Mu-An Chiou

October 12, 2014
Tweet

More Decks by Mu-An Chiou

Other Decks in Programming

Transcript

  1. twitter@muanchiou
    github@muan

    View full-size slide

  2. ᅇᅇ᜝ح
    zeczec.com

    View full-size slide

  3. 236 hubbers are spread across
    101 cities right now

    View full-size slide

  4. muan & jlord
    defunkt

    View full-size slide

  5. Be asynchronous

    View full-size slide

  6. Be non-blocking

    View full-size slide

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

    View full-size slide

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

    ڭҭ

    View full-size slide

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

    View full-size slide

  10. engineering
    design
    css
    accessibility

    View full-size slide

  11. The front-end team
    Linting + CI
    Accessibility

    View full-size slide

  12. The front-end team

    View full-size slide

  13. DESIGN
    FRONT-END

    View full-size slide

  14. FRONT-END + DESIGN

    View full-size slide

  15. FRONT-END + DESIGN
    Serious
    JavaScripters

    View full-size slide

  16. PROTOTYPES
    #
    $

    View full-size slide

  17. CARES ABOUT CODE

    $

    View full-size slide

  18. ALWAYS INVOLVED
    &

    View full-size slide

  19. DESIGN + CODE =
    +

    View full-size slide

  20. Linting + CI

    View full-size slide

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

    View full-size slide

  22. These classes are no where to be found:
    !
    .avatar-upload-label
    .billing-extra-yolo
    .login-form-fixed
    Stale selectors and partials

    View full-size slide

  23. 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

    View full-size slide

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

    View full-size slide

  25. 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

    View full-size slide

  26. Accessibility

    View full-size slide

  27. Limited resources ➡️ Reactive

    View full-size slide

  28. 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)
    }

    View full-size slide

  29. label.control
    if(!label.control) {
    console.warn("Label missing control”, label)
    }

    View full-size slide

  30. /anchor tag declaration
    if(!this.getAttribute("href") ||
    !this.getAttribute("role") == “button") {
    console.warn("Missing link declaration", link)
    }

    View full-size slide

  31. 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)
    }

    View full-size slide

  32. Be asynchronous

    View full-size slide

  33. Be non-blocking

    View full-size slide

  34. DESIGN + CODE =
    +

    View full-size slide

  35. Lint your code

    View full-size slide

  36. Care about accessibility

    View full-size slide

  37. Accessibility Camps
    www.accessibilitycamp.org

    View full-size slide


  38. WE HAVE STICKERS

    View full-size slide