|
|
|
|
Issue #48 (Augmenting types, CSS/HTML, Deploy, Productivity Tools)06/19/14
Here's a little tidbit from Crockford's JavaScript: The Good Parts on augmenting (adding to) the basic types in JavaScript.
Adding a method to Object.prototype makes the new method available to all objects. This is the same idea when adding methods to functions, arrays, strings, etc. So you can make a method available to all functions like so:
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
|
With this, we are able to hide the name of the prototype property. In The Good Parts, Crockford uses a few examples to demonstrate how this works, including adding an integer() method to Number.prototype:
Number.method('integer', function () {
return Math[this < 0 ? 'ceil' : 'floor'](this);
});
console.log((-20 / 3).integer()); // -6
|
Here we're simply calling the newly created integer() method on the number that results from the calculation inside the parentheses, giving us the closest integer to the original decimal number. As mentioned, this method is available to all functions, so you could do something like this:
console.log(function () {
return -5.45 + 60.34;
}().integer()); // 54
|
Which, as shown in the comment on the last line, will print out "54".
Crockford also mentions a few concerns with using such a technique, so if you get a chance, be sure to check out that part of the book for more info on this technique.
Now on to this week's tools!
CSS and HTML Tools
GetTemplate
"Responsive HTML5 and CSS3 templates for rapid web development."
Sticky Pagination Fixer
"Does your site have a sticky header? You should use this script to fix keyboard-based pagination events."
PutsMail
A testing tool to test your HTML emails before sending them.
loadCSS
"A function for loading CSS asynchronously."
Critical Path CSS Generator
"This tool extracts only the CSS needed for the above-the-fold content for the page you specify."
Uptight
"Adds back the ability to maintain user stylesheets in Chrome. This functionality was stripped out in version 32."
Pleeease
"The main goal of this tool is to perform all treatments that a pre-processor shouldn't have to do! (eg, dealing with prefixes, convert rem to px, support older browsers, etc.)."
Licon
An icon set made with pure CSS3.
grunt-csso
A grunt task to minify CSS using CSSO (CSS optimizer).
CSS Stress Test
A bookmarklet for stress testing CSS that "indexes all the elements and their classes, and then--class by class--it removes one, and times how long it takes to scroll the page. Selectors that save a considerable amount of time when removed indicate problem areas."
Single Element CSS Spinners
More like 3 elements (including pseudo), but very nice as loading animations without images.
css-shapes-polyfill
Adobe's early polyfill solution to the new CSS shapes specification.
Testing, Deployment, Task Running, etc.
JScrambler
A JS minifier and obfuscator. Not everyone is a fan of these types of tools but it may come in handy in a particular project.
squirrel
A static site generator with a focus on Markdown.
Web app generator
"Yeoman generator that scaffolds out a front-end web app using gulp for the build process."
grunt-scss-lint
"A Grunt task to lint your SCSS."
Cloud Cannon
"The world's easiest CMS for designers."
srvdir
"A program that takes a path to a directory and then creates a secure, public HTTPS endpoint which serves the files from that folder."
HTML Minifier
A multi-featured markup minifier.
Productivity Tools
Talky
"Truly simple video chat and screen sharing for groups. Anonymous. Peer‑to‑peer. No plugins, signup, or payment required."
ALL SEEING EYE
A Chrome extension that lets you "Record all browsing in screenshots and full text. Search for anything at any time. Never forget where you read something. 100% private."
Waypoints.io
"Collaborative timelines. A simple tool to keep track of your projects progresses."
Hutt
"Video conversations without the hassle." Free, instant video chat, no login required.
Harpoon
"A financial planning, invoicing, forecasting, and metrics app."
A Tweet for Thought
A friendly summary of quote marks by Dmitry Baranovskiy.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Check out Tic-tac-tic-tac-toe, a real-time multiplayer game that you can join via your GitHub or Twitter account.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
