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
550
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
340
Publishing and Hosting on GitHub pages
muan
4
140
Having no patience(Japanese)
muan
1
370
Design with Code
muan
5
550
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #2
muan
1
620
Project Lab Squirrel #1
muan
8
850
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.2k
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
CSC509 Lecture 03
javiergs
PRO
0
320
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
940
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
790
Server Less Code More - コードを書かない時代に生きるサーバーレスデザイン / server-less-code-more
gawa
5
1.9k
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
750
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.3k
iOSDC.pdf
chronos2500
2
640
CSC305 Lecture 03
javiergs
PRO
0
220
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Documentation Writing (for coders)
carmenintech
75
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Navigating Team Friction
lara
189
15k
Code Reviewing Like a Champion
maltzj
525
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Producing Creativity
orderedlist
PRO
347
40k
The Cost Of JavaScript in 2023
addyosmani
53
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
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