Setup Subversion and Trac on CentOS 5

By Daniel Skinner | Published: January 6, 2008

Recently I set up a virtual server to use as a development machine. It runs on CentOS 5 and hosts several Subversion repositories with associated Trac projects.

There are many guides and plenty of help on the net to help you setup such a system. However, when I tried to do it I came across a few problems and I hope this post may help at least a few people trying to do the same as me. I am not going to rewrite the great tutorials out there, I will just point you to them and note what things I did differently.

This ‘guide’ should get you from a fresh install of CentOS 5 linux to one or more working Subversion (SVN) repositories and associated Trac wiki’s. Apache/WebDAV is used as the network layer. I have only tested this on a fresh install of CentOS 5.

Read More »

Posted in General, Guides | Tagged , , , , , | 64 Comments

Trying out MooTools 1.2 Beta 1

By Daniel Skinner | Published: December 2, 2007

Whilst I commonly use Prototype and Script.aculo.us as my preferred JavaScript libraries, I recently decided to try out MooTools as an alternative.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API (mootools.net).

I downloaded MooTools version 1.2 beta 1, which is feature complete but not fully tested. If you are interested in what’s new in 1.2, see the MooTools blog: 1.2 beta 1.

My first impressions of MooTools were good and whilst I haven’t mastered the ‘Moo way of doing things,’ I got to grips with it quickly.

Comparison with Prototype

This is not an exhaustive comparison, it’s just my first impressions.

  • In MooTools effects are a Core component. With Prototype you need an additional effects library (e.g Script.aculo.us).
  • When downloading MooTools you are able to select only the components you need and you are given the option of compressing the library.
  • I prefer Prototype’s documentation style. Initially I found MooTools hard to learn because the API documentation does not give sufficient examples of good practice etc…
  • I’m a fan of Dean Edward’s Base and MooTools has a really nice implementation of it.
  • MooTools acknowledges Prototype as an awesome library and a lot of code is based on Prototype.
  • Currently there is no central repository for MooTools extensions that I know of.

Prototype 1.6.0 weighs in at 121KB. Similarly, MooTools 1.2b1 (all components, uncompressed, no documentation) is 120KB. However, there is no need for an additional effects library and you can cut down the size of the MooTools library by removing unwanted components.

As I learn more of MooTools I will post more advice and tips on using MooTools from a Prototype background.

Resources

Posted in Web Development | Tagged , | Leave a comment

Zend Framework 1.0.3 Released

By Daniel Skinner | Published: November 30, 2007

Zend Framework (ZF) 1.0.3 has been released. This is the third maintenance release since the launch of Zend Framework 1.0 at the beginning of July 2007, which goes to show how quickly the ZF community is growing.

Zend Framework is quickly becoming the most popular PHP5 framework, mostly due to the fact that it does not tie you to coding in a specific way. You can use individual components or choose to use the entire Model-View-Controller (MVC) architecture. In a post written on the Zend Blog, the ZF team are expecting over 3 million downloads of the framework by the end of the year.

The near future roadmap for ZF includes adding support for even more web services and providing a standard solution for handling web forms. There will also be improvements in the online documentation (which is already an excellent reference) and tutorials as well as support for OpenID.

We can expect some of these features to be ready for the upcoming 1.1.0 release which is expected in the first quarter of 2008.

For more information, see Zend Framework Components and the Zend Framework roadmap.

Download Zend Framework.

Posted in General | Tagged , , | 2 Comments

Starbox – Rating stars for prototype

By Daniel Skinner | Published: November 18, 2007

Nick Stakenburg (creator of Prototip) has just submitted a new project to Scripteka. “Starbox” is a Prototype based rating system, allowing you to easily create all kinds of rating boxes using just one image. Additionally, you can use Script.aculo.us to add effects.

The Starbox rating system is a new interactive feature which allows users to submit their own rating towards a particular subject. This system is ideal for a majority of websites who wish to include a rating system, which promotes the interactivity and feedback of users. The Starbox rating system is particularly useful for websites such as Amazon, where people can write their own review based on an item.

Starbox is not the first rating system to be created for Prototype and there are other more mature choices available on Scripteka including Rater 2.0, which allows for more customisation of the rating control but has larger overheads. You might also want to check out Control.Rating, especially if you are using other components of Control Suite from LivePipe. Personally, I like the look of Starbox and if it is as simple to use, cleanly coded and well defined as Prototip it will be my rating system of choice if I ever find the need to use one.

I recommend subscribing to the Scripteka feed, as I am sure it will become a valuable resource when looking for new extensions based on Prototype.

For downloads, interactive demos and more, see Starbox by Nick Stakenburg.

Posted in Web Development | Tagged , , , | 4 Comments

Prototip 1.1.0 Final Released

By Daniel Skinner | Published: November 11, 2007

Prototip 1.1.0 Final has now been released. Prototip 1.1.0 is now guaranteed to work with the final version of Prototype 1.6.0 and extra values for the hooking property have been added since the preview release.

The hooking property takes a few extra values now, allowing you to hook tips to the: topMiddle; bottomMiddle; leftMiddle; and rightMiddle of elements.

All those using the preview release should upgrade to ensure full compatibility with Prototype.

More details can be found at Prototip 1.1.0 Final by Nick Stakenburg.

Don’t forget to rate Prototip as your favourite Prototype based tooltip library on Scripteka!

Posted in Web Development | Tagged , , | 2 Comments

Scripteka, Prototype 1.6 and Scriptaculous 1.8 Released!

By Daniel Skinner | Published: November 8, 2007

Prototype 1.6.0 Final has now been released on the same day as Scriptaculous 1.8.0.

In a previous post about Prototype 1.6.0 RC1, I discussed many of the improvements this release will bring. Prototype 1.6.0 is the most significant release in over two years bringing a completely rewritten Class API, new enchancements to the DOM API and more.

Scriptaculous 1.8.0 was also released on the same day and is fully compatible with Prototype 1.6.0 final. The latest version brings many performance improvements and bug fixes and a few new features, including support for playing .mp3 sounds! Future releases of Scriptaculous 1.x will be bug releases only. A preview version of Scriptaculous 2.0 is expected soon!

Prototip 1.1.0 is expected to be released shortly after the final release of Prototype 1.6.0.

There is also a fantastic new website which recently went live called Scripteka. Scripteka is a site that many users of prototype have been waiting for, a central resource for all libraires, extensions and add-ons created using the prototype framework. It features a full rating system and tagging. Scripteka is itself an application built with prototype.

See the full post on the release of Prototype 1.6.0 for more info.

See the full post on the release of Scriptaculous 1.8.0 for more info.

Prototip can be found at Nick Stakenburg’s Prototip site.

Posted in Web Development | Tagged , , , | Leave a comment

Prototip 1.1.0 preview

By Daniel Skinner | Published: October 29, 2007

In a short follow up to my last post on Prototype 1.6.0 RC1, Nick Stakenburg has just released a preview version of the latest Prototip.

For those who don’t know, Prototip is a tooltip library which allows you to create custom styled tooltips. Prototip is based on the Prototype Javascript Library.

Prototip 1.1.0 is completely rewritten and refactored using the new features and improvements of Prototype 1.6.

New features in this release include:

  • Persistant tooltips: Allowing you to keep tooltips open and customise how you close them with mouse events and close buttons.
  • Opening delay: Specify an amount of time before the tooltip is opened. By default tooltips have a small delay to prevent accidental opening of tooltips when navigating a page.
  • New CSS model: Giving you even more control over tooltip style.

Since the final version of Prototype 1.6 is not yet released, Prototip 1.1.0 was released as a preview. Both the final versions of Prototype 1.6 and Prototip 1.1.0 are expected in November.

More on Prototip can be found at the Prototip site.

Posted in Web Development | 2 Comments

Using Prototype

By Daniel Skinner | Published: October 21, 2007

With the new release of Prototype 1.6.0 just around the corner I thought it would be a good idea to highlight some of the new features of the upcoming release and go on to overviewing a couple of libraries built on Prototype that I have recently found very useful.

Prototype 1.6.0 final is due to be released in early November 2007 and brings with it some fairly major changes to existing API’s as well as a few new features. Prototype 1.6.0 is not expceted to be compatible with earlier versions.

Prototype 1.6.0

There have been many changes to the Event API, in particular:

  • The event object has been brought more into line with the W3C-standard and so there won’t be as much need to make calls of the form Event.method(eventInstance).
  • Support for custom events. This is good news for building event driven AJAX applications. Custom events such as AJAX requests and responses can be handled in exactly the same way as real DOM Events.
  • Cross-Browser support for the DOMContentLoaded event means that scripts can easily be initiated whilst images are still loading.

The Class API has better support for inheritance and calling superclass methods. Go to the full tutorial on Prototype class inheritance at the Prototype site for detailed information.

There are some great looking enhancements to the DOM API, in particular:

  • Creating new elements using new Element(); – Will this see the end of the Builder.build() function in Scriptaculous? There is more about this in a post on the Prototype blog: Prototype: DOM builder.
  • Support for objects with toHTML() and toElement() methods to make it easy for an object to represent a DOM node without having to directly extend a DOM element.
  • document.viewport allows easy retrival of the viewport size and scroll offsets.

There are many more additions/improvements. Detailed information can be found at Prototype 1.6.0 RC0. Also, make sure to look at Prototype 1.6.0 RC1: Changes.

I am constantly finding new features of Prototype that I never realised existed before and it just goes to show how feature rich the framework has become. Such a rich feature set means that the framework is becoming fairly large and you should take steps to optimise the performance of sites with large javascript payloads. see the post on Combine for performance optimisation tips.

I have come across a couple of fantastic javascript libraries based on Prototype recently. Prototip and LiveValidation are two in particular which I will be using regularly in projects.

Prototip

This library allows you to create custom tooltips easily and effectively for websites and applications. You have complete control over the tooltip style and a mass of options allow you to customise them to your needs.

Demos, usage and more details can be found at Prototip by Nick Stakenburg.

LiveValidation

This is a neat client-side form validation library which is: not intrusive; coded in an object-orientated fashion; and integrates easily with existing frameworks.

The main differences between LiveValidation and most similar libraries are:

  • ‘Validation as you type’ – This gives a unique interactive feel to your forms and can be easily customised.
  • Non-intrusive. This means that you don’t need to assign markers such as class names (e.g. class=”required email”) to the input elements. Setting up the validation of form elements is completely separated from the form markup itself.

There is no built-in support for AJAX-style validation but it is straightforward to implement a new Validate method to deal with this.

Demos, usage and more details can be found at LiveValidation.

Posted in Web Development | 1 Comment

Improving Site Performance

By Daniel Skinner | Published: September 11, 2007

In the previous article regarding web development tools I briefly mentioned the YSlow tool for FireBug. YSlow analyses the performance of web pages in terms of their size and overall load time. When you run YSlow on your page you get an overall grade from A to F which is dependent upon how the page performs. The performance is measured by 13 factors, which are individually graded.

Performance Optimisation

Whilst the 13 factors are well explained, there is no real information on how to improve the page. All you know is how well your site performs in that area aswell as getting a good description of why it is important. The lack of solutions and methods of improvement turns out to be a good thing since it drives further research into how to improve page performance.

This article focuses on a very handy, cool, simple PHP script that can drastically improve the performance of your site without much effort at all!

Combine

The script is called Combine and is written by Niels Leenheer

Basically, the script has two main aims: reducing the number of HTTP requests made per page, and reducing the size of JavaCcript and CSS files to improve page load times. The script is highly effective and is easily integrated into any existing site. The performance improvement is pretty impressive, it improved my YSlow grade drastically.

Combine does a number of things and is very well focused in its purpose. Here is a quick overview:

  • Allows you to make requests for several CSS and JavaScript files with far fewer HTTP requests.
  • Combines and compresses individual CSS/JavaScript files into one compact file.
  • Utilises advanced caching and header techniques to cover every aspect when it comes to improving page loading times.
  • Works in a way that is non-invasive – you won’t need to do anything drastic to incorporate it into your existing system.

The integration of Combine into a new or existing site is easy and you will be reaping the rewards in terms of performance improvements in no time.

Example:

without Combine the includes for my gallery page would look something like:

<!-- include external CSS files -->
<link rel="stylesheet" type="text/css" href="/styles/layout.css" />
<link rel="stylesheet" type="text/css" href="/styles/styles.css" />
<link rel="stylesheet" type="text/css" href="/styles/navigation.css" />
<link rel="stylesheet" type="text/css" href="/styles/banners.css" />
<link rel="stylesheet" type="text/css" href="/styles/features.css" />   

<link rel="stylesheet" type="text/css" href="/styles/print.css"  />
<link rel="stylesheet" type="text/css" href="/styles/geshi.css" />
<!-- include JavaScript required for gallery -->
<script type="text/javascript" src="/script/lib/effects.js"></script>
<script type="text/javascript" src="/script/lib/builder.js"></script>
<script type="text/javascript" src="/script/imgRoll/roller.js"></script>
<script type="text/javascript" src="/script/imgView/viewer.js"></script>

With Combine this becomes:

<!-- include external CSS files-->
<link rel="stylesheet" type="text/css" href="/styles/layout.css,styles.css,navigation.css,banners.css,
                       features.css,print.css,geshi.css" />
<!-- include JavaScript required for gallery -->
<script type="text/javascript"
src="/script/lib/effects.js,lib/builder.js,imgRoll/roller.js,imgView/viewer.js"></script>

As you can see in the Combine version, the files you wish to include are just separated by commas. This reduces the amount of markup, the number of HTTP requests made and the size of the HTTP requests (since Combine compresses files using GZip). Combine will cache the combined files so that server side processing time is also reduced on subsequent requests. Combine allows you to keep your files well structured without having to worry about making too many HTTP requests!

Conclusion

Overall, Combine provides a huge performance improvement for most pages whilst being easy to integrate into existing systems. The purpose of Combine is well defined and it doesn’t try to do more than is needed.

For detailed information see the Combine page on Rakaz.

Posted in Web Development | Tagged , , , | Leave a comment

Development Tools

By Daniel Skinner | Published: August 17, 2007

This is the first in a series of posts in which I will discuss the tools, techniques, and methods I have discovered and used whilst creating Destiny Denied. Here I am going to focus on the excellent selection of tools and utilities that are available for Mozilla Firefox.

As an AJAX application developer many of the tools are focused on debugging Javascript and analysing HTTP requests and responses. I try to make developing sites as easy as possible. Many of the tools discussed also make designing sites easier. There is no mention of PHP tools and utilities here as I think that deserves a separate post.

Web Developer Toolkit

This Firefox extension contains a vast array of tools and links to other tools to make general web development easier.

Some of the highlights of this extension (and by that I mean the features I use the most) are:

  • Quick disable Javascript – You should always check how a page looks and works without Javascript. This is great for usability testing andallows you to see the page how a search engine would see it.
  • Outline Elements – Lets you visualise how your site is arrranged in terms of the layout of block elements.
  • Resize Browser Window – Lets you see how a page will look in different screen resolutions with ease.
  • Validation Tools – Quick links to w3′s HTML, CSS and link validation tools
  • View generated source. See the XHTML source as it looks after Javascript has manipulated the DOM!

There are so many other features in this extension, some of them I didn’t even know about until now. This is a must for any serious developer.

Go to the Web Developer Toolkit site.

DOM Inspector

This Firefox extension allows you to view the page DOM as a tree of elements. Any changes made to the DOM by Javascript are shown here. This tool is great for finding out how Javascipt is changing the page layout and debugging errors associated with it. Although it provides similar functionality to the ‘view generated source’ function it can be much more useful for pages in which Javascript is heavily modifying the DOM.

Go to the DOM inspector extension site.

Live HTTP Headers

I cant live without this! This extension allows you to check the HTTP headers sent and recieved as you request pages. This is useful in so many areas.

In particular I find it useful when doing url rewriting, checking that expiriy headers and eTags are working. This extension is a must when developing AJAX applications since it acts as a layer inbetween the client and server, allowing you to see the requests that Javascript is making and the responses that the server is sending. This is the perfect debugging tool for AJAX development.

Go to the Live HTTP Headers site.

Colorzilla

This little extension is a colour picker and allows you to quickly and easily get the HTML HEX code of different elements on any site. This is a great tool for designing, particularly when creating a new page element in the style of the original site.

Go to the Colorzilla site.

Firebug

The best Javascript debugger around. However, Firebug is much more than that. Even though Firebug is a Firebox extension itself, you can get extensions for Firebug!

Apart from the Javascript debugger, some other cool features available are:

  • Live HTML and CSS editing. Fancy seeing how a page would look with a different background color? Simply edit the CSS in Firebug and see foryourself.
  • Net performance – See how many HTTP requests are being made for the page, how long each resource takes to download, resouce size, amount ofresources in cache and much more. Perfect when optimising your site.
  • Javascript Profiler. Allows you to improve the speed of your code by giving you a full report on what functions are called and how long theytake to execute.

Go to the Firebug site.

YSlow

YSlow is an extension for Firebug developed by Yahoo. It creates a performance report of your page, gives the page a grade and suggests how you might improve load times and reduce the number of requests and the size of the page.

Whilst not being very clear on the best way to improve your page, it acts as a good guide for further research. Using YSlow I have improved the load times of my pages greatly and discovered some very cool techniques in the process. Future news posts will discuss these techniques in detail.

Get a performance report for your site now with YSlow.

Posted in Web Development | Tagged , , , , | Leave a comment