|
|
|
|
Issue #133 (outerHTML, Frameworks, Media, Static Sites)02/04/16
| Support this week's sponsor: |
 |
Point & Click Bug Tracker
Bug tracking so simple, it's like sticky-notes for your website. Just point, click & send to create visually contextual bug reports & feedback. Complete with screenshot, browser and OS details it couldn't be easier for anyone building a website. |
Here's a DOM feature I haven't yet covered in this newsletter: the outerHTML property. This one may have gone unnoticed for some time by many developers because it wasn't supported in Firefox until version 11. So those who had to support versions 3 to 4 (prior to auto-updating) couldn't use it.
According to MDN this attribute "gets the serialized HTML fragment describing the element including its descendants." It's basically the same as innerHTML, except it also take the parent itself, not just what's inside the parent. So with the following HTML:
|
<div id="parent">
<p>Some text for parent.</p>
<div id="child">
<div id="grandChild">
<p>Some text for grandchild.</p>
</div>
<p>Some text for child.</p>
</div><!-- #child -->
</div><!-- #parent -->
|
Assuming you have references to child and grandChild, you can manipulate the HTML like so:
|
console.log(child.outerHTML);
/* will log:
<div id="child">
<div id="grandChild">
<p>Some text for grandchild.</p>
</div>
<p>Some text for child.</p>
</div>
*/
grandChild.outerHTML = '<p>New paragraph</p>';
console.log(document.getElementById('grandChild')); // null
|
(JS Bin)
You can see that the log of the outerHTML of the child is not a reference to the object, but a string representation of the content, including the markup. You can use this property on any element and you can get the outerHTML of the root element, but you can't change it; this will throw an error.
Now on to this week's tools!
Front-end Frameworks
Bulma
"A modern CSS framework based on Flexbox."
Milligram
A minimalist CSS framework, 2KB gzipped, for a fast and clean starting point for your projects.
Angular Material
For AngularJS. "The reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design."
Gridifier
Rethinks HTML layout and improves the browser's grid layout engine with the improved version of the Skyline 2D bin-packing algorithm.
X-Tag
"A Microsoft supported, open source, JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for rapid component development."
Foundation
Zurb's popular framework is now at version 6.
Unsemantic
"A fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages."
StringBean
"Featherweight Responsive CSS Framework for Mobile to 4k Screens... based on a 16-point system, rather than the traditional 12-point system that other frameworks use."
microscope
"A simple and fast boilerplate that assists the development of Atomic Design Systems."
Rikulo
"A free and open source Dart framework for creating incredible cross-platform web and native mobile applications using HTML5."
Multimedia Tools
ECharts
"A free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products." Based on zrender Canvas library.
react-canvas
"High performance canvas rendering for React components."
svg-icon-system-boilerplate
"A boilerplate for building a custom icon system via a linked external SVG sprite."
Timbre.js
Allows you to process and synthesize audio in web apps with JavaScript.
Unique gradient generator
"Helps you to generate beautiful blurry background images that you can use in any project. It doesn't use CSS3 gradients, but a rather unique approach."
Colorify.js
"A script written in JavaScript, that allows you to extract colors from images, and manipulates them."
AntiModerate
"Reduce loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images."
URLSnap
A simple and quick screenshot service with an API.
LICEcap
One of the easiest tools to create animated GIFs from screen captures.
Static Site Generators, Hosting, etc.
CMS.js
"Fully client-side, JavaScript site generator in the spirit of Jekyll that uses plain ol' HTML, CSS and JavaScript to generate your website."
Jekyll
The popular static site generator is now at version 3.x.
Gatsby
"Transform plain text into dynamic blogs and websites using React.js."
Exposé
A simple static site generator for photo-essays.
Webflow CMS
"Meet the world’s first visual CMS. The future of content management systems is here."
My.DropPages
Service that lets you use Dropbox to host static web pages.
Reem
Static site generator written in JavaScript. "Reads a source directory into a tree structure, which is then processed internally... The final tree is rendered and written to the output directory."
A Tweet for Thought
I actually think about this all the time. Hard to escape that reality.
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...
Check out this video where Beau Ouimette (aka "Aquachigger") treasure hunts in a river (which is dangerous unless you know what you're doing) and finds 4 iPhones, 2 GoPros, and a boatload of sunglasses.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
