Issue #9 (one(), CSS/HTML, jQuery, Mobile)09/19/13
If you've used jQuery, then you certainly know about its on() method (which replaced the similar older methods bind(), delegate(), and live()).
The on()method lets you attach one or more event handlers to the targeted element or element collection. If you want to remove the event(s), you can use the off() method. That's simple enough.
There is, however, another useful method that does something similar to on/off, and it's called one(). It's used exactly the same way as on(), except it attaches the event and then it removes itself after a single execution of the event. So it's the same as doing on() then off() after one execution of the event.
One practical use for one() is in association with CSS3 transitions. Let's say you want to detect when an element on the page has finished transitioning, you can do something like this:
$('#box').one('transitionend',
function() {
// do something here
});
Notice I'm attaching the transitionend event to the #box element using one(). This could be useful because the element in question may fire the transitionend event multiple times because of multiple properties being transitioned. You might only want the event to fire once for the entire set of transitioned properties, and this is where one() helps.
Here's a JS Bin demo that uses one() that you can mess around with. Notice if you change one() to on(), you'll see the message will display 3 times each time you hover on or off the box.
More on one() in the jQuery docs, and it should be noted that the transitionend event may require prefixes depending on the browser and/or version. Modernizr can help with this.
Now on to this week's tools!
CSS and HTML Tools
animo.js
"A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic."
CSSO
A CSS minification tool from the same folks responsible for the BEM methodology. This one claims to do not only the usual minification (whitespace, comments, semi-colons, etc.) but also structural optimization.
Modulz
Create beautiful landing pages with these ready to use, customizable mobile-first HTML templates. Looks like a nice option if you have clients who ask for these types of pages.
Autoprefixer
This looks like the right way to do this. It will automatically add prefixes to CSS3 features based on results pulled from the Can I Use... data.
CSS Modal
Exactly what the name says. Triggered by JavaScript, the main parts of the modal window are CSS-based, using CSS3 transitions and it works in IE8+ (without the transitions of course).
Native Form Elements
Just a simple page that displays every form element so you can see how it will look in your current browser. Also includes the same elements displayed with the disabled attribute.
Style Guide Boilerplate
A starting point to help your team write a style guide if you're 'rolling your own framework'.
jQuery Plugins
jQuery.Shapeshift
"Dynamically arrange a collection of elements into a column grid system similar to Pinterest" with "the ability to drag and drop items within the grid while still maintaining a logical index position for each item."
Formstone
"A growing collection of jQuery interface plugins focused on structure and customization." Still looks pretty new, but an interesting theme for a plugins repo to keep an eye on.
slabText
"A jQuery plugin for producing big, bold & responsive headlines... The script splits headlines into rows before resizing each row to fill the available horizontal space."
jQuery Tag-it!
Used by MDN, a plugin that lets you enable tag editing for tags associated with content. Similar to what you see on StackOverflow when you post a question and then choose 'tags' to categorize it.
Succinct
"Shortens your text to a specified size, and then adds an ellipsis to the end." Very easy to use and they have a nice on-page demo where you can specify how many characters to chop at.
jquery.arbitrary-anchor.js
This looks great. Lets you scroll to any element on the page, even if it doesn't have an ID, so you can target using a simple selector. You can also include a milliseconds value for animating the scroll. Very cool.
unslider
A less-than-3kb responsive, cross-browser slider with keyboard support.
Responsive Design Tools
intention.js
From the folks at Dow Jones, "a lightweight tool ... that manipulates the DOM via HTML attributes. The methods for manipulation are placed with the elements themselves, so flexible layouts don't have to be so abstract and messy."
Apropos
A responsive image solution. As described: "Instead of manually writing a lot of CSS rules to swap different images, Apropos generates CSS for you based on a simple file naming convention."
Type & Grids
"Simple to set up and super-customizable, Type & Grids is a responsive HTML5 template with nice typography."
Top Drawer
Another take on the responsive navigation thing. Uses transforms, Modernizr, and jQuery.
Simple State Manager
"A responsive state manager which allows you to run different javascript at different browser widths." You can "define as many states as your site requires and allows you to have independent Enter, Leave and Resize events for each of the states."
Midway.js
"You all know and love the absolute positioning centering technique, but what happens when those centered elements change sizes, due to percentage based layouts? That's where Midway.js comes in."
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 go to the donate page and give something small ($2 per subscriber would be more than enough).
Criticism? Corrections?
If you have an opinion on how this newsletter can be improved, or any corrections to report, feel free to reply to this email directly.
Before I Go...
One of the handiest tools I've found for my Windows machine is a free tool called PureText. Basically, it's a small utility that sits in your system tray, and with one click it will convert whatever is in your clipboard to pure, unformatted text. This is great, because I'm always copying and pasting snippets of text straight from web pages. Even URLs from Chrome's address bar (which, oddly, are copied in rich text) get wiped clean with this. If you want a similar tool for Mac, there's Plain Clip. I think my productivity has doubled since I started using this.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
