|
|
|
|
Issue #141 (InsertElement/Text, Testing, CSS/HTML)03/31/16
There have been two interesting additions to the DOM spec in recent months: the insertAdjacentElement() method and the insertAdjacentText() method. These methods are very similar to the insertAdjacentHTML() method, which I discussed way back in issue #3. Below is some code to demonstrate how the new methods work.
Suppose we have the following HTML:
|
<body>
<p id="p1">Example element with text.</p>
<p id="p2">Example 2nd element.</p>
</body>
|
We'll do some manipulation using the two new methods:
|
var p1 = document.getElementById('p1'),
p2 = document.getElementById('p2');
p1.insertAdjacentElement('beforebegin', p2);
p1.insertAdjacentText('beforeend', 'TEXT');
|
After running that code, the DOM will look like this:
|
<body>
<p id="p2">Example 2nd element.</p>
<p id="p1">Example element with text.TEXT</p>
</body>
|
(View on JS Bin)
Notice the "p2" element was removed from its place and moved before the "p1" element. Also, the "TEXT" snippet was inserted at the end of the "P1" element.
As with insertAdjacentHTML(), both of these methods take a string as the first argument that must be one of:
- beforebegin
- afterbegin
- beforeend
- afterend
This argument is mandatory and it represents where, in relation to the element on which the method is applied, to place the inserted argument (before the element begins, before it ends, etc). The second argument is the element or text you want to insert. If you fiddle with it in the demo, you'll get a clearer picture.
These two new methods round out this feature nicely because previously you could only insert a string of HTML as text. Now you can insert an element, an HTML string, or a string of text (which means markup will be inserted escaped as text).
The best part about these "new" methods? They're not really new. These have been supported as nonstandard features for some time in all browsers except Firefox – even in IE (though I'm not sure how far back support goes).
Now on to this week's tools!
Testing and Debugging Tools
Cache Manifest Validator
"Node.js based validator for cache manifest files." Similar to markup validation, you can do URI, file upload, or direct input.
SinonJS
"Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework."
Snyk
"Find & fix known vulnerabilities in Node.js dependencies."
PEAT
"The Trace Center's Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software."
weinre
WEb INspector REmote. "A debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone."
Juttle
"An analytics system for developers that simplifies and empowers data driven application development."
HTTPS Checker
"The Most Advanced HTTPS Mixed Content Checker Available. Check your website content works with HTTPS to keep data private, unmodified and trusted by visitors."
Valence
"Valence (formerly Firefox Tools Adapter) is an experimental add-on that enables the Firefox Developer Tools to debug a wider variety of browsers, not just the Gecko-based [browsers]."
TestSubject
"Test how your email subject lines appear on the most popular mobile devices."
http2check
"Utility for checking if a web server supports HTTP/2."
CSS and HTML Tools
Normalize.css
The popular CSS reset is now at version 4.x.
Atomizer Web
A web version of Yahoo's Atomizer, for creating Atomic CSS.
CSSCO
"Photographic filters made with CSS."
Enduring CSS
"A guide to writing style sheets for large scale, rapidly changing, long-lived web projects."
Repaintless.css
A lightweight animation library that incorporates smooth animations.
FLIP.js
"A helper library for doing FLIP animations... an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms."
Clippy
"CSS clip-path maker." A visual UI for creating complex shapes using the clip-path property.
Balloon.css
"Lets you add tooltips to elements without JavaScript and in just a few lines of CSS."
A11y Toggle
"A tiny script (less than 0.5Kb gzipped) to build accessible content toggles."
CSS Toggle Switch
"Accessible CSS toggle switch using standard form controls."
mdcss
"Lets you easily create and maintain style guides with CSS comments using Markdown."
The Uncategorizables
crossorigin.me
A free CORS proxy for everyone. "A CORS proxy is a service that allows developers (probably you) to access resources from other websites, without having to own that website."
Ad Block Detection Code
A script to deal with ad blocking, available by request from IAB.
OpenFoundry
"A new platform for open-source fonts in a noise-free environment, to highlight their beauty, extend functionality and encourage further exploration."
Can I Use? Shortcode
A WordPress shortcode to display data from caniuse.com
Auto SNI
"Free, automated HTTPS for NodeJS made easy."
Repartee
"A plugin for PHP apps to interact with and utilise the TextLocal.com API to send and receive SMS/MMS messages."
A Tweet for Thought
Šime Vidas points out something that's, sadly, an alarming trend on many websites and web apps.
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...
In case you didn't know, the WHATWG HTML spec is on GitHub.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
