|
|
|
|
Issue #90 (appendChild() Trick, Frameworks, Performance Tools)04/09/15
Here's a really quick tip about using appendChild() and insertBefore(): If you use either of these methods on an element that's already been added to the document, the element will be removed from its place and put into the new place.
To demonstrate, here's some HTML:
<div class="box1"></div>
<div class="box2"></div>
|
Then, in the CSS, I have this:
.box1 div {
width: 100px;
height: 100px;
background: firebrick;
}
.box2 div {
width: 100px;
height: 100px;
background: orange;
}
|
Here the different background colors ensure that I can visually differentiate between a div inserted into box1 compared to a div inserted into box2. Now we can test it out:
var b1 = document.querySelector('.box1'),
b2 = document.querySelector('.box2'),
el = document.createElement('div'),
t;
b1.appendChild(el);
t = window.setTimeout(function () {
b2.appendChild(el);
clearTimeout(t);
}, 3000);
|
Notice I'm using setTimeout() with a 3s delay. This is done so I can easily see the div inserted into box1, then after the specified delay, inserted again into box2. Even without setTimeout(), the effect would be clear. But this way we can see that even though the div is inserted twice, it's still one element.
Try it out in this JS Bin demo.
This might seem pretty trivial, but with some planning you can see how it might come in handy. If you know you have to add and remove an element, then eventually add the same element again, this saves you the trouble of removing it. Just add it again wherever you want, and it will automatically be removed, as shown above. It all depends on what you're trying to do, but in some instances this might save you a step when manipulating the DOM.
Did you like this JS/DOM tip? I've collected 70 previous tips into an E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Now on to this week's tools!
Front-end Frameworks
React Isomorphic Starterkit
"Create an isomorphic React app in less than 5 minutes."
Typesettings.css
"The typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals."
csswizardry-grids
"A fully responsive, mobile-first, infinitely nestable, reversible, reorderable, simple to understand, human-friendly, robust grid system."
Rin
"A lean, gulp-based HTML and Sass boilerplate for better front-end coding."
Poly
A simple UI kit that includes, buttons, typography, form styles, a grid and more.
MUI
"MUI is a lightweight HTML, CSS and JS framework for sites that follow Google's Material Design guidelines."
Amazium
"The clean and simple responsive framework."
lumX
"The first responsive front-end framework based on AngularJS & Google Material Design specifications."
Flakes
"An open source design and frontend framework that serves as a foundation for internal business applications."
Formstone
"Not a framework. Just a collection of thoughtfully crafted front-end components."
Skyline
"A starting point for building custom CSS frameworks. The starter kit provides a solid CSS architecture that acts as a scaffolding to support your unique design system."
Performance Tools
PerfAudit
"Performance audit of web applications by professionals."
localFont
"An online Vanilla JS tool that converts your font family files into a ready to use solution for localStorage web font caching."
nines
"A web performance tool aimed to help developers find critical performance issues."
memory-stats.js
Minimal monitor for JavaScript heap size via performance.memory.
Shrinkray
"Once you sign in with your GitHub account, you can optimize all of the images in your repos with a single click. Even large sites with hundreds of images can be optimized in minutes."
automated-chrome-profiling
"Node.js recipe for automating JavaScript profiling in Chrome."
Closure Compiler
"A true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript."
UltraMinifier
A native Mac app. "The most simple YUI Compressor GUI to minify JavaScript and CSS code without using the Terminal."
Yellow Lab Tools
Online tool that detects performance and front-end code quality issues on your website.
The Uncategorizables
Web Design Quote Generator
"A simple tool that will replace your need for calculators, Excel sheets and Photoshop with 2 simple steps."
Call to Speakers
Dev and tech conferences looking for speakers.
SSLMate
"Buy SSL certs from the command line."
Wildcard SDK
"Replaces the slow, fragile blue links inside your app with beautiful, performant cards—the new paradigm for accessing content."
Paperspace
"A full computer you can access from any web browser."
A Tweet for Thought
What should a style guide include? Dan Mall sums it up briefly.
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...
On Google's Usenet page, click on the "Memorable Usenet Moments" to see a really nice collection of Usenet posts going back to 1981, including Usenet's first mention of Microsoft, first thread about AIDS, and lots more.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
