Issue #7 (scrollIntoView(), Mobile, JS Utils, Documents/Files)09/05/13
When dealing with content that scrolls, nowadays many apps and websites are incorporating animated scrolling. This might involve using jQuery's scrollTop() combined with animate(), or maybe a library or plugin like this one or this one.
But what if you want to scroll without animation to a specific part of the page without using URL hashes or incorporating an entire library? JavaScript has a native method called scrollIntoView() that scrolls the page until a targeted element is 'in view'.
Here's how it works:
var el = document.getElementById('el');
el.scrollIntoView();
It's that simple. Using the above example, the page will scroll until the targeted element is scrolled into view, placing it right at the top of the page. You also have the option to pass an optional parameter called alignWithTop, which is a Boolean. The default sets alignWithTop to "true", thus aligning the element with the top of the scroll area.
Or it can be set to false, like this:
var el = document.getElementById('el');
el.scrollIntoView(false);
Then the targeted element will align to the bottom of the scroll area. You can view this method in action at this JS Bin demo. You'll notice that page has a whole slew of ipsum content just to allow scrolling, and one of the paragraphs is ID'd and targeted as the scroll-to point.
Browser support for this method is excellent (IE7+ and everywhere else that's relevant). What's interesting is that there are a few other related methods that are not part of the spec and that have spotty support. These include scrollIntoViewIfNeeded() (which centers the element in the viewport), scrollByLines() (which lets you scroll the window by a set number of lines), and scrollByPages() (which scrolls by pages, where a single page is the visible vertical space on the page).
More info: scrollIntoView, scrollByLines, scrollIntoViewIfNeeded (polyfill)
Now on to this week's tools!
Responsive Design Tools
responsImg
An "easy to install, easy to use jQuery plugin that turns your <img> tags into responsive images with retina alternatives."
Riloadr
"The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time."
responsive.io
Currently doing beta invites, this is "a service that optimizes and delivers perfect images for every screen."
Jekyll Picture Tag
A Jekyll-based responsive images solution that follows the proposed picture element pattern, polyfilling with Scott Jehl's Picturefill.
Embed Responsively
This is great. Enter a URL for something you want to embed from one of the supported services (YouTube, Instagram, Vimeo, etc.) and it will spit out the embed code for you with the CSS to make the embedded object responsive.
Off Screen Navs
One of those off-screen nav patterns. This one demonstrates moving both a navigation bar and a contact form from the same page into nav buttons on the left and right for small screens.
Dimensions
There are tons of these types of tools floating around that allow you to test your responsive designs on different screen sizes. This one is very nicely designed and easy to use. It's also LiveReload-compatible and has a device preview mode.
JavaScript Tools and Utilities
EpicEditor
An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, a robust API, can be easily themed.
Random User Generator
"An API that provides you with a randomly generated user. These users can be used as placeholders in web mockups, and will save you time from creating your own placeholder information."
ice.js
This looks really cool. Built by the developers at The New York Times, it uses JavaScript to add "track changes" functionality to anything that uses contenteditable. Includes a demo page.
Arachnid
"A simple service that allows your JavaScript powered application to be fully indexed by SEO spiders."
handlebars-helpers
A library of 100+ helpers for the Handlebars.js templating language.
alert
A library to play sound alerts. Includes 7 sounds out of the box, and allows you to add your own custom sounds.
lz-string
A JS-based lossless data compression method, specifically designed to improve on the limits of the localStorage API in browsers.
Document/File Management Tools
Dropbox-Uploader
A BASH script that can be used to upload, download, list or delete files from Dropbox.
NoteShred
"Send an encrypted, password protected note instead and be notified after it's been read and shred."
PSD.rb
A Photoshop file parser written in Ruby that allows you to work with a Photoshop document in a manageable tree structure and find out important data such as size, layer/folder names, font names, font sizes, etc.
textsave
Want to save a string of text at a unique URL? It doesn't get easier than this.
Quip
"A modern word processor that enables you to create beautiful documents on any device — phones, tablets and the desktop."
gdocs2md
"A simple Google Apps script to convert a properly formatted Google Drive Document to the markdown (.md) format."
Draft
"Easy version control and collaboration for writers." I've used this one — it's elegant and very easy to use.
Suggest Your Tool via Twitter
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). Thanks to those who have contributed already!
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...
If you're always on the lookout for inspiration and ideas for a new startup or a side project, you might want to add Firespotting to your list of feeds. It's a Hacker News-inspired feed for brainstorming new ideas. Some of the posts are already-existing sites, while others are merely twinkles in the eyes of developers and entrepreneurs.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
