|
|
|
|
Issue #112 (designMode, CSS/HTML, Content & Data, JS Utils)09/10/15
There's a property called designMode on the document object that allows you to make an HTML document editable, the same way that an element can be editable using the contenteditable attribute.
Let's say we have the following HTML:
|
<iframe src="example.html" id="myFrame"></iframe>
<button>Get Frame Content</button>
<output></output>
|
The content of the iframe here doesn't matter for the purpose of this demo. We'll use the following JavaScript to dynamically add editing capabilities to the iframe:
|
var myFrame = document.getElementById('myFrame'),
frameBody = myFrame.contentDocument.body,
btn = document.querySelector('button'),
op = document.querySelector('output');
frameBody.innerHTML = 'Click and edit the contents of this frame. Use ctrl-b and ctrl-i to add bold or italic.';
myFrame.contentDocument.designMode = 'on';
btn.addEventListener('click', function () {
op.innerHTML = frameBody.innerHTML;
}, false);
|
Full demo is here
You might run into problems and differences in the 3 major browsers. Chrome is probably the best option for this example. Part of this is due to the fact that the iframe is using a non-existent source, which IE doesn't seem to like.
Nonetheless, as you can see, the designMode property can be set to either "on" or "off". I could also set the designMode to "on" for the current document, rather than the iframe. The above code allows the iframe to be fully editable by simply clicking inside it and typing some text.
Note also in Chrome, if you use CTRL-B or CTRL-I, just like a rich text editor, the text will become bold or italic. Then, when you click the button to grab the frame content, it will appear on the current page with the formatting intact.
There's lots more I could write about this, as this does have quite a few quirks and browser differences. You can view the resources below for further info:
Now on to this week's tools!
CSS and HTML Tools
Layout Grid
Static responsive grid with pure CSS. Also includes options to add drag and drop and resize features to a masonry-style grid with some JavaScript.
Writ
"Opinionated, classless styles for semantic HTML."
Tufte CSS
"Provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts."
ProCSSor
"Cleans and organizes your CSS the way you want it. Perfect for CSS consistency when multiple people contribute."
Typeset
A typographic pre-processor for HTML that gives you real hanging punctuation, soft hyphen insertion, optical margin outdents, small-caps conversion, punctuation substitution, and space substitution.
Tuesday
"A quirky CSS animation library."
rucksack
"Makes CSS development fun again, with features the language should have come with out of the box. It's built on PostCSS, it's modular, it doesn't add any bloat, and it's lightning fast."
The Visual ARIA Bookmarklet
Allows any sighted person to physically see the use of ARIA upon any public website, including all landmark and region roles, structural roles, live regions, pseudo interactive constructs, etc.
Sequence.js
"The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications."
Quantity Queries Builder
A tool to help you build quantity query selectors. A quantity query is "a complex CSS selector that allows styles to be applied to elements based on the number of siblings."
Content, Files, App Data, etc.
Cloudstitch
"Powers web pages with Google Docs. It's the CMS your clients already know how to use."
file.io
"Simply upload a file, share the link, and after it is downloaded, the file is completely deleted. For added security, set an expiration on the file and it is deleted within a certain amount of time, even if it was never downloaded."
Blockspring
A Google Sheets or Excel plugin to let you access web services from your spreadsheets.
Paper Time
"A simple MarkDown inspired syntax to track time using text files and a tool to convert those files into beautiful reports."
DocLayer
A Dropbox-based distraction-free writing/document tool accessible from mobile or desktop. Allows you to format text and include maps, charts, images, etc.
sonadier
"Build a better database. Make online apps your team can use from anywhere."
vmd
CLI tool to let you preview markdown files in a separate window. Markdown is formatted exactly the same as on GitHub.
Marked 2
"A Markdown preview with an elegant and powerful set of tools for all writers."
JavaScript Utilities and Micro Libraries
getCaniuse
"Turns Caniuse.com into a plugin that you can use on your website."
React Resolver
"Lets you define data requirements per-component and will handle the nested, async rendering on both the server and client for you."
morphdom
"Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM here."
React Color
"A collection of color pickers from Sketch, Photoshop, Chrome, and more."
esnow
"Write future JavaScript now everywhere all the time in a snap."
A Tweet for Thought
It's official. Responsive web design is now mainstream.
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...
This is pretty neat, it's a web page you can edit by voice commands, based on the Web Speech API.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
