Leaflink Explaind - Part 1 (summary)
This is the first part in a two part series of tutorials on the technologies behind the Leaflink project.
In part one, I will give a summary of the project, its business goals and an overview of the technologies used. This is probably the boring of the two parts, so if you really don't care about the "why" and want to jump straight into the "how", then skip to part two (in progress - stay tuned).
Part two will go over each method used and give a detailed step-by-step explanation of why and more importantly, the "how". Part two will be full of screencasts and working code. If you are the bottom up sort of person, then you may just skip to part two to see all the examples and screencasts (or just to steal the code! ;-))
The Leaflink project came about when my supervisor asked me to create for him a simple webpage with links to other development sites on our network. Since a lot of our internal servers do not have proper host names and rely only on IP addresses, keeping track of them is a hassle. He wanted a central area where he could just go to and link to any other project or site in our network. Simple enough, right?
Realizing that this was a project that would take me all of 20-30 min to complete (mostly because I had to track down all the different IP's and servers), I decided to take it to a new level. All of a sudden, a simple page of links became our own version Del.icio.us on steroids with a CMS to add, delete and modify links.
I am not sure if this is true of every company, but most of the ones I've worked with have pretty ugly looking internal sites. This is mostly due to the fact that they need something up and working quickly, and usually it's a programmer who puts the whole thing together. I decided early on that I wanted Leaflink to be very pretty and I also wanted to make use of some of the cool javascript/css techniques that I've been reading about on various blogs. I didn't spend too much time and effort in photoshop making fancy graphics and used solid colors and good old rounded corners to achieve the look I wanted. The result isn't too bad - as everyone here seems to like it.
Ok, so now you know "why" this project was created. In part two I will discuss in detail each method that was used to accomplish a certain look and/or effect. The topics to be covered are:
- Nifty Corners - creating smooth corners that work both in IE and Mozilla, w/o using any images at all.
- The Prototype library - a javascript library that has some great functions to help in DOM manipulation and to create transitional effects (fade, zoom, shrink, etc.)
- Fade Anything Technique (FAT) - used to signify a change on the page using a smooth fading background color for the effected area.
- In-line Editing - editing values on a page by simply double clicking on them. No need for a seperate page or form.
- Save Scroll Position - Page remembers the scroll position of where you were when you submit a form. Very helpful on long scolling pages.
- Custom Popup Containers - This one needs to be seen to appreciate. Popups using DIV's as opposed to a new window. Also fades background to focus on popup. This one is my favorite and used a lot in the project.
Note: I was going to try and fit everything into part two, but it seems like that may be impossible (or rather annoying and hard to follow.) I've decided to break up part two into subsections. Hopefully this will allow you to read and understand each subsection as I am working on the next.