Issue #66 (getElementsByClassName(), RWD, Frameworks, Debugging)
(Skip to the tools section below)
The getElementsByClassName() method works in IE9+, so it's pretty safe to use nowadays in many projects. Here are some quick notes on this method and how you can use it.
It takes a single argument, which is the class name of the element(s) you want to target:
var myEls = document.getElementsByClassName('example');
The single argument can be more than one class, separated by spaces:
var myEls = document.getElementsByClassName('example other next');
But note that this will not target all elements that contain any one of these class names. Each element collected has to contain all three classes, at the very least. For example, if you have the following HTML:
<div class="example other next"></div>
<div class="other next"></div>
var myEls = document.getElementsByClassName('example other');
console.log(myEls.length); // 1
(JS Bin example) You might think initially that the length of the myEls collection would be "4", but that's not the case because we're specifically targeting elements with both classes. As you can see, although the first element in the HTML also contains a third class ("next"), it still matches because it has both of the classes we want. We could even switch the order of the classes in the HTML, and it would still work as long as both "example" and "other" were present on the element.
And just like getElementsByTagName(), this method can also be applied to a specific element instead of the whole document, which forces the collection to occur in a nested portion of the document:
var el = document.getElementById('container'),
myEls = el.getElementsByClassName('example');
This will return a collection of elements with a class of "example" that are children of an element with an ID of "container".
MDN's reference mentions also that you can "use methods of Array.prototype on any HTMLCollection by passing the HTMLCollection as the method's this value." You can see the example they use on that page, which allows you to treat the collection like a real array.
Now on to this week's tools!
RWD and Mobile Tools
Performance testing tool for RWD. Emulate mobile devices, desktop, tablets. Find unused/hidden elements. Find unused images. Calculate page weight. Track requests.
"Allows you to preview any URL on large number of mobile devices simultaneously."
"A fast, lightweight and robust responsive images polyfill that saves the users bandwidth by utilizing smart resource selection algorithm."
"Responsive text to fill the height of the parent element or ellipse it when it doesn't fit."
Part of Foundation by Zurb, it "uses media queries to dynamically load responsive content that is appropriate for different users' browsers."
A really nicely done RWD testing tool, with lots of preset sizes to mimic various devices, including about two dozen different laptops and over a dozen different desktops.
A fork of Filament Group's repo, this is an "awesome solution for responsive tables with complex data."
|Support Web Tools Weekly: 384 pages of CSS for $7
"An invasive CSS library to get your style started."
A library of Web Components for modern web apps.
Now at v2.0.0. "A modular, front end framework to easily and quickly help you jumpstart your process in building complex interfaces for the web right out the box."
"A core UI infrastructure for building multi channel, enterprise class Web Components to be used in Web and Mobile Hybrid applications."
"A minimal, ui-focused programming language for web designers."
"A front-end project starter meant to be a starting point and structural guide rather than a full framework."
"A versatile CSS Framework. Simple, light and responsive."
"A lightweight collection of base element styles, utilities, layout modules, and color styles designed for speed, performance, and scalability."
Testing and Debugging Tools
A native Windows app, it's an "all-in-one HTML, XHTML, CSS, link, SEO, and accessibility checker."
"A Chrome extension that lets you modify running apps without reloading."
"An HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet."
Web Tracing Framework
"Rich tools for instrumenting, analyzing, and visualizing web apps. Make your app jank-free at 60fps."
|Support Web Tools Weekly: 384 pages of CSS for $7
A Tweet for Thought
I'm usually pretty opposed to fast food, but whoever is tweeting for Taco Bell, just reached legendary status with this Tweet. If you are in the business of interacting with your customers, take a lesson from them.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
The folks at dev shop PSD to WordPress asked 56 experts: "If you could only use 3 front-end development tools, which 3 tools would you choose?"
Thanks to all for subscribing and reading!