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
WebDriver BiDiとは何なのか
yotahada3
1
150
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
ML.NETで始める機械学習
ymd65536
0
210
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
Unity Android XR入門
sakutama_11
0
170
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Domain-Driven Transformation
hschwentner
2
1.9k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Statistics for Hackers
jakevdp
797
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
344
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Practical Orchestrator
shlominoach
186
10k
It's Worth the Effort
3n
184
28k
Agile that works and the tools we love
rasmusluckow
328
21k
Gamification - CAS2011
davidbonilla
80
5.1k
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