Issue #264 (Invalid DOM, React, Media, Testing)
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):
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.
let mybold = d.querySelectorAll( 'b' ),
myCoffee = d.getElementsByTagName( 'coffee' );
console.log( mybold.length ); // 3
console.log( mybold.tagName ); // "B"
console.log( myCoffee.tagName ); // "COFFEE"
console.log( myCoffee.nodeType ); // 1
console.log( myCoffee.innerText ); // "Fake Coffee Element"
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!
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.
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
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.
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.
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.
Testing and Debugging Tools
A service that will notify you if your scheduled tasks/cronjobs fail to run.
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...
Thanks to all for subscribing and reading!