Issue #21 (activeElement, Visual Tools, Testing, Documents)12/12/13
You can easily get the current element that is 'selected' by using a little-known DOM property called document.activeElement. Let's see this in action.
Suppose you have an HTML form with three form fields and a submit button. We'll also add a generic 'output' element to the page, to display the results. In addition, I've added unique data-* attribute values to each element, so we can use that for the output. I've also set up a few random box elements with tabindex attributes, so they too can be 'selected' when clicked.
Here's our JavaScript:
var doc = document,
output = doc.getElementById('op'),
activeEl;
doc.addEventListener('click', function () {
activeEl = doc.activeElement;
output.innerHTML = activeEl.getAttribute('data-input');
}, false);
|
And here's a demo on JS Bin. Click any element to see the active element's info displayed on the page.
Things to note:
- MDN explains that the 'active' element is the element that is focused and ready to receive text input. As you can see from my demo, any element can be 'active', not just those with text input capabilities.
- If you want to be able to track elements that receive focus by tabbing, you'd have to write a different script that doesn't use 'click' as the event.
- Notice my demo includes two generic boxes and a heading that can also be clicked, which also display their data-* attribute values when 'active'.
If we don't use the data-* attributes, then we can output a string showing the element object itself, so the output might say something like [object HTMLInputElement].
MDN's article has its own demo to view, and you can also view the WHATWG spec on the subject.
According to a few sources, this feature works everywhere, even back to IE4! Not sure if all versions of IE have the same behaviour, but the feature is present everywhere.
Now on to this week's tools!
Text Editors and Visual Tools
.NET Fiddle
Never thought I'd see this. From the creators: "We are a group of .NET developers who are sick and tired of starting Visual Studio, creating a new project and running it, just to test simple code or try out samples from other developers."
Terminal in Chrome Dev Tools
A Chrome extension or Node module that gives you a "terminal" tab in Chrome's developer tools.
Schema Creator
A tool to help you build markup snippets for schema.org Microdata. There's also a WordPress plugin.
Type Scale
A visual type scale calculator. Lets you choose a base font size, scale, a Google web font, and outputs the CSS.
Lumberjack
"A JavaScript utility that hijacks the browser console, makes it more beautiful and enhances it so logs can be split into more manageable chunks. Lumberjack also saves everything that is logged ... and colorizes your logs (where supported) to increase legibility."
regular expressions 101
An online regex tester for JavaScript, PHP, PCRE and Python.
go-reveal
"Drop go-reveal.js into your reveal.js presentation and instantly you have multi-user, collaborative functionality."
Keycodes
"A small application to grab keyboard codes and ASCII codes quickly and easily."
Liveweave
Yet another HTML/CSS/JS playground to fiddle with and save code experiments. What I love about this one is the code hints for tags, CSS properties, and even JavaScript and jQuery. Very nicely done.
Codio
A multi-featured IDE. Front-end, back-end, code completion, deployment options, terminal tab, Git, CoffeScript, Sass, and lots more.
Testing Tools
phantomas
"PhantomJS-based web performance metrics collector and monitoring tool."
Load Impact
"The leading on demand website load testing and performance testing service."
trifleJS
"A headless Internet Explorer browser using the .NET WebBrowser Class with a Javascript API running on the V8 engine."
DOM Monster
"A cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health."
Retire.js
Command-line scanner, Chrome extension, or Grunt plugin that detects the use of JavaScript libraries with known vulnerabilities.
ThreePin
"ThreePinJS as a stress-free test environment for socket.io allow you to test your websocket server code before you write the client code or on-the-job."
pa11y
"Monitor the accessibility of your websites with pa11y-dashboard, and protect against accessibility errors creeping into your codebase."
structured.js
"A JavaScript library that provides a simple interface for verifying the structure of Javascript code."
Browser Details
"We find out everything that's relevant for browser testing. Your customers just click one button and their browser details get sent right to your inbox."
Document/File/Data Management Tools
Quick Look plugins
Plugins for the Quick Look feature in OSX, letting you see previews for Markdown files, JSON files, WebP images, CSV, and more.
OpenNote
An open web-based alternative to Microsoft OneNote and EverNote.
pdfconvert.me
"A free email service which will take the content of a message and return that content back to the sending email as a PDF attachment. This allows mobile devices to have a 'print to PDF' feature in many circumstances."
grunt-markdown-pdf
"Grunt plugin to convert markdown documents to PDF." Also available as just a node module.
PDF Everything
"Easily Convert Over 500 Different File Formats Directly To PDF."
Penflip
A writing collaboration tool with version control, a distraction-free editor, one-click publishing, PDF/ePUB export, mobile accessible, and more.
Dead Drop
Send someone a note or other text-based data securely at a unique password-protected location that will delete itself in 24 hours.
Google Keep
A basic note-taking service provided as part of Google Drive.
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?
If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
A few smart developers created MiniCodeEditor. This sort of thing seems to be happening a lot nowadays, creating stuff with minimal code. It's a working real-time code editor in just 175 bytes (or 224 for the cross-browser version). Not necessarily the most useful tool, but you might learn something from the minimal code.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
