Issue #99 (img.width, Testing Tools, jQuery Plugins, Productivity)
(Skip to the tools section below)
First of all, let's say our image is in the HTML like this:
But before I do that, let's also change the image's size in the CSS by one pixel both ways:
So now we have three different width and height values, all of which can be gleaned from the DOM. If we have a variable called myImg that holds a reference to our image, we can obtain the width in different ways:
var c = getComputedStyle(myImg).getPropertyValue('width'), // 299px
w = myImg.width, // 299
a = myImg.getAttribute('width'), // 300
n = myImg.naturalWidth; // 400
Here's a JS Bin that uses all of these techniques and displays them on the page. The same results are shown in comments in the code above.
Here's a description of each one:
- The getComputedStyle() method lets you get any property value, and this is the final computed style, whether it's in the CSS or not. Note that if I used ems or another unit, it would still spit out the value in pixels.
- The second method is just accessing the width property of the image directly, which basically gets the same result, but without the unit. Again, this is the computed width, not the original or that in the HTML.
- The getAttribute() method allows you to get exactly what's in the HTML. This was overridden in our CSS, but we can access it here.
- Finally, we have probably the least-known technique, using the naturalWidth property. This gets the original width of the element, regardless of what's in the HTML or the CSS. There's also the complementary naturalHeight to go along with that.
Now on to this week's tools!
Testing and Debugging Tools
"Will create an on page toolbar that displays page timing metrics and a streaming fps meter. Budgets are also supported for timing metrics."
"A CasperJS module for automating visual regression testing with PhantomJS or SlimerJS and Resemble.js."
"Maps JSON result data from marcelduran/webpagetest-api into human-readable document formats."
"A test engine that runs unit and integration tests in your browser."
Get a full fake REST API with zero coding in less than 30 seconds. Created for front-end developers who need a quick back-end for prototyping and mocking.
"Like JSLint, but for asm.js."
An Excel calculation engine and formula parser that offers spreadsheet-like functionality without bringing a spreadsheet-like user interface into HTML.
"Turn any html element into a twitter link that either uses the native app, or falls back to web."
"For displaying an array of filepaths as a browsable, hierarchical directory (tree) structure. Plays nice with Bootstrap 3."
"Has the ability to filter out profane words on the client side."
"Gives users real time hints & progress updates as they complete forms."
"A lightweight responsive content slider with carousel thumbnails navigation."
A lightweight client-side data grid control that supports basic grid operations like inserting, filtering, editing, deleting, paging and sorting.
Chrome extension that treats each window like a different workspace and lets you name and save each space.
iOS app. "Automatically finds, organizes, and helps to manage contracts, certificates, financial records and more. Best of all, you’ll have secure, easy access to all of your stored information anytime, anywhere."
"Search StackOverflow right from Slack."
"Chrome extension that makes reading the web friendly for your eyes."
"Simple network activity monitor for OS X."
"A realtime reading list powered by your Twitter stream."
"The fastest app to copy text messages and photos between your phone and computer."
A Tweet for Thought
I think Rainn Wilson has been living inside my brain.Or else I guess it happens to everyone.
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...
Gotta love it when laypeople interact with those in the tech world. Someone offered Chrome's dev team tile and hardwood floor services in exchange for fixing a bug in Chrome (which has since been fixed). So if you notice brand new flooring in Google's offices...
Thanks to all for subscribing and reading!