Web Almanac 2020 Preview, .NET 5,  Container Queries, and Angular 11 | Front End News #007
Tags: frontendnews
Published: 2020-11-30 08:06:30

> **NOTE:** This is issue #007 of my newsletter, that went live on Monday, November 16th. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

I started this series with the hope that I will take it far into the future. Hence the triple-digit issue number. It means I have to dedicate the #007 edition to the late Sir Sean Connery, who left us very recently. Thank you, Sir, for all the moments of joy you brought us.

I also want to give a shoutout to the DeviantArt creator [deryamerya](https://www.deviantart.com/deryamerya/) who made the [007 rifled gun barrel graphic](https://www.deviantart.com/deryamerya/art/James-Bond-style-89037702) I used in the cover art for this issue.

***

## Web Almanac 2020 Preview

It looks like the Web Almanac team is working overtime, as we are already getting a preview of two entire sections. They released the unedited versions for the chapters covering markup and API capabilities.

Some interesting tidbits from the Markup section are:

- The average document size is 50.35 KB
- The largest document weighs a whooping 64.16 MB
- 14% of the pages in the mobile data set contain at least one obsolete element like `applet`, `bgsound`, `blink`, `center`, `font`, `frame`, `isindex`, `marquee`, or `spacer`.

Just by taking a few glances through these two unedited chapters, it's clear that they contain a treasure-trove of useful information. I am looking forward to seeing the final version.

- [Web Almanac 2020: Table of Contents](https://almanac.httparchive.org/en/2020/table-of-contents)
- [Part I Chapter 3: Markup](https://almanac.httparchive.org/en/2020/markup)
- [Part II Chapter 13: Capabilities](https://almanac.httparchive.org/en/2020/capabilities)

***

## Announcing .NET 5.0.0

Microsoft just announced the official release of the fifth major version of their .NET suite. It includes updates to the ASP.NET Core, EF Core, C# 9, and F# 5. It is the first milestone in the company's quest to unify the .NET platform.

The article claims a large number of improvements like better performance across many components, language improvements in C# and F#, better JSON serialization, or better deployment options for your applications. 

I am barely scratching the surface here, as the article itself would take 25 pages to print. So without further ado, I invite you to check the links below for (a lot) more information.

- [Announcing .NET 5.0](https://devblogs.microsoft.com/dotnet/announcing-net-5-0/)
- [.NET 5.0 release notes on GitHub](https://github.com/dotnet/core/blob/master/release-notes/5.0/5.0.0/5.0.0.md)

***

## Container queries are coming

Every CSS developer wished, at one point, that container queries would be real. Well, we might just get our wishes to come true, and it might not take that long either. 

An announcement on the Chromium mailing list states the intent to prototype this functionality. It will follow a model described by Miriam Suzanne with the following main features:

- a container will be marked with the `contain: size` rule
- this will be used with a new @-rule: `@container (min-width: 100px) {...}`

I found out this exciting news via Bram Van Damme, a Belgian developer, who wrote about it on his blog. I linked his article below, together with the link to the original announcement.

First native masonry, now container queries... Isn't it a great time to be a CSS developer?

- [Container Queries are coming to Chromium!](https://www.bram.us/2020/11/05/container-queries-are-coming-to-chromium/)
- [Intent to Prototype: Container Queries](https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI/m/wrJb-unhAgAJ)

### Come one step closer with the Raven Technique

Until container queries receive support across all mainstream browsers, you might also want to have a look at an alternative. Dubbed "The Raven technique", it was created by Mathias Hülsbusch and published on the CSS Tricks website

The technique is based on the use of CSS mathematical functions (such as `calc()`, `min()`, `max()`, and `clamp()`) and CSS variables. The article is well documented and has lots of examples, but it's not light reading.  Full details are available using the link below:

- [The Raven Technique: One Step Closer to Container Queries](https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/)

***

## What's missing from CSS?

I mentioned the State of CSS survey a few editions ago in issue 004. While they are still compiling the data, we are getting an early treat. One of the requests was to mention what we think is missing from CSS. The whole list of answers to that question is now available on its own website. You can skip randomly through the results, or you can download the entire data set.

- [What's missing from CSS?](https://whatsmissingfromcss.com/)

***

## Browser news

### Brave

The Brave team announced that they are phasing out their current referral program before the end of the year. They are planning a replacement, but no more details are available at this time.

- [Sunsetting the referral program and planning for the future](https://brave.com/referral-program-update/)

### Chrome

We are getting the customary preview into the next update for the DevTools from the Chrome team. The list of updates and improvements is impressive. Here's just a taste of what's available:
faster startup for the DevTools
a new way to visualize CSS angles
simulate storage quota size in the Storage pane
new Web Vitals lane in the Performance panel recordings
experimental CSS Flexbox debugging tools
and a lot, lot more.

- [What's New In DevTools (Chrome 88)](https://developers.google.com/web/updates/2020/11/devtools)

### Polypane

Polypane is a fairly new browser for developing responsive, fast & accessible websites. It has powerful devtools, multiple synced viewports, over 25 debug tools, device emulation, built-in live-reloading, and much more.

You can try Polypane without any costs for 14 days, and the payment plans are starting from €11/ month, with 2 months free included if you pay annually. 

They just launched version 4 that brings over a new unified console, docked devtools for isolated panels, improved social media previews, and it runs on Chromium 87.  Full details are available in the official release announcement linked below.

- [Polypane 4: Unified Console, DOM tree in elements panel](https://polypane.app/blog/polypane-4-unified-console-dom-tree-in-elements-panel/)

***

## Software updates and Releases

### Angular 11

Angular is a TypeScript-based open-source web application framework.

- [https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7](https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7)

### Babylon.js 4.2

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

- [https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad](https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad)

### Bootstrap 5 Alpha 3

Bootstrap is the world’s most popular front-end open-source toolkit.

- [https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/](https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/)

### Chakra UI React - V1

Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

- [https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%401.0.0](https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%401.0.0)

### core-js v3.7.0

Modular standard library for JavaScript.

- [https://github.com/zloirock/core-js/releases/tag/v3.7.0](https://github.com/zloirock/core-js/releases/tag/v3.7.0)

### Node.js v15.2.0

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser.

- [https://github.com/nodejs/node/releases/tag/v15.2.0](https://github.com/nodejs/node/releases/tag/v15.2.0)

### ShareDB v1.5.0

ShareDB is a real-time database backend based on Operational Transformation (OT) of JSON documents. It is the real-time backend for the DerbyJS web application framework.

- [https://github.com/share/sharedb/releases/tag/v1.5.0](https://github.com/share/sharedb/releases/tag/v1.5.0)

### Windows Terminal Preview 1.5

Windows Terminal is a multi-tabbed command-line front-end that Microsoft has developed for Windows 10.

- [https://devblogs.microsoft.com/commandline/windows-terminal-preview-1-5-release/](https://devblogs.microsoft.com/commandline/windows-terminal-preview-1-5-release/)

***

## Developer Projects

I'm adding here a new section where I want to highlight some developer projects that caught my attention. I think it would be a great addition, not just because they are cool and useful, but because I hope they will inspire some of you to create something awesome of your own.

### Debugging CSS with Ahmad Shadeed

The first project I want to present to you is a just-released ebook on CSS debugging by Ahmad Shadeed. I haven't got it yet (I plan to do it sometime soon), but I've read many of his articles. If the book is at least of that same level, then we're all in for a treat.

- [Debugging CSS](https://debuggingcss.com/)

### Webbed Briefs

Webbed Briefs are brief videos about the web, its technologies, and how to make the most of them (not to mention a healthy dose of British dry humor). It is yet another project of Heydon Pickering, and the pilot episode is out there already. Just don't drink or eat anything while you watch it. Trust me!

- [Webbed Briefs](https://briefs.video/)

***

## Wrapping things up

That's it for this issue. Have a great and productive week, keep yourselves safe, and I will see you next time!