
CSS Triggers - robin_reala
https://csstriggers.com/
======
notjustanymike
Let's talk data vis for a minute. The three values are sequential, so there's
no need for tic-tac bar charts on every item. There's also no need for two
colors in the same chart, that's just more cognitive load. Something like this
is crying out for a heat map, so you can quickly scan.

Here's my take after some quick hacking:
[https://i.imgur.com/w4AkvQb.png](https://i.imgur.com/w4AkvQb.png)

~~~
antibland
Accessibility guy here. Don't forget that color blind/low vision users are
going to have a tough time parsing meaning from that table. Color shouldn't be
solely responsible for conveying informational meaning. Consider pairing color
with another visual indicator like an icon.

~~~
notjustanymike
Hi Accessibility guy! I haven't had a chance to work directly with someone in
this field, so this'll be fun.

Quick experiment - changing border-size, border-radius, and intensity.
Basically things get darker and more filled in the higher the level of
consequence. Would this fly for the vision impaired?

[https://imgur.com/V4J3B8V](https://imgur.com/V4J3B8V)

~~~
antibland
I think the problem is how subtle the gradation/intensity can be between
steps. Icons may not honor the aesthetic you are aiming for, but they manage
(with a labelled legend) to get the job done of explaining this table for
every user.

~~~
notjustanymike
My concern is scan-ability. Introducing icons introduces shapes, which in turn
increase cognitive load. On a layout like this, simplicity is key in order for
users to process all the information. I did experiment with Gestalt principles
(I've always wanted to say that!) and created a flat black line that rotates
in 45 degrees increments for levels of difficulty. Seemed to tick off the
basic vision impaired requirement - single color, no intensity changes, and
works in B&W (Something all data vis is supposed to do).

This has been fun!

------
HugoDaniel
Two things to keep in mind:

\- This is a google chrome project

\- Hasn't been updated in 2 years [gecko ~1 year] (which is a LOOONG way ago
in browsers time)

[https://github.com/GoogleChrome/css-
triggers/tree/master/dat...](https://github.com/GoogleChrome/css-
triggers/tree/master/data)

~~~
diggan
It's under GoogleChrome on Github but readme mentions it's not a Google
project.

> Please note: this is not a Google product

~~~
gsnedders
Virtually every tool produced by individual Google teams has that disclaimer
unless it is actually marketed as a Google product.

~~~
brandon
Also individual Googlers who want to open source their work without going
through the copyright assignment paperwork.

A lot of the projects bearing that disclaimer are passion projects done 100%
outside of work hours.

------
warpech
Why is this important:
[https://developers.google.com/web/fundamentals/performance/r...](https://developers.google.com/web/fundamentals/performance/rendering/)

TL;DR rendering performance

~~~
littlestymaar
You should take these advices with a grain of salt because it refers to the
_legacy_ rendering pipeline used by current web browers.

There is not absolute rule stating that layout and painting must be slow while
compositing is not. In fact Mozillians are currently working on a new
rendering pipeline[1] based on state of the art rendering tools[2]. This new
pipeline should be deployed in firefox in 2018 as a part of the ongoing
Quantum project.

[1] [https://github.com/servo/webrender](https://github.com/servo/webrender)

[2]
[https://m.youtube.com/watch?v=BTURkjYJ_uk](https://m.youtube.com/watch?v=BTURkjYJ_uk)

~~~
striking
Yeah, but it makes sense to follow it now, as it affects us now and will
continue to do so through at least 2018, until everyone has updated their
renderer.

------
rubber_duck
Looks like a nice reference for optimizing layout - haven't done much of that
but I'll save this if I ever need to.

One note - the color scheme/presentation on the bars is kind of confusing
(what do white bars mean vs. faded out bars ? I'm assuming one is no results
and the other is not triggered ?)

~~~
maaaats
Wondering the same. Is gecko just very good or is it no data?

A few sentences on top explaining what one is looking at and what it means
would be a good idea.

------
blue1
An explanation of what this is would be good.

~~~
robin_reala
Using certain CSS properties will trigger various phases of rendering in
browsers. For performance reasons you want to do the minimum amount of work
possible.

An example: adjusting the width of an object will understandably cause the
browser to relayout the page in every browser. But what if you just wanted an
animated bounce effect? You could animate the width of the object, but in
practice a scale transform would perform much better in most browsers as it
typically doesn’t trigger a relayout.

So this page just gives you information about which phases are triggered by
which properties in which rendering engines.

~~~
shangxiao
I believe blue1 meant that the page could do with a short explanation at the
top… I was wondering the same thing until I realised what it was about.

------
warpech
What is the method of collecting this information? Lecture of
[https://github.com/GoogleChrome/css-
triggers/issues/21](https://github.com/GoogleChrome/css-triggers/issues/21)
shows that it might not be accurate.

------
pagnol
I would be interested in finding a way to include this information when I edit
css/sass in Emacs. Is there something I could use or would I need to write a
new minor mode myself? (I have been using Emacs for some time now but rarely
write any elisp myself.)

------
chrisallick
When you tap the header status bar on mobile safari this site doesn’t scroll
back to top. Why?

------
nkjoep
That would be useful if integrated with caniuse.com.

Overall you'll learn everything will trigger everything.

------
rocky1138
Cool website. I just wish it didn't break my back button.

~~~
lol768
Yeah, it completely abuses history.pushState...

------
weego
If you're spending time worrying about this you're either working on an
incredibly mature product with nothing other than micro-optimisations left as
business requirements, or you don't understand opportunity cost.

~~~
jaffathecake
Per-frame layout (and sometimes paint) is the main cause of janky animation in
browsers, especially mobile.

