A user script is code written in a programming language that allows you to control a piece of software. Think for example, macro’s in Microsoft Office that help improve your work flow. Well did you know that you can do the exact same thing with your browsing experience, and the websites you view? Well you can, and it’s amazing. Greasemonkey first came around in 2004/05, and its the tool that really threw user scripts in the browser out there. Greasemonkey is a Firefox extension that allows you to write scripts that alter the web pages that you view. It allows you to make web pages more usable, more viewable, fix bugs for yourself; the possibilities are endless.
Lets look at an example of a fantastic user script that solves some problems for the user. Twitter is a fantastic tool, that many of us web designers, and developers use to collaborate, share knowledge, and make new connections, as well as letting current, and prospective clients keep up with our work. However, if we are all honest, there are things about twitter that annoy, and limit us. Mentioning someone can be a difficult task, especially when you can’t remember their exact twitter name. Working out which people you follow are following you back is a monumental task. Navigating in the dark with URL shorteners can be potentially dangerous (NSFW). The new re-tweet button doesn’t let you add your own thoughts to a tweet without copy pasting. That’s just naming a few, but that can all be fixed, with a user script!

This user script, Making twitter better!, solves all these issues that we have. It auto-completes twitter names as you type for you, it shows an icon next to people who are following you back, it unshortens url’s for you so you can feel safe clicking links, and it add’s a new button; comment. This really shows the power that these user scripts have.

So what are user scripts coded in?

When you install Greasemonkey in Firefox, you’ll notice no difference at all. Greasemonkey itself doesn’t do these incredible things. It’s the user scripts that Greasemonkey runs that do the work. For the user scripts we are working with, these are imply chunks of javascript code, with a bit of additional information for Greasemonkey to work out where and when to run the script. These user scripts have the power to target a specific site, page, or a group of sites, and it has the power to do anything you can do with javascript, and more. That means, with a basic knowledge of javascript, you can get stuck right into making your own scripts!

What is browser support like?

You’ll be happy to know, that since Greasemonkey’s release in 2004/05,  user scripts are no longer just limited to Firefox. You are able to user userscripts in Internet Explorer, Opera, Chrome, Safari, and of course Firefox, with support for other browsers being limited, but sometimes available.  (I cannot vouch for each of the following options as I only use Chrome as my browser)

Internet Explorer

For internet explorer, your main option for similar functionality appears to be IE7Pro. This is an add-on for IE6, 7 and 8 and adds features such as tab enhancement, ad blocker, flash blocker, mouse gestures, inline search, privacy enhancements, online bookmark service, Greasemonkey-like user script support, and plug-in support.

Chrome

Google Chrome, you’ll be interested to hear, comes with built-in support for user scripts as of February 2010, so no add ons are necessary! Basically, Chrome turns user scripts into extensions and runs them as such. However, support for some user script specific functions are lacking, so be prepared to find the odd script that wont work for you.

Safari

Safari, unlike Chrome, doesn’t come with built-in support. For users of Safari 5, there is an extension called NinjaKit which allows you to obviously run user scripts. For users of older versions of Safari, there is an alternative called Greasekit which is a SIMBL plugin.

Firefox

Firefox obviously harness’ the power of user script through the Greasemonkey script. No surprise there since it has done since 2005!

Opera

Opera, like Chrome, is capable of running user scripts itself. Similarly to Chrome, you may run in to trouble with some scripts, but the majority will run fine.

Some user script for your use

Of course, what use would these browser implementations be without some scripts to use? Here are 20 fantastic scripts to get you started!

YouTube Video Download

Scans the YouTube page for all download formats, from iPod compatible MP4s to high-definition 1080p.

Disable Google Fade-in

Disable the animation from Google’s new homepage.

Show Just Image

Removes garbage from some image hosting sites and displays the image only.

Download from YouTube

Adds FLV, MP4, 3GP, and 720p download links to YouTube.

Google Inline MP3 Player

Inserts Google Reader’s MP3 Flash player next to any linked MP3 file you stumble onto while browsing

Chromium RSS-Feed Detection

Detect the RSS-Feed on Pages and show a little “SearchClone”-dialog

Helvetwitter

Twitter is becoming more and more cluttered with useless features and other junk. This strips it back to the basics.

Helvetical

Helvetical turns the mayhem of the Google interface of Google Calendar into something that doesn’t offend.

Helvetireader

Helvetireader aims to make the interface of Google Reader a clean, minimal experience where you’re not assaulted by an array of colours, social features and buttons.

Faviconize Google

Adds favicons to each link offered by Google search results.

LookItUp

Quickly look something up in Wikipedia, a dictionary or whatever you like (its easy to add custom sites!). The result is displayed directly on the page.

Persistent Max Google Calendar

This script will allow you to max out your screen real estate in Google Calendar by allowing a full screen option via pressing F12.

Helvetimail

Give your Gmail the beautiful, minimal experience it deserves with this Helvetica styled script.

SearchJump

Allows you to jump quickly between search results on different engines.

Nested Twitter Replies

Adds nested replies to every Twitter conversation thread.

Google Search Sidebar

Adds a sidebar with search results from Dictionary.com, Wikipedia, Flickr, and YouTube. Please report any bugs.

TinyURL Decoder

Decodes shortened URLs to their original URLs. Supports a lot of url shorteners.

Facebook Purity

Fluff Busting Purity is a script that alters your Facebook homepage to only show the most relevant information to you.

Make Twitter Better

Nested Replies, Custom Search Tabs, Autocomplete, Pagination, RT button, Media Embed, URL Expansion, Hash Tag Search Links, Social Links

FFixer for Greasemonkey

Enhancements for Facebook: bigger profile pictures and photos, easier viewing of albums, links to download videos, showing people’s age and sign, google calendar integration, bookmarks, keyboard shortcuts & more. Fully customizable!

Further Discussion

Well there you have an introduction to user scripts. They’ve been around for a while, but are as powerful as always, and are becoming more popular in modern browsers. If you have more scripts to share, or want to ask any questions, do so in the comments!

HTML Forms are essential for inviting visitors on a site to provide input, giving information about themselves, sharing opinions and so on. The information will on most cases be very valuable for the owner of the web site why making the forms more accessible and better drawing visitors attention is a key objective.  This post provides a list of jQuery plugins that makes it simple and allows you to cake full control of the look and feel of your HTML forms.

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

Justify Elements Using jQuery and CSS – Tutorial

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don’t want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.

Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

Geogoer VChecks

Avery user friendly way to show checkboxes.

Related posts:

1. 30+ jQuery Plugins to Improve Usability and Look and Feel of HTML Forms Forms are essential for communication online and they are…
2. 75+ Top jQuery Plugins to improve Your HTML Forms jQuery makes it easier and simpler to provide your…
3. 10+ jQuery Form Enhancement Plugins Easy user interaction and data collection is really a…

Related posts brought to you by Yet Another Related Posts Plugin.

It’s hard to have too much readers on your blog without some share buttons.These buttons helps you to make your article popular on most social media websites.

Lots of cool effects can be achieved using jquery so today we just started our tutorial series on Jquery starting with navigation menu. In upcoming days will write some tutorials on jquery for our readers. Check out this awesome Jquery navigation menu tutorials thank you.

Basic wordpress plugins every wordpress blog should must have.

If you are a WordPress user, then you are lucky. There are a lot of useful WordPress poll and rating plugins where you can download and use freely. Here, we share 9 useful WordPress poll and rating plugins with our readers.

CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you to perform many motion-based functions normally Delegated to JavaScript. In order to view this effect, you are required to have WebKit browsers like Safari and Chrome ( very sorry for the users of Internet Explorer )

1. CSS3 Clock With jQuery

Use the basic features of the CSS3 Transform: rotate. And the combination of javascript frameworks like jQuery can produce a cool CSS3 clock

2. Analogue Clock

Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

3. 3D Cube That Rotates Using Arrow Keys

You can Use up, down, left and right keys to navigate the 3D cube. 3D cube built using -webkit-perspective, -webkit-transform and -webkit-transition.

4. Multiple 3D Cubes (Slide In/Out)

Multiple 3D Cubes using CSS3 and proprietary ‘transform’ and ‘transition’ properties. I thought it was amazing, you can see the writing on the 3D object.

5. CSS3 Accordion

An accordion effect using only CSS. Proprietary animation in WebKit based browsers.

6. Auto-Scrolling Parallax

Auto-Scrolling Paralax is an animated parallax effect using WebKit’s CSS transition property,Auto-Scrolling Paralax no need JavaScript

7. Isocube

Isocube is like 3DCube but have litle different. Isocube can load images on one side

8. Image Gallery

9. Matrix

The Matrix is one of the best sci-fi films of all time. CSS3 capable of making such an amazing animated film made

10. 7 Javascript-effect Alternatives Using CSS3

7 examples of alternatives to javascript effect by using CSS3. Various effects such as Fade Block, Block Pulsate, Nudge, Expand Block, Block Bounce, Spin Block and Accordion

11. Image Hover Effects

Image Hover Effects is an example of using CSS to replace the javascript. The image will shrink when you put your mouse pointer on top of it.

12. Turning Coke Can (Control With Scrollbar)

13. 3D Meninas

14. Polaroid Gallery

Polaroid Gallery is animated pile of photographs utilizing a ton of new CSS3 commands. It’s interesting when your mouse cursor is above the image, the image will enlarge

15. Space

16. Mac Dock

This list of links as the basis and change into an OS X icon dock of amazing.

17. Drop-In Modals

With CSS3 effects and property Drop In Modals can help you make quick, animation, a simple change to using modals, and some subtle design cues.

18. Sliding Vinyl

Vinyl effect can be created by using CSS3 transition and a little HTML. This can make a standard album cover to have an interesting style

19. Zooming Polaroids

Polaroid is a picture that is in the box and spun like a pile of random photos that are sorting through CSS3 techniques. The text that comprises only extract the title and alt attribute

20. Animated Rocket

The principle of Animatid Roket is CSSEffect. The transformation changed the appearance of an element in the browser, moving, rotating, or other means. In determining the conversion of styles before making the application to happen so that you can not really animation.

21. Poster Circle

Poster Circle. is an animated spin column consists of a row of colored boxes and text are wonderful. The overall effect is crazy cool and undeniably dizzying

22. Morphing Cubes

Morphing Cubes will shows some of the more interesting content using 3D transformations, animations and transitions. Note that you can still select text in the element, even if the rotation. Converting elements are fully interactive.

23. Animated Polaroid Gallery

This is the example of other Polaroid Gallery. Piles of images at random and when the cursor hovers over an image, selected images will be enlarged

24. Spotlight Cast Shadow

When the cursor moves as if like a lamp spotlight leading up to the writing and cast

25. Colorful Clock

Colorful Clock is a colorful jQuery & CSS3 which will help you keep track of those precious last seconds of the year.

26. Lightbox Gallery

Lightbox Gallery is an awesome image gallery which leverages the latest CSS3 and jQuery techniques.Lightbox Gallery using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.

27. Elastic Thumbnail Menu

Elastic Thumbnail Menu is an alternative method for smoothing the menu, in particular by increasing the menu items when the mouse is hovering over the menu. And then expand to the top menu

28. Coverflow

This animation Apple style that combines CSS transformation and jqueryUI. This one truly animate between two half states, making a slider like iTunes

29. jQuery DJ Hero

DJ Hero This is one of the interesting combination of CSS3 with jquery. On-screen controls you can control the pace or just take enough to record your mouse

30. Dynamic Stacking Cards

inn is a dynamic stack of index cards that simply using HTML and CSS3 features such as change and transition (for the dynamic effects) and the @ font-face, box-shadow and border-radius (for styling).

31. Another Image Gallery

This is an example of another image gallery that uses CSS3 transforms property and property transitions.

32. Snow Stack (Control With Arrow Keys)

33. Animated Pricing Column

CSS3 animation can also be used in the package list price of a product. Animated Column Pricing can be applied properly there

34. Slick jQuery Menu

Slick Jquery Menu achieved through a combination of CSS3 and JQuery menu below is very elegant and shows some great use of Jquery and CSS3. This is just one of those crazy concepts that the test can be used in CSS3 will be true of the standard Web.

35. CSS Tabs Without Javascript

36. Tab Menus Without Javascript

37. SVG Fisheye Menu

CSS animation can animate almost any property on the item and do funny things, such as rotation and tilt. As proof,will created quick and dirty CSS3 Fisheye / Dock demo. Used as an added bonus, the demo-SVG in the tag IMG.

38. Falling Leaves

Like autumn. Animated falling leaves are made using CSS3

39. Rotating Gallery

Image Gallery Rotaitng build with CSS transform transition and CSS features. To see the effects of rotation, click the small image

40. Dropdown Menu

Dropdown Menu is a very nice navigation menu by using CSS3 transition property. CSS transitions are very strong influence to renounce the use of JavaScript for many common side effects.

41. Star Wars Crawl

Star Wars opening crawl, using only HTML & CSS. It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly.

42. Sticky Notes

43. Snowflakes

44. Another Fisheye

This is another fisheye that using CSS3

45. Frame-by-Frame Animation

The first demonstration reqires you to keep clicking the image to see the next frame, and it wraps around to the start when you reach the last frame.The second demonstration just needs you to keep the mouse moving over the image in MOST browsers. But the BIG drawback to this method is that the speed of movement of the mouse governs the speed of animation

46. AT-AT Walker

AT-AT Walker is not flash but only CSS3. That amazing !

47. Another Accordion

48. Dynamic Presentation Without Flash

49. Smoothie Slider Menu

50. Spinner

This is basically like an ajax/loader spinner except its not a animated gif. It uses CSS3 to make it spin.

This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

As a web developer, you’re probably among the earliest adopters of new browser technologies. Google’s relatively new Chrome browser is one of those products that developers jumped all over as soon as it became available, but its initial lack of extensions was a dealbreaker for many.

Now extensions are supported in Chrome and some of the tools you’re accustomed to using in Firefox have become available, plus a few unique to Chrome. We’ve compiled a list of ten of the most useful Chrome extensions for web developers right here; if you use these extensions, you might even be able to make Chrome your main workhorse. Maybe!

Look at the list and give it a try — and if there are any great ones that we missed, be sure and share them with us and the other readers in the comments.

1. Firebug Lite

Arguably the most popular Firefox extension for web developers, Firebug lets you look at and edit the HTML, CSS and JavaScript of any page on the fly without leaving your browser. Firebug Lite is a scaled-down version of Firebug made for Chrome. You can inspect a page for errors then quickly edit to fix them.

Though Firebug Lite doesn’t have all the same features as Firebug, it has most of the essentials, and there’s a console interface for power users.

2. IE Tab

Microsoft’s Internet Explorer web browser is not at all popular with web developers, but it’s by far the most popular browser for the general population. With IE Tab you can open any website in a tab that’s actually running Internet Explorer instead of Chrome. You can make sure your website runs correctly for those millions of people who aren’t using Firefox, Safari, Chrome, or Opera.

3. Eye Dropper

With EyeDropper, you can find useful information on any color on a website you’re viewing in Chrome. Click the extension button and a color wheel interface drops down. From there, you can click the color picker button, then click anywhere on the site to see where the color for that pixel falls in the wheel, what its RGB levels are, and what its HTML color code is.

4. Chrome SEO

Tapping the Chrome SEO button after the extension has been installed will give you website information that’s important for search engine optimization. You can check backlinks, traffic measures like the Alexa Rank and Google PageRank, popularity on social bookmarking sites like Delicious, and more.

5. Lorem Ipsum Generator

The Lorem Ipsum Generator extension will generate filler text for your websites so you can make sure your formatting works well without wasting time typing several paragraphs of text. This extension is lightweight and minimalistic, so it’s easy to use and it won’t take up a lot of memory. That means it’s easy to pop in and out of as needed.

6. Resolution Test

Resolution Test’s purpose is right there in the name — it re-sizes the browser window to show what your website will look like at various popular screen resolutions. As a web developer, you probably have a very high-resolution display. Good for you! But most of the visitors to your site don’t; this extension will help you make sure the site’s formatting looks ok to them.

7. Speed Tracer

Speed Tracer uses the browser’s built-in metrics tools to record how much time your web application is spending on various tasks so you can find out what the hang-up is if your site is running slowly. It can tell you how much time the browser is spending interpreting layout, Javascript, and other details.

The only downside to this useful tool is that for it to work, you have to run the browser with the command line flag “–enable-extension-timeline-api.” But if you’re a developer, that’s probably not a big issue, right?

8. MeasureIt!

MeasureIt! is pretty straightforward — it gives you the dimensions (pixel width and height) of any element present in a website you’re looking at. Like a lot of the other extensions on this list, it was previously available for Firefox.

9. Pendule

Pendule pops up an easy-to-use, well-laid-out control panel full of miscellaneous tasks helpful to developers. Examples include reloading or disabling CSS, viewing JavaScript scripts, hiding images, a color picker, a display ruler, viewing source, and several script validators. It works well as your basic, catch-all web developer’s extension.

10. BuiltWith

BuiltWith gives you a profile of the website you’re hanging out at, including a list of all the technologies it can find there. It will tell you what widgets the site is using, which analytics tracker the webmaster is using, which frameworks are present, which advertising platforms are in use, and so on.

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Tags: development, extensions, Google, google chrome, rackspace, web development series

One of the great things about working with WordPress and developing your own themes is the community and all of the resources that are available. If you’re not sure how to do something or looking to see what solutions other theme designers and developers are using, you can find plenty of infomation and tutorials to help.