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
520
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
280
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
280
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
560
Project Lab Squirrel #1
muan
8
800
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
280
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
120
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
10
1.6k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
180
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
240
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
690
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
160
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
390
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
33k
Tuning GraphQL on Rails
pyama86
2
1.2k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
2k
For a Future-Friendly Web
brad_frost
175
9.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Side Projects
sachag
452
42k
Gamification - CAS2011
davidbonilla
80
5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Writing Fast Ruby
sferik
626
61k
Learning to Love Humans: Emotional Interface Design
aarron
273
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