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
440
阅读类 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
170
Type is Beautiful (for Hof)
mockee
3
250
Type is Beautiful
mockee
14
1.4k
转化的灵感
mockee
1
360
Web Apps and more
mockee
2
440
Other Decks in Programming
See All in Programming
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
270
バグを見つけた?それAppleに直してもらおう!
uetyo
0
180
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
140
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
440
今年やったこと最近やったこと2024
saito5656
0
100
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
330
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
140
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
150
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
680
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
8
1.8k
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
520
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
130
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
910
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
It's Worth the Effort
3n
183
28k
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
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]