Ben Shoemate's Notebook

Advertise here with BSA

One of the greatest benefits the Internet provides web developers is the ability to share and collaborate with other professionals. When you’ve hit a coding roadblock, you can reach out on your social networks to see if your friends can give you a hand.

When you need to debug, experiment with, and share short code snippets, sandboxing tools are immensely useful.

Why use a web-based sandbox tool instead of a testing server or a local web server stack like XAMMP or WAMP? Not having to set up and save HTML, CSS and JavaScript documents simply to test and debug small code snippets, being able to back up your code snippets remotely, and the capability of quickly linking to and showing off your work (which many of these tools can do) are the major reasons you’d want to use them.

In this article, you’ll find some of the best free code sandboxing tools for testing, debugging and/or sharing your code.

Common Features

Though each tool in the list has its own unique features that might make one of them more appealing than another, you’ll find these general features in most of them:

• Simple and optimized for snippets: these tools aren’t meant to be full web-based IDEs/source code editors (like the Amy Editor and Kodingen)
• Web-based: Can run in the browser without having to install any software
• Free: You can use these tools without paying a cent, and many are even open source
• Preview pane: Allows you to see how your code will render
• Runs front-end/client-side code: Can, at the very least, run HTML, CSS and/or JavaScript
• Saving capabilities: Most tools included allow you to download your code and/or save it on-site
• Sharing capabilities: Most tools below are designed with sharing and collaboration in mind

Let’s look at some top-notch, free sandboxing tools and, for each of them, we’ll discuss some notably unique features they have, to help you make an informed decision on which one is right for you.

1. Tinkerbin

Created by web development agency Sinefunc, Tinkerbin is a relatively new code playground that can run HTML, CSS and JavaScript, as well as CSS and JavaScript abstraction languages/metalanguages like SASS and CoffeeScript. It has keyboard shortcuts that conveniently allow you to navigate efficiently between tabs and code panes. The auto-updating preview pane is a nice feature that displays your work as you’re coding.

2. JS Bin

This open source sandbox tool by developer Remy Sharp is an excellent JavaScript/HTML code-testing tool. It has the option for live/real-time preview and the ability to reference (include) popular open source libraries like jQuery, MooTools, YUI and Modernizr. You can grab JS Bin’s source on GitHub if you’d like to use the tool locally. View documentation, tips and tutorials for this tool on JS Bin’s very own Tumblr blog.

3. JS Fiddle

JS Fiddle is a free sandbox tool for HTML, CSS and JS that has a wonderful set of features, like the ability to reference popular JS libraries/frameworks like jQuery, YUI and MooTools and an Ajax-request-testing functionality for simulating asynchronous calls for your code. There’s a command for running JSLint that can check your JavaScript for code quality and the "Tidy Up" code-formatting command for re-indenting your code. The source code of this open source web tool is available on GitHub.

4. CSSDesk

This online CSS/HTML sandbox tool is a slick way of testing snippets of your style sheet and markup. You have the option of changing the background of the preview pane, which is useful when you have a hard time scoping out the outcome of your CSS/HTML work due to low foreground/background contrast or for seeing how your work looks on different types of backgrounds. You can also maximize the screen viewing size of the preview pane by hiding the HTML and CSS code panes.

5. Pastebin.me

A tool created by developer and entrepreneur Dale Harvey, Pastebin.me is a simple and clutter-free HTML/JS open source sandbox tool. The code pane flexibly resizes depending on your browser’s viewport, which is especially awesome when you’re using a widescreen monitor. It has three useful templates ("HTML", "JavaScript" and "jQuery") for instantly auto-populating the code pane with default HTML tags.

6. jsdo.it

This sandboxing tool emphasizes on community engagement and collaboration, with features that easily give you the opportunity to share your code on your social networks as well as within the site. It has a slick interface, an auto-updating preview pane and the ability to include open source JS libraries. One unique feature is the "Smart phone preview" command that opens a new browser window with the viewport sized equivalently to mobile phones. This tool requires you to sign up and be logged-in.

7. Tryit Editor Instant

This free and no-frills tool allows you to rapidly test your HTML markup. If you don’t need all the features that the above tools offer and simply want one for quickly testing HTML, check this one out. It auto-updates the preview pane whenever you change something in the coding pane. It doesn’t have any saving and collaboration features, so this one is more of a personal tool.

8. PractiCode

The PractiCode online code editor is a supplementary tool for Landofcode.com’s educational web design materials. Though it’s meant to be used alongside their guides and tutorials for practicing and testing code snippets while you’re reading their material, it can be used as a sandboxing tool as well. This online tool can render HTML, CSS and VBScript.

9. JavaScript Sandbox

Are you looking for a dead-simple tool for testing your JavaScript code snippets? Look no further than the JavaScript Sandbox, which is a very austere tool when pitted against the other web-based tools already mentioned (such as Tinkerbin and JS Bin). However, to some, its uncomplicated nature may just be the thing that’s most attractive about this tool.

10. Google Code Playground

Google offers web developers plenty of free APIs and services for things such as web fonts, Google Analytics and a content distribution network (CDN) for popular, open source JavaScript libraries (such as jQuery). Google Code Playground is a sandbox tool that gives you the ability to test and experiment with Google’s awesome APIs.

Also, see the top Google products and services for people who build webites.

Other Tools to Check Out

• Pastebin: A simple text-pasting tool that has syntax highlighting. (No live preview though)
• codepad: A web-based compiler/interpreter for server-side and software programming languages like PHP and C++
• Real-time HTML Editor: A very simple HTML previewing tool
• Ideone: An online interpreter/debugging tool that can run over 40 programming languages

Do you have a favorite web-based sandboxing tool not mentioned above? Please share it with us in the comments.

Related Content

• 10 Excellent Tools for Testing Your Site on Mobile Devices
• 15 Tools to Help You Develop Faster Web Pages
• 10 Excellent Tools for Responsive Web Design
• Related categories: Tools and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience.

So now, you’ve determined that it would be beneficial to create responsive web designs. What tools can help you get the job done?

Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let’s take a look at just  few that I find the most useful.

I divided the tools in this list into four categories:

• Responsive typography
• Flexible images
• Responsive web page layouts
• Testing and cross-browser support

Responsive Typography

First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography.

1. Lettering.js

Lettering.js, a jQuery plugin for controlling the appearance of your web type, is a great tool to help designers get a chokehold on their typography. Whether you’re working with a responsive web design or not, having this kind of control over your web type can help you craft a truly creative look without resorting to image-based solutions.

In the context of responsive design, Lettering.js gives designers precise control over typography characteristics such as spacing, leading and kerning in order to produce an optimal reading experience in various visual spaces.

2. FitText

Another jQuery plugin, FitText helps you make your headlines responsive. FitText make sure your display text appears optimally on various devices. This plugin may be simple, but its flexibility leaves the creativity in your hands and is easy to implement.

Flexible Images

After setting type, we can move on to tackling the issue of placing images in our responsive web designs. There’s one tool that should be a part of every responsive web designer’s arsenal.

3. imgSizer.js

Before heading straight to the code of imgSizer.js, make sure to read through Ethan Marcotte’s breakdown of what role this script plays in your responsive web designs. Essentially, this script was designed to make sure your images render cleanly in Microsoft Windows. Marcotte’s script does a pretty nice job of cleaning up images that have been sized down automatically by the browser.

Responsive Web Page Layouts

At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Let’s move on to resources related to layout, where most of the action happens in responsive web designs.

4. Fluid 960 Grid System

If you’ve been using the ubiquitous 960 Grid System by Nathan Smith (plenty of us have probably used it for projects or experimentation at some point), check out this fluid adaptation of the original project. If you’re comfortable with the original 960.gs, then you already know how to use Fluid 960 Grid System.

5. Gridless

If a grid system for web page layouts seems too restrictive to you, check out Gridless. Gridless is built to be leaner than other grid systems and was constructed with responsive designs in mind. The Gridless code bases its philosophy on the much-discussed mobile first method for crafting websites that must be delivered to a multitude of device environments.

For designers seeking more of a barebones, content-focused approach to responsive web design, you may find yourself quite at home with Gridless.

6. PXtoEM

A tedious mathematical process associated with converting fixed-width design work to a fluid layout is converting absolute units of measurements (i.e. px and pt) into relative units of measurement such as ems and percent (%) for typography, spacing, container widths, etc.

PXtoEM is a tool that provides users with a simple conversion tool to help them with all the math. The site also allows designers the ability to quickly and easily change the base font size of their layout to something that leads to more manageable math.

For example, in your HTML document, setting your body element’s font-size to 62.5% gives you the more convenient conversion ratio of 1em is to 10px, making unit conversion a little easier to do.

Testing and Cross-Browser Support

Finally, as we create our responsive web design, we’ll come to the point where our web type is clean and adaptive, our images are flexible and our layout is fluid.

Now we need to make sure that our site works in as many browsing environments as possible.

7. Adobe Device Central

The best way to test your website on different devices is to actually test it from within the devices themselves; nothing compares to seeing how your website actually looks and behaves within a particular mobile gadget or computer.

However, for those of us who don’t have the budget for hundreds of new gadgets, the solution comes in the form of Adobe Device Central. Device Central is one of the better pieces of software I’ve used for testing a site out on different devices.

If it’s variety and range you seek, Device Central won’t leave you disappointed. With an actively growing device library to choose from, users will find pretty much every major device on the market, ready to load in and test.

Testing websites has been made easy as well: Simply input the URI of the web page (local or remote) and then you can freely switch between the devices you want to test it in.

8. Web Developer

While Device Central (above) is cheaper than purchasing a bunch of devices, it still may be outside the price range of some designers’ pocketbooks.

A fantastic alternative (or additional tool alongside Device Central) is the Web Developer browser extension. Available for Firefox and Chrome, this extension provides designers with several tools that come in handy when developing responsive or fluid websites.

Most notable is the built-in ability to resize your browser window with the click of a button. New size presets can be saved and used instantly.

Other helpful features include viewing CSS by media type and outlining your containing elements, which I find useful for quickly identifying break points (or potential break points) in a design.

9. Respond.js

One of the glaring disadvantages of using media queries is that they are part of the CSS3 specifications and therefore is an absent feature in older browsers, such as in IE8 and below.

Of course, one might argue that we don’t see a lot of mobile devices running IE6. But one thing to note is that responsive web design isn’t just about mobile devices, it’s a way of developing sites that become optimized for all types of browsing situations. For example, IE7 or IE8 users might still benefit from a site that renders a different layout on large, widescreen monitors versus a small-screen netbook.

Fortunately, we have Respond.js, a lightweight, open source script that gives us more options for executing media-query-driven responsive web designs in IE6, 7 and 8.

The script is small — only 1KB when served gzipped to site users — and is unobtrusive, so there’s little excuse not to use it!

10. Modernizr

Much like Respond.js, Modernizr is here to bring designers the power of HTML5 and CSS3, even in older browsers. While it’s not as lightweight as Respond.js, it does give you media-query-like abilities in older browsers.

The other exciting capability Modernizr brings us, as it relates to responsive web design, is some added support for the very intriguing — but currently problematic and tumultuous — W3C specifications of the Flexbox model that allows for easier and more robust web page layouts.

Modernizr also provides conditional loading features. If you’re concerned about loading many resources because of page speed concerns, Modernizr allows you to conditionally load certain resources based on the user’s browsing circumstances.

Responsibly Responsive

Not every responsive web design project is going to require all of the resources mentioned here. As always, restrict your design projects to only the components that are required to achieve the goals desired. And then, when appropriate, sprinkle in features that can enhance the user experience for as many users as possible without degrading it for anyone else.

These resources were chosen based on their ability to help you complete your responsive web designs more efficiently.

Adaptive and responsive web design practices are still in its beginning stages, but they are important because the diversification of browsing devices and viewing methods — like 3D on the Web, for example — is going to continue as our industry progresses into the future.

If you know a tool that can help in building responsive web designs, share them in the comments!

Related Content

• 10 Excellent Tools for Testing Your Site on Mobile Devices
• A Quick Look at Mobile Web Designs
• Building Mobile Web Apps the Right Way: Tips and Techniques
• Related categories: Tools and Web Design

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

This week Basho, the company behind the open source NoSQL database Riak, released a beta of Riak Pipe. Basho community manager Mark Philips describes Pipe as "more or less a rewrite of our existing MapReduce framework. It builds on the lessons we learned in the initial (and still in use) version of MapReduce." You can find the code in GitHub.

Sponsor

Basho Senior Software Engineer Bryan Fink elaborates in the official announcement:

Essentially Riak Pipe allows you to specify work in the form of a chain of function pairs. One function of that pair describes how to produce output from input, and the other describes where in the cluster an input should be processed. Riak Pipe handles the details of ferrying data between workers by building atop Riak Core's distribution power.

Riak Pipe will eventually power Riak's MapReduce system and expand its MapReduce capabilities. You can get an early look at a Riak branch that integrates Pipe here.

You can learn much more about how Pipe works in the Readme file, and you can learn more about how Riak is being used in the real world here.

Twitter continues to add a staggering amount of 460,000 users each day. In order to be fully equipped to stay on top of this popular web service, you can use Twitter tools to help. Here are 10 fresh, new Twitter tools that you can use to achieve greater productivity on Twitter-related tasks.

1. The Archivist

This tool gives you insights and data about a specific search term. Simply search for terms that interest you and The Archivist will present you with plenty of information such as how much the term has been tweeted, top users that use the term, how many retweets the term has gotten, and more. It also lets you search for topics and hashtags, and gives you amazing visualizations about the Twitter activity surrounding them.

The Archivist allows you to download the data so you can go and pull it into presentations, reports and other analytics tools.

2. Tweriod

This Twitter tool analyses your tweets and your followers’ tweets and then gives you a graph of times of the day and days of the week your tweets will have the most visibility. Super simple and very useful. It’s an app that attempts to answer one question: What times are your followers most active?

Tweriod saw development at a great pace in the past few weeks. It started out as a simple service a few months back, but has recently received an overhaul in its design and in its algorithm.

3. ManageFlitter

ManageFlitter has been around for a while; however, a few weeks ago, the app rolled out an overhaul and launched a pro version of its service. Managing your Twitter followers is now easier than ever before.

With ManageFlitter, you can unfollow Twitter accounts that don’t follow you back, users that clutter your Twitter stream, and people who’ve stopped using Twitter.

There is no signup or registration process; you simply connect using Twitter’s authentication system and off you go.

4. Buffer

(Full disclosure: I work at Buffer.) There exist many different tweet-scheduling services out there. However, Buffer gives you a simpler and hassle-free solution than other services you might know of (such as Hootsuite or CoTweet). Buffer allows you to add many tweets at once, without flooding your followers with too many tweets back to back. All you do is throw a few tweets in your Buffer and the app then schedules them for you throughout the day. No need to figure out when to tweet. It gives your Twitter stream better consistency.

Another great feature is that you’re able to add tweets to your Buffer from any web page using a browser extension.

5. Hashable

This high profile New York City startup gives you a chance to document all the relationships you make on Twitter and other social networks. It’s a new way of sharing the people you have met and can become an online space you can always go back to as a contact list.

It works in a very simple manner: You simply tweet out hashtags alongside an introduction or piece of information in reference to the person you have met.

What you’ll appreciate with Hashable is that it will store all this information in the form of a log so that you can keep track of your contacts. And it’s good fun to use, too.

6. Qwerly

Qwerly gives you a place to put all your Twitter contacts and other social networking profiles in one place. Another one of these all-in-one apps? I hear you, but Qwerly allows you to make this a fun and convenient experience.

All you do is sign in using Twitter’s authentication and it automatically pulls in all the information for you. Qwerly saves you all the trouble of manually entering your information. In addition, it helps you connect with more users by telling you what other people are up to.

7. Twileshare

You most likely know that there are several file-sharing tools out there for Twitter. In the past few weeks, I tested a few of them, and my decision is firm that Twileshare is the best one out of the whole bunch.

You simply upload files and share them with your followers, all in one tweet. The files are safely hosted on Twileshare’s servers and you get a generous storage space of 1GB to start out with. You’re able to share a variety of file formats such as PNG, GIF, JPG, DOC and PDF files. Another neat feature on Twileshare is that you’re able to see the amount of views your files get.

8. Twoolr

This app gives you detailed statistics about everything happening around your Twitter account. It tells you about your mentions, retweets, the words you’re using, the progression of your follower count, and more.

9. Deck.ly

At a market share of just above 10% of all Twitter usage, it was only a matter of time til Tweetdeck would extend its functionality.

Deck.ly allows you to write updates longer than Twitter’s 140-character limit. The first part of a message over 140-characters will be tweeted alongside a link to a new platform Tweetdeck created so that your followers can view the entire message.

It comes in super handy when you need to reply or send out tweets without having to resort to cutting down your message. It even allows you to include embedded videos.

Deck.ly is sort of like Posterous on top of the Twitter platform.

10. Proxlet

This tool allows you to mute certain tweets without unfollowing the person altogether. It also eases the pain of finally getting rid of Foursquare tweets and tweets about trending topics that you no longer want to hear about. You can do this under Settings by blocking whole hashtags, terms or apps.

Proxlet works on Tweetdeck, iPhone and other Twitter clients.

Related Content

• 10 Twitterific Twitter Tools
• 50 Beautiful & Unique Twitter Profile Designs
• 10 Features That Will Make Twitter Better
• Related categories: Tools and Resources

About the Author

Leo Widrich is a Social Media enthusiast with an extra large addiction to Twitter. As Co-Founder of Buffer, he blogs at the Buffer blog every week to help their users make the most of their service. Say "Hi!" on Twitter @leowid.