Web Tools Weekly
What a Tool!

Issue #264  (Invalid DOM, React, Media, Testing)08/09/18

Advertisement via Syndicate
Premium WordPress Hosting for Everyone, Small or Large
Powered by Google Cloud Platform, Kinsta takes managed hosting to the next level with resource isolation and automatic scalability. They offer 15+ data centers, 24x7 support/backups, free SSL/CDN, and dev-friendly staging/SSH.
Get Started Today

What happens when you are using JavaScript to access DOM elements that are part of mangled or invalid HTML? Well, due to the prevalence of good text editors and IDEs, and the fact that most developers will validate and lint their code, this usually will not be a problem.

But if you're curious, let's consider the following HTML:

<p><span><b>Poorly nested bold</span></p></b>
<p><span><b>Missing closing tag</span></p>
<p><span>Missing closing tag</span>
<coffee medium="yes">Fake Coffee Element</coffee>

If you look closely, this example has five issues:

  • A really late closed "b" element
  • A missing "b" closing tag
  • A missing closing paragraph (which is not invalid, but might have an undesired result)
  • A made up tag name ("coffee")
  • A made up attribute name ("medium")
First, as you can see from the following screenshot of the rendered DOM, the browser will attempt to correct most of these problems to a reasonable degree, which makes the elements accessible as expected:

You can see that the only major problem is the fact that a third "b" element was added as an attempt to correct the issue. Now let's try to access these with some DOM scripting (where "d" is the document element):
let mybold = d.querySelectorAll( 'b' ),
    myCoffee = d.getElementsByTagName( 'coffee' );

console.log( mybold.length ); // 3
console.log( mybold[0].tagName ); // "B"
console.log( myCoffee[0].tagName ); // "COFFEE"
console.log( myCoffee[0].nodeType ); // 1
console.log( myCoffee[0].innerText ); // "Fake Coffee Element"

Again, the only issue is the fact that there are three "b" elements. Even the "coffee" element is accessible, including its fake attribute. Here's a demo that has some extra code that manipulates the attribute.

So the DOM is pretty forgiving when it comes to mistyped or made-up HTML, though I wouldn't recommend any of this in a real project. Also note that the demo also applies some CSS to the "coffee" element by referring to it using the coffee type selector. Again, pretty forgiving, and basically what we would expect.

Now on to this week's tools!
Did you enjoy this week's coding tip? Previous tips are compiled in my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


React Tools

Kinsta Managed WordPress Hosting
Powered by Google Cloud Platform, Kinsta takes managed hosting to the next level with resource isolation and automatic scalability. They offer 15+ data centers, 24x7 support/backups, free SSL/CDN, and dev-friendly staging/SSH.   sponsored via Syndicate 

Allows you to create flipping cards in React projects. Can be used as controlled or uncontrolled component.

The "nearly invisible" server-rendered framework for React applications.

A React component that helps you render browser specific content (based on the UA string).

React App Manager. Create and run React applications – no command line or build setup required. Powered by Electron and Create React App.

Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.

Dead simple state management for React. A simple and type-safe alternative to Flux and Redux.

Redux Form
The best way to manage your form state in Redux.

Provides a very intuitive way to perform any REST API call without hassle, through a single React component.

React component to asynchronously load images, adapting based on network, and allowing a user to control which images to load.

A beautiful card component that moves with grace on hover.

Simple immutable state for React using Immer (another immutable state utility).

Simple to use, configurable tree view with full support for drop-in animations.

React components for efficiently rendering large lists and tabular data.

Recommended Reading for Developers
Learning React Book   You Don't Know JS: this & Object Prototypes book   Using SVG with CSS3 & HTML5 book

BTW - If you've 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.

Media Tools

Delight your users by creating beautiful JavaScript Charts and provide effective visual representation of your data.

An open source image to SVG transformation tool with a lot of knobs and controls.

A React component to seek or control the video frame rate on scroll.

Cool Backgrounds
A collection of tools to create compelling, colorful images (PNG format) for blogs, social media, and websites.

Animated SVG vector icons and illustrations for web and mobile projects.

New Indie
A curated collection of royalty-free no-copyright music. 4 new tracks added every week, of which 1 is free.

A lightweight library to create interactive backgrounds.

React Material Design Icons
950+ SVG-based icons built with Pixo, Styled Components, and Styled System.

Instantly turn your screenshot into a beautiful design mockup without using Sketch or Photoshop templates.

Native photo editing solution for Windows.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Testing and Debugging Tools

A service that will notify you if your scheduled tasks/cronjobs fail to run.

CDN Calculator
Enter the bandwidth you use per month and find the cheapest and best suited CDN for you.

Modern SaaS monitoring for your servers, cloud, and services.

An improved debugging experience for Node.js, enabled by Chrome DevTools.

Automated QA tools to test and monitor your web services across deployments and environments.

A cross-platform web debugging tool based on Node.js.

An easy way to calculate the 'impact' of running a task in Node.js.

Hackable console logger. Can be used for logging purposes, status reporting, as well as for handling the output rendering process of other node modules and applications.

Chrome extension. Quickly debug focus problems when testing a page for accessibility issues.

A progressive web app for simulating color blindness. Requires camera access.

A Tweet for Thought

Is this the most useful programming tip you'll ever get? (Side point: Always cool to see a person with under 40 followers get so many likes on a Tweet)

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...

Termly is an online service for generating a privacy policy, terms and conditions, cookie policy, etc. (includes free and pay options).

Thanks to all for subscribing and reading!

Keep tooling,