Issue #297 (Virtual DOM, JS Libraries, Media, Testing)
One concept you may have heard about in relation to React is its use of a "Virtual DOM". Back in December, Ire Aderinokun wrote a no-fluff article discussing this concept:
Understanding the Virtual DOM
Probably the only thing missing from that article is a discussion of the DocumentFragment API, which, in many ways, is a precursor to the whole Virtual DOM trend. For years, many developers promoted the use of DocumentFragment to temporarily store DOM changes before touching the real DOM, for similar performance benefits to a Virtual DOM.
Ire's article sums things up nicely:
"A virtual DOM can be thought of as a copy of the original DOM. This copy can be frequently manipulated and updated, without using the DOM APIs. Once all the updates have been made to the virtual DOM, we can look at what specific changes need to be made to the original DOM and make them in a targetted and optimised way."
Now on to this week's tools!
A server-side component framework. What if your React components ran on the server-side?
Media Tools (Audio, SVG, etc.)
Each week, discover royalty-free illustrations to power up your projects.
Generate an audio version of your articles, and reach your audience even when they're busy.
Easy to use online tool to generate, publish, and share charts.
React data visualization library based on D3.js.
SVG Sprite Generator
Public endpoint to generate SVG sprites.
A library for prototyping real-time hand detection in the browser.
Create beautiful 3D models with a drag and drop 3D modeling tool. Collaborate with friends and colleagues online.
All-in-one cloud-based image optimization solution for WordPress and beyond. Up to 80% savings on optimizations.
Recommended Reading for Developers
Testing and Debugging Tools
Record and playback HTTP requests.
Configurable, environment- and presentation-agnostic universal logging utility with log levels and namespacing support.
ESLint Plugin: proper-ternary
ESLint rules to ensure proper usage of ternary/conditional expressions.
A developer-first solution that automates finding and fixing vulnerabilities in your dependencies, now in open beta with no limitation on usage (details).
The original online tool to share with clients and others to get detailed info on a person's browser and OS.
Desktop-class web development tools on iOS. Includes a JS console, HTML and CSS inspector, and device preview.
A tool for customizing messages and adding context links in ESLint. Let your contributors know why a rule is turned on, and what they can do to fix their code.
Chrome extension or Windows app to run accessibility testing on web pages and windows apps.
Run a command for your code base and this tool will analyze it and build a visual representation, allowing you to increase development speed and better understand your application architecture.
A Tweet for Thought
Are you obsessed with your competition? This advice might help.
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...
Confs.tech is another decent option for looking up tech conferences.
Thanks to all for subscribing and reading!