12 More Creative & Useful jQuery Plugins

One of my past articles named 16 Creative & Useful jQuery Plugins featured some creative and useful plugins that web designers and developers around the world could implement on their websites. Now I’ve found some more plugins that you can use on your site or your client’s site.

1. Contextual Slideout Tips With jQuery & CSS3

A set of contextual SEO-friendly slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

2. jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

3. jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

20 Australian Made Web Designs To Inspire You

This is the first and hopefully it will be a long line of inspiring web designs showcases. In this post, we’re showcasing 20 Australian made web designs to inspire you.

1. The University of Queensland

2. Ask the Butcher

3. Australia Day

4. Aussie BBQ Legends

16 Creative & Useful jQuery Plugins

1. BubbleUP

With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect.

2. Quicksand

Reorder and filter items with a nice shuffling animation.

6 Top Tools for Creating Web Design Wireframes

When starting a new web design, it’s a good idea to begin first with a wireframe.

The purpose of a wireframe is to communicate the layout of a page without getting caught up in any of the colour and design elements. With the wireframes these can be a big time saver as they help all parties involved come to an agreement on the placement of the page elements such as headers, content areas, navigation/menus and footers.

The key for this is to get the layout approved and nailed down so major layout changes won’t take place one the detailed design elements are in place

Mockflow

MockFlow allows you to design and collaborate in real-time, user interface mock ups for your software and websites. Comes with numerous built-in components & icons,

Pencil Project

The Pencil Project’s unique mission is to build a free and open source tool for making diagrams and GUI prototyping that everyone can use.

HotGloo

HotGloo is completely web based with lots of features that let’s you drag and drop and scale items easily. It also has support for realtime collaboration.

Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

Balsamiq Mockups

Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner

Axure

Axure RP is the leading tool for rapidly creating wireframes, prototypes and specifications for applications and web sites. Quickly get the benefits of prototyping without a lot of hassle.

10 CSS3 Tutorials & Techniques for creating buttons.

Once upon a time when a web design required a nice, functional button it would firstly have to been designed in photoshop then implemented with javascript. Until CSS3 came in and changed everything to be easier and better for us.

Pretty CSS3 Buttons

Tutorial – Demo

The object is to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. And creating a button that is scalable means that we can make it a variety of sizes and colours with ease.

Dynamic Buttons using CSS3

Tutorial – Demo

The following example demonstrates how to create nice looking, dynamic buttons that are fully scalable using the new CSS3 properties border-radius, box-shadow and RGBa

Roll Your Own Google Buttons

Tutorial – Demo

Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.

Sexy Buttons

Tutorial – Demo

Sexy Buttons is a HTML/CSS-based framework for creating beautiful web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired. Compare Sexy Buttons with the standard browser buttons

8 jQuery Cheatsheets, References & Docs

A few months back Jquery was updated to version 1.4 with loads of new features & improvements.

It doesn’t matter how experienced you are, or how much you may use jQuery and trying to remember all of the jQuery functions is nearly impossible to remember.

So below you will not only find complete cheatsheets for jQuery 1.4 both,  you will also find more specialised sheets for jQuery UI & Effects, jQuery CSS, jQuery Selectors, jQuery mobile development and even Validator cheat sheets in PDF and HTML format.

Official jQuery Docs & References

jQuery API – Official Documentation

The team at jQuery did a complete redesign of the previous API site and a complete rewrite. Every single method has been rewritten from the bottom up to provide the best possible information about how jQuery works.

jQuery Version 1.4 – API Changes Documentation

Many of the most popular & commonly used jQuery methods have seen a significant rewrite in verison 1.4, this documentation gives a detailed and comprehensive overview of these changes.

Cheatsheets

PDF Format

1. jQuery 1.4 Cheat Sheet – Impulse Studios Labs (PDF)

2.jQuery CSS Cheat Sheet (PDF)

3.jQuery – Select Element Cheat Sheet (PDF)

4.jQuery Validator Cheatsheet – Elegant Code (PDF)

HTML Format

5. jQuery UI 1.7 Cheatsheet (HTML)

6.jQuery API – Alternative Browser (HTML)

7. jQuery Selectors Cheatsheet (HTML)

8.jTouch Cheatsheet – Color Charge (HTML)

6 Free Coding Editors

Great coding software to help in daily development process can be irreplaceable tool.

Bad software can lower your work efficient stage so badly but good software however can give you a lot of tips, ways to help code faster, find your typing mistakes without a pain.

I crawled around the internet carefully to find 6 free awesome coding editors that will work on Linux, Mac and Windows operating systems.

1. Aptana Studio (Linux, Mac OS X & Windows) $FREE

Aptana Studio is a full complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plug-ins created by the community.

Features:

• Unified Editing for Web Apps – world-class HTML, CSS, and JavaScript code completion, reference, and validation at your fingertips.
• Ajax and JavaScript Libraries – libraries including jQuery, Prototype, YUI, dojo, Ext JS, MooTools, and others.
• Ruby on Rails, Python and PHP – Add powerful plugins and ready-to-use runtimes for Ruby on Rails, Python and PHP
• Desktop Ajax – create desktop web applications with our plugin for Adobe AIR.
• Free, Open Source and Cross Platform – works on Windows, Mac, or Linux, it’s free and it’s open source