WARNING: This article is loaded. Cheers…
This article is under constant development. For ANYONE out there please leave a comment if there is a nice library that I am simply not aware of. I’d love to learn more! Amadou, Andre, please add to this article as you see fit.
The following I will not go over in detail since I assume you are already familiar with them. (If you are not… Are you fucking serious? What are you doing in the Web Industry? Get off this planet! NOW!!! PULL THE CHUTE!!! Go back to McDonalds dude!!!)
- jQuery – if you dont know what this is, read the italic text above. Everything is built on top of jQuery nowadays, including Bootstrap.
- Twitter Bootstrap – same comment as above. Although I’ll be more lenient here.
- CSS component: It has nice CSS. Very nice. Comes with responsive too using span1 .. span12 classes (version 2) or col-md-1 .. col-md-12 classes (version 3). It is clean. It allows nesting.
- JS component: is an extension of jQuery. With bootstrap you can have cleaner code since the different fancy UI componenets are activated from classes.
- Plugins: Bootstrap has many plugins, most of which are fancy UI components. Color picker, Date range picker, trees, wizards, and other creatures.
- jQuery UI – as the name says, it is (again) an extension of jQuery that provides UI elements such as datepickers, accordions, tabs, sliders and other components that have become a standard in today’s Web Industry. In face of Bootstrap, however they are a bit redundant, although this is an interesting page, which shows that they have apparently joined forces. Not sure about that.
Knowing these libraries is very important if you want to be part of today’s cutting edge Web 3.0 world.
Similar to knockout, maybe even more powerful. It adds the ability to create your own HTML elements. It also adds some nice AJAX wrappers. In knockout you have to call $.ajax yourself. Here are some angular-related articles on Coding Insight.
DO NOT MIX THEM
There are a lot of such frameworks. They do get old after a while. The only question remaining is which framework will win in 10 years time?
Core libraries and functions
- jquery-cookie.js – set and unset browser cookies with $.cookie(…)
- moment.js – a complete module for date/time/datetime/timespan arithmetic, parsing and formatting.
- Datatables – a jQuery plugin for rendering table elements more pretty. Adds column sorting and pagination. Makes me feel dumb after spending years doing all this functionality manually.
- Knockout compatibility: it works with knockout too! But you need an extension, written by Chad Mullins. Check out this article where I hack Chad Mullin’s knockout extension for datatables. And by hack I mean make it better, so please take my version. TY : )
- Chosen – I needed this so bad at my previous job! It transforms the ugly select and multiple select HTML elements into nice auto-complete fields with deletable tags. It even supports optgroup!
- Date range picker – this one is a bit over the top, but why not, right? Written by Dan Grossman, requires moment.js (see below). It also allows you to select time as well as the date via the timePicker option.
Rich text editors
- ckeditor – they claim to be the best. They probably are. This is the most popular rich text editor. It is very sophisticated and comes with a lot of functionality and buttons, if you like. Don’t miss out on a jquery extension of ckeditor as well.
- wysihtml5 – another WISIWYG editor, or so he claims to be…
Vector graphics and SVG
- Raphaël – simplifies working with vector graphics on the web. Pie charts, bar graphs, line plots, maps! This will put you eons ahead!
- jQuery Mapael – world map widget built on top of Raphael. Once again, do not reinvent the wheel!
- jqvmap (jQuery Vector Maps) – yet another map of the world, Europe, Africa, Asia, Americas, etc.
Exotic UI widgets (FREE!)
- UniformJS – slick UI. Checkboxes, radio buttons, select drop-dowsn. Nuf said.
- bootstrap-toggle-buttons – ON/OFF switches in different colors.
- fullcalendar – big calendar with scrolling, month/week/day views and ability to add event balloons.
- jquery-knob – neat circular progress bar or indicator or draggable circular user control.
- jQuery tags input – enter tags or keywords, if you like. Similar to Chosen but with freedom: you can type anything you want, hit ENTER and it turns it into a tag. Attention: it keeps the tags comma-separated in the original input field so comma is a forbidden character. In fact, pressing comma is equivalent to pressing ENTER.
- gritter for jQuery – notification popup that pops up in the corner of your screen.
SUPER Exotic UI widgets (FREE…?)
- Isotope – Why? Just ’cause… But there is a license. It’s not too bad. Read this. “If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required.” -metafizzy.co