What’s New In CSS?

At the excellent Web Directions Hover ’21, Adam Argyle opened with a rad presentation covering all what’s new and upcoming for CSS.

From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness.

Expect things such as Container Queries, CSS Scroll-Timeline, Spelling Features, CSS Nesting, CSS Layers, Grid Masonry, Houdini Paint, @property, aspect-ratio, etc. 🔥🔥🔥

You can find the slides embedded above, or review them here.

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)

Yesterday I was invited to speak at CSS Café, with a talk covering Scroll-Linked Animations with CSS @scroll-timeline. The meetup was organised using Zoom, and I think about 50-ish people attended (must say I wasn’t keeping track of that whilst speaking).

~

# Slides

You can find the slides embedded below:

~

# Source Materials & Demos

Source materials for the slides are my two posts on Scroll-Linked Animations:

  1. Part 1: Intro + Basic Scroll-Linked Animations
  2. Part 2: Scroll-Linked Animations with Element-Based Offsets

All shown demos and visualizations can be found on CodePen, and are gathered in these collections:

  1. Scroll-Linked Animation Demos: Visualizations
  2. Scroll-Linked Animation Demos: Part 1
  3. Scroll-Linked Animation Demos: Part 2

~

# Video

The whole talk was recorded too, and is embedded below. Unfortunately my camera feed wasn’t recorded along with that, so there’s some small loss of information as you can’t see my hands move as I explain some things (such as rotations).

~

# In-Closing

Thanks to organisers Schepp and Nils for having me, and thanks to the attendees for watching me speak. Based on the initial feedback, it seems many of you liked it 🙂

Apart from getting a positive vibe from presenting itself, it was also great to finally meet some people who I’ve been following on Twitter for quite a while now.

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Accessibility in Design Systems

Good slidedeck by Benno Lœwenberg:

We all are only sometimes abled. Therefore accessible solutions benefit everybody. Treating accessibility not just as an afterthought to comply with regulations, but as an essential UX factor right from the start can lead to building better products and services.

This talk is about how to lay an accessible foundation within a design system to enable accessibility. It also covers what to start with, which aspects to take care of and the toolbox needed, using tangible examples (and cool graphics) to generate an instant understanding.

Accessibility in Design Systems →

There’s something ironic about these slides being hosted on SlideDeck though, as doing so makes them inaccessible …

Thankfully there’s a way to download the original slides (PDF)

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Conf Colombia)

I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!).

You can find the slides embedded below:

Source materials for the slides are my two posts on Scroll-Linked Animations:

  1. Part 1: Intro + Basic Scroll-Linked Animations
  2. Part 2: Scroll-Linked Animations with Element-Based Offsets

Thanks to the organisers for having me, and thanks to the attendees for watching me speak. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Learning from W3C MiniApps

Recently the W3C announced MiniApps:

MiniApp as a new form of mobile application, leveraging both Web technologies (especially CSS and JavaScript) as well as capabilities of native application.

I was a bit confused about them at first, and thought they were directly competing with PWAs. Thankfully Thomas Steiner chimed in, referring to a whole presentation on MiniApps he made.

Enlightening stuff. A video recording + transcript are also available.

Learning from MiniApps: Slides →
Learning from MiniApps: Video + Transcript →

When in doubt, trust the browser

Presentation by Pieter Beulque, as given at the most recent FronteersBE meetup, in which he builds a Tweet Embed using Web Components’ Custom Elements.

As a front-end developer, you’re always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API’s instead of reaching for the latest framework or library.

💡 To format the time, he uses the previously covered Intl.RelativeTimeFormat API, which will be part of ES2020.

When in doubt, trust the browser →

Demystifying the future of CSS with sparkles of JS

At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini.

CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to expand and polypill language, all while keeping the performance at an up-high. All hail Houdini!

The talk itself has a very nice build-up, and Ibe’s a great speaker. Highly recommended!

Demystifying the future of CSS with sparkles of JS →

V8 internals for JavaScript developers: Arrays

This presentation demonstrates how learning just a little bit about JavaScript engine internals can help you improve the run-time performance of your JavaScript code — not just in V8 specifically, but across all JavaScript engines!

A written version is also available.