|
|
|
|
Issue #17 (querySelector, JS Utils, Visual Tools, Guides)11/14/13
If you've heard of querySelector and querySelectorAll, but maybe haven't made the jump to using them regularly (due to lack of support in oldIE), here is a quick summary:
First, querySelector. This method returns the first element that matches the selector query that it contains:
var el = document.querySelector('.example');
|
This is similar to what you do with the jQuery $() wrapper when passing in a selector. In the example above, since we're using querySelector, and not querySelectorAll, only the first element with a class of "example" will be selected. If no element matches, it will return null.
Next we have querySelectorAll:
var els = document.querySelectorAll('.example, .other');
|
In this case, because we're using querySelectorAll, the query will return a NodeList object that contains all the elements in the document that have a class of either "example" or "other".
In both cases, the selector value must be a valid CSS selector that the browser recognizes. Also, you can apply both methods directly to another base element rather than to the whole document:
var baseEl = document.getElementById('base');
var el = baseEl.querySelector('.example');
var els = baseEl.querySelectorAll('.example, .other');
|
In this case, line two will return the first element with a class of "example" that is inside an element with an ID of "base". The last line will return all elements with a class of "example" or "other" that are inside the same base element. And of course, if I wanted to, I could have used querySelector to grab the base element, too.
The great thing about querySelector and querySelectorAll is the fact that it's supported in all modern browsers and even goes back to IE8. The only catch with regards to IE8 is the fact that IE8 does not recognize most CSS selectors after CSS2.1, so you can use these methods safely in IE8 as long as you don't use any new selectors that IE8 doesn't support.
Now on to this week's tools!
JavaScript Utilities
Resumable.js
"A JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API."
Offline.js
"A library to automatically alert your users when they've lost internet connectivity, like Gmail." Has multiple theme options and requires no configuration.
dom-compare
"NodeJS module to compare two dom trees."
CuttySSark
"The goal of CuttySSark is to allow the front-end developer to write compliant CSS that interacts seamlessly with the JS event model."
odometer
Cool library to transition/animate numbers like on a real odometer. Has some theme options, too.
Dropzone.js
"An open source library that provides drag'n'drop file uploads with image previews."
arg.js
"Lightweight URL argument and parameter parser. Arg.js gives you quick and easy access to parameters in the URL."
prerender.js
A javascript plugin that "uses the new prerender technique to tell the browser which pages it should load to improve page transition speed." Includes a vanilla js or jQuery version.
mdn.io
mdn.io uses Google's 'I'm feeling lucky' functionality to redirect you to the first search result on MDN. Comes in handy as a quick URL search tool or when writing comments in code, for an easy short URL.
Band.js
A music composer. More specifically, an "interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures."
Text Editors and Visual Tools
AMDClean
"An AMD build tool that converts AMD code to standard JavaScript."
Hammer for Mac
A multi-faceted native Mac app that offers numerous time-saving features including "built-in support for SASS (with Bourbon), CoffeeScript, HAML & Markdown, as well as special Hammer tags."
ReActiveTable Bookmarklet
Find a page that has data in a table, and this bookmarklet gives you a button that copies the table into a new overlay and lets you sort, filter, edit, and download the data.
CodeCube
A simple CodePen-like editor for C, Go, Python, and Ruby.
Test Drive Google Fonts
Part of the Typecast app, lets you test fonts from the free Google Fonts directory using a GUI interface.
Sir Trevor
"Rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered."
Lime
An open-source Sublime Text clone. Lots of open issues, but certainly an ambitious project that could offer a viable free alternative.
DevTools Snippets
"A collection of helpful snippets to use inside of browser devtools. Chrome provides a 'snippets' feature that can be used to manage the scripts, while Firefox has a 'scratchpad' feature that lets you run, edit, and save chunks of JavaScript."
WriteMe.md
A nice clean and simple markdown editor that updates in real-time with option to switch the theme between GitHub and BitBucket.
Vimdeck
Vim as a presentation tool. "Write your slides in a markdown file ... Run vimdeck <file_name.md> and it will generate a file for each slide and open them in VIM."
Docs and Guides
MCSS
This is a guide describing a CSS metodology based on BEM/OOCSS, invented by the developers working on odnoklassniki.ru, a top Russian social networking website.
Install Rails
A simple step by step guide to help you install and get up and running with the Rails framework on any platform.
CIUM
An IOS7+ app for iPhone and iPad that displays compatibility tables for HTML5, CSS3, etc. It looks like the name ("CIUM") and data is taken from the well-known "Can I use..." website, but I don't think there is any affiliation.
Can I use... (Beta)
And speaking of Can I use..., they've now launched a Beta version with some new functionality and features that you can start using and provide feedback on.
Easing Functions Cheat Sheet
"This page helps you choose the right easing function." For each example it includes syntax for jQuery (using an easing plugin), CSS, and Sass.
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
3 CSS E-Books for $7!
To help Web Tools Weekly stay ad free, you can offer support:
Criticism? Corrections?
Suggestions, corrections, improvements? Feel free to reply to this email.
Before I Go...
I don't have much to say about all the privacy and security issues that have been in tech news of late, but if you're concerned about that sort of thing, you might want to check out Ghostery, the web's "most popular privacy tool."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
