Wassim Chegham PRO
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev
Template Literals Type Improvements
type Color = "red" | "blue";
type Quantity = "one" | "two";
type SeussFish = `${Quantity | Color} fish`;
//---
declare let s1: `${number}-${number}-${number}`;
declare let s2: `1-2-3`;
// Works!
s1 = s2;
ECMAScript #private Class Elements
class Foo {
#someMethod() {}
get #someValue() { return 100; }
}
new Foo().#someMethod();
// ~~~~~~~~~~~
// error!
// Property '#someMethod' is not accessible
// outside class 'Foo' because it has a private identifier.
Import Statement Completions
Workspaces (RFC)
// packag.json
{
"name": "workspace-example",
"version": "1.0.0",
"workspaces": {
"packages": [
"packages/*"
]
}
}
📓 Notebooks improvements
🍎 Updated macOS Big Sur icons
🍓 Official Raspberry Pi support
March 2021 release
Template Literals Type Improvements
type Color = "red" | "blue";
type Quantity = "one" | "two";
type SeussFish = `${Quantity | Color} fish`;
//---
declare let s1: `${number}-${number}-${number}`;
declare let s2: `1-2-3`;
// Works!
s1 = s2;
ECMAScript #private Class Elements
class Foo {
#someMethod() {}
get #someValue() { return 100; }
}
new Foo().#someMethod();
// ~~~~~~~~~~~
// error!
// Property '#someMethod' is not accessible
// outside class 'Foo' because it has a private identifier.
override and --noImplicitOverride
class SpecializedComponent extends SomeComponent {
override show() {
// ...
}
override hide() {
// ...
}
}
🎁 File Handling API
🎁 Handwriting Recognition API
🎁 Shared Element Transitions API*
Project Fugu updates
Moving Closer to Ivy Everywhere
🎁 IVy by default
🎁 Deprecating Support for IE11
🎁 Build prod by default
🎁 Theme Color
🎁 Pull to Refresh (Safari-only)
🎁 Web Extensions (not sure if Safari-only)
🎁 WebGL2
🎁 SharePlay & Web Share 2
iOS 15 beta 1
Everything from Microsoft for JavaScript developers!
🎁 Beginner resources
🎁 Announcements
🎁 Tools for JavaScript developers
🎁 Latest from the Web community
🎁 Stage 4 – Array.at(), Object.hasOwn(), Class Static Blocks
🎁 Stage 2 – Pipeline Operator, Change Array by Copy
🎁 Stage 1 – USV String, Array.fromAsync(), BigInt Math...
// v14.13.1+
import url from "node:url";
// v16+
const url = require("node:url");
node: protocol
Cancel async operations with AbortController
const cancelRequest = new AbortController();
const response = await fetch("http://localhost:8080/api/data", {
signal: cancelRequest.signal,
});
//...
cancelRequest.abort();
Built-in RFC 4122 v4 UUIDs
// v15.6+
import { randomUUID } from "node:crypto";
console.log(randomUUID());
// 'c61809c8-e8db-4b09-9158-887eb48521c9'
promise-based APIs
import dns from "node:dns/promises";
const resolver = new dns.Resolver();
const addresses = await resolver.resolve4("nodejs.org");
console.log({ addresses });
Writing scripts with JavaScript
const jsFiles = await globby("./src/**/*.js");
for (let path of jsFiles) {
const newPath = path.replace('.js','.cjs');
await $`mv ${path} ${newPath}`;
}
Run Third-Party Scripts Inside Web Workers
<script>
partytown = {
forward: ['dataLayer.push', '_hsq.push', 'Intercom']
};
</script>
By Wassim Chegham
Météo Du Web // Les Briques du Web
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev