Recent Posts

/ / The 10 Best Code Testing Sites on the Web

The 10 Best Code Testing Sites on the Web

Edit

The 10 Best Code Testing Sites on the Web

 March 21 2012 4,535 Viewstags:     
This is a list of some of the best sites on the web for a web developer to test code snippets and share them with others. These sites allow you to run and compile code without requiring you to upload files to servers and all the other stuff generally involved with sharing and testing code. This list is not complete as there are hundreds of sites that do similar task, these are simply the best of the best. Please feel free to leave any comments at the bottom and share this article with your social friends.

Dabblet.com


Dabblet.com is AMAZING. It is kind of like the modern day version of JSFiddle but is more catered to testing and sharing HTML and CSS code where JSFiddle is more catered to Javascript code. However Dabblet is still capable of running Javascript code in your snippets.

Dabblet Key Features

  • Beautiful Syntax highlighting
  • Option to use -prefix-free https://leaverou.github.com/prefixfree  so that you won’t have to add any prefixes in your CSS code
  • You can save your work in Github gists, embed it in other websites and share it with others
  • Option to link you Github Gists account and save all your Dabblet’s as Gists
  • Option to Save anonymously
  • Option to view CSS and Result, HTML and Result, or Each one in a separate screen. Also possible to view the Result with the code overlaying on top of it
  • CSS Hover Previewers (listed below)
  • Images: Shows a thumbnail size of the image in a preview window
  • Colors: When hovering a color name, RGB, HSL, or Hex code, it will show the actual color in the preview window
  • Sizes: When hoving a size (20px etc..) it will show a ruler in the preview window that is the actual size of the size listed
  • Gradients: On hover will show a preview of the gradient
  • Fonts: If avaialble will show a preview of the font when hovered
  • CSS Transitions: Will show a live timer that moves at the speed the transition time is set at!
  • CSS Cubic-Bezier: Wioll show an image of the Cubic-Bezier path
  • Entity previewer: Something like &#10084 will show an image of a Heart in the preview window
https://dabblet.com/ was built by Built by Lea Verou

JSFiddle.net

jsfiddle.net
JSFiddle.net let’s you create, test, and share Javascript, HTML, and CSS

JSFiddle Key Features

  • Option to include one of these Javascript Libraries Mootools, jQuery, Prototype, YUI, Glow, Dojo, Processing.js, ExtJS, Raphael, RightJS, Three.js, Zepto, Enyo, and Shipyard.
  • Option to include an external CSS stylesheets and Javascript files
  • Can process AJAX requests with JSON, XML, or HTML results
  • Option to TidyUP (Re-Indent messy code)
  • Option to run JSLint on the code to test for valid code
  • Can save JSFiddles to your account and mark as Public or Private
  • Can save JSFiddles without an account and share with friends
  • Option to view split panels to show HTML, CSS, and Javascript all on the same window or option to View the result in it’s own window
Here is an example JSFiddle Example that will fetch recent Twitter tweets from @JasonDavisFL
https://jsfiddle.net/

TinkerBin.com

TinkerBin.com
TinkerBin.com is similar to JSFiddle but lacks some of the more advanced features like including external CSS and Javascript files.
It makes up for this by adding some features though. For example it has support for LESS, SASS (CSS pre-processors) and HAML and CoffeeScript.

RubyFiddle.com

rubyfiddle.com
Rubyfiddle lets you run and share Ruby code and snippets. You can see an example Ruby code I did that makes an API call to Forrst.com and returns a JSON response here…https://rubyfiddle.com/riddles/3026c

PythonFiddle.com

pythonfiddle
Pythonfiddle is very similar to Rubyfiddle above but for the Python language
https://pythonfiddle.com/

DOTNetFiddle.net

dotnetfiddle
DOTNetFiddle is very similar to RubyFiddle and PythonFiddle above but for the .NET languages C#,VB.NET, and F#
https://dotnetfiddle.net/

SQLfiddle.com

sqlfiddle
SQLfiddle let’s you build and test SQL based database queries.

SQLfiddle Key Features

  • Build Database queries with MySQL, PostgreSQL, MS SQL Server, and Oracle!
  • Create Database tables
  • Run any query against the table
  • View the resultset
  • View Execution Time
  • View Execution Plan

PHP and Other Languages

https://codepad.org let’s you text and share code snippets in any of these languages: C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Python, Ruby, Scheme, Tcl
https://ideone.com Is like CodePad.org but supports even more languages. You can compile and share code snippets in more then 40 languages!

BONUS: CodePen.io

codepen
https://codepen.io Is one of the newer ones on the market and also has become one of the best as well as one of my favorites!
CodePen has the standard input areas you would expect on a site/tool like this. HTML, CSS, JS, and Output. The catch is, it goes way beyond that and offers some really cool features I will break down for each of these sections below.

HTML Input

The HTML input allows the use of these HTML Preprocessors in addition to HTML…
  • HTML
  • HAML
  • Markdown
  • Slim Template language

CSS Input

The CSS input allows the use of CSS Preprocessors in addition to CSS…
  • CSS
  • LESS
  • SCSS with Compass
  • Sass with Compass
  • Option to add Prefix free which lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

JS (JavaScript) Input

The JS input allows the use of JavaScript Preprocessors…
  • JavaScript
  • CoffeeScript

Other CodePen Features

As you can see from the list above of the supported languages, CodePen.io is pretty advanced and a great tool. To me it is a JSFiddle.net on Steroids. Some other features include…
  • Forking other user’s CodePen’s
  • Github Account integration
  • Syntax Theme options
  • Tab Triggers allow some useful shortcuts to insert chunks of code into a CodePen. Very cool!
  • Color Picker: Alt key on Windows and Option key on Mac will open a color picker when you are inside a CSS Color.
  • External Resources: You can link up third-party JavaScript and CSS files to run in your Pens.
  • JavaScript Libraries: You can by default use jQuery, MooTools, and Prototype
  • Zen Coding is built in! so you can type in the HTML editordiv#page>div.logo+ul#navigation>li*5 and press Tab key. It will then convert it to
    <div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
Share on Google Plus

About Engr. Rokon Khan

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )