|
|
|
|
Issue #66 (getElementsByClassName(), Mobile, Frameworks, Debugging)10/23/14
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>
<div class="example"></div>
<div class="other"></div>
<div class="next"></div>
|
Note the console result if we apply to that the following JavaScript:
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
RWDPerf
Performance testing tool for RWD. Emulate mobile devices, desktop, tablets. Find unused/hidden elements. Find unused images. Calculate page weight. Track requests.
Remote Preview
"Allows you to preview any URL on large number of mobile devices simultaneously."
respimage
"A fast, lightweight and robust responsive images polyfill that saves the users bandwidth by utilizing smart resource selection algorithm."
TextTailor.js
"Responsive text to fill the height of the parent element or ellipse it when it doesn't fit."
imgix.js
"A dependency-free JavaScript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density."
rcss.js
"A JavaScript library to generate responsive stylesheets."
Interchange
Part of Foundation by Zurb, it "uses media queries to dynamically load responsive content that is appropriate for different users' browsers."
Responsive Test
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.
RWD-Table-Patterns
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 |
Front-end Frameworks
Picnic CSS
"An invasive CSS library to get your style started."
Component Kitchen
A library of Web Components for modern web apps.
Schema
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."
Wijmo 5
"A new generation of JavaScript controls."
Delite
"A core UI infrastructure for building multi channel, enterprise class Web Components to be used in Web and Mobile Hybrid applications."
uilang
"A minimal, ui-focused programming language for web designers."
BareKit
"A front-end project starter meant to be a starting point and structural guide rather than a full framework."
PowerToCSS
"A versatile CSS Framework. Simple, light and responsive."
Basscss
"A lightweight collection of base element styles, utilities, layout modules, and color styles designed for speed, performance, and scalability."
Testing and Debugging Tools
HTML Validator
A native Windows app, it's an "all-in-one HTML, XHTML, CSS, link, SEO, and accessibility checker."
Hound
"Review your JavaScript, CoffeeScript, and Ruby code for style guide violations with a trusty hound."
instanbul
A JavaScript "code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests."
fb-flo
"A Chrome extension that lets you modify running apps without reloading."
Charles
"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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
