Category: Web Development


Speed up search in Visual Studio Code by excluding folders

Add the following to your Workspace or User settings:

"search.exclude": {
    "**/.git": true,
    "**/node_modules": true

Excluding node_modules from Sublime Text Ctrl+P file search

Add the following to user preferences (Preferences / Settings – User):

"folder_exclude_patterns": [".git", "node_modules", "bower_components"]

Make sure to restart sublime for the changes to take effect.

The problem with this setting is that it also removes these folders from the sidebar.

If you still want to see the files in the sidebar but still exclude them from search and Ctrl + P you can instead use binary_file_patterns:

"binary_file_patterns": [".git/", "node_modules/", "bower_components/"]

Note that a forward slash is required at the end for directories.

Remember to restart Sublime again.


Install phpUnderControl on CentOS 5

A while back now I started setting up a server to use as a development machine. From a standard CentOS 5 installation I have installed SubVersion and Trac. Now I have finally got round to installing phpUnderControl for continuous integration and build management.

As usual, there are many great guides already on the net but getting everything to work usually requires a few of these references and a few additional changes. I will point out where I got the information from where applicable but the aim of this guide is to be complete and comprehensive.

If you follow this guide you should start with a basic CentOS 5 installation with Subversion setup correctly and end up with a working installation of phpUnderControl.

Continue Reading..


External CSS won’t load in IE7

I just spent a while wondering why IE7 wouldn’t make use of an external stylesheet when it worked in Firefox no problems.

The page is in UTF-8 and the .css file was also encoded in UTF-8 but IE7 simply refused to render the page using the CSS rules.

I have no idea  what the problem is but if you are having similar issues try putting @charset “UTF-8″; at the top of your external stylesheet – it worked for me.

Does anyone know what the underlying issue is?


Link Targets in XHTML

I always prefer to build websites in valid XHTML as it allows for a stricter, more maintainable envorinment to build websites than traditional HTML. However, there are a few features of HTML I like to make use of.

For example, making links open in new windows using the target attribute is unsupported by XHTML.

Continue Reading..


Chaining with MooTools 1.2 – Tutorial

This guide will show how powerful the MooTools Chain class is. In MooTools chaining facilitates the execution of a stack of functions sequentially and is extremely powerful. I have only tested this in MooTools v1.2 beta 2.

I will be posting more of these short guides on using MooTools in the upcoming weeks. Each will focus on a small problem and solve it with MooTools with the aim of being a useful way to learn the framework.

Continue Reading..


Lightview by Nick Stakenburg

Nick has just released Lightview (another neat project) to the public. Lightview allows you to augment your images. It provides an excellent way of creating a slideshow or simply showing a large version of a thumbnail without resorting to popups. Effects are used to create very appealing slideshows and image galleries.

From the Lightview project site:

  • Clean: Designed to compliment your images.
  • Fast: Images and their neighbours are preloaded.
  • Easy to customize: You don’t even have to know CSS.
  • Rounded: Adjustable rounded corners, without PNGs.
  • Smart resizing: Images will always fit on your screen.
  • Slideshow: One button slideshow.
  • Effects: Using Scriptaculous.
  • Works on all modern browsers

Lightview is similar to Lightbox 2 and both are built with Prototype and Scriptaculous. However, there are a few differences I noticed:

  • The morphing effect that Lightview uses is a refreshing change (probably because I have seen the Lightbox effects too many times!).
  • Lightview allows you to customise many of the visual aspects of the viewer programatically. For example, the background colour and corner radius.
  • Lightview supports a customisable slideshow option which Lightbox lacks.
  • Lightview uses the caption attribute of the <a> tag to give images a caption. This attribute is not valid XHTML and thus its usage will produce invalid markup. I would suggest using a convention similar to that used by MooTools Tips: title="image title :: caption"
  • Lightbox has been around for a while and is well tested and proven.

Personally I like the look of Lightview but I wouldn’t use it because I don’t like invalid markup!

If you are interested in something similar for the MooTools framework, try Slimbox.


Trying out MooTools 1.2 Beta 1

Whilst I commonly use Prototype and 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 (

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



Starbox – Rating stars for prototype

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


Prototip 1.1.0 Final Released

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!