• You can call a function to jump to any slide by index
• It will always seem like the slide just slid in from the nearest neighbour
• You can put any html in a slide
• You want to easily integrate with a external thumbnail carousel for example
• It is 1 small function so it is easy to extend to your needs

Background

Recently at work I had the need for a slider which I could chuck in drupal and easily integrate with the thumbnail carousel on the page. However I couldn’t find a slider which could jump to any index and be simple and unstyled. Plugins, like CMS official themes, should be barebones styled and it baffles me why so many are far too decorated to easily and quickly adapt!

How it works for the curious

Visualize the parent element as a curtain with a fixed frame. Everything outside the curtain cannot be seen. Underneath the curtain is a very wide film reel with the same height as the curtain.

When you ask for a certain clip on the film reel, it slides along to the correct position so that clip is the one shown within the curtain frame. The trick to make it look good is to collapse all the clips inbetween the current one and the one you want to see, so that it always appears to be sliding in from right next to the current one.

Simple demo

Demo

Download the demo and plugin

Nifty JQuery Slideshow (42)

It is designed in opposition to the clutter seen in many designs and draws the user straight to the stuff that matters – namely your work.

Features

• Clean-cut Minimal Design.
• Dark & Light Colour Schemes.
• Designed and coded from ground up using no bloated theme base.
• Clean HTML5 developer ready code.
• Child themes the proper wordpress way (easy to create and modify).
• 3 Custom Widgets.
• 6 Widget Areas.
• Sample Content included.
• Filterable Portfolio.
• WordPress 3.0 Ready (Menus & Featured Images)
• Infinitely nested dropdown menu.
• Video Setup Tutorial

Demo

click here

Download

MinimalFolio – WP Theme (79)

http://www.dreaminpixels.net/downloads-2/?did=5

It is important that you first decrypt your documents using the old version before upgrading since this one isn’t compatible.

Compression, File Images & Burning

WinRAR

WinRAR is pretty much the first program I install on a new build. It simply gets on with the job at hand. It looks and feels simple too but under that bonnet is some amazing stability and file compatibility. Apart from the normal files like .rar and .zip it can also handle all major image files like .iso which is very cool!

Daemon Tools

Daemon Tools is another great program that just does its job. I use the lite version which is all I have ever needed. It sits with your tray icons and a right click can mount any popular image file to a virtual drive.

ImgBurn

It’s simple to use, fast, capable, stable, and has a clean interface. If you don’t know what you are doing it prompts you saying “hey noobie, are you sure u wanna do that, maybe you should do this instead!”. In a nut shell – even karma can use it.

Worth Noting: Alcohol 120%, MagicICO, UltraISO

Hardware & Benchmarking

GPU-Z

GPU-Z is a lightweight utility designed to give you all information about your video card and GPU.

CPU-Z

CPU-Z is a freeware that gathers information on some of the main devices of your system e.g. CPU, Motherboard, RAM, Graphics etc.

Note: Benchmarking software TBA

Maintanance

CCleaner

Not a fan of most cleaning software than claims to magically boost your performance but this is a clean and well made (and free) cleaner. Does the same job as any of the paid ones I’ve tried.

PerfectDisk vs Diskeeper vs O&O Defrag

These are all top notch defragging utilities that work under the radar (when your PC is idle etc). Each has minor quirks but all do the job great. Personally I have not tested O&O Defrag but I hear good things.

Programming

Microsoft Visual Studio

A simply stunning IDE that does just about anything from low level software, to .NET, to websites. You can even create php sites with the excellent VS.php plugin. 2010 adds more goodness with a smoother WPF interface and intellisense improvements. Be sure to checkout WPF and ASP.NET MVC 3. An essential tool for any programmer.

VS.PHP

A great plugin for Visual Studio that turns it into a php IDE.

phpDesigner

Written by an independent programmer this is the only PHP IDE out of the many I tried that I didn’t almost immediately uninstall in disgust.

Adobe Dreamweaver

A brilliant editor for html and css, and can get by in javascript and php (just)

Notepad++

A superb lightweight but full featured text editor I constantly use even while doing the bulk of code in other programs.. I am writing this in Notepad++ right now. Be sure to check my SecurePad plugin for it.

Wireshark

Excellent packet capturing and analysis tool

Image Editting

Adobe Photoshop (bitmap)

Adobe are hands down one of the best software giants out there and Photoshop is way ahead of its competitors.

Adobe Illustrator (vector)

I have less vector exerience but if you like Photoshop you will like this.

Video Editting & Rendering & Sound & Encoding

Adobe Premiere

By far the best editor I have used, and Avid is by far the worst.

Adobe After Effects

Industry benchmark. Nuff said.

Adobe Soundbooth

I wish I had seen this before I had done 30 hours in Audacity (not to diss Audacity, its great but not as well suited to video-sound editting). Worth Noting: Audacity, Sony Sound Forge (my favourite wave editor), Adobe Audition (similar to Soundbooth but more advanced)

Fraps

Goes beyong the call of duty for normal screen capturing but perfect for full def capturing of renders and games etc (Also captures sound).

Format Factory

Format Factory is a multifunctional media converter. Converts to a huge amount of formats and its free.

Web Browsers

Until recently this would have been an easy decision. Now its coming down more and more to your preferences because even IE9 has got it right now.

Mozilla Firefox

Still what I use, has a great range of plugins and I will recommend some essential ones further down the list.

Google Chrome

Fast and minimal. Until recently wasn’t interesting because it didn’t have the right developer plugins, now its has them and its a real contender (I will list them further down).

Worth Noting: Opera, maybe even IE9 and new version of Safari

IE6 Plugins (yup)

Internet Explorer Developer Toolbar

I only found out about this recently and it is EXTREMELY useful for working out IE6 bugs. It adds developer tools such as easily turning on and off javascript and a property inspector. One day soon we will stop needing to support IE6 commercially. I pray.

Worth Noting: IETester – a good quick alternative if you dont have a virtual pc set up or want to quickly test something on your localhost without copying it to the virtual pc (not always accurate and make sure you get the developer plugin with it).

Firefox Plugins

Firstly I have to say that I don’t know, nor have tried a huge amount of ff plugins. But here are some I think are incredibly useful for the average user and developer.

Adblock Plus

Great for blocking most adds. Also has an easy to use dynamic interface for blocking additional items your subscription list hasn’t discovered.

FlashGot

Very useful for downloading many links at once or sending links to a download manager.

WebMail Notifier

Lets you know when you have new mail.

FireShot

Capture entire or visible portions of web pages.

ColorZilla

Useful for color eye drop capturing.

Web Developer

A one stop show horse for visual web developing. Great tool does too many things to mention, go and a look!

FireBug

A fantastic javascript debugging tool. You can also inspect html elements and modify web pages on the fly (bug..fly.. genious)

Google Chrome Plugins

When chrome first came out the thing that stopped me from giving it a proper run was its lack of plugins. This is no longer an issue and I am sure there are other great ones besides these.

Web Developer

The Firefox equivalent. Although note that chrome comes with an excellent tool of a similar nature built in now.

Adblock Plus

Great for blocking most adds. Also has an easy to use dynamic interface for blocking additional items your subscription list hasn’t discovered.
The chrome version, same as firefox. Although I actually might prefer the UI layout of this one.

Aviary

Image capturing plugin with some impressive features post capture.

Eye Dropper

Title says it all.

Speed Tracer

A very cool perfomance analyzing plugin by Google.

Window Resizer

Although Web Developer plugin has this, this is much niftier for resizing easily and quickly to device presets.

Sound Production & DJing

Native Instruments Traktor Pro

Easily the best mixing software (and the best looking).

MAGIX Samplitude

Out of the many, many DAW’s I tried this was the only one that felt right. A less well known DAW but the best I’ve used (Windows only).

Worth Noting: Cubase, FL Studio

Media Players

No media players come even close to these.

VLC (for videos)

You should know it and be using it, plays just about everything and better than others. If you aren’t using it go get it now!

foobar2000

A minimal, lightweight, clean player that plays audio and not much else thank you. Is windows friendly so uses all the shortcuts you are used to. Gives you a lot of audio detail and the tag editor is great. You can also mass edit tags which is a big plus.

FTP Management

Globalscape CuteFTP Pro

Clean interface and somehow manages to do things a lot faster than others.

P2P Audio Sharing

Soulseek

The only one worth mentioning. Has a much greater range of music, is for mature people that share genuine files, and displays quality etc (note that you should go by the file size for quality because it often reports the bitrate wrong). Make sure you share your music too, and donate just $5 to the dudes who have made this and host it because they are struggling with costs (and you will get priority downloads too).

Data Sharing (general)

There are now a host of file sharers but the purpose is kinda defeated if everyone decides to be cool and use different ones.

Rapidshare

Always been reliable and fast. At one point some manager decided to change the way the system worked and people thought they were getting a worse deal. It caused a huge rift.

Hotfile (NO!)

A terrible, awful, shitty host that you should never use. If you aren’t situated near their center somewhere in a teepee in the US you will get about 30kb/s download. Party like its 1998.

Filesonic (Nope)

Even though I don’t dislike this company with the vehemence of Hotfile, their download is just plain SLOW and it baffles me why it’s so incredibly popular nowadays.

VoIP (Voice Over IP)

Ventrilo

The best voice comm app you can get.

Teamspeak

Used to be bad but perfectly decent nowadays.

Note: These are for more serious people who have a server host, otherwise stick to MSN or Skype or something.

Web servers

Microsoft IIS

IIS used to be crap but is now good since version 7.

Microsoft Windows Server

Also used to be crap but is now great.

Apache

The webs standard.

XAMPP & WampServer

Takes away all the headache of installing a local apache/php/mysql server.

Note: lighthttp looks interesting, anyone?

SQL Management

Toad

The best software for db management, handles a lot of different db’s so be sure to check it out.

Database

MS SQL

Still leading after all these years.

Oracle

Another respectable giant alongside MSSQL.

MySQL

Passable nowadays since they recently introduced InnoDB and clustered indexes, although more improvements still need to be made.

Remote Viewing

Teamviewer

Great for visually remoting on to someone’s box. The most secure one of its kind I have used too.

Features

• x86/64 compatible without changing code
• Uses a lightweight length dasm
• Allows for infinite detour chaining
• Uses absolute detours only where necessary (i.e. 64bit jumps)
• Easy to use, easy to set up

How to Include

Copy the “DetourXS” folder into your source folder and include, #include “DetourXS/detourxs.h”

Example Use

The package comes as an example ready to be compiled with VS2010. To test x86/x64 change the build between “Debug” and “Debug64″. For your reference though:

#include <Windows.h>
#include <iostream>
#include "DetourXS/detourxs.h"

typedef DWORD (WINAPI* tGetTickCount)();
tGetTickCount GetTickCountOrigFirst = NULL;
tGetTickCount GetTickCountOrigSecond = NULL;
tGetTickCount GetTickCountOrigThird = NULL;

DWORD WINAPI GetTickCountHookFirst()
{
 std::cout << "GetTickCount FIRST HOOK calledn";
 return GetTickCountOrigFirst();
}

DWORD WINAPI GetTickCountHookSecond()
{
 std::cout << "GetTickCount SECOND HOOK calledn";
 return GetTickCountOrigSecond();
}

DWORD WINAPI GetTickCountHookThird()
{
 std::cout << "GetTickCount THIRD HOOK calledn";
 return GetTickCountOrigThird();
}

int main()
{
 DetourXS gtcFirst(&GetTickCount, GetTickCountHookFirst);
 GetTickCountOrigFirst = (tGetTickCount) gtcFirst.GetTrampoline();

 DetourXS gtcSecond(&GetTickCount, GetTickCountHookSecond);
 GetTickCountOrigSecond = (tGetTickCount) gtcSecond.GetTrampoline();

 DetourXS gtcThird(&GetTickCount, GetTickCountHookThird);
 GetTickCountOrigThird = (tGetTickCount) gtcThird.GetTrampoline();

 DWORD count = GetTickCount();

 std::cout << "count: " << count << std::endl;

 return 0;
}

Coming Soon & Limitations

• Fixing of relative opcodes in the trampoline (until this is done some function hooking will cause crashes)
• Maybe class detouring

Credits

LDE64 engine (http://www.beaengine.org/)

Notes

Crashes: The detour currently doesn’t fix relative opcodes in the trampolene. Therefore relative opcodes can jump/call to the wrong places, or read/write to wrong places.

Chaining: There is currently an issue with chaining: If a detour is removed that isn’t the last one in the chain this will break the chain for the ones after it. I think solutions for this could become very messy but if anyone has ideas please let me know. I thought about when a detour is Destroy()ed to fix its own patched bytes if it has any, and then repointing what it terms as the original (m_lpFuncOrig) to the address the patch was pointing at (aka the one next in the chain). This would work but then how could you destroy the chain afterwards since you just destroyed the class capable of restoring the m_lpFuncOrig bytes!?

Download

DetourXS (173)

I would say this is a beta release since it hasn’t been extensively tested yet.

Enjoy!

SecurePad can be used, among other things for:

• Encrypting files on your hard drive with information like passwords, bank information, and other sensitive information.
• Sending sensitive information across the internet such as through email.

SecurePad uses a powerful and secure cryption algorithm so don’t worry about people cracking it. It also means you should be careful because there is no way to recover your information if you forget the key you used!

Download

SecurePad (18835)

If you have not followed the last tutorial please do so because this is a follow-on: Create a CSS dropdown with unlimited submenus

Demo

click here

A small change to the CSS

Since we are using animation to show the menu we want the menu display by default to be off. So you can either remove the following hover events or simply change display:block to display:none (the lines are highlighted)

/* position the menu */
#nav { float:left; z-index:100; position:relative; }
/* first level */
#nav > li { float:left; list-style:none; font:20px "Arial Narrow", Arial, sans-serif; }
#nav > li > a { display:block; line-height:38px; padding:0 18px; color:#363636; text-decoration:none; }
#nav > li > a:hover, #nav > li .active { background-color:#363636; color:#fff; }
/* template for all lists below first */
#nav > li ul { display:none; position:absolute; float:left; width:10em; background-color:#666; }
#nav > li ul a { display:block; width:10em; color:#fff; padding:8px 20px; font-size:16px; text-decoration:none; }
#nav > li ul a:hover { background-color:#bc3030; color:#fff; }
/* second level */
#nav > li:hover > ul { display:block; }
/* all levels below second */
#nav > li li > ul { margin:-36px 0 0 10em; }
#nav > li li:hover > ul { display:block; }

Note: This will stop the dropdown working on a browser without javascript. But virtually anyone viewing the web with a graphics display has javascript turned on so I am not worried. If you want to get really anal about this you can associate the css hover pseudo class to a .class, and when JQuery is loaded remove this class with removeClass. I know we like to be perfectionists but I recommend you draw the line somewhere (i.e. javascript disabled browsers and IE6).

The JQuery part

Firstly, for a nice delay effect when the mouse leaves the particular menu part (ul) we can use a plugin called hoverIntent. Download and include this in your header below jquery.

On document ready event attach the hover event to the menu (timeout is the delay time to call the mouseout event after it has happened).

$("#nav li").hoverIntent({ over:menuAnimateIn, timeout:500, out:menuAnimateOut});

Add functions to handle these callbacks and the animation:

function menuAnimateIn() {
var ul = $(this).children("ul");
ul.animate({ width:"show" }, { duration:200 }).fadeIn();
};

function menuAnimateOut() {
var ul = $(this).children("ul");
ul.animate({ width:"hide"}, { duration:200 }).fadeOut();
};

What we are doing is:

1. When a user hovers (mouseovers) a list (li) element, select the child menu (ul) element
2. With this selection animate the width in and fade in at the same time

The mouseout event is the same but reversed (so animate the width to nothing and fade out).

Instead of fadeIn/fadeOut, why aren’t we using opacity:0/opacity:1 inside the animation function? This is because IE7 doesn’t like opacity and things break, with the fade function JQuery knows this and doesn’t apply it.

And that’s it! Pretty simple eh? Makes me wonder why so many JQuery menu plugins out there force you to use their cumbersome css when this animation code can be applied to any list based menu.

Download

Infinite CSS Dropdown Menu (188)

• Programs (only Microsoft Expression SuperPreview is worth the look)
• Websites that take server snaps of your code (slow, half uploaded, bad for testing because you have to upload to a live site)
• VirtualPC (Microsofts new virtual PC to run earlier versions of windows)

Virtual PC is kinda cool, its the proper way to go but it is also overkill sometimes. Some forum post turned me away for this next solution for a while before I tried it myself. In your header in the meta area:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

and replace 7 with 8 if you want to use that rendering engine. It is stated it might not be perfectly accurate but so far its doing a great job, and so painless to use! One other useful thing is that as far as your IE conditionals go the browser will select the ones based on that version number.

So I would recommend this great lightweight method as you dev, and maybe go for a more hardcore test every now and then.

IE9′s Developer Toolbar also gives you the option of switching modes and I now use this in place of changing the meta header

Features

• Pure CSS
• No hacks
• No excessive styling so you can get on with it yourself
• Clean and short code
• No change to your normal <ul> <li> type of menu
• Unlimited submenus
• XHTML compliant
• Seperate styling for top level and sub menus

Demo

click here

ok lets get started..

First you will need a unordered list which represents your menu, the only requirement is that the parent ul tag has an id of “nav”:

<ul id="nav">
<li><a href="#" class="active">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2:1</a></li>
<li><a href="#">Menu 2:2</a></li>
<li><a href="#">Menu 2:3</a>
<ul>
<li><a href="#">Menu 2:3:1</a></li>
<li><a href="#">Menu 2:3:2</a>
<ul>
<li><a href="#">Menu 2:3:2:1</a></li>
<li><a href="#">Menu 2:3:2:2</a></li>
</ul>
</li>
<li><a href="#">Menu 2:3:3</a></li>
<li><a href="#">Menu 2:3:4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a></a>
<ul>
<li><a href="#">Menu 3:1</a></li>
<li><a href="#">Menu 3:2</a></li>
</ul>
</li>
</ul>

Next it is time to set up the CSS, unlike other menus we work our way down the list while avoiding things like #nav li li:hover li ul li ul { something } and accidental inheritance like so many others seem keen on doing.

/* position the menu */
#nav { float:left; z-index:100; position:relative; }
/* first level */
#nav > li { float:left; list-style:none; font:20px "Arial Narrow", Arial, sans-serif; }
#nav > li > a { display:block; line-height:38px; padding:0 18px; color:#363636; text-decoration:none; }
#nav > li > a:hover, #nav > li .active { background-color:#363636; color:#fff; }
/* template for all lists below first */
#nav > li ul { display:none; position:absolute; float:left; width:10em; background-color:#666; }
#nav > li ul a { display:block; width:10em; color:#fff; padding:8px 20px; font-size:16px; text-decoration:none; }
#nav > li ul a:hover { background-color:#bc3030; color:#fff; }
/* second level */
#nav > li:hover > ul { display:block; }
/* all levels below second */
#nav > li li > ul { margin:-36px 0 0 10em; }
#nav > li li:hover > ul { display:block; }

It should be straight forward what is going on here, but a brief summary:

#1 Position the menu via the parent ul (#nav { })

#2 Style the top level menu

#3 Create a template for all lists below this – the ul is absolutely positioned, the width is fixed to 10em, and display:none is default to hide the menus. The rest is styling.

#4 Create hover classes for 1) the menu directly below the first (it doesnt need to be offseted), and then offset every menu below that by the menu width (10em) and the height of an item so it lines up (-36px)

Fixing 2 IE7 bugs

It should come as no suprise that IE7 doesn’t behave properly. The first bug we must quash is a positioning fault. Make a IE conditional in your header like so:

<!--[if IE 7]>
<style type="text/css">
	#nav > li li:hover > ul { left:10em; margin:0; }
</style>
<![endif]-->

Ah stop right there! Problems still you say? The next bug we must fix is the IE7 ghosting bug that has to do with hasLayout stuff (look it up if you want), you will notice the next time you go to the top level menu item and hover you will see the background of all the nested menus in the layout they were last in. We fix this by editting the above conditional to the following:

<!--[if IE 7]>
<style type="text/css">
	#nav > li li:hover > ul { left:10em; margin:0; margin-top:-38px; }
	#nav li:hover {position:relative; z-index:1;}
</style>
<![endif]-->

And that’s it for the CSS! Next you may consider augmenting your menu with JQuery for animations (see easing plugin), hover delay (see hoverIntent plugin), and nice behaviour on the top level (see lavalamp plugin).

Another common IE7 problem not to do with the menu (z-index bug): the menu drops down over a div below but the menu sinks beneath content there and menu hovering is broken

- To fix this problem the container the menu is inside needs to have a manually specified higher z-index than the container below.

In the next tutorial I will explain how to animate the menu with JQuery

click here for part 2