How2Pc » 2009 » February

Archive for February, 2009

February 28th, 2009

Sometimes I’m so focused on JavaScript that it becomes a bit of a hammer for me that I try to use it on all problems. I forget about the power of CSS and what it can do. I recently met Nicole Sullivan at Web Directions North who is a CSS guru, especially around performance. She told me about an idea she’s been working on called Object Oriented CSS, and she’s just released open source code and documentation on the idea on github. From Nicole:

My [Object Oriented CSS] grids and templates are open sourced on github. They have all the functionality of YUI grids plus some important features.

* Only 4kb, half the size of YUI grids. (I was totally happy when I checked the final size!)
* They allow infinite nesting and stacking.
* The only change required to use any of the objects is to place it in the HTML, there are no changes to other places in the DOM and no location dependent styling. Eases back-end development and makes it a lot easier to manage for newbies.

http://wiki.github.com/stubbornella/oocss

…My prediction is that you’ll be writing complex layouts in less than 24 hours without adding a line to the CSS file.

The Hack

As you use the HtmlHelper to create links with the helper's link() method, you throw an url in the form of an array at Router::url() everytime. With the complex routes parsing done for every $html->link() call, this becomes a big issue for link-heavy sites. There will be the most overhead if you have a lot of routes installed. So I thought if it's easily possible to override the behaviour for standard urls that don't need routes parsing. A classical example would be:

php

$html->link(‘Check this Article’, array(‘controller’ => ‘articles’, ‘action’ => ‘view’, $article['Article']['id']));

Since this link is dynamic (depending on the article id) it does not need routes parsing (most of the time, more on that later). There are others, like 4 parameters, 2 parameters, pagination links that have named params in the url .. or only one parameter if only the ‘controller’ is present and you want to access the index action, etc. I have tinkered a little and wrote some code that we are using in most of our projects now and it has worked out quite well. In fact it is saving almost half a second for every request:

php

<?php
class AppHelper extends Helper {
function url($url = null, $full = false) {
$Router =& Router::getInstance();
if (!empty($Router->__params)) {
if (isset($Router) && !isset($Router->params['requested'])) {
$params = $Router->__params[0];
} else {
$params = end($Router->__params);
}
}
if (isset($params['admin']) && $params['admin'] && !isset($url['admin'])) {
$url['admin'] = $params['admin'];
}
if (is_array($url) && isset($url['controller']) && !isset($url['page'])) {
if (!isset($url['action'])) {
$url['action'] = ‘index’;
}
$admin = ”;
if (isset($url['admin']) && $url['admin']) {
$admin = Configure::read(‘Routing.admin’) . ‘/’;
if (strpos($url['action'], $admin . ‘_’) === 0) {
$url['action'] = substr($url['action'], strlen($admin));
}
}
unset($url['admin']);
unset($url['plugin']);
$count = count($url);
if (4 == $count) {
return ‘/’ . $admin . $url['controller'] . ‘/’ . $url['action'] . ‘/’ . $url[0] . ‘/’ . $url[1];
}
if (3 == $count) {
if (isset($url['id'])) {
$url[0] = $url['id'];
}
return ‘/’ . $admin . $url['controller'] . ‘/’ . $url['action'] . ‘/’ . $url[0];
}
if (2 == $count) {
return ‘/’ . $admin . $url['controller'] . ‘/’ . $url['action'];
}
if (1 == $count) {
return ‘/’ . $admin . $url['controller'] . ‘/index’;
}
}
return parent::url($url, $full);
}
}
?>

How does it work?

As you can see, it’s simply overriding the default behaviour for Helper::url() in your AppHelper. It goes through the classical cases and builds out the url via lightweight string concatenation. Not a beauty, but fast.

What it really does is breaking the reverse routing feature. That means if you specify such a route:

Router::connect('/login', array('controller' => 'auth', 'action' => 'login'));

Then create a link with $html->link('Login Now!', array('controller' => 'auth', 'action' => 'login')), the link url will not automagially transform into '/login' anymore. This is pretty bad, however if your site hardcodes the urls used in routes, this is not a problem. This means that instead of providing array('controller' => 'auth', 'action' => 'login'), you just do '/login', which I always do for specific pages since there aren't so many of them. So the hack helps for non-dynamic cases.

Usage

To use the code, acknowledge it’s more like a site-specific optimization. By the way, for those of you who think I should just go ahead and contribute a patch to CakePHP that will make it possible to disable reverse route lookup, I talked to Nate already. He said he is in the process of rewriting the Routing for Cake 1.3 and it will be much faster. In the meantime, this might help you.

Copy and paste the url() function to your AppHelper class in app_helper.php. Try it out and see if it works for you. Obviously, it doesn’t affect all cases and is pretty specific to how we write urls. However, it falls back to the normal url parsing if no appropriate case is found. Any suggestions, bug reports and contributions are welcome.

Disclaimer:

In no way do I claim that this code will work as well for you as it does for us. It's specific to how urls are written using $html->link() and you might screw over your app by using this. Take extra caution when using it – especially with reverse route lookup – and make sure to test your app thoroughly.

– Tim Koschuetzki aka DarkAngelBGE

Go to Source

Posted in Coding, PHP, Uncategorized by shuky

No Comments

10 Steps To The Perfect Portfolio Website

February 27th, 2009

by Lee Munroe

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

You may want to take a look at the following related articles:

What makes for a good personal portfolio website?

1. Logo

Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

Mohit goes by the alias of CSS Jockey.

Jason Reed uses a signature-style logo of his name.

2. Tagline

Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.

Things to ask yourself when writing your tagline:

What are you? A designer? A writer? A developer?
What do you do? Design websites? Develop games?
Where are you from? Country? City?
Are you a freelancer or do you work for a studio? Are you looking for work?

Sarah Longnecker makes it clear that she puts together videos and is good at it.

3. Portfolio

This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.

Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.

It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.

Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.

4. Services

Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.

Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.

Chris Spooner clearly indicates the services he offers for both print and Web.

5. About me

It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.

If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.

Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.

Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.

6. Contact

This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.

Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.

Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.

7. Blog

A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.

Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.

Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.

Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.

8. Call to action

Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.

Each page should have a call to action, a “Next step.” The best way to accomplish this is with a “call to action” button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,” “Request a quote,” “View my portfolio”).

Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.

9. Use social networking websites

Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.

Sam Brown offers clear links to other websites he uses, allowing us to stalk him.

10. Language and communication

How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.

Marius Roosendaal uses a relaxed and friendly tone on his website.

Other tips:

Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
Link images, not just text. Most people will click on images, expecting them to point somewhere.
If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.