Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.

Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.

Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

Useful Coding and Workflow Tools
Stripe: Easy Credit-Card Processing For Online StoresA website owner has many options for accepting credit card payments. Most of those options have a verification process that is quite slow; some have APIs and interfaces that are more or less robust than others; and some solutions are much easier to use than others. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments. Unfortunately, Stripe is currently available only in the US.

The Web Developer’s WonderlandWeb development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. Livereload is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. Currently available only for Mac.

Ender: The End Of Monolithic JavaScript LibrariesEnder allows you to search, install, manage and compile front-end JavaScript packages and their dependencies. Essentially, it’s a command-line tool that allows you to combine and mix all of the popular and small JavaScript libraries out there to create your own personal development library. If one library you use goes bad or is abandoned, Ender will help you quickly replace it with another. And if you need a particular version of a package, the tool can help you out as well. The release page contains detailed documentation, a user guide and some video tutorials. No more wasted bandwidth!

Open-Source Exchange Rates and Currency ConversionSo, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Finding a free and reliable API for developers to access the rates data is darn hard. Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Easier Number and Currency FormattingThis simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators.

Tilt Firefox Extension: DOM Inspection In 3-DHow much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Mou – Markdown editor for web developers, on Mac OS XWhen current available Markdown editors are almost all for general writers, Mou is different: It’s for web developers. Syntax highlighting, live preview, fullscreen mode, auto save, powerful actions, auto pair, incremental search, custom themes, HTML export, enhanced CJK characters support. It’s exactly the app you want.

Creating Buzz With Launch EffectThe one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea.

A Better Responsive GridThe Golden Grid System uses the concept of “folding” grid columns into one another, based on the browser’s size. So, a 16-column grid that works great in desktop browsers would fold down to an 8-column grid for tablets, and a 4-column grid for mobile devices. It can handle screen sizes ranging anywhere from 240 pixels wide all the way up to 2560 pixels. The columns themselves are not the only things that are elastic either; while the column’s widths are based on screen size, the gutter widths adjust based on the page’s font size (specified in ems). The Golden Grid System comes with other features that make it perfectly suited to modern responsive Web design.

The Semantic Grid SystemCSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Bootstrap Kick-Start Development ToolkitBootstrap is a toolkit that includes the base CSS and HTML for typography, tables, grids, navigation, error messages, modal boxes, buttons and forms. It’s built with the LESS framework. It comes with a standard 940-pixel grid (i.e. 960.gs without the side margins), or you can create your own. Bootstrap allows you to create fixed or fluid layouts, and it comes with many elements that can be used as is or restyled to fit your website. Of course, the toolkit is free to use.

Colour BookmarkDrag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.

Leaflet: Open-Source Interactive Maps with JavaScriptThe library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

Weinreweinre is a Web Inspector Remote that is essentially a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Aardwolf: Remote JavaScript DebuggerMobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. One of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious — real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. You can use JSConsole for this purpose but when it comes to JavaScript debugging, Aardwolf is a better choice. Aardwolf is a JavaScript debugger for iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. (via Varun Kumar)

IE VmsMicrosoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. But setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE7, IE8 and IE9 running in separate virtual machines.

WhatFontThe tool allows you to easily get CSS typography details about the text you are hovering on.

WordPress TextMate BundleThe WordPress TextMate Bundle is a TextMate bundle built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up the little things that we work with every day. The plugin features auto-completion of WordPress functions, snippets for common sections of code, and templates for WordPress components. We even[…]

As a designer and developer, I’m always trying to find the best possible tools to do my job and to have fun with it. I’m both a PC and Mac user, Notepad, Coda, Textmate, Dreamweaver, Komodo and Aptana are some of the many editors I’ve tried but none of those made an impact as big as Sublime Text.

Although it is still in beta, Sublime Text is in my opinion the best text/code editor in the market which is available for Windows, OS X and Linux. There is nothing like trying and seeing for yourself but its features, aesthetic, usability and price (although it has an unlimited trial at the moment) made me want to write about it.

“Sublime Text is a sophisticated text editor for code, html and prose. You’ll love the slick user interface and extraordinary features.”

Interface
Sublime Text interface

Themes
The first impression that will pop into your mind is how amazingly beautiful the Sublime interface is. I was especially impressed while using Windows because usually editors are only visually appealing under Mac OS, however, I would say Sublime Text is unique in this matter. Changing themes takes two clicks (for real) and by default you get 22 to choose from but you can download more themes if you like.

Minimap
Although the interface itself is extremely beautiful, usability and functionalities are even more impressive. Imagine something you would like to see in an editor and you will probably find it in Sublime Text. Let’s start from the basics and that would point us to the default layout. Sublime Text comes with a minimap which is available at the top right corner showing you every line of code you may have. However with the minimap my favourite part is that it made me stop using the scroll bar to scroll down the page because you will be able to do it much easier using the minimap. If you don’t like you can simply hide it.

Panels/Groups/Screen Modes
Talking about the good stuff, one of my favourite features is that Sublime offers you the possibility to display as many files as you want through one-to-four panels so basically you can see four files at the same time. If you have more than one file open, Sublime will automatically create groups and you can  send a file to a group or select a group using the option focus. In the other hand, if you have a peaceful and calm personality and you like to keep things quiet you can use the Full Screen Mode (F11) or Distraction Free Mode (Shift+F11) which will hide all tabs forcing you to focus on your code/text.

Sidebar
Finishing the important aspects of Sublime interface, one last and also common feature is the sidebar. Sublime has it all and you if you don’t like tabs you can use the sidebar or vice-versa. You can also change everything from its original position.

Features
Sublime Text - Multiple selections

Multiple Selection
Although it’s a simple functionality, one thing that surprised me was the multiple selection option which does precisely that. Offers you the possibility of selecting multiple lines simultaneously and honestly I’ve never seen an editor with such possibility. This is something that helped me choose Sublime as my number one editor because I believe the small details design the big picture.

Auto-complete/Snippets
While expecting nothing less, Sublime brings you the auto-complete feature. However if you’re expecting the fantastic Dreamweaver-like auto-complete you can stop right there. Yes, it support snippets so write html and press TAB and the entire HTML head element appears. However, the auto-complete option itself is achieved by pressing ctrl+space which gives you a list of possible words based on the ones you have already written and this is where I feel it needs a bit more work because it does not give you a list of hints. This means you need to know how to code, so if you’re expecting a big help while writing your HTML you will find a hard time doing it.

Python/Community
Not satisfied because that option you really wanted is not there or isn’t great as you imagined? Don’t worry because you may have a way to make it look good. With Python plugins you can add as many features as you want to Sublime and if you’re not comfortable with Python you have a great and big community in their forum to help you out.

Customization
Every toolbar, mouse scroll speed, keyboard shortcut, etc can be customized at will so feel free to make yourself comfortable!

Complete Features List

Side by side multi-pane editing
Minimap: see your code from 10,000 feet
Full screen mode: use all your pixels, all the time
Nothing but text mode: the text, the whole text, and nothing but the text
Syntax highlighting for many languages with C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML supported out of the box, and more available for download
Multiple color schemes, with several included, and many more available for download
Bracket highlighting
Auto save: never lose your changes, not even if the dog thinks power cords are tasty
Fully customizable key bindings, menus and toolbar
Rich key binding language including sequenced key bindings, regular expression key matches, contextual bindings and parameterized bindings
Python plugins with a rich API
Rich selection of editing commands, including indenting / unindenting, paragraph reformatting, line joining and much more
Multiple selections: Simplify many tasks that used to require macros or regular expression
Column select
Regular expression search and replace
Incremental find as you type
Preserve case on replace
Bookmarks: Makes navigating through long files a breeze
Spell check as you type
Bracket matching
Commenting and uncommenting blocks of text
Asynchronous file loading, so you’re never blocked when loading files off slow network drives
Macros
Snippets
Auto complete
Repeat last action
Build tool integration
Automatic build on save
WinSCP integration for editing remote files via SCP and FTP

Video Analysis
DevHQLessons made a good video analysis about Sublime Text which I recommend. Check the video below.

Sublime Text 2: Best text editor ever?

Conclusion
I’ve made a very quick and rough review of Sublime but it should be enough to make your eyes shine. So if you’re looking for a powerful solution Sublime Text is for you. You can try Sublime through the unlimited trial or buy it for only $59.

Download Sublime Text

Keep an eye on websites without having to visit them all the time using this useful tool

cross-platform synching tool - useful for my drobo!

A TinyURL service for your own server - I've used these in the past, you just need to make them really permanent, otherwise it defeats the point.

A useful free poll generator for blogs and the like

At last! An English English dictionary!

A set of useful links for those thinking of setting up your own distributed company - this time it's productivity tools.

30 Boxes is almost certainly the easiest way to share your calendar and your web stuff online. Organize your schedule, share all or parts of it with friends. Post it to your blog. Track your friends online including their Webshots, Flickr, MySpace, blo...

  The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.
Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.
CSS TechniquesRotational SlidersEric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Generating Organic Randomness with Prime Numbers and CSSAt first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

CSS3 3D HologramBeing inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.

Checkerboard, striped & other background patterns with CSS3 gradientsYou’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery
CSS3 KeyboardClick in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

CSS3 Progress BarsA couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

Hover on “Everything But”A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Creating a Sphere With 3D CSSWith CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

CSS3 PlanetariumThis demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Natural Object-Rotation with CSS3 3DA tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

CSS Drop-Shadows Without ImagesNicolas Gallagher shares presents his CSS drop-shadows without any images.

Incrementable Length Values in Text FieldsLea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Beveled Corners & Negative Border-Radius with CSS3 GradientsBeveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Flexible Height Vertical Centering With CSS, Beyond IE7Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Coding up a semantic, lean timelineThis article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed BoxesThese border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

Quick Tip: Nonintrusive CSS Text GradientsJeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Bokeh with CSS3 GradientsDivya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Different Transitions for Hover On / Hover OffChris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Styling children based on their number, with CSS3Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS ModalUsing CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

Rotating Feature BoxesThe full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

When and How to Visually Hide ContentVisually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

How to avoid common CSS3 mistakesThe new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

Introduction to CSS Escape SequencesEscape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Wrapping Long URLs and Text Content with CSSTo wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS Generated ContentTrevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizingAn incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Revisit Hardboiled CSS3 Media QueriesShi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.
iPad Orientation CSSKeith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.
CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS.
CSS Tools320 and up‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS3 Generator – By Eric Hoffman and Peter FunkThis generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern GeneratorPatternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

Griddle.it – Web page alignment made easyA clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

The 1140px Grid: Fluid down to mobileThe 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Fighting the @font-face FOUTPaul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.

CSS3 Github ButtonsCSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook ButtonsCSS3 Facebook Buttons

MinimeeOn the Internets, speed is everything – which means that when it comes t[…]

Credit: David Mottram, Smashing Magazine

Being a freelancer can sometimes feel like a solo venture into the unknown, an exciting but nevertheless daunting prospect! We all have our particular strengths and individual weaknesses, but few of us would decline a little help with some of the more practical aspects of being a freelancer.

While not every tool on this list will be helpful for every freelancer, its overall aim is to provide you with resources that could help you significantly increase your productivity (do more…), get organized, work more efficiently, plan your to do items better, and maybe even save some money!

Useful Tools
Evernote

Evernote is in the very first spot on this list because it’s awesome and it’s free! Whether it’s an App that will become a trustworthy companion or pleasant acquaintance will primarily depend upon your level of organization, but it’s undoubtedly worth a look! Click here for an in-depth review of Evernote for Mac.

Google Calendar
You may be entirely satisfied with your current calendar and it’s capabilities, you like the way iCal syncs with your iPhone or the simply virtuous pen on paper. Despite this, it’s worth having a look at whether Google Calendar could enhance the way you work! It’s a great tool that allows you to share your schedule, access your calendar on the go, and get customizable reminders to help you stay on schedule. You can even choose to be notified by email or get a text message sent right to your mobile phone, for free!

LessAccounting

“Bookkeeping sucks. We make it suck less.” Is the simple but striking tagline for LessAccounting that sums up a feeling many of us get when thinking about even the most basic accounting tasks. With the ability to import data directly from your bank, and a experience designed to be stress and jargon free, it’s well worth considering – you might even begin to enjoy it!

Square

An iPhone and iPad App that heralds the future of monetary transactions! Square is a revolutionary service that enables anyone to accept credit cards anywhere. Depending on your line of work Square could be invaluable, allowing you to accept payment instantly and speeding up your cash-flow! It’s also worth bearing in mind that there is no extra equipment, merchant accounts, complicated contracts, or monthly fees required.

Sample Design Contract

Alongside some of the more interesting entries here I’ll also endeavour to shed light on some useful tools that won’t change your life but will make it easier. Here is a good example of a sample design contract from Mayhem Studios that includes some useful small print!

SlimTimer

SlimTimer is a useful tool for tracking how much time you’ve spent working on a task and even includes the ability to export the reports to coworkers and clients. Did I mention it’s free?

Outright

Outright is a simple piece of web-based accounting software that aims to help you ‘free yourself from accounting’. It has a couple of really great features, including the ability to pull in spending from your bank and credit cards, as well as grab online sales from PayPal.

Creating a Web Design Contract

This blog article by Anders Haig on how to create a web design contract is a great tool for anyone starting out in the web design business and gives a good overview of what needs to be included. It even goes as far as including a sample contract, although it is a little more basic than the sample from Mayhem Studios.

Dropbox

Dropbox is an effortlessly brilliant piece of software that syncs your files online, as well as across your computers and handheld devices. You simply put your files into your Dropbox folder on one computer, and they’ll automatically appear on any of your other computers or devices that also have Dropbox installed! Its basic version is free – get it now!

Google Docs

For some of us a fully functioning Office-like suite of programs for word processing, et al., just simply isn’t necessary and would be a waste of resources! Meet Google Docs. It’s a free, web-based word processor, spreadsheet, presentation, and form application that allows users to create and edit documents online. It goes above and beyond the standard word processor, allowing collaborating in real-time with other users!

How to Be a Rockstar Freelancer

An eBook on being a successful freelancer, covering everything from getting started to expanding your business. An invaluable tool if you’re just starting out and full of engaging insight for those of you already making good headway!

PayPal

It might sound ridiculous to those of you who’ve been in the freelancing world for years but PayPal is an incredibly useful tool for receiving and sending money. If you regularly receive payments via PayPal, then it may have become a little mundane and unremarkable, but it’s worth remembering how powerful it is for a freelancer to be able to quickly and easily receive payments from anywhere in the world!

Things

Things is an excellent task manager that is, for now, only available for Macs, iPhones, and iPads. Despite its platform limitations it’s well worth a mention, as the people at Cultured Code clearly understand the power of simplicity! Its sleek interface and beautiful cross platform synchronization allows you to focus on actually getting things done!

MakeSomeTime

MakeSomeTime is a Web App for simple online time tracking and invoicing. Its interface is sleek and it’s packed with functionality for a free App! Perfect for those of us who need an easy and cheap solution for time tracking and invoicing!

FreelanceSwitch Hourly Rate Calculator

An abundantly useful tool, the FreelanceSwitch Hourly Rate Calculator is designed to give you a guide based on your costs, number of billable hours and desired profit. As a simple tool for you to play around with it’s fascinating, and put to proper use it can really help you evaluate your finances!

Making a Living Without a Job

A fascinating an effortlessly readable book, now available in electronic form, by Barbara Winters on creating work that you love. Great for those starting out on a journey into freelancing and working for yourself, but also an excellent tool for anyone who feels they have lost their drive or just simply don’t enjoy what they’re doing anymore!

Mint

Managing your money is a vital part of being a successful freelancer and Mint is another tool that is designed to help you do just that! Mint brings all your financial accounts together online, automatically categorizes your transactions, lets you set budgets, and helps you achieve your savings goals – and all for free!

Pulse

If your foray into freelancing has begun to grow and find success, then it’s definitely worth considering whether a paid money management App would be beneficial. Pulse is one such App and describes itself as the easy way to manage your cash flow online! Its wealth of features and functions empower you to make the best decisions for your business.

Moo

MOO is a great place to start when thinking about getting yourself some business cards! It has lots of ideas and inspiration for designs as well as some beautiful templates. It’s well worth a look even if you decide to go elsewhere for printing. MOO also boasts a new approach to business card printing called ‘Printfinity’, a unique printing technology that allows you to print a different image on every card in a pack!

UNPRINTED

For many types of freelancer it’s vital to have access to, or be able to refer people to, your portfolio. If you’re one of the lucky ones, or happen to find an iPad lying around in the street, then UNPRINTED could be the perfect way to dazzle prospective clients! UNPRINTED gives you an easy-to-update, stylish solution for presenting your best work anytime, anywhere.

Blinksale

We are gradually working through many of the potential solutions for managing your money, which is a vital part of being self employed. The perfect solution will vary from freelancer to freelancer, however, Blinksale is a strong contender in the arena of paid for invoicing solutions! In addition to the features you’d expect, it allows you to import clients from Basecamp and even automate billing!

Remember The Milk

Remember The Milk is a delightfully simple way to manage your tasks and events that allows you to get email, SMS, and IM reminders. It’s free and available for almost any platform/device you can name!

XE

For working with an overseas client you may need to handle foreign currencies. XE’s currency converter is a useful tool for accurate currency calculations that features up-to-the-minute currency rates.

Basecamp

Basecamp boldly declares that it’s the top choice for entrepreneurs, freelancers, small businesses, and groups inside big organizations when it comes to project management. It’s focus on simplicity, clarity, and ease of use is excellent, while the depth of functionality is invaluable if you need to collaborate with others on projects!

Instacalc
Even if times you need to do inherently complicated math are few few and far between, I would still recommend bookmarking Instacalc. It’s beautifully intuitive and the perfect solution to any math jam you may find yourself in!

FreshBooks

FreshBooks is one of the more popular online accounting Apps and benefits from having a good free account and an excellent companion App for the iPhone. It aims to help you break free with fast, simple services that help you manage your business.

Campfire

Campfire is made by the team that developed Basecamp and could become an indispensable tool if you are someone who regularly needs to collaborate with others. Fundamentally, Campfire is like instant messaging, but designed exclusively for groups – it allows you to share text, files, and code in real time. You can also use transcripts so you don’t forget!

faxZero

Do you have a fax machine? I thou[…]

Credit: David Mottram, Smashing Magazine

Being a freelancer can sometimes feel like a solo venture into the unknown, an exciting but nevertheless daunting prospect! We all have our particular strengths and individual weaknesses, but few of us would decline a little help with some of the more practical aspects of being a freelancer.

While not every tool on this list will be helpful for every freelancer, its overall aim is to provide you with resources that could help you significantly increase your productivity (do more…), get organized, work more efficiently, plan your to do items better, and maybe even save some money!

Useful Tools
Evernote

Evernote is in the very first spot on this list because it’s awesome and it’s free! Whether it’s an App that will become a trustworthy companion or pleasant acquaintance will primarily depend upon your level of organization, but it’s undoubtedly worth a look! Click here for an in-depth review of Evernote for Mac.

Google Calendar
You may be entirely satisfied with your current calendar and it’s capabilities, you like the way iCal syncs with your iPhone or the simply virtuous pen on paper. Despite this, it’s worth having a look at whether Google Calendar could enhance the way you work! It’s a great tool that allows you to share your schedule, access your calendar on the go, and get customizable reminders to help you stay on schedule. You can even choose to be notified by email or get a text message sent right to your mobile phone, for free!

LessAccounting

“Bookkeeping sucks. We make it suck less.” Is the simple but striking tagline for LessAccounting that sums up a feeling many of us get when thinking about even the most basic accounting tasks. With the ability to import data directly from your bank, and a experience designed to be stress and jargon free, it’s well worth considering – you might even begin to enjoy it!

Square

An iPhone and iPad App that heralds the future of monetary transactions! Square is a revolutionary service that enables anyone to accept credit cards anywhere. Depending on your line of work Square could be invaluable, allowing you to accept payment instantly and speeding up your cash-flow! It’s also worth bearing in mind that there is no extra equipment, merchant accounts, complicated contracts, or monthly fees required.

Sample Design Contract

Alongside some of the more interesting entries here I’ll also endeavour to shed light on some useful tools that won’t change your life but will make it easier. Here is a good example of a sample design contract from Mayhem Studios that includes some useful small print!

SlimTimer

SlimTimer is a useful tool for tracking how much time you’ve spent working on a task and even includes the ability to export the reports to coworkers and clients. Did I mention it’s free?

Outright

Outright is a simple piece of web-based accounting software that aims to help you ‘free yourself from accounting’. It has a couple of really great features, including the ability to pull in spending from your bank and credit cards, as well as grab online sales from PayPal.

Creating a Web Design Contract

This blog article by Anders Haig on how to create a web design contract is a great tool for anyone starting out in the web design business and gives a good overview of what needs to be included. It even goes as far as including a sample contract, although it is a little more basic than the sample from Mayhem Studios.

Dropbox

Dropbox is an effortlessly brilliant piece of software that syncs your files online, as well as across your computers and handheld devices. You simply put your files into your Dropbox folder on one computer, and they’ll automatically appear on any of your other computers or devices that also have Dropbox installed! Its basic version is free – get it now!

Google Docs

For some of us a fully functioning Office-like suite of programs for word processing, et al., just simply isn’t necessary and would be a waste of resources! Meet Google Docs. It’s a free, web-based word processor, spreadsheet, presentation, and form application that allows users to create and edit documents online. It goes above and beyond the standard word processor, allowing collaborating in real-time with other users!

How to Be a Rockstar Freelancer

An eBook on being a successful freelancer, covering everything from getting started to expanding your business. An invaluable tool if you’re just starting out and full of engaging insight for those of you already making good headway!

PayPal

It might sound ridiculous to those of you who’ve been in the freelancing world for years but PayPal is an incredibly useful tool for receiving and sending money. If you regularly receive payments via PayPal, then it may have become a little mundane and unremarkable, but it’s worth remembering how powerful it is for a freelancer to be able to quickly and easily receive payments from anywhere in the world!

Things

Things is an excellent task manager that is, for now, only available for Macs, iPhones, and iPads. Despite its platform limitations it’s well worth a mention, as the people at Cultured Code clearly understand the power of simplicity! Its sleek interface and beautiful cross platform synchronization allows you to focus on actually getting things done!

MakeSomeTime

MakeSomeTime is a Web App for simple online time tracking and invoicing. Its interface is sleek and it’s packed with functionality for a free App! Perfect for those of us who need an easy and cheap solution for time tracking and invoicing!

FreelanceSwitch Hourly Rate Calculator

An abundantly useful tool, the FreelanceSwitch Hourly Rate Calculator is designed to give you a guide based on your costs, number of billable hours and desired profit. As a simple tool for you to play around with it’s fascinating, and put to proper use it can really help you evaluate your finances!

Making a Living Without a Job

A fascinating an effortlessly readable book, now available in electronic form, by Barbara Winters on creating work that you love. Great for those starting out on a journey into freelancing and working for yourself, but also an excellent tool for anyone who feels they have lost their drive or just simply don’t enjoy what they’re doing anymore!

Mint

Managing your money is a vital part of being a successful freelancer and Mint is another tool that is designed to help you do just that! Mint brings all your financial accounts together online, automatically categorizes your transactions, lets you set budgets, and helps you achieve your savings goals – and all for free!

Pulse

If your foray into freelancing has begun to grow and find success, then it’s definitely worth considering whether a paid money management App would be beneficial. Pulse is one such App and describes itself as the easy way to manage your cash flow online! Its wealth of features and functions empower you to make the best decisions for your business.

Moo

MOO is a great place to start when thinking about getting yourself some business cards! It has lots of ideas and inspiration for designs as well as some beautiful templates. It’s well worth a look even if you decide to go elsewhere for printing. MOO also boasts a new approach to business card printing called ‘Printfinity’, a unique printing technology that allows you to print a different image on every card in a pack!

UNPRINTED

For many types of freelancer it’s vital to have access to, or be able to refer people to, your portfolio. If you’re one of the lucky ones, or happen to find an iPad lying around in the street, then UNPRINTED could be the perfect way to dazzle prospective clients! UNPRINTED gives you an easy-to-update, stylish solution for presenting your best work anytime, anywhere.

Blinksale

We are gradually working through many of the potential solutions for managing your money, which is a vital part of being self employed. The perfect solution will vary from freelancer to freelancer, however, Blinksale is a strong contender in the arena of paid for invoicing solutions! In addition to the features you’d expect, it allows you to import clients from Basecamp and even automate billing!

Remember The Milk

Remember The Milk is a delightfully simple way to manage your tasks and events that allows you to get email, SMS, and IM reminders. It’s free and available for almost any platform/device you can name!

XE

For working with an overseas client you may need to handle foreign currencies. XE’s currency converter is a useful tool for accurate currency calculations that features up-to-the-minute currency rates.

Basecamp

Basecamp boldly declares that it’s the top choice for entrepreneurs, freelancers, small businesses, and groups inside big organizations when it comes to project management. It’s focus on simplicity, clarity, and ease of use is excellent, while the depth of functionality is invaluable if you need to collaborate with others on projects!

Instacalc
Even if times you need to do inherently complicated math are few few and far between, I would still recommend bookmarking Instacalc. It’s beautifully intuitive and the perfect solution to any math jam you may find yourself in!

FreshBooks

FreshBooks is one of the more popular online accounting Apps and benefits from having a good free account and an excellent companion App for the iPhone. It aims to help you break free with fast, simple services that help you manage your business.

Campfire

Campfire is made by the team that developed Basecamp and could become an indispensable tool if you are someone who regularly needs to collaborate with others. Fundamentally, Campfire is like instant messaging, but designed exclusively for groups – it allows you to share text, files, and code in real time. You can also use transcripts so you don’t forget!

faxZero

Do you have a fax machine? I thou[…]

Something that makes a website great  is when it is compatible in multiple browsers regardless of version. Technically this is referred to as cross-browser compatibility.

Wikipedia defines cross-browser as:

The ability for a website, web application, HTML construct or client-side script to support all the web browsers.

Now, you may be confused on what is the difference between cross-browser and multi-browser.

Multi-browser means a website will work in several web browsers like Safari, Chrome, Firefox, Internet Explorer. While cross-browser means a website works in any browser, and any version of the browser, being used.

Image by: lagiamd

This can be a struggle for developers throughout the creation of their websites. If a user cannot view your website properly, he will not blame the operating system or his browser…he will blame the website itself. The goal as developers is to avoid that. That’s why there are tools available for free, or purchase, to make your cross-browser checking easier.

In this article you will find ten useful tools that you can use for your cross-browser compatibility check.

1. BrowserShots
BrowserShots is a free cross-browser tool that captures screenshots of the website in different browsers. This is the best known and the oldest cross-browser tool used by developers.

The browsers it supports are:

Google Chrome
Dillo
ELinks
Epiphany
Mozilla Firefox
Galeon

and more…

The operating system it supports are:

Linux
Windows
Mac
BSD





I read some feedback on the site and there are two things that appear to need improvement. The interface could be better. Though you just have to tick the checkbox, it will still take a lot of time to check all the boxes for the browser and browser versions you want to view your website in. The other thing people don’t like  is that sometimes the tool is slow.



2. IE Tester
If you are a developer who is in need of a tool that just supports Internet Explorer, then this tool is for you.

IETester, a free web app that allows you to see the appearance of web pages by using Internet Explorer 5.5, 6, 7, 8 and 9. Its interface resembles the interface of MS Word 2007.

I tried using this software and I have found that it does not respond well and should be debugged. I think it might be because of the operating system I use, Windows 7. If you also encounter this problem, you can refer to this page.

3. DotMobi Virtual Developer Lab
Do you need a cross-browser tool dedicated to device testing? Then you should check out this tool.

DotMobi Virtual Developer Lab is a free web-based tool that lets you check your websites on real devices including iPhone with the use of remote access technology.

To use this service, you need to have a credit card. This is for the purpose of preventing abuse of the devices.

4. Adobe Browser Lab
Adobe Browser Lab is an online tool for cross-browser checking. It shows screenshots of the website when viewed in different web browsers. This simple tool lets you compare results by displaying screenshots of web pages in a simple way.

How does BrowserLab work?
When the BrowserLab testing page loads, you will be asked to enter the URL of your website. After that, it will automatically render the screenshot. If you are using Windows, the default browser it uses is Mozilla Firefox 3 – OSX. Its interface is great because it shows the percentage it has already loaded. You can instantly change the browser by choosing from the drop-down menu or from the list in the middle of the interface.

You can also choose how you’d like to view the webpage: 1-up View, 2-up View, Onion Skin. 1-up View is when you just want to render a screenshot in a single browser. 2-up View lets you get screenshots of two browsers, and Onion Skin gives a screenshot of overlapped images of two browsers. This way, you can see the differences between them.

Comparing this to other cross-browser tools, it lacks support for operating systems such as Linux and other web browsers. For a free tool, the interface and current features are useful for daily use.

5. CloudTesting
CloudTesting is a tool that enables web developers to view a website using any of  the web browsers listed below.

The browsers it supports are:

Internet Explorer 6, 7, 8
Mozilla Firefox 3, 3.5, 3.6
Apple Safari 3.2, 4.0, 5.0
Google Chrome Latest Version
Opera 9.6

Features:

For Web Developers and Testers

Find issues earlier. Test your current work in progress in multiple browsers at the same time, allowing you to find issues earlier in the development process.
Multi browser. Compare what the website looks like in multiple browsers side-by-side.
Comparison Tools. Compare how the same webpage displays in two browsers using an ‘Onion-skin’ overlay tool.
Automated. Tests can be scheduled to run at regular intervals, freeing you from the tedious task of manually running them and storing the results.
Repeatable. Tests are repeatable day after day to track changes made to the website.
Verify all areas. Verify areas of your site not available to standard cross browser testing tools, such as shopping carts and search results.
Full debug. Have access to historical component information and timings, including HTTP requests and response headers, just like you get in Firebug, but stored by CloudTesting.

For Website Managers

Compare in multiple real browsers. See how your e-commerce or transactional website will look in a variety of browsers at the same time.
SaaS. There is no need to deploy multiple servers or virtual machines for your cross browser testing.
No administration. Browser versions and Operating Systems are kept up-to-date by Cloud Testing.
Reduced development times. The ability for cross browser testing to be scheduled on a regular basis, drastically reduces web development life cycles.
Earlier fixes. A key time-saving feature is the ability to look back over time and see when a defect was introduced, meaning earlier fixes.
Pay for what you use. The PaYT (Pay as You Test) model gives you the ability to cope with peak demand whilst not paying for it during quiet times.
Peace of mind. Give yourself peace of mind by running a sanity check in multiple browsers before launching a new website.

For pricing, check this link.

6. Browser Photo
Browser Photo gives you actual photos of how your web pages will look in different web browsers and platforms.

Service Details:

Browser Photo helps avoid display differences by showing you actual photos – not emulations – of your pages taken on 12 different browser and computer configuration combinations!
It’s Affordable! Building a test laboratory to get the same information that Browser Photo provides would cost at least $4,500.
Catch Errors Made By Your HTML Editor. Often FrontPage HTML works with Internet Explorer, but not other browsers. Browser Photo spots these problems.
Web Designers, show your stuff. Print-friendly reports show clients or bosses what you’ve done! Check out the Web Designer packages.
Browser Photo is an automated, easy-to-use tool that requires no downloads or installation and is continually updated.
Online Access Anywhere, Anytime. Through an internet connection, you can test your Web pages 24 hours a day from anywhere around the world.



7. Browsera
Browsera is a tool that tests the cross-browser layout of your website. You will see the differences and errors on your site.

Features:

Discover Cross-Browser Layout Problems Automatically
This feature of Browsera gives you a notification of possible problems the tool finds while testing your website. Instead of checking each screenshot, you will get a report that gives details on which pages of your site have possible problems.

Locate JavaScript Errors
Browsera is also capable of helping you find problems caused by scripts on your site. We know that scripting errors are a big viewer turn-off and that’s what this feature wants to resolve. Every time a page is rendered, this tool checks if the browser encountered any errors. After checking, it will give you a report showing the results.

Easily Test Entire Sites
This tool tests your website. Not just a page at a time, but your entire website. This means it takes less time to test and find errors, and since it tests the entire site you don’t have to worry about missing a page during the testing process.

Test Pages Requiring a Login
Browsera lets you log in first before testing your site. Very secure, right? It supports both HTTP basic authentication and application based logins, as well.



No Installation Required
Yes, no installation required. Everything that Browsera needs to run comes from their server cluster. All you need to have is a web browser and an internet connection. Ideal for developers that work remotely.



Test Dynamic Pages
Browsera can work with dynamic pages so if you use technologies such as  AJAX and DHTML, this will not be an issue. Browsera will wait until pages are loaded prior to the testing process.

8. CrossBrowserTesting
CrossBrowserTesting is a tool that tests your website with a browser and remote VNC. With these tools, you can test your AJAX, JavaScript and Flash with any browser. You just have to provide the URL, select a browser then run the software.

To view their demo, click here.

The browsers it supports are:

Android Browser
Chrome Google 5 to 8
Dillo 0.8.6-i18n
Firefox 1.0 to 4 Beta
Internet Explorer 5.0 to 9 Beta
Mobile Safari
Mozilla 1.7
Opera

and more…

The operating system it supports are:

Android
iPad
iPhone 3GS
iPhone 4
Mac OSX 10.5.7
Mac OSX 10.5.8
Mac OSX 10.6
Ubuntu 8.10
Windows 7
Windows 98 SE
Windows XP SP2
Windows XP SP3
Windows Vista

This tool offers three plans to choose from and a free trial.

9. BrowserCam
An online paid service that allows developers to view web pages on different browsers and operating systems. It also supports mobile operating systems and browsers. This tool[…]

  We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.
You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.
You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.
Useful Web Services, Tools and ResourcesFontFuse: Gallery of Font PairingsFontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Little Big UI DetailsThis site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

A Sampler PageWhile physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Readability: Enjoy Reading, Support WritingAnother handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Prey: Rest SafeThis tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Ge.ttWith Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Lanyrd: Get More Out of ConferencesLanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac AppsThe site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Bundler: Manage Your Application’s DependenciesBundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

BuildorProBuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

Zerply: Present Yourself ProfessionallyWith Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Prevue: Sharing Tool for DesignersPrevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Git Immersion Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Wirify: The Web as WireframesThis tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Open with Photoshop Firefox ExtensionIf you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Scr.im: Email Address ShortenerScr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Compfight: Flickr Search EngineCompfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Browserling: Interactive Cross-browser Testing in Your BrowserBrowserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

User Feedback and Concept Testing with VerifyVerify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

foxGuide: Photoshop Guides Inside FirefoxfoxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

GridBookmarkletThe tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

URLi.st: Share and Sync Your LinksURList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Spritebox: Create CSS from Sprite ImagesSpritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

JoliprintThis is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

EntitifierCleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.
The Email Address Obfuscation DebateSuperuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Quic[…]