Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JSDC
Mu-An Chiou
October 12, 2014
Programming
2
470
JSDC
Talk @ JSDC 2014
12.10.2014
Mu-An Chiou
October 12, 2014
Tweet
Share
More Decks by Mu-An Chiou
See All by Mu-An Chiou
Details on <details>
muan
0
170
Publishing and Hosting on GitHub pages
muan
4
110
Having no patience(Japanese)
muan
1
340
Design with Code
muan
5
480
Having no patience
muan
1
270
Design in GitHub
muan
5
340
Project Lab Squirrel #2
muan
1
440
Project Lab Squirrel #1
muan
8
680
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
TokyoR#103_DataProcessing
kilometer
0
550
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
410
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
3
1.6k
Enumを自動で網羅的にテストしてみた
estie
0
1.5k
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.4k
AWSにおける標的型Bot対策
hacomono
0
450
Step Functions Distributed Map を使ってみた
codemountains
0
120
Milestoner
bkuhlmann
1
250
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
150
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
140
Becoming an Android Librarian (Android World Wide 2023 Jan)
skydoves
2
230
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
850
Producing Creativity
orderedlist
PRO
335
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Code Review Best Practice
trishagee
50
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Typedesign – Prime Four
hannesfritz
34
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Optimizing for Happiness
mojombo
365
64k
Unsuck your backbone
ammeep
659
56k
Adopting Sorbet at Scale
ufuk
65
7.8k
Happy Clients
brianwarren
90
5.8k
Embracing the Ebb and Flow
colly
75
3.6k
Transcript
! େᯃ "
[email protected]
[email protected]
None
ᅇᅇح zeczec.com
! github.com
236 hubbers are spread across 101 cities right now
None
muan & jlord defunkt
Be asynchronous
Be non-blocking
@github/css @github/design @github/engineering @github/accessibility @github/billing @github/education
@github/ @github/ @github/ @github/ @github/ @github/ $44 ઃܭ ఔ ແো
ڭҭ
@github/css @github/design @github/engineering @github/accessibility @github/billing @github/education
engineering
engineering design css accessibility
The front-end team Linting + CI Accessibility
The front-end team
DESIGN FRONT-END
FRONT-END + DESIGN
FRONT-END + DESIGN Serious JavaScripters
PROTOTYPES # $
CARES ABOUT CODE ♥ $
ALWAYS INVOLVED &
DESIGN + CODE = +
Linting + CI
' ( ) * + ଌࢼᔒա, ෆڅ㟬EFQMPZ。
None
None
These classes are no where to be found: ! .avatar-upload-label
.billing-extra-yolo .login-form-fixed Stale selectors and partials
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
Stylesheets should not contain js- prefixed classes: ! .js-avatar-uploader .js-prorated-for-days
.js-branch-name-suggestion Special prefixed classes
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
Accessibility
Limited resources ➡️ Reactive
None
None
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) }
label.control if(!label.control) { console.warn("Label missing control”, label) }
<a>/anchor tag declaration if(!this.getAttribute("href") || !this.getAttribute("role") == “button") { console.warn("Missing
link declaration", link) }
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) }
None
Be asynchronous
Be non-blocking
DESIGN + CODE = +
Lint your code
Care about accessibility
Accessibility Camps www.accessibilitycamp.org
WE HAVE STICKERS
None