“On the origin of cascades“, a talk by @hdv on how CSS came to be

Hidde recently gave a talk at CSS Café on the origins of CSS:

It’s been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. The cascade, specificity and the enormous choice in values and units set the language up for success. But not everyone liked to use these features everywhere. Some began to adapt the language to meet their needs.

In this Darwin-themed talk, you’ll learn how CSS came to be, and how the language’s simplicity and flexibility still make it stand out today.

In addition to the video embedded at the top of this post you can also check out the slides or read a full transcript.

👨‍🎓 Looking for more lessons in CSS History? The Languages Which Almost Became CSS by Zach Bloom also touches the same subject.

Enhancing User Experience With CSS Animations

Great talk by Stéphanie Walter (starting at 39:00):

With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need to be careful about to build inclusive and accessible motion and avoid making some people sick.

Be sure to check the post on her website too, as it contains a full writeup, videos, examples, slides, links to extra resources, etc.

Enhancing User Experience With CSS Animations →

Blind Spot

While working with CCTV cameras in a project, I was reminded of this short film from 2007:

You Can’t Stop Us | Nike

😲 Stunning editing work!

10 Modern Layouts in 1 Line of CSS

Already making rounds on Twitter last week, but now the video’s been released too:

In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.

Ten modern layouts in one line of CSS →
1-Line Layouts Demo Site →

New in Chrome 84

Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through:

Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from origin trial. There are new origin trials for Idle detection and SIMD. And there’s a whole bunch more. Let’s dive in and see what’s new for developers in Chrome 84!

I’ve written about the Wake Lock API before, which has been part of Chrome’s Origin Trials since Chrome 79.

New in Chrome 84 →

JavaScript Yellow

Back in November I was invited to speak at Full Stack Europe 2019. At the conference I was scheduled to do a pre-conference workshop on React and a lightning talk named “JavaScript Yellow”. Last week the video said talk got released:

References:

Thanks again to the organisers for having me 🙂

😅 In the end, I ended up doing a full talk on ESNext: Proposals to look forward to too, as one of the originally planned speakers unfortunately couldn’t make it after all.

How To Crash An Airplane

A talk by Nickolas Means, as recorded at Fronteers 2018 (which I attended).

On July 19, 1989, United Airlines Flight 232 was en route to Chicago when a mechanical failure caused the plane to become all but uncontrollable. In this unsurvivable situation, the flight crew saved more than half of those onboard. How did they do it?

Flight crews and software teams have a lot in common, and there’s much we can learn from how the best crews do their jobs. What can we learn from the story of United 232? While this talk won’t earn you your pilot’s license, you’ll definitely come away with some fresh ideas on how to make your team even more amazing.

If the audio is bothering you (there seems to be a bit of an audio loop in there?), there’s this rendition from 2016 that you might enjoy instead:

Recoil – An Experimental State Management Library for React

Recoil is the State Management Library for React they use at Facebook.

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously

Best to watch the talk from React Europe 2020 embedded above. It clearly explains why Recoil come to exist, and when & how to use it.

If you’ve ever used MobX it might all sound a bit familiar. This Twitter Thread by the MobX author is worth a quick read.

Recoil →

Unreal Engine 5

Unreal Engine 5 empowers artists to achieve unprecedented levels of detail and interactivity, and brings these capabilities within practical reach of teams of all sizes through highly productive tools and content libraries.

Whether you’re a gamer or not, I think we can all agree that this is very impressive stuff! 🤯