Ever had to build a web page for a picky web designer? One that will rake you over the coals for little things not matching their design?

I have plenty of times… To save all the frustration and make sure I get it right first time I use one of my favorite tools.

The tool I have depended on in the past is the great Firefox plugin Pixel Perfect. It allows you to overlay an image over top of the site your developing in the browser. This is great to make sure the page your styling matches the design.

If you use Google Chrome for development, there is a newly developed extension called Perfect Pixel. This has a lot of the same functionality as Pixel Perfect. Great if you’ve moved from Firefox to Chrome for developing like myself.

Try it out for yourself and you will quickly see how close (or far) you are from making the site your working on matches the design.

Pixel Perfect for Mozilla Firefox

Perfect Pixel for Google Chrome

I recently built a WordPress site for some friends. Being very busy people they were struggling to use the sites theme for galleries (I was struggling too with it). Being iPhone users they had no problem uploading photos of their clients cars to their business Facebook Page.

To help them out and get their galleries on display on their new website I used a great plugin for WordPress called Facebook Page Photo Gallery. It allows you to add galleries from Facebook Pages with a simple short code on the page with the gallery ID. It formats the thumbs nicely and even opens the images in a ‘fancy box’ light box.

Great way to maximize the painful time consuming task of uploading images to your site.

Get the plugin from here:
WordPress Plugin page
Developers Plugin Page

Lets start with Facebook. There are a couple of items that will need to be added into the header.

Step 1: Add the following meta tags (if they don’t already exist).

<meta name="title" content="This is the Title">
<meta name="description" content="This is a description">
<meta name="keywords" content="keywords here">

Step 2: Add the Facebook share script

<script src="//static.ak.fbcdn.net/connect.php/js/FB.Share"></script>

Step 3: Add the following to your custom Facebook share link

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php" target="_blank" class="socialLinkFacebook" title="Facebook">Facebook</a>

For Twitter follow these steps.

Step 1: Create a custom Twitter tweet link

<a href="https://twitter.com/share?url=mydomain.com" class="socialLinkTwitter" title="Twitter" target="_blank">Twitter</a>

Step 2: Add Javascript window popup click handler function (you’ll need jQuery linked already for this javascript)

$('.socialLinkTwitter').click(function (e) {
        e.preventDefault();
        var sTwitterShare = $(this).attr('href');
window.open(sTwitterShare,'Share','width=550,height=450');
    });

From that article I found my favourite new flight comparison tool, SkyScanner and the best part is it’s in NZ dollars.

Web Jet have a nice monthly deal finder search tool, choose your destination and it can tell you the best price for the next 6 months. http://www.webjet.co.nz/

Here are a few of my own tips for Air New Zealand:

Tip 1: For Air New Zealand flyers if you’ve flown in the last 7 days make sure you enter your details on https://www.airpointsluckyseven.co.nz/ and keep checking back everyday at midday to see if you’ve won.

Tip 2: Earn Air New Zealand airpoints the easy way by getting a Go Fly Kiwibank mastercard, spend over 15k on it and you’ll also get free Koru lounge passes. http://www.kiwibank.co.nz/personal-banking/credit-cards/gofly/ There are also other credit cards that can help you wing your way overseas.

Tip 3: With the above credit card every thursday, they have a simple trivia competition for air-points as well as special grab a seat deals for Go Fly Kiwibank customers https://www.kiwibank.co.nz/go-fly-promotion/

Tip 4: Combine your Fly Buys to your Air New Zealand air points, be aware that the conversion rate is pretty low though 1 Airpoints Dollar for every 6.25 Fly Buys Points. https://www.flybuys.co.nz/Airpoints/Pages/Default.aspx

Tip 5:  Sign up for Colmar Brunton surveys to get more Fly Buys points http://www.flybuyspromotions.co.nz/July07ColmarBrunton/CB.html. Every week or so I get emails to complete surveys for Fly Buys points.

I did a few quick searches of Google and I came across this little helpful plugin called the “Nightly Tester Tools” made to help developers using the latest builds still be able to test and develop plugins. This will allow any disabled plugin to work regardless if it’s compatible or not.

Simply go to Tools > Nightly Tester Tools > Force Addon Compatibility to enable your out of date plugins.

Nivo Slider

http://nivo.dev7studios.com/

I’m currently using Nivo slider on this website for the home page. It’s currently pulling in the Featured Post image  using a custom function for my WordPress theme. Nivo slider has a great set of animation effects and has a number of options. If you want a no hassle installation for WordPress Dev7Studios offer a paid plugin as well. There are even a number of other platforms already supported with Drupal, Joomla and Sitefinity.

What I like about Nivo slider is the different types of transitions rather than just the standard slide in from left to right/ top to bottom.   I’m using “sliceDown” on my own site, where it segments up the image and makes each segment slide down, a unique different effect to most other sliders around. Check out the demo page here to see the prebuilt themes too.

Points of difference:

• Unique transitions to most other sliders – slice down/up, fold, box rain/random
• Plugins already available for popular CMS (WordPress, Joomla & Drupal)
• Nice looking prebuilt themes

jQuery Cycle

http://jquery.malsup.com/cycle/

This great plugin has the most effects of all the sliders here, it also has the honor of being the oldest project of the round up. Very highly configurable, huge number of options and can be paused, progressed etc from a JavaScript call. I’ve used it on multiple projects and combined with jQuery easing the transition effects can be very smooth and extended (ease in, bounce etc).

Points of difference:

• Huge number of effects
• Mature project, has been around since 2007
• Large number of demos available on the site

Orbit

http://www.zurb.com/playground/orbit-jquery-image-slider

Orbit is a new comer to the group that uses CSS3 to keep the size of the library down to a mere 4kb. It also has a nice loading animation/pause button.

Points of difference:

• Loading/countdown animation
• Very small at 4kb
• Compatibility: IE7+, FF 3.5+, Chrome, Safari

Points of difference:

• A move slide quantity option (killer feature)
• Ticker option to have your images/slides constantly scrolling
• Great call back functions, next, previous, before and after.

1. The page weight is usually smaller, and the site doesn’t require multiple http requests (it shouldn’t anyway if your using image sprites)
2. The elements can easily grow and shrink to fit content without having to resort to techniques like “sliding doors”
3. Less time is spent exporting and optimising images for use in the CSS

To visually create the styling without resorting to lots of painful CSS properties in my chosen HTML/CSS editor I use the following web sites to quickly create the look I want or that I’m trying to mimic from provided designs.

Layer Styles

Layer Styles is a great tool if your familiar (or even if your not) of Photoshop effects. It mimics the same panel interface as Photoshop with the check box and slider panes. Once your happy with the look of the styling you’ve created simply copy the CSS from the code pane on the bottom of the page. There is one caveat of the Layer Styles, you will need to add the vendor prefixes to your CSS. To save you the hassle simply copy and paste your CSS into the tool below.

Prefix my CSS

Prefix my CSS will add the vendors (Mozilla, Opera, Webkit) prefixes to your styling for what ever browser your’ve been creating your styles for. Easy as that.

Ultimate CSS gradient creator

If your used to Photoshops gradient effect tool you’ll love the Ultimate CSS gradient creator. It allows you to place multiple gradient points along the bar and adjust to your hearts content. Alternatively you can just grab one of the pre-generated presets and edit that. The CSS produced is already prefixed and also there are fall backs for older browsers and IE.

jsFiddle

jsFiddle is a front end developers playground. The page is divided into 4 panes where you can quickly add your HTML, CSS and JavaScript. Simply hit the run button and you’ll see the results of your pasted in CSS of the above tools. One of the killer features I love about jsFiddle is the ability to create short codes to your mockup so you can quickly test cross browser simply by copying the short code address into the address bar. There are a ton more features on jsFiddle enough to write an entire article or two. Definitely worth checking out.

HTML 5 For Humans by Paul Irish

The Forgotten Art of Web Performance by John Clegg

Preparation H – Treat your CSS with SASS & Compass by Jeff Wegesin

The Developer Experience By Pamela Fox

Web Security: Get A Head(er) By Kirk Jackson

File Upload Considerations By Kirk Jackson

WebSockets.open() By Jeremy Boyd

Apocalypse Node By Craig Walker

If you find anymore, please leave a comment with the link.

So I had to make my own 404 page with the animation implemented. Check it out here.

At the moment it can only be implemented with vendor prefixed properties. Setting an animation name and setting a key frame. For a great guide on how to do it all check out the article on .Net magazine.

Simply download the ExportAsFavicon addon for Fireworks from John Dunning (check out his other great plugins). Install the extension, restart Fireworks if you already have it open or run Fireworks. Then in the “Commands” menu select “Favicon” then “New Favicon …” (which ever size you need). Create your favicon (you can select the different sizes under “Pages”), once your happy again under Commands > Favicon >Export as Favicon and your done.

Where to find the ExportAsFavicon command options