Webmaster 9 » Scripts & Programs http://www.webmaster9.com Free Webmaster Resources Sat, 31 Jul 2010 06:54:06 +0000 en hourly 1 http://wordpress.org/?v=3.0 25 Best And Useful jQuery Plugins of May 2010 http://www.webmaster9.com/2010-06/25-best-and-useful-jquery-plugins-of-may-2010.html http://www.webmaster9.com/2010-06/25-best-and-useful-jquery-plugins-of-may-2010.html#comments Tue, 15 Jun 2010 12:31:42 +0000 Webmaster9 http://www.50jy.com/?p=120 1) JDesktop : Framework for making desktop-like environment in a web browser with very cool effects and animations.You can resize, minimize, maximize and drag windows and change windows themes.

View Demo | Download Plugin

2) Sliding Image Gallery : The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner.  The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides.

View Demo | Download Plugin

3) Pajinate – A jQuery Pagination Plugin : A jQuery plugin that reworks a list of DOM elements such that they are presented in a easy to navigate, paged manner.

View Demo | Download Plugin

4) Tiny Carousel : Tiny Carousel is a lightweight Jquery based carousel for sliding html based content. You can slide vertical or horizontal and it supports navigation by button or paging.

View Demo | Download Plugin

5) bgFade : This plugin allows you to duplicate the CSS:hover effect, along with some professional jQuery frosting on top. It’s as easy as :hover, but lets you do a whole lot more.

View Demo | Download Plugin

6) ajaxChange : A jQuery plugin that enhances select boxes. This plugin is designed for select boxes that trigger an AJAX request. It will optionally disable the select box when the change event is triggered (for example, to avoid multiple AJAX requests).

View Demo | Download Plugin

7) mb.MediaEmbedder : A jquery plugin helps you to show a movie from youtube, vimeo, flickr, livestream, ustream. Or to embed your audiopodcast (mp3 file) on your web page.

View Demo | Download Plugin

8 ) Sliding Labels : A jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

View Demo | Download Plugin

9) Spinner : Spinner provides a simple approach for adding and removing a preloader for your web applications.Spinner takes all the pain out of creating and maintaining all those pesky AJAX “loading” images. You no longer have to worry about styling and absolutely positioning your preloaders again.

View Demo | Download Plugin

10) Narrative Select Plugin : A JQuery plugin to homogenize the select box (drop-down) appearance & interaction across modern browsers and OS.

View Demo | Download Plugin

11) jQuery Simple WYSIWYG Editor : Simple editor that comes with easy to customize look (including toolbar).

View Demo | Download Plugin

12) Autogrow Textarea : The Autogrow Textarea plugin is pretty straightforward. It allows textareas to grow as more and more text is typed in it.

View Demo | Download Plugin

13) jBellows : This plugin lets you create an extremely lightweight accordion effect.

View Demo | Download Plugin

14) TagCanvas : TagCanvas is a Javascript class which will draw and animate a HTML5 <canvas> based tag cloud.

View Demo | Download Plugin

15) Json Editor : It can init from a json object, transfroming from json to a visual tree , user can modify the tree by appending child node or leaf to a node, insert a brother node or leaf before a node or leaf, delete node or leaf , a json object can be parsed from the tree for programming.

View Demo | Download Plugin

16) AutoTabIndex : This is similar to the great Autotab plug-in available on this site but instead of asinging in jquery where to go next it follows the tabindex assigned to the input elements. It also its stripped down to only do autotab and not form validation. Once the auto tab has jumped over to the next element it will also select its contents if they have already been entered.

View Demo | Download Plugin

17) Loupe and Lightbox : loupeAndLightbox is an image magnifier based off the use of two photography viewing tools: a loupe (or magnifying glass) and a lightbox. loupeAndLightbox uses a smaller image with a link referring to a larger version of the image for magnification effects. No other HTML is required! The .load() function is used for loading images, with error and success methods in place.

View Demo | Download Plugin

18) mouseyDialog : mouseyDialog attempts to solve the dialog issue while keeping things simple. It’s just a dialog positioned by the mouse. Clicking the close button or outside the dialog will close it (if you’re using the click event). mouseyDialog knows where the edge of the window is and will reposition itself if it’s outside of it.

View Demo | Download Plugin

19) jQuery File Commander : If you are looking for comfortable files manager on your web serwer similar to Total Commander then you just found it. jQuery File Commander generate two panels with files and allows to make basic operations on them like copy, move, rename which are run on server files.

View Demo | Download Plugin

20) HoverAttribute : HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering. This is foremost intended for <a> tags residing within full-width elements, such as headings or list entries.

View Demo | Download Plugin

21) Lister : A fully functional dual list box. This plugin will take an unordered list and sort them alphabetically and format them using your provided CSS.

View Demo | Download Plugin

22) 2D Transform : This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement. It is fully cross-browser compatible.

View Demo | Download Plugin

23) divSlideShow : While most slideshow plugins on the web are for <img> only, divSlideShow provides a more flexible slideshow for <div>, you can embed anything inside a <div> and make it a slideshow, such as images, text, flash… anything that you normally included in a webpage, with only one line of javascript call.

View Demo | Download Plugin

24) BlogSlideShow : BlogSlideShow is a JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

View Demo | Download Plugin

25) Magic Scroller : A Practical & Easy to Implement Plugin, this vertical scroll show elements with an elegant style using slice effect, creating a diferent perspective.

View Demo | Download Plugin

via http://savedelete.com/

Related Posts

]]> http://www.webmaster9.com/2010-06/25-best-and-useful-jquery-plugins-of-may-2010.html/feed 0 50 Fundamental jQuery Controls, Components and Plugins http://www.webmaster9.com/2010-06/50-fundamental-jquery-controls-components-and-plugins.html http://www.webmaster9.com/2010-06/50-fundamental-jquery-controls-components-and-plugins.html#comments Sat, 12 Jun 2010 16:32:16 +0000 Webmaster9 http://www.50jy.com/?p=60 Every seasoned developer has one and every young and upcoming developer should be thinking of building one – a good and concise collection of UI controls, components and plugins that you can always rely on in times of need.

Of course, there are plenty of great UI frameworks, kits and libraries that you could use, but none will offer you every component and none of them will be tailored to your own personal preferences and needs.

Up until a few months ago my controls had been collected and sourced from various frameworks (Prototype, MooTools, jQuery…), upon review it seemed a little out-dated, some components unnecessary and some controls desperately needed updated. It seemed logical to give the collection a fresh outlook and a uniformity under one framework – I chose jQuery. (I have held on to a few controls that have not been built with jQuery, but for the sake of this post I have omitted them).

So, here are my 50 Fundamental jQuery Controls and Rich UI Components…

What would you add? What would you remove? What would you deem an essential control?

Mega Menu » jQuery Listmenu

This jQuery plugin allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menu system, allowing quick and ‘out-of the-way’ access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a sub-menu. Mousing off of the letter or menu closes the submenu.
Mega Menu – jQuery Listmenu »

Horizontal Menu » Droppy Nested Drop Down Menus

Droppy is a quick and dirty nested drop-down menu. It hasn’t been designed with flexibility in mind – if you like what you see, great, integration should be a breeze – otherwise I’d look for something more configurable elsewhere.
Horizontal Nav – Droppy Nested Drop Down Menus »

Tree Menu » Treeview

Treeview is a lightweight and flexible transformation of an unordered list into an expandable and collapsible tree, great for unobtrusive navigation enhancements.
Tree Menu – Treeview »

Paginated Pages » Pagination Plugin

Pagination is useful when you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another.
Paginated Pages – Pagination Plugin »

Button » Imageless Buttons a la Google

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off.
Basic Button – Imageless Buttons a la Google »

Backgrounds » Blend jQuery Plugin

Blend is jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds.
Advanced Button – Blend jQuery Plugin »

HTML Table » DataTables

DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
HTML Table – DataTables »

Filtering and Sorting » Tablesorter 2.0

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
Filtering and Sorting – Tablesorter 2.0 »

Charts and Graphs » Visualize Accessible Charts

The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization.
Charts and Graphs – Visualize Accessible Charts »

Sparklines » jQuery Sparklines Plugin

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript.
Sparklines – jQuery Sparklines Plugin »

Animation » Spritely

jQuery.spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites.
This is a new addition to my controls, it may prove useful.
Animation – Spritely »

Tabs » idTabs

idTabs is a plugin for making adding tabs into a website super simple. There are many similar plugins, but I have found this to be the most flexible.
Tabs – idTabs »

Calendar/Event Scheduler » FullCalendar

FullCalendar provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar) and it is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).
Calendar/Event Scheduler – FullCalendar »

Alert Dialogs » jQuery Alert Dialogs

This jQuery plugin replaces the basic functionality given by the standard JavaScript alert(), confirm(), and prompt() functions by allowing you to completely customise the alerts via CSS.
Alert Dialogs – jQuery Alert Dialogs »

Collapsible Panels » Collapsible Drag & Drop Panels

Drag n Drop panels are great to let the user control how they want to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.
Collapsible Panels – Collapsible Drag & Drop Panels »

Progress Indication » Progress Bar Plugin

This is a basic and easy to use and style progress bar plugin for jQuery.
Progress Indication – Progress Bar Plugin »

Color Select » ColorPicker

A simple component to select color in the same way you select color in Adobe Photoshop.
Color Select – ColorPicker »

Floating Footer » Meerkat

Meerkat, depending on the options you have set, will slide or fade in from the top or bottom of the browser window and remain in its fixed position while the rest of the page will scroll normally.
Floating Footer – Meerkat »

Hover Intent » hoverIntent Plug-in

hoverIntent is a plug-in that attempts to determine the user’s intent… like a crystal ball, only with mouse movement! It works like (and was derived from) jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call.
Hover Intent – hoverIntent Plug-in »

Tool Tip » qTip

qTip is an advanced tooltip plugin, built to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
Tool Tip – qTip »

User Feedback » Feedback jQuery Plugin

Feedback is a plugin that lets you send Feedback messages to a user after any event that you choose. You can use it for custom error message handling, for example. So if you write some custom script to perform either a client or server-side validation, you can use Feedback to send an error message.
User Feedback – Feedback jQuery Plugin »

Docking » LayoutManager

The Docking plugin will helps you to arrange the layout of a web page with ease using the DOCK concept, this will be familiar to those who works in Windows form based application, where every control will have Dock property (TOP, LEFT, FILL, RIGHT, BOTTOM and NONE). So the controls position and size is decided by the Dock property relative to the parent container.
Docking – LayoutManager »

Drag and Drop » jQuery Quicksand plugin

Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.
This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation.
Drag and Drop – jQuery Quicksand plugin »

Layout Grid » #grid Plugin

#grid inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
Layout Grid – #grid Plugin »

Maps » gMap

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.
Maps – gMap »

Rating » Star Rating Plugin

The Star Rating Plugin is a plugin that creates a non-obstrusive star rating control by turning a collection of radio boxes into a neat star-rating control.
Rating – Star Rating Plugin »

Portals » jPolite

JPolite is a pure front-end portal framework based on jQuery & BlueTrip CSS framework, with a handful of jQuery plugins already integrated. It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes like user experiences.
You can use JPolite as a base for creating complex / customizable websites quickly by separating content, appearance and behavior. JPolite provides the ease of turning an HTML content block into tabbed or accordion control without extra code.
Portals – jPolite »

Advanced List » jQuery Sequential List

Advanced List – jQuery Sequential List »

Toolbar » jQuery ‘Notify bar’

Simple plugin (basically it’s not a plugin, but widget) to show notify bar (like on Twitter’s webpage).
Toolbar – jQuery ‘Notify bar’ »

Inline Edit » Jeditable

Jeditable is an inplace editor plugin. With few lines of JavaScript code you can simply click and edit the content of various xhtml elements.
Inline Edit – Jeditable »

Embed Video and Music » JQuery Media Plugin

This Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an <a>) into a <div> which holds the object, embed or iframe tags neccessary to render the media content.
Embed Video and Music – JQuery Media Plugin »

Carousel » jCarousel

jCarousel is a plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
Carousel – jCarousel »

Slider » Nivo Slider

Slider – Nivo Slider »

Image Caption » jQuery Captify Plugin

Captify is a plugin that displays simple, pretty image captions that appear upon rollover. Its goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments.
Image Caption – jQuery Captify Plugin »

Slider » jQuery Slider Plugin

Slider – jQuery Slider Plugin »

Image Pan » panView

Simply put, panView creates a pan view of a much larger image. All you have to do is hold down your mouse button and start moving.
Image Pan – panView »

Lightbox » prettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, Flash, YouTube, iFrames. The setup is easy and quick, plus the script is compatible in every major browser. It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
Lightbox – prettyPhoto »

Image Gallery » Galleria

Galleria is a an image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project.
Image Gallery – Galleria »

Image Zoom » jQZoom

Image Zoom – jQZoom »

Forms » jQuery Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.
Forms – jQuery Form Plugin »

Form Validation » Validation Plugin

Form Validation – Validation Plugin »

File Upload » Uploadify

Uploadify is a plugin that allows easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
File Upload – Uploadify »

Multi-Select » flexselect

Flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
Multi-Select – flexselect »

Check Boxes » jQuery Checkbox

Check Boxes – jQuery Checkbox »

Growing Textarea » Elastic

This Jquery plugin makes your textareas grow and shrink to fit it’s content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it’s competitors is it’s weight.
Growing Textarea – Elastic »

Rich Text Editor » jwysiwyg

This plugin is an inline content editor to allow editing of rich HTML content on the fly.
Rich Text Editor – jwysiwyg »

Captcha » Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers.
Captcha – Ajax Fancy Captcha »

Date Picker » Multiday Calendar Datepicker

Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version.
Date Picker- Multiday Calendar Datepicker »

AutoSuggest » AutoSuggest jQuery Plugin

AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.
All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file.
AutoSuggest jQuery Plugin »

Search » jQuery Live Search

Use this plug-in to turn a normal form-input in to a live ajax search widget. The plug-in displays any HTML you like in the results and the search-results are updated live as the user types.
Search – jQuery Live Search »

Multi Select » jQuery MultiSelect

jQuery MultiSelect has been designed to turn ordinary multi-select form controls into user-friendly dropdown lists.
Multi Select – jQuery MultiSelect »

via http://speckyboy.com/

Related Posts

]]> http://www.webmaster9.com/2010-06/50-fundamental-jquery-controls-components-and-plugins.html/feed 0 Six great resources for budding JavaScript coders http://www.webmaster9.com/2010-06/six-great-resources-for-budding-javascript-coders.html http://www.webmaster9.com/2010-06/six-great-resources-for-budding-javascript-coders.html#comments Sat, 12 Jun 2010 13:27:50 +0000 Webmaster9 http://www.50jy.com/?p=45 As a relative newcomer to the world of web development, it sometimes seems to me as though there is a gulf in the field: The “pros” versus the “wannabe developers”. As if there’s a tight-knit clique of developers, all well-versed in arcane stuff like advanced user scripts, HTML5, or Ruby on Rails — and then there’s the “rest of the world”, composed of mere mortals just trying to hack something together that would somehow display and sort of work across multiple browsers.

So the question becomes: How do I bridge the gap? How can I become a decent, skilled JavaScript developer without spending a boatload of money?

After the fold you can see my take on that issue, consisting of one piece of advice and five resources which I find useful in this quest!

1: Be professional about it

I know, I know; this is not a “tool” per se, and you might even say it’s a trite thing to say. But all of my other recommendations are predicated on you taking JavaScript development seriously. After all, how can you ever become a pro if you don’t even try?

Take a stroll through any web developer forum and you’ll see most people approach JavaScript development on a “by the way” basis. By this I mean, “Screw learning, let’s just throw something up on the page!” … and “Can anybody tell me how to split a string?”

So first thing’s first – attitude. Change starts with you. The resources I outline below may all be quite affordable in terms of cash, but some of them do cost quite a bit of time. Learning takes time — it’s a fact of life.

So now that I’ve hopefully got you in the correct mindset, let’s see some tools.

2: Learn about JavaScript from Douglas Crockford

Douglas Crockford is a genius. Seriously – the guy is brilliant. He’s currently serving as Yahoo!’s chief JavaScript architect, he invented JSON (a widely used data interchange format), he’s part of the ECMAScript committee (the guys setting the JavaScript standard) and has a very broad understanding of the general history of programming languages and computer science.

Recently, Crockford gave five talks about JavaScript as part of Yahoo!’s YUI Theater. These are all available for free, and they’re over five hours in length (more like six to seven hours in total, I think). What’s so cool about these talks is that Crockford really gives you a bird’s-eye view of the subject; the first hour is just history, and it’s really fascinating. It’s all over the place, starting with the Jackquad loom, through why we have both a Delete and a Backspace key on our keyboards, all the way to modern programming languages and JavaScript.

I took the time to watch all videos and they were the first “real” thing I ever learned about JavaScript. Except for the fourth talk where he got very technical and lost me, they were all very interesting, and gave me a great viewpoint on the language.

One thing I like about Crockford is that he doesn’t sugarcoat anything. If he thinks a JavaScript feature sucks, he would just come out and say it, and then very eloquently explain why. Really – take the time to watch these videos; you won’t regret it.

3: Safari Bookshelf

When I finished watching Crockford’s videos, I knew I wanted to read his book, titled JavaScript: The Good Parts. With the book, Crockford really gets technical and explains what he sees as the best way to code JavaScript, and why.

So now I had to find what’s the best way to read that book, and I believe I have. The Safari Bookshelf has nothing to do with Apple, and has everything to do with O’Reilly, Apress, and a whole bunch of computer-publishing heavyweights which have all banded together to provide a superb online library.

Crockford’s book costs $19.79 on Amazon. For $23/mo, Safari Bookshelf gives me unlimited access to a full-text, nicely formatted copy of that book, plus 10,966 other titles. Yup – almost 11,000 other books, all full-text, nicely formatted, top-of-the-line computer books, straight from the publisher. That’s some serious bang for the buck.

And that’s the “cheap” subscription (they don’t actually call it that, though). If you go for the premium subscription, you get access to tons of videos, early drafts of books (“read them while they are being written”), and some other goodies. I didn’t spring for Premium, though, so I can’t really tell you what it’s like.

Reading a complete book takes time. But when you pick the right book, you get the sort of comprehensive coverage you would never get by Googling or following online tutorials.

4: Lynda.com

I covered Lynda.com before. If you’re more of a visual learner, Lynda.com is hard to beat. For $25/mo, you get unlimited access to a library of thousands of hours of high-quality video courses in any computer-related topic you can think of, from Office, through graphics apps all the way to programming languages and web technologies. I studied a complete 11-hour PHP course, and I was very happy with it. I followed along (video on one monitor, PHP development on the other monitor), and it really gave me something.

Lynda also offers a JavaScript course by Dori Smith, who seems to have a very solid understanding of JavaScript. I must admit I did not personally use this resource because the pacing was a bit slow for me, but it might prove useful for you. Give it a shot – you can even watch the first few videos for free!

5: Komodo Edit

Oh DLS readers, how you love to bash me in the comments; but despite any criticism, I still think Komodo Edit rocks for PHP-related work, and it’s proven invaluable for JavaScript development, too.

I get beautiful code highlighting, code completion as it was meant to be (even though I must admit Microsoft sets the gold standard for this one), and instant squiggly underlines showing any syntax errors.

Firebug for Firefox

One thing Komodo Edit doesn’t do is proper debugging; for that you need to spend money on a proper IDE, or simply use Firebug.

Firebug has completely changed my web development workflow. It has a profound impact on any CSS or HTML work I happen to be doing, but I’ve also started using it for JavaScript debugging. I mainly use the error console, but I also use it to dig around in any JavaScript files that come along with the page I’m currently loading (very useful for creating user scripts utilizing existing functions on the page). I prefer the console to Firefox’s built-in JavaScript console because it’s prettier, and thus easier for me to figure out.

Another huge Firebug feature is that I can set breakpoints, watch variables and step through any JavaScript executing to try and figure out what’s making it break. In other words, it offers proper, full-fledged debugging.

If I ever work on one of those newfangled “web apps”, I will probably end up using Firebug’s profiling facilities, which are supposed to help optimize the execution speed of my scripts. But in that regard, I think Chrome offers some better tools than what Firebug brings to the table at the moment (even if you consider YSlow).

via http://www.downloadsquad.com

Related Posts

]]> http://www.webmaster9.com/2010-06/six-great-resources-for-budding-javascript-coders.html/feed 0 18 jQuery scripts and tutorials to improve your portfolio http://www.webmaster9.com/2009-08/18-jquery-scripts-and-tutorials.html http://www.webmaster9.com/2009-08/18-jquery-scripts-and-tutorials.html#comments Sun, 30 Aug 2009 07:04:50 +0000 Webmaster9 http://www.webmaster9.com/?p=311 1. jQuery tabs

Tabs can be a great way to make informations about a project quickly available without leaving the page. For example you can insert project details in a secondary tab because you know that only a few visitors will have interest in it.

2. jQuery cycle

If you want to show a project’s evolution, jQuery cycle could be the way to go. It is basically a slideshow with cool transition effects, and the ability to use different actions to move from one slide to another.

3. Coda Bubble

If you are going to use a tooltip to display further technical informations, do it with style. This script and tutorial teaches you to create a bubble just as pretty as the ones on Coda’s website.

4. jQuery Zoom

If you have designs where the details have a lot of importance, you should use this script to let your site’s visitors know that you don’t neglect details in your designs.

5. Flip Box

Nice flipping effect for your divs, images, or whatever you want to put in it.

6. jQuery Multimedia portfolio

A cool carousel jQuery that allows you to display different media types, perfect for multimedia designers.

7. Coda slider

If you read a lot of web design blogs, you’ve probably seen this one over and over. I still could not leave it out of this list as it’s a great way to display design work.

8. Kwicks

Nifty little effect for menus, can also be used for other things if you are creative (and I am sure you are).

9. jQuery Treeview plugin

If you have a lot of projects and designs to show, this could be the right navigation to use for your portfolio.

10. jQuery filterable portfolio

Excellent tutorial to create a filterable portfolio with jQuery.

11. LavaLamp menu effect

Beautiful menu effect that captures your attention towards the menu element you are hovering.

12. jQuery Calculator

Want to get rid of people with too low budgets? This could be the way to go. The jQuery Calculation plugin could allow you to give an estimate of what their request will cost.

13. jQuery form validation

Tired of receiving incomplete form submissions from your portfolio site? Try the jQuery form validation plugin and the people trying to contact you will not be able to send a message if they didn’t fill in the form properly.

14. jQuery Accordion menu

In your portfolio you will probably want to emphasize on your content and images. Accordion menus can be a good way to declutter your sidebar and give more space to content.

15. jQuery sequential list

It’s good to explain your workflow on your portfolio website, it gives your potential clients a good indication of what they can expect when working with you. Using a sequential list is a good way to do this, learn how in Web Designer Wall’s tutorial.

16. jqTransform

Good form styling does not only look nicer, it’s also often more usable.

17. jQuery Virtual Tour

If you are really proud of your studio, you can give a good feel of what it looks like with this virtual tour jQuery plugin.

18. jQuery Image Notes

To give informations about an image or project, image notes are the perfect solution. You can easily point out details and give in-context explanations.

via

Related Posts

]]> http://www.webmaster9.com/2009-08/18-jquery-scripts-and-tutorials.html/feed 0 OTRS : Open Source Trouble Ticket System http://www.webmaster9.com/2009-08/otrs-open-source-trouble-ticket-system.html http://www.webmaster9.com/2009-08/otrs-open-source-trouble-ticket-system.html#comments Sun, 23 Aug 2009 10:55:16 +0000 Webmaster9 http://www.webmaster9.com/?p=300 What is OTRS ?

OTRS is an Open source Ticket Request System (also well known as trouble ticket system) with many features to manage customer telephone calls and e-mails. The system is built to allow your support, sales, pre-sales, billing, internal IT, helpdesk, etc. department to react quickly to inbound inquiries. Do you receive many e-mails and want to answer them with a team of agents? You’re going to love the OTRS!

It is distributed under the GNU Affero General Public License (AGPL) and tested on Linux, Solaris, AIX, FreeBSD, OpenBSD, Mac OS 10.x and Windows.

The OTRS URL: www.otrs.org

Related Posts

]]> http://www.webmaster9.com/2009-08/otrs-open-source-trouble-ticket-system.html/feed 0 the MySQL backup tool : phpMyBackupPro http://www.webmaster9.com/2009-08/the-mysql-backup-tool-phpmybackuppro.html http://www.webmaster9.com/2009-08/the-mysql-backup-tool-phpmybackuppro.html#comments Sun, 23 Aug 2009 10:39:04 +0000 Webmaster9 http://www.webmaster9.com/?p=299 What is phpMyBackup Pro?

phpMyBackup Pro is a very easy to use, free, web-based MySQL backup application, licensed under the GNU GPL.

You can create scheduled backups, manage and restore them, download or email them and a lot more!

phpMyBackup Pro Major features:

- backup of one or several databases with or without data, table structure, …
- three types of compression (no compression, gzip or zip)
- scheduled backups (by a small PHP script which must be included in an existing PHP script)
- interface for managment of the backups (viewing, restoring, downloading, deleting)
- backup directly onto FTP server and sending of backups by email
- platform independent – only webserver and PHP needed to run e.g. on MS Windows, Linux or Mac
- shell mode (to use manually or by cron script)
- backup of whole file directories (on a FTP server).
- backup databases from different accounts on several MySQL servers
- one installation can be used for all MySQL users of one MySQL server (used by webhosters)
- highest security through two alternative login methods (HTTP or HTML authentication)
- easy to use interface and very easy to install
- several language packages available
- online help (included in pMBP) and FAQ on this website

Download phpMyBackupPro: www.phpmybackuppro.net

Related Posts

]]> http://www.webmaster9.com/2009-08/the-mysql-backup-tool-phpmybackuppro.html/feed 0 10 security mistakes you may also made in Joomla! http://www.webmaster9.com/2009-08/10-security-mistakes-you-may-also-made-in-joomla.html http://www.webmaster9.com/2009-08/10-security-mistakes-you-may-also-made-in-joomla.html#comments Fri, 21 Aug 2009 14:36:16 +0000 Webmaster9 http://www.webmaster9.com/?p=293 Mistake #1. NOT TO download or upgrade to the latest Joomla! Version

New versions of Joomla! are released often with various security fixes and the developers are strongly recommending to upgrade to the latest version of Joomla!

Mistake #2. NOT TO check folders permissions after installing Joomla!

Folders that have permissions higher than 755 may compromise your Joomla!, leaving the “door” open for an attacker to read/write or even upload his own shell files, thus taking control over your site.

Mistake #3. NOT TO check files permissions

We advice you setting permissions to all Joomla! files to 644 or lower.

Leaving files with permissions higher than 644 can make life easier for hackers trying to access your website. Once they’re in, they can easily modify files with permissions higher than 644.

Mistake #4. ALLOW uncontrolled file uploads(forums, comments)

Hackers can and will use these applications to upload malware scripts and enter into your Joomla! website.

You must allow as few file extensions as possible, and NEVER let executable script files (.php, .php3, .php4, .php5, .phtml) to be uploaded.

To avoid this you can use RSFirewall! that automatically blocks unwanted file uploads. Also it can scan your system, look for mallware patterns and hacker scripts.

Mistake #5. Let IMPORTANT files and folders accessible by everyone

You must protect sensitive files and folders like:

  1. configuration.php – main configuration file for the Joomla global configuration,
  2. Joomla! temporary folder – every extension that you install is first uploaded to this folder,
  3. Joomla! log folder: Joomla! related activity is recorded thus an attacker can find what vulnerabilities may reside within your site.

Mistake #6. Have PHP not configured properly

These are some php settings that you must setup in order to secure your server. (Note that these settings may be applied only by editing the php.ini file)

  • check register_globals
    It is recommended to disable register_globals. Don’t trust Joomla! extensions that ask you to turn it on. Leaving register_globals=ON makes your website vulnerable to hack attempts. In PHP 4.2.0 register_globals was changed from ON to OFF, by default, and completely removed in PHP 6.0.0
  • check safe_mode (leaving it ON could create some problems)
    We recommend to keep safe_mode OFF. In PHP 6.0.0 safe_mode was removed because it didn’t reached its purpose: it didn’t increase the website security causing some bugs and problems.
  • check for allow_url_fopen
    allow_url_fopen enables a script to open remote files. You must make sure that script cannot open remote files.
  • check allow_url_include
    allow_url_include allows inclusion and execution of a remote php script. Therefore this setting must be turned off.
  • use disable_functions to disable some functions that could make your website vulnerable. Some of these are: system, shell_exec, exec, phpinfo, etc.
  • use open_basedir to define the locations or paths from which PHP is allowed to access files using functions like fopen() and gzopen(). If a file is outside of the paths defined by open_basdir, PHP will refuse to open it.

We recommed using the following PHP configuration:

  • register_globals = OFF
  • safe_mode =OFF
  • allow_url_fopen =OFF
  • allow_url_include = OFF
  • disable_functions = system, shell_exec, exec, phpinfo(full list available in RSFirewall!)
  • open_basedir=/your/joomla/path

Mistake #7. USE the “admin” user

When you install Joomla!, it comes with the predefined “admin” user. Joomla! had a bug allowing hackers to take over Joomla! websites exploited this “admin” user, but it has been fixed now. Anyhow, leaving the admin user as the Super Administrator in combination with a weak password can make your website vulnerable.

Mistake #8. USE weak passwords for admin users

Choose carefully passwords for admin users; don’t use common words.

It is best to advice your users, when registering to your website, to choose a good password , alpha-numeric, because hackers might take advantage and steal valuable information from them.

Do not use the same password to access the Joomla! backend and the hosting account.

Try not to include in your password personal information like your name, username, date of birth, common words and easy to guess like “admin”,”password”, “username”, “password123″ or English words.

Mistake #9. NOT to have an updated antivirus

If you have solved the above issues from 1 to 9 don’t think that your website will be secure if you don’t use any antivirus application to protect your computer. New viruses nowadays look for ftp connections and inject malicious scripts directly into your Joomla! files because your computer is virused. It’s best to keep your computer protected by getting the latest updates for your antivirus.

Mistake #10. Assuming your website is protected and secure if there are no visible signs of it being hacked

It’s always best to stay vigilent, carefully keep track of possible intrusion attempts, constantly backup your website, monitor it’s files and keep applications up to date.

via

Related Posts

]]> http://www.webmaster9.com/2009-08/10-security-mistakes-you-may-also-made-in-joomla.html/feed 0 7 Open Source And Free URL Shortener Scripts http://www.webmaster9.com/2009-08/7-open-source-and-free-url-shortener-scripts.html http://www.webmaster9.com/2009-08/7-open-source-and-free-url-shortener-scripts.html#comments Fri, 21 Aug 2009 14:31:00 +0000 Webmaster9 http://www.webmaster9.com/?p=292 URL shortening services, with the popularity of Twitter, has a very wide usage, probably more than anyone had expected few years ago.These services not only makes URLs shorter but more readable & trackable. Also, some offer features like password-protecting, custom URLs & more.

Here are 7 open source & free URL shortener scripts to create your own:

Shorty

Shorty is a free URL shortener script built with PHP & MySQL. It comes with an admin interface where links can be edited/deleted & number of clicks can be viewed.

YOURLS

It is a set of PHP scripts for running a custom URL shortening service.

It can be private or public, custom keyword URLs can be picked, counts clicks & has an API. Best of all, a WordPress plugin integrates it with your blog & links are shortened automatically.

kissa.be!

This short URL script has support to shorten various inputs:

  • URL
  • e-mail
  • text
  • image

It is built with PHP/MySQL & has an API for shortening/expanding URLs.

PHPurl

PHPurl is a simple script to shorten URLs. Optionally, custom URLs can be defined for more readable links. The script is created with PHP & MySQL.

BrokenScript

This is a basic URL shortening script where a custom info is required to generate the URL.

TightURL

TightURL is a PHP/MySQL script which has a nice spam control feature. It checks entries in various spam databases before shortening them.

phurl
The script has a captcha & re-captcha support to prevent bots. It also comes with a basic admin interface which enables deleting URLs.

via

Related Posts

]]> http://www.webmaster9.com/2009-08/7-open-source-and-free-url-shortener-scripts.html/feed 0 OpenCart : Open Source Shopping http://www.webmaster9.com/2009-08/opencart-open-source-shopping.html http://www.webmaster9.com/2009-08/opencart-open-source-shopping.html#comments Fri, 21 Aug 2009 14:24:53 +0000 Webmaster9 http://www.webmaster9.com/?p=291 What is OpenCart?

OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.

OpenCart is designed feature rich, easy to use, search engine friendly and with a visually appealing interface.

The Features of OpenCart

  • Unlimited Categories
  • Open Source
  • Unlimited Products
  • Free Documentation
  • Unlimited Manufacturers
  • Templatable
  • Multi Currency
  • Automatic Image Resize
  • Multi Language
  • 20+ Payment Gateways
  • Product Reviews
  • 8+ Shipping Methods
  • Product Ratings

Free Download: www.opencart.com

Most Commented Posts

]]> http://www.webmaster9.com/2009-08/opencart-open-source-shopping.html/feed 0 EMMA : a free Java code coverage tool http://www.webmaster9.com/2009-08/emma-a-free-java-code-coverage-tool.html http://www.webmaster9.com/2009-08/emma-a-free-java-code-coverage-tool.html#comments Fri, 21 Aug 2009 14:02:17 +0000 Webmaster9 http://www.webmaster9.com/?p=286 What is EMMA?

EMMA is an open-source toolkit for measuring and reporting Java code coverage. EMMA distinguishes itself from other tools by going after a unique feature combination: support for large-scale enterprise software development while keeping individual developer’s work fast and iterative. Every developer on your team can now get code coverage for free and they can get it fast!

EMMA features at a glance:

  • EMMA can instrument classes for coverage either offline (before they are loaded) or on the fly (using an instrumenting application classloader).
  • Supported coverage types: class, method, line, basic block. EMMA can detect when a single source code line is covered only partially.
  • Coverage stats are aggregated at method, class, package, and “all classes” levels.
  • Output report types: plain text, HTML, XML. All report types support drill-down, to a user-controlled detail depth. The HTML report supports source code linking.
  • Output reports can highlight items with coverage levels below user-provided thresholds.
  • Coverage data obtained in different instrumentation or test runs can be merged together.

The EMMA URL: http://emma.sourceforge.net/

Related Posts

]]> http://www.webmaster9.com/2009-08/emma-a-free-java-code-coverage-tool.html/feed 0