|
|
|
|
Issue #88 (cloneNode(deep), CSS/HTML, Mobile, Productivity)03/26/15
You might know you can create nodes in the DOM using createElement(). But don't forget that you can also clone existing elements using the cloneNode() method, along with its optional argument. Let's quickly review how cloneNode() works, what the lone argument is for, and some things to be aware of.
Here's some example HTML:
<div class="box">
<p>Example text.</p>
</div>
|
We can clone this element in two ways, shown below:
var box = document.querySelector('.box'),
boxClone = box.cloneNode(),
boxClone2 = box.cloneNode(true);
document.body.appendChild(boxClone);
document.body.appendChild(boxClone2);
|
(Demo on JS Bin)
Notice the second-to-last line appends the box without the optional argument. This tells the browser to append only the parent element, without its children. But if we specify the Boolean "deep" argument, we tell the browser to clone the element along with its children. So if you look at the demo, you'll see that the two appended elements are different: One is empty, but retains its styles attached to the "box" class, and the other has the styles in addition to the inner paragraph content.
So keep in mind that if you're creating elements, it might be much easier to use cloneNode(). This way we can take an existing, already styled element and insert that, instead of an element that we have to apply various attributes to. It all depends on what we're trying to accomplish.
Some further notes on cloneNode():
- Remember, if you clone an element that has an ID, you will also be cloning the ID, causing the document to become invalid. So if you clone such a node, you should also modify the ID before appending the new node.
- You could use a value of "false" just to be explicit about not including the children, which I suppose might be easier to read, but this would be superfluous.
- Interestingly, according to PPK, the default value should be "true" and he claims Firefox supports this, however, I don't see this happening in Firefox, besides the fact that this would be awful for backwards compatibility and should not change in browsers in the future. (It's possible his page is out of date, or maybe I'm misunderstanding; I'll have to do some further research on that.)
- On void elements (e.g. img, meta, etc.), the argument makes no difference, since these elements can't have children.
- Regarding what's copied, MDN explains: "Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (e.g. node.onclick = fn)."
Now on to this week's tools!
CSS and HTML Tools
Primer
"The CSS toolkit and guidelines that power GitHub."
sanitize.css
Another take on the CSS reset, it "makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box."
JSS
Composable and reusable style sheets. A thin layer that compiles JSON structures to CSS. "By leveraging namespaces we can solve the cascading problem better than BEM and make our components truly reusable."
Bootstrap Zero
"The largest open-source, free Bootstrap template collection."
ReactShadow
"Use Shadow DOM with React.js and CSS imports; write your component styles in CSS."
littlebox
"Super simple to use, CSS-only icons."
ARIA Bones
"A series of templates which aim to show how WAI-ARIA can be used to make HTML more accessible. Inline comments explain how and when to use some of the most common WAI-ARIA roles and properties."
Msdotcom/WinJS Grid Framework
"A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed."
Grid displayer
Works with Bootstrap or Foundation. In-browser web design made easier with this bookmarklet that displays the grid of the front end framework being used.
CSS Gradient Animator
You can't animate gradients in CSS naturally, but you can use background positions to do so. This tool helps you build an animated gradient.
poor man's styleguide
"A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS."
RWD and Mobile Tools
Toast
A Responsive design and presentation Tool. "Give website presentations and control your website via mobile or just another tab. If you change the size on your mobile phone, the website will automatically resize on your desktop."
What Does My Site Cost?
"Find out how much it costs for someone to use your site on mobile networks around the world."
Responsive Design Bookmarklet
Another responsive design testing tool, this one lets you create the bookmarklet with your own predefined device sizes that you want to test.
Slideout,js
"A touch slideout navigation menu for your mobile web apps."
screencheck
Another RWD testing tool. Unique features include ability to toggle scrollbars on/off, one-click HTML validation, and a button to mimic orientation change.
syze
Media queries powered by JavaScript. Easily target your designs by device or browser sizes. Makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS.
Reapp
Next generation hybrid apps. "An easier, faster way to build apps with React and JavaScript."
Swiper
"Free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior."
Productivity Tools
Bindle Chat
"Group chat the way it should be."
Markdownly
"Edit, organize and store your Markdown notes."
Ghostnote
"Contextual notes todo for your Mac."
Let's Chat
"Self-hosted chat for small teams."
Hound
"Lightning fast code searching made easy."
A Tweet for Thought
As Brad Frost points out, responsive web design has gone 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...
You must check out this demonstration of animated URLs in the address bar. Can't believe I didn't think of this first.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
