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
490
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
240
Publishing and Hosting on GitHub pages
muan
4
120
Having no patience(Japanese)
muan
1
350
Design with Code
muan
5
520
Having no patience
muan
1
280
Design in GitHub
muan
5
350
Project Lab Squirrel #2
muan
1
520
Project Lab Squirrel #1
muan
8
760
A girl with no patience
muan
18
1.9k
Other Decks in Programming
See All in Programming
Documentation for users with AsciiDoc and Antora
ahus1
0
370
PHPはいつから死んでいるかの調査
chiroruxx
2
420
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220
Fragment Composition of GraphQL
quramy
13
1.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
460
Milestoner
bkuhlmann
1
410
Ruby GitHub Packages
bkuhlmann
0
640
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
見た目から始める生産性向上
ikumatadokoro
10
1.4k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
業務ツールとして使うPostman
msys75
0
100
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
Visualization
eitanlees
137
14k
Six Lessons from altMBA
skipperchong
22
3k
It's Worth the Effort
3n
180
27k
The Cult of Friendly URLs
andyhume
74
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Into the Great Unknown - MozCon
thekraken
14
1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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