Issue #3 (insertAdjacentHTML(), jQuery, Mobile, misc.)08/08/13
Every once in a while I stumble across a jQuery or native JavaScript feature that I haven't seen before. I recently came across the previously-unknown-to-me insertAdjacentHTML() method and thought I would share a quick summary of it before getting to this week's tools.
In short, this method lets you insert an HTML fragment adjacent to a specified element. To show you how this it works, suppose you have the following HTML:
<div id="one">
<p>example text one.</p>
</div>
<div id="two">
<p>example text two.</p>
</div>
And suppose you want to inject an HTML fragment in between element "one" and element "two". (The fragment doesn't have to be HTML, it could just be text with no actual tags.) Using insertAdjacentHTML() you can insert some HTML quite easily:
var two = document.getElementById("two");
two.insertAdjacentHTML('beforebegin',
'<div><p>example inserted text.</p></div>');
And the generated DOM will be:
<div id="one">
<p>example text one.</p>
</div>
<div><p>example inserted text.</p></div>
<div id="two">
<p>example text two.</p>
</div>
(You can view this simple example in this JS Bin.)
The method takes two parameters. The first is the position of the inserted HTML, which is relative to the element targeted (in this case the "two" element). The second parameter is the actual HTML you want to insert. The position parameter has to be one of the following strings, inside quotes:
'beforebegin' (places the HTML immediately before the targeted element)
'afterbegin' (immediately before the targeted element's content)
'beforeend' (immediately after the targeted element's content)
'afterend' (immediately after the targeted element)
According to MDN, using insertAdjacentHTML()has performance advantages over other methods like innerHTML.
And if you're wondering how this method flew under your radar for so long, it's probably because it started out as a proprietary IE feature, created by Microsoft, and didn't get cross-browser support until Firefox 8 added it. As it stands, this works everywhere and is now an HTML5 standard. The only browsers that don't support it have now fallen out of general use.
For further reading on insertAdjacentHTML(), check out this article on Mozilla Hacks and this one by John Resig.
Now on to this week's tools!
JavaScript and jQuery Tools
Table-to-JSON
"A jQuery plugin that converts an HTML Table into a javascript object. Great for working with user-editable tables or accessing output from 3rd party tools."
VerbalExpressions
"JavaScript Regular expressions made easy." This looks useful for anyone that has had trouble constructing complex regular expressions.
populatejs
This seems like a silly microlibrary, but I suppose for large use cases it could be handy. It's a library that helps to create filler duplicated HTML in a static document. A simple class name tells the script how many times to duplicate a section of HTML.
Voyeur.js
A "tiny Javascript library that lets you traverse and manipulate the DOM" via the dot operator, making for a "streamlined and native experience". Also lets you create and append elements via naming and chaining.
Conditioner.js
This looks interesting: A library for loading behaviour based on environment conditions. For example, a Google Maps link can display its map on the page only if there is enough screen space and the map area is visible on the screen.
english-time
Converts common english time expressions into unix time. For example, "an hour and a minute" becomes "3660000" and "314 milliseconds" becomes "314".
Responsive Design Tools
Viewport Sizes
A filterable reference tool by Matt Stow listing viewport sizes for virtually all devices/OSes.
Screen Sizes
Very similar to the previous one, this one built by the folks at Type/Code. Nice interface has options for viewing info on smartphones, tablets, and monitors.
ReSrc
"Responsive images on demand from the cloud." Link images to ReSrc and they will "take care of the rest." Supports retina and doesn't use device detection or cookies. Considering all the challenges in achieving responsive images, this is certainly worth a look.
WP-Flex
A responsive Wordpress theme boilerplate by Dennis Gaebel (grayghostvisuals). "Adheres to best practices and requirements set by the official WordPress Codex and theme review guidelines."
Responsive Nav
A jQuery plugin to easily implement the familiar "three horizontal lines" navigation thing for smaller screens. Custom options include ability to disable CSS transitions, change transition speed, along with callback options for open and close.
Other Miscallaneous Tools
These tools are so good, I couldn't categorize them! :)
OAuth.io
"OAuth that just works." Lets you integrate 70+ OAuth providers in minutes using a single API.
CoderPad
A collaborative online code editor with real-time execution, marketed for interviewers hiring candidates or mentors helping their students remotely.
Pingendo
Just another web authoring tool. This is a native GUI app for Windows or Mac, with the tagline "web authoring with comfort". Installed quickly on my Windows 7 machine, and has options for starting projects with Bootstrap or Foundation.
CoVim
A Vim plugin for collaborative editing, allowing multiple users to connect to the same document with uniquely colored cursors to help identify who's writing what.
mebe
"Instant images". This is too simple and too cool not to include. An API that lets you generate a photo of just about anything on demand. Example: http://mebe.co/man_with_apple.jpg. Try it by constructing your own file name with underscores or just a single word.
Montage
An HTML5 framework for building modern web apps. Offers lots of high-level features, so probably not for the faint of heart—but certainly worth a glance for those looking for a powerful, multi-device, application framework.
automaton
A task automation tool built in JavaScript. Comes bundled with filesystem and scaffolding tasks and can be installed locally or through NPM.
Squiggle
An "always on" workroom for teams working remotely. Used by a number of big name companies like P&G and Rackspace.
Framer
A prototyping tool built for designers. Helps you quickly build interactions and animations and integrates with Photoshop. Marketed as an alternative to Flash.
Litmus Scope
This free service looks useful. If you don't want to forward an email, you can instead use the Scope bookmarklet or Mac app to create a clean web-based version of the email, with desktop and mobile previews.
Hoverboard
A clean, simple portfolio space for coders, designers, and other creatives to share their work. Very easy to sign up and create a profile.
Crocodoc
"HTML5 document embedding". Converts MS Office and PDF documents to HTML5 so they can be embedded right in your web app. Renders documents as clear as the originals and has mobile device support.
ownCloud
Offers "universal access to your files through a web interface or WebDAV" along with the ability to view and sync contacts, calendars, and bookmarks across multiple devices.
Suggest Your Tool via Twitter
Have you built or written something cool for front-end developers? Send a link to your project via Twitter @WebToolsWeekly. I'll publish most any kind of tool including libraries, plugins, apps, or even a new book release. Tutorials and articles will not be included — there are plenty of other weeklies for that! :)
Help Keep Web Tools Weekly Ad-free!
I want this newsletter to stay ad-free indefinitely. So if you like the newsletter, you have the option to go to the donate page and give a small one-time amount using one of the services listed.
Before I Go...
The evidence against using a home page carousel seems to be building up. WebAIM employee Jared Smith has created Should I Use A Carousel?, a simple... er... carousel-based website that discusses the evidence in favour of rejecting this common and often overused design pattern.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
