JQuery – HackIX

10 April, 2012

JavaScript, CSS, HTML Frameworks and Tools

Greg posted a very useful list of resources; One of the challenges in the world of HTML/JavaScript/CSS app development is cobbling together your kitchen sink of frameworks, tools and other technologies. When you start looking around, it feels like there is an endless list of options, which is good and bad! Recently, I’ve been gathering a list of what’s popular these days and thought it might be useful for others to share. If you see anything obvious missing, please let me know. Thanks to the following for helping me put together this list: Ray Camden, Andy Trice, Philip Wilson, Christophe Coenraets, Piotr Walczyszyn, and James Brown.

In no particular order:

Adobe Edge – HTML5/JS/CSS animation/interaction tool – http://labs.adobe.com/technologies/edge/
Less Framework – CSS grid system/layout – http://lessframework.com/
Less – alternative CSS syntax – supports OO-like syntax – referenced by Google at Google IO – used in many projects – http://lesscss.org/
Saas – another alternative CSS syntax – similar to Less – http://sass-lang.com/
Kendo UI Framework (mobile coming soon) – http://www.kendoui.com/
Sencha – http://www.sencha.com/ – multiple products – including Sencha Touch, Charts, etc.
JQuery UI – http://jqueryui.com/
JQuery (core) – http://jquery.com/
JQuery Mobile – http://jquerymobile.com/
xui -minimalist JQuery-like framework – http://xuijs.com/
zepto.js – minimalist JQuery-like framework – http://zeptojs.com/
Backbone.js MVC framework for JavaScript – http://documentcloud.github.com/backbone/
Underscore.js – Kitchen-sink utilities for JavaScript – http://documentcloud.github.com/underscore/
Modernizr – JavaScript library to detect device features – very popular – http://modernizr.com/
cubiq.org – home of iScroll, a very popular scroll/list lib – http://cubiq.org/
appMobi – web-based dev with emulation, etc. Also has an HTML5-framework – http://www.appmobi.com/
LeviRoutes – lightweight routes framework for hooking in to HTML5 history – https://github.com/PaulKinlan/leviroutes
Mustache – “logic-less templates” – mentioned by Google presenters at Google IO – http://mustache.github.com/
Midori – JavaScript framework – JQuery-like with some unique features – http://www.midorijs.com/
Knockout.js – JavaScript UI framework – implements MVVM pattern – recommended by Greg’s brother – popular – http://knockoutjs.com/
AngularJS – MVC framework, two-way data binding, JQuery-compatible – http://angularjs.org/
JSFiddle – online tool for doing lint/tidy/debugging – http://jsfiddle.net/
HighCharts – fantastic looking charts – http://www.highcharts.com/
ZingCharts – HTML5/SVG/VML and Flash charts – http://www.zingchart.com/#welcome
AMCharts – JavaScript/HTML5-based charts. They also offer Flash-based charts. – http://www.amcharts.com/javascript/
HTML5 Boiler Plate – assist with cross-browser issues and other utils – http://html5boilerplate.com/
Bootstrap, from Twitter – Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. http://twitter.github.com/bootstrap/
Popcorn.js – HTML5/JS Media Framework – http://popcornjs.org/
Three.js – JavaScript 3D engine – https://github.com/mrdoob/three.js and http://www.aerotwist.com/lab/getting-started-with-three-js/
PhoneGap – http://phonegap.com
PhoneGap Plugins – https://github.com/phonegap/phonegap-plugins
Require.js – http://requirejs.org – RequireJS is a JavaScript file and module loader
Brunch – http://brunch.io/ – A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.

via Gregs Ramblings.

16 April, 2010

Ajaxify Your Zend_Form Validation with jQuery

Jon Lebensold posts an update to his excellent screencast; We’re going to take what was put together in the last 3 videos and now include some server-side validation that will appear asynchronously. This is an example of using Zend_Form as a validation tool via JSON.

Grab a copy of the project or browse the repository.

UPDATE: as a couple people have mentioned, you can cut down your IndexController even more by using the Zend_Json view helper:
public function validateformAction() { $f = new Form_Registration(); $f->isValid($this->_getAllParams()); $this->_helper->json($f->getMessages()); }

Enjoy!

See it at Zendcasts.

22 March, 2010

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

via Grid Accordion with jQuery | CSS-Tricks.

20 March, 201020 March, 2010

DataTables – table plug-in for jQuery

The other day I had to write a NOC application that shows all active phone lines in an out of a customers telecom cluster, thats a lot of constantly changing data that needed to be displayed.

Some design requirements was;

*NO* refreshes i.e. blinking screen parts (gives NOC personel an epileptic fit after a day staring at it).
No direct database access – read only Json proxy.
Near realtime – 1 second updates.
Group lines on customer. Toggle on and off.
Sortable on all visible columns.
Searchable and one click filters.
Has to work in an Dojo ContentPane.
100% translatable

To the rescue; DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

I can’t recommend it highly enough, configuration is as easy or as hard as you require it to be, draw up a file with a regular table,thead,tbody,tfoot table put it’s id to be example and place this code snippet into the file;
/* * Example init */ $(document).ready(function(){ $('#example').dataTable(); });
Then popp over to Allans excellent Examples page! and if you dont have a sortable, searchable and great looking grid in about 5 minutes, I owe you a beer!
Key features:

Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid – backed by a suite of 1300+ unit tests
Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
It’s free!
State saving
Hidden columns
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Alternative pagination types
Non-destructive DOM interaction
Sorting column(s) highlighting
Extensive plug-in support
– Sorting, type detection, API functions, pagination and filtering
Fully themeable by CSS
Solid documentation
Full support for Adobe AIR

Go NOW and take a peek DataTables (table plug-in for jQuery).