Issue #14 (+Operator, jQuery, Libs/Frameworks, Mobile)10/24/13
Take a look at the following code and the two resulting lines displayed in the console (shown in the two JavaScript comments):
var date_one = new Date(),
date_two = +new Date();
console.log(date_one);
// Mon Oct 21 2013 21:09:28 GMT-0400 (Eastern Daylight Time)
console.log(date_two);
// 1382404168241
With just a simple addition of the + operator (2nd line), the date_two variable displays a completely different format for the date compared to date_one. In the first instance, the format is the full date and current time (according to system settings). Naturally, you'll see different results depending on where/when you try it, but you'll see the same format.
The second variable, on the other hand, displays a really large number. Notice the following:
var date_one = new Date();
console.log(date_one);
// Mon Oct 21 2013 21:09:28 GMT-0400 (Eastern Daylight Time)
date_two = Number(date_one);
date_three = date_one.valueOf();
date_four = date_one.getTime();
date_five = Date.now();
// All produce this format: 1382404168241
As you can see, each of the final four variables produces the date in the same format as that of +new Date(). I won't get into the details on these latter four methods, so we'll just focus on the + operator.
To really oversimplify what this does: Using + in front of new Date() tells the browser to convert the date into a number. So, as explained on MDN's reference, the return value is "the number of milliseconds since midnight 01 January, 1970 UTC."
You can also use the + operator for a couple of other tricks:
+"0030768"; // becomes: 30768
+true; // becomes: 1
+false; // becomes: 0
+"0xfecd3"; // becomes: 1043667
It might be rare that you need to do some of these conversions but they might come in handy. For example, the first line in the last code block might help with user-entered data, converting the string to a valid number with no leading zeroes. And the last example is a hex value converted to its decimal equivalent.
And yes, if you haven't figured it out already, all these examples could be done using the admittedly more readable Number(). Just another quirk in the JavaScript language that might save you a few bytes.
Now on to this week's tools!
jQuery Plugins
CLNDR
A nice looking jQuery calendar plugin. It doesn't generate markup. "Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it."
Tabslet
A tab switcher plugin for IE7+, with options for custom events, auto-changing, and animation.
Mapael
A "plugin based on raphael.js that allows you to display dynamic vector maps." Allows for clickable countries, generated legends, and city plotting.
Long Press
Similar to the functionality seen on mobile devices, a long keypress brings up options for accented or other special characters that are related to the pressed key.
jQuery Custombox
A library of modal window effects that use CSS3 animations. Has alternative code to produce the same results without jQuery as a dependency and works in IE8+.
FilmRoll
"A lightweight carousel that focuses on one item, centering it in the view."
Advanced jQuery Boilerplate
Interesting. This is a jQuery plugin to create scalable jQuery plugins, fast.
Libraries and Frameworks
Mean
"A boilerplate that provides a nice starting point for MongoDB, Node.js, Express, and AngularJS based applications."
UserApp
A user management API in the cloud, to speed up app development, built by a few developers who are "tired of writing user APIs over and over again."
string.js
A lightweight JavaScript library for the browser or for Node.js that provides extra String methods.
PuzzleScript
"An open-source HTML5 puzzle game engine." Includes a "gallery" link to view some simple games made with the library.
Keypress
A robust, keyboard-input capture library with some special features. "It's easy to pick up and use, has a reasonable footprint (~9kb), and has no dependencies."
JSModeler
"A JavaScript framework to create and visualize 3D models." Includes links to some really impressive demos and tutorials/docs to get started.
React
From the folks at Facebook, a JavaScript library for building user interfaces. Main features are that it is declarative, efficient, and flexible.
Falcon.js
"Adds structure to knockout.js by incorporating models, collections, and views. It's set up to make developing single-page web applications a breeze."
Responsive Design Tools
rimg
"A responsive image solution for browsers that support mediaqueries. Pure javascript and no server-side code."
ish
Yet another viewport size testing tool. This one is independent of preconceived device widths, focusing on coding a design that works at any size.
Media Queries for iPads and iPhones
And just to keep things controversial, this quick reference goes completely against the principles of "ish" (above), giving you specific media queries for different variations of iPads and iPhones.
Responsive Elements
A tiny JavaScript library that makes it possible for any element to adapt and respond to the area it occupies. Includes a nice on-page demonstration with a manually controlled slider.
Webflow
A visual tool to build responsive web sites. Lets you use all CSS3 features, custom web fonts, and allows for versioning.
Gridism
"A simple responsive CSS grid."
Response
"A jQuery plugin that provides tools for building performance-optimized, mobile-first responsive websites." Uses data attributes to swap out markup and an API with cross-browser event hooks.
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...
A few weeks ago, a reader was having trouble purchasing one of my CSS ebooks, and within just a few minutes he sent me a PDF with some screenshots of what was going on. I was impressed. He told me he did this using a tool called Clarify-it. This native app, available for Mac and Windows, produced a nice easy-to-read document, and it was done fast — so I thought I'd share it here to close out this week's issue.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
