Page Control Link Function

I tend to spend a lot of time obsessing over the work I've already done, trying to make things "perfect" before moving on. My perfectionism tends to burn me out, so I'm really trying hard not to get caught up in worrying about every little detail. If I see an opportunity to revise some code to make my life easier in the long run, however, I'm definitely going to do it.

Right now there are only two or three functional links on the website. The rest are "dummy" links that are there only to help flesh things out, giving me a better perspective into how the layout will look in the end.

Up until this point, I have created all the links using standard HTML as such:

<a href="site/links">Links</a>

I decided instead to create a function in the PageControl class that will handle all site links. Now, creating a link will look like this:

echo $page->getLink("Links","site/links");

This returns the HTML code seen above. Why go about it this way? Basically, flexibility. If I decide to change the way file paths are displayed in the url, its just a matter of altering the why the function returns the href attribute.

I also created some functionality that will make it easy for visitors to distinguish dummy links from functional links as the website is being developed. As I said before, I like having these for visualization purposes. For example:

echo $page->getLink("Register","");

This prints an empty link. The problem is visitors to the website won't know it's an empty link until they click on it! To make page browsing easier, if the getLink method sees and empty href, it will return the following code:

<a href=""><span style="text-decoration:line-through">
Register</span></a>

As you can see, a span with a line-through style is added, and this is the result:

Register

Now, it's obvious that this is not a clickable link! More functionality could be added to this function as well, such as returning text without the anchor tags if that link is the current page. But for now, I'll quit obsessing and move on!

View the PageControl class here

Blog Template Design

I stayed up until 3:30AM last night working on the template for this blog. I probably should have stayed focused on getting some work done on the website, but taking a break from programming to do creative work once and a while helps keep me interested and prevents burnout.

I tend to do my best work during the late night/early morning hours, and that's really where the idea for this theme came from. A sketchbook, lit by a single lamp, filled with scribbled notes and doodles seemed appropriate. It really did not take long to create the graphics for the template. I already had the sketchbook illustrated for a different project a while back, so it was just a matter of creating the mask and the lamp.

After all the graphic elements had been created, it was time to start working on the HTML and CSS. The sketchbook part of the layout is very simple. It's a table (id wrapper) with two rows and one column. The first row is the header cell which contains the header image, and the second row contains the blog widgets. That's it, nothing fancy.

Next comes the fun part! For the lamp and mask, I created five divs below the wrapper table:

<div id='topMask'/>
<div id='rightMask'/>
<div id='bottomMask'/>
<div id='leftMask'/>
<div id='light'/>

Each element above has a fixed position on the page. I specified a z-index for each, the light div having the highest number since it needs to show up in front of the mask divs.

Of course, just when I think I'm finished, I realize I have a huge issue with this design. Although it's mostly transparent, the light.png image is actually 475px square, and (at least on my screen) covers up a lot of the text. You can still see the text because of the transparency, but you can't click on any links that fall below the image!

What I had to do was implement some simple Javascript. I created a function which gets the light div display style and hides or shows it accordingly:

<script language='JavaScript'>
function hideLight() {
document.getElementById('light').style.display =
(document.getElementById('light').style.display != 'none') ? 'none' : '';
}
</script>

Lastly, I created one more div below the other five. This div holds a light bulb icon with a link which calls the hideLight() function when clicked. Again, this div has a fixed position with a z-index above the mask divs:

<div id='toggleLight'>
<a href='javascript:hideLight();'>
<img src='http://www.gregsproject.com/images/blog/lightIcon.png'/>
</a>
</div>

That's it! Now, time to get back to work on the website. I have made some good progress in the past few days and plan on writing a blog post with an update very soon.

About Greg's Project

Hello, my name is (you guessed it) Greg, and I'm a self-taught web programmer. Always having been fascinated with dynamic websites, I bought my first PHP book about two years ago and have been hooked ever since. Although I don't consider myself to be an advanced programmer, I do feel like I have a solid handle on the PHP language. Up until this point, however, I've really only used it to help streamline the amount of work that goes into building basic websites. What I have yet to do is build a large-scale dynamic website from scratch. That's the main goal of this project.

With Web 2.0 being the buzzword these days, I have decided to create a social networking website geared towards caricature artists. I chose this as my focus because I myself am a caricaturist and have been drawing professionally since 1999. I registered the domain name CaricatureSpace.com which, if everything goes as planned*, will become the primary domain for this site. For now, just visit GregsProject.com to view the progress. I am allowing public access to the source code at dev.GregsProject.com and will try to update this blog whenever I get a chance.

To programmers, whether you are self-taught or professionally trained, a newbie or seasoned vet, I would love to get your feedback regarding the structure and functionality of the application. Being self-taught, I know a little about advanced programming concepts (MVC design, Zend, Smarty, etc.), but much of this is still over my head, so any input would be greatly appreciated. I also apologize ahead of time for any improper use of programming terminology/lingo!

To caricaturists, I would also like your input regarding the development of the application. A few features which I hope to implement are allowing users to upload caricatures, create "favorite artists" and "favorite caricatures" lists and earn points by competing in contests/tournaments. At some point I want to create a features list page with a suggestion box as well.

That's all for now. Thanks for taking the time to read this post!

* Although my goal is to develop this application to the point where it's fully functional, this is still just a personal project and I may have to take a break from time to time. As an artist/designer I tend to have long stretches with a lot of free time before suddenly getting hit with freelance work which puts all the "fun stuff" on hold. If nothing else, I'm hoping that this website can act as a resource for other programmers.