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
阅读类 Web 应用前端技术探索
Search
Yan Shi
July 07, 2012
Programming
8
460
阅读类 Web 应用前端技术探索
第七届 D2 前端技术论坛
http://www.d2forum.org/d2/7/
Yan Shi
July 07, 2012
Tweet
Share
More Decks by Yan Shi
See All by Yan Shi
NingJS Lighting Talk
mockee
0
180
Type is Beautiful (for Hof)
mockee
3
280
Type is Beautiful
mockee
14
1.5k
转化的灵感
mockee
1
400
Web Apps and more
mockee
2
460
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
940
階層化自動テストで開発に機動力を
ickx
1
470
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
180
NEWT Backend Evolution
xpromx
1
170
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
画像コンペでのベースラインモデルの育て方
tattaka
3
910
Flutterと Vibe Coding で個人開発!
hyshu
1
210
Featured
See All Featured
Making Projects Easy
brettharned
117
6.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Facilitating Awesome Meetings
lara
54
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Producing Creativity
orderedlist
PRO
346
40k
KATA
mclloyd
31
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Transcript
Web Reading mockee@douban 阅读类 Web 应用前端技术探索 http://bit.ly/N8lLqK
Things We Don't Talk About Native or Web App Modular
Scripts Structured App Responsive Web Design HTML5 concepts
Web Apps and more Further Reading 转化的灵感 http://bit.ly/IAhFE5 http://bit.ly/LkIZvz
read.douban.com
Vagrant
http://pypi.python.org/pypi/pyjade https://github.com/learnboost/stylus Keep things DRY Stylus
.jade .styl article#novella( data-aid='17893' data-layout='vertical') .page .hd title .bd content
.ft pagination <article id="novella" data-aid="17893" data-layout="vertical"> <div class="page"> <div class="hd">title</div> <div class="bd">content</div> <div class="ft"> pagination </div> </div> </article> vendors = webkit moz official border-radius(val) for vendor in vendors if vendor == official border-radius val else -{vendor}-border-radius val @import 'mixins/border' .btn-flat border-radius 5px .btn-flat { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Submit Store Reader Web App iPad App Web App Kindle
Android Web iPhone Web App Hybrid Desktop Laptop iPad
Visits Apple iPad SonyEricsson LT15i Xperia Arc Apple iPhone Apple
iPod Touch HTC S710E Incredible S
Google Analytics 2012.5 - 6
Submission System Author Editor WYS WYG
None
None
DEMO Submission System
Web Storage & Data Sync Key Points Real-time Web document
substance Collaboration etherpad Range & Selection rangy
Web Reader Typographic Web Design Intelligence Paging * punctuation compression
Widget System
Widget System Figure note title page text page Code Interacting
components
Title Page - Note
None
Code Widget Figure
Purchase tips
Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books
iBook Author (landscape) Hybird Douban Web Reader
Punctuation Compression ” ’ ) 》 : , ? 、
! ; 。 “ ‘ 《 (
( “ ‘ 《 “ ‘ ( 《 ” ’
) 》 。 , 、 ; : ( latin 汉字 3
@import "mixins/typography" .content p text-indent: 2em word-wrap: break-word text-align: justify
text-justify: inter-ideograph hyphens: auto http://caniuse.com/css-hyphens IE 10+ Firefox 6+ Safari 5.1+, iOS 4.2+ Compatibility ...
Font Rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ Rasterization Black and white Grayscale Subpixel Windows
MAC OS Windows font format has a significant impact new
engine TrueType PostScript grayscale(XP) GDI ClearType(Win7) DirectWrite mode (IE9) Quartz rendering engine for all browsers subpixel rendering IE 6/7/8 hinting ignore math rasterizer ref x full pixel look a bit “sticky”
gdipp The gdipp (codename) project is a replacement of the
Windows text render, which brings to you the effect of text like Mac OS and Linux distributions. http://code.google.com/p/gdipp/ DEMO
https://developer.mozilla.org/en/Mozilla_MathML_Project/ http://www.mathjax.org/demos/mathml-samples/ mathematical formula SVG LaTex LaTex to MathML iOS
/ Android Web MathML HTML & CSS SVG
Intelligence Paging
type page height width font-size line-height page break
Split Cross multi-pages Non-integer row height New
Blank or Float Zoom or Crop
Key Points On-demand rendering Web Worker Split paragraph / fill
height inline for ALL! hide Offline
Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee
[email protected]