Issue #11 (Arrays and JavaScript Tools)10/03/13
This week's issue is focused on JavaScript tools, so it's fitting we start with a brief JavaScript tutorial. You've probably dealt with arrays in JavaScript quite a bit. Below I summarize a few methods and tips for manipulating arrays.
You're probably familiar with the length property to read the length of a string or array. When using this property on an array, it can be used to define a new length. For example:
var myArray = ['html', 'css', 'javascript', 'php'];
console.log(myArray.length);
// 4
myArray.length = 2;
console.log(myArray);
// ["html", "css"]
console.log(myArray.length);
// 2
Notice here, after checking the length of the array (confirming it's "4"), we then set the length to "2" which removes the last two items. If we set the array to a length that is higher than the actual array's length, all the added values will be set to undefined.
The length property also comes in handy if you simply want to add an item to the end of an array. For example:
var myArray = ['html', 'css', 'javascript', 'php'];
myArray[myArray.length] = 'ruby';
// ["html", "css", "javascript", "php", "ruby"]
myArray[myArray.length] = 'python';
// ["html", "css", "javascript", "php", "ruby", "python"]
Notice here that twice I've added a new item to the end of the array, and both times I used myArray.length to do this. The reason this works is because of zero-based indexing. The length value of an array will always be the array's index + 1 (e.g. the original array had 4 items with indexes of 0, 1, 2, and 3). Of course, this is equivalent to simply using push(), the difference being that push() will always return the array's new length value, whereas the other method will return the newly added array item.
Finally, although you can sort an array alphabetically using the sort() method, this won't sort numbers numerically. For example:
var myArray = ['html', 'css', 'javascript', 'php'];
// ["html", "css", "javascript", "php"]
myArray = myArray.sort();
// ["css", "html", "javascript", "php"]
var numericArray = [100, 6, 89, 1276];
// [100, 6, 89, 1276]
numericArray = numericArray.sort();
// [100, 1276, 6, 89]
Notice the first array was sorted fine, but the numeric array was sorted lexicographically. To resolve this, you can do the following:
numericArray = [100, 6, 89, 1276];
// [100, 6, 89, 1276]
var numericArray = numericArray.sort(function (a,b) {
return a - b;
});
// [6, 89, 100, 1276]
As demonstrated here, the sort() method allows you to pass in a compare function that defines how you want the elements sorted.
That's just a few quick tips on using arrays. If you want more:
Now on to this week's JavaScript tools!
JavaScript Libraries
svg.js
A 9k gzipped library for manipulating and animating SVG. Easy to read syntax, modular structure, and includes some optional plugins.
annyang!
"A tiny javascript library that lets your visitors control your site with voice commands." You can try it right on the home page. It "supports multiple languages, has no dependencies, weighs less than 1kb and is free to use."
OJ
"A JavaScript library to build websites with objects." Has jQuery as a dependency and the website includes some on-page demos to show you what it can do.
dna.js Template Cloner
"A JavaScript templating engine to dynamically build DOM elements from data supplied by JSON objects."
Custom Elements
A library of polyfills based on the new Web Components specification that allows you to define custom elements.
Brick
Same idea as the previous, a collection of "UI Components for Modern Web Apps" by Mozilla, again serving as a precursor to the Web Components spec.
Minivents.js
"A small event system for JavaScript."
wu.js
"A library for lazy, functional programming in Javascript... The largest part of wu is dedicated to iterators. Iterators are lazy sequences with a number of methods that encourage functional programming."
JSOperations.js
"A lightweight library for queueing operations ... Operations can be suspended, cancelled, and can have a queuePriority set, which will determine the order in which they execute."
JavaScript Utilities
vex
"Dialogs for the 21st century... You'll love vex because it's tiny, has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds."
break-on-access
"Break on access to a property." Gives you a breakpoint when a property value is being changed. For example, when a cookie is changed or when a script is using scrollTop and causing performance problems.
completely.js
This is a really nice library for autocomplete for forms and it tries to improve the user experience by creating a "compound HTML element" in which the user can type and view options for autocompleting their text. Check out the demos to see what it does.
Fifer
"A lightweight conductor for the HTML5 Audio API with Flash Fallback."
XDomain
"A pure JavaScript CORS alternative/polyfill. No server configuration required - just add a proxy.html on the domain you wish to communicate with."
Perimeter.js
"Creates an invisible perimeter around a target element and monitors mouse breaches." You can use it to lazy load scripts or grab data via Ajax when the user starts to move their mouse towards a certain part of the page.
PACE
Adds a progress bar (pick from various themes) to your page automatically. The script "will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress."
QuestionMark.js
Many apps let you hit the '?' key to bring up a modal window with keyboard shortcuts. I created a script that you can use to add this functionality to any app. No dependencies and it's only ~2kb min/gzip'd.
jQuery Plugins
DataTables
Adds flexible, progressively enhanced interaction controls to HTML tables, including pagination, filtering, multi-column sorting, and tons more.
jQuery Fullscreen Editor
Adds a "full screen mode" button to a textarea. Light (4k) and works on mobile.
Flexisel
"The responsive image carousel with options specifically available for adapting the carousel for mobile and tablet devices."
jQuery.textcomplete
Autocomplete for textareas, similar to what happens on GitHub's comment forms when you push the colon key.
DropKick
Custom select dropdowns.
jquery-enhancedfileinput
Custom file inputs (add styling or a custom button).
windows
"A handy, loosely-coupled jQuery plugin for full-screen scrolling windows."
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
No ads!
To help Web Tools Weekly stay ad free, you can offer support:
Criticism? Corrections?
Suggestions, corrections, improvements? Feel free to reply to this email directly.
Before I Go...
I love it when programmer/developer concepts and workflow get translated into everyday stuff. A while back I came across ForkingRecipes, which demonstrates this perfectly. It's a recipe sharing website modelled after GitHub, letting you save recipes and fork other people's meal creations. Personally, I think everything should have this type of open collaboration.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
