Issue #126 (scrollHeight, JS Libraries, Sass Tools, Text Editors)
Every HTML element has a read-only scrollHeight property that gives you the height of the element's content including non-visible content that's clipped vertically because of overflow set to hidden or auto in the CSS.
It looks like this:
var shValue = el.scrollHeight;
You'll see that the 4th div has a height that's larger than the content, but the scrollHeight value is merely the height of the content (i.e. it's smaller than the defined height). Meanwhile, in the other instances, the scrollHeight value is always larger than the height of the element due to the overflow. So it's the content that determines scrollHeight, not the height set in the CSS or elsewhere. Padding is included in the height, margins are not, and (from what I can tell) setting the box-sizing to border-box doesn't affect the returned value.
MDN's page on the subject has an interesting use case with a live demo. In the demo, when the user scrolls a div to the bottom, it's assumed the content has been read. So with scrollHeight, you can (quite superficially) determine if the user has read the content. This might be used on a terms of service page. If there's no scroll, then you know the user hasn't read it all (although there's obviously no guarantee, this is just theater).
As always, the best thing about this is that it's cross-browser, supported everywhere including back to IE8.
Now on to this week's tools!
An HTML5 game-building library that lets you create browser based games for any device including smart TVs.
"A Relay inspired library for building React.js + Firebase applications."
"The most advanced open source UX framework for enterprise applications."
"Used to drive the motion of a user interface. It has native support for CSS, DOM attributes, SVG and SVG paths, and can be used with any API that accepts numerical values."
"For programming graphic design systems with SVG in the browser or node.js. It features a chainable drawing API, an unobtrusive scene graph, and a range of features aimed specifically at graphic designers."
"An open-source modeling framework developed at Google. With FOAM, you create a model, and FOAM can support many features based on it."
"A framework for Internet of Things." From the developers at Samsung.
An Sass-based grid system that attempts to include all the best features from other grids systems into one customizable, powerful tool.
"Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system."
A responsive Sass grid system. A cool feature of the home page is the ability to manually resize the grid examples, so you can immediately see how well they work.
"An SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox."
"A code profiler for Sass. For each @function, @mixin, @include and $variable, Sass Prof will show its execution time, which file called it and what arguments were given when it was called."
"A Sass library for creating flexible CSS transitions and animations." Now part of the newly-released Foundation 6.
"A technique used to create vertical rhythm based on a base unit value."
"Inline SVG for Sass."
"A Node-only Sass linter for both sass and SCSS syntax."
Text Editors and Code Playgrounds
"The fastest way to build beautiful Electron apps using simple HTML and CSS."
A really simple HTML code-publishing playground. Kind of like if CodePen stopped taking steroids or something.
A Markdown editor for Mac, Windows, and Linux.
"A powerful web design tool for creating responsive websites using the Bootstrap framework."
A Vim-inspired, keystroke-efficient, multi-featured code editor.
A Tweet for Thought
Is it wrong that I agree with this?
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...
Pearl Boy is a fantastic demo built with Goo Engine, a WebGL library.
Thanks to all for subscribing and reading!