Successfully reported this slideshow.
Your SlideShare is downloading. ×

Minimalism in Web Development

Loading in …3

Check these out next

1 of 33 Ad

More Related Content

Slideshows for you (20)

Similar to Minimalism in Web Development (20)


Recently uploaded (20)

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)
  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>
  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;}
  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
  26. + = VPS
  27. for static content + + = VPS for your application
  28. Microframeworks.
  29. Frameworks do lots of stuff. 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.