Issue #213 (parentNode, React Tools, Productivity, Text Editors)08/17/17
Free Coding Bootcamp Prep Class
Fullstack Academy’s newest self-paced course is optimized to help students learn the fundamentals of JavaScript. Fullstack Prep is a curated collection of the best coding challenges from all of Fullstack's course offerings. Sign up For Free
|
|
The parentNode property is one of the simplest and most commonly used DOM features. It's probably one you're well familiar with, but if not, then definitely have it ready to go in your DOM toolbox.
It's very handy when manipulating the DOM to be able to quickly reference the parent of a specified node in the tree. So although this one is an easy one to use, I just wanted to use this intro to say "Hey, parentNode, you rock, and I like having you at my finger tips." Here are some things you can do with it.
With parentNode, you can easily remove the first child of the current element's parent:
|
child.parentNode.removeChild( child.parentNode.firstChild );
|
You can check the existence of a class name (or maybe a data-* attribute) on the current element's parent (for example to check the context of the current element):
|
if ( el.parentNode.classList.contains( 'abc' ) ) {
// do something...
}
|
You can chain as many parentNode's as you need to in order to check on something up the DOM tree:
|
console.log( child.parentNode.parentNode.nodeName ); // BODY
|
You can insert a new element next to a specific element:
|
let el = document.createElement( 'div' );
child.parentNode.insertBefore( el, child.nextSibling );
|
It has so many uses, that's just a small sampling. Of course, the manipulations could probably be done in other ways too, but sometimes parentNode is the simplest and easiest to maintain.
And one more good-to-know fact about parentNode: Document, DocumentFragment, and newly created nodes not yet inserted in the DOM do not have a parentNode so the property will return null for those.
Now on to this week's tools!
|
React Tools
react-inview-monitor
Easy to use, declarative scroll into view component for animations and more.
React Simple Maps
library of React components to make SVG maps using d3-geo and TopoJSON.
React VR
Build virtual reality websites and interactive 360 experiences with React.
React datasheet
Simple and highly customizable Excel-like spreadsheet.
ORY Editor
Next-gen, highly customizable content editor for the browser – based on React and Redux. WYSIWYG on steroids.
eslint-plugin-jsx-a11y
Static AST checker for a11y rules on JSX elements.
react-mosaic
Full-featured tiling window manager to give users control over their workspace. Simple and flexible API to tile arbitrarily complex React components across a user's view.
|
Productivity Tools
A Fine Start
Chrome extension. Replaces your browser’s new tab page with a handy list of links, grouped and sorted how you like.
Vanilla
Hide menu bar icons on your Mac.
Outline
Chrome extension. Removes ads, comments, and related links from pages so you can read without clutter.
Trickster
Keeps track of recent files you’ve been using on your Mac and gives you super easy and lightning fast access to them.
Clean Email
Clean your inbox of emails you don't need. Helps you group and organize, remove, label, and archive emails in your account. Multiple email services supported.
Tasman
Simple-to-use app that lets you manage your clients, projects, time entries, billing, and reporting.
Ceruleum
Used as a background tool while coding. As you jump around different parts of the code base, it keeps track of all changes with quick access to see an overview of them whenever you like.
synt
Find similar functions and classes in your JavaScript/TypeScript code.
Gibbon Tabs
Chrome extension to help you manage your tabs effectively, allowing you to find and remove tabs quickly from a drop-down menu.
|
Text Editors, IDEs, Code Playgrounds
CodePen Projects
CodePen on steroids. Zero setup, full-featured front-end development environment in your browser.
GitHub for Atom
Package for Atom that adds GitHub features. Comes bundled with Atom 1.18+.
Atom Autocomplete Module Import
Search and install npm packages from import/require statements powered by Algolia.
AWS CodeStar
Quickly develop, build, and deploy applications on AWS.
{jqi}
Mac app. The almighty jq processor (a command-line JSON processor) wrapped in a graphical UI.
ID3
An IDE for data-driven documents that provides developers, data scientists, journalists, etc, with the ability to harness the power of D3.js with ease.
syntastic
Syntax checking hacks for Vim.
YouCompleteMe
A fast, as-you-type, fuzzy-search auto-complete engine for Vim with several completion engines.
|
A Tweet for Thought
Thought-provoking screen shot on mobile reach from Natasha Rooney.
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...
Standard Ebooks is a not-for-profit effort to produce high quality, accessible, free public domain e-books that meet or exceed the quality of commercially produced e-books. Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
