|
|
|
|
Issue #129 (classList.toggle(), Git/CLI/CLI, Deployment, Data)01/07/16
You're probably familiar with the classList API for manipulating CSS classes in a more jQuery-like fashion (which is much easier than the tedious className method). One of the features available for classList is the toggle() method, which (much like jQuery's .toggleClass()), lets you toggle a specified class.
But you might not know that classList.toggle() takes a second, optional argument. The DOM spec refers to this as an "optional Boolean force" argument. This doesn't mean it has to be set to either true or false, but it has to evaluate to either true or false.
To demonstrate, let's use the following HTML:
|
<body class="one two three four">
|
Then we'll manipulate those classes with some JavaScript:
|
var b = document.body,
i = 8;
b.classList.toggle('one'); // false
b.classList.toggle('two', true); // true
b.classList.toggle('three', false); // false
b.classList.toggle('four', i < 10); // true
b.classList.toggle('five'); // true
b.classList.toggle('four', i > 10); // false
|
(JS Bin demo)
You can see that the toggle() method always returns a Boolean. This represents whether or not the class that was toggled is now present. So in the first toggle line, we know the "one" class existed. When we toggle it, that means we're removing it, so it returns false. For the fifth toggle, we're toggling a class that doesn't exist, so it's added. Thus, it returns true.
The other four examples use the optional "force" Boolean. If this is present and it evaluates to true, it will force the class to be added, not removed. If it's false, the class will only be removed, not added. You might think: Why use this instead of just classList.add() or classList.remove()? Well, for one, those methods return "undefined", whereas toggle() returns a Boolean, which might be useful.
The other advantage is that you can put in a conditional (as I've done for two of the lines above) that evaluates to a Boolean, to allow the script to decide whether to toggle or not.
If that's confusing, test it out in the demo or read more:
The only major drawback to this second argument is the lack of IE support, so you'll get different log results in that demo in IE. It does seem to be supported in Edge however.
Now on to this week's tools!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Git, GitHub, and Command Line Tools
aws-shell
"An integrated shell for working with the AWS CLI."
Mailer
"Free Utility to send emails from the command line."
GitHub File Watcher
"Keep tabs on any file in any public GitHub repository."
psdiff
"A small tool that you install as a git hook — then, any time anyone makes a change to a PSD file, psdiff automagically generates an accompanying PNG export of the modified file."
Octo Linker
Chrome extension. "Allows you to navigate across files and packages on GitHub.com with ease."
Git Hound
"Git plugin written in Go that sniffs potential commits for sensitive data."
Weigh
"A command line tool to check the approximate weight (in bytes) of any npm module that works in the browser."
tq
"Command line utility that performs an HTML element selection on HTML content passed to the stdin. Using CSS selectors that everybody knows."
GitHub Health Report
Analyzes your GitHub account to give you an overall "health" report (open issues, age of repos, last updated, etc).
manpm
Shows the relevant part of an NPM module's README file right in your terminal.
CodePlex
"Microsoft's free open source project hosting site."
Deploy, Task, Build Tools
grunt-ftp-deploy
"Grunt task for code deployment over ftp."
DeployBot
Formerly dploy.io. "Instantly build and ship code anywhere in one consistent process for your entire team."
API PLUG
"You don't need to be a backend developer to use APIPlug. We will help you in every step to generate RESTFUL API codes from your data sources."
Stack Up
"A simple deployment tool that performs given set of commands on multiple hosts in parallel."
Nanobox
"Eliminate environment complexity. Your app is launched in a lightweight VM that is consistent across local and production machines."
Spinnaker
"An open source, multi-cloud continuous delivery platform for releasing software changes with high velocity and confidence."
CodePush
From Microsoft. "A cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users’ devices."
Chrome Extension generator
A Yeoman generator to scaffold out a Chrome extension code boilerplate.
rollup.js
"Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js."
feng
"Fast start a website using new generation web technologies."
Travis CI
"Test and deploy with confidence. Easily sync your GitHub projects with Travis CI and you’ll be testing your code in minutes,"
Data, Content, etc.
dewdrop.io
"Drop a file and share it with anybody. No Logins — nothing to install."
React Styleguidist
"React components style guide generator with a hot reloaded (style guide) dev server."
ESDoc
"A documentation generator for JavaScript (ES6)."
Grav
A modern, open source, flat-file CMS.
Breeze
"Rich data for JavaScript apps."
APIcastor.com
"Easily convert spreadsheets into accessible URL endpoints."
JSON Formatter
"Helps to format your JSON data. It also provides tree view which helps to navigate your formatted JSON data."
A Tweet for Thought
Nathan Smith offers a useful way to style default links in CSS.
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 must try this interactive xkcd comic.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
