Issue #264 (Invalid DOM, React, Media, Testing)08/09/18
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!
|
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
React-Flippy
Allows you to create flipping cards in React projects. Can be used as controlled or uncontrolled component.
Rogue
The "nearly invisible" server-rendered framework for React applications.
RenderInBrowser
A React component that helps you render browser specific content (based on the UA string).
RAM
React App Manager. Create and run React applications – no command line or build setup required. Powered by Electron and Create React App.
react-async-component
Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.
Undux
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.
react-data-fetching
Provides a very intuitive way to perform any REST API call without hassle, through a single React component.
react-ideal-image
React component to asynchronously load images, adapting based on network, and allowing a user to control which images to load.
card-vibes
A beautiful card component that moves with grace on hover.
bey
Simple immutable state for React using Immer (another immutable state utility).
react-animated-tree
Simple to use, configurable tree view with full support for drop-in animations.
react-window
React components for efficiently rendering large lists and tabular data.
|
|
Recommended Reading for Developers
|
Media Tools
ApexCharts
Delight your users by creating beautiful JavaScript Charts and provide effective visual representation of your data.
Svgurt
An open source image to SVG transformation tool with a lot of knobs and controls.
react-video-scroll
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.
Lordicon
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.
brusher
A lightweight library to create interactive backgrounds.
React Material Design Icons
950+ SVG-based icons built with Pixo, Styled Components, and Styled System.
Screely
Instantly turn your screenshot into a beautiful design mockup without using Sketch or Photoshop templates.
fotophire
Native photo editing solution for Windows.
|
Testing and Debugging Tools
caduceus
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.
Monometric.io
Modern SaaS monitoring for your servers, cloud, and services.
ndb
An improved debugging experience for Node.js, enabled by Chrome DevTools.
Assertible
Automated QA tools to test and monitor your web services across deployments and environments.
whistle
A cross-platform web debugging tool based on Node.js.
Sympact
An easy way to calculate the 'impact' of running a task in Node.js.
Signale
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.
NerdeFocus
Chrome extension. Quickly debug focus problems when testing a page for accessibility issues.
ColorBlindSim
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
