CSS Triggers | Hacker News Reader

CSS Triggers

csstriggers.com

133 pointsrobin_reala32 comments

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

This is a huge improvement. The original took me awhile to wrap my mind around because it uses more dimensions than the data actually has axes - your reduction to a single dimension of dot shading is a much tighter mapping.

Thanks! Considering it took 5 minutes in dev tools, I can probably fork it this weekend :)

Yours is much, much nicer. But it doesn't match the original chart. align-content in Gecko, for example. The multi-color tic tac charts says that it doesn't trigger anything on subsequent updates, but your chart says layout is triggered.

Mine's just a dev tools hack (literally just changed some CSS classes around), so the obvious solution for mine would to not show a circle.

I've never been a fan of traffic light style visualizations, which show a shape even when there's no value. The empty tic-tacs in the original do this, and prevents any advantage in parsing the vis you'd get from cognitive dissonance of the shapes. Not showing a shape when there's no data is the correct solution.

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.

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

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.

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!

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...

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

> Please note: this is not a Google product

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

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.

It is a Google project, not a Google product.

Why is this important: https://developers.google.com/web/fundamentals/performance/r...

TL;DR rendering performance

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

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

Seems hardly legacy if it's the rendering pipeline used in all browsers' current release versions.

(and I say this as a WebRender enthusiast)

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.

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 ?)

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.

An explanation of what this is would be good.

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.

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.

The people who need to know this will understand what it is immediately, but I agree that a one-liner at the top couldn't hurt.

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

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.)

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

That would be useful if integrated with caniuse.com.

Overall you'll learn everything will trigger everything.

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

Yeah, it completely abuses history.pushState...

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.

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

Reply on news.ycombinator.com