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 Key Features
- Beautiful Syntax highlighting
- Option to use -prefix-free http://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
❤ will show an image of a Heart in the preview window
http://dabblet.com/ was built by Built by Lea Verou
JSFiddle Key Features
- 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
Here is an example JSFiddle Example that will fetch recent Twitter tweets from @JasonDavisFL
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 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… http://rubyfiddle.com/riddles/3026c
Pythonfiddle is very similar to Rubyfiddle above but for the Python language
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
http://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
http://ideone.com Is like CodePad.org but supports even more languages. You can compile and share code snippets in more then 40 languages!
http://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.
The HTML input allows the use of these HTML Preprocessors in addition to HTML…
- Slim Template language
The CSS input allows the use of CSS Preprocessors in addition to CSS…
- 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.
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.
- Zen Coding is built in! so you can type in the HTML editor
div#page>div.logo+ul#navigation>li*5 and press
Tab key. It will then convert it to