Saturday, January 18, 2014

7 Websites To Test Your Codes Online!

The modern trends and web apps have brought about a dramatic change to the fashion of developing web. Yes, you need certain IDE to code new files and save them for deployment. But how about simply testing your code snippets? Well, forget downloading apps and testing your codes as we bring to you 7 interesting web apps to test your codes online. All what these apps require is an internet connection. These tools will definitely come in handy especially when you’re scrambling to debug your codes of JavaScript or PHP.

coding, code testing, programming, developing, software developer, web developer, debugging tool, code testing tool, online code testing tool, online code testing website




1. Codepad

Originally created by Steven Hazel, Codepad is a unique web app where you can share code syntax across the Web. Instead of just debugging, Codepad allows you to copy/paste important bits of code to share online.

The output screen displays any error messages associated with your code. The left-hand menu radio buttons allow you to change the parsing language from C/C++, Perl, PHP, Python, Ruby, and tons more.

2. Write Code Online

WriteCodeOnline.com actually redirects to their JavaScript editor. You can choose among JS, PHP, and basic URL encoding. Their application is very safe to use and feels lighter than other alternatives.

What’s interesting is that you’ll see the output results directly underneath the text field. So when you hit “run code” it will parse through everything and display the result for you to see. It can be tough debugging some larger PHP scripts because you need to include other files.

3. Tinkerbin

Tinkerbin is actually one of the more popular online code editing resources. It supports web developers coding in HTML5/CSS3/JS and renders the output directly on-screen.

The rendering engine also supports more obscure languages such as Coffeescript and Sass within CSS. Their console is very advanced and clearly supports many of the trends which you will expect for the future of web design.

Another interesting note is how it supports keyboard shortcuts. This is something you hardly see on any webapp, except for any in-browser source code editor. As you type new tags, the IDE will auto-indent new lines.

4. JS Bin

Similar to Tinkerbin, jsbin is a simple JavaScript debugging console. Their pitch involves a collaborative effort where you can share a private link with other developers and write together in real time.

Although its interface might be a bit confusing to newcomers but to help you through, the developers have setup some online tutorials that can be read through if interested. Basically one can select between any number of JS libraries – jQuery, JQuery UI, jQM, Prototype, MooTools, there are dozens to choose from.

As you’re coding different elements its autosaves your drafts. Also you have the ability to download your final product or keep the source code saved online. Their system is much more advanced for exporting and keeping your code as a bare template.

5. jsFiddle

If you have browsed through Stack Overflow, we are sure you know about jsFiddle. Its interface is a whole lot different as compared to JS Bin, and this supports more complex functions.

Right away, you can signup for a free account and start saving your code samples online. jsFiddle offers a short URL which you can share around the Web via Twitter, Facebook, even Stack. And you don't even need an account to start coding.

jsFiddle also supports the inclusion of libraries such as Prototype and jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.

6. CSSDesk

Let's move to the world of stylesheet language from scripting into and we have CSSDesk. This gives you a similar setup like all the rest with your source code on the left and final webpage render on the right. This webapp is great for building small webpage templates and testing the longer CSS3 properties with gradients and box shadows.

This app also allows you to download source code as files to your computer. This is a wonderful replacement in situations where you are working on a laptop without any IDE software. You can even generate a short URL link to share online.

7. Google Code Playground

It is surprising how many developers are not aware of the Google code sandbox. It gives you full access to their APIs and can debug all your code right from the same window.

When we say APIs, we actually mean that you can pull data from the biggest Google products. Listing blog posts from Blogger, markers from Google Maps, and even video players directly from YouTube. As you click through these different examples the live preview box will update accordingly.

Although all that sounds too good but it might not be the perfect tool for debugging everything you write. Although Google is a huge company with a lot of open source API data so if ever you need to pull content from YouTube or custom Google Searches, this is the sandbox you want to use.

No comments:

Post a Comment