Last month news, releases, updates, and many more about JavaScript technologies. Enjoy our April 2019 JS digest!

JavaScript

Introducing Node.js 12

Announced Node.js 12. Highlighted updates and features include faster startup and better default heap limits, updates to V8, TLS, llhttp, new features including diagnostic report, bundled heap dump capability and updates to Worker Threads, N-API and ES6 module support and more. The Node.js 12 release replaces version 11 in our current release line. The Node.js release line will become a Node.js Long Term Support (LTS) release in Oct 2019.

  • V8 Gets an Upgrade: V8 update to V8 7.4
  • Hello TLS 1.3
  • Properly configure default heap limits
  • Switch default http parser to llhttp
  • Making Native Modules Easier — progress continues
  • Worker Threads
  • Diagnostic Reports
  • Heap Dumps
  • Startup Improvements
  • ES6 Module Support
  • New compiler and platform minimums

Learn more on Node.js Foundation.

dimport

At its core, dimport is a polyfill for ES Module syntax, including dynamic imports!

And with it, you can serve modern ESM-driven application files to any browser.

While browsers are increasing support for JavaScript modules natively, the current landscape is not easy to navigate.

For example, many browsers do support ESM syntax (aka, import and export) within <script type=module /> tags; however, not all of these support dynamic import statements since it came later. In order to leverage the benefits of ESM today, a developer must choose between:

  • dropping support for lagging browsers
  • complicating their development process
  • building and/or distributing multiple versions of their application
  • abstaining from shipping ESM syntax at all cry

Now, dimport allows the developer to ship ESM today to all browsers without compromise.

Check out Github for more.

Packem

Packem is an extensively precompiled general-purpose JavaScript module bundler with a focus on performance, flexibility and extendibility. Its crust is built with Rust, a zero-cost abstraction systems programming language with guaranteed memory safety.

Why Packem?

  • Hypersonic speeds that go +2X faster than ParcelJS.
  • Light and efficient outputs.
  • Unique configuration style that will not make you cry.
  • Code Splitting with dynamic imports.
  • Comprehensive & versatile plugin API with an elegant approach.
  • Common plugins for smoother development experience.

Packem

Read more on Github.

jQuery Terminal

jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications. It can automatically call JSON-RPC service when a user types commands or you can provide you own function in which you can parse user commands. It's ideal if you want to provide additional functionality for power users. It can also be used to debug your application.

You can use this JavaScript library to create web based terminal on any website.

jQuery Terminal

Find out more Github.

Frameworks - Libs

React Router v5

This release is light on features and fixes, and is more focused on stability and compatibility and preparing the library for future releases.

There are no breaking changes in this release. If you are already using version 4.x, you can use version 5 immediately with zero code changes. 🎉 Version 5 will pick up where the 4.x roadmap (now the 5.x roadmap) left off.

The most significant improvement in v5 is better allaround support for React 16, while maintaining full compatibility with React >= 15. We know that a lot of React Router users are maintaing apps they've built over the last few years using various versions of React 15 or 16 and React Router 4, and we are showing our committment to you with this release. This includes upgrading from using React's legacy context API, as well as eliminating all other <StrictMode> warnings. My sincere thanks to Tim Dorr for getting the ball rolling here, and my good friend Jared Palmer for prodding me along.

// Instead of this:
      <Switch>
       <Route path="/users/:id" component={User} />
       <Route path="/profile/:id" component={User} />
      </Switch>
      
      // you can now do this:
      <Route path={["/users/:id", "/profile/:id"]} component={User} />
      

Learn more on reacttraining.com.

Svelte 3: Rethinking reactivity

Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like that eat into your frame budget and tax the garbage collector.

Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

The first version of Svelte was all about — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.

Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding developer experience. It's now possible to write components with than you'll find elsewhere. Try the brand new and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.

Find out more on svelte.dev.

Cube.js

Cube.js is an open source modular framework to build analytical web applications. It is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

Cube.js was designed to work with Serverless Query Engines like AWS Athena and Google BigQuery. Multi-stage querying approach makes it suitable for handling trillions of data points. Most modern RDBMS work with Cube.js as well and can be tuned for adequate performance.

Unlike others, it is not a monolith application, but a set of modules, which does one thing well. Cube.js provides modules to run transformations and modeling in data warehouse, querying and caching, managing API gateway and building UI on top of that.

old was vs cubejs way

Check Github for more.

Editor.js

Editor.js is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example, Paragraph, Heading, Image, Video, List are Blocks. Each Block is represented by Plugin. We have many ready-to-use Plugins and a simple API for creating new ones.

Editor.js

Read more on codex.so.

Browsers

What to expect in the new Microsoft Edge Insider Channels

Today Microsoft is shipping the first Dev and Canary channel builds of the next version of Microsoft Edge, based on the Chromium open-source project. Microsoft is excited to be sharing this work at such an early stage in our development process. Microsoft is invite you to try out the preview today on your devices, and we look forward to working together with the Microsoft Edge Insider community to make browsing the best experience possible for everyone.

Microsoft Edge Insider Channels

Learn more on blogs.windows.com.

Firefox 66

Firefox now prevents websites from automatically playing sound. You can add individual sites to an exceptions list or turn blocking off. To learn more about block autoplay, which will be rolled out gradually to all users, visit the Mozilla blog.

Improved search experience:

  • Find a specific webpage faster when you have a lot of tabs open: You can now search within all of your open tabs from the tab overflow menu
  • Easier search via a redesigned new tab in Private Windows
  • Smoother scrolling: Scroll anchoring keeps content from jumping as images and ads load at the top of the page
  • Improved performance and better user experience for extensions:
  • Extensions now store their settings in a Firefox database, rather than individual JSON files, making every site you visit faster
  • A redesigned keyboard shortcuts section in about:addons makes it easier to view and adjust default shortcuts
  • Redesigned certificate error pages help you better understand and resolve issues, including identification of certificate issuers for anti-virus software

Check for more mozilla.org.

New WebKit Features in Safari 12.1

There are many improvements and new web platform features in WebKit that are now available with the release of Safari 12.1, included with macOS Mojave 10.14.4 and iOS 12.2. This release delivers web platform features that improve website integration with the operating system, new real-time communication capabilities, more compatible encrypted media support, and features that help developers reduce the need for polyfills. Safari provides all of these features while at the same time improving user privacy, JavaScript performance, responsiveness, stability, and security.

Find out more on webkit.org.

Html-Css

CSS selectors level 4

Overview of the last generation of selectors, level 4, according to the Editor’s Draft specification as of January 2019, in the following categories:

  • Logical combinations
  • Attribute selectors
  • Linguistic pseudo-classes
  • Location pseudo-classes
  • User action pseudo-classes
  • Input pseudo-classes
  • Tree-structural pseudo-classes
  • Grid-structural selectors

At the time of this writing, the specification for level 4 selectors is in draft status. It may change until it reaches the official recommendation status, and you’ll find that many selectors are either not supported by some browsers or they need to be prefixed (with :-moz- or :-webkit-).

Read more on blog.logrocket.com.

Native image lazy-loading for the web!

In this post, we'll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here's a sneak preview of it in action:

<img src="celebration.jpg" loading="lazy" alt="..." />
      <iframe src="video-player.html" loading="lazy"></iframe>
      

We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feature we'll publish soon. Until then, let's dive into how loading works.

Find out more on addyosmani.com.

CSS is Getting Trigonometry Functions to Help Web Devs Avoid JavaScript

CSS, the language that helps websites become so cumbersome (Joke! Kinda!), is learning some new tricks. Soon, web developers will be able to use it to perform simple math functions.

Simple may be an overstatement, as the mathematical functions CSS will gain include trigonometry. The trigonometry functions were approved in a late February meeting of the World Wide Web Consortium (W3C) CSS Working Group. Here they are:

  • Tangent – tan()
  • Sine –sin()
  • Cosine – cos()
  • Arcsine – asin()
  • Arccosine – acos()
  • Square Root – sqrt()
  • Power of – pow()
  • Arctangent – atan()
  • Square Root (sum of squares of its argument) – hypot()
  • Arctangent (of an ‘x’ and ‘y’ number) – atan2()