Code by CSS Tricks

Now that CSS has become so extensive and fully implemented, web browsers extensions are unmissable if you regularly work with HTML and CSS. Extensions have become a standard in most developers their browsers, that there are even more niche ones like for JSON, jQuery and SQLite.

I collected the most used web developer extensions for all 5 main browsers. I'm not an Opera or Internet Explorer user, so I might have missed a good one. Firefox is my main browser and Chrome secondary. I don't use Safari either, only for testing. I would love to make Chrome my main browser, but I can't find a nice theme for it, like GrApple which I use with Firefox.

Whether you work with code everyday or not, these extensions are a must in your browser, they'll save you some headache along the way.

Firefox 4

Web Developer

Firebug

Screengrab

It will capture what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images - either to a file, or to the clipboard. It captures Flash too!

SQLite Manager

JSONView

View Source Chart

Firepicker

Simple color picker plug-in for Firebug.

Safari 5

Validator

This is an extension to validate your (X)HTML, CSS and RSS feed with the Unified W3C Validator (Unicorn).

User CSS

User CSS is a Safari 5 extension that will easily enable you to override stylesheets for any web page for anything—from changing fonts, colors to hiding ads and more!

Safari Developer

Safari Developer implements features like window resizing, element highlighting, stylesheet disabling, markup validation (and much more).

Chrome

Web Developer

Firebug Lite

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.4 multi-line scripts in the context of the current web page.

Eye Dropper

Resolution Test

Opera

Firebug Lite Button

Validator

HTML5 Outliner

JsonViewer

Formats and highlights JSON data loaded from file or server.

Internet Explorer

Internet Explorer Developer Toolbar

Web Accessibility Toolbar

Firebug Lite

As a web designer and developer, I'm often tasked with selecting the best web hosting plan for our clients. Today I want to take a look at some web hosting options, and what you need to consider when choosing one for your particular client.

Shared

What it is:

The most basic of all hosting types, you're paying for "shared" space on a server managed by someone else.

Pros:

• Most affordable option. You can get good shared hosting for $5 to $10 for a single account.
• No hassles. No worries on managing your account, the company will do it for you.
• Could be all you need- for now. If your client doesn't expect to get thousands of hits just yet, starting off on shared hosting might be a good choice. Choose a good, reputable company that will allow you to "grow" through upgrades.

Cons:

Shared hosting is limited, and because you're essentially sharing one file system with hundreds of other accounts, it's less secure.

VPS

What it is:

VPS stands for Virtual Private Server and while it is technically "shared" hosting, since you're on a server with other people, it's set up like a dedicated server, hence the "private".

Pros:

A VPS is more secure than shared, and more affordable than dedicated. The account owner also has more power over the account, with the ability to implement secure server configurations, and- of course- root access.

Cons:

You need to know at least a little bit about managing a server- or at least you did in the past. These days, there are many Managed VPS packages that has the web host company doing everything (maintenance, upgrades) for you.

Reseller

What it is:

Reseller packages are popular among business-minded web developers. It usually works this way: rent a large amount of space, market it and resell it to your clients. Different companies have different reseller options, such as white label branding and included tech support.

Pros & Cons:

No worries about setting up or configuring a server- as a reseller, think of yourself more as a marketing arm of the web hosting company, reselling their products. For that reason, you should resell for a reputable host that you believe in and have a good relationship with.

Dedicated

What it is:

One server, completely "dedicated" to you.

Pros:

Obviously, the most secure option of all. A good choice for mission-critical sites, and for those expecting a lot of traffic. Lots more power.

Cons:

With great power comes great responsibility- so unless you opt for a fully-managed account, expect to spend time managing and upgrading your server yourself.

Cloud

What it is:

In all of the above, hosting is done on single server setups. Here, the account is hosted on multiple servers, promising more processing power and the ability to "scale" up anytime (by adding additional servers).

Pros & Cons:

Because of the way it's set up (think Google), cloud-hosting offers the most power of all, and it should be the answer for mission-critical sites. Its scalability also means that prices can vary widely from very affordable to very expensive. There are concerns about security and privacy.

How do you choose web hosts for your clients?

Because, with a product as aesthetically pleasing as the iPad, you just know it's something that designers will be naturally drawn to- especially with apps like these to help us do better work.

Sketchbook Pro

Can eight bucks really get you a "professional-grade" graphics program? Apparently so. I've tried the iPod Touch version of the app, and was blown away by its ease of use and powerful features. The iPad version is an upgraded version, with things like a better color wheel and more brush options. Sketchbook Pro is $7.99 at the App Store »

OmniGraffle for iPad

At $49.99, this app isn't exactly cheap- but if you've ever used and fallen in love with OmniGraffle, you'll know that it's worth every penny. Having OmniGraffle on your iPad will open up a world of touch-screen possibilities, allowing you to do everything from creating flowcharts to wireframes, and sharing them via email as OmniGraffle documents or PDFs. OmniGraffle for iPad is $49.99 at the App Store »

PCalc Lite Calculator

A calculator is something I personally use all the time in web design, for everything from grid-based designs to calculating font weights. The PCalc Lite is a scientific calculator, so it has a lot more features than I need, but who's complaining? It's free. PCalc Lite Calculator is FREE at the App Store »

Voice Memos for iPad

A must-have app, and not just for designers or creative people. This one lets you record audio using the built-in mic, a headset, or external mic. You can tag your memos, time them, set audio levels, and pause and play them. You also have the option to send the voice memos by email for a fee. Voice Memos for iPad is FREE at the App Store »

FTP On the Go Pro

Finally, if- like me- you transfer files via FTP almost daily, you'll love FTP On the Go Pro. The iPad version includes the option to view and edit multiple files in one go and (naturally) full-screen. Supports CHMOD as well, so you can set permissions wherever you are (that I am excited about this prospect says a lot about me, I think). FTP On the Go Pro is $9.99 at the App Store »

What iPad apps do you use as a web designer or developer?

That's right, I've gotten hired for projects via Twitter. This means that Twitter has actually made me money. Hey, they don't call it a "bluebird of happiness" for nothing!

Today, I want to show you five things you can do with Twitter that you might not be aware of. Twitter itself is a very simple service, but one of the reasons it's become so popular is that there are so many things you can DO with it.

Write longer tweets with BiggerTwitter

Does the 140-character limit frustrate you? I know I have a tendency to chatter away a little too much, but 140 characters never seem to be enough for me. Luckily, there's the BiggerTwitter service, which lets you post longer messages and simply linking them to your tweet.

Know when you're mentioned in a tweet with TweetBeep

If you regularly Google your own name, you'll love this service, which alerts you whenever you're mentioned on Twitter. It works with shortened URLs like tinyurl and bit.ly as well.

Schedule tweets with Social Oomph

Pre-writing tweets might seem to defeat the purpose, but if you manage several Twitter accounts or use it primarily for business and promotions, a service like Social Oomph is great. There's a professional version, but the free version is pretty powerful on its own, allowing you to schedule tweets and do other things like tracking specific keywords, save and reuse drafts... even do reciprocal unfollows (unfollowing those who unfollow you).

Learn more about your followers with ChirpStats

Formerly known as TwitterLess, a service that alerted you whenever people unfollowed you, ChirpStats is a lot more positive, which I like. It still tracks your "unfollows", but its new analytics service gives you a picture of your current followers as well.

Access your Google Calendar with TwitterCal

I've admitted my dependence on Google's services before, which is why I absolutely adore TwitterCal. It works exactly like it's supposed to: simply follow @gcal, submit your Google Calendar details, and add events to your Calendar with a direct message, like so:

d gcal dinner with geraldine on thursday, 1st of april at 7pm

Bonus: the Nudge command

NUDGE is a command that sends a reminder to one of your friends to update their Twitter. When my friends and I were new to Twitter, we used this quite a lot- we hadn't gotten into the habit of updating our statuses, and with many of us in various places around the world, we loved knowing what the others were up to at any given time. Simply send "NUDGE username".

Do you use third-party Twitter services?

Moderate WordPress Comments

Moderator (Mac, Windows, Linux)

This Adobe AIR app lets you view and manage comments on your WordPress-powered blog. You can choose to accept or delete unmoderated comments, or mark them as spam. The app will also notify you (on your dock or system tray) of the number of pending comments you have. Comes with a WordPress plug-in.

wp-comments-notifier (Windows)

This open-source app works much in the same way as Moderator, but it's written in QT/C++ and allows you to reply to and edit your WordPress comments as well as manage them.

Write & Manage Blog Posts

Blogo (Mac)

I only blog using my browser (but that's because I'm a bit of a control freak)- but I used Blogo's 21-day trial and really, really liked it. Mostly because of its friendly user interface, and its Whiteroom-like "clean screen" for blogging without distractions.

Windows Live Writer (Windows)

For blogging when I'm on Windows, my app of choice is Writer from Windows Live. It supports WordPress, Blogger, LiveJournal and TypePad, works smoothly, and has a good Windows-y feel to it. The best thing about Live Writer, though, are its plug-ins, which allow you to do things like insert content from your existing Facebook or Flickr accounts.

Monitor Your Website(s)

Website Monitor (Google Gadget)

My favorite desktop web monitoring apps are Google Gadgets, and this is one of them. It's basic, simple to use, and just works, monitoring the response time and content of your website, and automatically notifying you of any problems.

Do you manage your websites from other desktop apps?

Now, of course, I can't imagine going a day without checking Twitter. Web application developers know this, and as a result we have hundreds of Twitter-related apps available to us out there. Here are my favorite five:

Tweetwally

One of the reasons Twitter can be such a time-sucker is because you usually have to weed through hundreds of Tweets, finding those you're interested in at any one time yourself. Tweetwally is a nifty little service that makes it easy to track specific tweets based on hashtags, usernames or keywords. That may not sound like much, but Tweetwally has some great search operators, for example:

traffic ? will find tweets containing "traffic" and asking a question.
"happy hour" near:"san francisco" will find tweets containing the exact phrase "happy hour" and sent near "san francisco".

The Twitter Tim.es

If, like me, you're a frustrated publisher, you'll love what The Twitter Tim.es does: it generates a "real-time personalized newspaper" from your tweets. For example, see Tim O'Reilly's Twitter Tim.es Newspaper.

TweetNotebook

In the same vein, TweetNotebook publishes your tweets in a whole new way- but takes it a step further, generating a real paper notebook that features one of your tweets on each of its pages. Simply submit your Twitter username, select a cover design, and it's ready to go (cost is 12 euros). I adore this.

Tweeterate

Like to rate stuff? How about your friends' tweets? Tweeterate lets you rate other people's tweets as "useful, funny or lousy"- then see a list of your most "annoying" friends based on your ratings, and then choose to hide them if you like. It's a bit of silliness, really, but I have to admit I clicked through to some of the top-rated tweeters listed here and found a few of them useful.

Tweets of Fury

This one's even more pointless (it is, after all, brought to you by Pointless Corp.), but can be fun and is certainly one of the more creative Twitter-related apps I've seen. You can challenge your friends to a battle, submit "scandalous information about each other", then play rock, paper, scissors (yay!), and- if you lose the latter- deal with having the scandalous info about you publicly posted on Twitter.

What Twitter web apps do you use?

Montastic

I've been using Montastic for several years now. I like how it's simple to use, and does exactly what it says: monitors your sites for downtime. Its free version checks your website every 30 minutes, which is fine for most of my needs. Checking is made from many (US) locations, and the IP numbers of their checkers change "on a regular basis". A good and solid choice.

Mon.itor.us

I only recently discovered Mon.itor.us, but have already embraced its powerful (and free!) service wholeheartedly. Its interface isn't too pretty, but when I said "powerful" I meant it- Mon.itor.us will track your site's uptime (including averages), response times, and visitors. You can build widgets to place on your website, as well.

LinkPatch

There are lots of similar services out there, but LinkPatch is hands down my link checking service of choice. It constantly monitors your site(s) for 404 page views, including links from external sites and out-of-date links you forgot to redirect. It also takes into consideration things like common user misspellings, then automatically emails you details on who got the error, where they came from, and what they were looking for in the first place. Plans start at $10/month, but there's a free plan if you only need the service for one site.

How do you monitor your sites?

Today, however, I want to show you some other choices for email marketing. Some have been around a long time, and some are fairly new- but all of them are awesome. See for yourself:

Campaign Monitor

This is another service I am constantly recommending to friends, family and clients. Campaign Monitor, the flagship product of Australian company-I'd-most-like-to-work-for Freshview, is sleek and powerful and does everything you'd expect from an email marketing tool- and then some. They have plugins & extensions for everything from WordPress to Shopify, a whole library of articles and tips on email marketing, and some of the nicest-looking email templates available. There are no setup or monthly fees- Campaign Monitor charges a flat delivery fee of $5, plus 1 cent for each recipient.

EmailBrain

EmailBrain, which was bought by Dotster two years ago, is a good, solid service that's chock-full of features, such as some very robust reporting such as unique vs. total links clicked, or how many people chose to forward the email to a friend. Their "Periodic Plans" provide you a certain number of "credits". The smallest plan, for example, is $9.95 a month for 2,000 credits. That means you can email 2,000 contacts once a month, or 1,000 contacts twice a month, or 500 contacts four times a month, and so on.

LetterPop

I love how you don't need to sign up for LetterPop to try out their email newsletter builder, 289 templates (at last count) that can be dragged and dropped and edited to your heart's content. It does seem that they've gone to great lengths to simplify the process of email marketing for users, with nice touches like Flickr integration. They currently have five easy-to-understand plans, starting with a free plan of 10 newsletters a year to 25 subscribers.

Mad Mimi

Of all the email services I've listed here, Mad Mimi has got to be my favorite- and not just because of their adorable big-haired, horn-rimmed-glasses-wearing mascot, but because it's an absolute gem of a service. Easy to use? Undoubtedly. Powerful? Amazingly. Gorgeous themes and templates, truly useful tracking reports.. can you tell how much I like this service? They offer four monthly plans, starting at $8 for 500 contacts, as well as a free plan of 100 contacts.

Nouri.sh

Nouri.sh is a little different from the other services I've listed here: they offer blog-powered newsletters, which means that they basically take your RSS feed and convert it to a newsletter. Which also means that you don't have to create separate email newsletters at all, yay! I'll admit that at first I was worried about how the finished emails would look, but thanks to some good customization and branding options, they look just fine (note: the free plan does not include custom templates). More than fine, actually. But one of the things I like the most about Nouri.sh is their WordPress plug-in, which among other things will allow you to add a quick subscription widget to your blog and track the number of subscribers and campaign data. There are five plans available, including a Free plan that includes up to 1,000 emails a month.

What email marketing services or tools do you use or recommend to clients?

Now I'll admit: it was a fresh copy of The Sims 3: World Adventures, which runs much better on Windows than OSX, that got me here- but now that I am, I want to be able to do serious work on my Windows partition- with the help of these five apps, all fabulous and all free:

Notepad ++

A good text editor is probably the first thing I install on any new machine. Notepad Plus Plus has everything I need, from tabs to drag 'n drop to macro recording. I love how lightweight it is, too- nothing fancy, but gets the job done wonderfully.

XAMPP

This was a no-brainer: with the heavy local WordPress testing I do, I use XAMPP on my Mac every day. That this gem of an app, which includes Apache, MySQL, PHP and Perl, comes in a Windows version is something I'm truly grateful for.

WinSCP

Many people like Filezilla, a powerful and free FTP program, but I've always had a thing for WinSCP- it reminds me of back when I was doing all my work on a Pentium II (and paying a lot of money for 5 gigabytes of hard disk space!) It supports SFTP, has an integrated text editor, and stores your session information.

PHP Designer (Personal)

Among these apps, PHP Designer is my latest "discovery"- and now I have trouble imagining how I ever got along without it. It's an IDE (or Integrated Development Environment) that makes PHP coding- even for non-programmers like myself- a breeze. It features a clean and simple interface, and wonderfully intuitive menus.

ScreenHunter Free

On OSX I rely on Snapz Pro X for my screen capturing needs, and was ecstatic to find ScreenHunter, a free and truly fabulous screen capture program for Windows. Installs in seconds, and does its job beautifully, allowing you to do everything from choosing what to capture, to where to save it, and more.

What are some of your favorite freeware apps?

• Google Chrome (Win) and Firefox (Win / Mac)

  First up: portable browsers. Have these on your USB stick, and you'll never be forced to use IE again.

• Gimp Portable (Win / Mac)

  What I like most about Gimp is how easy it is to learn for someone accustomed to Photoshop. It installs easily, is very well documented, and is a powerful image editor. (If Gimp is overkill for your needs, check out my recent feature on online photo editors).

• Inkscape (Win / Mac)

  Most designers are more dependent on Illustrator than Photoshop, which is why Inkscape, an Vector Graphics Editor, is such a killer portable app. It may not be as powerful (yet) as other Vector Graphics applications, but it will definitely get most jobs done- and it's Open Source.

• Filezilla (Win) and Cyberduck (Mac)

  I'm not sure what it is, but I always seem to forget to keep portable FTP programs with me- this in spite of the fact that my FTP program is probably the top third most-used application in my daily workflow. Filezilla, fast and powerful, is good for Windows- and for Mac my choice is the Open Source Cyberduck.

• OpenOffice (Win) and AbiWord (Mac)

  Because most of my clients send me content in Microsoft Word documents, I always have either OpenOffice or AbiWord, both free apps which support MS Word docs, on hand. If you haven't looked at OpenOffice lately, check out all the new features that make this office suite a true contender. Of course, you can always use Google Docs, although I've found that the latter won't open some Word docs for me.

• Nvu HTML Editor (Win / Mac)

  For emergency HTML editing, you can't go wrong with Notepad, of course- but an app like Nvu is nice as well. I like to think of Nvu as somewhere in between the plainness of Notepad and the powerfulness of Dreamweaver. *Note: Apparently, Nvu Portable is no longer being updated. Try KompoZer (here or here) instead. Thanks, Uri!

• SyncPAppX (Mac)

  Finally, I couldn't complete this list without mentioning SyncPAppx, a nifty little app (for Mac users) that synchronizes Portable Safari, Portable Mail, Portable iCal, Portable Address Book, and Portable iChat to the ones on your local machine. It syncs user preferences for all these apps, which makes for a lot less headache.

Do you use portable apps?

Picnik

Picnik tops the list for me. It's quick, easy to use, and powerful. As you can see from the screenshot above, it sports a clear, intuitive interface, and is great for everything from quick cleanups to more complicated jobs. I've only ever used their free version, which is powerful enough for me, but they offer a Premium plan from $2.08 (?) a month which includes a lot of extra features.

FotoFlexer

I love how quick and easy it is to upload to FotoFlexer- in seconds I was editing my cupcake photo. Their options are numerous- allowing you to crop, adjust hue, saturation, brightness and contrast, and apply fun "effects" to your photos- including borders, such as the one I chose here. If you're feeling particularly groovy, FotoFlexer offers animated star "stickers", and the ability to twirl, bulge or squish your photos. But the best thing about them has to be their "Geek" tab, which features advanced options such as Smart Recolor, Curves, Morph and Webcam (lets you take a photo immediately with your own webcam).

Picture2Life

Getting my photo onto Picture2Life was just as easy- but I will admit I was a little confused by their editing window at first. After a few minutes, however, I began to appreciate the interface, and the way each option is described in very simple terms. I especially like the preview thumbnails that appear with their options, giving you a better idea of how a certain effect will look before applying it. A good place to recommend to mom for her online photo editing needs.

Flauntr

Unlike the other sites here, Flauntr requires registration before you can get started editing your photos. It's free and pretty painless, though- and what I like best about Flauntr is how you can manage multiple albums with multiple photos right here (and work with your Flickr, Facebook or Picasa files as well). Of all these editors, Flauntr probably has the snazziest interface- and, dareisay the most options? For within Flauntr is stylR, editR, textR, picasR, profilR, mobilR, and printR - all of which allow you to do exactly what they sound like (e.g. stylR for borders and distortions, editR for photo manipulation, etc.)- my favorite of all being picasR, which "makes images resemble classical paintings in color tone and feel. The essence of age old paintings is introduced into your images to create that vintage aura". Very awesome.

Phixr

This is probably the least sexy of all the services I've listed here, but it's a good, solid one. Photo upload was fast- and options include the usual cropping, rotation, and brightness, as well as some very nice Photoshop-esque filters. Phixr supports posting your photos to Flickr, Picasa, and Twitter- so if you're not looking to do very advanced photo editing, it's a great way to make changes to and post your photos online quickly.

Do you use online photo editors?

For those wanting to make their websites more interesting to web users, the newly released tool you can use is the Likno Modal Windows Builder. A modal window is a smaller window that is displayed on a particular web page. It’s not a pop up window but it shows additional content on a new page layer on top of the already loaded web page. You can use text, HTML code, images or even whole pages on this modal window to let your visitor focus entirely on that particular content. When this smaller window is closed, the web user is brought back to the original web page where he or she left off.

Customization of your modal window is very possible with the Likno software. You can create your own style via the CSS or cascading style sheets. You can also display dynamic content through the AJAX method. This area can be programmed or database-driven. Other than the modal window style, you can also choose to provide special effects in opening or closing the window. In the opening aspect, you have various options as well – the ID, class, name, onclick event or the AllWebMenus item.

Content-wise, this window builder allows you to provide specific information or images for the benefit of your readers. For instance, you have fresh information and you want your readers to keep that in mind, using the modal window can be very effective. Your readers’ concentration is on that window alone and not to any other parts of the web page.

Another great use of this is for online stores. If you have a new product, for instance, and you’d want your visitors to have a closer look at it, you can put the image of that item on a modal window. In that way, your potential customers get to see the item at a closer range.

Powered by the popular jQuery open source library, the Likno web modal windows builder is an advanced technology in that it lets you create modal windows that reflect your own personal style. You can choose to have a single-sheet type of window or if you have more information to share, you can use the multi-sheet type with several sheets involved. When using the multi-sheet window, you have a choice on a number of navigation bar styles to use. Another way to customize it is to use a header or footer.

Now if you have doubts whether this modal window builder will have problems with browsers, you can erase them already. This Likno software is compatible with most web browsers that support DHTML. So whether you’re using Internet Explorer, Firefox, Google Chrome, Opera, Mozilla, Safari and the others, you won’t be facing issues. Give your visitors a reason to stay put on your site and make sure you use the Likno web modal windows builder.

(Sponsored Post)