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
540
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
320
Publishing and Hosting on GitHub pages
muan
4
140
Having no patience(Japanese)
muan
1
370
Design with Code
muan
5
540
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #2
muan
1
610
Project Lab Squirrel #1
muan
8
840
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
1.9k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
1
100
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
580
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
640
Blueskyのプラグインを作ってみた
hakkadaikon
1
500
FormFlow - Build Stunning Multistep Forms
yceruto
1
150
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
200
Effect の双対、Coeffect
yukikurage
4
1.3k
Passkeys for Java Developers
ynojima
2
840
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.9k
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
200
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
Music & Morning Musume
bryan
46
6.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Typedesign – Prime Four
hannesfritz
42
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Designing Experiences People Love
moore
142
24k
Rails Girls Zürich Keynote
gr2m
94
14k
Code Reviewing Like a Champion
maltzj
524
40k
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