On October 30th, 1999 I was a 17-year-old high-school student with a passion for internet, graphics and design. On that day I published my very first website.

It was a personal website, it was called Jek Web Site, Jek being my nickname, and was hosted on a incredibly poor free service (Digilander, an italian service similar to Geocities). It was built with tables, crappy markup and required me months on work using Microsoft Frontpage 2000 (yes, it’s a shame, but I wasn’t a Mac user at that time yet). Essentially it was a 4-page website about my hobbies, favourite music and videogames. I made it mostly to play around with this new internet thing.

I already knew I liked it, but definitely had no idea it would have turned out to be my fulltime job a few years later.

One year later I decided to buy a domain for my website and wanted to get jek.com. However that domain name was already registered, so, as it was year 2000, I opted for jek2k.com. Since then the domain itself has become the name of my website.

During time it went from totally personal hobby/fun site to a music-related site to Flash site to portfolio site.
In 2006, as I already had a professional website and portfolio at gnvpartners.com, I decided to turn jek2k.com into a blog and jump on the WordPress bandwagon, which was emerging as one of the most talked-about blogging platforms.

Six months later, the WordPress customization of jek2k.com had been featured on pretty much all the CSS galleries and led me to designing WordPress themes for international clients and for Matt Mullenweg, WordPress in person.

And this is the story of jek2k.com. At least of these first 10 years…

This is better than appending post IDs in the querystring, but is still far from perfect, as it includes the ‘index.php’ string in the URL.

I googled around for possible solutions and workarounds and found this useful article. This worked pretty good, but unfortunately didn’t cater to existing permalinks. In other words, using permalinks like the one above resulted in 404 errors.

I modified the PHP code slightly to add support for existing permalinks (with ‘index.php’ in them), so the blog can use pretty permalinks, but old posts linked elsewhere with ugly permalinks work too.

Source code:

<?php
// This is the default file for the site. Usually index.php
$default = 'index.php';

// The name of this file.
// Set this value for the URL in Custom Error Properties of your website in IIS.
// Goto: IIS Manager > Websites > [Site Name] > Properties > Custom Errors >
// 404 & 404;2 & 404;3 > URL (Requires a '/' prefix in IIS).
$thisfile = '404-handler.php';

$_SERVER['ORIG_PATH_TRANSLATED'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_TRANSLATED']);
$_SERVER['SCRIPT_FILENAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_FILENAME']);
$_SERVER['ORIG_PATH_INFO'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_NAME']);
$_SERVER['PHP_SELF'] = str_replace($thisfile, $default, $_SERVER['PHP_SELF']);
$_SERVER['PATH_INFO'] = false;

$qs =& $_SERVER['QUERY_STRING'];
$ru =& $_SERVER['REQUEST_URI'];

// Fix for existing permalinks (eg. http://www.my-domain.com/index.php/2009/09/21/my-pretty-permalink/)
if(strpos($ru,'/'.$default.'/',0)) $ru = str_replace('/'.$default.'/','',$_SERVER['REQUEST_URI']);

$pos = strrpos($qs, '://');
$pos = strpos($qs, '/', $pos + 4);
$_SERVER['URL'] = $ru = substr($qs, $pos);
$qs = trim(stristr($ru, '?'), '?');

// Required for Wordpress 2.8+
$_SERVER['HTTP_X_ORIGINAL_URL'] = $ru;

// Fix GET vars
foreach ( $_GET as $var => $val ) {
 if ( substr($var, 0, 3) == '404') {
 if ( strstr($var, "?") ) {
 $newvar = substr($var, strpos($var, '?') + 1);
 $_GET[$newvar] = $val;
 }
 unset($_GET[$var]);
 }
 break;
}
include($default);
?>

While I know this is just a workaround, this seems to have solved my problem and works pretty good so far.
If anyone knows of better solutions, comments are welcome!

In a recent short travel to Tuscany, I took a photo of a spinning coloured wind wheel (shot at slow shutter speed to emphasize motion), which looks great as a desktop wallpaper. I’m sharing it here for you to download.

It comes in the following sizes: 1280×1024, 1440×900, 1600×1200 and 1920×1200.

Download wallpaper (ZIP, 3.5 MB)

Even if it’s not our primary business, in the last six months my studio was tasked to design a bunch of logos for companies, start-ups and web apps. During this period of time we’ve been putting together a simple sketchboard template to display concepts and show design previews to clients.

I’m finding this template very useful and use it regularly for logo design – it could be used for icon design as well.

I’m sharing the layered PSD file here, so you can grab it and use it.

The template comes half white and half black, to display logos on both backgrounds. The background is composed of several layers, so you can easily exclude the squared paper pattern or the shadows.

It already includes guides to easily center and align things and has text headings that you can adapt to your needs. Finally, this PSD template lets you layout up to 4 concepts at a time (each in white and black versions) and comes at 300dpi resolution so it will work for hi-res images or for printing.

Download PSD template (26.2 MB, ZIP)

1. The simple version

This first version simply reads the RSS feeds from different websites and lists the latest posts for each website.
Feed URIs are defined in an array, so you can easily add as many as you want.
Number of posts per website is also easily editable.

This has support for languages different from English, using UTF-8 encoding, and uses relative dates.

You can see a working example here.

Source code:

<?php

/* feed URIs */
$urls = array('http://webdesignerwall.com/feed/', 'http://gigaom.com/feed/', 'http://techcrunch.com/feed/', 'http://wordpress.org/development/feed/');

/* number of items for each feed */
$num_items = 5;

@require_once('rss_fetch.inc');
define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
$posts = array();

foreach($urls as $url) {
$rss = fetch_rss($url);

if($rss) {
$items = array_slice($rss->items, 0, $num_items);
foreach($items as $item) {
$posts[] = array('title' => $item['title'], 'link' => $item['link'], 'date' => $item['pubdate'], 'source' => $rss->channel['title']);
}
}
else {
echo "An error occured!<br />Error Message: ".magpie_error();
}
}
usort($posts, 'sortdates');
echo "<ul>";
foreach($posts as $post) {
$title = $post['title'];
$url = $post['link'];
$date = $post['date'];
$source = $post['source'];
echo "<li><a href='".$url."'>".$title."</a> from <strong>".$source."</strong>, ".getrelativetime($date)."</li>";
}
echo "</ul>";

function sortdates($a, $b) {
if(strtotime($a['date']) > strtotime($b['date'])) {
return -1;
} elseif( strtotime($a['date']) == strtotime($b['date'])) {
return 0;
} elseif( strtotime($a['date']) < strtotime($b['date'])) {
return 1;
}
}

function getrelativetime($date) {
// Credit: http://snipplr.com/view/4912/relative-time/ and http://twitter.pbwiki.com/RelativeTimeScripts
$gap = time() - strtotime($date);
if ($gap<5) {
return 'less than 5 seconds ago';
} else if ($gap<10) {
return 'less than 10 seconds ago';
} else if ($gap<20) {
return 'less than 20 seconds ago';
} else if ($gap<40) {
return 'half a minute ago';
} else if ($gap<60) {
return 'less than a minute ago';
}
$gap = round($gap/60);
if ($gap < 60)
return $gap.' minute'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/60);
if ($gap < 24)
return $gap.' hour'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/24);
if ($gap<7)
return $gap.' day'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/7);
if ($gap<4)
return $gap.' week'.($gap > 1 ? 's' : '').' ago';

return date("F jS, Y @h:i", strtotime($date));
}
?>

2. The more complex version

Same thing as above, but this version output a list af the most recent posts – source websites are displayed next to titles. This is definitely more useful if you mean to display recent content from mixed sources.

You can see a working example here.

Source code:

<?php

/* feed URIs */
$urls = array('http://webdesignerwall.com/feed/', 'http://gigaom.com/feed/', 'http://techcrunch.com/feed/', 'http://wordpress.org/development/feed/');

/* number of items for each feed */
$num_items = 5;

@require_once('rss_fetch.inc');
define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
$posts = array();

foreach($urls as $url) {
$rss = fetch_rss($url);

if($rss) {
$items = array_slice($rss->items, 0, $num_items);
foreach($items as $item) {
$posts[] = array('title' => $item['title'], 'link' => $item['link'], 'date' => $item['pubdate'], 'source' => $rss->channel['title']);
}
}
else {
echo "An error occured!<br />Error Message: ".magpie_error();
}
}
usort($posts, 'sortdates');
echo "<ul>";
foreach($posts as $post) {
$title = $post['title'];
$url = $post['link'];
$date = $post['date'];
$source = $post['source'];
echo "<li><a href='".$url."'>".$title."</a> from <strong>".$source."</strong>, ".getrelativetime($date)."</li>";
}
echo "</ul>";

function sortdates($a, $b) {
if(strtotime($a['date']) > strtotime($b['date'])) {
return -1;
} elseif( strtotime($a['date']) == strtotime($b['date'])) {
return 0;
} elseif( strtotime($a['date']) < strtotime($b['date'])) {
return 1;
}
}

function getrelativetime($date) {
// Credit: http://snipplr.com/view/4912/relative-time/ and http://twitter.pbwiki.com/RelativeTimeScripts
$gap = time() - strtotime($date);
if ($gap<5) {
return 'less than 5 seconds ago';
} else if ($gap<10) {
return 'less than 10 seconds ago';
} else if ($gap<20) {
return 'less than 20 seconds ago';
} else if ($gap<40) {
return 'half a minute ago';
} else if ($gap<60) {
return 'less than a minute ago';
}
$gap = round($gap/60);
if ($gap < 60)
return $gap.' minute'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/60);
if ($gap < 24)
return $gap.' hour'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/24);
if ($gap<7)
return $gap.' day'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/7);
if ($gap<4)
return $gap.' week'.($gap > 1 ? 's' : '').' ago';

return date("F jS, Y @h:i", strtotime($date));
}
?>

Download the source code for both scripts (24k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

1. Install WP Super Cache plugin

You can download the plugin here – it’s pretty easy to setup.
The plugin itself does 80% of the work and helps a lot speeding up load times.

2. Add some .htaccess rules to force caching of static elements, such as css, javascripts and images.
I had the chance to attend to Fullo’s speech about WP optimization at last year’s WordCamp Italy, when he shared some really useful tips that I finally put into practice. He has posted the slides to his blog, with code snippets.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, public"
</FilesMatch>
</IfModule>

3. Add some .htaccess rules to enable compression of Html pages

This trick was suggested by my friend Luca, who also sent me the following code:

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.css>
SetOutputFilter DEFLATE
</Files>
<Files *.js>
SetOutputFilter DEFLATE
</Files>

4. Finally, add a robots.txt file to prevent unnecessary bot traffic

This was also suggested by Fullo’s priceless slides:

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content

User-agent: Mediapartners-Google
Allow: /

User-agent: Adsbot-Google
Allow: /

User-agent: Googlebot-Image
Allow: /

User-agent: Googlebot-Mobile
Allow: /

User-agent: ia_archiver-web.archive.org
Disallow: /

Before leaving you, here are some other useful articles I’ve found while googling around:

• WordPress Codex – WordPress Optimization
• WordPress Optimization Bible
• Optimizing WordPress Servers

Some time ago my friend Giacomo sent me this little PHP script that allows you to view your cPanel/Webalizer stats from your browser or to make them publicly visible (or maybe make it visible to the client without forcing him to log into cPanel).

Just paste the following code into a text file, save it as stats.php and upload it to your web server.
Viewing it in a browser will display your Webalizer stats and graphs.

<?php
$user = 'username'; //cpanel username
$pass = 'password'; //cpanel password
$url = 'www.yourdomain.com'; //do not include 'http://'

//retrieves the webalizer file, either .html or .png
function getFile($file) {
global $user, $pass, $url;
return file_get_contents("http://" . $user . ":" . $pass . "@" . $url . ":2082/tmp/" . $user . "/webalizer/" . $file);
}
//alters links, either .html or .png
function changeLinks($subject, $type) {
return preg_replace("/($type=")(?!http)(.*?)"/is","$1$PHP_SELF?$2"",$subject);
}

if(!empty($_SERVER['QUERY_STRING'])) {

//get file (whether png or html)
$page = getFile($_SERVER['QUERY_STRING']);

//if png, output appropriate header
if(strpos($_SERVER['QUERY_STRING'],'.png') !== false) {
header("Content-type: image/png");
}
//change the .png src(s)
else {
$page = changeLinks($page, 'src');
}
}
else {
//get index
$page = getFile('index.html');

//change links
$page = changeLinks($page, 'href');

//change the usage.png src
$page = changeLinks($page, 'src');
}
//output it
echo $page;

?>
 

Download the source code (1k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Some time ago I was trying to make a project/icons scroller, to refresh our online portfolio. The idea was having two rows of icons to scroll with a little delay and an elastic effect. Of course, I didn’t want to use Flash for this, so I went for MooTools.

I’ve never implemented this script on our site and the script itself it quite basic and unoptimized. However I thought of sharing it here, with the hope it might be helpful to someone out there.

See a working example

Download the source code (51k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

I usually spend some hours talking with my partner and brainstorming about the client, the brand, the website goals and target, trying to jot down a list of keywords and trying to understand the role of visual design for the specific project. Sometimes it needs to be very creative, since visual design set the tone and style for the site, sometimes it just needs to be minimal and clean. Every project has different needs and every client has different expectations, so every design has a different role.
As a general (and very generic) rule, I think visual design has to be appropriate for the brand of the client, for the site’s target and for the site’s tone.

Said that, before opening Photoshop, I usually tend to sketch some rough concepts on paper and discussing those ideas with my team, in order to get feedback and refine my ideas.
Sometimes this sketches are very basic and their purpose is just to be a guideline for the Photoshop work. Sometimes I end up with more refined sketches and drawings, that serve as a starting point for illustrations or layouts.

In this post I gathered some scans of some sketches from the last 12 months. I’m posting this mostly to share with you part of my workflow and to show a part of my work that is often completely invisible, even if nearly as important as Photoshop skills.

Each of the sketches comes with the final design, so you can see how the very first idea turned into a real website.

Pestaola.gr
The very first sketch has been followed very closely to make the footer illustration for Pestaola.gr.
It has been scanned and then traced in Photoshop, adding colors, shadows and lights.
It served as a basis also for the alternate, winter-ish version.

Omis.me
Om Malik’s new personal blog is an example of how a very rough sketch turned into an actual design. Even if very basic, the layout of the sketch has been kept: ratios, position of elements and overall shapes are very similar in the final design.

ColorFever
This is more like the Pestaola project, where the sketch has been followed closely. This time, when working in Photoshop, I changed the size and position of many elements, to adapt the very first concept to a 1024-optimized web layout. Some of the objects in my drawing also were discarded by the client, so I ended up with a simplified composition.

Rikorda.it
Rikorda is a different example: in this particular care, the sketch wasn’t done for a visual design design purpose, but to evaluate different a user interfaces.
The products tree was a key feature of the new site and we spent quite a lot of time discussing how it could be integrated into the layout.
We sketched different ideas and the drop-down panel below made it to the final design.