|
|
|
|
Issue #97 (next/prev siblings, JS Utils, Data, Performance Tools)05/28/15
(Skip to the tools section below)
| Support this week's primary sponsor: |
 |
Learn by Doing
With more than 45 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging content. Start learning at www.codeschool.com  |
In a previous tip I discussed:
- firstElementChild
- lastElementChild
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:
- nextElementSibling
- previousElementSibling
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!
JavaScript Utilities and Mini Libraries
The Local Storage Bridge
1k library that uses local storage to allow you to exchange messages between tabs in the same browser.
ramjet
"Morph DOM elements from one state to another with smooth transitions."
ReactSoundPlayer
"Create custom SoundCloud players with React.js."
cta.js
"cta.js or 'Call to Animation' is a light-weight performant library to animate your 'action-to-effect' paths."
Egg.js
"A simple JavaScript library to add easter eggs to web pages."
Numeric JavaScript
"Allows you to perform sophisticated numerical computations in pure JavaScript in the browser and elsewhere."
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.
Headhesive.js
"Creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic."
xtypejs
"Extends the standard JavaScript types with new data-validating pseudo types, while also normalizing all the irregularities of working with JavaScript types."
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 searchable directory of vanilla JavaScript plugins that don't require jQuery. You can also filter by IE support (IE8+, etc).
texgen.js
A procedural texture generator.
MediumLightbox
Nice and elegant way to add zooming functionality for images, inspired by medium dot com.
Babel
A JavaScript compiler to let you use new ES syntax and not worry about browser support.
nude.js
"Nudity detection with JavaScript and HTMLCanvas."
Plumin.js
Allows you to create and manipulate fonts using JavaScript.
Data, Content, Files, etc.
Clusterize.js
"Tiny plugin to display large data sets easily."
jsobjectdiff
"Ensure that two JavaScript files containing objects have the same keys and display differences."
Vault
"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."
drive-db
"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."
Performance Tools
CDNperf
"Finds you fast and reliable JavaScript CDNs that make your websites snappy and happy."
Sitespeed.io
"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."
loadreport.js
"A performance focused fork of confess.js."
speedgun.io
"Allows you to point Speedgun.js at any public facing website to gather important web performance data."
Page performance
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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
