Take a look at the most significant 2018 JavaScript releases, news and stats. And as usual, fresh report on JS in December edition of our JavaScript digest.

JavaScript in 2018

Here are the main 2018 stuff from JS Universe, in our not so humble opinion:

Goodbye, EdgeHTML

Microsoft is officially giving up on an independent shared platform for the internet. By adopting Chromium, Microsoft hands over control of even more of online life to Google.

This may sound melodramatic, but it’s not. The “browser engines” — Chromium from Google and Gecko Quantum from Mozilla — are “inside baseball” pieces of software that actually determine a great deal of what each of us can do online. They determine core capabilities such as which content we as consumers can see, how secure we are when we watch content, and how much control we have over what websites and services can do to us. Microsoft’s decision gives Google more ability to single-handedly decide what possibilities are available to each one of us.

Learn more on blog.mozilla.org.

State of JavaScript 2018

JavaScript is always changing. New libraries, new frameworks, new languages… It's part of the fun, but it can also feel overwhelming sometimes. That's where the State of JavaScript survey comes in: this year, we surveyed over 20,000 JavaScript developers to figure out what they're using, what they're happy with, and what they want to learn. And the result is a unique collection of stats and insights that will hopefully help you make your own way through the JavaScript ecosystem.

state of javascript 2018

Front-end

state of js 2018 frontend

Back-end

state of js 2018 backend

Mobile and Desktop

state of js 2018 Mobile and Desktop

Data Layer

state of js 2018 Data Layer

Find out more on 2018.stateofjs.com.

WordPress 5.0

Each time a new version of WordPress rolls out, we’re all excited about getting to play with its new features. However, few versions in the past have garnered as much buzz around them as WordPress 5.0 because of these two simple words: the new block-based editor – otherwise known as Gutenberg.


Check themeisle.com for more on this.

Flutter 1.0: Google’s Portable UI Toolkit

Flutter 1.0, the first stable release of Google's UI toolkit for creating beautiful, native experiences for iOS and Android from a single codebase. Flutter doesn't replace the traditional Apple and Android app models for building mobile apps; instead, it's an app engine that you can either embed into an existing app or use for an entirely new app.

Flutter also includes the latest version of the Dart platform, 2.1, an update to Dart 2 that offers smaller code size, faster type checks, and better usability for type errors. Dart 2.1 also has new language features to improve productivity when building user experiences.


More info on developers.googleblog.com.

Goodbye Electron, Hello Desktop PWAs(Future of Desktop Apps)

A recent Chrome version(v70) has released some exciting support for Desktop Progressive Web Applications on Linux and Windows.

Electron is a platform that allows developers to build Cross-Platform desktop applications using Javascript, HTML, and CSS. This lowers the bar for Web Application developers to easily create Desktop alternatives as well as leverage some of the great Javascript libraries and frameworks. Electron based applications have taken Desktop Applications by storm in recent years. Programs such as Slack, VSCode, Atom, and Discord have invested heavily into Electron development. If you have not already used any of these services, definitely check them out. Desktop applications used to feel clunky and UI components always seemed outdated. Electron has definitely brought some sexiness to the desktop game!

Why Desktop Progressive Web Applications?

Imagine a world where you could leverage the look and feel of an Electron Application, without requiring lengthy installs, software updates, all while shipping a single web application. Chrome seems to be setting the standard for this behavior in Desktop PWAs. When you visit a webpage in Chrome and the application meets all the criteria, the developer has the ability to prompt the user to install the application on their desktop. The prompt looks something like this:

Why Desktop Progressive Web Applications

Desktop PWA checklist but here is a quick summary:

  • Must be served over HTTPS
  • Must have an installed Service Worker with at least one fetch handler
  • Must serve a valid manifest.json
  • Pages must be responsive

Find out more on Daily JS Medium.

Browsers

Firefox 64 Released

  • CSS Scrollbars: The CSS Scrollbars Level 1 spec standardizes features for setting scrollbar width and color, which were originally only available in Internet Explorer. See CSS Scrollbars on MDN Web Docs and Scrollbars on CSS Tricks for more information.
  • -webkit-appearance: To make the effects of the appearance property more consistent across browsers, Firefox has unshipped all of its own proprietary values from web content, and added support for all the -webkit-prefixed versions that are in common use.
  • Going forward in Firefox, if a selector chain or group includes a -webkit-prefixed pseudo-element, that pseudo-element no longer invalidates the whole group.
  • Multiple tab selection. Firefox are  excited to introduce multiple tab selection, which makes it easier to manage windows with many open tabs. Simply hold Control (Windows, Linux) or Command (macOS) and click on tabs to select them.
  • Devtools improvements. Developer Tools also gained a notable new feature: when hovering over text, the Accessibility Inspector now displays text contrast ratios in the pop-up infobar.
  • WebVR 1.1 in macOS. Firefox 64 now supports WebVR 1.1 on macOS!

More on hacks.mozilla.org.

New in Chrome 71

  •  Displaying relative times is now part of the Intl API.
const rtf = new Intl.RelativeTimeFormat('en');
      
      rtf.format(3.14, 'second');
      // → 'in 3.14 seconds'
      
  • Notifying users of unclear subscription pages

New in Chrome 71: Notifying users of unclear subscription pages

  • Speech synthesis requires user activation
const utterance = new window.SpeechSynthesisUtterance('Hello');
      utterance.lang = lang || 'en-US';
      try {
        window.speechSynthesis.speak(utterance);
      } catch (ex) {
        console.log('speechSynthesis not available', ex);
      }
      

Learn more on developers.google.com.

Front-end

ReportingObserver API

A new ReportingObserver API is going to help you with deprecated API on your website and also with letting you know when your code runs into a browser intervention.

ReportingObserver is going to help you to deliver deprecation and intervention warnings straightaway to your door by sending it to your backend implementation and informing you about it. An important part of it is that it will monitor your website and issues 24/7 and report it to you. Fantastic.

ReportingObserver API is going to be shipped in Chrome 69. According to Chrome Platform Status, there are no public signals from Mozilla and Safari to get it done in the near feature but surprise, surprise Edge is supporting the idea of the API and will be shipping it in some time.

const report = new ReportingObserver((reports, observer) => {
         for (const report of reports) {
            const stringifiedReport = JSON.stringify(report.body);
            // Send to the server
            receiveReport(stringifiedReport);
        }
      }, { types: [‘deprecation’], buffered: true }); 
      

Check codementor.io for more details.

Console.rules(💪)

  • Interpolated. ‘%s’ allows you to replace that space with other stuff.
// interpolated with fun
      const emoji = ['💩', '👯‍', '😸', '🏄', '🚀', '🔥', '🎉', '😄', '🦁'];
      function randomEmoji() {
        let random = Math.floor(Math.random() * emoji.length);
        return emoji[random];
      }
      console.log('hello %s!', randomEmoji());
      

Console rules: Interpolated

  • Styled. ‘%c’ allows you to inject CSS starting from where you decide to put it.
const style = [
        'background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb);',
        'color: #fff',
        'padding: 10px 20px',
        'line-height: 35px'
        ].join(';');
      console.log('%cHi there!', style);
      

Console rules Gradients

Learn more on itnext.io.

TypeScript 3.2

Below we have a bit about what’s new in 3.2.

  • strictBindCallApply
  • Object spread on generic types
  • Object rest on generic types
  • Node.js-based resolution for tsconfig.json inheritance
  • Diagnosing tsconfig.json with --showConfig
  • BigInt
  • Object.defineProperty declarations in JavaScript

For more check blogs.msdn.microsoft.com.

Node.js/Java Script

Little known features of JavaScript

  • ~ Tilde Operator. Turns out when used with a number, the Tilde operator effective does ~N => -(N+1) . This expression evaluates to “0” only when N == -1We can leverage this by putting ~ in front of the indexOf(...) function to do a boolean check if an item exists in a String or an Array.

Little known features of JavaScript. Tilde Operator

  • IIFE Brackets can be skipped. The void operator tells parser that the code is functional expression. Hence, we can skip brackets around function definition.

Little known features of JavaScript: IIFE Brackets can be skipped

  • Constructor Brackets are optional .Yes, the parentheses we add after class name while invoking a constructor — completely optional.

Little known features of JavaScript Constructor Brackets are optional

Check blog.usejournal.com for more.

Event-stream incident

The malicious user modified event-stream to then depend on a malicious package, flatmap-stream. This package was specifically crafted for the purposes of this attack. Short description of vulnerability:

  • copay-dash is a popular bitcoin platform which includes event-stream as a dependency.
  • For about a week in September, event-stream included flatmap-stream as a dependency, as it was passed along to a new maintainer who added the dependency and removed it a week later.
  • flatmap-stream had some code hiding at the end of its minified built output which attempts to decode and execute strings from its packaged test/data.js file, using the description of the top-level package as the AES256 key.
  • For any other package, this produces a silently handled error. But for copay-dash, this produces some valid JavaScript which runs another round of decryption and executes a malicious script that steals your bitcoin wallet.

That’s it for now. Stay tuned and and subscribe to our newsletter not to miss next month JS digest. See you in 2019! Happy Coding!