Fiddle Salad

Web Development with FiddleSalad’s JavaScript IDE

Fiddle Salad Support — Wed, 25 Apr 2012 14:25:30 +0000

A quick overview of FiddleSalad’s JavaScript IDE features including HTML tag completion, live page preview, css tooltips, automatic code completion, and jQuery documentation for quick reference.

What’s New in Fiddle Salad 1.0

Fiddle Salad Support — Tue, 03 Apr 2012 02:11:08 +0000

CSS Tooltips

Hovering over highlighted CSS brings up tooltips. You can get previews for fonts, colors, sizes, and images.

Search & Replace

Ctrl+F and Ctrl+Shift+F opens the search and replace dialogues. JavaScript style regular expressions are supported.

Convert to CoffeeScript

The CoffeeScript to JavaScript conversion box under Tools inserts the converted JavaScript at your cursor position in the CoffeeScript editor. As documentation for most JavaScript libraries are in JavaScript, it makes trying out examples convenient.

Local History

With local history, you never have to worry about losing your changes! All your saved revisions are stored.

Import from URL

Import CSS, HTML, and JavaScript from an existing site by entering its URL. Inline CSS and JavaScript are imported into editors and external files as resources.

JavaScript Debugging

Double clicking or highlighting a variable in the JavaScript editor prints the debug output.

Help Guides

For browser windows larger enough, documentation for all selected languages are shown in a panel on the left.

Jade Templates

To render a template with free variables in Jade, pass in a context object through locals that has properties corresponding to them.

Try Fiddle Salad »

What’s New in Python Fiddle 2.0

Fiddle Salad Support — Sat, 31 Mar 2012 18:22:10 +0000

Major Additions

Search & Replace

Ctrl+F and Ctrl+Shift+R now launches search and replace, respectively. Search also supports regular expressions.

Auto-Complete

Auto-complete has been enhanced to show suggestions as you type, without hitting extra keys. Just type code as usual and choose from the list of suggested code completions.

Revision History

Every time you save, a local revision is created in your browser. Note that these revisions are local and not publicly accessible.

UI Updates

The UI in general has been reworked to be faster and more responsive, especially when browsing saved fiddles and user pages. In addition, bugs with tool bar buttons for small screen sizes have been fixed.

Python

Reload Interpreter

Clicking the reset button will restart the interpreter instead of clearing the namespace, as before. At the cost of taking longer, reset now works in all situations.

Try Python Fiddle »

Django Media Sync JavaScript Debug Processor

Fiddle Salad Support — Sat, 31 Mar 2012 00:57:29 +0000

While wrapping up the release for this month, I was noticed opening a saved fiddle in Firefox appeared to introduce a race condition. The error message in the console wasn’t much help. It just said “b is undefined” and a line of Google Closure compiled JavaScript. I used the JSBeautifier to find, actually guess, the line where the error occurred. So my hypothesis was that the result iFrame wasn’t loaded when the code needed it. Needless to say, loading iFrames using JavaScript was bad enough, and trying to detect when an iFrame is loaded using JavaScript is even worse:

It’s ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it’s ready. Care is always required with cross-frame code execution as things can happen in an order you don’t expect.

Then I had a few genius ideas along with (oh, I had this working in an older version of the software) experience. So to get to the point, a Django Media Sync processor finally allowed me to view the source code while debugging on the actual site. In contrast to setting breakpoints on lines thousands of characters long and reading alphabetized code. Just spending about 5 minutes glancing at the documentation and looking at the file for Closure compiler, I put these lines in a file called combine in my “Python27\Lib\site-packages\mediasync\processors” folder:

def default(filedata, content_type, remote_path, is_active):
return

After adding it in my settings file, running the media sync command, and refreshing; a nice error message showed up in the console. I could finally put debug points in the deployed, combined script files!

The trick with a media processor is that it can return false to just pass it along the pipe, so it can move through multiple processors, even Ruby’s SASS. I noticed this from the way the Closure compiler only returned for JavaScript files and by looking at the parameter names. This is really where well name functions and variables help. I don’t need to read the documentation to know what’s going on.

CrazyEgg Mouse Tracking on Iframes

Fiddle Salad Support — Tue, 21 Feb 2012 19:27:50 +0000

Two weeks ago, I started tracking clicks on our site. Currently, it only it only has Python for the scripting language and this is the main page where visitors land. (There’s an “All Fiddles” page I’m keeping secret because no one has saved anything yet). The confetti report show s all clicks as dots on the page.

I kept expecting people to be clicking on that Introduction example’s output, which emulates a Python console and shows many features of the language implemented. But it turns out CrazyEgg only tracks specific ad-based iframes.

I did learn the lesson that people usually focus their attention on the top left of that page layout pretty soon after I started using it. Consequently, I added a link to the documentation for the logo and put my best example at the top of the list.

New and Returning Visitors on Fiddle Salad

Fiddle Salad Support — Tue, 21 Feb 2012 19:05:52 +0000

Since I registered the domain and started hosting the site in December, the number of returning visitors has increased over the weeks. This indicates visitors are finding the site to be useful, though not saving their fiddles. I plan to introduce the ability to save privately later on.

New visitors were on the rise in January, even without any active marketing on my part. I only started following users on Twitter this month.

getSatisfaction Feedback Forum and SurveyMonkey

Fiddle Salad Support — Tue, 21 Feb 2012 18:56:59 +0000

Thanks to everybody who’s filled out the survey! There are a total of 5 responses so far. The features you value the most will be implemented sooner.

The CoffeeScript and JavaScript options are on the plan for next month. If you want to participate, simply fill out 1 or more questions.

Due to one user wanting support for Python Fiddle, I was in a rush to add the Feedback widget from getSatisfaction. It wasn’t until later that I saw the twitter message was directed @python_fiddle. The plan is to add a support page for Python Fiddle, similar to the one for Fiddle Salad.