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.
Do you remember CSS Zen Garden? 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.
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. You might know her better as the author of 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:
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.
Here are the main features that come with this version:
- 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
- Web Animations API improvements in Chromium 84
- What's New In DevTools (Chrome 84)
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.
- What's new in DevTools (Microsoft Edge 84)
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
The full article is available using the link below:
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.
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.
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 at 20:00 EEST).
You might also want to subscribe to the YouTube channel at 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. As always, your support is highly appreciated.
Have a great and productive week, keep yourselves safe and I will see you next time!