|
|
|
|
Issue #125 (window.id, Media, Testing, Mobile)12/10/15
Here's a simple fact about global variables and ids in JavaScript: Every time you add an id attribute to an element in an HTML page, that id becomes a global variable (that is, a property of the Window object) accessible in your scripts on that page. For example, let's say you have the following HTML:
|
<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="three"></div>
<div id="four" data-name="fourDiv"></div>
<div id="innerHeight"></div>
</body>
|
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!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Multimedia Tools
Microm
Library to convert audio from a microphone to MP3 with JavaScript.
ResponsiveVoiceJS
"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."
bitcodin
"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."
Railroad-diagram Generator
A small JavaScript library for generating railroad diagrams (like what JSON.org uses) using SVG.
SVG Icon Sprite Polyfill
A polyfill for Internet Explorer 9+ and the SVG 'use' element.
svg-to-image
"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."
BoomSVGLoader
"Loads your compiled SVG sprite into the page immediately after the opening 'body' tag. The SVG sprite is wrapped in a visually hidden 'div'."
HYBICON
"JavaScript library for synergistic SVG icons." Nice examples on the home page.
Legofy
"Make images look as if they are made out of 1x1 LEGO blocks."
mo.js
A motion graphics library for the web.
canvid.js
"Tiny library for playing video on canvas elements."
Mercer
"A 3D data visualization library built using three.js."
OpenSeadragon
"An open-source, web-based viewer for high-resolution zoomable images, implemented in pure JavaScript, for desktop and mobile."
webm.js
"JavaScript WebM encoder. Create WebM videos in your browser. No server-side, pure JavaScript."
Testing and Debugging Tools
Instadiff
"Compare website versions with highlighted changes before you deploy."
Betwixt
"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."
debugCSS
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."
DareBoost
Analyze and optimize your website's web performance, SEO, security, quality, and more.
Mixed Content Scan
Scan your HTTPS-enabled website for mixed content.
Dotcom-Monitor
Network, web, and application monitoring service.
chunkify
"A functional API to unblock your JavaScript."
Live DOM Viewer
Just input some HTML and you'll get a live tree-based view of the code.
JavaScript Standard Style
"One Style to Rule Them All. No decisions to make. No .eslintrc, .jshintrc, or .jscsrc files to manage. It just works."
pingometer
"A service that monitors the uptime, downtime, and performance of websites. Get 24/7 monitoring."
cloc
"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."
tabris.js
"A mobile framework that lets you develop native iOS and Android apps from a single code base written entirely in JavaScript."
pinch.js
"A lightweight JavaScript library to provide Desktop-like zooming by pinch."
Responsive Grid System
A mobile-first 12, 16, and 24-column grid system for fast, intuitive development.
TableList
"A jQuery plugin that populates a table with the necessary data attributes in order to display as a list on smaller viewports."
InfiniteList
"A 60fps infinite scrollable list for mobile devices."
nippleJS
"A virtual joystick for touch capable interfaces."
Divide.io
"Quickly build a backend for your mobile app. Divide.io is an open source backend library."
imgix
"A dependency-free JavaScript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density."
A Tweet for Thought
Sadly, Nicholas Zakas has announced that he will not be the author of the 4th version Professional JavaScript for Web Developers (which has long been one of my go-to JavaScript resources).
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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
