|
|
|
|
Issue #177 (download Attribute, Deploy/Task, Testing, Media)12/08/16
| Check out this week's sponsor: |
 |
Senior UI/JavaScript Frontend Engineer
Close.io is looking for experienced full-time, remote Frontend Developers who have a strong understanding of web technologies and want to help design, implement, and launch major user-facing features. Find out more here!. |
Some time ago, HTML5 added the download attribute for anchors (a elements, or links). This feature indicates to the browser that when a link is clicked, instead of visiting the page the user should be prompted to download the requested file.
If the download attribute is specified with no value, the browser will attempt download the file specified in the href attribute (assuming it exists). If a value is applied to the download attribute, this will be the file name, which the user can then change when the OS's native download dialog appears.
If we combine the download attribute with some JavaScript, we have the ability to let the user edit the content of the file to be downloaded before it's downloaded (actually, before the file even exists). Basically, we're generating the file on the fly using a data URI. Here's our HTML:
|
<textarea id="txt"></textarea>
<a href="nothing.html" id="link" download="code.html">Download HTML</a>
|
The user is given the option to type some HTML code into the textarea element. When they click the link, the following JavaScript will execute:
|
function downloadCode(link, code) {
link.href = 'data:text/html;charset=utf-8,' + code;
}
let link = document.getElementById('link');
link.addEventListener('click', function (e) {
downloadCode(this, txt.value);
}, false);
|
JS Bin demo
The key part of the code is on the single line inside the downloadCode() function. As mentioned, the browser will, by default, attempt to download whatever is specified in the href attribute. On this line, I'm changing the attribute to a data URI, specified with content type of text/html and a UTF-8 character encoding. The content of the href attribute after the character encoding will be the content of the file that's created and downloaded.
This sort of thing is pretty common in apps that generate graphics on the fly (maybe with canvas or SVG) and allow users to download the graphics. With data URIs, you can pretty much let the user download any type of content, and it can be generated dynamically based on previous user input. You just have to specify the content type correctly.
Credit for this tip goes to an older article by Chris West and this tweet by Cody Lindley where he links to examples demonstrating downloading three types of content. You can also check out MDN's article for more details on the download attribute.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Deploy, Build Tools, Task Runners, etc.
babel-plugin-log-deprecated
"Adds a console.warn statement to the functions annotated with the JSDoc @deprecated tag. The console.warn is added at the beginning of the function body."
Splittable
"Module bundler with support for code splitting, ES6 & CommonJS modules."
Webpack Bundle Analyzer
"Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap."
Lasso.js
"An eBay open source Node.js-style JavaScript module bundler that also provides first-level support for optimally delivering JavaScript, CSS, images and other assets to the browser."
The Canary in the Goldmine
"A simple tool for pulling down an arbitrary module from npm and testing it using a specific version of the node runtime."
grunt-javascript-obfuscator
Grunt task that obfuscates JavaScript using javascript-obfuscator.
babel-plugin-dynamic-import-webpack
"Babel plugin to transpile import() to require.ensure, for Webpack."
npm
The world's most popular package manager is now at version 4.x
Yarn
The new hotness in dependency management.
Testing and Debugging Tools
Chaos Socket
"Mock WebSockets and create chaos."
Sentry
"Stop hoping your users will report errors. Sentry’s real-time error tracking gives you insight into production deployments and information to reproduce and fix crashes."
Dply
"Your Linux Cloud Server in seconds. Sign in with your GitHub account and create a cloud server. Use the SSH-keys in your Github account to log in to your server."
Email Validator
Paste HTML email into the textarea and this tool will will pull pertinent information about your HTML Email Build.
aXe
Chrome extension. "Automated tool to find Accessibility defects on your web site."
pixelmatch
"The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests."
Redux DevTools
"A live-editing time travel environment for Redux."
LogRocket
"Record and Replay for Redux apps. Fix every crash, bug, and user issue."
Multimedia Tools
ng2d3
"Angular2 and D3js Data Visualization JavaScript Framework for building composable, re-usable Charts in AngularJS."
Victory
"React.js components for modular charting and data visualization."
meSing.js
"A JavaScript singing synthesis library that uses the Web Audio API's DSP capabilities in conjunction with the meSpeak.js speech synthesis library to provide a vocal synthesizer for the web."
primitive.js
"A JavaScript port of the primitive.lol app, originally created by Michael Fogleman. Its purpose is to re-draw existing images using only primitive geometric shapes."
App Screenshot Maker
"Design gorgeous app marketing screenshots."
Media Recorder JS
"A JavaScript library providing cross-browser audio/video recordings. A wrapper for using the MediaStream Recording API."
A Tweet for Thought
Here's a useful GitHub tip from Josh Greenwood.
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...
Peter Cooper of JavaScript Weekly has launched the first ever JS Awards, which you can start voting on today.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
