When you’re reading around the web about what to focus on when creating a web page, and you’re sure to find a host of opinions which, in total, insist that every single page element holds the secret to attracting traffic, pleasing visitors, or simply “doing it right.” Though some page elements are necessarily more crucial in terms of their uniformity than others, designers and developers can count on the essential nature of the HTML meta tag on any given web page.

Meta tags are capable of telling search engines and other interested parties key information about the contents of the page, the meta tag is arguably as important as the page’s actual title–yet it leaves greater room for taking advantage of keyword use and relaxing the rules of style.

Of the many attributes that can be defined using a meta tag, the description tag is likely to be the most meaningful for modern sites. As some search engines do not include support for a keywords tag (really only Yahoo uses this), creating a solid description that manages to work in keywords without over-stuffing can yield SEO-friendly results. (Though, limiting your keywords to two or three per page will help get you higher search engine rankings and more targeted traffic.) The language and robots tags are also likely to be used on a number of pages, though the majority of sites utilize English and specifically allow bots to scan and index at liberty. To achieve picture-perfect meta tags of these types, a simple copy and paste job is often sufficient.

It’s not a good idea to place long content inside HTML meta tags–5 to 10 words should be enough–and you shouldn’t use words you haven’t mentioned on the page as well. Most search engines have require a maximum of:

• 60 characters for the title.
• 160 characters for the description.

No matter which meta tag you’re defining, though, you’ll need to ensure that your syntax is in working order. Always close your tags and observe proper attribute spelling and usage:

<META name="description" content="Because when you use clean syntax and keep an eye out for errors, your work will benefit." />

Though meta tags are sometimes shrouded in an air of mystery by webmasters who insist that only their formula will work, paying attention to form and using keywords intelligently will go a long way towards making any page great.

Related posts:

1. Quick Tip: Highlight Author Comments in WordPress – The Right Way
2. Make a most beautiful tags cloud on over the world with Facelift and jQuery
3. HTML vs. XHTML – How to Convert HTML to XHTML

The beauty of the Google Chrome Extension gallery is that it is virtually uninhibited by any sort of approval process. This allows tons of extensions to be uploaded into the wild in real time. Every couple weeks, I go through and find the best and/or the most promising extensions that have recently been added.

The following extensions are no more than a few weeks old, and thus, it’s highly unlikely that you’ve seen them yet (unless you have no life, like me). Keep in mind that since these are brand new, some of them may have bugs here and there. The good thing, though, is that extensions from the gallery automatically update in the background without the need to restart the browser, and extension developers are usually more receptive to adding/removing/fixing features when their extension is newly released!

There are twenty-three extensions and two themes to try out. Feel free to give any of these a quick try! If you decide you don’t like it, simply right-click the extension and select “Uninstall” — Simple as that! No restarts or anything!

Ready? Here goes!

copy title+url to clipboard

This extension is fresh off the dev press. I’m using it to write this post right now, in fact. It simply allows you to copy the URL, the title of the page and the URL, or an HTML link to the page.

How can it improve? New icon, properly capitalized lettering, and styling. Start there. Make the extension a PageAction instead of a BrowserAction since interacting with it results in data from the page (not the browser).

New tab with clock

Alright, so I admit this sounds super simple but I think this is a great tool. All it does is it removes your “Speed Dial” and places a live clock there instead. Why is this so great? If you’re like me, you need to be reminded about the time — a lot! Having the time in front of me every time I open a new tab helps remind me of what I should be doing right now (in other words, it urges me to get off Twitter and Facebook and start working!).

How can it improve? Add a dark theme (or allow custom CSS) and throw in a simple alarm clock! I know many college students (and non-students) who would turn this into their regular alarm clock. It’d be most effective at night, though, if it had a black background with red numbers (like most physical alarm clocks). Users can simply press F11 to put it in full screen, and they have a $1,000+ alarm clock!

Chromium Updater

First: This is ONLY for Chromium and not for Google Chrome. If you run Chromium, you have probably noticed that it doesn’t automatically update like Google Chrome does. This extension attempts to make it easier for you to update Chromium whenever there’s an update by giving you quick access to download the latest installer and zip files.

How can it improve? It’s probably just fine for who it’s intended for, but somehow adding a .dll plugin which allows it to update automatically (like Google Chrome) would be amazing — Enough to get me to switch over to Chromium full-time!

Session Buddy

Despite being released today (as of writing this), this extension already has well over 1,500 users and over 2,400 downloads! Session Buddy describes itself as “a flexible session manager extension for Google Chrome that allows you to quickly save and restore session tabs.” Of all Chrome’s “session managers”, this one is by far the most well laid out. I also appreciate the theming (trying to keep to the “Chrome” color scheme).

How can it improve? In the short time that I have had to try it, all I’d suggest right now, is setting it up so that clicking the “Options” button while the Session Buddy page is open would show the options panel. The developer may be able to do this by editing options page setting in the manifest to include an anchor (ex: #options) that way it treats it as a different page.

Twitter Extender

No list can be complete without a Twitter extension! This extension currently adds four new features to Twitter.com:

1. Old school retweet
2. Reply to all
3. Send a Direct Message
4. Switch reading direction (ex: for right-to-left languages)

Future features include adding a URL shortening button, translations, and short link expander.

How can it improve? With these added features, it’s starting to get a little cluttered. It may be a good idea to scrap the text and have only icons with pretty tooltips.

Wordpress Comments Notifier (by HelloLogic)

This one is ours! It’s only in it’s alpha stage, but currently it will check any one Wordpress blog for pending (unaccepted) comments and show the number in the badge. Clicking the icon will open your dashboard so you can review and accept them.

How can it improve? We’re currently designing and developing the next version to allow users to check multiple blogs as well as accept, deny, edit, and reply to comments without opening their dashboard. If you’re great with JavaScript or design and want to contribute, please get in touch!

Blank Canvas Gmail Signatures

Well, poo. After finding this extension, I’m going to have to go back and re-”write” on of our future posts (you’ll know what I mean once we release it). This extension allows Gmail users to automatically insert HTML signatures into their messages based on which address they’re sending from. Brilliant.

How can it improve? Add Yahoo and Hotmail support.

Pixlr Grabber

We’ve mentioned Pixlr as an exceptional online image editor recently. This extension allows users to quickly grab web page captures and edit and/or share them instantly.

How can it improve? Right now? Just get a better icon and move it to the address bar by making it a PageAction. (Anything that mainly deals with the current page should be a PageAction, not a BrowserAction.)

Polyglot

Now this is an interesting way to learn! Polyglot is a translation extension with a fun twist. It randomly translates a few phrases on the pages you visit. If you hover over the translated word(s), you get the original text. This turns web browsing into a learning game. Oh I can hear it now: “No, Mr. Teacher! I’m not off task! See? I’m studying my vocabulary!” — Not a bad excuse though!

How can it improve? Make your options page pretty and edit the text so I can understand all the options at a quick glance. Imagery might help.

Facebook Friends Checker

So, this is supposed to somehow alert you when people remove you as friends. …Since no one would ever thing to remove me as a friend (haha), I’ll really never know how well this works. All kidding aside, I really haven’t quite figured out how it works. If you know, please inform us in the links below.

How can it improve? One word: Documentation! Your extension’s ‘profile’ reads like a PHP script (if (blah) { do this; } else { do something else; })

Pastebin.com

This is the official Pastebin.com extension for Chrome. After Pastebin was purchased, the owners set out to build official Firefox and Chrome extensions. This one is the first and is just as featured as Pastebin.com is (minus this displaying part)!

How can it improve? Pink button. Really? How does that fit Chrome’s or your color scheme? Users should be able to click away from the popup and return to it and still have their text waiting for them (currently, closing it clears the textarea). And last, add in keyboard shortcuts (ex: Shift+P) to make it quick to paste multiple sets of text from the browser.

ChromeReload

I use this religiously. Being in Vietnam, I’m graced (cough) with government-run internet service. The internet goes down probably 3 to 10 times a day–regularly. This extension simply refreshes the current web page every XX seconds (user definable). It’s particularly useful when the internet goes down and you want refresh the page every 5 seconds as you wait for it to come back online. It’s also great for active design/developing. Instead of refreshing the page after each save, simply set it to refresh automatically every 5 seconds and it’ll automatically show you your most up-to-date edit.

How can it improve? Styling and (again) move it to the address bar. This should be a PageAction, not a BrowserAction.

Straight to Google Analytics

If you use Google Analytics, this will be nice to have. It simply auto-redirects http://www.google.com/analytics/ (which is the splash page) to https://www.google.com/analytics/settings/?et=reset&hl=en (which is the front of the admin area) if you’re already logged in so you don’t have to click “Access Analytics” anymore.

How can it improve? Either get rid of the BrowserAction icon, or give us an option to. All I need is to have it redirect, I don’t want anymore buttons cluttering my interface.
Update: The developer has updated the extension already to meet this request. This is why I love Google Chrome!

Greasy Thug

Greasy Thug, like Greasemonkey, enables you to use JavaScript and jQuery to alter web pages but comes with a built in console and full history of commands. “This allows for quick one-off scripts to be created and saved to execute at each subsequent visit to a page.”

How can it improve? I know it’s just a console, but does it have to be so ugly? I suggest one of two things (or a combination of the two if you’re able): (1) have the console dock to the bottom (or top) of the window like Firebug Lite does; or (2) show the console in the “popup” UI that’s built into Chrome extensions. Using a combination of the popup and content scripts, you should be able to do both for a nice UI.

Visual Tabs

Visual Tabs gives you a simple button to visualize all your tabs in a sort of “iTunes” format.

How can it improve? Why a button? Make this the default new tab page! Or set it up to listen for CTRL+Shift+S (S is for Switch) or CTRL+Alt+T (T is for Tabs) and open a new tab with this interface whenever one of those is pressed.

RuneScape Hiscores Lookup

No, I don’t play RuneScape but I know a lot about it because my younger brothers did (still do?). As a developer, I usually only see extensions from a developer’s point of view. Extensions like these that target the casual browsers and gamers, however, is what will help bring Google Chrome to the mainstream.

How can it improve? I really don’t know, since I don’t play the game.

Skeet for Twitter

Skeet is a new Twitter app that sits right inside Chrome. The idea isn’t new. But it’s one of the most well polished apps (in regards to features and design) that I’ve seen in the gallery. It also loads much faster than the others as well.

How can it improve? Upon initial installation and authentication, Chrome crashed. Fix those 400 errors that people are reporting. Retweets should not be a one click action unless you have a button to quickly undo the retweet. The character count is buggy. And last, I shouldn’t have to click the “Mark as Read” button in order to mark all of them as read.

Merge Windows

This is a nifty little tool developed by Google themselves. It simply merges all your tabs from different windows into one window. It’s quite useful for those of us who get carried away with too many windows.

How can it improve? For what it’s meant to do, there’s not much room for improvement. Apparently it also merges “Application Windows Shortcuts”, so that should be fixed. It’d be nice to have an extension that would split windows, though.

Minimize Chrome to tray

Here’s an extension built specifically for the Windows version of Chrome. Simply put, when you minimize Chrome, it will place an icon in your taskbar tray area. Kind of like most instant messengers and anti-virus programs. It even has a boss hot key so that you can minimize your windows quickly and allows you to customize how you are able to interact with it.

How can it improve? Currently, you must minimize the window by pressing the minimize button in the window. If you click the taskbar button to minimize it, it won’t hide the window. Also, sometimes it doesn’t show all the proper titles of the windows.

Pure Google Bookmark

Here’s another nifty one. This is a super simple extension allowing you to easily create bookmarks using Google Bookmark. It enables two hot keys: Alt+B adds the current page to your bookmarks (you can also single-click the new star icon), and Alt+M opens up the bookmark manager (or double-click the star icon). You need a Google account to use this.

How can it improve? Use Chrome’s built-in popup functionality when adding a bookmark instead. Keep it clean

Themes: WindowsXP Silver and WindowsXP Olive Green

So these aren’t technically extensions but they’re built practically the same way and they’re in the same gallery (for now). Now, I’m a big fan of the simple default theme that comes with Chrome because all of Google’s other “official” themes are rubbish, distracting, and unclean (in my opinion).

BUT. These are the first two custom themes I’ve seen that actually look good! I strongly encourage you to try them out, especially if you’re already using Windows XP with the Silver or Olive themes — but they’re great even without that.

How can it improve? None. Seriously, well done.

Dim My Chrome: Energy Saver

Quite an interesting idea. Simply put, this extension waits for you to be inactive for X minutes, then dims the web page in order to save energy. I’m not very big on the whole “global warming” fiasco, but if I can passively save energy (and a few cents) along the way, might as well!

How can it improve? Inform people that this only saves money for CRT monitors and not LCD monitors (yet).

Name Dropper

This one is just for fun (or self promotion). The extension is supposed to check to see if the site has Google Analytics installed, and if it does, it’ll create an “event” with your name and website address alerting the website owner that you visited their web page. A little icon displays when the site is using Google Analytics.

So far, two people have already used this on this website (Mark Layton and b.root).

How can it improve? Have an option to change the name of the event category (from “Guest List” to something else).

Paint

Paint is like having a simple version of MS Paint in your browser except it uses HTML5 and Javascript and, of course, still has some edges to fix up. (Keep in mind that it was only released a few days ago.) You can even save your paints as PNG files and insert/edit images from the web. And, once you click “Clear Canvas” it saves a copy of your latest work in the “Paint Archive” for later usage!

How can it improve? UI could be better and smoother lines. Otherwise keep workin’ on your “to do” list!

Related posts:

1. More Google Buzz Tips, Resources, Extensions, and Icons to Keep You Buzzed.
2. Google Chrome – New internet browser of Google
3. 12 Undocumented Tricks for Google Buzz

You may have your own blog or working for someone else. What ever may be the content of the blog, the theme of the blog gives the first impression about the blog to the reader. If your theme is very interactive and user friendly, then reader will probably enjoy it. If you are serious about your blog, you should have a serious theme. If you have a design or technical related blog, you probably don’t want to miss this showcase.

In the showcase below, I tried to include some of the highest rated magazine/business WordPress themes voted on by bloggers and designers. Once you have a licence for the theme, you are (of course) free to edit it to fit for your requirements. Here are some premium themes that will get you noticed, for sure.

All descriptions are from the theme designers themselves.

Agivee – Corporate Business Wordpress Theme ($32)

Agivee wordpress theme will give your business or company website a smart and professional look. It’s widget ready and works fine in all versions of wordpress. It’s easy to maintain and rich of features. You can find out some of the cool jQuery slide show, Auto image resizing, built in ajax contact form etc.

Our Magazine ($32)

A powerful WordPress theme special for online magazine, community, network or any site with rich content. It is modern, clean, and sexy ~ I just liked the color combination of this theme. It’s pretty good na ?

Our Magazine comes with 2 color variations, a slider for headline news, auto image resizing, advance theme option. It also provide a highly demand user link feed to allow your reader to submit news, example http://psd.tutsplus.com/ and http://kailoon.com.

Newscast 4 in 1 – Magazine and Blog Template ($22)

I think, You don’t wanna miss this lovely theme. Newscast is a HTML Template, best suited for Magazines and Blogs. It comes with 3 fantastic Image and News slideshows has multiple Page templates and of course gives you the option to choose from 4 Fantastic skins:

Magnifizine: A Magazine & Business WordPress Theme ($32)

Magnifizine is a stylish and modern looking WordPress theme designed primarily for magazine and business websites. It comes crammed with features Including a custom slider that comes in three sizes and plays Flash and YouTube videos.

Global Press – A Premium Magazine Wordpress Theme ($32)

Global Press is a premium news, portal or magazine WordPress theme. It is very lightweight, almost no images are used. It include a lot of custom features and is easy to use. It’s perfect for almost everyone who want to write articles, news, or publish an online magazine.

Liquid Magazine – Unique Fluid Grid Layout ($27)

This is one of a kind theme, there are no analogs on ThemeForest It will suits best for the blog with creative posts. Different thumbnails height is giving a special “style” to the template, your visitors will love it!

Headlines Premium Wordpress Theme

Some of the Features for this theme is follows. I know you may like this.

• Featured jQuery tabber/slider area above normal posts to showcase your favorite posts. Can be static or set to slide automatically with built in options.
• Show your latest tweet in the header (instead of 468×60 ad space)
• A custom social bookmark option at the bottom of single posts to share your writings with ease!

My Stream: Premium Wordpress theme

MyStream is a flexible and extremely customizable personal blog theme with massive social media & lifestreaming influences. Change the background to your visual identity, move the many available widgets around and VOILA: you have YourStream.

Aperture Wordpress theme

Aperture is a multi-functional photo-blogging theme with a unique home page, consisting of a latest posts slider, a visual category display, a blog module and lots of stylish widgetized spaces. With 12 alternate styles and a very visual archive system you should be able to house your photos/portfolio proudly in a theme that caters specifically for your needs.

Newsport Wordpress theme

Newsport is a stylish magazine theme aimed at those who want a more professional feel to their site. It includes a well laid out front page that showcases all your news with images, and also a cool category news feed on the side so that all content of your site gets to shine.

Groovy-Video Wordpress theme

Groovy Video is a colourful, funky video blogging theme, which is sure to put you at the top of the pile. Video blogging (vlogging) is trendy right now (all the cool kids are doing it), so do get your groove on with this theme! Get it? Got it? Good!

Noctis Theme ($27)

Noctis theme is a dark magazine-blog style. This theme is suitable for blogger who like magazine layout and want to show big post thumbnails in their homepage.

Affairv($22)

It is a 2 column, magazine flavoured Wordpress theme, designed to put your content at the forefront and give your blog a modern, stylish and professional feel. Featuring automatic thumbnail generation and custom social media links.

Caulk($27)

Caulk is a modern, sleek Wordpress custom theme built especially for magazine-style blogs, but also customizable for personal use, making use of multiple jQuery sliders. It is clean, organized, and easy to read with plenty of white space and nice typography.

MAJALAH ($27)

MAJALAH is magazine style Wordpress theme with clean and modern layout, and also can be switched as community theme. There are 2 Slideshow options in MAJALAH theme, 3D slideshow and Javascript slideshow that easily configurable from admin theme options, and also 2 colors available in dark dan white color with 4 combination background.

BusyBee

Clean and efficient wordpress theme from the wootheme sets. You can directly go and setup what all you needed in this page. You can customize this theme. I really liked this theme very much.

Convergence – Community WordPress Theme($27)

Convergence is a nicely put together WordPress theme with the intent and focus on creating a community site. This theme includes many popular features seen in today’s industry leading community sites.

If you’ve ever thought about starting a community based site, then this is your theme. Purchase today and be up and running in no time at all.

Intersect – WordPress Theme($27)

Intersect is a bold, striking WordPress theme with various layouts, colors and easy to setup. This theme is ready to get a site up an running out of the box. It is easy to customize and is configured for fast skinning.

Includes 8 different skins, each with a unique custom background. The PSD files includes a backgrounds file allowing you to create your own combination of any color with any background, or make your own in minutes.

My WordPress ($27)

My WordPress is a professional WordPress theme with the intent and focus on creating a community site. It is widget ready, print ready, page-navi ready, ad optimization ready, SEO friendly, smooth tabbing and dropdown using jquery, breadcumb integrated and many more!

Marketplace Community Wordpress Theme ($27)

Marketplace is a both clean and stylish WordPress theme with the intent and focus on creating a community site for industry news, tutorials, etc. This theme includes many popular built in features seen in today’s industry leading community sites. This themes comes with 5 different color options to choose from.

Sharp($27)

The Sharp theme is a widget ready clean, crisp WordPress blog layout with 4 color variations that is easy to customize and use.

Template features:

• WordPress 2.6 & 2.7 Theme
• Easy logo change
• Sidebar Widget Ready
• Valid CSS and XHTML 1 .0 strict
• 2 columns tableless fixed layout
• 4 PSD files
• Easy customization

WooiTuts – Advanced community theme($32)

WooiTuts is an advanced Wordpress theme for all of those ever wanted to create a cool Communtiy site, like an Tutorial blog, Tech blog or whatever type of blog you want to setup you can do it with WooiTuts.

Evolutionary Theme ($27)

Evolutionary is a clean, jQuery animated WordPress theme.

Features include:

• Four Color Schemes: Blue (default), Green, Red, Black (inverse)
• Featured Posts section: No plugins required.
• jQuery animations in navigation and sidebar
• Widget Ready Sidebar and Footer
• Featured Posts, Color Scheme, Copyright, and more 

Intersect – HTML Template (8 in 1 skins) ($17)

Intersect is a bold, striking html template with various layouts, colors and easy for modification. This theme is ready to get a site up an running out of the box. It is easy to customize and is configured for easy skinning.

Post It ($22)

Post It is a Wordpress Theme designed for all creative bloggers

Theme Features

• 4 characters / skins to choose from
• 960 Grid System
• Easy customization with theme options page
• RSS feed design integrated in header illustration
• Built-in 125×125 banner ads (managable in theme options)
• Widget ready

Filthy ($32)

Filthy is a personal blog theme that’s been through the ringer. This thing is just down right dirty! And best of all, it comes it 2 shades of filth – brown and black.

Related posts:

1. The Right Way To Build WordPress As A Community News
2. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content
3. WordPress Theme from Scratch – Day 3: HTML to WordPress

If you are stuck with your next portfolio design, you should consider to take a look at these portfolio interfaces that published recently. In this post, we have a collection of fresh and great portfolio design interfaces. All of them were hand-picked in DeviantArt where you can get inspiration everyday. Also check out others works of these authors for more interesting stuff.

Chocolate website by gbindis

Portfolio fotograficzne by shapemaster

ark design by raitei96

Portfolio by MannMitDerTarnjacke

Portfolio by jinukumar

Portfolio by Maelus

Portfolio by coWebdesign

Portfolio Nick van Beers by nickvanbeers

iWojtek.com Photography by wojtekww

Stylart by Razz94

New Folio Site by inspiredMark

Crixon Redesign by xkaarux

YourPortfolio by Rafanfsu

sense-design by webdesigner1921

Clean Portfolio Gallery by eXPerienceARTS

Personal Portfolio by andersson-marcus

Portfolio by coWebdesign

Graphic Design 3 Portfolio by LiciousDesign

Personal Portfolio by Pazdan

Designfolio by dzg

Web Interface by xkaarux

Creative Studio by bekyarov

Colone Portfolio by h1xndesign

New Grunge Portfolio by misht

Web 2.0 Company Portfolio by princepal

Designer portfolio by preet618

Folio V3 by byakuga

Paper Portfolio by deadlinesdesign

Portfolio by Calabur

Free OnePagePortfolio – Woody by preet618

Company Portfolio Web 2.0 by princepal

Gamer Portfolio by princepal

Sallee Design v1 by LeMex

WC Series 1 by preet618

Progress Template by mabucs

NicePFolio by mabucs

RudnickiWEB Portfolio by SnowyART

77 PIXELS by waterdesign

Light Design by deadlinesdesign

Design For A Drama Writer by princepal

Hope you like this collection and don’t forget to spread your love. Any comment and suggestion are appreciated.

Related posts:

1. 35 Fresh and Cool Web Design Interfaces for Inspiration
2. What Portfolio Designs Would We Continue to See in 2010?
3. Quick Tip: How to Get Great HTML Meta Tags

This is an old topic that has been covered by many other blogs and magazines–to the extreme, but it needs updating. I’m talking about how to highlight comments posted by the author of the article. The tutorials out there only work for one user ID for the whole site. That is a big mistake, as it didn’t allow for scalability — it only works when you are blogging on your own (and with only one account). We have given it an overhaul, and updated the code.

First, we should take a look at the code from the tutorials which highlight the comment based on the user ID:

.authcomment {
    background-color: #B3FFCC !important;
}

<li class=”<?php 

                if (1 == $comment->user_id)
                    $oddcomment = “authcomment”;
                echo $oddcomment;?>” id=”comment…">
                
                ...
                
</li>

To make it work on sites with multiple writers, we need to to get the ID of the author, then check if the ID of the person posting this comment is the same. If it is, we need to make it stand out. We still use the CSS class for post author comment.

.authcomment {
    background-color: #B3FFCC !important;
}

Now, we change the original code at the start of the article with this:

<li class="comment-container
    
    <?php
        $authID=get_the_author_meta('ID');
                                    
        if($authID == $comment->user_id)
            $oddcomment = 'authcomment';
        echo $oddcomment;
    ?>"  id="comment-<?php comment_ID(); ?>">
                                    
        ...
        
</li>

And, that’s it! We hope that you find it useful!

Related posts:

1. Quick Tip: How to Get Great HTML Meta Tags
2. 10 Useful Code Snippets And Plugins To Spice Up Wordpress Avatar
3. Wordpress Hack: Anything Can Be Added Anywhere In The Post Content

In 1996, Macromedia released their product called Macromedia Flash which is a vector-based animation platform. With Flash, web designers were now able to create animations using a timeline and vector design tools as a video. Furthermore, Flash was and still is a great solution for web designers to provide visitors smooth view in such small file size. The only thing that web surfers need to enjoy the sites using flash is to install Macromedia Flash Player.

However, with the arrival of JavaScript in 1997, there has been a war between Flash and JavaScript because Flash was afraid JavaScript would one day replace them with all the animation it supports. Why? Because a ton of JavaScript frameworks are becoming increasingly popular as a result of their high scalability, performance and usability. Some include jQuery, MooTools, script.aculo.us, Prototype, among others but especially jQuery, as of late.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. Although you may have enough Javascript skills to build your own Javascript code, using jQuery instead of can simplify the process (think hundreds of lines vs. a few lines of jQuery). Furthermore, there are thousands of plugins for jQuery published and large community support for this project. jQuery deserves being the heaviest competitor with Flash.

Why should we use jQuery instead of Flash

There are a bulk of differences regarding the benefits and disadvantages between these two guys, but in this article, we just list some their most important features.

First, in order to build an application using jQuery, you don’t have to purchase anything, but with Flash you have to buy Flash software to do the encoding. And Flash software could cost you $699 and no less than $199 to upgrade from older versions. jQuery and most other JavaScript frameworks cost you nothing to use (some jQuery plugins are not free for commercial usage). At this point, jQuery wins!

The second and the most problem with Flash is it isn’t available on the iPhone, and many other mobile devices. According to Adobe, 98 percent of desktop computers and laptops currently support Flash, but the truth is it’s not compatible with all browsers including those on the iPhone, iPad and cell phones. Unlike Flash, jQuery supports screen reader accessibility. By using accDND (a jQuery plugin), we can enable keyboard and screen reader which is an accessible drag & drop functionality plugin for jQuery. jQuery wins again!.

In the next comparison, we’ll consider using jQuery instead of Flash in its customization. jQuery and other JavaScript frameworks are built for easy development and customization.

Although jQuery wins Flash in some angles of problem, it cannot fully replace Flash in use. Where Flash fully supports 3D capabilities and many extensive features for object animation, jQuery is limited. Furthermore, jQuery UI is nothing compared with Flash’s built-in UI – That’s one reason for Flash’s price tag. Besides this, we get problems with proper font display. We can use any fonts on the web with Flash, but we cannot do the same with JavaScript, although we have a ton of tools and services available to help us to embed fonts in HTML page.

One other area to look at is video. This is where HTML5 comes into the picture — which is a completely different post in and of itself.

In most cases, though, jQuery can do better than Flash. From here, we’ll round up some tutorials and jQuery plugins that are simply awesome. Each of these teaches how to get a desired "Flash" effect, but with jQuery instead.

Tutorials

Building an interactive map with jQuery instead of Flash

This tutorial helps you build an interactive map with jQuery instead of Flash. It helps you build the markup for the maps and a couple of jQuery functions to make it all work. It’ll be an interactive map that shows some information and the location of the various Marine Science outposts across the state. Information of the the locations are represented by dots, and clicking them, will display an info box.

Animated Sharing Bar With jQuery & CSS

Using pure jQuery, we can make an animated sharing bar which will enable your website visitors to share posts on a number of social networks. It runs smoothly on all browser versions.

The youlove.us scrolling background effect explained

If you have checked out the design of YouLove.us, you would be excited with its colorful animated background. Here they explained how they created their beautiful animated background. The technique is very simple. It will scroll only the body background while every element above it is transparent.

Crafting an Animated Postcard With jQuery

Learn the basics of setting up a continuous animation with an illustrated postcard which Flash usually does. This tutorial is a good one for you to learn how to work with animation loop in jQuery and the easing plugin.

Building an Animated Cartoon Robot with jQuery

A tutorial on CSS-tricks to create an incredible animated cartoon robot. It was created by layering several empty divs over each other with transparent PNGs as background images. This effect simulates a faux 3D animated background dubbed the “parallax effect” originating from old-school side scrolling video games. This is one of the best examples of where jQuery is replacing Flash.

Cloud of Bacon

In this tutorial, you will be inspired with the camera effect. The tutorial runs multiple animations (of arbitrary duration) at the same time, queues animations and even animates complex properties like colors or clipping rectangles.

A Colorful Clock With CSS & jQuery

Here’s a colorful clock created with jQuery and CSS only. This is really an interesting post to check out. It’s not a tutorial about the jQuery animate() function, but the jQuery helps CSS animation property works correctly. I highly recommend checking out all of the Tutorialzine Tutorials for jQuery inspiration.

jQuery OS X Stack and Drop Stack

A sexy menu created using jQuery and CSS with OS X style docks and stacks navigation. It’s super lightweight (~1kb) and is a really creative “outside the box” method of navigation for a website. It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and saves lots of space.

Old School Clock with CSS3 and jQuery

Transform:rotate is a new feature of CSS3 which lets you rotate HTML elements. This tutorial will help you create an awesome “tick tock” clock that animates very smoothly. The jQuery code in this tutorial helps the clock get correct time information then inject all the CSS3 style for each element.

Making a 3D Engine in jQuery

Here they create a 3D engine that will allow us to create shapes simply by creating an array of points. This engine will have a Camera, a Scene and an Object. Perfect 3D cube in jQuery!

Puffing Smoke Effect in jQuery

An excellent tutorial features an impressive animation effect of cartoon-ish smoke which animates from factory smoke stacks. This tutorial provides a configurable jQuery plugin with instructions based on blog’s header of the author, so that you may create a similar animation effect for your website.

Plugins

jParallax

jParallax is a jQuery plugin that allows animation of simple parallax animations by animating the background-position of <div> elements.

jFlip

Create page flip using jQuery plugin instead of Flash. This plugins is useful for us to create the page flip effect that can be used in flipping page of a book. It could be a great idea for a comic book web site.

The Sexy Curls jQuery Plugin!

Another great jQuery plugin which lets you share in the beauty of the page fold. Remember in the past, we always use Flash to create this effect for ad slot. Today, forget Flash and try it with jQuery. Everything is the same except you’re not relying on Flash, guys!

Easy Slider 1.7 – Numeric Navigation jQuery Slider

This is really a nightmare with Flash because jQuery does it perfectly and even better than Flash does. There are a bulk of jQuery Slider Plugins out there, but Easy Slider is arguably the best one with a lot of features and options.

AnythingSlider jQuery Plugin

This is another awesome jQuery slider that comes with cool features. AnythingSlider is a plugin that was built to make implementing it and customizing it much easier than other plugins.

reel

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. It’s a great alternative to widely used Flash techniques.

Flot

Flot is a pure JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. Like Flash, this plugin provides smooth and attractive graph for simple uses with nice features, zooming and mouse tracking.

jCrop

jCrop is a powerful image cropping engine for jQuery. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

In conclusion

Although jQuery is a powerful JavaScript framework that can build many flash-like effects, it cannot fully replace Flash. However, jQuery is the stepping stone, helping bring the web closer to HTML5 and wider use of frameworks like Cappuccino (among others) for building non-reliant web applications.

If we are missing anything here, feel free to drop your line to make a friendly conversation. Any comment or suggestion is appreciated! What do you think? Will Flash last past this next decade?

Related posts:

1. 5 Fresh and Useful jQuery Plugins Were Born in November 2009
2. Don’t Miss Out Latest 10 jQuery Plugins Before Closing The Year 2009
3. Why Do We Love These 5 Fresh and Awesome jQuery Plugins?

Update: The icons used in this tutorial can be found free here.

There are many posts available detailing how to write your own jQuery plugin. It won’t take long before you realize that building in jQuery is very simple. Continuing in our jQuery Learning Series, here we’re going to build your first jQuery plugin. It’ll generate a bubble effect for your menu list and we’re going to call it BubbleUP.

What is BubbleUP? BubbleUP is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future. With this plugin, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation.

Implement jQuery

This is a plugin for jQuery, so we first have to implement the jQuery library in our webpage header (you must upload jQuery to your server or link to Google’s hosted version):

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

1. Choose a name

We will name this plugin as BubbleUP, but feel free to choose another name that suits you better.

In building a jQuery plugin, it’s recommended you write all the plugin code in one javascript file. Your jQuery plugin’s file should be named as: [Your-jQuey-Plugin-Name].jQuery.js, but if it’s too complicated for you, just name it as: bubbleup.js.

Now, we’ll start with a blank javascript file and begin with the following lines (the template for any jQuery plugin):

(function($){
    $.fn.BubbleUP = function() {

        return this.each(function() {

        });

    };
})(jQuery);

We named the plugin above “BubbleUP“, so we are going to define the name of this plugin by using this code:

...

    $.fn.BubbleUP = function() {

...

Because we have more than one item in our list, we have to use the each() function to execute the called function for every item in our list.

The first step is finished: creating the jQuery plugin template and naming it.

2. Implement jQuery Plugin to web page

Now you need to link the javascript file that you created above into your web page. For this, we’ll use this code:

<script type="text/javascript" src="js/bubbleup.jquery.js"></script>

To make the plugin work, we need to use this code below. You can insert it anywhere you want as long as it’s inside the <head> or <body> tags:

<script type="text/javascript">

$(function(){

    $("ul#menu li img").bubbleup();

});

</script>

As you can see in the demo, we are going to enlarge the image in the list. That’s why we use images in this menu as target elements.

3. Animate

Let’s write the skeleton of the code. We’re going to use the mouseover(), mouseout(), animate(), and stop() functions.

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).animate({

                        ...

                    });
                }

            ).mouseout(

                function () {
                    $(this).stop();
                    $(this).animate({

                        ...

                    });
                }

            );

        });

    };
})(jQuery);

This code basically says this: “Upon mouseover or mouseout, stop any animations that are currently active in this element, and start a new animation (which we’re going to define later)”. We need to immediately stop active animations first to prevent undesirable behavior. This function stop() will stop the animation before it starts the new animation. The function we are using to generate the smooth bubble effect is animate().

4. Build the menu

We need to build the menu using HTML. The menu is an unordered list, so it should be something like below. Notice this list has been simplified for this tutorial.

<ul id="menu">
  <li>
    <a href="#" title="Full RSS Feed">
        <img src="images/rss.png" alt="Full RSS Feed">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="images/email.png" alt="E-Mail Delivery">
    </a>
  </li>
  <li>
    <a href="#" title="Follow me on Twitter">
        <img src="images/twitter.png" alt="Follow me on Twitter">
    </a>
  </li>
  <li>
    <a href="#" title="I'm on FaceBook">
        <img src="images/facebook.png" alt="I'm on FaceBook">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="delicious.png" alt="Save it!">
    </a>
  </li>
  <li>
    <a href="#" title="E-Mail Delivery">
        <img src="images/technorati.png" alt="Favorite this blog">
    </a>
  </li>
</ul>

This HTML code is very simple. You need to create just one image for each item and the jQuery plugin will do the rest. The next step is the CSS.

5. Style the menu (CSS)

The following CSS is used to style the menu. There are two important things that you should notice: position for <li> elements must be set to relative because img elements inside it must be set as absolute. Absolute positioning for an element will not work if the parent is not set as absolute or relative.

The original size of the images is 48px in this tutorial, and the size when enlarged is 96px. That means the images will start animation at 48px and enlarge to 96px. Some margins and padding is in this css code below just make the list display better.

ul#menu {
    margin: 5px 0px;
}

ul#menu li {
    padding: 0px;
    display: inline-block;
    *display: inline; /* IE 7 and below */
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
}

ul#menu li img {
    width: 48px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0 8px 0 0;
    border: none;
}

6. Create the animations

This is the main part of this plugin. We will pass some parameters to the animate function.

First, I strongly recommended you re-read one of our previous articles,Bubble Effect with CSS. When you return to this post, you will understand why we need to enlarge the image and move it up and left the way we are.

As you can see, we need to re-size the images in menu to make it larger. The original size is 48px; the animate function will re-size it to 96px. Take a look in detail at the javascript code below:

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');
                }

            ).mouseout(

                ...

            );

        });

    };
})(jQuery);

We will place this image by using negative pixel amounts. The code above will listen for a mousehover() event. When the mouse is over the item, the item will be moved diagonally towards to the top left corner by 24 pixels and then also enlarged to 96px.

However, we have a few issues right here. The problem is the action for this image will cover the image next in the list. Thus, we need to set z-index for it by using css. We also need to reset the placements of all the images before and after the animation, because if the animation is not completed and we move the mouse out and over again immediately, the image will be moved once again diagonally towards the top left corner. We must understand that the amount of pixel this image animates base on the current position + (-24px)

The complete javascript code that helps the animation to work correctly:

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                function () {

                    $(this).stop();
                    $(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');
                }

            ).mouseout(

                ...

            );

        });

    };
})(jQuery);

We do something similar with the mouseout() event, but it has a few differences. Of course, the images must be placed back to the original position and re-sized back to the initial size. However, we need to call a new function when the animation is completed. The callback function is used to reset the z-index to the original.

(function($){
    $.fn.bubbleup = function() {

        return this.each(function() {

            $(this).mouseover(

                ...

            ).mouseout(

                function () {
                    $(this).stop();
                    $(this).animate({
                        left: 0,
                        top: 0,
                        width: 48
                    }, 'fast', function() {
                            $(this).css({'z-index' : 0});
                        }
                    );
                }

            );

        });

    };
})(jQuery);

7. Add option(s)

I know there some great tutorials out there help you make a jQuery Plugin with options supported, but this one is different. The difference is not the content, because there are many ways to add options to it, it’s just a change of the code format. The difference here is in the value of this plugin – it is not just a tutorial, but is actually useful.

In this part, I will help you add options for your menu BubbleUp. So, stop right here and think about the options we might require. How about the tooltip? We can add the tooltip for this over the top of each item when the mouse is hovering over it. Let’s begin!

First, write a draft for it, as a template. jQuery plugins should have default options and users will decide to use these options or not. Change the code to this template:

(function($){
    $.fn.bubbleup = function(options) {

        //Extend the default options of plugin
        var opts = $.extend({}, $.fn.bubbleup.defaults, options);

        //Initial the tooltip
        var tip = null;

        return this.each(function() {   

            //Set the option value passed here
            var $tooltip = opts.tooltip; 

            $(this).mouseover(

                function () {

                    if($tooltip) {

                        //Display the tooltip
                        
                    }               

                    $(this).stop();
                    $(this).css({
                        'z-index' : 100,
                        'top' : 0,
                        'left' : 0,
                        'width' : 48
                    }).animate({
                        left: "-=24",
                        top: "-=24",
                        width: 96
                    }, 'fast');

                }

            ).mouseout(

                function () {

                    if($tooltip) {

                        //Hide the tooltip
                        
                    }           

                    $(this).stop();
                    $(this).animate({
                        left: 0,
                        top: 0,
                        width: 48
                    }, 'fast', function() {
                            $(this).css({'z-index' : 0});
                        }
                    );
                }

            );

        });

    };

    //All default options go here
    //Must called
    $.fn.bubbleup.defaults = {
        tooltip: false
    }

})(jQuery);

When you mouse-over

This tooltip will display in the same way as other plugins. When you mouse-over, the tooltip will show up and when the mouse is moved away, the tooltip will be invisible.

Add this code to the mouseover() code block and inside the tooltip is this enabled condition:

if($tooltip) {

    tip = $('<div>' + $(this).attr('alt') + '</div>');

    tip.css({
        color: '#333333',
        fontSize: 12,
        fontWeight: 'bold',
        position: 'absolute',
        zIndex: 100000
    });

    tip.remove().css({
        top: 0, left: 0,
        visibility: 'hidden',
        display: 'block'
    }).appendTo(document.body);

  ...

}

We will not use any external CSS, but instead style the tooltip with JavaScript. This code will create a new tooltip which uses the value of the image’s alt attribute. We put it in the div tag to display, then put the tip at the end of the HTML document.

Next, we will display the tip:

if($tooltip) {

  ...

    //Get the width and height of current image item
    var position = $.extend({}, $(this).offset(), {
        width: this.offsetWidth,
        height: this.offsetHeight
    });

    //Get the width and height of the tip element                   
    var tipWidth = tip[0].offsetWidth,
        tipHeight = tip[0].offsetHeight;

    //Set position for the tip to display correctly
    //Postion: top and center of image        
    tip.stop().css({
        top: position.top - tipHeight,
        left: position.left + position.width / 2 - tipWidth / 2,
        visibility: 'visible'
    });

}

However, our image will scale from small size to big size when we mouse-over. If the tip won’t move together with the image, then one of them will be covered by the other. The one that would be covered is the one that has the lower value of z-index.

That’s why we need to animate the tip:

if($tooltip) {

  ...

   tip.animate({
       top: "-=24",
   }, 'fast');

}

When the mouse is away

When the mouse is away, the code is very simple. We just need make the tip visible. However, we should remove it then create and create another one when the mouse is over it again. That’s better than just setting it to be invisible.

if($tooltip) {
    tip.remove();
}

You’re done!

That’s all you need to make a jQuery plugin!

Please understand that this is just a basic version of BubbleUP and it still has some issues. If we are going to create a complete jQuery plugin, we should do more. Creating a jQuery plugin by yourself is very easy if you know the basics of jQuery, and it is easier if you are creating a practical plugin, like BubbleUP, to understand the steps.

Are you going to use it on your site? It is quite a smooth and simple menu, isn’t it? Tell us how you’re using it on your website in the comments and don’t forget to subscribe to the feed!

Related posts:

1. Learning jQuery: Horizontal Panel Sliding With animate() function
2. Who-Tweet Button: Fancy jQuery Plugin for Twitter
3. Why Do We Love These 5 Fresh and Awesome jQuery Plugins?

This collection is hand-picked from our feed subscription, from Whofreelance, and from other feeds. This tutorials collection focuses on web design, development and digital art from around the web that were published within the past week. Hope you enjoy this collection!

Create a realistic leopard fur typography in Photoshop

Using the default “Grass” brush in Photoshop, you can create an awesome fur typography from animal print. This is a nice and easy tutorial to follow.

Create An Editable Stitched Label Type Treatment

This Illustrator tutorial helps us create an editable stitched label type treatment. It’s really a worth-seeing tutorial for anyone who wants to learn Illustrator because it was written step by step and the tutorial is easy to follow.

Creating a Furry Possum in Photoshop

This is one awesomely hairy possum created in Photoshop. In this tutorial, we’re going to create the possum (one of the possum brothers) from the animated cartoon-Ice Age. AWESOME!

Create a Clean and Professional Web Design in Photoshop

This Photoshop tutorial will help us to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.

Creating Your Own WordPress Permalink Structure For Custom Content

Create your own permalink for WordPress in your own format without creating custom page: ‘http://wpvote.com/domain/www.domain.com/’. This tutorial is really useful for building a new voting website using WordPress.

How to show/hide a hidden input form field using jQuery

Nice tutorial and cool trick with jQuery to show/hide the hidden input field. The purpose of this tutorial is help us create a HTML form which hides the specific input field by default, then displays it when users choose an item from the list.

Pure CSS3 bokeh effect with some jQuery help

Using pure CS3 to create bokeh effect. Furthermore, with some help from jQuery, we can add some randomness in colour, size and position for the effect.

How to Pull Your Google Buzz with jQuery

This tutorial was published by us which contributed by Mike More. It helps you to embed your buzz stream into a website yourself by pulling your Google Buzz using jQuery.

How to Build a Custom Wordpress Theme from Scratch

This tutorial is not recommend for newbies but it’s helpful for someone who are familiar with WordPress code.

Coding a CSS3 & HTML5 One-Page Website Template

Not only because I am a big fan of Tutorialzine, but also all of tutorials from Tutorialzine are awesome, and this one is so. In this tutorial, author will teach us to make a HTML5 web template, using some of the new features brought by CSS3 and jQuery.

Share Feedback with Twitter and the Bit.ly API

Nice tutorial explains how to build a simple feedback system using Twitter and Bit.ly API. The tutorial will walk through the creation of a customizable “Tweet this” link that integrates the Bit.ly API and Twitter updates.

What’s the deal with this collection?

It focuses on web design, development and digital art tutorials around the web. We try to find great tutorials which have been buried in the mass of tutorials available today. If you like one of these tutorials, make sure you subscribe to them (and us)! If you have a good tutorial, and want to promote it here, simply submit it to Whofreelance.com Community News. We will take a review and publish it if we find it as useful.

Related posts:

1. Top Worthwhile Tutorials of the Week – #2
2. Top Tutorials Are Worth Seeing of the Week – #1
3. 15 Awesome Examples and Tutorials Slide Animated Menu

If you’re a movie fan, I am sure you’ll enjoy this collection of 20 beautiful movie/brand fonts. All these are free and I think they should be part of every designer’s font library. Enjoy!

Walt Disney Script v4.1

Insaniburger with Cheese

Harry Potter

Jurassic

Star Jedi Logo MonoLine

My PUMA

Yahoo

Terminator Real NFI

WillyWonka

Corleone

Ferro Rosso

Coca Cola ii

28 Days Later

Evil Of Frankenstein

007 GoldenEye

Heineken

Hollywood Hills

Homoarakhn

Burton’s Nightmare 2000

Lion kinG

More?

Hungry for more fonts? Check out some of our other font roundups. If you love fonts and you want to contribute one of your own font roundups, please get in touch with us!

Legal Nonsense: All logos and images are © Copyrighted or Trademarked by their respective owners. We claim no copyright or ownership over them.

Related posts:

1. 20 Fonts Ideal For The iPhone And Other Mobile Screens
2. 20+ Awesome handwriting Fonts for a beautiful design you SHOULD NOT miss
3. 30 Thin and Light Fonts That Should Not Be Free

Image editors have been around a while but we’re starting to see rapid growth of exceptional image editors which are all based online. If you haven’t used any of these yet, you’ll be surprised at the features they have and the speed they run at.

Though most of these are Flash-based, they all load really fast and work quite similarly to familiar editors like Photoshop and Illustrator. We also feature here some online applications built with Javascript which work just as well as the Flash-based apps.

Pixlr

Pixlr is a online photo editor that was built with Flash (Nathan uses this often). The interface is set up like some of the more popular image editors you’d find in a desktop application. It can be a bit hard to understand if you’re not used to this kind of photo editing software, so if you are used to applications like Photoshop, GIMP, Paint.net, Paint Shop Pro, etc you’ll find this editor quite easy to navigate. Pixlr even allows you to open PSD files.

Sketchpad

Sketchpad is a simple but great paint/drawing application for using online. Flash is not required because this application was built on Javascript & HTML5. Sketchpad is, in my opinion, the best online solution for users who want to make simple drawings but don’t want to install any application in their computers.

QueekyPaint

QueekyPaint is a unique drawing tool for creating animated drawings online. Like Fauxto (the most powerful online drawing tool before it disappeared for some reason), QueekyPaint has a unique interface to help users easily interact with it. All major functions and effects in Photoshop can be found in this application.

Splashup

Splashup comes with a fancy interface. It’s really a Photoshop-alternative application built by Flash only. Splashup is really great at handling layers and has all the popular effects of Photoshop. If you are a fan of Photoshop, this one would probably suit you well.

Adobe Photoshop Online

A web-based version of Photoshop. Although it is less powerful than the desktop version, it supports all its major functions.

Phoenix Image Editor

From basic image retouching to complex effects, Phoenix has it all. Beside the effects, the user interface is really nice too.

Raven Vector Editor

You can use Raven to create fully scalable vector art appropriate for logos or tee shirt designs. Raven, of course, is nothing compared to Illustrator, but it’s a good alternative to those who don’t have it yet.

Sumo Paint

Sumo Paint is a fully featured photo editing and painting application which is definitely tailored for drawing (just see all the examples on their homepage).

Myoats

Myoats is a must-try. This application allows you to create both simple and complex symmetric designs, shapes and patterns. The design will be created inside a circle. If you are finding a great tool for create pattern, Myoats is my number one choice.

Basic Editors and Drawing Tools

For basic online drawing tools and image editors that are similar to Paint in Windows and fit your basic and simple requirements, we have a few more options. (These are great for kids too!)

Artpad Art.com

Canvastic

AllMy Magic Wizcard

LunaPic Online Photo Editor

Fotoflexer

Pixer

Phixr

Picnik.com

And more …

There are plenty of image editors and drawing applications that you can work with online. Here are a few more usable and light-weight tools for your portable and minimalist works.

• Flauntr
• Flashpaint
• Pixenate.com
• editor.pho.to
• Preloadr
• Know of one yourself? Tell us in the comments!

All of these are completely free to use and you don’t need to install any software other than a web browser and Flash (which, of course, most people already have). However, with some of them, you don’t even need Flash as they run on Javascript and/or HTML5. If you’re using a modern browser, these are all ready available to you. If we’re missing any, drop it in the comment section!

Related posts:

1. Best of the best: 70+ Tutorials, Resources for Web Site Texture Background
2. The ways to create thumbnail image by php with thumbnail generators.
3. Marketcircle Giveaway Contest – Free Licenses For Professional Time Billing App