Web Tools Weekly Issue #68 (dataset, jQuery Plugins, Productivity Tools)

Issue #68 (dataset, jQuery Plugins, Productivity Tools)11/06/14

Check out this week's primary sponsor:

We know you hate bookkeeping
All business owners HATE doing bookkeeping. Our software helps you automated those simple tasks getting you back to work, back to making money. Use the code "MRTsaysHI" for 72% off your first two months (valid until Nov. 15th) - Let's get started.

We've all heard of data-* attributes, right? There are ways to access them using JavaScript with some customary methods, but you can also use the dataset property, available on all HTML elements and supported in all browsers including IE11+.

Here's a snippet of HTML, which is a single div with multiple data-* attributes:

<div 
    id="myData"
    data-name="Foghorn Leghorn"
    data-type="Rooster"
    data-company="Looney Tunes"
    data-birth="1946"
    data-author-name="Robert McKimson"
>
</div>

You can see that the element has multiple data-* attributes, along with the ID we'll use to access it. Here's our JavaScript:

var myData = document.getElementById('myData');

console.log(myData.dataset.name); // "Foghorn Leghorn"
console.log(myData.dataset.type); // "Rooster"
console.log(myData.dataset.company); // "Looney Tunes"
console.log(myData.dataset.birth); // "1946"
console.log(myData.dataset.authorName); // "Robert McKimson"

myData.dataset.authorName = "McKimson, Robert";

console.log(myData.dataset.authorName); // "McKimson, Robert"

(JS Bin example)

The dataset property is not difficult to use. For each element, you're given a DOMStringMap object that looks like this when printed out:

[object DOMStringMap] {
  authorName: "McKimson, Robert",
  birth: "1946",
  company: "Looney Tunes",
  name: "Foghorn Leghorn",
  type: "Rooster"
}

As shown in the prior code snippet and demo, you access the different data-* properties by converting the custom part of the name to a property name, camel-cased where necessary. So "data-name" becomes "dataset.name", "data-type" becomes "dataset.type", and "data-author-name" becomes "dataset.authorName".

As shown in the last part of the code example, the dataset property is readable and writeable.

As mentioned, this can be used everywhere, including IE11+, but you can fall back to using getAttribute() in IE6-10, or else try this shim.

Now on to this week's tools!

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

jQuery Plugins

jquery.input-stepper.js
Adds customizable plus/minus buttons to either side of a text input to help the user easily increment the value.

Lazy Line Painter
A jQuery plugin for path animation using the Raphaël Library.

jQuery.dotdotdot
"Advanced cross-browser ellipsis on multiple line content."

Textarea Autosize
"Vertically adjust a textarea based on user input and control all presentation in CSS. No clone or ghost elements used." IE9+.

Strip
"A Lightbox that only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience."

FixedContent.js
"A mobile-friendly, jQuery plugin that persists content (sidebar, nav, etc.) while scrolling."

Midnight.js
Allows you to change the styles on a fixed header on the fly, as the user scrolls.

Scotch Panels
A dead simple off-canvas jQuery plugin that even allows a nested off-canvas element within the primary one.

gifplayer
"Customizable jQuery plugin to play and stop animated gifs. Similar to 9gag’s."

Permit.js
"Makes building interactive, multi-state prototypes for websites and apps easy."

croppic
An image cropping jQuery plugin.

promoSlide
"A jQuery plugin to show content on your site. After scrolling to the bottom of the page, a slide-out panel appears with more content."

Productivity Tools

Archeeve
A Mac app (Windows coming soon) described as "the most useful app to organize your bookmarks."

WHIDT
"Time tracking for Google Drive. Monitor all of your drive activities without friction. Get a grip on your time management."

Markticle
Chrome extension. "Mark your reading progress in articles with Markticle, so you could continue reading it later."

TextTeaser
I've already started using this one. It's a Chrome extension that automatically produces a brief point-form summary of an article.

Readonomy
Shared reading list for teams. Read, share and bookmark together with your team.

Panel Tabs
Chrome extension. "Open tabs in floating or docked panels outside of Chrome. Like your TV’s picture in picture mode, but for websites."

Sortd
"The first ever Smart Skin for Gmail and Google Apps. Sortd brings your emails, your tasks and your priorities together in one intuitive Gmail workspace."

Suave
Select and save content snippets from websites easily then you can view, organize, and annotate as desired.

DocSend
"Send and track documents from Gmail."

Task Runners, Deployment, Build Tools, etc.

m.py
"Takes an HTML document, minifies and inlines all CSS and JS. Includes WSGI middleware for platforms like Google AppEngine, and optional memcached caching."

Pants
"A build system for software projects in a variety of languages. It works particularly well for a source code repository that contains many distinct projects."

grunt-bulldoc
"Beautiful documentation generator from Markdown files for Grunt."

Cactus for Mac
"A better workflow for hand coding websites." It's a static site generator that allows you to build websites locally, using modern web technologies, and have the results generated to a collection of flat files.

FireShell
"JavaScript task running, build processes, autominification and file concatenation, wrapped with an enhanced HTML5 boilerplated framework."

gulp.js
You've probably heard of this one already. It's one of the recent Grunt alternatives.

zBugs
"Minify and Gzip compress CSS and JavaScript in a single click."

Zepto Builder
An online tool to let you choose which components of the Zepto.js library you want to use. Let's you auto-generate your build, along with an "uglify" option.

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

A Tweet for Thought

I absolutely love this cartoon tweeted by Visual Idiot that encapsulates perfectly what we all probably feel when reading other people's code.

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

If you're particularly fond of simplicity, then you might like One Thing Well, a blog that lists examples of software that do just that.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly