Keeping track of all those wonderful code snippets

I tend to spend many a wasteful hour trolling the www looking for wonderful code snippets that will enhance my next project.

Then, when working on a project, I would think: “oh remember that little tip I read somewhere, that would look great here!”  I would then have to open up my browser and delve into the numerous bookmarks looking for that perfect little code snippet.

The solution… I created a local webpage storing all my little code snippets.

The concept is very simple… my own personal website running on my local server which I can quickly access and find the best solution for the particular project I am working on.  Of course when I find something I feel might be useful, it is a simple case of opening my editor and creating a demo of the technique or script.  I can add any comments or notes as well as reference the original url so that I can easily find updates.  In addition, local copies of source code can be stored without any hassles.

Designing the local site

Due to the fact that the purpose of my snippet site is to demo code snippets, I decided to keep the design simple.

There really is hardly anything to the page:  a menu at the top, a little background, with a neat little content section.

At the top of the page I have placed a fixed drop down menu which helps organise the snippets into logical groups:

Below the skyline … is a neat 600px display area which is great for showing off effects:

On the css side of things, I have also been kept to a minimal, just 48 lines of which more than three quarters are for the menu.

I decided not to use any resets as any css techniques would most likely be dropped into an existing page so the example code should over-ride already set styles.

I did style the pre tag as much of the content on the page would be code.

I also decided to include a little link – thumbnail – gallery for easy access to local copies of projects and templates.

And that is it!  The result is a place to test out new techniques, store code and try out new scripts with the added benefit of quick reference when working on projects.