JavaScript News and Updates (June 2018)

June is almost over, and you know what it means. It means that it’s time for our regular review of the JavaScript news from all around the globe. Talking about the globe. Have you ever wondered if there’s a tool for creating 3D globe data visualization? Well, yes, there is, and it’s Gio.js! Tired of switching between your VS Code, browser, and console during the working process? Not a problem anymore. Voyager is a VS Code plugin that allows simplifying the work with packages. Want to update your portfolio? sourcerer.io is at your service. It can scan your repo to create an impressive visual profile that will represent your experience. These, as well as other news in our today’s issue.

Let’s roll!

New Tools and Updates

Gio.js. Create 3D Globe Data Visualizations for Your Web Projects

Gio.js is an open source declarative library built with three.js. It allows you to create 3D globe data visualizations for the web. One of the main advantages of this library is the ease of usage. You can create 3D data visualization models with a couple of code lines and integrate them into your web application. The visualizations that you can create using Gio.js are fully interactive.

You can include the required JavaScript files using CDN. Also, you can use NPM or Yarn package managers. After that, you have to create a new DIV container that will hold your visualization. The next step is to create a controller for IO globe and initialize it with data. You should get the result presented in this demo. You can use the Gio.js API documentation page to learn more about the possibilities of further configuration.

Pickr. A Neat Color-Picker With Material Design

Pickr is a simple, lightweight, and customizable color-picker. It has no dependencies and is fully compatible with modern CSS frameworks such as Bootstrap. Pickr has multiple color representations, provides color comparison functionality and opacity control. The library supports touch devices and follows the material design standards. You can install it via NPM or add JavaScript and CSS files manually.

Superfine. Pure Functional and Minimalist React-Like Clone

Superfine is a minimal view layer for creating web user interfaces. You can use this library as a stand-alone tool or combine it with your favorite state container library. Superfine can be installed using the NPM package manager. The library consists of two functions. superfine.h allows creating a virtual DOM tree. superfine.render, in its turn, allows rendering it into the DOM. To create a virtual DOM, you can use a tree of virtual nodes, plain JavaScript objects that describe how DOM should look like. By comparing the old and new virtual DOM, superfine can update those parts of DOM that actually changed. Since in this case there’s no need for rendering the entire document, you can increase the performance of your web application.

You can use keys to identify nodes after the DOM is updated. The key property allows declaring that a particular virtual node should correspond to the specific DOM element. Such approach allows re-ordering the element into the new position without risking to destroy it.

Using a bunch of lifecycle events you can get notifications after particular elements of a web application are created, updated, or removed. You can use this possibility, for example, to create animations.

Voyager. A VSCODE Plugin for Package Management

Voyager is a Visual Studio Code extension that allows you to add, search, remove, and update packages without using terminal, package.json or browser.

To install this plugin, you can press ctrl+shift+p and search for “Voyager.” At the time, the only requirement is the package.json file placed in your project root. Voyager can read the content of the package.json file and show you the details in a separate view allowing you to change the values. Using this plugin, you can search for packages available in NPM. You can read the readme file, stats, and other info for any package available in VSCode without switching to your browser. Besides that, Voyager helps to install dependencies with a couple of mouse clicks without the need to use the terminal. Also, you can check the current version of installed dependencies.

Note that this plugin is currently under development.

sourcerer.io. A Visual Profile for Software Engineers

sourcerer.io allows creating visual profiles for software engineers. It uses the info gathered from repos on GitHub or your local machine. You can use a couple of clicks to create your profile. This tool supports more than 100 programming languages and can identify more than 1000 libraries in your code. It can create a visual representation of your experience as a developer including the repositories that you’ve contributed to.

If you want to check how everything works, you can start from this page. Remember that sourcerer.io works only with public repos. To use it with your private repo, you should run it locally.

At the time, the functionality of sourcerer.io is limited with profile creation. But the roadmap contains the following features:

• Engineers to follow and learn from
• Technology and libraries you should know about
• Projects that could use your help

Useful Tips and Articles

Node.js Guide for Frontend Developers

Seva Zaikov has written a pretty informative article about Node.js that can help front-end developers to understand the principles of its functionality. Even if you’re a pure front-end developer, you regularly face such incarnations of Node.js as npm scripts, for example. Even if you’re entirely sure that deep understanding of such tasks is not required, sometimes you might have to write some Node.js code, which can become a source of frustration for you. Therefore, missing some fundamental concepts of Node.js might become a headache even for the front-enders.

The author acquaints the public with such concepts as Node.js versioning, callback style and its drawbacks, event loop, event emitter, and so on.

Beyond REST . Using GraphQL to Shape Your Data

GraphQL is a query language for APIs that provides easy-to-use and efficient mechanisms for manipulating hierarchical data. Gigi Sayfan shares the info that helps to understand the main features of GraphQL and decide if it meets your needs. You’ll learn the basics of its functionality and understand in which cases you can prefer it to REST. Also, you’ll learn about the Apollo GraphQL client and features it provides. To show you how GraphQL works in practice, the author demonstrates an example of how it’s querying from the React application.

How To Build Vue Components That Play Nice

Vue.js is a pretty popular framework at the time. Such popularity has a natural consequence: there’s a lot of developers that use this library for solving day-to-day issues. Created solutions are usually shared with other Vue enthusiasts as open-source components. According to Kevin Ball, the problem is that these components don’t “play nice” with the Vue.js ecosystem. In this article, the author tries to find a solution for that.

According to Kevin’s opinion, to change the situation, developers should follow these rules:

• Implement v-model compatibility
• Be transparent to events
• Assign attributes to the right elements
• Embrace browser norms for keyboard navigation
• Use events preferentially over callbacks
• Limit in-component styles

The author describes the basics of these principles and provides relevant code examples.

Stay tuned and catch up on JS news in July!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst onTwitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.