Web Tools Weekly Issue #73 (scrollTop/Left, Frameworks, Testing, Text Editors)

Issue #73 (scrollTop/Left, Frameworks, Testing, Text Editors)12/11/14

Support one of this week's sponsors (via Syndicate):

Reliable. Scalable. Secure. Email infrastructure from Mandrill.
Mandrill is a scalable, reliable, and secure email infrastructure service from the folks at MailChimp. Already trusted by more than 300,000 customers, it's easy to set up and integrate with existing apps. Detailed delivery reports, advanced analytics, and a friendly interface mean your entire team can easily monitor and evaluate email performance.

With two simple methods, you can get or set the distance in the non-visible parts of a scrolled element: the scrollTop and scrollLeft properties.

Let's say you have an element set to overflow: auto, and an element inside it forces the parent to have scrollbars. After scrolling the element, we can find out where exactly the scroll position is, vertically or horizontally, which basically tells us how much distance is out of view in the scrolled element. Here's some basic code that displays both values after a button is clicked:

btn.addEventListener('click', function () {
  console.log(box.scrollTop, box.scrollLeft);
}, false);

You can view a full example in this JS Bin demo. Scroll the box, then push the button, then scroll it again, and push the button again, etc. You'll see the values change with each push of the button, as long as you adjust at least one of the scrollbar positions.

As mentioned, you can also define the scrollTop and scrollLeft distance with these properties by simply attaching them to an element and setting a value:

box.scrollTop = 400;
box.scrollLeft = 500;

Try it out in this demo.

Some notes on these properties:

If the element can't be scrolled, the values are 0.
You can set the value to a negative number, but that will just set it to 0.
Similarly, if you set one of them to a value higher than is possible to be scrolled, it will simply choose the highest possible value instead.

These properties were originally a Microsoft creation, so they are supported in all browsers, including back to IE6.

Note: In last week's demo, I incorrectly used the innerText property, which is non-standard. I should have used textContent; here's a corrected demo. Thanks to reader Tom Byrer for pointing out that it wasn't working in Firefox.

Now on to this week's tools!

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

Front-end Frameworks

Foundation for Apps
"The first front-end framework created for developing fully responsive web apps."

Frontend Hot StarterKit
"Frontend app with hot reload / React / cssnext."

Front-end Boilerplate
"The ease way to start your web projects from the scratch! Because you don´t need to re-create everything everytime."

Semantic UI
Now at version 1.x: "High level variables and an intuitive inheritance system lets you change the look and feel of your components with just a handful of lines."

MNML
"A simple template for designing responsive websites in the browser."

Muffin
"A design focused front-end web template using SASS, Jekyll and Gulp."

Material UI
"A CSS framework and a set of React components that implement Google's Material Design."

TukTuk
"A responsive front-end framework that creates extensible sites easily."

ApplePie
A semantic and modular CSS Toolkit.

Enyo
"A framework for building native-quality HTML5 apps that run everywhere."

Testing and Debugging Tools

updown.io
"Simple and inexpensive website monitoring. You only pay for what you use, check by check. 1 credit = 1 check."

TaperRecorder.io
"The missing link between your users and your analytics – it's an SDK that allows you to record what are users doing in your app."

Flow
"A static type checker, designed to find type errors in JavaScript programs."

Notify Ninja
"Get calls on mobile or Skype when your website is down."

Firing Range
"A test bed for web application security scanners, providing synthetic, wide coverage for an array of vulnerabilities."

BackstopJS
"Automates CSS regression testing of your responsive web UI by comparing DOM screenshots at various viewport sizes."

RemoteIE
Lets you run the latest version of Internet Explorer from the cloud on Windows, Mac, iOS, or Android without installing a virtual machine.

Pioneer
"An easy to understand javascript DSL to interact with your app via a real browser and test its state against expectations."

jsinspect
"Detect copy-pasted and structurally similar code. The inspector identifies duplicate code, even if modified, as well as common boilerplate or logic that should be the target of refactoring."

Bughunt.io
"Bughunt uses a real browser to crawl all over your site, hunting for bugs."

CSS Layout Debugger
"A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color."

Text Editors, Playgrounds, and Visual Tools

brackets-cdn-suggestions
A Brackets extension that autocompletes JavaScript libraries from CDNs, as you type your script element.

Livedown
"Live Markdown previews for your favourite editor."

SublimeEnhanced
A set of plugins for the popular Sublime Text Editor.

SublimeLinter 3
"A plugin for Sublime Text 3 that provides a framework for linting code. Whatever language you code in, SublimeLinter can help you write cleaner, better, more bug-free code."

Sublime-JSHint
"A Sublime Text 2 and 3 plugin allowing you to check your JavaScript code for nasty errors, coding conventions and other goodies. It relies on JSHint, a fork of JSLint."

Blocs
"Focused on simplicity, Blocs for Mac brings a fresh new approach to building modern, quality, static websites without the need to understand or write code."

Brackets
Now at version 1.x.

Weblox
"Generate a fully responsive web page based on Bootstrap."

JSON Selector Generator
I love this. Paste in some JSON, and then select something in any branch and the tool will spit out the code needed to select that piece of data.

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

A Tweet for Thought

Sara Soueidan proves the laughers wrong. Gotta love her great knowledge of the specs!

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

Check out Stand to Make, an interactive visual tool that helps you calculate your earnings on any given project.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly