|
|
|
|
Issue #47 (child nodes, JS Libs, JS Utils, Media)06/12/14
There are dozens of methods and properties that let you manipulate and get info from the DOM. Let's look at four not too well known ones that have had support since IE6 but because they were implemented with bugs in old IE, they've only been able to be useful since IE9.
Here's the HTML we'll use:
<ul class="mylist">
<li class="one">Papayas</li>
<li>Lemons</li>
<li><span>Oranges</span></li>
<li>Frankfurters</li>
<li class="five">Eggs</li>
</ul>
|
And now we'll get some info from these elements using the following:
myList = document.querySelector('.mylist');
console.log(myList.childElementCount);
console.log(myList.children[2].innerHTML);
console.log(myList.firstElementChild.className);
console.log(myList.lastElementChild.className);
|
(demo)
Here I'm using childElementCount to find out how many child elements the queried element has. Then I'm using the children collection to get the innerHTML content of the third list item. I then get the class name of the first and last elements in the collection using firstElementChild and lastElementChild.
As mentioned, you can use these methods comfortably in IE9+. The main bug that occurred with these in IE6-8 was the fact that those browsers would erroneously include comment nodes as part of the results.
The main advantage of using these as opposed to the similar childNodes, firstChild, lastChild, etc., is the fact that these deal only with element nodes. For example if you were to use the childNodes property on the list element shown above, you would find there are actually 11 nodes instead of 5, because it also counts white space nodes.
More info on these on MDN.
Now on to this week's tools!
JavaScript Utilities and Polyfills
Parallax.js
"Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead."
Webshim
A polyfill library for a number of HTML5 and JS features (form validation, Geolocation, media elements, responsive images, etc.)
ProtectJS
"Private methods in JavaScript using prototype chaining."
Storage
"Asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage)."
Filtrex
"A simple, safe, JavaScript expression engine, allowing end-users to enter arbitrary expressions without p0wning you."
relativeDate
Angular.js service providing auto-updating, relative time labels like "about 1 minute ago".
FormulaJS
"JavaScript implementation of all functions supported by Microsoft Excel."
sift.js
"MongoDB inspired array filtering."
l33teral
A library to help write cleaner code when dealing with object literals in JavaScript.
multiline
"Multiline strings in JavaScript. No more string concatenation or array join."
CodeGrabber
"Grabs remote code files and embeds them into your website."
FileSaver.js
"Implements the HTML5 W3C saveAs() FileSaver interface in browsers that do not natively support it. "
Multimedia Tools
SVGO GUI
A GUI for SVGO, "a Nodejs-based tool for optimizing SVG vector graphics files."
Compressor.io
"A powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression."
Spine
"An animation tool that focuses specifically on 2D animation for games. Spine aims to have an efficient, streamlined workflow, both for creating animations and for making use of those animations in games."
videoGL
"A jQuery plugin [that] converts standard HTML5 <video> elements in 3D video players, giving you the ability to create interactive 3D animations, add reflections, apply post-processing filters such as sepia, grayscale, film and much more."
video-js
"Element providing a wrapper around the Video.js HTML5 video library."
edit.pics.io
An online photo editor capable of editing photos up to 42mpx in size.
Optimizilla
"Uses a smart combination of the best optimization and lossy compression algorithms to shrink an image file to the minimum possible size while keeping the required level of quality."
payment-webfont
An SVG web font of icons representing main payment systems (PayPal, Visa, Bitcoin, etc.)
JavaScript Frameworks and Libraries
MotorCortex.js
"Makes web animations easy, providing the ability to describe them through CSS-like syntax and stop messing animation logic with your actual javascript code."
JsAction
"A tiny event delegation library that allows decoupling the DOM nodes on which the action occurs from the JavaScript code that handles the action."
ripple.js
"A tiny foundation for creating reactive components with interpolation, data-binding, and plugins. It's simple, flexible and easy to extend."
jtmpl
"Mustache syntax + automatic data-binding = Live templates."
reD3
"An elegant collection of reusable charts and components built with D3.js."
Teddy
"An easy-to-read, HTML-based, mostly logic-less DOM templating engine with support for both server-side and client-side templating."
A Tweet for Thought
Luke Wroblewski tells us what a designer's job is.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
In preparation for the World Cup, you might want to try Goaler Game, a nice looking two-player social football (soccer) game built with web technologies.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
