My perfect web development setup

My framework of choice has always been Zend, Its what I use at work and feed the most comfortable in, however some may argue that there are bigger, better and meaner solutions out there. To those people I say leave me alone I like Zend.

My second weapon in the shahmirj.com arsenal is the less framework, this framework is a CSS template designed to reset your HTML and give you a perfect responsive layout template. I like to mix my less framework with SASS (Syntatically Awsome Stylesheet) to build effective compressed CSS.

For my JavaScript needs I use closure. This provides a JavaScript compressor, and a very good one at that if you are willing to use advance options, which I will talk about later.

Directory Structure

To begin we can now create a directory structure as follows, Below shows the Zend Framework created using

zf create project MyProject
zf create layout
mkdir -p sass/css closure/js
touch views/scripts/navigation.phtml
touch views/scripts/credits.phtml
touch sass/makefile
touch js/makefile

Which should output the following

├── application/
│   ├── Bootstrap.php
│   ├── configs/
│   │   └── application.ini
│   ├── controllers/
│   │   ├── ErrorController.php
│   │   └── IndexController.php
│   ├── layouts/
│   │   └── scripts/
│   │       └── layout.phtml
│   ├── models/
│   └── views/
│       ├── helpers/
│       └── scripts/
│           ├── credits.phtml
│           ├── error/
│           │   └── error.phtml
│           ├── index/
│           │   └── index.phtml
│           └── navigation.phtml
├── closure/
│   ├── js/
│   └── makefile
├── library/
├── public/
│   ├── @css -> ../sass/css
│   ├── favicon.ico
│   ├── index.php
│   └── @js -> ../closure/js
└── sass/
    ├── css/
    ├── default.scss
    └── makefile

Sass

I prefer using sass with make files rather than its watch function. the main command I use is

sass -C --style compressed index.scss css/index.css

You can download sass from the site or using gem install sass. To start with I like to change --style to pretty for debugging just to make sure all is working well, to do this a makefile comes in very handy

#Default calls
SASS=sass -C
RM=rm -Rvf
MKDIR=mkdir -p

#Target dependant variables
all: STYLE=--style compressed
pretty: STYLE=--style pretty

#Directories
CSSDIR=css

#The css files to build
CSS := $(addprefix $(CSSDIR)/, index.css contact.css)

all: $(CSSDIR) $(CSS)

pretty: $(CSSDIR) $(CSS)

$(CSSDIR):
        mkdir css

$(CSSDIR)/%.css: %.scss
        $(SASS) $(STYLE) $^ $@

clean:
        $(RM) $(CSSDIR)

Calling make in the sass folder will rebuild all your css files and note the public/css folder points to sass/css which our make file populates. Also when you edit files, and call make, only the new modified files will be made.

Adding new scss files to generate css files is easy, just by appending to the $(CSS) variable

For debugging you can use make pretty.

Closure

Our closure folder works similar to the sass folder, we use the closure java file to take javascript and compress it, It has multitute of options which you can read about at https://developers.google.com/closure/.

I use closure with an advanced options which actually morphs your code, however I do like using jQuery; but using advance options with jQuery is not as straight forward. We first have to get an extern file for jQuery.

The extern file tells closure what variables are to be left alone while it does goes through its compression. To compress I use:

java -jar closure.jar \
    --compilation_level ADVANCED_OPTIMIZATIONS \
    --externs externs/jquery-externs.js \
    --externs externs/ganalytics_externs.js \
    --js main.js ganalytics.js \
    --js_output_file js/main.js

the trailing slash represent a fake next line the above command is mostly a one liner, you will see this further in our makefile

The --compilation_level ADVANCED_OPTIMIZATIONS sets closure to do advance pruning of the --js files provided, in our case the main.js and ganalytics.js. We also provide the --externs externs/ganalytic_externs.js and the --externs/jquery-externs.js which can be found in the closure repository

The --js_output_file main.js represents the output file of the compressed process.

Combining jQuery and your .js files

Now that we have a compressed file, we still have one problem, We have to make two calls before our page can work properly, the first being to jQuery and the second to our main.js script. However what if we can combine the two files. It would change it to one call. Note with jQuery (minimum) we dont need to compress it as it already comes compressed we just need to stitch the files together. so we can use

cat jquery-min.js main.js > main-production.js.

I like building a make script around this process to make my life easier.

MKDIR=mkdir -p

#VARIABLES
JSDIR = js
JS := $(addprefix $(JSDIR)/, main.js contact.js)

#EXTERNS
EXT_JQUERY = --externs externs/jquery-externs.js
EXT_GANALYTICS = --externs externs/ganalytics_externs.js

all: $(JSDIR) $(JS)

$(JSDIR):
        $(MKDIR) $(JSDIR)

$(JSDIR)/main-production.js: ganalytics.js main.js
        $(CLOSURE) $(CLOSURE_OPTS) $(EXT_JQUERY) $(EXT_GANALYTICS) --js $^ --js_output_file .main.js
        @cat thirdpartyjs/jquery-min.js main.js > $@
        $(RM) main.js

$(JSDIR)/contact-production.js: ganalytics.js main.js contact.js
        $(CLOSURE) $(CLOSURE_OPTS) $(EXT_JQUERY) $(EXT_GANALYTICS) --externs externs/google_maps_api_externs.js --js $^ --js_output_file .contact.js
        @cat thirdpartyjs/jquery-min.js contact.js > $@
        $(RM) contact.js

clean:
        @$(RM) $(JSDIR)/*.js
        @$(RM) $(JSDIR)

Less Framwork

It's all well and good having a hammer, but knowing how to use it can make a very big difference. This is where less framework comes in. This provides the perfect blueprint CSS. I recommend you download this, and call it default.scss. The less framework template can be downloaded here.

Once downloaded and renamed to default.scss, it can be included into other scss files by using.

@import "default"

//Page specific styles

In your default.scss you can define your main elements, such as headers, footer and other paddings as required.

Final thoughts

What we have achieved is creating a process in making our website building process very elegant and simple. You can further add to this by creating a master makefile which calls closure/makefile and sass/makefile accordingly. I usually use vim short-cut F9 which calls make on the current directory that I'm in, to make my life easier.

Hopefully this helps