Web Tools Weekly Issue #57 (trim(), CSS/HTML, JS Libs, Mobile)

Issue #57 (trim(), CSS/HTML, JS Libs, Mobile)08/21/14

Very busy this week, so this is a really quick tip and more of a reminder than anything. A while back, I wrote a post outlining various cross-browser JavaScript string methods. One that I didn't mention, due to lower levels of browser support, was the ECMAScript 5 trim() method:

var a = "  example  ";

console.log(a.trim()); // output: "example"

Just like the trim() function in PHP (and probably many other languages), JavaScript's trim() returns the value of the string with any white space removed from the beginning and end.

And as a bonus, MDN's reference offers a polyfill for IE8 and lower:

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
  };
}

But you probably won't need that.

Another nice reminder of a simple little method that we can use that might not come to mind, simply because for a long time it wasn't supported natively by many in-use browsers.

Now on to this week's tools!

Support Web Tools Weekly: 384 pages of CSS for $7

CSS and HTML Tools

Waves
A click effect that produces subtle 'waves' on a button when it's pressed.

CSS - Shack
"A web and desktop application, which allows you to create layers styles (just like you would in any other image editing software), and export them into a single CSS file."

critical
"Extracts and inlines critical-path (above-the-fold) CSS from HTML." Still in alpha.

PatternBolt
"A fine selection of SVG pattern background, packed in a single CSS or SCSS file."

Polyfill.js
"A library designed to make writing CSS polyfills much, much easier. It's an abstraction library that takes care of the boilerplate, so you can focus on what your polyfill actually does."

Shrthnd
A CSS shorthand generator.

CSS3 Animate It
A CSS animation library.

The Web Font Combinator
"Built to allow previewing of font combinations in a fast, browser-based manner."

SpacedOut
"A three dimensional CSS3 Transform Sidebar. SpacedOut uses CSS transforms to create a space efficient menu."

Pesticide
A Chrome extension to toggle visible outlines, to help debug your layout.

CSSDesk
An online CSS sandbox/playground.

magic
Another CSS animations library, includes lots of unique animations.

JavaScript Frameworks and Libraries

Backbone.Linear
"Easiest way to work with your Backbone.Model nested array-object attributes."

BitcoinJS
"A pure JavaScript Bitcoin library for node.js and browsers."

Three.js Interactive Template Generator
An interactive code generator for the 3D JS library, Three.js.

Functional JavaScript
"A general purpose library targeting functional programming in JS."

loom.js
"A super simple, lightweight ~0.5kB and flexible module container." Lets you structure modules, define dependencies for each module, and order/require the dependencies.

ConstraintJS
"A library for creating dynamic web apps" and that "enables constraints — relationships that are declared once and automatically maintained. These constraints can make writing dynamic apps easier."

MonoGame.js
"JavaScript game library that is based on the XNA/MonoGame API."

immutable-js
"Immutable Data Collections for Javascript."

qooxdoo
"A universal JavaScript framework with a coherent set of individual components."

RWD and Mobile Tools

Grunt Responsive Images
"Take the grunt work out of responsive images with this image resizing task."

sense.js
"A library that abstracts away the math and gives developers and designers easy access to some common non-touch gesture interactions with simple javascript callbacks."

Remodal
"Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking."

NativeScript
"Build iOS, Android and Windows Phone 8 native apps using JavaScript."

PB Responsive Images
A WordPress plugin that "adds support for the proposed responsive image format in post content, and helper functions for theme authors."

Intel's App Framework
"The JavaScript library for mobile HTML5 development."

Support Web Tools Weekly: 384 pages of CSS for $7

A Tweet for Thought

True words from Startup Vitamins on UI design.

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 Minuum, a new keyboard for mobile. I think we'd all love this, but, as they say, nobody likes change!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly