80 Apps and Resources for Cloud-Based Web Dev – Blancer.com Tutorials and projects

Web development is one of the fastest growing industries in the world. The value of the web has become apparent and business and individuals alike have jumped on board the web bandwagon. During it’s humble beginners, you might find a web developer writing his code in a text editor like Notepad. However, as the web technologies themselves progress, developers can take advantage of rich web apps to produce their content.

In today’s extended roundup, we’ll be taking a look at around eighty or so tools that operate entirely on the web, that you can use in your web development workflow. For the purposes of this roundup, “development” refers to the overall process of a website’s creation and not necessarily just the coding side of things.

Let’s get started.

Planning and Prototyping

Planning is a very important stage in a website’s developments. Of course, this isn’t WebDesignTuts+, but we can summarise and say that planning is an important stage of development.

Mockingbird

Mockingbird is a simple wireframing web app that looks and feels like a native OS X application. Through a selection of predefined wireframe elements, one can build up a functional wireframe for their website and easily modify it through the planning stage.

Price: $9/month and above

HotGloo

HotGloo is another wireframing web app that allows you to pull over a bunch of different elements down onto your blank canvas to create an effective, useful wireframe. HotGloo also boasts an in-app chat function to communicate with others on your team or clients.

Price: $7/month and above

MockFlow

MockFlow is another wireframing application that allows you to drop black-and-white predefined elements onto your canvas, in a very similar way to the other applications mentioned today. MockFlow also integrates with native desktop, mobile and tablet clients.

Price: Free

Jumpchart

Jumpchart is another planning app, but it’s less focused on design and more on the structure and content of the site. Jumpchart lets you create somewhat of an extended sitemap for your design to plan it’s structure ahead of time.

Price: Free
AppStorm Review: Planning Your Website With Jumpchart

GridFox

Grid-based design is a common practice, and, very simply, this Firefox add-on overlays a grid on the currently viewed page (whether it’s yours or not) to check on the composition and layout of the page.

Price: Free

ProtoShare

ProtoShare is – yep, you guessed it – another wireframing web app targeted at web designers. ProtoShare allows a designer to create wireframes and associated it with a collaborative discussion in an additional column on the page. Wireframes can be exported into HTML too, so you can make them completely independent of the ProtoShare website.

Price: From $29/month
AppStorm Review:Rapid Website Wireframing and Prototyping with ProtoShare

iPlotz

iPlotz is a tool that allows you to create rapid, interactive wireframes and prototypes and then collaborate on them with your team. There’s different levels of collaboration such as client and co-worker, allowing for different permissions to be set for different people.

Price: From free

Draftboard

Draftboard is a collaboration app aimed at the overall development process of a website. Clients and designers can collaborate on designs and target specific areas to look at, whether that be on a wireframe image or a complete site that’s been uploaded into the Draftboard app.

Price: Free
AppStorm Review: Collaborate on Your Designs With Draftboard

inVision

inVision is a web application that allows one to create “fully interactive” web prototypes and wireframes that “actually look good”. Users can invite others to create a team, where they can collaborate on a design and offer other feedback to the project in question. As is becoming common in these apps, it integrates well with an iPhone or iPad.

Price: $8/month and above
AppStorm Review: Create Smart, Interactive Prototypes with inVision

Production

Now we move onto the big section: those apps that actually help you produce the site. I’d be a fool to say the entire process could be moved entirely online, but these apps will go some way to aid you during the development process.

General Coding

Specifically, these applications look at the overall coding process and not just at a specific element.

Codeanywhere

Codeanywhere is a feature-filled code editor based entirely in your browser. Everything is expedited due to the lack of required installation, and it’s a great light-weight editor for developers on the go. Simply launch the application and edit in HTML, CSS, PHP, JavaScript and XML! There’s an iPhone and Android app too to integrate with.

Price: Free and above

Firebug

Firebug is arguably the most popular web development add-on for Firefox, giving users the ability to edit and debug HTML on a web page. Firebug can also analyse your site’s usage, performance and activity and allow you to select an area with precision.

Price: Free

Mozilla Skywriter

Mozilla Skywriter (previously BeSpin) is a cloud-based IDE that’s built-in to another Mozilla Labs-affiliate project, ACE. ACE is a standalone code editor that can be embedded into other projects, including some more of the one’s on this list.

Price: See embedded projects

Kodingen

Kodingen is a cloud IDE allowing you to edit a range of languages including PHP, Perl, Python, Ruby on Rails and django right in your browser. Plus, Kodigen works with other cloud-based editors like Aviary so your entire workflow can be cloud-based (Chromebook web development?).

Price: Free

Coderun

Coderun is another browser-based code editor allowing you to develop ASP.NET, PHP, Ajax and even Silverlight applications in your browser. If you check out their website, you’ll notice the Chrome screenshots suggesting that this application would work great on your new Chromebook.

Price: Free

Cloud9

Cloud9 is a – yep, you guessed it – browser-based, cloud IDE that features many popular languages to develop in, but also integration with additional services like Github and bitbucket. Cloud9 just announced they raised $5.5 million in funding, showing it has some potential.

Price: From free
Tuts+ Article: Why Cloud9 Deserves your Attention

ShiftEdit

ShiftEdit is a basic online IDE that allows a developer to produce and edit code in languages such as PHP, Ruby, Perl and Java, as well as putting that code online through FTP, SFTP or even Dropbox!

Price: Free

ecoder

ecoder is an open-source, online IDE featuring several features of the standard native code editing app, like syntax highlighting. However, ecoder does not support IE6. That is NOT COOL! (jokes)

Price: Free

CloudIDE

Cloud IDE

Cloud IDE is a development web app currently in private beta – although you can freely apply to get an account. Cloud IDE works on the eXo platform, which is advertised to offer the web app similar ergonomics and performance to a native app.

Price: Free, but in private beta

Akshell

Akshell is another coding web app, but this one’s mainly focused on JavaScript. Don’t let it’s minimalist website dissuade you, as the app compensates by bring a native app-feel in the IDE itself. One can also communicate with a PostgreSQL database through a “simple API” and collaborate via the GitHub integration.

Price: Free

SourceKIt

SourceKit

SourceKit is a lightweight programming environment on the Chrome App Store, making it another application perfectly suited to your Chromebook. It saves directly into Dropbox, so the files can be accessed anywhere or sent automatically to a Dropbox sharing folder if you have the native app installed. Theoretically, this should mean you can install the native Dropbox app, edit on the web but then have a copy of the files easily accessible via this folder.

Price: Free

Google Code Playground

Google offers a ton of different APIs for all their different products from translation to book search. Google Code Playground allows developers to play about with the APIs in a sandbox before they started using it in their sites. The Playground integrates debug tools too, so you can easily find errors before you grab it and move it into your project.

Price: Free

CSS Sandbox

CSS Sandbox is a nice tool for trying out various CSS configurations on a text paragraph. There’s no code involved in this sandbox, as you simply click on the values as a selection on the sandbox’s options.

Price: Free

Image Editing

Of course, when you visit a website, it’s not just all lines of code. Instead, you see nicely formatted web pages, most of them with images. Now, Photoshop is a very powerful tool, but how many times have you opened it just to crop an image, or do some other simple tasks that doesn’t need Adobe’s full might?

These apps will help you replace a traditional native editing suite, for just some simple online tools that can help you manipulate your images.

Pixlr

Even though I just said you don’t need Photoshop, let me go back on what I said. Pixlr is like a Photoshop based online, as it looks and feels like a native app with it’s traditional floating menu interface. It’s a kick-ass replacement image manipulation application that will likely work well on your brand new Chromebook, with it listed in the Chrome Web App store.

What’s the best thing about this? The ~$700 discount from Photoshop!

Price: Free

Aviary

Like Pixlr, Aviary is another entirely browser-based image manipulation tool that retains the desktop-like interface of floating toolboxes. Aviary has a simple tool whereby you upload an image and then perform basic actions like cropping, but also has it’s Phoenix advanced editor that brings in the big guns. There’s also vector and audio editors, if that’s what floats your boat.

Price: Free
AppStorm Review: Aviary Goes HTML5 With Feather

Picnik

Another popular browser-based image editor is Picnik, which is focused mainly on photo manipulation. Picnik allows you to do some basic actions to photos like cropping, resizing etc. in addition to fixing them and adding text. It integrates into a range of popular services like Picasa and Flickr too!

Price: Free

Splashup

Splashup is another image editor that works right in your browser. It features a fully fledged layers system to create well composed graphics, and the ability to share to popular services like Flickr, Picasa and Facebook to integrate into your site.

Price: Free

SumoPaint

Sumo Paint

Sumo Paint just screams Photoshop thanks to it’s interface that looks not unlike the editing giant’s. There’s a ton of advanced tools in here making it the perfect replacement app for your traditional native suite.

Price: Free, Pro version available

Utilities

Next, we look at the smaller utilities that might be of use to you during your workflow. They might not be actually used in your development, but could stop simple annoyances that you encounter during your working day.

Snipplr

Snipplr is actually another Envato property that is all about saving and sharing code snippets. Your frequently used code snippets can be saved too, to access them quicker next time you want to drop it into a project.

Price: Free

Codesnipp.it

Codesnipp.it is another code snippet sharing website for posting and retrieving public code extracts in a bunch of different languages from C# to WordPress. Think of it a bit like Twitter for code snippets.

Price: Free
AppStorm Review: Codesnipp.it: More Than Just Code Sharing

Pixel Perfect

Pixel Perfect is a Firebug extension for Firefox, that allows designers to make sure their end product is pixel perfect. Pixel Perfect lays a web composition on top of the final HTML for ease of comparison. Although it is an extension of Firebug, both tools can be used simultaneously on a single web page.

Price: Free

Golden Ratio Calculator

This simple application allows you to generate some figures for your website’s width, in order to conform to the common principle of the Golden Ratio. By typing in a number, you’ll be returned either figures for the sidebar and content (when the figure you input is your overall width), or a figure for the sidebar (when the figure is your content width).

Price: Free

MeasureIt

MeasureIt is a simple browser extension for Safari, Firefox and Chrome that allows you to draw out a box (OS X screenshot-style) and receive a return of the pixel dimensions for that specific area. It’s very simple, and it’s likely that your browser will work with it.

Price: Free

Adobe Kuler

Adobe’s Kuler flash based app helps you pick out a nice colour scheme for anything, but specifically a website in this case. There’s a number of colour schemes created by the community that you are free to look around in, or you can dive in and just generate your own based on the colour’s of your current project.

Price: Free

Typetester

Typetester is a tool for helping to select your typography. On the Typetester site, one can compare three paragraphs of text by changing font size, typeface and other variables to help select the perfect font by comparison. Once you’ve chosen your font, hit a button and grab the CSS.

Price: Free

ColorZilla

ColorZilla is a Firefox add-on that brings the eyedropper tool right into your browser. All one has to do is select the area which their destined colour resides in, and the add-on will bring back an RGB value. Unfortunately, this specific tool is not available for Safari or Chrome, but it’s free on Firefox.

Price: Free

Color Scheme Designer

Colour Scheme Designer is a similar application to Adobe’s Kuler that offers the ability to generate a custom colour scheme. In addition to choosing colors, you can manipulate the results to create colour schemes that are complimentary, analogic, triad etc. so it adheres to most artistic color principles.

Price: Free

Wufoo

Wufoo is a simple contact form creation tool that allows you to simply embed forms into your design, and manage them off-site on the Wufoo app. Forms can be so simple, but the scripting behind it can be a pain, so let Wufoo alleviate some of that.

Price: From free

Shopify

Shopify is an online shopping service that allows anyone to create a powerful online store. I’ve shopped on Shopify-powered stores before, and I can safely say that the step-by-step payment process is a breeze.

However, the real attraction is the back-end for the merchant themselves. There’s a great web and mobile interface that provides useful analytics on sales. Shopify scales well so it’s suitable for businesses small or large.

Price: From free

Placehold.it

Sometimes you haven’t got images at hand, but need something to push onto your design. Placehold.it creates a placeholder image depending on the URL parameters you define.

If a blank grey shape isn’t doing it for you, be sure to also check out NetTuts+’s roundup of placeholder services including those featuring cats, dogs and Charlie Sheen.

Price: Free

OpenID

OpenID provides a great login system if you don’t necessarily want to create a fully featured system yourself. OpenID allows your users to login to your site with an account they already have, rather than creating a whole new one just for yourself.

I don’t know about you, but I love this type of system. I always prefer to use my Twitter account to comment on blog posts, instead of signing up for an individual account since it saves time. If i’m forced to sign up, i’ll just leave your post, losing you a comment.

Price: Free

FusionCharts

Want to drop a graph into your webpage? There’s numerous uses for these charts and diagrams and FusionCharts offers a great way of creating them, in both Flash and HTML5.

Remember this ironic ad from Samsung? Well, these charts work fine on an iPad thanks to it’s HTML5 and JavaScript power.

Price: Free

Google Chart Tools

Google offers a nice set of chart APIs for creating simple graphs from a few lines of code.

Price: Free

YouTube

YouTube is on this list for two main reasons. The first is that it provides a great way to add HTML5 or Flash videos to your websites, either from those you’ve uploaded, or someone else has. Adding a certain URL parameter will even drop the YouTube logo to create an unbranded player, perfect for any project.

Secondly, it provides a great education tool for yourself to learn new things. Whether you’re learning how to code your web app in C# and ASP.NET, or learning the basics of Photoshop, there’s likely a video there for you.

Price: Free

Vimeo

Vimeo is another choice for video hosting. While there’s little less on the education site, the Vimeo play is commonly adopted for embedded videos, thanks to the somewhat customisable player and upscale video community.

Price: Free

Tuts+

At some point, you might have found yourself learning some new web design or development skill by reading a book. Well, those days are over thanks to the advent of sites like Tuts+.

Tuts+ is one of our sister networks here at Envato, hosting two very popular design/development sites at the moment: NetTuts+ and WebDesignTuts+. There’s also sites for learning all about graphic design, audio design and even how to take better photos!

Price: Free

Google Analytics

Google Analytics is a very popular analytics service provided by Google, offering a range of critical tools and in-depth reports into visits onto the site. Anyone can get started and simply embed the lines of code right into their design, to start recording data so they can be returned in rich, interactive graphics.

Price: From free

Reinvigorate

Reinvigorate is a contender in the analytics scene offering a bunch of favourable features that Google Analytics lacks. Reinvigorate offers traditional analytics in addition to cool (and very much useful) features like heat maps in a simple, clean interface.

Price: From free

SEscout

SEscout is more of an aftermarket tool that allows for SEO tracking of projects. The SERP tracker also offers the ability to export PDF and CSV reports, but, in terms of what the features are, you’ll have to look them up for yourself. I’m not really that experienced in the whole buzzword-filled SEO enviroment.

Price: From free
AppStorm Review: Up Your SEO Game With SEscout

JotForm

JotForm is another contact form creation tool with a simple drag-and-drop interface, similar to Wufoo. You simply have to drop the elements in, edit it’s options and then embed it into your design. It’s super simple to set required or validated fields too!4

Price: From free

Genfavicon

Genfavicon helps you generate Favicon images (you know, the little icons that are associate with a bookmark of a site) with ease.

Price: Free

Collaboration and Feedback

There’s tons of one-man development studios out there, with just a single developer running the show. However, there are some whereby you work with others and have to collaborate, so these tools should help make that experience just a little easier.

Cage

CAGE

We just recently reviewed CAGE and gave it a full ten out of ten. CAGE is a simple, but effective, web app, that allows you to upload a screenshot of your design (or, really, code) and tag them with specific areas you want feedback on. Via an email invite or a public link, one can also collaborate with others and receive feedback on the areas you’ve tagged. A revisions feature is coming in the next major release, presumably allowing you to update your screenshot with a newer version, as development progresses.

Price: Free
AppStorm Review: Collaborate and Feedback on Designs with CAGE

Chop

Chop is a simple code-sharing application. Simply paste in your code, grab the URL and share with co-workers. You can annotate code too to offer better explanations, if you so wish.

Price: Free
AppStorm Review: Get Feedback On Your Code With Chop App

Bounce

Bounce by ZURB is a web app not unlike CAGE. By typing in a live URL or just uploading an image, you get access to a small set of tools for offering feedback. One can tag a specific area of the site, and open up a discussion point to bounce ideas back and forth. Then, just share it on a social network or copy out the provided link.

Price: Free
AppStorm Review: Bounce: Simple Idea Sharing for Websites

FiveSecondTest

FiveSecondTest is a really interesting concept. This feedback does not rely on uploading your design and tagging specific areas to spur on discussion. Instead, your feedbackers are given five seconds to review your website, and they are then asked to explain what they percepted from that time. This makes sure all your design principles and your nice visual hierarchy is in tact and useful to the reader. The free, community option puts your designs public and gets you public responses, as long as you contribute them to other projects.

Price: From free

Notable

Notable is another one of those apps whereby you upload an image and highlight specific areas that you want to concentrate discussion on. However, this particular app prompts the idea of using this with wireframes, during the planning stage, as well as the near-final product.

Price: From $19/month

Critique The Site

Critique The Site is another great tool for gaining feedback on your designs. By entering the URL of your site, you can share a custom view of your page with a discussion pane in which Facebook-powered comments are created and read.

Price: Free

Creattica

Creattica is another site our guys at Envato that is built on the idea of public critique. If you’re working on a project for yourself, or someone who doesn’t necessarily want to keep the details top secret, you can upload a screen to Creattica and get feedback from the Envato community.

Price: Free

Forrst

Forrst is kind of like a social network for designers to share, collaborate and converse on designs and coding with a talented community of peers. The “Snaps” section – that’s focused on design – is not unlike Creattica or Dribble, although the code sharing threads are a little more unique.

Price: Free
AppStorm Editorial: Forrst: Share More Than Just Snaps

Dribble

Like Creattica, Dribble is another site that crowd-sources feedback to their community creating item pages with comments providing you with vital feedback.

Price: Free

Browser Compatibility Testing, Accessibility and Standards Compliance

These tools help you out by testing out compatibility of various browsers, in order to make sure the widest audience is being catered for on your website. Even the Internet Explorer users.

Adobe BrowserLab

BrowserLab is an online service from Adobe that offers extensive previews of your site as if they were being displayed in different browsers, without the need for additional software, hardware or virtualisation software. One can accurately preview sites as if they were shown in different browsers, right from within the single interface so you can easily optimise it to address any issues.

At the moment, BrowserLab is a CS Live service that is free right now, but may become a paid-for service after April 12, 2012.

Price: Free (for the moment)

BrowserCam

Like BrowserLab, BrowserCam allows you to virtualise your site onto a number of different browsers and operating systems to check out what they look like. It’s a little pricer, but BrowserCam allows you to check out handheld browsers too.

Price: From $19.95/day

ViewLike.us

ViewLive.us

ViewLike.us is another browser compatibility testing tool that puts your live site into a number of resolutions, rather than different browsers. The resolutions available are all the popular ones, even including the Opera browser you can download to your Wii!

Price: Free

W3C Markup Validator

The W3C Markup Validators are something that should be used by any developer to make sure his or her code is standards compliant. The validators check over your CSS and/or HTML either by submitting a URL, uploading a file or just copy-pasting in some of your code. Any issues are then explained so they can easily be addressed by the developer.

Price: Free

Are My Sites Up?

Are My Sites Up? isn’t technically a standards compliance validator, or a browser compatibility tester, however, I do find this to be a fitting category for such a tool. Are My Sites Up? is a downtime monitoring that sends you notifications when you sites go down. If you feel like paying up for their white label service, you can resell the service with a custom web app and iPhone app.

Price: Free (AMSU White Label is available on a paid basis)

EvalAccess

EvalAccess is a tool used to assess accessibility on a web page according to the W3C standards. Errors against the W3C WCAG 1.0 standard are detected and explained in order for the developer to address them.

Price: Free

Browsershots

Browsershots is an online tool that allows you to enter a URL and back screenshots from a number of chosen browser and operating systems. It takes a while to get them, however, since each screenshot is taken from a remote machine.

Price: Free (but takes a while!)

FTP

We’re arriving at the end of the roundup now. You’ve planned, produced and edited your testings, testing for compatibility, accessibility and standards compliance on the way.

net2ftp

net2ftp might not look like much on the outside, but underneath it features a powerful, functional FTP client that works pretty well. Simply log in with your credentials and net2ftp gets to work.

Price: Free

FtpLive

FtpLive is a very similar web app to net2ftp. Login is simple: just supply FtpLive with your server address, username and password to manage your online filesystem.

Price: Free

WebFTPer

WebFTPer is another functional, browser-based FTP client that is unfortunately hidden behind a less than desirable promo page.

Price: Free

General Workflow/Misc

Finally, i’m going to end on a bunch of different apps that you might encounter during your workflow. They might not necessarily be specific to web design or development, but it’d be good to have them to hand anyway.

Dropbox

I have a Dropbox alias folder on my desktop that’s great for syncing files. Instead of just using Dropbox to transfer single files, you can setup an alias folder to act like any other folder, but have everything automatically synced to both the online web interface of Dropbox and to any other Dropbox-installed computers that you’re logged in to.

In your web development workflow, you can use Dropbox as a great way of syncing your projects between the web and any computers you have. Work on your design on your HP desktop and have it automatically download to your MacBook Pro to take with you on the go.

Price: From free

Google Apps

Google Apps appears on most roundups purely because the range and opportunity of these apps can be great. You can replace your office suite with the range of free apps, ranging from arranging client meetings with Google Calendar to producing your invoices with Google Docs.

Price: From free

Box

Box.net

Don’t like Dropbox? Box.net might be your alternative.

Box.net offers a range of features including a bunch of real time communication and collaboration tools to boot.

Price: From free

Twitter

Like YouTube, Twitter has two uses. It’s APIs can be used to include Twitter streams, posting, following and other tools right into your webpages. However, you can just sign up and use Twitter as intended and follow a bunch of big name developers, as well as our Envato properties and other tutorial/education sites.

Price: Free

Wunderlist

Wunderlist is a popular task management application available on the web, and on a bunch of desktop and mobile platforms like iOS, Android and Mac OS X. Matthew Guay called it the to-do list to beat and the beautiful web interface is something only to be inspired by.

Price: Free
AppStorm Review: Wunderlist: The To-Do List App to Beat

Flow

Flow is another very attractive task management application that makes working and collaborating with others super simple. I’ve used it in the past with my editor here, Matthew Guay, to manage various tasks and it’s worked surprisingly well, with email notifications and a beautiful Mac-like interface.

Price: $9.99/month
AppStorm Review: Flow: Task Management With Mac Sex Appeal

chi.mp

Let’s think back; back before we even started planning for the website. Chi.mp helps you – web designer or not – create a public profile page with a custom .mp domain of your choice. It’s a pretty attractive proposition and a great place to direct potential clients to learn a bit more about you.

Price: Free

about.me

about.me is a very similar app to chi.mp that lets you create a kick-ass portfolio page, and even get your info printed out on a custom business card. Upload a picture, edit in a bio and some of your favourite sites, then publish it onto a desirable about.me address. You even get analytics to show how many people discovered your page and what they clicked on.

Price: Free

FreshBooks

Freshbooks

Invoicing. It’s not exactly anyone’s favourite time. Sure, we all like payout at the end, but the process of creating and managing client invoices can be a pain.

Luckily, FreshBooks solves the problem by providing a convenient web interface to create invoices, allowing you to manage them too.

Price: From free
AppStorm Review: Easy Time Tracking and Invoicing with FreshBooks

LastPass

LastPass is an online password manager that fits into your workflow simply because it’s going to be difficult to manage all your accounts from all these web apps that may have successfully pushed your web development online.

Coincidentally, last week’s poll asked the question, do you use a password manager? It’s still open to voting, so be sure to voice your answer in the poll and the comments.

Price: From free

Flowdock

I’m going to end with one final web app that I reviewed just recently. Flowdock is a great collaboration platform for working with your team, but also monitoring your social media properties.

Flowdock allows you to discuss your projects with your team and even share internal messages and files. Plus, you can monitor social media and RSS to aggregate all you should know about in a single place.

Price: From $19/month
AppStorm Review: Collaborate and Aggregate with Flowdock

Conclusion

Still with us? Over 5,400 words later and we’ve covered eight awesome apps and resources that can be used to replace the book-learnt, desktop-written web development ways of the past. Of course, we don’t have the time, the resources or the human capacity to create a roundup of every web development-related app or resource, so this roundup has covered some of my favourites. If you’ve got your own, share them in the comments section below.