|
|
|
|
Issue #151 (Form.length, Testing, Git, Productivity)06/09/16
In JavaScript, the length property is widely used and available in a number of different ways. You can use it to check the length of a string, an array, a NodeList. You can even use it on a function (see Issue #59 for details).
If you use length on something that doesn't accept the property, you'll usually get undefined. For example, if you check the length of an HTML element (like the body element):
|
console.log(document.body.length); //=> undefined
|
But you are able to use the length property on forms and select elements. The following code will display the length of a form and the length of the select element in the form:
|
console.log(document.forms[0].length); console.log(document.getElementsByTagName('select')[0].length);
|
So what exactly does this length value represent? For the form itself, it tells you how many form elements it contains (including hidden form inputs). For the select element, it tells you how many option elements are inside the select element.
In this JS Bin demo you can see a more complete example, along with attempts to check the length of the body and a random div element.
If nothing else, this can serve as a quick way to check if a form or select contains a certain number of elements (as opposed to, say, looping through the form elements, or using some other more convoluted method). Of course, this would be most useful in dynamic apps where the number of elements changes for whatever reason.
Now on to this week's tools!
Testing and Debugging Tools
Segment
"Simplify your analytics. Collect customer data with one API and send it to hundreds of tools for analytics, marketing, and data warehousing."
MapLatency
Check latency, ping, DNS, and page load from 15,000+ locations worldwide.
Sauce Labs
"Accelerate your software development process using the world's largest automated testing cloud for web and mobile applications."
MultiBrowser
"Responsive web design, mobile and cross-browser compatibility testing software."
permission.site
"A simple site to test permission-related UI for web APIs." By Chromium team members, but not officially a Google product.
devtools presence detector
For Chrome and Firefox. A proof of concept timing attack to detect if DevTools are open or not in the user's web browser.
Document outline audit
"Analyses the heading outline of the document (or given container), and reports possible errors. It can be dropped in the DevTools directly, put into a bookmarklet or integrated to a testing suite."
Safari Technology Preview
"Gives you an early look at upcoming web technologies in OS X and iOS. Get the latest layout technologies, visual effects, developer tools, and more."
True
"Unit Tests for Sass."
Git, GitHub, and Command Line Tools
BitKeeper
"The original distributed source management system. Now available as Open Source under the Apache 2.0 License. BitKeeper is a fast, enterprise-ready, distributed SCM that scales up to very large projects and down to tiny ones."
git-psuh
"Ever mistype git push? Want to fix that? git-psuh has your back!"
HTTP Prompt
"An interactive command-line HTTP client featuring autocomplete and syntax highlighting, built on HTTPie and prompt_toolkit."
Starred Search
"Search the readme files in GitHub users' starred repositories."
git-reflow
"Automatically creates pull requests, ensures the code review is approved, and squash merges finished branches to master with a great commit message template."
Buku
"Powerful command-line bookmark manager."
gitsome
"A supercharged Git/GitHub command line interface."
xo
"A command line utility that composes regular expression match groups. What differentiates xo from tools like sed and awk is that xo is designed to do a single job well, and that is compose together match groups into a new string."
Productivity Tools
The Great Suspender
Best Chrome extension I've ever used. "Automatically suspends unused tabs to free up system resources."
TermHere
"An OS X Service and Finder extension that has one job – to place a “New Terminal Here” button in the Finder toolbar and in right-click context menus."
How Much Does a Website Cost
"Easily calculate the cost of a website using this handy tool."
Blisk
"A free Chromium-based browser built to increase quality and speed of web development and testing."
Qbserve
"Automatic private time tracker that helps to improve your productivity by intelligently observing active sites, apps and chats."
S3io
"Turn your Amazon S3 bucket into a file sharing and note-taking tool."
FastDocs
Direct links to create new documents for Google Drive products (Docs, Sheets, Slides, and Drawings).
PairForce
"Spend less time explaining and more time solving. Collaborate on code in real-time in a full web-based development environment."
Pomodoro timer
A timer that uses the Pomodoro Technique (25-minute work intervals with short breaks).
FIrefox Hello
"Instantly browse any Web page with a friend."
A Tweet for Thought
You have to see this to believe it. Does anyone know if this is real? The responses are just as funny.
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...
Found a bug in Microsoft's new Edge browser? You can submit it via Twitter using the hashtag #EdgeBug.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
