Minimalism in Web Development

Small, but

Minimalism in web development

perfectly formed.

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 codeMoving partsConceptsAPI

“a self-contained, serverless, zero-configuration, transactional SQL

database engine.”

37.7MB source download (.tar.gz)

1.04MB sourcedownload (.tar.gz)

1.2 million lines of code 65,000 lines of code

Client/server architecture

It’s just a file.

v 3.6.17v 5.1.38

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.

CSS3Before

http://nuttersmark.com/blog/web-development/-super-fantastic-resizable-pattern-friendly-css-rounded-corners

<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>

CSS3Before

http://nuttersmark.com/blog/web-development/-super-fantastic-resizable-pattern-friendly-css-rounded-corners

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;}

CSS3

h1 { border-radius: 10px; }

CSS3border-radiusborder-imagebox-shadowtext-shadow

Transforms, transitions, variables, animation..

Logo

Curved corners

Shadows

Logo

Curved corners

Shadows

100% image-free

Logo

Curved corners

Shadows

(except this bit, of course)

100% image-free

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

“a lightweight, high performance web server”

6.9MB source download (.tar.gz)

0.6MB sourcedownload (.tar.gz)

387,000 lines of code 78,000 lines of code

Threading/forking concurrency model

Event-driven architecture

v 0.8.13v 2.2.13

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

+VPS

=

+VPS

=for static content

+for your application

Microframeworks.

Frameworks dolots of stuff.Lots of apps don’tneed much stuff.Microframeworksdo just enough stuff.

web.pysinatra

campinglimonade

djngjunonewfmnmlittyglue

squatting

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/