|
|
|
|
Issue #51 (removeChild, JS Libs, Mobile, Media)07/10/14
What do you do if you want to remove all of a specific type of HTML element from a page with JavaScript? For example, let's say you wanted to mimic something that an ad-blocker might do, removing all <object> elements.
Simple, you might say, just use jQuery!
It's true, that would be pretty simple. But how would you do this with plain JavaScript? Well, I'm sure there are a few ways to accomplish this, but I immediately thought of doing this:
var objs = document.getElementsByTagName('object'),
l = objs.length,
i;
for (i = 0; i < l; i++) {
objs[i].parentNode.removeChild(objs[i]);
}
|
Not too bad, right? First we collect all <object> elements in an array, then we get the length of the collection. We then use a for loop to loop through all the elements, removing them from the DOM. But this doesn't work.
Here is the corrected for loop:
for (i = 0; i < l; i++) {
objs[0].parentNode.removeChild(objs[0]);
}
|
(JS Bin demo) Notice, we're still using the "i" variable to start our count, and we're still using the "l" (length) variable to define how many elements to remove. But the difference is, we're not using the i variable inside the loop, to represent which element to remove.
As soon as we remove element "0" in the index of elements, element "1" then becomes the new element "0", and this continues with each removal. That's why the original code won't work, because we don't want to increment the index. It's a fairly small correction, but it does the trick, correctly removing each of the elements, in order.
Like I said, there are probably other ways to do this, and I really have no idea what the performance issues with this technique would be if removing a large amount of elements, but I guess this is just a small reminder that even the simplest of tasks can be somewhat complicated by interacting with a live DOM.
Now on to this week's tools!
JavaScript Libraries and Frameworks
Epoch
"A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations."
Ampersand.js
"A highly modular, loosely coupled, non-frameworky framework for building advanced JavaScript apps."
PhysicsJS
"A modular, extendable, and easy-to-use physics engine for JavaScript."
Boba.js
"A small, easily extensible JavaScript library that makes working with Google Analytics easier." Requires jQuery.
APItizer
"A library that allows you to mock APIs for browser applications with JSON schema. JSON schema is usually used to validate responses from APIs, but APItizer adds the ability to generate data from the same structure."
Fluxxor
A set of tools to facilitate building JavaScript data layers using the Flux architecture by reinforcing many of the core Flux concepts.
ng-inspector
"A browser extension for Chrome and Safari that adds an inspector pane to help you develop, debug and understand your AngularJS applications."
Famo.us
"A free, open source JavaScript framework that helps you create smooth, complex UIs for any screen."
ist.js
"Unlike most other templating engines, it directly generates DOM nodes that you can insert into your document nodes which is often faster than inserting HTML code. It uses indented CSS selectors to describe node trees."
soma-template
A templating engine that will "produce an HTML output, but more precisely, will manipulate DOM nodes rather than producing a 'template string' that will be injected into the DOM."
marc
"Makes markdown a dynamic conversion engine with integrated templates that updates automatically when the underlying data changes."
RWD and Mobile Tools
enquire.js
"A lightweight, pure JavaScript library for responding to CSS media queries."
App.js
"A lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish."
Emmet Re:View
A small Google Chrome extension that finds responsive design breakpoints on your page and creates a view for each breakpoint.
Composer
"The fastest way to bootstrap high-quality mobile apps."
Hypnos
A module for determining if a device is "sleeping".
Profound Grid
"A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control."
App Links
"An open, cross-platform solution for app-to-app linking that gives you the tools you need to expose deep links in your app or to link out to others."
Dimensions
A really nice looking, full-featured RWD testing tool, with pre-set options available as a Chrome extension or as an app.
Touche.js
"Effortlessly re-map click events to touch events on touchscreen UIs."
Testing and Debugging Tools
deb.js
"Minimalistic JavaScript library for debugging in the browser."
Escope
An ECMAScript scope analyzer.
Ranorex
"Create, maintain and run automated tests. Find bugs more quickly and make testing more reliable. Automate tests."
Recognizer
"A concept for advanced developer tools. Experimental implementation of semantic highlighting for JavaScript development."
SPOF-O-Matic
A Chrome extension. "Detects likely third-party single points of failure as you browse and allows you to simulate 3rd party resources being unavailable."
Track:js
"JavaScript errors aren’t always helpful. We set out to to make it better – to seamlessly track client-side errors with enough information to actually fix them."
Scout Realtime
"Stream realtime server and process metrics to your browser." Aims to be an improvement on the command-line "top" command that shows server resource usage.
A Tweet for Thought
Norwegian developer Magnus Holm with a sad reminder of how much HTML is needed to create a universal favicon.
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...
For those of you interested in SEO (aren't we all?), check out this gutsy post by Brian Dean, where he outlines what he believes are Google's 200 ranking factors. They're most certainly not all correct, but the post looks very well researched, so it's worth a read-through.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
