Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSDC
Search
Mu-An Chiou
October 12, 2014
Programming
2
490
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
240
Publishing and Hosting on GitHub pages
muan
4
120
Having no patience(Japanese)
muan
1
350
Design with Code
muan
5
520
Having no patience
muan
1
270
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
510
Project Lab Squirrel #1
muan
8
760
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
330
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
Milestoner
bkuhlmann
1
400
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
170
Git Rebase
bkuhlmann
11
1.6k
"config" ってなんだ? / What is "config"?
okashoi
0
210
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
450
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
16k
Faster Mobile Websites
deanohume
296
30k
Visualization
eitanlees
135
14k
The Cult of Friendly URLs
andyhume
73
5.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Embracing the Ebb and Flow
colly
78
4.1k
Optimizing for Happiness
mojombo
369
69k
Docker and Python
trallard
33
2.7k
Transcript
! େᯃ "
twitter@muanchiou github@muan
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