Issue #297 (Virtual DOM, JS Libs, Media, Testing)03/28/19
I'm a firm believer that if you're going to delve into using a tool like React, Vue, or Angular, it's good to understand the JavaScript and DOM concepts that underlie those tools.
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!
|
JavaScript Libraries and Frameworks
Buddy – Turn DevOps to NoOps
The new generation of CI/CD is here. Automate website delivery in 10 minutes with over 100 preconfigured actions. Builds, tests, deployments, Docker – whatever you do, Buddy got your back. sponsored via Syndicate
Mosaic
A declarative, component-based, front-end JavaScript library with a built-in state manager and more, for building user interfaces.
femtoJS
A very small JavaScript library for basic DOM manipulation. Has a jQuery-inspired syntax and supports chaining.
DoneJS
Now at version 3+ (details). An open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications.
Vanillin
A JavaScript DOM user interface library that follows the idea of enhancing already existing DOM elements with JavaScript using inline HTML bindings.
Purview
A server-side component framework. What if your React components ran on the server-side?
DeskGap
A framework for building cross-platform desktop apps with JavaScript, HTML, and CSS.
BriefJS
A deadly simple, tiny, pure-ES6, declarative JavaScript framework for building user interfaces.
Anime.js
Now at version 3+ (details). A lightweight JavaScript animation library with a simple, yet powerful API. Works with CSS properties, SVG, DOM attributes, and JavaScript objects.
Goothereum
Blockchain cryptocurrency done in 160 lines of JavaScript.
San
A fast, portable, flexible JavaScript component framework.
|
Media Tools (Audio, SVG, etc.)
Illustration Gallery
Each week, discover royalty-free illustrations to power up your projects.
Blogcast
Generate an audio version of your articles, and reach your audience even when they're busy.
Swave
A Javascript audio player library with waveform visualization.
ZapChart
Easy to use online tool to generate, publish, and share charts.
REAVIZ
React data visualization library based on D3.js.
SVG Sprite Generator
Public endpoint to generate SVG sprites.
Handtrack.js
A library for prototyping real-time hand detection in the browser.
Vectary
Create beautiful 3D models with a drag and drop 3D modeling tool. Collaborate with friends and colleagues online.
Doka
A JavaScript image editor for your website. High-performance cropping, flipping, rotating, resizing, and transforming of images.
OptiMole
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
Talkback
Record and playback HTTP requests.
log
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.
Mocha
Now at version 6+ (details). A feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
Snyk
A developer-first solution that automates finding and fixing vulnerabilities in your dependencies, now in open beta with no limitation on usage (details).
WhatIsMyBrowser.com
The original online tool to share with clients and others to get detailed info on a person's browser and OS.
Inspect
Desktop-class web development tools on iOS. Includes a JS console, HTML and CSS inspector, and device preview.
Compassionate Linting
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.
Accessibility Insights
Chrome extension or Windows app to run accessibility testing on web pages and windows apps.
codecrumbs
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
