Archive for January, 2011

Web design tools and resources


Recently i found very large collection of links related to website creation.

  • Javascript
  • jQuery Essential & Specialized Widgets
  • jQuery “Extensions”
  • PHP/MySQL tools
  • Flash Components
  • Miscellaneous Tools (IETester, Spam protection tool, Create Facicons tool)
  • Web Development BookmarkletsSite
  • Grid Design
  • Content Generators (Lipsum, Preloader Graphics, Background maker)
  • Pixel Icons
  • PNG Support in IE (CSS Only)
  • Vector Icons
  • Backgrounds & Styles
  • Hosting
  • Browser Compatibility
  • CSS & HTML Techniques
  • Typography
  • Firefox Extensions
  • Essential Mac Software
  • SEO / Site Evaluation
  • Domain Searches
  • Analytics, Monitoring & Testing
  • Cheat Sheets (Web Technologies)

    Hope you find this list useful too    LIST HERE

Multiple Fancy File Uploaders


Have you ever want to upload multiple files at once, or see file upload progress, or style your upload elements, or control filetypes before upload ? Today i want to suggest you a collection of file uploaders ready to use in your web projects.

FancyUpload Multiple file Uploaders
They divided into 2 groups: uploaders not using flash & uploaders using flash

Solutions without flash

1. Ajax upload

ajaxupload Multiple file Uploaders

Very nice tool, flash-free. You can customize it as you want, also you can use drag&drop files on input
Works in: IE6/7, FF2/3, Safari, Chrome, Opera.
Has different versions for jQuery, Prototype, plus has independent version.
demo

2. jQuery Multiple File Upload Plugin

jQuery Multiple File Upload Multiple file Uploaders

Has many features, like using different validations, limit max files for upload, use different icons for different file types
demo

3. Ext.ux.FileTreePanel (Ext.JS extension)

FileTreePanel Multiple file Uploaders

demo

4. noswfupload

noswfupload Multiple file Uploaders

Multiple files upload without SWF objects, applets Java, or other third parts plug-ins, 100% browser and W3 compatibility thanks to graceful enhancement, no extra libraries dependency

demo

Solutions using flash

1. SWF Upload

swfupload Multiple file Uploaders

Popular solution, allows to customize all upload elements using XHTML & CSS, shows only file types you choose, has js callback function to every event.
demo

2. uploadify

uploadify Multiple file Uploaders

Has not so many features, as SWFUpload, but it uses jQuery 🙂
demo

3. FancyUpload

FancyUpload Multiple file Uploaders

FancyUpload – fully customizable uploader with progress bar. Require MooTools.
demo

4. Yahoo File Upload

Yahoo File Upload Multiple file Uploaders

demo

Vertical text in HTML


Not so long ago i had a problem with one site. There was name of user in vertical text.

Link to example

My first thought was “i will use php and generate image for each user”.
But after that i thought that it is bad idea, if there will be many visitors. So i decide to output it using html

writing-mode – This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems.

1
filter: flipv() fliph(); writing-mode: tb-rl;

By using such styles we tell browser to output it vertically. Sad thing is that it is working only in IE.
But a lot of people using FF, Opera.
Scalable Vector Graphics (SVG) – this thing will help me 🙂
You can read about it’s advantages here

For more information click here

Mootools Amazing Effects


Debugger

debugger Cool mootools scripts

Simply include Debugger.js in your page and all the code that you have logging to firebug’s console will now show up in Debugger. Note that if you include Debugger.js in your page and you have Firebug installed, you won’t see it. Firebug is still way better than Debugger.js, so you’ll really only use it for IE, Safari and other browsers.

Reflection.js for mootools

reflection Cool mootools scripts

This is an improved version of the reflection.js script rewritten for mootools. It allows to add instantaneous reflection effects to your images in modern browsers, in less than 3kb.

imagemenu

image menu Cool mootools scripts

horizontal menu, reveals more of the image as you rollover it.

features

  • 2 optional onClick events – open & close
  • href passed to onClick events
  • stays open when clicked
  • closes when clicked
  • select item to pre-open

My Object Oriented Tree

mootree Cool mootools scripts

  • Developed by Rasmus Schultz, http://www.mindplay.dk
  • Tested with MooTools release 1.11, under Firefox 2, Opera 9 and Internet Explorer 6 and 7.

MooFlow

mooflow Cool mootools scripts

MooFlow is a Javascript based Gallery looks like Apple’s iTunes or Finders CoverFlow™.
Features

  • Autosetup onload
  • Autoresize on changes of Window dimensions
  • Scrolling with mouse wheel
  • Scrolling with key input (left and right cursor)
  • Autoplay presentation loop

Table sorting

javascript table sort Cool mootools scripts

1. Client-side sort of various formats (like mm/dd/yy).
2. Zebra or striped tables.
3. Support sorting with hidden rows on the table.
4. Be fairly fast.
5. Use mootools (which we already use).
6. Use a table already on the DOM.

MooEditable

mooeditable Cool mootools scripts

MooEditable is a simple web-based WYSIWYG editor.
Features

  • Clean interface
  • Customizable buttons
  • Tango icons
  • Lightweight (~10Kb uncompressed)
  • Fully degradable when Javascript disabled
  • Works in Internet Explorer 6/7, Firefox 2, Opera 9 and Safari 3 beta

thumbnoo

thumbnoo Cool mootools scripts

A fresh look at thumbs preview. Use it on your site and you wont regret

MOOdalBox

MOOdalBox Cool mootools scripts

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.

elSelect

elselect Cool mootools scripts

elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

MooSound

moosound Cool mootools scripts

MooSound is a MooTools API for Flash-enabled sound management.
That may not seem very exciting on its own, but if you need to add sounds to your page using MooTools, you’ll probably find it useful. ( You may need it if you need an audioplayer )

mooRainbow

moorainbow Cool mootools scripts

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.
What at first I wanted to have was of course a color picker, but I wanted it to be rapid, optimized, clear and powerful: so here we are.

morphing cloud

morphing cloud Cool mootools scripts

Nice approach to tag clouds. Drawing a cloud in javascript and make it changes dynamically

Calendar

calendar Cool mootools scripts

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

form validation

validate Cool mootools scripts

features

  • optional onFail function.
  • optional onSuccess function which will overide the form submition, this can be used to validate an ajax form.
  • onBlur validating
  • shows errors next to item or in a list.

Custom HTML Form Elements

1custom form elements Cool mootools scripts

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.

Fancy Menu

1fancy menu Cool mootools scripts

Custom navigation bar with some cute Javascript effects that will certainly impress your friends

FancyUpload

1fancy upload Cool mootools scripts

Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars.

fValidator

1fvalidator Cool mootools scripts

Nowadays everybody knows that javascript can be used to validate input data in HTML forms before sending off the content to a server. Despite of that, when there are many fields in the form, the JavaScript validation becomes too complex and boring to code. That’s why fValidator exists, with it form validations are many times easier.

iCarousel

1iCarousel%20 Cool mootools scripts

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

rel=”nofollow”iFishEye

1ifisheye Cool mootools scripts

iFishEye goal is to bring the FishEye effect into the web and provide an easy development alternative for content displaying with standard compliant XHTML and unobtrusive JavaScript.

imask

1imask Cool mootools scripts

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.

mooForms

1mooForm Cool mootools scripts

mooForms – custom checkboxes and radio buttons

MooPix

moopix Cool mootools scripts

MooPix isn’t a slideshow, it’s a way for you to access your public Flickr photos without doing PHP, Ruby, or Python situps

Related posts:

  1. MooTools Tutorial for Designers
  2. Mootools 1.2 cheat sheet
  3. Simple tutorial for MooTools usage
  4. elSelect – customizable SELECT element.
  5. Multiple file Uploaders

elSelect – customizable SELECT element


elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

Click on screenshot to see it in action. Example will appear in a new window because it uses MooTools library which conflicts with the Prototype library used at this site. And “mootools is not trying to be conflict free” ( more info – http://forum.mootools.net/viewtopic.php?id=1964#post-9356 )

elselect elSelect   customizable SELECT element.

Why i did it? Well, you all know that select element and IE have problems.
They are :

  • SELECT ignore z-index and will display over any other position element (fixed in IE7) ,
  • disabled property for OPTION tag do not work in IE
  • you cant change look of standard SELECT using CSS

This class successfully solve all problems, but elSelect is still in development……

Future Enhancements(Hopefully)

  • Create a select from an array instead of select element.
  • Add functions to dynamically add / remove rows.
  • Options sorting

elSelect is made with MooTools Framework.

for more information click here

Here goes example and download link.

How to get answers for free from Expert-Exchange


Whenever we stuck to some questions we just search for it on Google. Google is best way to get answers to our (sometimes stupid) questions. But few online forums sometimes ask for registration like Expert-Exchange.com , or So are you interested in paying for the answer ?? I hope you will never pay. So here is the trick to get the answers from such websites for free and without registration.

This trick will apply to most of the sites where you will need to sign-up to view the posts.

1. You came across such forum link but the forum is asking for the registration.
2. Just search for the term in Google so that you will get the Google link for the specific forum thread.
3. Check for the cached link near to Google search result and click it.
expert-exchange.com hacked
4. Scroll down to the end of the page, and here you will get the answers for free.

In this way you can get the answers from experts-exchange.com for free without paying a penny and without registration. I repeat, you can get answers from other such website which ask for registration.

Actually what they do is, they show different content to Google search bot, which includes the answers and hence the Google have the threads with answers to question, and we are just retrieving the answers from Google cache.

Note : Thanks to Google Engineer Matt Cutts for the solution via his video on YouTube.

Just a new address, but the same location


Have you noticed the new URL of my blog ? Yes, Its new. Recently I decided to change the URL of the blog but its on same location and its the same blog. The old URL thechetan.com is now 301 redirected to the new address chetangole.com/blog/. All posts, pages, everything is moved. Rather than saying ‘moved’ its just renamed because the actual server location is still the same, I just changed the address i.e. URL.

All older links are automatically redirected to the respective new link address, thanks to .htaccess file and its rules, and off-course the simplicity of WordPress helped me here.

Its really a very risky task for blogger having domain with Google Pagerank of 6 and now I changed the domain itself. Its a big experiment that I am doing with myself, lets see what will be the result. Now I will have to ‘request for change address’ at many places including dmoz.org, etc.

I also did few minor css change in blog design, about me page is also changed, new contact form added, new logo, twitter stream is also added to the blog. I am also planning for few more changes in posting style and planning to change & add few more categories.

Meanwhile if you face any problem or come across any bug, please let me know about it. Also it is the request to you all, to kindly update your bookmarks and if you are linking to the old domain i.e. thechetan.com please change it to chetangole.com/blog/.

update:
1. I am still working on editing various non hosted things like feedburner feeds.

similar posts