New Tools and Updates
RSuite 3: React UI Component Suite
RSUITE (React Suite) is a collection of React components for building enterprise system products. After three major revisions, developers have provided a vast amount of components and rich functionality. RSUITE is designed to be used primarily on modern desktop browsers. Therefore, it may not be the best choice for mobile developers. You can install RSUITE via NPM or Yarn.
In the new version of RSUITE developers have implemented some useful functionality. First of all, RSUITE now supports React 16+. A brand new style and internationalization feature were added. The Internet Explorer version 9 is no longer supported. Developers have implemented prettier formatting and added some new properties to the following components: Button Group, Table, Checkbox, Dropbox, Nav components, and Form related components. Besides that, some new components were added, e.g., Sidenav, IconButton, Drawer, Progress, Alert, Message, Notification, Loader.
DHTMLX Scheduler 5.0
Following the Material Design patterns, developers have redesigned the scheduler to provide users with a more trendy look and feel. The new Material Skin will be familiar to all Google users:
Also, there are some UX enhancements. The new improvements are related to switching between different time periods (days, weeks, months) and working with the event details form. An orange Plus Button can be added to the app. Users can click on it to add a new event. As a result, a form for adding event description will appear on the screen. A grand CSS refactoring made by developers allows taking advantage of vastly renewed Scheduler styles for building your apps.
The new version of the scheduler allows creating your own custom skins. Style files are included in the dhtmlxScheduler package now. You can use these files to rebuild the existing skins in full accordance with your needs. To learn more about how you can create new skins for this scheduler, you can check the skin customization article.
Developers have improved the server-side integration of this component. Starting with version 5.0, the usage of dhtmlxScheduler with back-end technologies became as easy as you can imagine. Improvements to the dataProcessor module provide a simple connection with RESTful backends. To learn more about this part of the dhtmlxScheduler functionality, you can read the server-side integration guide.
DHTMLX Diagram 2.1
The significant addition to the new version of the library is a new editor that simplifies the work with all possible diagram types. The drag-and-drop oriented editor allows manipulating every diagram element such as shapes and their content, connectors, colors of all elements, etc.:
The left-hand panel with all available shapes helps to build a diagram from scratch. The right-hand panel contains fields for changing style, size, and arrangement of diagram elements. The toolbar at the top of the editor allows resetting the changes and zooming in/out.
Besides that, to simplify the work with diagrams, developers have implemented hotkeys support. Now you can use:
- Ctrl + C — to copy a shape
- Ctrl + V– to paste a shape
- Ctrl + Z — to revert the latest action
- Del — to delete a shape
- Arrows — to move a shape left/right/up/down
A set of new configuration options for shapes and connectors provides additional opportunities for styling. For example, you can define the shape’s angle of rotation, color, stroke, the font color of a shape’s text, the radius of connector’s rounded corners and much more.
In addition to the described functionality, the DHTMLX Diagram Library brings new possibilities for customization via CSS. Now you can use CSS to change the style of connector’s lines, arrows, and modify the look of connectors between diagram components.
Selection.js. Create Visual DOM Selections
This lightweight and easy-to-use selection library allows enabling visual DOM-selection. You can check this demo to see how everything works. Selection.js supports modern touch devices, works with Node.js, doesn’t require jQuery, and weighs only 3KB gzipped.
To use Selection.js, you can either install it via the NPM package manager or use CDN. The library allows making all elements with a given class selectable. A bunch of useful options, methods, and events allows customizing the behavior of the library.
The Data Structure section contains the following examples: linked list, queue, stack, hash table, heap, priority queue, etc. The Algorithms section, in its turn, consists of the following topics: math, sets, search, sorting, tree, graph, and so on.
Useful Tips and Articles
React and Separation of Concerns
Build Your Own Blog Using Gatsby and React
The guide is pretty detailed and contains all required explanations. You’ll learn how to install and configure Gatsby. After a few steps of dealing with code, you’ll be able to create your own blog.
Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native
If you’re an Instagram user, you probably know that when you press and hold an image from the grid, you can see a quick view. While holding, you can also move your finger to get access to multiple actions (like, share, or comment). The author of this tutorial has created a step-by-step guide to rebuilding such behavior with React Native. The guide is quite detailed but requires some experience in React coding so that we won’t recommend it for beginners.