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
530
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
300
Publishing and Hosting on GitHub pages
muan
4
130
Having no patience(Japanese)
muan
1
360
Design with Code
muan
5
530
Having no patience
muan
1
290
Design in GitHub
muan
5
360
Project Lab Squirrel #2
muan
1
580
Project Lab Squirrel #1
muan
8
820
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Grafana Cloudとソラカメ
devoc
0
140
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
AHC041解説
terryu16
0
590
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
チームリードになって変わったこと
isaka1022
0
190
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How GitHub (no longer) Works
holman
313
140k
Rails Girls Zürich Keynote
gr2m
94
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Visualization
eitanlees
146
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
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