Web Tools Weekly Issue #13 (Use Strict, Documents, CSS/HTML, JS Utils)

Issue #13 (Use Strict, Documents, CSS/HTML, JS Utils)10/17/13

If you haven't started using strict mode in your JavaScript programs, or don't fully understand it, here's a quick overview of the hows and whys of it all.

You declare strict mode as if you were defining a string without assigning it to a variable, placing this at the top of your code:

"use strict";

Old browsers that don't support strict mode will see this as exactly that: a string in limbo. But browsers that support it (IE10+ and everywhere else) will treat this as a command to switch into strict mode, which is basically a "better" version of JavaScript.

Strict mode, to put it briefly, makes it easier for you to catch errors and poor practices in your code.

Some of the improvements that strict mode introduces include:

Makes the with statement illegal.
Prevents accidental global variables.
Makes using eval() safer.
Will throw an error when trying to modify non-modifiable objects (whereas nonstrict code will fail silently).

If you're going to use strict mode (and most experts now recommend that you do), here are two simple rules of thumb:

Don't use it in the global scope, especially if you're concatenating strict and nonstrict files.
Use it inside individual functions or else use one declaration and wrap everything in a self-invoking function.

Thus, this is the wrong way:

"use strict";

function doSomething () {
  // stuff here
}

function doAnother () {
  // other stuff
},

And this is the right way:

(function() {

  "use strict";

  function doSomething () {
    // stuff here
  }

  function doAnother () {
    // other stuff
  }

}());

To summarize why this is important, MDN says: "Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do".

Now, all that being said, some developers are recommending using strict mode only in development, and having it automatically stripped out for production.

For more on using strict mode, see the following resources:

It’s time to start using JavaScript strict mode by Zakas
Comment by Paul Irish on Zakas' post, regarding production vs. development
Strict Mode on MDN

Now on to this week's tools!

Document/File/Data Management Tools

Sejda
"Advanced PDF manipulation." A whole slew of different tools for merging, splitting, and converting PDF files.

Send to Dropbox
An easy, fast, and secure way to email files to your Dropbox account.

SortMyBox
"A magic folder inside your cloud storage folder. Save new files there and we will move them based on rules you create. Like e-mail filters, for your files in the Cloud."

generatedata.com
A free tool to let you generate large volumes of custom data for testing your web apps. Lots of options here, might be quite useful for testing apps and websites that you foresee will have loads of data.

doo
"Connect all your cloud services, local folders and email accounts and stay in sync – on all your devices."

wri.pe
A simple web notepad. Might be useful for taking notes during presentations. Let's you save, archive, and search old notes.

Inc
An app to share links, notes, and files with coworkers and colleagues.

CSS/HTML Tools

css-parser
Not sure if this could have any practical use for the average web dev, but it's a "standards based CSS parser" to verify if code matches the spec, and vice-versa.

CSS Values
A tool I built a while back. Just a simple interface to search for CSS properties and get all the possible values for that property. In the future I plan to add browser support for each property, to make it a little more practical.

CSS Type Set
Add typographic CSS properties to a block of text, while getting the visual output instantly, for testing purposes.

BonBon
Nice looking CSS buttons that are "really flexible, but with the most minimalistic markup as possible". By Simurai, so they must be good.

Hint.css
A no-JavaScript tooltip library written in Sass. Uses CSS animation and pseudo-elements.

JavaScript Utilities

es5-shim
Compatibility shim to "monkey-patch a JavaScript context to contain all EcmaScript 5 methods that can be faithfully emulated with a legacy JavaScript engine."

Squaresend
A neat service that will turn your mailto: links into a full blown contact form. Has a free and pro version.

HandJS
A pointer-events polyfill.

Fine Uploader
"Give your users a smooth experience when uploading files to your website." Displays a progress bar and allows the ability to upload directly to Amazon S3.

detect-indent
"Pass in a string and get the indentation. Works in Node.js and the browser on any kind of text."

Countdown.js
A different take on the delete button design pattern. Instead of a dialog to prompt if you're sure, this will simply show a countdown before the delete takes place.

json.human.js
"Provide JSON and get a DOM node with a human representation of that JSON."

Salvattore
An alternative to the jQuery Masonry plugin, allowing you to organize and re-order elements in a grid, based on specified number of columns.

url-to-screenshot
"Capture screenshots using phantomjs."

Suggest Your Tool via Twitter

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.

No ads!

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...

I recently came across a website called Slant. It's "a collaboratively edited resource that helps you quickly make decisions." It seems like a cross between Quora and StackOverflow. Currently, most questions seem to be around the tech niche. Some of you might be interested in the questions on programming.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly