Minimalism in Web Development

Small, but perfectly formed. Minimalism in web development

2.5 million parts 1,060 valves 1,440 circuit breakers 230 miles of wire

.. a bit simpler

“Minimalism describes movements in various forms of art and design … where the work is stripped down to its most fundamental features.”

“The term minimalist is often applied colloquially to designate anything which is spare or stripped to its essentials.”

Use simple tools. Build simple things. (where appropriate)

1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible.

Lines of code Moving parts Concepts API

“a self-contained, serverless, zero- configuration, transactional SQL database engine.”

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 ﬁle. architecture

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

CSS3 Take hard stuff.. that everyone does and make it easy.

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

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

CSS3 h1 { border-radius: 10px; }

CSS3 border-radius border-image box-shadow text-shadow Transforms, transitions, variables, animation..

Logo Shadows Curved corners

Logo 100% imag free e- Shadows Curved corners

Logo 100% imag free e- (except this bit, of course) Shadows Curved corners

Graceful Degradation AKA “it doesn’t look completely shit in IE.”

“a lightweight, high performance web server”

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

http://blog.webfaction.com/a-little-holiday-present

+ = VPS

for static content + + = VPS for your application

Microframeworks.

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.

from itty import get, run_itty @get('/') def index(request): return 'Hello World!' run_itty()

Perfection is achieved, not when there is nothing more to add.. but when there is nothing left to take away.

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/

http://francescoagati.wordpress.com	42
http://www.slideshare.net	32
http://postingsfromanedge.blogspot.com	11
http://evenimente.tv	2
http://uxfactory.tumblr.com	2
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com	1
https://lapiello.wordpress.com	1
http://translate.googleusercontent.com	1
https://s-static.ak.facebook.com	1

Minimalism in Web Development

by Jamie Matthews on Sep 06, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 93

Statistics

Minimalism in Web Development — Presentation Transcript