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 file.
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/