DevRes - Development Resources

Firstly an introduction to a cool on-line JavaScript editor - I know, not another one, you’re thinking, but this is a little different. Createjs.org has created a new interface to various third party editors that allows you to make ANY on-line content editable, and integrate it into your own back end CMS.

Check it out: http://createjs.org/

Secondly, here’s an awesome suite of JavaScript tools that for some reason I only just discovered. CreateJS.com.

The suite includes the following:

• EaslJS - Graphics library for working with the HTML5 canvas
• TweenJS - Transition and animation library for HTML5 and JavaScript properties
• SoundJS- Abstracted cross-browser HTML5 audio library
• PreloadJS - Manage and coordinate loading of assets and resources. Uses XHR2 to provide real-time progress information
• Zoë - Export flash animations to EaslJS sprite sheets for use in JavaScript animations

http://createjs.com/

Take a look at these three articles on mobile development with HTML5, then checkout some of the frameworks and plugins below for a plethora of resources!

Blogs and examples

How I built the Hacker News mobile web app:
http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app

IBM: Create offline web applications on mobile devices with HTML5:
http://www.ibm.com/developerworks/web/library/wa-offlineweb/

MSDN: Using HTML5 to create mobile experiences:
http://msdn.microsoft.com/en-us/magazine/hh975346.aspx

Frameworks and resources

jQuery Mobile - Touch-Optimized Web Framework for Smartphones & Tablets:
http://jquerymobile.com/

jQTouch - A Zepto/jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.
http://www.jqtouch.com/

KendoUI - Build HTML5/JavaScript mobile apps that automatically transform to the native look-and-feel of iOS, Android and BlackBerry:
http://www.kendoui.com/

Skeleton - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development:
http://getskeleton.com/

PhoneGap - the only open source mobile framework that supports 7 platforms:
http://phonegap.com/

Titanium SDK - Create rich native iOS, Android, hybrid, and mobile web apps from a single JavaScript-based SDK:
http://www.appcelerator.com/platform/titanium-sdk

FitVid.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
http://fitvidsjs.com/

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs.

The site creators aim to support ALL actively developed frameworks - to ensure testing compatibility.

Here’s an example of JsFiddle being used to test the performance of various methods of achieving a “string.repeat” function in JavaScript.

http://jsfiddle.net/disfated/GejWV/

Aloha Editor

Aloha Editor is a semantic Rich Text Editor framework written in Javascript with best support of xHTML5. You can integrate it in a CMS, blog, wiki software or any other project where you need to edit content with a web based tool. Use it like a supersonic textarea. You can edit almost any DOM element with this supersonic textarea, but you need to care about configuration and storage.

http://www.aloha-editor.org/

Maqetta

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

Maqetta is available under a commercial-friendly open source license. You can download the source code and install it on your own server, customize the code to fit your needs and/or contribute improvements to the open source project.

http://maqetta.org/

BlueGriffon

BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox 4, it’s a modern and robust solution to edit Web pages in conformance to the latest Web Standards.

It’s free to download (current stable version is 1.0) and is available on Windows, Mac OS X and Linux.

http://www.bluegriffon.org/

CKEditor

CKEditor is a text editor to be used inside web pages. It’s a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.

Because CKEditor is licensed under flexible Open Source and commercial licenses, you’ll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

http://ckeditor.com/

TinyMce

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB.

TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

http://tinymce.moxiecode.com/

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Highcharts

License: Free for Open-source  / Paid commercial

http://www.highcharts.com/

Highcharts is a pure JavaScript charting library for those who want a stand-alone charting solution with the ability to add and customise the solution.

License and Pricing: http://www.highcharts.com/license

Zingchart

License and Pricing: https://www.zingchart.com/store/buy.php

http://www.zingchart.com/

• More than a Dozen Chart Types
• Handles Massive Data Sets (10,000 points and more)
• Fly thru Chart Data with Zooming, Scrolling, and Filtering
• Build Interactive and Drillable Graphs
• Live Data Feed Support to Update Charts in Realtime
• Flash (AS3) Charts
• HTML5 Canvas Charts
• JSON
• Update Graphs with Ajax
• Control Charts with Full JavaScript API
• And more…

jqPilot (open source)

License: Free / open-source

http://www.jqplot.com/

jqPlot is an open source project by Chris Leonello.
jqPilot supports Log-scale-axis, drag and drop of data points with update events adn automatically computer trend lines.

gChart (Google Charts API for JQuery)

License: Free / Open-source

http://keith-wood.name/gChart.html  or  http://plugins.jquery.com/project/gchart

Add Google Charts to your pages via a simple JavaScript interface. You provide the data and Google does the rest.

• Complete coverage of the Google Chart API;
• Show your data on line, X-Y, bar, pie, radar, or scatter charts;
• Control legend appearance, chart background, and title;
• Control axis placement, content, and appearance;
• Control line appearance and fills;
• Add markers or dynamic icons to your chart;
• Display maps with country or US state data;
• Show a Google meter or a Venn diagram;
• Generate QR codes or mathematical formulae;

JS Charts

JavaScript based chart generator that requires little or no coding.

License and Pricing: http://www.jscharts.com/buy (Free for non-commercial)

jQuery Visualize: accessible charts using canvas

Turn any HTML Data-table into a nice css styled chart using jQuery!

jQuery + Flot: Plots, Canvas and Charts

A charting example using PHP, jQuery and Flot

Flot - Plotting for jQuery

XML/SWF Charts

Create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

Plotkit - Chart plotting

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Emprise Javascript charts

Free version has no source-code and fewer charting options than the premuim versions