Issue #15 (contains(), Mobile, Productivity, Text Editors)10/31/13
Although we commonly think of Internet Explorer when we consider old browsers that prevent us from using certain features, this was, to some extent, also true of older versions of Firefox, before that browser began auto-updating.
Because of this, many JavaScript/DOM features that weren't available in (for example) FF3.6 have gone somewhat unnoticed. I've mentioned a few of these in previous issues, so here's another one: contains().
Although there is a brand new String.contains() method that has little browser support, in this case we're talking about Node.contains(). What this does is simple: It checks to see if any given node is a descendant of another specified node. Let's look at an example.
Here's our HTML:
<body>
<div id="parentBox">
<div id="childBox">
<div id="grandchildBox">
</div>
</div>
</div>
<div id="otherBox">
</div>
</body>
Notice there are four elements inside the body. Three are nested one inside the other, then we have another sole element as a sibling of the outermost of the nested group.
Now we can use contains() to do various checks, based on the above structure:
var body = document.getElementsByTagName('body')[0],
pb = document.getElementById('parentBox'),
cb = document.getElementById('childBox'),
gcb = document.getElementById('grandchildBox'),
ob = document.getElementById('otherBox');
console.log(body.contains(pb)); // true
console.log(body.contains(gcb)); // true
console.log(pb.contains(cb)); // true
console.log(pb.contains(gcb)); // true
console.log(cb.contains(gcb)); // true
console.log(cb.contains(pb)); // false
console.log(body.contains(ob)); // true
console.log(pb.contains(ob)); // false
And here is a JS Bin with this code so you can play around if you want.
As you can see, contains() will return either true or false, so it's very simple to use. Unfortunately, one seeming flaw is the fact that it will return true if the same node is checked and applied to. In other words, it will say <body> is contained inside of <body>. MDN's reference on the subject has a simple function that gets around this.
And the best part of contains()? It's cross-browser, including IE back to version 5. As already mentioned, probably the only reason it hasn't gotten a lot of coverage is because it was not supported in FF until version 9, and it was also invented by Microsoft.
Now on to this week's tools!
Mobile Design/Dev Tools
Mail Designer Pro
A drag-and-drop GUI tool for creating mobile-optimized HTML newsletters. Includes features for working on projects with teams.
Clank
"An open source HTML/CSS framework for prototyping native phone/tablet applications."
Leaflet
"An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps." Nice on-page demo.
I want to use (on Mobile)
Powered by "Can I Use...", this tool lets you choose what features you want to use and it will tell you what percentage of web users' browsers those features work in. Also works without the "mobile" subdomain.
DPI love
"Easily find the DPI/PPI of any screen."
UX Recorder
"A tool for performing Web site usability and user experience testing on iOS devices" that has "a familiar browser interface."
MQTest.io
"A simple tool to help identify which media queries your device responds to."
Device-Bugs
This could be useful. A GitHub repo for documenting "weird HTML, CSS, and JS quirks in mobile devices." Also includes desktop browsers, but seems to be more focused on mobile.
Productivity and Collaboration Tools
Timecapsule
"Send Your Favorite Articles to the Future. A simple Chrome extension that makes it easy to remember the articles you want to read again."
Signal
"Signal lets you seamlessly edit emails in your Gmail inbox. A perfect Chrome extension for those who use email as a to-do list."
OneTab
Another Chrome Extension. "Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once."
Fleep
Four former Skype engineers have created "a better chat service" with "pinning" and "file drawer" features. Looks like a great option for teams with many members working remotely.
Webtop
"Bookmarks made serviceable. Store and manage your links on the cloud with a web-desktop."
Contextinator
Another Chrome extension to organize your tabs. This one "lets you divide your web browsing sessions into projects and manage all of their related information"
Text Editors and Visual Tools
SQL Fiddle
"A tool for easy online testing and sharing of database problems and their solutions."
SnappySnippet
This Chrome extension looks like a nice time saver: "Easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click."
Hyro
A native HTML editor for Win/Mac/Linux with a live real-time preview.
StackEdit
A MarkDown editor that uses LocalStorage and can sync via Google Drive or Dropbox. What I really love about this is the way the preview pane will auto-scroll with the editor window, and vice-versa.
Cleaver
"30-second slideshows for hackers." Create slide presentations using MarkDown. The website itself is an example slideshow.
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
384 Pages of CSS... Or just donate!
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...
Nothing too fancy in these week's conclusion. Just two words: JavaScript Piano. Enjoy.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
