|
|
|
|
Issue #111 (Collection to Array, GitHub Tools, Testing, Productivity)09/03/15
There might be other ways to do this but let's quickly demonstrate three different ways to convert an array-like object (e.g. an element collection) into a true array, which will allow us to use native array methods.
The array-like object will be a collection of the list items on a page:
|
var list = document.getElementsByTagName('li');
console.log(Array.isArray(list)); // false
|
As you can see from the log, our list object is not an array (yet).
Let's convert it to an array as follows:
|
var listArray = Array.prototype.slice.call(list);
console.log(Array.isArray(listArray)); // true
|
That's one way to do it, utilizing slice by simply passing in the list object. Now the isArray() method returns true.
You can also use a function, like this:
|
function toArray(obj) {
var array = [];
for (var i = obj.length >>> 0; i--;) {
array[i] = obj[i];
}
return array;
}
var listArray2 = toArray(list);
console.log(Array.isArray(listArray2)); // true
|
Same result as previous, with a little more code.
Finally, in the future we'll be able to use the Array.from() method, like this:
|
var listArray3 = Array.from(list);
console.log(Array.isArray(listArray2)); // true
|
This method works in Firefox 32+ and Chrome 45 (the newest version as of this writing), but you can use this polyfill in the meantime. Here's a JS Bin demo with all the above examples.
Now on to this week's tools!
Git, GitHub, and Command Line Tools
Is it maintained?
"Have you ever wondered whether or not to use a library or a framework, uncertain of how well it is maintained?"
Girl
Enter a GitHub user name or repo and it will tell you if the account or repo has README files with broken links.
Pullbox
"A very simple implementation that can serve as an alternative for Dropbox that is based on Git. It works currently on any Linux-like OS and OSX but not on Windows."
git-remote-dropbox
"A transparent bridge between Git and Dropbox – use a Dropbox (shared) folder as a Git remote."
git-fresh
"Keep your repo fresh with one command."
GoTTY
"A simple command line tool that turns your CLI tools into web applications."
Gitualize
This is really cool. Enter a repo name and it gives you a visual, animated representation of the repo's history through every change and commit message.
GitHub Linker
Chrome extension that links NPM, bower, Composer, and Duo dependencies to their GitHub repository page.
Gistlog
"Turn your gists into easy, beautiful, responsive 'Gistlogs'. Just paste a Gist URL into Gistlog.co and you're up and running."
Octobot
"An app that tells you when something changes in GitHub's services status."
Testing and Debugging Tools
Scratch JS
A Chrome DevTools extension that allows you to execute ES6/ESNext/ES2015 code in the context of the page you're viewing, as though it were the standard DevTools console.
Show me the React!
"Chrome extension that highlights React components on the page."
JSVerify
"Property-based testing for JavaScript. Like QuickCheck."
React Developer Tools
"A system that allows you to inspect a React Renderer, including the Component hierarchy, props, state, and more." For Chrome, Firefox, Atom/Nuclide, and Electron.
gentest
"Property-based, generative testing for JavaScript. Don't handwrite unit tests. Save time and catch more bugs by writing properties, and let the computer generate test cases for you."
speed-test
"Test your internet connection speed and ping using speedtest.net from the CLI."
DebugMe
A simple bug tracking and visual feedback tool that helps developers when getting feedback from clients.
Shraga
A bookmarklet that adds a popup menu to let you access a slew of site info including browser info, display info, and tons more.
Input Type Sandbox
"Test onscreen keyboards, input types, patterns and attributes."
Productivity Tools
Breakout Room
"Screen sharing and video streaming for presenters. Chat and Q&A for attendees."
Stand
A Mac app that sends you a notification every hour to remind you to stand up.
Aura
A Gmail assistant for your Mac menu bar that supports multiple Gmail accounts.
Slack Cutter
An intermediary API to communicate with Slack. You can create custom Slack slash commands, incoming hooks, bots, etc.
Saent
"Pressing the Saent button starts a focused work session. Instantly block out distractions, find your optimal work rhythm and build better work habits."
GifLine
Chrome extension to let you quickly include GIFs in emails.
Pretty Print Gmail
Chrome extension to let you remove clutter from Gmail messages you want to print.
Google Docs to WordPress
Chrome extension to let you easily transfer content from a Google document to a WordPress post.
A Tweet for Thought
Is IDE-based development on the way out? Hugo thinks so.
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...
You might want to take a look at Google Chrome Samples, "A repo containing samples tied to new functionality in each release of Google Chrome."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
