March Tooling Roundup
JavaScript and React
Puppeteer
Puppeteer was a fantastic step forward for automated testing and server environments. Jest-puppeteer brings headless Chrome’s node APIs to the Jest environment with a custom expect API.
Universal Rendering
Razzle is a tool for building Universally rendered JS applications that is hitting 2.0. It has a create-react-app style CLI called create-razzle-app that will bootstrap you into a webpack 4.0 based Universal build with Hot Module Replacement, no annoying restarts necessary.
Forms
My current favorite form abstraction is Formik, which weighs in at 12.7kb. mu-forms is a form abstraction that weighs in at 1.4kb. It comes with slightly fewer features, but that can be useful if you’re really trying to cut down on bundle size.
Render Props
With the rise of render-props in the React ecosystem, many people are left wondering how it will work when combining multiple render-prop components. React-adopt fills this gap by composing components with render props into a single function.
Animation
Pose is a React interface to Popmotion, making it trivial to introduce animation into your user interfaces. It can be combined with CSS-in-JS libraries like emotion for amazingly simple animation enhancements.
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import styled from 'react-emotion';
import posed from 'react-pose'const styles = {
fontFamily: 'sans-serif',
textAlign: 'center',
};const H = posed(styled('h2')`
color: red;
`)({
draggable: true
})const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<H>Start editing to see some magic happen {'\u2728'}</H>
</div>
);render(<App />, document.getElementById('root'));
Containers
Skaffold is a tool for developing and deploying containers to Kubernetes. Using skaffold dev, skaffold will watch your source directories, redbuild your containers, and redeploy your pods to a Kubernetes cluster like Docker for Mac’s.
It can feel like everything is standardizing on Envoy in the K8s ecosystem and gloo is no different. It is a smart API gateway that uses sets of custom envoy filters to route to k8s services and Function-as-a-Service services (Lambda, Cloud Functions, etc).
Figma
Figma release an API and a couple of new tools were built on top of it. Perhaps the most interesting is figma-js from Jon Gold. Hopefully this means the beginning of design tools offering APIs that enable DesignOps and Design Systems tooling.
