Issue #219 (Composition, JS Utils, Testing, React Tools)09/28/17
I just stumbled across a YouTube channel called Fun Fun Function that you will definitely want to subscribe to if you're a JavaScript developer. The channel is run by Mattias Petter Johansson who previously worked as a developer for Spotify, Absolut Vodka, and Blackberry. He's now independent and releasing YouTube videos of varying length weekly.
Any channel run by a developer who's worked on a huge app like Spotify is certainly going to have lots of practical coding tips and suggestions.
I found the channel while reading up on JavaScript constructor functions. The video (which was referenced in the comments of a blog post on constructors) is called Composition over Inheritance.
Here are some notable points from the video (which is humorous, as seem to be all of his videos):
- Inheritance is when you design your types around what they are.
- Composition is when you design your types around what they do.
- The limitations of inheritance can be solved using composition.
- Although many developers favor composition over inheritance, they still feel inheritance has its uses. Mattias, on the other hand, feels inheritance should never be used.
- Composition is more powerful, more flexible, easy to implement, and doesn't encourage you to create a rigid taxonomy of objects like inheritance does.
In the first half of the video, he goes through a goofy but clear example demonstrating why the composition design pattern is superior to the inheritance pattern.
Well worth watching, as I'm sure are his other videos.
Now on to this week's tools!
|
JavaScript Utilities
p-progress
Create a promise that reports progress. Useful for reporting progress to the user during long-running async operations.
SentinelJS
A tiny library that lets you detect new DOM nodes using CSS selectors.
innerself
A tiny view + state management solution using innerHTML.
worka
Multi-featured abstraction layer on top of web workers.
Picodom
1 KB virtual DOM builder and patch function.
Bubb
Minimal, non-dependent, non-fancy JavaScript tooltip with pure CSS version as an alternative.
hypercomponent
Fast and light component system, backed by hyperHTML (a virtual DOM alternative).
Generator Utilities
A utility library for generating and processing sequences based on ES6 generators.
reify
Enable ES2015 modules in Node.
fromTo
Simple requestAnimationFrame() helper.
|
Testing and Debugging Tools
AbTest.io
A/B tests without code or JavaScript snippets. Just log in via Google Analytics.
Visual Inspector
Chrome extension. A visual tool to inspect/edit web pages. Helpful for designers to make temporary edits without coding.
Custom Elements Everywhere
Runs a suite of tests against frameworks to identify interoperability issues with Custom Elements, highlighting potential fixes.
sonar
A linting tool for the web. Tests for accessibility, interoperability, performance, PWA validation, and security.
lightcrawler
Crawl a website and run it through Lighthouse, Google's tool for testing website quality.
React VT
Visualized testing library for React.
NCC Image Checker
Chrome extension. Scans a whole page to identify all images and highlights those that are sent at too large a size.
Little Warden
Monitor Domain and SSL Expiration, redirects, and HTTP responses.
Smartlook
Service to record everything visitors do on your website.
|
React Tools
React PowerPlug
a Just add water™ set of functions-as-children components that add different types of state logic to your dumb components.
redux-cache
Provides an easy to use client side TTL caching strategy for Redux applications.
react-awesome-scroll
Custom scrollbar and scroll area components with native mechanics.
react-imgpro
Image processing component. Processes an image with filters supplied as props and returns a base64 image.
React Image Filter
React component that uses SVG filters instead of CSS Filters, so it works in all modern browsers including IE10+ and Edge.
React Universal Component
The final universal component for React you'll ever need.
Resonance
React components for animated state transitions that update with your data. Uses d3-timer, a concurrent-animation manager, to efficiently manage thousands of state tweens.
Restore
A predictable and observable state container for React apps.
yubaba
Orchestrated page transitions made easy.
React Slideshow
Customizable slideshow component for React.
react-d3-speedometer
A React component for showing a speedometer-like gauge using D3.js.
|
|
