JSDC

Talk @ JSDC 2014
12.10.2014

Transcript

1. ! େ๯ᯃ
    "
2. twitter@muanchiou github@muan
4. ᅇᅇ᜝ح zeczec.com
5. ! github.com
6. 236 hubbers are spread across 101 cities right now
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。
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
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) }
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