As someone viewing websites on the web, ad-blockers filter out adverts for “enhancements”, and a bunch of flashing, ugly advertisements. Not only this, but ad-blockers can help protect you from potentially sneaky and malicious code.

This is why one of the most popular downloads for Firefox is an ad-blocking extension.

However, have you thought about the reverse? What about the effect ad blockers have on your website or the sites you design for clients?

Is my coding style or design choices limiting what’s viewable to visitors because it’s being incorrectly identified as advertising content by ad-blockers?

Choose Your Class and ID Names Carefully

You may reason, “I don’t have to worry about ad-blockers because I don’t have any advertisements on my website”.

But do you really have to reason for concern?

While you may not have a single ad on your site, the names you give your classes and ID’s matter.

Classes and ID’s containing keywords like banner, ban, ad, advertisement, etc may get flagged incorrectly by a visitor’s ad-blocking plugin.

Important sections of information could never appear on the screen because of this.

Avoid:

<p class="panel banner" id="bannercontent1">Real content. Not an advertisement. But still blocked.</p>

Better:

<p class="panel section" id="section1">Real content. Not an advertisement.</p>

Remember, elements with classes and ID’s that contain any filtered keywords run a high risk of being blocked. In theory, an ID or class named ‘bandaid‘ may get filtered as an ad.

Safe Choices For Classes and ID’s

What are safe choices for classes and ID’s?

While there’s no way to know exactly what custom keywords people will add to their blocking list, a good rule of thumb would be to look at the keywords that are contained in the default filter list. This list can usually be found in the ad-blocking extension’s settings.

Avoid using classes or ID’s that contain any of the keywords on the filter list.

Choose Your Images Carefully

You should also pay attention to your choice of images.

Since ad-blockers cannot actually view the contents of an image, they identify advertisements by relying on both the image filename and image dimensions.

Image Filenames and Directories

Images that contain banners, ban, ads, advertisement, and so on in their filenames may very well get flagged as an advertisement and get removed.

You should also be aware of the directory names you choose. For example, using directories that contain words commonly used in banner advertisements are fair game for ad-blockers.

Image Dimensions

Your images’ dimensions matter. Images that have the same dimensions as common banner sizes run a high risk of getting wrongly blocked.

Common ad sizes (in pixels):

• 728 × 90
• 468 × 60
• 234 × 60
• 180 × 150
• 125 × 125
• 88 × 31
• 120 × 600
• 160 × 600
• 336 × 280
• 300 × 250

Source: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

If Unsure, Test

If you’re not sure, download an ad-blocking plugin for your browser and test your design before going live.

Whether you’re looking to learn PrestaShop, or you’re already working with it, this is for you. We’re sharing over 50 PrestaShop tutorials, modules, themes, and resources for learning and using this shopping cart system.

For those who are unfamiliar with PrestaShop, it’s an up-and-coming open source e-commerce system.

PrestaShop is still relatively new, but it’s a nice alternative to Magento or Zen Cart for small to medium sized online shops.

What Sets PrestaShop Apart?

One of the notable features of PrestaShop is that its code is much less bloated than Magento–meaning shops run much faster. Your server’s also less likely to melt down.

PrestaShop also seems to be getting updated a lot more often than Zen Cart. The latest update was just a few days before writing this.

Another thing that sets PrestaShop apart from other e-commerce systems is that the backend is pretty simple. It provides lots of control, but doesn’t seem as overwhelming the 1st time you login (view PrestaShop backend demo)

You can also disable certain sections and menus for other users who don’t need access to some of the more advanced features.

When trying out a new system, finding information and gathering resources seems to take the longest. We’ll look at PrestaShop tutorials, guides, modules and themes to help get your shop up and running as fast as possible.

Contents of Our Toolkit

• Getting Started With PrestaShop
  • Downloading
  • Installing
  • Setting up your online shop with PrestaShop
• Tutorials, guides and where to go to find answers to your PrestaShop-related questions
• PrestaShop Modules (shipping, payments, best practices, creating your own modules)
• Themes for PrestaShop (download themes or learn how to make your own)
• Hosted Option

Let’s dig in!

Getting Started With PrestaShop

There are a few obvious things that need did before diving into PrestaShop.

Downloading PrestaShop

This is the easy part. You can find the latest version in the PrestaShop Download section.

PrestaShop also comes in 32 languages that can be downloaded as language packs from the download section.

Installing PrestaShop

Installing PrestaShop is fairly straightforward and takes maybe 5 minutes once you upload the files to your server.

The PrestaShop Wiki is an invaluable place to start and contains an easy-to-follow install guide. The install guide also provides a list of server requirements.

Advanced users may want to take a look at the System Administrator Guide. This covers setting up PHP and MySQL configuration and setting up extra security for the PrestaShop backend.

Setup Your Online Shop With PrestaShop

The Wiki has a user guide section that gives a set of step-by-step tutorials to help you setup and configure PrestaShop’s shipping, payment modules, currencies, taxes, adding products and categories, and other general configurations.

I recommend following the tutorials in order since they’ll help you learn where everything is in PrestaShop. By the time you finish the first 6 steps, you’ll know your way around PrestaShop and you’ll have most of your store setup.

Additional Resources

• PrestaShop Tutorials (SiteGround)

Tutorials, Guides and Forums—Finding Answers

If you’re just starting out, you’re going to have questions, problems and issues that you won’t be able to figure out off the top of your head.

That’s okay because you can find answers and get help from others–here are a few official places to start:

• PrestaShop User’s Guide
• PrestaShop Official FAQ
• PrestaShop Community Forum

Unofficial Resources

Beyond the official PrestaShop guides and forum, you can also search for answers on sites like:

PrestaPortal
PrestaShop news, tutorials, general questions/answer discussions, tips, modules and related resources.

Hints and Tips (@ Free PrestaShop Modules)
The Hints and Tips section provides many useful PrestaShop tidbits.

PrestaShop Modules

Modules add additional features and functionality to your PrestaShop site–whether it’s on your store or in the backend. Installing modules in PrestaShop is very simple.

While PrestaShop comes with many modules by default, you can add modules created by others or create your own.

Finding New PrestaShop Modules

Here are a few places to find PrestaShop modules:

• List of PrestaShop Modules (@ PrestaPortal)
  A mega list of PrestaShop modules.
• Newly Released Modules (@ PrestaPortal)
  The place to look for announcements of new modules as they’re posted.
• PrestaStore
  Commercial modules for just about every need (shipping, payment, backend, SEO, shop enhancements, etc).
• eCartService.net
  Free PrestaShop modules as well as tips and tricks.
• Free PrestaShop Modules
  A large collection of free PrestaShop modules. The majority of the modules on this site are free, but there are some other commercial modules as well.
• PrestaShop Modules
  Nice collection of modules–some commercial, some free.
• Presta Modules
  Commercial modules, including a 1-page checkout mod.
• AGA Software
  Commercial modules: Price Adjustments, Blog Module, and Forum Module.

Shipping Modules

Here are some useful individual shipping modules for PrestaShop:

• USPS Postage Module
  Calculate postage for United States Postal Service based on zip code (US only).
• USPS Postage Quote Module
  Provide shipping quote by location right on the product page.
• UPS Shipping Module
  Should be compatible with the above USPS module.

Payment Modules

• Authorize.Net Payment Module
• 2Checkout Payment Module
• Western Union

Other PrestaShop Modules

• Better Together
  A great cross-promotion/combination discount module from That Software Guy. Lets you suggest other products that would go well with an item plus offer a discount. This is a port of his flexible Zen Cart module.
• Export Orders
  Exports orders to CSV.
• AddStuff
  Add custom bits and blocks to your PrestaShop site. Very handy for adding custom code to your side while allowing you the flexibility to move the blocks location (think WordPress widgets).
• AddHeader
  Works with AddStuff to let you add/remove stuff from your template without touching your actual theme files.
• YouTube Module
  Easily add YouTube and DailyMotion videos to your PrestaShop site.
• MailChimp E-Commerce 360 Integration Plugin
  Integrates MailChimp tracking and stats with PrestaShop and help you figure your ROI.

Writing Your Own PrestaShop Modules

eCartService.net has an excellent 5-part series of tutorials showing how to write your own PrestaShop modules:

• Writing a PrestaShop Module Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Module Editing Best Practices

One important thing to remember about editing modules and using custom themes: Edit the core PrestaShop files and modules only as a last resort.

eCartService.net once again comes to the rescue with some important tips for editing modules and module templates within the safety of your custom theme.

PrestaShop Themes and Templates

PrestaShop lets you change the look of your shop by applying visual themes.

You can also customize and create your own visual themes–transforming your e-commerce shop into whatever you can imagine.

Premade PrestaShop Themes

There several nice themes created by talented designers. Some are free, others paid, but at the most, you should be able to pick one of these up for $30-$40.

Here are a few places to go if you’re looking to download premade PrestaShop themes:

2 Link

Just about the 4 nicest, most modern free PrestaShop themes I’ve ever seen.

PrestaShopThemes.net

Some nice premium (commercial) PrestaShop themes starting at a reasonable $29. You won’t even recognize your shop with these themes.

I Love PrestaShop

Nice collection of free themes. These themes are very simple, clean and uncluttered.

Other places to find ready-made themes:

• PrestaThemes
  A collection of free PrestaShop themes.
• PrestaShop Themes
  A decent mixed collection of free and commercial themes.
• Themes at PrestaStore
  A large collection of quality commercial themes.
• Template PrestaShop (Updated 11/02/2009)
  A few commercial PrestaShop themes.

Create Your Own PrestaShop Theme

Wanna roll your own design? These resources will help you get started:

• Creating Your Own Theme (PrestaShop Wiki)
  Recommended reading before creating your own custom theme.
• Themes & Graphics Section (PrestaShop Forum)
  Get answers to your theme questions and learn about newly released themes.
• PrestaShop Themes and Guides
  Great tips, tricks and resources for trickin’ out your PrestaShop theme.
• PrestaShop Designer’s Guide
  Helps you work with a quick PrestaShop primer as well as jQuery and Smarty (PHP template engine used by PrestaShop) basics to help you design a great shop.
• ArdianYS
  Contains some useful tutorials and tips for customizing PrestaShop themes.
• PrestaShop Theme Cheat Sheet (JPG) (See full thread)
  Cheat Sheet showing main sections of a default PrestaShop page. Helpful when editing CSS.

Live PrestaShop Stores

PrestaShop has a section of their site dedicated to showcasing live online stores that use PrestaShop. If you’re wondering what can be done with PrestaShop, just take a look.

Hosted PrestaShop Stores

Do you just want to use PrestaShop and skip all the setup and maintenance?

PrestaBox might be just for you.

PrestaBox is a hosted version of PrestaShop that lets you start selling quickly.

Conclusion

PrestaShop is a nice, light-weight, fast open-source e-commerce shopping cart system.

While it’s still a bit young and may lack some of the more advanced features of Magento and others, it is a nice option for small to medium size online stores.

PrestaShop also has a great and supportive community that is continuing to grow.

Suggestions? Tips?

Do you use PrestaShop? Have you got a great tip or resource that we haven’t mentioned?

Share with us in the comments.

Follow On Twitter

Want to know when new blog posts are published? Want more random web and graphic design goodness?

You should follow me on Twitter @esdev.

Photo credits (in order of appearance): Red Toolbox by J. Helgason | Set of Vintage Tools by Timofeyev Alexander | Close Up of Old Books by Andrea Haase | Still-Life In a Studio of the Artist by S-BELOV | All stock photos from Shutterstock.

If you’ve changed the default WordPress admin user name from ‘admin’ to something else, great. However, if you write a post as the admin, your new admin username will be displayed on your blog. Not good.

In order to help you keep your admin username a secret from would-be hackers, I’m releasing a new WordPress security plugin: Admin Post Reminder.

How Does It Help?

The Admin Post Reminder plugin is useful if you’ve got a separate editor account just for posting.

Sometimes you’ll still need to log into WordPress as an admin to change settings, use certain plugins, etc. It can be easy to forget that you’re still logged in as an admin when you go to write a post.

What Does It Do?

What Admin Post Reminder does is simple–it checks to see if the user that’s logged in is an admin. If they are, an alert is displayed at the top of the page, reminding the user not to publish any posts while logged into this account.

Regular logged in users won’t see the message.

Download the Plugin

You can view the plugin page for more details or

Download Admin Post Reminder at the WordPress Plugin Repository

Buy Me a Coffee

If you enjoy this plugin, consider making a small donation–any amount is appreciated. Thanks!

When you’re building a website in WordPress and using it as a CMS, you’re going to have pages that you don’t want showing in your main site navigation/menu.

How do you keep those pages from showing up in your navigation?

Include and Exclude Specific Pages

There are several methods, but most of them require hard coding the menu to either exclude specific pages from the navigation…

Or including only certain pages like so:

<?php wp_list_pages('include=1,2,3,6,19' ); ?>

These methods work, but are impractical (at least for client work) because they’re not flexible enough.

What happens when you add more pages to the site, or want to add/remove pages in the nav?

Also, could you explain how to make the needed code edits to your clients? I don’t think so.

Use a Plugin

The fastest, most flexible and easiest to use method is to just use a plugin.

My choice is the Exclude Pages plugin from Simon Wheatley.

After you activate it, Exclude Pages gives you a new option on the write panel for each page—’Include this page in user menus‘.

The option is checked by default on all the new pages you create, so if you don’t want the page to show up in the navigation, simply uncheck the box before publishing, and it never shows.

It also removes pages that have already been published.

The Exclude Pages plugin is great because clients (and you) can easily choose which pages to include in the site’s navigation. Unticking a box is a whole lot easier to explain than editing code.

Use Bookmarks For Your Navigation

Another option is to use WordPress’ built-in links to create site navigation.

Justin Tadlock offers an interesting take on using links (blogroll/bookmarks) to create navigation.

This is a pretty creative approach, and it makes logical use of your blogroll.

The only downside I see is that, you’ll have to rework your theme to incorporation this technique—it’s not a quick, drop-in solution.

Do you have any other suggestions for removing pages from your WordPress navigation? Share with us in the comments.

Here’s a list of 15 free or inexpensive programs / online services for freelancers.

The list is broken down into 5 main categories:

1. Backup and Syncing
2. Finances and Invoicing
3. Communication and Project Management
4. Programs and Working With Filetypes
5. Graphics Programs

Backup and Syncing

Freelancers many times need to be able to work in different locations and have access to their files wherever they are. Having a good backup and syncing plan can help.

1. Mozy (Online and Off-Site Backups)

Mozy is a great service that, through an application for Windows and Mac OSX, automatically backs up your files and uploads them to their secure site.

In the case of an emergency, you can simply log into your account and download the files. You can also request a DVD(s) be mailed to you with all your files.

The MozyHome version lets you backup 2GB for free. Use our special link to get an extra 256MB of storage free. You can also get unlimited storage for about $5/month.

You can read more about Mozy in our previous post.

2. Dropbox (Online Backup and File Syncing)

Drop your files into a folder in your My Documents folder (or equivalent for your OS) and all the files will be updated and synced to any computers linked to your free account.

The great thing about Dropbox is that it works on all major operating systems–Windows, Mac OSX and Linux.

Sync your files between your home, work, laptop and other computers and as soon as they are saved, the files are uploaded for all your computers–whether they’re turned on currently or not.

Dropbox gives you 2GB of free storage. Get an extra 256MB free.

3. Xmarks (Bookmark backup and syncing service/plugin for Firefox, Safari, Internet Explorer)

This plugin and free service synchronizes your bookmarks (and site passwords if you want) between your browsers and computers. Xmarks (formerly FoxMarks) has plugins for Firefox, Safari and Internet Explorer.

You can even set it to only sync certain bookmarks to certain computers.

Finances and Invoicing

One of the least exciting and most dreaded parts of being a freelancer is managing finances. These next 2 services help you spend the least amount of time dealing with billing, invoicing and general finances.

4. CurdBee (Online billing and invoicing)

We already have written about CurdBee before, but it’s such a great service, it deserves another mention.

CurdBee is an online service that lets you create and manage invoices and accept payments via PayPal, GoogleCheckout and 2CO (paid version).

When invoices are created, your clients get to choose which payment gateway to go through to pay your invoice.

Simply click Send and a link to the invoice is emailed to you and your client.

CurdBee is free (no limits on clients or how many invoices you can send).

With the CurdBee Pro version ($5/month), you get extra features like recurring billing, PDF invoices, accept 2CO payments and some other niceties.

5. Mint.com (Manage your finances and spending)

Mint is a free service that lets you track checking, savings and other financial accounts and assets for your business. It provides an easy way to keep track of your spending, and reports can be emailed to you weekly.

Communication and Project Management

Freelancers often need to communicate and manage projects easily and while on the go.

6. Drop.io (Project management / file and document sharing)

Drop.io is a free service that lets you upload and share files via your browser.

With Drop.io, you can add images, documents, audio and video files for others to view (up to 100MB per drop).

Comments for each file can be added, so this works well as an easy means of working remotely with clients and getting their feedback.

Drop.io even provides special phone numbers for conference calls, voicemail and faxes. There is also a live chat option for simple chatting through the browser, and a web presentation option.

Drop.io can send alerts via RSS, email, Twitter, etc when new files and comments are added, making it great for organizing projects.

There are also several apps as well as a Firefox plugin that use the Drop.io’s API to connect and interact with your drop.

7. Zenbe (Check multiple email accounts from anywhere)

Zenbe basically lets you check and manage emails from all your email accounts through your browser without going to several different sites.

Emails can be easily and automatically tagged so it’s simple to keep track of which messages came from which account.

Zenbe also has a collaboration tools (ZenPages/ShareFlow). You can also import existing address books, and integrates with Google Talk, Twitter and Facebook.

Though the free account option doesn’t seem to exist anymore (I got mine early on), paid accounts start at $5.99/month.

To learn more, you can read our earlier post about Zenbe.

8. Collabtive (Project management)

Collabtive is an open source, self-hosted project management system (cloud-based groupware).

Manage projects, tasks and milestones easily with a simple web-based interface.

Collabtive provides messaging and instant messaging, file management, time-tracking, iCal syncing, can import Basecamp files and is available in over 25 languages.

Programs and Working With Filetypes

9. OpenItOnline (Open and edit files online without having the program installed)

With OpenItOnline, you don’t have to have a bunch of proprietary programs and applications installed on the computer you’re using in order to view and edit files. No more having to have Microsoft Office installed just because a client sends you a .doc file.

Open and edit documents, spreadsheets, presentations and images within your browser with OpenItOnline.

There are even extensions for Firefox, Flock and Internet Explorer.

10. PortableApps (Carry all your programs with you on your thumbdrive)

PortableApps lets you install and run portable versions of programs from a thumbdrive—giving you access to your programs no matter what computer you’re using.

11. LOOP Apps (Online PDF creator)

LOOP Apps is a free online tool lets you upload and convert files into PDF format, or convert a webpage into PDF. Your files can be sent to others and electronically signed.

Also worth checking is Zamzar.

Online Graphics

Whether you’re a web designer or a graphic designer or some other type of freelancer, there’s a good chance you will need to do some, at least basic, adjustments to photos and images.

12. Picnik (Basic online graphics program)

Picnik is a simple to use web-based graphic editor. Picnik is perfect for resizing images, adjusting colors, tone, contrast and applying other effects to your images and photos.

Picnik works with Flickr, PhotoBucket, Picasa and many other image sites; letting you share your images with others, are well as save them to your computer.

Picnik is free and you don’t even have to sign up for an account to use it.

Our previous post has more details about Picnik.

13. Smush.it (Online image optimizer)

Smush.it is a free online tools for optimizing (shrinking file sizes) your images. Simply upload or provide the URLs of the images you want shrunk and Smush.it will take care of the rest.

This can even shrink images that have already been optimized in Photoshop and Fireworks–all without noticeable hits to image quality.

14. Sumo Paint (Online graphics manipulation / Photoshop alternative)

If you need more than just simple image resizing and color correction, Sumo Paint steps up to handle the job.

Sumo Paint 1.1 is almost like using Photoshop. The only differences: it’s free, and it runs in your web browser.

Sumo lets you import images from your computer or a URL, or you can create a whole new image from scratch.

You have all the basic tools found in Photoshop: you can create layers (with blending modes and layer effects), typography control (leading, tracking), and much, much more. In fact, if you’re familiar with Photoshop, you’ll be using Sumo like a pro in no time.

Your resulting work can be saved to your computer, emailed or saved to your Sumo account if you’ve signed up for one.

15. Pixlr (Graphics manipulation / Photoshop alternative)

In a similar vein as Sumo, Pixlr is a good alternative to Photoshop.

There are many things you can do with and to images, just like you can with Sumo, so we won’t go into much detail here. For more details about Pixlr, take a look at our previous post about Photoshop alternatives.

When you’re building a new WordPress site or reworking a previous design, there are bound to be problems or issues that need solving. Some require rolling up your sleeves and coding your way to a solution. But sometimes plugins can do the job much easier and come in quite handy.

Here are just 5 of the problems I came across on some of the blogs I’ve designed and the WordPress plugins I used to solve them:

1. Easily Add CSS Styles From Your Stylesheet to Posts
2. Automatically Shorten Long URLs in Comments
3. Making Regular, Automatic Backups of Your WordPress Install and Database
4. Don’t Ping Yourself When Linking to Your Own Posts
5. Provide a Version of Your Site For Mobile Users

Note: Unless otherwise stated, all the following plugins work with WordPress 2.6 and 2.7+

Easily Add CSS Styles From Your Stylesheet to Posts

Problem: The Styles dropdown list in WordPress only contains WordPress-specific classes. I needed the ability to select styles from my existing CSS stylesheet when writing posts or pages. For example, I have a class for my captions.

Solution: TinyMCE Advanced

After a little searching, I came across TinyMCE Advanced—a set of plugins that covers quite a few things when it comes to editing and formating your posts.

Among other things, with TinyMCE Advanced you can rearrange your buttons and automatically import styles from your stylesheets. Now, when I use the Styles dropdown, I get a list of all my classes—not just WordPress-specific ones.

Automatically Shorten Long URLs in Comments

Problem: Someone leaves a comment on your blog that contains a URL that’s too long. This can cause serious issues, such as overflowing text and dropped floats, not to mention it just looks ugly.

Solution: WP Chunk

WP Chunk shortens long URLs in comments into short, manageable ones, thus saving your visitors from having to deal with the heartbreak of nasty, long URLs.

Making Regular Backups of Your WordPress Install

Problem: I’m lazy…when it comes to backups. I think this is a fairly common problem. You want to make automatic backups of your database and WordPress files.

Solution: WP-DBManager

With WP-DBManager, you can schedule automatic backups and they will be saved to a directory on your server as well as gzipped and emailed to an email address of your choosing.

I have mine set to go to my Gmail account which I check via Thunderbird. This way I have a copy on my server, a copy on my computer from my Gmail account and 1 more copy saved in my Gmail account online.

WP-DBManager also allows you to set a certain number of backups to be kept on the server. After the number is reached, it will delete the oldest backup.

In addition to scheduled backups, you can also do one-off backups when the need arises.

Don’t Ping Yourself

Problem: In order to keep a well-connected blog, I often link to posts that I’ve already published. Unfortunately, by default, WordPress adds a trackback on the original article. This is redundant and uglies-up your comments area.

Solution: Use No Self Ping to stop unnecessary trackbacks.

Provide a Version of Your Site For Mobile Users

Problem: You want readers that are using mobile devices and cellphones (iPhone, etc) to be able to view your content. How do you do this without creating another version of your blog yourself?

Solution: Use Mobilize by Mippin

Mobilize by Mippin is actually a plugin that works with a free online service called Mippin.

On Mippin’s site, you enter your site’s address and customize the look. Mippin will generate a mobile version and only serve it up to those coming to your site on mobile devices. Very handy.

The Mobilize plugin also works with Mippin to get content from your RSS feed and display it nicely, no matter what device you’re using. There’s no configuration needed for the plugin either—just activate and enjoy.

What Worked For You?

WordPress has tons of great and useful plugins available and I’ve been able to use them to solve most any problem I’ve come across.

What problems have you come across and what WordPress plugins have you used to solve them?

Using It’s All Text in Firefox 3 on Ubuntu

How do you keep your code properly indented when you’re coding in a textarea?

Spaces are no good, Tab just jumps you out of the textarea. Even good old copy and paste doesn’t work—even from Notepad without having to copy and paste the entire textarea back and forth.

When writing posts in WordPress, you’re not really dealing with a ton of actual raw code that needs formatting. But what about when using the theme editor or editing code in ExpressionEngine?

How can you keep your code from being all jumbled and akimbo when editing in a textarea?

Plugins To the Rescue!

2 browser plugins—Saft for Mac/Safari users and It’s All Text for Windows and Linux Firefox users.

Both plugins do the same thing: Edit the text in any textarea in an external editor of your choice and then save the text back to the textarea.

It even gives you a nice AJAX-like update glow in your textarea to let you know it made the update.

Macs

Saft is a useful developer plugin for Safari. One of its many features is that it can link your textareas to an external editor like TextMate or Coda.

Windows and Linux

For Windows and Linux, there’s It’s All Text, a plugin/add-on for Firefox, which does the same thing. You get to pick virtually any program as the external editor. In Windows, I have mine set to use Notepad++, and in Linux (Ubuntu), gEdit.

To edit the contents of a textarea, just hover your mouse over the textarea and a small purple button will appear. Click it and it launches your external editor with the content from your textarea loaded.

The only slight weirdness with setting up the plugin is that after installing the add-on the first time and restarting Firefox, you will need to choose which editor you want to use. Then, you must restart Firefox again before it will save your changes. Once that’s sorted, it works just fine.

If you’re a Mac user who doesn’t want to shell out for Saft, you should be able to use It’s All Text with Firefox on Mac, but it takes a little extra work to get it set up.

The great thing about these plugins is that they work with just about any regular textarea on a page, so you can use them in ExpressionEngine, WordPress or any other CMS or website that allows editing or posting via textareas.

They’re also useful when posting long-winded comments on blogs or forums.

Other Useful Plugins?

Are there other browser plugins that you use when developing in ExpressionEngine or WordPress? Leave a comment and tells us about it.