From reading the title of this post you might assume that I am about to talk about what I do every day and have always done. You are only partly right.
The specific topic I am interested in is the building of completely flat websites. That is to say the type of delivery to a client which is made up of HTML, CSS and JavaScript that will never be integrated into a back-end, never have any other coding wrapped around it but will be kept as a series of flat pages.
This is something I have had to do recently for the first time in some time and the question of how to achieve such a thing in an elegant manner keeping the trials of development to a minimum occupies some of my time now.
What I did in this instance was use server side includes to include all the common components of each page from a central resource - this includes things like global navigation, a footer etc etc. When it came time to send the code to the client, I then ran an ANT script (as supplied by the esteemed Mr Alexander, once more a colleague) to output the flat pages.
This seemed to work well for me. However, I was not happy with the way this worked for the CSS and JavaScript code.
During development, I wanted the CSS and JavaScript code broken down into many files to help me find where code was, organise new code and bug fix. I wanted the convenience of loading Firebug and being able to see exactly where my style declarations came from on any particular node.
For the final delivery, I wanted one CSS file and just a few JavaScript files. But how to make that happen without breaking my ideals during development? Well, I could end up using ANT to piece it all together just like the HTML code. But that felt a bit messy and frankly, hand crafting XML is about the worst thing I can think of doing.
This is where I stop providing solutions and pose a question. How would you have prepared your build? How would you have made sure that during development you could pull in only the bits of JavaScript that should have been on each page and then built the flat files correctly? Its more complex than it at first appears....
Subscribe to:
Post Comments (Atom)
Posts
9 comments:
If you can serve images from a web server using java environment, there is a solutionm: wro4j (http://code.google.com/p/wro4j/).
You can have as many css & js you want. All you have to do, is to create an xml defining resources to be merged & include a single resource in your html. This way you can benefit from both: easy of development & performance optimization.
I would use any CMS I like (I like my own CMS of course ;-) and wouldn't worry about anything else during the site development.
Once the site is ready I would mirror it into static pages using wget tool (or similar).
Then I would create a simple script that crawls the static files and optimizes them in a way required.
The optimization is up to you. You can grab the LINK tags referring to multiple CSS files and join referred CSS into one and rewrite the HTML to link joined file, the same javascripts, ...
You can even embed linked CSS/scripts/images into the HTML itself (if you are sure that modern browsers will be used then use the "data" URL scheme to embed images, css, scripts, whatever you need into the URL itself).
Depends on what is your goal and purpose of the pages. Less files (embed into one HTML) or fast pages (join external resources)...
Who knows maybe there are already some tools for this out there.
This seems to be very easy question for me so I am not sure if I really did understand your problem correctly. Did I miss something that makes it more complicated?
We cater to a Global Clientele - both big and small. Our prime focus is on procuring clients’ specifications and deliver stunning tailor-made websites that fuse great designs with smooth functionality. Our aim is to make excel each project with the best design standards.We’ve designed great websites for a rich array of clients and businesses around the world. We ensure you value for money and maximum ROI. Thanks. Web Development in India
There is no easy solution to this as you say, but it's a very important consideration to give.
It would need to be a server side 'build' on the fly which would create one JS file containing all the necessary code for the required functionality to meet Yahoo UI performance guidelines.
Take a look at "MINIFY".
It's a PHP5 app that combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
http://code.google.com/p/minify/
thanks for sharing
thank you very nice
had a great share thanks
Thank you stuff for share
Post a Comment