Issue #97 (next/prev siblings, JS Utils, Data, Performance Tools)
(Skip to the tools section below)
|Support this week's primary sponsor:
||Learn by Doing
In a previous tip I discussed:
Which are DOM properties that let you choose elements (excluding text nodes and comment nodes) based on being first/last elements in their parent. Similarly, here are two other properties:
The meanings should be clear from the names; you're accessing either the previous or next element (siblings) in relation to the specified element.
For example if I have 2 section elements with differing types of content, I could do the following checks (after caching the elements in their respective variables):
var s1 = document.getElementById('s1'),
s2 = document.getElementById('s2');
console.log(s1.nextElementSibling.nodeName); // "SECTION"
console.log(s2.previousElementSibling.offsetWidth); // width of s2
(JS Bin demo)
By reviewing the demo you can also see the HTML in each element and see the results. Pretty straightforward. Just a simple way to select the "next" or "previous" element in relation to the specified element. If the previous or next sibling doesn't exist, the property will return null.
Like firstElementChild and lastElementChild, these properties are supported everywhere including IE9+. Here's a polyfill if you need IE6-8 support.
Now on to this week's tools!
The Local Storage Bridge
1k library that uses local storage to allow you to exchange messages between tabs in the same browser.
"Morph DOM elements from one state to another with smooth transitions."
"Create custom SoundCloud players with React.js."
"cta.js or 'Call to Animation' is a light-weight performant library to animate your 'action-to-effect' paths."
Deck of Cards API
Not really a library/utility, but an API that can be used in card-based games. Very simple interface that lets you shuffle, choose a random card, produce a brand new deck, and lots more.
"Creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic."
ES Feature Tests
"Load your native ES6+ code in ES6+ compliant browsers and your transpiled code in older browsers."
You Might Not Need jQuery Plugins
A procedural texture generator.
Nice and elegant way to add zooming functionality for images, inspired by medium dot com.
Data, Content, Files, etc.
"Tiny plugin to display large data sets easily."
"Secures, stores, and tightly controls access to tokens, passwords, certificates, API keys, and other secrets in modern computing."
Google Cloud Bigtable
"Bigger than a data warehouse, fast enough for real-time access, and less expensive than running virtual machines."
File Comparison Tool
"Compare files with ease. Save the comparison for up to 6 months, and share. Free and mobile friendly."
"A Google Drive spreadsheet simple database. Stop wasting your time when a simple table is enough. Perfect for collaboration with multiple people editing the same spreadsheet."
"An open source tool (Apache License Version 2.0) that helps you analyze your website speed and performance based on performance best practices and timing metrics."
"A performance focused fork of confess.js."
"Allows you to point Speedgun.js at any public facing website to gather important web performance data."
Chrome extension. "A hack that provides a quick analysis, of page performance, on a modern Chrome browser."
A Tweet for Thought
Sass co-creator Chris Eppstein thinks it's a hoot that he gets paid to write software. I think we all agree with that sentiment.
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...
The W3C's developer-oriented tools (validators, link checker, etc.) have been given a proper home. I'm not sure how much that will help, but it did introduce me to a few tools that I didn't know existed.
Thanks to all for subscribing and reading!