Project title: Cool new things in JS + CSS
Brief summary: This session will give an overview of newly available features in JavaScript and CSS that can be used by Wikimedia developers, including in core/extensions/skins as well as on-wiki gadgets and user scripts/styles. The goal is not just to introduce people to new features, but also to make them aware which features they can use nowadays, thanks to advances in the Wikimedia context like bumping browser requirements (e.g. T288287) and JavaScript versions (e.g. T178356, T381537).
Expected outcomes: As above; also, there will be a slide deck that people can refer to later, as a companion to Cool new things in PHP (T331275) and Cool new things in MediaWiki code (T331276).
Skills preferred: General familiarity with JS + CSS ought to be helpful.
Experience level: beginner
Project leads: @Lucas_Werkmeister_WMDE
Starting tasks: N/A, this is a session
Why are you proposing this project? Because it seems like a useful thing to do and several people in the Telegram/IRC group indicated interest in the topic.
What is the expected impact? People will use more modern JavaScript code.
Any other additional information for contributors: N/A, I think

Raw session notes

Unconference session: Cool new things in JS + CSS (T423292)
Contact: Lucas Werkmeister (WMDE)
Slides: https://docs.google.com/presentation/d/13rag-ujgI26wQEV0mR7mLNmbeUWVg69fs2DgH2fyzZQ/edit

This is a new set of features that we can use recently because we dropped support for old browsers like IE that were slowing us down in new features.

Already available:

Promise: Aync + Await.

Template literals, now we have template strings.

Template strings can be multiple lines.

Q: What happens if you remove the spaces between the brackets there?
A: Nothing.

To replace the old let/const we now have arrow functions.

For the old Class Syntax. we were doing arcane magic but now we can use legit JS class syntax and we can define method names and parameters, it's a nice way to write classes.

Methods: We don't need to declare key-values for methos, we can just define the name and it'll infer the variable name.

We can now destructure values into two different values instead of doing it manually, this is a good way to import many things wihtout having to declare them.

Rest + Spread syntax. The code was very hard to understand and confusing, the syntax improved to make it more readable. It takes parameters as an array and spreads them across the foundation becoming the arguments for the functoin. [Like Go's variadic arguments).

Map and Set, I dind't find any goog examples, but they exist :shrug:,

Includes is now actually intuitive to read.

For-of and for-in have been enabled forever.

[Slides now talk about CSS]

Now the CSS parts.

It was harder to find examples for previous CSS and current CSS code.

More notably, examples of code changes can be seen in the Vector 2020 theme.

Flex and Grids are good example of this.

CSS Calc, you can make calculations.

We also have CSS @supports to define a clause for specific features some browsers may or not support.

In my [Lukas] opinion Async Generators are the most important things.