Issue #125 (window.id, Multimedia Tools, Testing Tools, RWD)
(Skip to the tools section below)
<body id="myBody" class="home">
<div id="one">This is div one</div>
<div id="two"><p>This is div two</p></div>
<div id="four" data-name="fourDiv"></div>
You can access any of those HTML elements by simply using the values of the id attributes:
console.log(myBody.className); // "home"
console.log(one.textContent); // "This is div one"
console.log(two.innerHTML); // "<p>This is div two</p>"
console.log(three.id); // "three"
console.log(four.dataset.name); // "fourDiv"
console.log(innerHeight); // already global
Here it is on JS Bin
Notice that the script doesn't access the elements using getElementById(), querySelector(), or anything else. I'm simply referring to the id attributes directly. All of these could also be written as "window.id" if you wanted to be more explicit.
But, as you'll notice with the last log in that line, this technique can cause problems. If a global variable already exists with the id value chosen, it won't work, but will instead reference the original global variable. In this case, the final example references "innerHeight" which is already a valid property of the Window object and so it just spits out the inner height of the window. Other examples include history, location, navigator, innerWidth, and much more.
So I would chalk up this little tip to "good to know" but probably not something you'll want to use, unless you're being really careful with your naming of id attributes (e.g. you use a very specific prefix to namespace all the values).
Now on to this week's tools!
"HTML5-based Text-To-Speech library designed to add voice features to web sites and apps across all smartphone, tablet and desktop devices. It supports 51 languages through 168 voices, no dependencies and weighs just 14kb."
"Encode your content with the same technology as Netflix and YouTube in a way that it plays everywhere with low startup delay and no buffering."
SVG Icon Sprite Polyfill
A polyfill for Internet Explorer 9+ and the SVG 'use' element.
"Converts a string of SVG into an HTMLImageElement using Blob and URL.createObjectURL. Falls back to encodeURIComponent for unsupported browsers, such as Safari 8.0."
"Loads your compiled SVG sprite into the page immediately after the opening 'body' tag. The SVG sprite is wrapped in a visually hidden 'div'."
"Make images look as if they are made out of 1x1 LEGO blocks."
A motion graphics library for the web.
"Tiny library for playing video on canvas elements."
"A 3D data visualization library built using three.js."
Testing and Debugging Tools
"Compare website versions with highlighted changes before you deploy."
"Web Debugging Proxy based on Chrome DevTools Network panel. This tool will help you analyze web traffic outside the browser using familiar Chrome DevTools interface."
A bookmarklet "meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML."
SSL Server Test
"This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet."
Analyze and optimize your website's web performance, SEO, security, quality, and more.
Mixed Content Scan
Scan your HTTPS-enabled website for mixed content.
Network, web, and application monitoring service.
Live DOM Viewer
Just input some HTML and you'll get a live tree-based view of the code.
"One Style to Rule Them All. No decisions to make. No .eslintrc, .jshintrc, or .jscsrc files to manage. It just works."
"A service that monitors the uptime, downtime, and performance of websites. Get 24/7 monitoring."
"Counts blank lines, comment lines, and physical lines of source code in many programming languages."
RWD and Mobile Tools
Fluid for Sketch
"A Sketch plugin that provides a means to create more constraint-based, responsive designs. It is based on Auto Layout constraints."
Responsive Grid System
A mobile-first 12, 16, and 24-column grid system for fast, intuitive development.
"A jQuery plugin that populates a table with the necessary data attributes in order to display as a list on smaller viewports."
"A 60fps infinite scrollable list for mobile devices."
"A virtual joystick for touch capable interfaces."
"Quickly build a backend for your mobile app. Divide.io is an open source backend library."
A Tweet for Thought
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...
If you're in the market for a stand-up desk, you might want to consider Refold, a foldable, portable, cardboard standing desk.
Thanks to all for subscribing and reading!