The new CSS Zen Garden, Chromium 84 updates and Rachel Andrew's CSS news for July | Front End News
Tags: news, frontendnews
Published: 2020-07-21 19:56:59

Hello everyone and welcome back to another episode of Front End News. I do hope you will find the following topics both interesting and useful.

***

## Style Stage

Do you remember [CSS Zen Garden](http://www.csszengarden.com/)? It was back in the day when IE6 was the uncontested winner of the Browser War and the Web Standards were in their infancy. For many years it was the poster-child project of what it can be done with the power of CSS.

![Style Stage homepage](https://dev-to-uploads.s3.amazonaws.com/i/nym9bhmqm7634m0ha7zm.png)

Seven years after no more submissions were accepted, we get the spiritual sequel of the Zen Garden. Named Style Stage, this project is the brainchild of [Stephanie Eckles](https://dev.to/5t3ph). You might know her better as the author of [ModernCSS.dev](https://moderncss.dev/), a collection of modern CSS solutions for age-old developer problems.

We have now unmatched access to CSS properties and techniques, as well as awesome support in all the major browsers. Yet few commercial projects use Flexbox and even fewer use CSS Grid. This project gives developers a chance to flex their CSS muscles. More details are available on the site itself and the announcement Stephanie made on Dev.to:

- [Style Stage website](https://stylestage.dev/)
- [Announcing Style Stage: A Community CSS Showcase](https://dev.to/5t3ph/announcing-style-stage-a-community-css-showcase-28cp)

***

## Chromium 84 update

Chromium 84 arrived on computers all over the world last week. Both Google Chrome and Microsoft Edge updated their stable channels and you should do that as well. Let's see then what's new to this version.

### What's new in Chrome 84

Here are the main features that come with this version:

![App icon shortcuts for Twitter's PWA](https://dev-to-uploads.s3.amazonaws.com/i/42328y4i4te5atvyqteh.png)

- App Icon Shortcuts allow users to start common tasks in your PWA
- Web Animations API now supports new features. Una Kravets and Kevin Ellis made a whole dedicated article to this topic and you can find using the links below.
- Stop the screen from dimming or locking using Wake Lock
- You can reveal content that is available offline with the Content Indexing API

All this and more is available in the article linked below. I've added the older articles as well if you want to refresh your knowledge.

- [What's new in Chrome 84](https://developers.google.com/web/updates/2020/07/nic84)
- [Web Animations API improvements in Chromium 84](https://web.dev/web-animations/)
- [What's New In DevTools (Chrome 84)](https://developers.google.com/web/updates/2020/05/devtools)

### Microsoft Edge Stable Channel

Microsoft Edge release notes are a bit more technical (and cryptical). Here are the highlights:

- Full mouse support when using the full-screen mode
- You can add nicknames to the debit or credit cards you have saved
- Collections are faster and you can personalize them better

The details are available using the link below. I'm also linking back to the DevTools article from May for your convenience.

- https://docs.microsoft.com/en-us/DeployEdge/microsoft-edge-relnote-stable-channel#version-84052240-july-16
- [What's new in DevTools (Microsoft Edge 84)](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2020/05/devtools)

***

## Rachel Andrew's CSS News for July 2020

Next, we have a news item I can't believe I missed when it went live. We got a comprehensive article on new CSS features from Rachel Andrew and Smashing Magazine. We got details on each property, with running examples, making this not just a news article, but an educational one as well.

Here are the features listed:

- flexbox gap (and the new features supported by Firefox)
- aspect ratio unit
- native masonry support
- subgrid

The full article is available using the link below:

- https://www.smashingmagazine.com/2020/07/css-news-july-2020/

***

## Software updates and releases

Here are the updates and releases for this edition. In each case, you can find the full details in the release notes linked down below.

### Tailwind CSS v1.5.0

- https://blog.tailwindcss.com/tailwindcss-1-5

### Safari Technology Preview 110

- https://webkit.org/blog/10929/release-notes-for-safari-technology-preview-110/

### Vue 3 RC

- https://github.com/vuejs/rfcs/issues/189

### Motion v2.0.0 and 2.1.0

- https://github.com/framer/motion/blob/main/CHANGELOG.md#200-2020-07-15

### currency.js v2.0.0

- https://github.com/scurker/currency.js/releases/tag/v2.0.0

### Apollo Client 3.0

- https://www.apollographql.com/blog/announcing-the-release-of-apollo-client-3-0/
- https://github.com/apollographql/apollo-client/releases/tag/v3.0.0

### billboard.js 2.0

- https://github.com/naver/billboard.js/releases/tag/2.0.0

### React Native 0.63

- https://reactnative.dev/blog/2020/07/06/version-0.63


***

## Interesting things worth having a look at

I also stumbled upon the following news items and I think they were way too interesting to be ignored, but they were also not fitting in the normal episode structure.

### Front End Interview Handbook

- https://yangshun.github.io/front-end-interview-handbook/

![Front End Interview Handbook](https://dev-to-uploads.s3.amazonaws.com/i/3gevbcd6b833q9g2iro1.png)


***

That's all there is in this edition. If you want a front-row seat to the selection process for the next episode, join me on Twitch every Saturday (go to [twitch.tv/frontendnexus](https://twitch.tv/frontendnexus) at 20:00 EEST). 

You might also want to subscribe to the YouTube channel at [https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww](https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww). I am working on bringing you new content there, such as the recent interview with Katie Fenn on [the power of developer communities](https://youtu.be/Faex1wmM43w). As always, your support is highly appreciated.

Have a great and productive week, keep yourselves safe and I will see you next time!