Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JSDC
Mu-An Chiou
October 12, 2014
Programming
2
460
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
130
Publishing and Hosting on GitHub pages
muan
4
98
Having no patience(Japanese)
muan
1
330
Design with Code
muan
5
480
Having no patience
muan
1
270
Design in GitHub
muan
5
340
Project Lab Squirrel #2
muan
1
410
Project Lab Squirrel #1
muan
8
640
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
330
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
130
Chart実装が楽になりました。
keisukeyamagishi
0
120
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
150
Power Automateドリブンのチームマネジメント
hanaseleb
0
190
Independently together: better developer experience & App performance
bcinarli
0
180
ES2022の新機能
smt7174
0
250
Haskellでオブジェクト指向プログラミング
koheisakata
0
110
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
230
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
180
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
140
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
We Have a Design System, Now What?
morganepeng
35
3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Design by the Numbers
sachag
271
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
For a Future-Friendly Web
brad_frost
166
7.4k
Why Our Code Smells
bkeepers
PRO
324
55k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
How to train your dragon (web standard)
notwaldorf
58
3.9k
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