Web Tools Weekly Issue #93 (script.onload, JS Utils, Sass Tools, Testing)

Issue #93 (script.onload, JS Utils, Sass Tools, Testing)04/30/15

Here's a really quick tip: You've likely heard of using the onload event handler on the window object, but you can also use it on a script element. So you can do something like this:

var myScript = document.createElement('script'); 
myScript.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
myScript.onload = function() { 
  console.log('jQuery loaded.');
};

document.body.appendChild(myScript);

(JS Bin demo)

If you're creating and inserting script elements dynamically, this could come in handy merely to check if any given script has loaded.

Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Now on to this week's tools!

JavaScript Utilities and Mini Libraries

xto6
"Modernizes your JavaScript code." Function/prototype to class, string concatenation to template string, anonymous callbacks to arrow functions.

mailcheck
"Reduce user-misspelled email addresses in your forms." E.g. will offers suggestion for "info@gmial.com" to "info@gmail.com".

Dragula
"Drag and drop so simple it hurts."

WorkerExchange
"An extremely lightweight (<2kb) wrapper for HTML5 WebWorker and SharedWorker. It provides a consistent API across both type of workers."

Layzr.js
"A small, fast, modern, and dependency-free library for lazy loading."

angular-formly
"JavaScript powered forms for AngularJS."

Autocompeter
"A really fast Ajax autocomplete service and widget."

Space.js
"HTML-driven narrative 3D-scrolling."

ZingChart™
"Fast Javascript charts for any data set."

StealJS
"The dependency loader of industrial-grade applications."

payform
"A general purpose library for building credit card forms, validating inputs, and formatting numbers."

datakit
"A lightweight framework for data analysis in JavaScript."

rmodal.js
"A simple modal dialog with no external dependencies."

JSON API
"A standard for building APIs in JSON."

Sass and Preprocessor Tools

Scally
"A Sass-based, BEM, OOCSS, responsive ready, CSS framework that provides you with a solid foundation for building reusable UI's quickly."

Sass Burger
"A Sass mixin for creating hamburger icons."

CSS Embossed Border
No flat design trend here! A Sass mixin for an embossed border look with CSS.

Pintsize
"A Sass front end template."

Mappy Breakpoints
"A breakpoint mixin that uses Sass maps."

sass-require
"Small mixin to only include a scss object once."

BEM Constructor
"A Sass library for building immutable and namespaced BEM-style CSS objects."

RapydScript
"A pre-compiler for JavaScript, similar to CoffeeScript, but with cleaner, more readable syntax."

Maze
"A flexible and semantic responsive grid built with Sass."

Skeleton-Less
The (un)official Less version of Skeleton, the dead simple, responsive boilerplate for mobile-friendly development.

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Testing and Debugging Tools

LiveDive
"Lets you audio or video call with your users while watching them use your web app live — right through the browser, with no apps or browser plug‑ins required."

Amok
"A free, cross-platform, open source standalone command line tool for rapid prototyping, development and debugging of JavaScript web applications."

BooJS
"Allows you to execute JavaScript on the command line as if you were in a browser. It has well defined behavior that follows unix conventions and is built on-top of PhantomJS."

httpdiff
"Perform the same request against two HTTP servers and diff the results."

Screenmailer
A native Windows or Mac app. "Record screen and voice. Share video instantly."

Requestly
A Chrome extension to modify and manipulate network requests.

Ghostlab
"Make responsive testing a breeze with Ghostlab. It will synchronously perform all tests you perform on one browser on any number of connected devices."

plato
"JavaScript source code visualization, static analysis, and complexity tool."

A Tweet for Thought

Mark Otto gives us an exciting preview of what to expect in Bootstrap 4 ... and 5?

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 check out Terms of Service; Didn't Read, a user rights initiative to rate and label website terms and privacy policies, from very good (Class A) to very bad (Class E).

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly