So much news and so little time in JavaScript World. Enjoy our newest JS digest, stay up to date on the latest JavaScript news and updates.

Browsers news

Firefox 63: Miner and Fingerprinting protection

  • Mozilla plans to include a new protective feature in Firefox 63; the browser's Tracking Protection feature, enabled by default only in private browsing windows, will protect users of the web browser from so-called in-browser miners and fingerprinting scripts.
  • JavaScript mining is a relatively new threat that Internet users face. Websites and browser extensions may embed JavaScript code to mine cryptocurrency using the system the browser is run on.
  • While some sites ask users about it or limit the percentage of CPU power that is assigned to mining tasks, others use all of the processing powers of the device without asking users about it first.
Firefox 63 tracking projection

Learn more on  ghacks.net.

Chrome and Firefox leaks let sites steal visitors Facebook names, profile pics

For more than a year, Mozilla Firefox and Google Chrome may have leaked users’ Facebook usernames, profile pictures, and likes if the users’ browsers visited malicious websites that employed a cutting-edge hack.

The data could be extracted through what’s known as a side-channel vulnerability in the browsers’ implementation of new standards for cascading style sheets introduced in 2016. One of the new features known as the “mix-blend-mode” leaked visual content hosted on Facebook to websites that included an iframe linking to it and some clever code to capture the data. Normally, a security concept known as the same-origin policy forbids content hosted on one domain to be available to a different domain. The vulnerability was significant because it allowed hackers to bypass this bedrock principle for two of the Internet’s most widely used browsers.

facebook profile theft

Find out more on arstechnica.com

10 Firefox Dev Tools things that you might not know yet

1. Take a screenshot of the whole page 

Take a screenshot of the whole page

2. Take a screenshot of a single node 

Take a screenshot of a single node

3. Remove a class from an element  

Remove a class from an element

4. Drag-and-drop in the Elements panel  

Drag-and-drop in the Elements panel

5. Reference the currently selected element in the Console

Reference the currently selected element in the Console

6. Use the value of the last operation in the Console

Use the value of the last operation in the Console

7. Debugging JavaScript

Debugging JavaScript

8. Reference any element from the Inspector, in the Console

Reference any element from the Inspector, in the Console

9. Inspect CSS Grid

Inspect CSS Grid

10. Find out which font is actually used

Find out which font is actually used

More on hackernoon.com

Frameworks

Github Stars !== Usage: React is still blowing Vue and Angular Away

  • Last week there was a fairly momentous occurance in the JavaScript framework world: Vue.js passed React.js in the number of people who have 'starred' it on Github.
  • There is no perfect measure - there are many many ways to install and use any of these projects - but NPM has become the de facto standard for installing JavaScript packages.
  • If we look at download statistics for the core package of each of these frameworks - the vue package and the react package, that should give us a reasonable proxy for actual use.
  • To do this, I used a website called npm-stat.com, which allows you to generate graphs of historical downloads of NPM packages going back to February of 2015. (Which is as far back as the NPM registry reports download data).
  • The Data: React is Still Dominating
Vue.js passed React.js in the number of people who have 'starred' it on Github

Find out more zendev.com

React v16.4.0: Pointer Events

The latest minor release adds support for an oft-requested feature: pointer events!

Please note that these events will only work in browsers that support the Pointer Events specification. (At the time of this writing, this includes the latest versions of Chrome, Firefox, Edge, and Internet Explorer.) If your application depends on pointer events, we recommend using a third-party pointer events polyfill. We have opted not to include such a polyfill in React DOM, to avoid an increase in bundle size.

The following event types are now available in React DOM:

  • onPointerDown
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

More info on  reactjs.org

Material-UI v1 is out 🎉

Material-UI was started 3 years ago by @hai-cea. The React ecosystem has evolved considerably since then, and we have also learned along the way.

There are so many new things, we can’t be exhaustive. Aside from what we have already announced, you will find:

  • Simpler and more powerful theme
  • Grid layout component
  • New documentation
  • Right-To-Left support
  • First class server-side support
  • Premium themes
  • First class TypeScript support
  • And much, much more

More on medium.com

Front-end

The backdrop-filter CSS property

The backdrop-filter proposal is heavily influenced by the Apple design language, particularly that frosty-transparent-blurry-background seen in their most recent iOS and macOS interfaces. You’ll have noticed it in the Dock, the Contextual Menu, and the Notification centre.

The backdrop-filter property is not well supported at the time of this writing. And even in Safari where it is supported, you’ll still need to prefix it. There’s no support for Firefox at all.

Learn more on  css-tricks.com

Display: Contents

  • `display: contents;`—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.
  • Also, `display: contents` makes that the div doesn’t generate any box, so its background, border and padding are not rendered. However the inherited properties like color and font have effect on the child (span element) as expected.
Display: Contents

Learn more on rachelandrew.co.uk.

Report JavaScript Errors with window.onerror

onerror is a special browser event that fires whenever an uncaught JavaScript error has been thrown. It's one of the easiest ways to log client-side errors and report them to your servers. It's also one of the major mechanisms by which Sentry's client JavaScript integration (raven-js) works.

Report JavaScript Errors with window.onerror

When an error is thrown, the following arguments are passed to the function:

  • msg – The message associated with the error, e.g. "Uncaught ReferenceError: foo is not defined"
  • url – The URL of the script or document associated with the error, e.g. "/dist/app.js"
  • lineNo – The line number (if available)
  • columnNo – The column number (if available)
  • error – The Error object associated with this error (if available)

More  info on scotch.io.

Neat JavaScript tricks

  • Clearing or truncating an array
const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr);
//=> [11, 22, 33]
// clearingarr.length = 0;console.log(arr);
//=> []console.log(arr[2]);
//=> undefined
  • Formatting JSON code
const obj = {   foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to
// beautify the JSON output.JSON.stringify(obj, null, 4);
// =>"{
// => "foo": {
// => "bar": [
// => 11,
// => 22,
// => 33,
// => 44
// => ],
// => "baz": {
// => "bing": true,
// => "boom": "Hello"
// => }
// => }
// =>}"
  • Simulating named parameters with object destructuring
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
// ...}
  • Flattening multidimensional arrays
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
  • Switch with ranges
function getWaterState(tempInCelsius) {  
let state;
switch (true) {
case (tempInCelsius <= 0):
state = 'Solid';
break;
case (tempInCelsius > 0 && tempInCelsius < 100):
state = 'Liquid';
break;
default:
state = 'Gas';
}
return state;}

More info on medium.freecodecamp.org

npm @6

npm, Inc. has announced npm@6, a major update to its JavaScript software installer tool with new security features for developers who work with open source code. npm@6 will be included as part of the Node.js v10.x release line, and leverages the assets of the Node Security Platform, the definitive source of JavaScript vulnerabilities, recently acquired by npm, Inc.

  • Performance enhancements. npm@6 is up to 17x faster than the npm of one year ago.
  • Optimization for CI. `npm ci` makes using npm within your continuous integration/continuous deployment (CI/CD) workflow an additional 2x–3x faster.
  • Webhooks management. Real-time notifications of Registry and package changes — almost two years ago, but now it’s possible to configure these from directly within the npm CLI. We can’t wait to see what powerful developer tools you build.
  • More visible integrity metadata. It’s becoming easier every day to verify that a package hasn’t been tampered with or corrupted.
  • Automatic resolution of lockfile conflicts. Teams can more easily share reproducible builds.

More on  medium.com

Easier creating webpack configs

When using this tool, you get a webpack.config.js that is created just for you. It's a great starting point for further development. The webpack.config.js will create an optimized bundle based on best practices.

Easier creating webpack configs

Get more on webpack.jakoblind.no

IDE`s

Voyager (VSCODE Plugin)

Voyager - vscode extension to add, search, remove, update packages without touching terminal, package.json or browser.

Here are some of the major purposes it serves:

  • Reads package.json and presents the details in a separate, friendly view, allowing you to edit the values.
  • Lets you discover, search for packages from npm.
  • Shows the readme, stats and links for any package within VSCode without switching to browser.
  • Lets you install/uninstall/update dependencies with clicks, without switching to terminal
  • Shows the existing version and latest version of installed dependencies, with colored labels indicating how outdated your dependencies might be.
  • Lets you run scripts by clicking on the script blocks.

More info on github.com.

8 Emmet Tips You Might Not Know

Emmet is a very useful code editor tool that brings snippets and supercharged shortcuts for generating HTML/markup and even CSS.

Save tons of time in your daily workflow by learning more of Emmet syntax. Also remember that all of these examples will be in plain HTML files, but you can also configure Emmet to be used with React/JSX, Angular templates, Vue templates, and more.

  • Grouping and Sibling
  • Climbing Up
  • Numbering
  • HTML Tags Expansions
  • Attributes
  • Wrap with Abbreviation
  • Tag Balancing
  • CSS

More info and videos with example on scotch.io.

That’s it for now. Stay tuned and and subscribe to our newsletter not to miss next month JS digest!