Template to Jump Start jQuery Plugin Development

If developing a jQuery plugin is in your immediate future than having a template to jump start your jQuery plugin will be an invaluable resource.

jQuery Plugin Boilerplate

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

Stefan Gabos has provided a fantastic jQuery Plugin Boilerplate.  A few features that I really dig about this template are:

  1. Default variables that can be overwritten by user on plugin initialization
  2. Callback function capabilities on event-driven plugins
  3. The incorporation of ‘public’ and ‘private’ method handling
  4. Dynamic reference to jQuery if noConflict is enabled
The script is well commented and comes with usage examples.  With this resource you are ready to rock and roll – code style.  Good luck with that  jQuery plugin!

Top 3 CSS Gradient Generators

“When I was your age – I had to build gradients in photoshop!”

CSS gradients are here to stay. Now that browser support is coming around there are some really cool sites popping up that lend a programmatic hand in creating your own.  Below are the top 3 gradient generators in my book.

1. Ultimate CSS Gradient Generator by ColorZilla

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

ColorZilla’s Ultimate CSS Gradient Generator is super intuitive, easy to use and packs the most punch in the group.  Along with real time preview this generator also provides built in gradient templates that can be loaded from a swatch and modified to your liking.

All designers will immediately recognize the UI as the tools and swatches resemble that of design applications such as Photoshop.

Another great feature is the Hue/Saturation modification capabilites.  With a slider tool you can adjust all of the colors in the gradient – while keeping the structure of the gradient in place.  Changing a color theme couldn’t be easier.

This site also allows you to save your gradient out to a unique link making it possible to reference your gradient at a later time.

2. CSS Gradient Generator by display-inline.fr

CSS gradient generator

http://www.display-inline.fr/projects/css-gradient/

Display-inline’s CSS gradient generator is my number 2.  A couple of things that stand out about this generator are the clean design, the ability to download the gradient as a .png file, browser compatibility table and directional gradients.

This gradient generator is a good option for straight forward basic gradients and building gradients from a mockup.   The lack of a color picker and having to specify step position by percentage make ‘designing on screen’ difficult without a previously designed mockup.

The intuitive design, legacy browser support and the .png download make this generator worth a second look.

3. CSS3 Gradient Generator by Damian Galarza

CSS3 Gradient Generator by Damian Galarza

http://gradients.glrzad.com/

Rounding out the top 3 CSS Gradient Generators is the CSS3 Gradient Generator by Damian Galarza. Another great generator with the familiar color picker and sliders to aid in the on screen designing of gradients.  The directional support and real time preview display are key elements this site has going for it.  Stops can easily be added by clicking the “plus” sign next to ‘Color Swatches’ and positioned within the gradient with a slider.

What holds this site back is the lack of legacy browser support, the inability to save the gradient and the lack of any extras [reverse, undo and hue/saturation].  Still a great option and worth a look as you find the tools that match your needs.

 

Kick Your Dropdowns Up a Notch with ‘DropKick’ – a jQuery plugin

Show me a front end designer who hasn’t suffered through styling dropdown elements with cross browser support and I’ll show you my pet unicorn.

Style Dropdowns with DropKick

http://jamielottering.github.com/DropKick/

Thankfully DropKick, a jQuery plugin, is now available styling those pesky dropdowns with great ease and flexibility while maintaining native functionality and cross browser support.

A few things that really make DropKick stand out:

  1. Maintaining native functionality such as keyboard navigation
    1. Including scrollability.js enables scrolling on iOS devices
  2. Themed approach.  The ability to create and share a theme file really broadens the scope for this project.
  3. Backwards support – No javscript installed means the original dropdowns will work as originally intended.
  4. Cross Browser Support – Under the hood this plugin removes the select and option elements from the DOM and replaces them with div elements and ul li elements, while programmatically replicating the action.  Because of this the cross browser support increases dramatically.
  5. Available for forking on github.

 

Plus I love the name ‘DropKick’.

 

Microjs Bringing Specified JavaScript Functionality Without the Overhead

Microjs.com provides more than a hundred snippets of javascript code each of which are paired down to a core purpose. The result is all the functionality you want without all of the other code taking up precious space in the pipe. No script is larger than 5kb and each file is accompanied by a description and categorized for ease of use.

Microjs Website

http://microjs.com/

The js snippets can be browsed via categories (AJAX, animation, templating, frameworks… etc).

One really cool aspect of the site is the social coding this site brings. Coders can fork the project on github and submit their own javascript library via a pull request.

Currently there is no pagination or search which seems fine for now – but might be a nice (needed?) add-in down the road.   Another feature that would be cool would be some sort of a user rating/popularity system for the submitted frameworks.  Perhaps something as simple as tracking the number of click-throughs for each snippet to provide just a little feedback.

http://microjs.com/

 

Transition from HTML 4 to HTML 5 Cheat Sheet

If you are converting HTML 4 to HTML 5 or simply looking for a good starting point to learn the differences between the two this guide is for you. Encapsulating HTML 5 from the perspective of “What’s different from previous versions” sets this little gem apart.

HTML 5 Cheat Sheet

http://www.html-5.com/cheat-sheet/

Visually the site is non-apologetic as it sports some sort of an “abandoned swimming pool” theme.  Obviously function over form is the mantra here.

However – what this site lacks in looks it more than makes up for in great content.  This site has a more information than one would expect a basic cheat sheet to contain (The printable PDF is 6 pages long) but the reference value this site can bring to your HTML arsenal earns its spot in your bookmarks.

http://www.html-5.com/cheat-sheet/

Kick-start Your CSS3 File with ‘CSS3 Please!’

CSS3 is continuing to literally change the face of website design incorporation.  Now those once tedious effects can be easily accomplished with some simple CSS code.

As browser support increases and the move to CSS3 becomes more universal designers and coders might need a little push to get started with the new tools.  CSS3Please.com is a great sandbox for learning the new CSS3 properties.  Upon entering the site every CSS coder will recognize right away that the site looks like a familiar CSS file displayed in the browser. This CSS file has preset classes with CSS3 properties assigned.

CSS3 Please Screen Shot

http://css3please.com/

There are 2 things that make this site great:

  1. You can click and modify the code right on the screen – right away.    It is a familiar environment – the changing of the code on screen is intuitive and creatively bridges the gap for the coder.
  2. There is an element on the screen that displays the effects of the CSS code.  As you change the code in the screen you can see the result on the elements in the DOM.

And your new code is simple as copying and pasting.

Kick-start your CSS3 File with CSS3 Please today!  http://css3please.com/

Using jQuery to Create a Slick Sliding Background

Here is a fancy jQuery menu plug-in combining smart code with great design. This elegant plug-in is easy to implement, highly customizable and creates a stunning menu that can bring the coveted ‘wow factor’ to any site.

One of the plug-in’s strengths is the number of animation effects available. The eleven animations available out of the box cover the full gamut of animation flavors – from very basic to jarring. My personal favorite, The “Sequential Slide”, really pops and creates a sexy cascading slide animation.

If great looking menus are something you dig.. then check this plug-in out…

http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu/