Web Tools Weekly Issue #18 (JS Libraries and Frameworks)

Issue #18 (JS Libraries and Frameworks)11/21/13

Using jQuery, there are different ways to get the height and/or width of an element. First, you can use .width() or .height():

var elWidth = $('#example').width();
var elHeight = $('#example').height();

And you can use the same methods to set them:

$('#example').width(300);
$('#example').height(200);

Simple. and you probably already knew those.

However, the values that are returned when you get the width or height do not include padding, borders, or margins. Let's remedy that by using two different methods to get the values:

var elWidth = $('#example').innerWidth();
var elHeight = $('#example').innerHeight();

Using .innerWidth() and .innerHeight, the values returned will include any applicable padding on the elements. These methods can only be used to get, not to set the dimensions.

There's also the .css() method:

var elWidth = $('#example').css('width');
var elHeight = $('#example').css('height');

The difference in this case is that these methods will always return the width and height as a px value (not a number like the others mentioned here), and they're always irrespective of padding, borders, or margins. And of course, you can use these to set the width/height.

In addition to those, there's also .outerWidth() and .outerHeight():

var elWidth = $('#example').outerWidth();
var elHeight = $('#example').outerHeight();

These do the same thing as the 'inner' counterparts, with the difference being that they will add any specified border widths to the returned values and they optionally take a single Boolean argument to include any applicable margins:

var elWidth = $('#example').outerWidth(true);
var elHeight = $('#example').outerHeight(true);

There is one important factor to consider here: When the box-sizing property is present, the results will vary depending on its value.

And as an even further quirk here, if you use jQuery prior to version 1.8, you'll notice that the .css() method has different results with box-sizing on/off. That is, it will be the same as using .width() and .height() except with px values.

To demonstrate all these methods with and without box-sizing present, I've set up the following JS Bin demo. Use the "toggle..." button at the top to disable/enable box-sizing, then notice the different values that are outputted on the page for each separate width/height method.

For further details on all these methods, check out the jQuery documentation.

Now on to this week's roundup of libraries and frameworks!

JavaScript Frameworks and Libraries

Breeze
"Helps you manage data in rich client applications. If you store data in a database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you."

HappyRhino
"Gives structure to client-side web applications by bringing a complete build system with a a rich API similar to Backbone.js."

Snap.svg
"Makes working with your SVG assets as easy as jQuery makes working with the DOM."

TogetherJS
"A free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time."

Webix
"Offers a striking range of user interface widgets that cover the most required elements of enterprise apps." Widgets include data tables, charts, accordions, windows, toolbars, and much more.

Template-Engine-Chooser!
Answer some questions and this info-tool by Garann Means will tell you which template engine (Mustache.js, Hogan.js, etc.) is right for your project.

AdminJS
This looks cool. It's "a client-side administration framework for interacting with your backend." It's a self-contained Ember.js application and its back-end agnostic.

HTML(.js)
A DOM manipulation library that "lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code."

Kal
"Kal is a highly readable, easy-to-use language that compiles to JavaScript ... Kal makes asynchronous programming easy and clean by allowing functions to pause and wait for I/O, replacing an awkward callback syntax with a clean, simple syntax."

Motio
"a small JavaScript library for simple but powerful sprite based animations and panning. It takes an element, and changes the background position to create an animation effect."

Lo-Dash
A fork of Underscore.js, this is a "utility library delivering consistency, customization, performance, & extras."

Thorax
"An opinionated, battle-tested Backbone + Handlebars framework to build large scale web applications."

fileAPI
A set of JavaScript tools for working with files. Tons of great options in this toolkit.

w2ui
A set of jQuery plugins for front-end development of data driven web applications, featuring a number of common UI widgets for layouts, grids, toolbars, forms, and more.

Architect
"A JavaScript library built on top of Web Workers. [Architect] will manage and polyfill them workers so you don’t have to."

Express
"A minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications."

JointJS
"An open source modern JavaScript library for creating diagrams. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders."

scaleApp
"A tiny JavaScript framework for scalable and maintainable One-Page-Applications / Single-Page-Applications. The framework allows you to easily create complex web applications."

Troop
Full-featured, testable OOP with distinct features that set it apart from other well-known libraries.

Bindr
"A small JavaScript dependency injection framework."

AmplifyJS
"A set of components designed to solve common web application problems with a simplistic API. Amplify's goal is to simplify all forms of data handling by providing a unified API for various data sources."

Spectacular
A Behavior-driven development framework for CoffeeScript and JavaScript that attempts to bring the power of RSpec to JavaScript.

Suggest Your Tool via Twitter

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.

3 CSS E-Books for $7!

To help Web Tools Weekly stay ad free, you can offer support:

Criticism? Corrections?

Suggestions, corrections, improvements? Feel free to reply to this email.

Before I Go...

You might want to browse Stack-Ed, a website that lets you look up the posts of the most reputable users across the entire Stack Exchange network. For example here's the JavaScript category and here's one for .. umm... LEGO® building?

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly