Web Tools Weekly
What a Tool!

Issue #281  (document.domain, Testing, Git/CLI, JS Utils)12/06/18

Advertisement via Paved
Improve the Stability of Your Applications
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Over 4,500 of the world's best engineering teams use Bugsnag to improve application stability.
Learn more

If I have a page on impressivewebs.com that loads an iframe with its src set to testing.impressivewebs.com, I can't access the iframe's DOM from the parent page. This is for security reasons. Even though both resources are on the same domain, the subdomain is considered a different origin.

There are various ways to overcome cross-origin restrictions, but one easy way to do this, assuming you have access to both origins, is using the document.domain property in JavaScript.

Let's say my primary page is loading an iframe:

<iframe src="https://testing.impressivewebs.com/">

Below the iframe, I'm loading the following script:

document.domain = 'impressivewebs.com';
let myFrame = document.getElementsByTagName('iframe')[0];

window.addEventListener('load', function() {
}, false);

Also, inside the iframe's page, I'm doing this:

document.domain = 'impressivewebs.com';

You can try it out at this demo page. Open up the console and you'll see the two logs that are printed.

Notice two things happening in the each document:

  • The document.domain property is set to impressivewebs.com
  • The DOM of the other document is accessible
Neither document would be able to access the other's DOM unless the document.domain property is set to the same value (or if you use some other method to overcome the restriction).

The document.domain property can only be set to the current domain and can't be changed to another resource (more info on MDN). This is just a quick way to relax these restrictions, but normally you would do this sort of thing using CORS, which has long been a standard.

Now on to this week's tools!

Many of my previous JavaScript/DOM tips have been released in e-books (EPUB, PDF, MOBI):

JS & DOM Tips Volume 1 >
JS & DOM Tips Volume 2 >
JavaScript E-Books

Testing and Debugging Tools

Improve the Stability of Your Applications
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Over 4,500 of the world's best engineering teams use Bugsnag to improve application stability.  sponsored via Paved 

Link Contrast Checker
Online tester to see if your text links are accessible (i.e. they pass various WCAG guidelines).

Monitoring service that checks if your website is up as it should be and notifies you if anything goes wrong.

An elegant, multi-featured console logger for Node.js and the browser.

Perform cross-browser testing on 2000+ real browsers and operating systems online.

Records videos of your visitors as they use your site, allowing you to see everything they do. See every mouse movement, scroll, click, and keypress on your site.

User behavior analytics for product, marketing, and data teams.

App analytics platform that provides an in-depth analysis of your users' behavior, allowing you to deliver the ultimate app experience.

My Browser
When you visit this page it gives you an easy-to-digest summary of your browser details to help you with QA and tech support. Report is shareable via a unique URL.

TSLint rules targeting RxJS.

The fast, reliable localhost tunneling solution. With relays on four continents, it works with any computer, any web server, and any Internet connection.

Developer Courses by Wes Bos are still 50% off!
Fullstack Advanced React & GraphQL   ES6 for Everyone

Git, GitHub, and Command Line Tools

Get the absolute file path to a bin entry of an installed dependency. Useful if you want to include a CLI as an npm dependency and spawn it from node.

Tiny Node CLI tool to see a local app's memory footprint, cross-platform.

Brings charts (bars, pie graphs, etc.) to the terminal.

A bash script for generating trusted self-signed SSL certs for local development on your Mac.

A tiny web auditor with strong opinions.

Better GitHub profiles.

Transparently transform the macOS CLI into a fresh GNU/Linux CLI experience.

A CLI tool to Migrate a Webflow project into a React app.

React application and Chrome extension that lets you explore the most starred projects on GitHub, with optional filter by language.

A blogging tool powered by GitHub. Write your blog on GitHub issues.

Recommended Reading for Developers
Vue.js in Action   CSS Master   CSS Secrets Book
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

JavaScript Utilities

A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free, native scrolling slider/list with paging controls.

Stylish CLI prompts that are user-friendly, intuitive and easy to create.

Simplified HTML + CSS to PDF Generator for Node.

A lightweight JavaScript utility to create self-rendering Markdown + LaTeX documents.

A service for server-side rendering your JavaScript views.

Detects changes in scroll for reveal, parallax, and CSS variable effects.

Defer JavaScript work until the browser has a chance to breathe.

Spawn a process and clear its output when succeeded.

Convert a series of strings into a radix tree.

Date and range picker that work with or without build tools and with or without frameworks.

A Tweet for Thought

Big if true.

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

I don't even know what to say about this repo.

Thanks to all for subscribing and reading!

Keep tooling,