New

New in Chrome 83

developers.google.com

Chrome 83 is starting to roll out the following updates:

  • Trusted types which help prevent cross-site scripting vulnerabilities through blocking direct access to potentially insecure parts (innerHTML, script content, eval, setTimeout).
  • Form elements get an important make-over and look neater now.
  • Memory leaks measure is now with the new measure Memory API.
  • The native file system API starts a new origin trial with the added functionality.
  • New cross-origin policies.
  • Web Vitals program introduced.

Fresh Firefox 76 Release

hacks.mozilla.org

The web platform has some great new additions in this release, such as Audio Worklets and Intl improvements, on the JavaScript side. Also, the development team added a number of improvements to Firefox DevTools to make development easier and quicker, such as: 

  • Ignore entire folders in Debugger.
  • Collapsed output for larger console snippets.
  • Copy full URLs in the call stack.
  • Action Cable support in WebSocket inspection.
  • CSS Compatibility Panel (Dev edition).

New Typescript 3.9 Version Released

devblogs.microsoft.com

  • Typescript received a bunch of fixes with this release:
  • Fixes of slow compilation found in material-ui, styled-components, and other libraries. Six pull requests were merged, each of which accelerates compilation by 5-10%. One of Microsoft's internal projects reduced the compilation time from 29 seconds to 10 seconds after switching to version 3.9.
  • Improvements in Inference and Promise.all.
  • Support of the service comment // @ ts-expect-error, which can be used in unit tests to test cases of correct error handling in JavaScript code.
  • Uncalled function checks introduced reporting an error in case you have forgotten to call a function.
  • Integration with the editors has been improved.

The release includes breaking changes. Optional Chaining with Non-Null Assertions is now parsed a little differently. The "}" and ">" characters can no longer be used in strings inside JSX. Type checking has been improved for intersections of objects with optional properties and common incompatible properties, etc.

Major 7.0.0 Upgrade of ESLint

eslint.org/blog

There are no global changes, but there are many breaking changes that have accumulated since the development of the sixth version:

  • ESLint will no longer work on Node.js 8, as long as this version is deprecated.
  • The rules supplied with the linter kernel have been changed: the no-dupe-else-if, no-import-assign and no-setter-return rules have been added to eslint: recommended.
  • The ten Node.js/CommonJS rules in the core have been deprecated and moved to the eslint-plugin-node plugin.
  • Starting from this version, the paths to files transferred using --config and --ignore-path will resolve relative to the working directory.
  • Updated path resolution strategy for plugins.
  • In the new version, without additional settings, all directories of node_modules will be ignored, even if they are in subdirectories. Bower_components / * and .eslintrc.js will no longer be ignored.

What's New in Lighthouse 6.0

web.dev/lighthouse-whats-new

 Connor Clark talks about key changes in the major update: new metrics and audits, an updated performance rating, Lighthouse CI, an extension for Firefox and others.

Jest 26 Released

jestjs.io/blog

Jest is a popular testing framework that works with pretty much everything. This release focuses on getting the dependency count and install size down (this causes some breaking changes, unsurprisingly), adds a new fake timer implementation, drops Node 8 support, and initial, experimental ESM support to play with.

Next.js 9.4 Released: The React Powered Site Building Framework 

nextjs.org/blog/next

Just two months after 9.3 (which was already an exciting release) comes the even more significant 9.4 which includes Fast Refresh, a new “instantaneous” hot reloading experience, plus, incremental static generation, where static pages can be generated or re-rendered in the background as traffic comes in, improved built-in fetch support (bye-bye `node-fetch` and `isomorphic-fetch`).

Electron 9.0.0 Released

electronjs.org/blog/electron

The popular cross-platform desktop app framework gets more dependency bumps and is now running on Chromium 83, V8 8.3, and Node.js 12.14.

Highlighted features:

  • Multiple improvements to the spellchecker feature.
  • Improved window events handler efficiency on Linux.
  • Enabled PDF viewer


JS

JavaScript Style Guide from Google

google.github.io/styleguide

Google uses a style guide to standardize writing JavaScript code, which clearly defines the rules for JS code. The document covers many Google-libraries specific rules, but there’s a lot about useful vanilla JS recommendations. 

JavaScript Features To Forget

www.davidflanagan.com

David Flanagan, ahead of the latest edition of the ”Javascript: The Definitive Guide”, explains why the book has become thinner and recalls no longer relevant JS features.

Favorite JavaScript Utilities

1loc.dev

177 favourite JS single-line utilities are for solving many problems for arrays, dates, objects, strings, DOM, and even randomizers. A collection of Nguyen Huu Phuoc can be a helpful resource with a built-in search and the opportunity to offer your own utility on Github.

The First Look at Records and Tuples in JavaScript

www.2ality.com

Axel Rauschmayer introduced an article about new immutable and comparable-by-value primitive data types. Record is an analog of an object, tuple is an array. Thanks to immutability, records and tuples can be safely used throughout the program without the need for cloning (as in the case with ordinary arrays and objects).

At the moment, it is in the first stage of adding to the standard.


Libraries and frameworks

RoughJS, or How to Emulate Hand-drawn Shapes

https://shihn.ca/posts

RoughJS is a small-ish (<9kB) JavaScript graphics library that lets you draw in a sketchy, hand-drawn-like style. It lets you draw on <canvas> and with SVG. This blog post is to address the most common issue filed with RoughJS: How does it work?

Demystifying React Redux

https://blog.scottlogic.com

Matt Stobbs in his post described how he was implementing “crappy React Redux”, which was intended to give a general idea of what’s going on when you connect your React app to Redux, rather than give a detailed description of how React Redux is implemented in practice. It was made to demystify the “magic” around Redux and can be useful for those who are interested in how this works under the hood.

How to Use Typescript with Svelte

https://codechips.me

Even though Svelte lacks first-class TS support and its developers claimed it would not be likely to happen, it turns out that you can actually use Typescript to some degree with Svelte even today. The only things required are proper tools and plugins. Read on to find out how.

WebGL Guide - Summarized WebGL Tutorial, with Tiny Interactive Demos

https://xem.github.io

Maxime Euziere wrote a great guide on how to work with WebGL, explaining from the basiсs the creation of an interactive three-dimensional scene without using third-party libraries. Only pure JS and WebGL are used. 

At the very beginning, there is a section about mathematics, which is necessary for working with graphics. Then, the process of creating simple two-dimensional and three-dimensional scenes with a detailed explanation of the source code examples.

At the end of the article, there is a list of the most common errors. It is useful to know about them when debugging code.

Introducing Crank

https://crank.js.org

Crank.js a new framework for creating JSX-driven components with functions, promises and generators. The author says: `I sincerely apologize for creating yet another framework in an already crowded space`, but described his intentions on creating a new framework influenced by React.

Within the features, you can find something suitable for your needs or tastes: JSX syntax, all components are functions or generator functions(no classes, hooks, proxies), first-class support for promises.

Javascript Frameworks Starter Kit From MDN

https://developer.mozilla.org

MDN team provides some tutorials covering the essentials of some of the major frameworks to supply beginners with enough context and familiarity for them to start, going into greater depth themselves. The link includes the initial set of articles with the guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. 

oil - State Management Library for React

https://recoiljs.org/

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React.

Hegel, a Static Type checker - Implementing the Best of Flow and TypeScript

https://hegel.js.org

Hegel is a type checker for JavaScript which presents itself with some competitive advantages in front of TypeScript and Flow, such as: 

  • No unexpected runtime errors
  • Ability to skip type annotation
  •  Information about errors that may be thrown by functions/methods 

A (Mostly) Complete Guide to React Rendering Behavior

https://blog.isquaredsoftware.com

In case you have ever been confused by when, why, and how React will re-render components, and how usage of Context and React-Redux will affect the timing and scope of those re-renders, this article will be a helpful resource. Mark Erikson is looking into the rendering concept and how React handles rendering. 


HTML

HTML Periodic Table

https://websitesetup.org

One more handbook-like tool, combined with the attractive UI. All the possible HTML elements are combined into a table, divided into categories, and for each of them, there is a description and a link to additional information. 


CSS

A Complete Guide to CSS Functions

https://css-tricks.com

Like any other programming language, CSS has its functions. They can be inserted where you place value, or in some cases, accompanying another value declaration. 

You may be familiar with some CSS functions (e.g. calc or url), but the language has a surprisingly expansive list! The article includes a variety of CSS functions with the examples and explanations, grouped by categories.

CSS Findings From Twitter Design

https://ishadeed.com

Almost one year ago, the new Twitter design was introduced. There are some cool and weird things that Ahmad Shadeed is explaining in the article. In particular, how a tweet content is added, how the avatar is styled, and how some components work with a small viewport.

Optimize Cumulative Layout Shift

https://web.dev

Addy Osmani’s article on how to avoid frustrating user experience, which often happens when visible elements are forced to move because another element has been suddenly resized or added to the page. Optimization of Cumulative Layout Shift metric can help to measure the instability of content. 

Flexible Layouts Without Media Queries: min(), max(), clamp() functions

https://blog.logrocket.com

In the article, Dannie Vinther is looking into how it is possible to create flexible layout components with CSS Grid and math functions to gain more control over the hypothetical instructions developers inscribe into the components. Also, the downsides of media queries and Flexbox are reviewed as opposed to CSS grids.



Web

Introducing Web Vitals: Essential Metrics for a "Healthy" Site

https://blog.chromium.org

The Chromium developers rolled out a guide that describes the main metrics for evaluation of the quality of the site:

  • LCP (Largest Contentful Paint): time to render the largest piece of the content on the page. Should take no more than 2.5 s.
  • FID (First Input Delay): the delay time for processing the first user interaction with the page. Should take no more than 100 ms.
  • CLS (Cumulative Layout Shift): a metric showing how much of the content shift occurs when the site loads.


Persistent Storage

https://web.dev/persistent-storage/

Research from the Chrome team shows that although possible, stored data is rarely cleared automatically by Chrome. To protect critical data that may not be stored in the cloud, or can result in significant data loss, persistent storage can be a helpful tool to ensure that your data is not removed by the browser when the local device is faced with storage pressure. 

Pete Lepage talks about the API that allows you to ask the browser not to delete data from the browser repositories.


Testing

Fast and Reliable Cross-browser Testing with Playwright

https://medium.com

Arjun Attam talks about the main features of the tool that works with the browsers on the Chromium, Webkit and Gecko engines. This also includes newer browser features that are used by Progressive Web Apps (PWAs).

Majestic 1.7: A Zero Config GUI for Jest

https://dev.to/raathigesh

A tool to help make your JavaScript testing life a little easier. Run npx majestic in the folder of any project that uses Jest to give it a quick try. It works with Create React App.


Interesting

The Beauty of Progressive Enhancement

www.matuzo.at/blog

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript are offering us, by providing a basic, but a robust foundation for all. Manuel Matuzovich shares the examples of progressive improvement, thanks to which his project works in IE11 and on the modern version of Nokia 3310.

Tiny Package Manager, an Annotated Implementation of the NPM / Yarn Analogue

https://github.com

There is no need to offer a new package manager because both npm and Yarn are mature and stable enough. The purpose of the guide is to explain how a package manager works under the hood. You can read the code, and the comments will give an explanation of it works.

API Stylebook

http://apistylebook.com

The API Stylebook aims to help API Designers to resolve API design issues and build their API design guidelines by providing quick and easy access to selected and categorized resources. Stylebook includes plenty of real guides from companies worldwide.

Will It CORS?

https://httptoolkit.tech/will-it-cors/ 

Cross-Origin Resource Sharing (CORS) is the way browsers decide how web applications can communicate with other services. Restricting this is important for security, but it is hard to understand how CORS works, which means sending HTTP requests to APIs may be difficult and confusing.

In order to ease developers’ work, a handy online tool/wizard was created. It establishes how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).


Node

Deno 1.0 - a New Runtime Fist Stable Version Is Out!

https://deno.land

Recently, the creator of Node.js released the first stable version of the new runtime for JavaScript and TypeScript - Deno 1.0. In it, the creator tries to fix design errors made in Node.js. For instance:

  • Focus on security in the default configuration. When you run any code, you must explicitly indicate what the script can use (network, file system, etc.).
  • Refusal of EventEmitter in favour of promises.
  • Native TypeScript support.
  • And here is a small introduction on setting up and running Deno: https://flaviocopes.com/deno/

Diagnostics in Node.js

https://nodesource.com

A comprehensive overview of APIs and tools for finding bugs and problems, including handy methods description of using diagnostics in Node.js. The guide is separated into three different parts, where the topics are sorted by the age of diagnostic techniques - from the oldest to the newest.