New in Chrome 83
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
- 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
- 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.
- 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
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
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
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
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
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.
- Multiple improvements to the spellchecker feature.
- Improved window events handler efficiency on Linux.
- Enabled PDF viewer
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.
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
Demystifying React Redux
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
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
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.
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.
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
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
- 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
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 Periodic Table
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.
A Complete Guide to CSS Functions
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
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
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
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.
Introducing Web Vitals: Essential Metrics for a "Healthy" Site
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.
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.
Fast and Reliable Cross-browser Testing with Playwright
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
The Beauty of Progressive Enhancement
Tiny Package Manager, an Annotated Implementation of the NPM / Yarn Analogue
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.
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?
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).
Deno 1.0 - a New Runtime Fist Stable Version Is Out!
- 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
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.