If you're a regular visitor of Marcofolio, you know I love to create (and share) some wicked Proof of Concepts (For example: the Polaroid photo viewer and the iPhone Contacts App). They are nothing more than showing some amazing potential of certain techniques.

Today, I wanted to transfer the amazing slick Skype (for Mac) layout to your own webbrowser. Not the full layout: Only the menu where all your friends are listed. For the nifty layout we're going to use CSS3 and for the extra functionality (ofcourse) jQuery.

Features:

• Expanding and hiding the contact details.
• Nifty layout using CSS3.
• Extra info (behind each name that is not expanded) is added through jQuery.

  

Sadly, just like all other CSS3 examples placed here, not all browsers support this functionality. Only browsers that support the -webkit prefix (Safari and Chrome) and the latest version of Firefox (3.5 through the -moz prefix) are fully working. Other browsers will show the menu without the extra markup.

OK, here we go! Let's see how you can create one of these wicked Skype menu's yourself. The users listed in the demo are the friends of Marcofolio (same that are placed in the footer) with their Twitter profile picture and links.

Shortly after I had the chat conversation with Grant Friedman, I contacted another famous internet hero: Jacob Gube. If you don't already know this great guy living in Bloomington, I'm sure you've seen his website: SixRevisions. The site provides practical, useful information for the modern, standards-compliant web designer and web developer. It seeks to present exceptional, noteworthy tips, tutorials, and resources that the modern web professional will appreciate.

Jacob shared some great stuff with me during this chat conversation; About his personal life, his "online life", webdevelopment and design tips and more. It's one of the most inspirational chat conversations I had.

Many personal opinions (both from me and Jacob) are shared in this conversation. If you have another opinion yourself, feel free to share them with us by simply leaving a comment.

Sit back and enjoy this chat conversation! I'm sure you might learn something from this great and creative webdesigner / developer.

Grant Friedman is a designer, blogger, author, and teacher based in Louisville. He is also the founder of Colorburned - a website with brushes, patterns, vectors, tutorials and more!. His blog shares some amazing design related stuff and is growing every day.

I had the chance to "burn some color" (having a chat conversation) with Grant. You can read the full conversation here, sharing some personal and useful stuff with the rest of us.

Now, lets sit down, take a drink and chat with this creative man behind the scenes of Colorburned.

A while ago, an article called "A fancy Apple.com-style search suggestion" was placed here. Many people loved it and already used the search suggestion in their latest web project.

Still, readers gave some criticism about the script. According to Jape, Simon and others the script was missing one vital element which the Apple search does have: keypress navigation (keyboard accessibility). For that reason, I'm presenting you a way you can improve that script yourself using advanced keypress navigation with jQuery.

Check out the demo so you can try it yourself: There is a simple menu displayed which reacts to the Up and Down arrows, as well as Enter (or Return) to follow the link.

  

The script is (a bit) advanced because of the extra functionality when the user combines the mouse hover and keypresses. Want to know how to create it yourself? Check out the source code or follow these steps in this tutorial.

After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I'm proud to release my first jQuery plugin for everyone to use.

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.

As usual, you can freely use and modify this script where you want and I hope it can be of use in your next (web)project.

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.5 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the menu, but (sadly) in a whole different way.

  

The plugin has been made as extensible as possible, so you can also view a demo with advanced settings. Make sure you check out the video demo and how to use the plugin.