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
540
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
320
Publishing and Hosting on GitHub pages
muan
4
140
Having no patience(Japanese)
muan
1
370
Design with Code
muan
5
540
Having no patience
muan
1
290
Design in GitHub
muan
5
370
Project Lab Squirrel #2
muan
1
610
Project Lab Squirrel #1
muan
8
840
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
GoのGenericsによるslice操作との付き合い方
syumai
3
680
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
960
ReadMoreTextView
fornewid
1
450
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
CursorはMCPを使った方が良いぞ
taigakono
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
技術同人誌をMCP Serverにしてみた
74th
0
170
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
790
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
How to Ace a Technical Interview
jacobian
277
23k
Producing Creativity
orderedlist
PRO
346
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Docker and Python
trallard
44
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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