Issue #219 (Composition, JS Utilities, Testing/Debugging, React Tools)
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.
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!
Create a promise that reports progress. Useful for reporting progress to the user during long-running async operations.
A tiny library that lets you detect new DOM nodes using CSS selectors.
A tiny view + state management solution using innerHTML.
Multi-featured abstraction layer on top of web workers.
1 KB virtual DOM builder and patch function.
Fast and light component system, backed by hyperHTML (a virtual DOM alternative).
A utility library for generating and processing sequences based on ES6 generators.
Enable ES2015 modules in Node.
Simple requestAnimationFrame() helper.
Testing and Debugging Tools
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.
A linting tool for the web. Tests for accessibility, interoperability, performance, PWA validation, and security.
Crawl a website and run it through Lighthouse, Google's tool for testing website quality.
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.
Monitor Domain and SSL Expiration, redirects, and HTTP responses.
Service to record everything visitors do on your website.
a Just add water™ set of functions-as-children components that add different types of state logic to your dumb components.
Provides an easy to use client side TTL caching strategy for Redux applications.
Custom scrollbar and scroll area components with native mechanics.
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.
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.
A predictable and observable state container for React apps.
Orchestrated page transitions made easy.
Customizable slideshow component for React.
A React component for showing a speedometer-like gauge using D3.js.