Web Tools Weekly Issue #99 (img.width, Testing, jQuery Plugins, Productivity)

Issue #99 (img.width, Testing, jQuery Plugins, Productivity)06/11/15

Support this week's primary sponsor:

Free White Paper: How to Choose the Right Charting Component
Discover important factors to consider while evaluating a charting component for your software product.

There are a few different DOM features that let you get the width of an image via JavaScript. Three of them you've probably seen before but the fourth might be new to you.

First of all, let's say our image is in the HTML like this:

<img src="https://placekitten.com/g/400/600"

                 width="300" height="450">

Notice that the image is grabbed from a placeholder service (placekitten), and I've specified the size of image that I want. On top of that, however, I've changed the dimensions of the image, scaling it down, but proportionally. This is actually not a good practice, but it will illustrate one of the features I'm going to use in the JavaScript.

But before I do that, let's also change the image's size in the CSS by one pixel both ways:

img {

              width: 299px;

              height: 449px;

            }

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.

So that just about covers every possible way to get the dimensions of any image on a web page with JavaScript.

Now on to this week's tools!

Testing and Debugging Tools

Justice.js
"Will create an on page toolbar that displays page timing metrics and a streaming fps meter. Budgets are also supported for timing metrics."

PhantomCSS
"A CasperJS module for automating visual regression testing with PhantomJS or SlimerJS and Resemble.js."

webpagetest-mapper
"Maps JSON result data from marcelduran/webpagetest-api into human-readable document formats."

Cypress
"A test engine that runs unit and integration tests in your browser."

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

validate-asm
"Like JSLint, but for asm.js."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

jQuery Plugins

jQuery Calx
An Excel calculation engine and formula parser that offers spreadsheet-like functionality without bringing a spreadsheet-like user interface into HTML.

Tweetable
"Turn any html element into a twitter link that either uses the native app, or falls back to web."

directoryTree.js
"For displaying an array of filepaths as a browsable, hierarchical directory (tree) structure. Plays nice with Bootstrap 3."

jQuery.ProfanityFilter
"Has the ability to filter out profane words on the client side."

Progression.js
"Gives users real time hints & progress updates as they complete forms."

jQuery lightSlider
"A lightweight responsive content slider with carousel thumbnails navigation."

jsGrid
A lightweight client-side data grid control that supports basic grid operations like inserting, filtering, editing, deleting, paging and sorting.

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Productivity Tools

Spaces
Chrome extension that treats each window like a different workspace and lets you name and save each space.

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

slack-overflow
"Search StackOverflow right from Slack."

Mata
"Chrome extension that makes reading the web friendly for your eyes."

Loading
"Simple network activity monitor for OS X."

Something
"A realtime reading list powered by your Twitter stream."

Pasteasy
"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!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly