search

Devographics / surveys

YAML config files for the Devographics surveys
45 stars 8 forks source link

State of CSS 2024 Preview #245

Open SachaG opened 3 months ago

SachaG commented 3 months ago

Survey Preview

Previous Discussion Thread

New Additions

Removals

CSS Features

Other Questions

Under Consideration

Discrete property animations

Discrete property animations/@starting-style/transition-behavior all seem important but under which nomenclature do we include these features?

Maths Functions

Which do we include between:

nth-child of s

What is the best/least confusing name for that feature?

SachaG commented 3 months ago

Since we added scroll-timeline, maybe we should also add view_timeline?

SachaG commented 3 months ago

I'm going to remove ::marker, seems quite niche compared to some other more important features.

SachaG commented 3 months ago

Also removing individual transform properties for the same reason.

Kilian commented 3 months ago

The appearance property might be too niche, but I think it'd be interesting to see under other features as a gauge for how many people replace existing form elements rather than piling divs.

Maybe too new, but reading-flow under accessibility since it solves a specific but large problem.

I would remove touch-action for being too niche, and replace it with @starting-style (under interactions, since view-transitions are there too) which is new, but also solves a specific but large problem.

SachaG commented 3 months ago

replace it with @starting-style (under interactions, since view-transitions are there too) which is new, but also solves a specific but large problem.

I added discrete_properties_animations as a catch-all for @starting-style and transition-behavior. Would that work?

tylersticka commented 3 months ago

Two quick suggestions:

(I didn't mean to focus on typography, but most of the other stuff in my wish list is already accounted for in the survey or still only a working group discussion.)

SachaG commented 3 months ago

I'm switching css_interoperability_features and css_missing_features to freeform inputs instead of predefined lists to avoid any biasing. We don't have that many other freeform questions so it should be fine.

SachaG commented 3 months ago
bfgeek commented 3 months ago

field-sizing: content[1] might be good to get some signal on.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing

jgraham commented 3 months ago

So in general, our feedback is that we'd like to apply similar criteria as mentioned in the State of HTML feedback.

We'd also like to understand where/why people aren't using new features e.g using float instead of grid or flexbox, or where people are using framework features rather than native alternatives e.g. framework variables instead of CSS variables.

However I realise that's quite open-ended feedback for this stage in the process; I'm really mentioning how we're thinking about this for next time around.

More concretely:

argyleink commented 3 months ago

some other additions? (sorry for showin up late)

I see line-clamp on there, but it's the old syntax and soon we'll have a modern 1 line replacement without all the oddities. maybe next year this will be on there instead of the display: -webkit-box; version?

SachaG commented 3 months ago

We'd also like to understand where/why people aren't using new features e.g using float instead of grid or flexbox, or where people are using framework features rather than native alternatives e.g. framework variables instead of CSS variables.

I suspect the majority of it would be due to thinking (whether true or not) that new features aren't well-supported yet. Beyond that I think we'll have to rely on the comment field to get more qualitative data.

I couldn't find :user-valid or :user-invalid in the survey

These are in the State of HTML survey. Do we want to bring them over?

We could consider having an open-ended question about CSS processors and frameworks, like "Which features of these tools and frameworks do you particularly value?"

That might be a bit too open-ended… What I've realized it that open-ended questions work best when the answers all belong to a single identifiable category. So for example "what is your favorite new CSS feature?" would work fine as a freeform textfield because we can easily pattern-match after. But "What do you value most about UI frameworks?" would probably result in a lot of different concepts, all with different wordings.

text-box-trim and text-box-edge anchor() :popover-open ...

As far as adding other features, we already have 60 (!) in the survey at it is, so I don't think we can add more unless we remove some first.

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?). Could this be maybe combined with browser stats and/or github stats to get an idea of actual usage in the wild for each feature? This way we would be able to rank all new features and prioritize the ones that seem more "important" (although I realize there might also be important features that people aren't using, so it's not a perfect proxy).

jgraham commented 3 months ago

These are in the State of HTML survey. Do we want to bring them over?

If we're concentrating all the forms stuff in State of HTML that's fine.

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?).

Correct.

Could this be maybe combined with browser stats and/or github stats to get an idea of actual usage in the wild for each feature?

Browser stats turn out to be surprisingly hard to interpret e.g. is a popular analytics library starts using a feature for browser fingerprinting then it can look like very high usage, whereas in fact no sites would break if the feature was removed. It's possible that's less of a problem for CSS features, but I'm not sure.

In any case pre-filtering by assumed usage seems somewhat possible, but deciding the right measure of "importance" is hard. The value proposition of asking about features that have shipped is to validate that we're solving real user problems, and haven't left significant rough edges in real world situations. Only asking about things where we know there's wide use biases you toward things that work well, whereas asking about things that aren't used can't provide much useful data. Instead, most of the actionable data is for things in the middle where there's enough usage to get user feedback, but not so much that it's already clear that the feature is a success (and significant concerns are likely to come out in other forums like long-form articles).

foolip commented 3 months ago

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?).

Correct.

Yep. The data itself is maintained in https://github.com/web-platform-dx/web-features and is also exposed on https://webstatus.dev/.

We are working on adding use counters for features shipped since 2020, but that won't be ready until the end of the year I think. As @jgraham points out there are complexities in interpreting usage numbers, but within an area like CSS I expect that comparing the usage of one property to another will usually make sense.

SachaG commented 3 months ago

I'm not necessarily saying that usage is the best metric, it's just that right now I don't really have a good heuristic to pick one feature over another besides "this seems like something that might have an impact in a few years"…

Maybe another approach could be to have some kind of rotation. So for example one year we'd ask about math functions, but the next we'd focus on typography instead. The downside is that you then lose a year of data for things that might be important… So yeah I don't really have a good solution…

b1tr0t commented 3 months ago

Under CSS usage:

SachaG commented 3 months ago

@b1tr0t those are interesting, thanks! But I don't think people know what did or didn't come out in the past 2 years, it's kind of hard to quantify… Maybe we can just ask something simpler, such as "what is your favorite new CSS feature?". Although we can also kind of get this data in aggregate by looking at sentiment scores.

SachaG commented 3 months ago

Added two more questions:

Screenshot 2024-08-08 at 17 31 57 Screenshot 2024-08-08 at 17 31 44
SachaG commented 3 months ago

By the way, I've decided to launch the survey on August 17. And the State of HTML will follow on September 10. So we can also start working on that one as well:

https://github.com/Devographics/surveys/issues/235

I'll get the preview up soon.

SebastianZ commented 3 months ago

I know I'mquite late for this survey, though here are my notes, anyway. Maybe they might be considered for the next one.

I still find the description of sections a bit vague, sometimes. Would it be possible to add some clarifying tooltips or a description in the right sidebar above the "Reading List"? E.g. when should people actually choose "Used it" regarding new features? Would it be enough if they saw it in scribble/demo and played around with it?

The reading list and the examples for features are great, though sometimes people don't remember if they heard about a feature already or even used it. So it might be worth giving a short description for them inline.

The reading list feature should be restricted to areas in which people can actually learn more about them. E.g. the option should be removed from questions like "How many people work at your organization, including yourself?". (At least unless you come up with a magic way to get those numbers for that person.🙃)

design_methodology and favorite_new_features are still missing proper phrases.

"How long have you been working or studying in this field, in years?" should provide list of ranges like the other questions in this category.

Sebastian

captainbrosset commented 3 months ago
  • https://captainbrosset.github.io/web-features-explorer/recent/ has a list of features that recently became available in all browsers. I haven't done a complete audit, but I couldn't find :user-valid or :user-invalid in the survey; they seem important given the interest in forms. Maybe also contain-intrinsic-size?

Please use this URL going forward: https://web-platform-dx.github.io/web-features-explorer/recent/ The initial version of the same website, on my captainbrosset.github.io domain, was an early exploration which is now outdated. I will add a redirect to the new URL to avoid any confusion.

SachaG commented 3 months ago

The reading list feature should be restricted to areas in which people can actually learn more about them. E.g. the option should be removed from questions like "How many people work at your organization, including yourself?". (At least unless you come up with a magic way to get those numbers for that person.🙃)

Good catch! That was a bug, fixing it now.

SachaG commented 3 months ago

The survey is now live!

https://survey.devographics.com/en-US/survey/state-of-css/2024

I know we had to leave out a lot of important features, but I think capping the survey at 60 features is probably best… Thankfully there's always the State of HTML survey!

captainbrosset commented 3 months ago

@SachaG I still see the "preview" banner when I go to that URL. Is that intended? image

scottkellum commented 3 months ago

text-box-trim and text-box-edge would be things I want to see in the Typography section.

SachaG commented 3 months ago

@captainbrosset sorry, cache invalidation and all that… should be ok now!

@scottkellum let's save them for next year!