Slide 1

Slide 1 text

! େ๯ᯃ "

Slide 2

Slide 2 text

twitter@muanchiou github@muan

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ᅇᅇ᜝ح zeczec.com

Slide 5

Slide 5 text

! github.com

Slide 6

Slide 6 text

236 hubbers are spread across 101 cities right now

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

muan & jlord defunkt

Slide 9

Slide 9 text

Be asynchronous

Slide 10

Slide 10 text

Be non-blocking

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@github/ @github/ @github/ @github/ @github/ @github/ $44 ઃܭ ޻ఔ ແো᛻ ڭҭ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

engineering

Slide 15

Slide 15 text

engineering design css accessibility

Slide 16

Slide 16 text

The front-end team Linting + CI Accessibility

Slide 17

Slide 17 text

The front-end team

Slide 18

Slide 18 text

DESIGN FRONT-END

Slide 19

Slide 19 text

FRONT-END + DESIGN

Slide 20

Slide 20 text

FRONT-END + DESIGN Serious JavaScripters

Slide 21

Slide 21 text

PROTOTYPES # $

Slide 22

Slide 22 text

CARES ABOUT CODE ♥ $

Slide 23

Slide 23 text

ALWAYS INVOLVED &

Slide 24

Slide 24 text

DESIGN + CODE = +

Slide 25

Slide 25 text

Linting + CI

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Accessibility

Slide 34

Slide 34 text

Limited resources ➡️ Reactive

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Be asynchronous

Slide 43

Slide 43 text

Be non-blocking

Slide 44

Slide 44 text

DESIGN + CODE = +

Slide 45

Slide 45 text

Lint your code

Slide 46

Slide 46 text

Care about accessibility

Slide 47

Slide 47 text

Accessibility Camps www.accessibilitycamp.org

Slide 48

Slide 48 text

WE HAVE STICKERS

Slide 49

Slide 49 text

No content