Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
A React library by Atlassian for making drag-and-drop components. It offers a clean and powerful API that is easy to use while still offering lots of customization options and controls. The generated components have smooth GPU-powered animations that naturally reflect when elements are picked up or reordered.
This is an updated version of the popular Node.js request library. It presents a more lightweight HTTP client solution that is built on top of the browser's native Fetch API and shimmed for Node.js. R2 is only 16K in size when compressed, compared to request's ~500K footprint.
A CSS framework used for GitHub's front-end design. It has 23 packages that are divided into 3 core meta-packages for easier installation. Each package is independently versioned and distributed via npm, which makes it easy to include only the modules you need.
Puppeteer is a high-level Node.js API for working with the new headless Chrome feature. It is an official Google project maintained by the Chrome DevTools team. You can read more about it in our article Automating Google Chrome with Node.js where we try out some of its features.
React library for generating word documents. It allows you to define text documents using React components and then render them to Word via the command line. There are components for tables, images, headers, footers, and everything else you may need.
A SASS extension which offers a new way to write scss variables. It allows you to group multiple variables into a single object, making your scss easier to read and write.
Vivify is a CSS-only animation library. You simply need to add the
vivify class to the element you want to animate. You can also add the
infinite class to make the animations repeat on a loop. The library offers a large selection of over 50 animations with different effects and movement directions.
A collection of CSS-only checkbox components. There are many different styles including Toggles, Switches, Circles and Squares. All of the checkboxes come in four sizes from small to xlarge. Compatible with all modern browsers including IE9+.
A React component for image processing. It allows you to modify an image using filters and then export it in base64 format. It is very easy to use, you just have to specify an url to your image, the filters you want to apply and the output size and format.
Data visualization framework that combines React and D3. It offers three types of frames (XYFrame, ORFrame, NetworkFrame) allowing you to generate some non-traditional charts. The way data is displayed can be further customized by adjusting the settings of the frame or adding your own CSS styles.