Minimalism in Web Development

3,589
-1

Published on

Small, but perfectly formed.

Published in: Technology, Business
1 Comment
17 Likes
Statistics
Notes
  • 完美不是多多益善,而是缺一不可~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,589
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
106
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

Minimalism in Web Development

  1. Small, but perfectly formed. Minimalism in web development
  2. 2.5 million parts 1,060 valves 1,440 circuit breakers 230 miles of wire
  3. .. a bit simpler
  4. =
  5. =
  6. “Minimalism describes movements in various forms of art and design … where the work is stripped down to its most fundamental features.”
  7. “The term minimalist is often applied colloquially to designate anything which is spare or stripped to its essentials.”
  8. Use simple tools. Build simple things. (where appropriate)
  9. 1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible.
  10. Lines of code Moving parts Concepts API
  11. “a self-contained, serverless, zero- configuration, transactional SQL database engine.”
  12. v 5.1.38 v 3.6.17 37.7MB source 1.04MB source download (.tar.gz) download (.tar.gz) 1.2 million lines of code 65,000 lines of code Client/server It’s just a file. architecture
  13. SQLite will work great as the database engine for low to medium traffic websites.. (which is to say, 99.9% of all websites) http://www.sqlite.org/whentouse.html
  14. CSS3 Take hard stuff.. that everyone does and make it easy.
  15. Before CSS3 <div class='rbox_container' id='rbox'><div id='rbox_holder'><div id='rbox_topleft'></div> <div class='rbox_top_connector' id='rbox_middle'></div><div id='rbox_topright'></div></div> <div id='rbox_content'><div id='mainbox'><div class="content">                                       Your Content Goes Here </div></div></div><div id='rbox_holder'><div id='rbox_bottomleft'></div> <div class='rbox_bottom_connector' id='rbox_middle' ></div> <div id='rbox_bottomright'></div></div></div> http://nuttersmark.com/blog/web-development/-super-fantastic-resizable-pattern-friendly-css-rounded-corners
  16. Before CSS3 div#rbox{height:auto;margin:20px;float:left;} div#rbox_holder,div#rbox_topleft, div#rbox_bottomleft, div#rbox_topright, div#rbox_bottomright,div#rbox_middle,div#rbox_middle_news, div#rbox_middle_full {height:66px;} div#rbox_holder { width:100%;} div#rbox_topleft, div#rbox_bottomleft {float:left;width:60px;} div#rbox_topleft { background:url('top_left_corner.gif') no-repeat 6px -6px;} /* IE6 */ html>body div#rbox_topleft { background:url('top_left_corner.png') no-repeat 6px -6px;} div#rbox_bottomleft {width:60px; background:url(bottom_left_corner.gif) 0px -12px no-repeat;} /* IE6 */ html>body div#rbox_bottomleft {width:60px; background:url(bottom_left_corner.png) 0px -12px no-repeat;} div#rbox_topright, div#rbox_bottomright {float:right;width:60px;} div#rbox_topright {background:url(top_right_corner.gif) no-repeat -14px -2px;} /* IE6 */ html>body div#rbox_topright {background:url(top_right_corner.png) no-repeat -14px -2px;} div#rbox_bottomright {background:url(bottom_right_corner.gif) -14px -12px no-repeat;} /* IE6 */ html>body div#rbox_bottomright {background:url(bottom_right_corner.png) -14px -12px no-repeat;} div#rbox_middle {float:left;} div#rbox div#mainbox {background:#fff;width:648px;margin-left:-11px;padding-left:10px;} div#rbox div#mainbox div.content {position:relative;top:-50px;} div#rbox div#mainbox div.content p {margin:0px;} div#rbox_content {padding:0 20px 0 20px; background:transparent url('right_edge.gif') repeat-y; 665px 0px;}  /* IE6  */ html>body div#rbox_content {padding:0 20px 0 20px; background:transparent url('right_edge.png') repeat-y 665px 0px;} .rbox_container {width:700px;} .rbox_top_connector, .rbox_mainbox2_bottom {width:580px; background-color:#fff; } .rbox_bottom_connector {width:580px; background-color:none; background: url('bottom_edge.gif')  repeat-x 0px -12px;}  /* IE6  */ html>body .rbox_bottom_connector {width:580px; background-color:none; background: url('bottom_edge.png')  repeat-x 0px -12px;} http://nuttersmark.com/blog/web-development/-super-fantastic-resizable-pattern-friendly-css-rounded-corners
  17. CSS3 h1 { border-radius: 10px; }
  18. CSS3 border-radius border-image box-shadow text-shadow Transforms, transitions, variables, animation..
  19. Logo Shadows Curved corners
  20. Logo 100% imag free e- Shadows Curved corners
  21. Logo 100% imag free e- (except this bit, of course) Shadows Curved corners
  22. Graceful Degradation AKA “it doesn’t look completely shit in IE.”
  23. “a lightweight, high performance web server”
  24. v 2.2.13 v 0.8.13 6.9MB source 0.6MB source download (.tar.gz) download (.tar.gz) 387,000 lines of code 78,000 lines of code Threading/forking Event-driven architecture concurrency model
  25. http://blog.webfaction.com/a-little-holiday-present
  26. + = VPS
  27. for static content + + = VPS for your application
  28. Microframeworks.
  29. Frameworks do lots of stuff. web.py sinatra Lots of apps don’t camping limonade need much stuff. djng juno newf Microframeworks mnml itty do just enough glue squatting stuff.
  30. from itty import get, run_itty @get('/') def index(request): return 'Hello World!' run_itty()
  31. Perfection is achieved, not when there is nothing more to add.. but when there is nothing left to take away.
  32. FIN. http://j4mie.org http://www.flickr.com/photos/moriza/308483890/ http://www.flickr.com/photos/toptechwriter/338573258/ http://www.flickr.com/photos/jamesbondsv/2648217927/ http://www.flickr.com/photos/ppdigital/2327889692/ http://www.flickr.com/photos/define23/2286544411/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×