Issue #5 (getBoundingClientRect(), Text Editors, JS Frameworks)08/22/13
Using a little-known JavaScript method, you can get the exact coordinates (or dimensions) of any element on the page.
Let's say you have a section of HTML on your page and you want to find out exactly where that element is positioned. Maybe you want to overlay something on the element, or maybe due to user interaction, the element has moved or has been resized, and you want to reposition it or do something else with that info. Here's how you'd get the coordinates:
var wrapper = document.getElementById('wrapper'),
x, y, w;
x = wrapper.getBoundingClientRect().left;
y = wrapper.getBoundingClientRect().top;
if (wrapper.getBoundingClientRect().width) {
w = wrapper.getBoundingClientRect().width; // for modern browsers
} else {
w = wrapper.offsetWidth; // for oldIE
}
console.log(x, y, w);
Notice I'm using getBoundingClientRect() and accessing three of its properties: left, top, and width. The returned object has six read-only properties: the ones already mentioned, along with height, right, and bottom. The values returned would be numbers representing those properties in pixels.
Notice the code also has an if/else branch. Because IE6-8 don't support the width property on getBoundingClientRect(), we instead use "offsetWidth" to get the same value for those browsers.
All in-use browsers support getBoundingClientRect(), so as long as you account for the lack of support for width in old IE, you can use this safely in any project. In fact, this is yet another feature that was introduced first in Internet Explorer as far back as version 4.
And if you're wondering, the resulting coordinates will take any CSS transform values into consideration when returning the various values in the getBoundingClientRect() object, so that's pretty cool.
More info see getBoundingClientRect() on MDN. And if you want to fiddle with this method, here's a JS Bin that displays the coordinates and width of a container element. You can change the parameter on the last line to get the coordinates and width of one of the other elements on the page.
Now on to this week's tools!
Preprocessor Tools
Buttons
A CSS button library built with Sass and Compass. Lots of nice options with on-page demos.
Shade
"The ultimate shadow mixin." You can adjust the angle of the shadow by setting it in degrees, which, to be honest, seems more logical than the way its done in plain CSS.
Sassaparilla
A simple Sass-based starting point for responsive projects, used and released by the developers at design agency fffunction.
Roole
A newcomer to the preprocessor languages. Might be worth looking into to see if it has any advantages over other more established options.
Compass2CSS
A (misnamed?) online app to compile Sass to CSS.
Css2Less
Another online compiler, this time for CSS to LESS. Described as a way to "quickly convert your old CSS files to fresh new LESS files."
Text Editors and Visual Tools
Tern
A stand-alone JavaScript code analysis engine, intended for use as a text editor plugin (Emacs, Vim, Sublime, Brackets). Includes auto-completion, function argument hints, and more.
Debuggex
A visual regular expressions tester and debugger. Includes a cheat sheet. This looks like a really neat way to learn regex.
/reFiddle+/
Another regex testing tool, basically the regular expressions version of JSFiddle.
Codeanywhere
In-browser code editing (HTML, PHP, JavaScript, CSS) from any device. Integrated with FTP and Dropbox, works in any browser, and has apps for Android and iOS.
Unify
This looks like it could work well for small static client projects where you can allow the client to edit the content themselves. Requires PHP5 and apparently is very quick to set up.
Kodiak JavaScript
An iPad app, touted as "the perfect IDE for web developers." 50+ bundled libraries and frameworks, a customizable editor, with WebKit-based previews.
Codassium
Collaborative code editing combined with video chat, for "a better way to conduct remote interviews."
Plunker
"An online community for creating, collaborating on and sharing your web development ideas." Same general idea as JSFiddle, CodePen, etc. with its own unique look and features.
Front-end Frameworks
Furatto
"A flat, fast, and powerful front-end framework for rapid web development." Styles for buttons, tables, grids, forms, along with some JS components.
Cardinal
"A small, 'mobile first' CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system."
UIkit
A lightweight and modular front-end framework written in LESS. Includes a nice comprehensive collection of responsive components and the site even has an online "customizer" tool.
JavaScript Libraries and Frameworks
Polymer
This is still in the early stages, and 'not production ready', but might be worth a peek. It's a polyfill-rich library that covers emerging technologies like Custom Elements, Shadow DOM, Pointer Events, and Web Animations.
cujoJS
"An architectural toolkit for building highly modular, maintainable web applications that are easy to test and refactor, with zero framework lock-in."
howler.js
An audio library for the modern web. Dependency-free, defaults to the new Web Audio API and falls back to HTML5 audio.
Bone.io
A lightweight framework that uses web sockets for building high-performance realtime single-page HTML5 apps.
Qatrix
A 5kb (gzip'd and compressed) library with features such as hardware accelerated animation, a modern codebase, and easy to learn syntax.
Tangle
This is different: A JavaScript library for creating "reactive documents". Best way to understand this is to check out the cool on-page demonstration.
Detector
Still in Beta, a "simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information."
Suggest Your Tool via Twitter
Have you built or written something cool for front-end developers? Send a link to your project via Twitter @WebToolsWeekly. I'll publish most any kind of tool including libraries, plugins, apps, or even a new book release. Tutorials and articles will not be included — there are plenty of other weeklies for that! :)
No Ads! (Let's keep it this way!)
I want this newsletter to stay ad-free indefinitely. So if you like the newsletter, you have the option to go to the donate page and give a small one-time amount using one of the services listed. If every subscriber gave just $2, that would be more than enough to keep this thing going strong and ad-free for a while.
Before I Go...
If, like me, you're a researcher and you get overwhelmed by the number of things you save and archive, this app might help you. It's called Kippt, and it's a way to resolve "the random and scattered nature of the web", allowing you to save notes and links, and you can even follow others and favourite things.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
