search

HTTPArchive / almanac.httparchive.org

HTTP Archive's annual "State of the Web" report made by the web community
https://almanac.httparchive.org
Apache License 2.0
610 stars 168 forks source link

CSS 2021 #2140

Closed rviscomi closed 2 years ago

rviscomi commented 3 years ago

Part I Chapter 1: CSS

CSS illustration

If you're interested in contributing to the CSS chapter of the 2021 Web Almanac, please reply to this issue and indicate which role or roles best fit your interest and availability: author, reviewer, analyst, and/or editor.

Content team

Lead Authors Reviewers Analysts Editors Coordinator
@meyerweb @geekboysupreme @meyerweb @j9t @svgeesus @argyleink @una @estelle @LeaVerou @rachelandrew @jabranr @tomhodgins @rviscomi @thecraftysoul - @rviscomi
Expand for more information about each role - The **[content team lead](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Content-Team-Leads'-Guide)** is the chapter owner and responsible for setting the scope of the chapter and managing contributors' day-to-day progress. - **[Authors](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide)** are subject matter experts and lead the content direction for each chapter. Chapters typically have one or two authors. Authors are responsible for planning the outline of the chapter, analyzing stats and trends, and writing the annual report. - **[Reviewers](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Reviewers'-Guide)** are also subject matter experts and assist authors with technical reviews during the planning, analyzing, and writing phases. - **[Analysts](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Analysts'-Guide)** are responsible for researching the stats and trends used throughout the Almanac. Analysts work closely with authors and reviewers during the planning phase to give direction on the types of stats that are possible from the dataset, and during the analyzing/writing phases to ensure that the stats are used correctly. - **[Editors](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Editors'-Guide)** are technical writers who have a penchant for both technical and non-technical content correctness. Editors have a mastery of the English language and work closely with authors to help wordsmith content and ensure that everything fits together as a cohesive unit. - The **[section coordinator](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Section-Leads'-Guide)** is the overall owner for all chapters within a section like "User Experience" or "Page Content" and helps to keep each chapter on schedule. _Note: The time commitment for each role varies by the chapter's scope and complexity as well as the number of contributors._ For an overview of how the roles work together at each phase of the project, see the [Chapter Lifecycle](https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Chapter-Lifecycle) doc.

Milestone checklist

0. Form the content team

1. Plan content

2. Gather data

3. Validate results

4. Draft content

5. Publication

Chapter resources

Refer to these 2021 CSS resources throughout the content creation process:

📄 Google Docs for outlining and drafting content 🔍 SQL files for committing the queries used during analysis 📊 Google Sheets for saving the results of queries 📝 Markdown file for publishing content and managing public metadata

j9t commented 3 years ago

Interested and available as a reviewer.

GeekBoySupreme commented 3 years ago

Interested and available as an author. Can double up as an Editor/Reviewer (if necessary)

rviscomi commented 3 years ago

📟 Paging CSS 2020 crew: @LeaVerou @svgeesus @rachelandrew @fantasai @mirisuzanne @catalinred @dooman87 📟 Paging CSS 2019 crew: @una @argyleink @meyerweb @huijing

Would any of you be interested to contribute to the CSS 2021 chapter? I'd especially like to see more 2019/2020 authors become 2021 reviewers to help ease the transition and similarly I think prior reviewers would make great 2021 authors, being familiar with the process already. And prior analysts would make excellent 2021 analysts 😁

Or is there anyone new you'd like to see?

svgeesus commented 3 years ago

I'm happy to contribute again as author or, if there are many excited new authors, as reviewer.

argyleink commented 3 years ago

I'll be a reviewer 🙂

una commented 3 years ago

Happy to review!

On Thu, May 6, 2021 at 2:21 PM Adam Argyle @.***> wrote:

I'll be a reviewer 🙂

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HTTPArchive/almanac.httparchive.org/issues/2140#issuecomment-833753919, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAM5L3HFPGXU53WAFDDQFJLTMLMY7ANCNFSM43UFMBXA .

rviscomi commented 3 years ago

@svgeesus would you be open to being the content team lead and drive the content planning/writing? You can coauthor with @GeekBoySupreme and anyone else who may be interested.

estelle commented 3 years ago

Please add me to the list of reviewers.

LeaVerou commented 3 years ago

I can review!

rachelandrew commented 3 years ago

I can review.

rviscomi commented 3 years ago

@meyerweb thanks for your interest in authoring this chapter! As the content team lead, you'll be responsible for the scope and direction of the chapter and keeping it on schedule. We automatically monitor the staffing and progress of each chapter based on the state of the initial comment so please keep that updated as you add new contributors and meet each milestone.

We've created a Google Doc for this chapter, which you're encouraged to use to collaborate with the content team on the initial outline, metrics, and ultimately the final draft.

Next steps for this chapter are:

There's not currently a section coordinator for this chapter, so I'll be periodically checking in with you directly to make sure the chapter is staying on schedule. Reach out here in this issue if you have any questions about the process.

More information about the content team lead and author roles and responsibilities are available for reference in the wiki if needed.

To anyone else interested in contributing to this chapter, please comment below to join the team!

jabranr commented 3 years ago

@rviscomi Interested and available as a reviewer

meyerweb commented 3 years ago

looks at reviewer list breaks into cold sweat

tomhodgins commented 3 years ago

Howdy, I'm willing/able to help out where it's needed, if it's needed!

rviscomi commented 3 years ago

Welcome @jabranr @tomhodgins! I'll defer to @meyerweb as content team lead to onboard you and update the role assignments in https://github.com/HTTPArchive/almanac.httparchive.org/issues/2140#issue-868435575. For now please request edit access to the chapter doc and add your thoughts/ideas to the outline.

Also, added myself as an analyst again but happy to share that with anyone if interested.

rviscomi commented 3 years ago

@meyerweb are you able to edit the top comment to update the list of reviewers and check off the 0th milestone?

meyerweb commented 3 years ago

Author and reviewer volunteers added — welcome, all! If I missed anyone, please let me know.

This is a good time to wish for things to analyze and talk about in CSS. @bkardell had a great suggestion in the accessibility issue:

it strikes me that in neither the CSS nor Accessibility chapters in 2019/2020 is there any analysis on focus stying (including the disabling of) which is very relevant to a lot of conversations and would be great to have more facts on

What else? Anything that hasn’t been done in the past that should be? Anything that’s been done in the past we should drop? Let’s hear ’em!

meyerweb commented 3 years ago

As a starting point for everyone, I’ve created a draft outline for the chapter on https://docs.google.com/document/d/18OV1ngkQxdJdENkYzHOdNRtzMLo1vVv9Tg6a9pGfSSE with some proposed additions and hanging questions.

thecraftysoul commented 3 years ago

Interested as analyst

rviscomi commented 3 years ago

Welcome @thecraftysoul! To get started:

@paulcalvano will be able to get you set up on our BigQuery project to ensure that all of your analysis is covered by us. Slack would be the best place to reach out if you have any analysis questions, otherwise for any chapter-specific questions, @meyerweb is the team lead and can assist you here on GitHub or in comments in the doc.

meyerweb commented 3 years ago

Here are the custom metrics we’ve so far thought about adding to the metrics collected for 2020 (apologies if I missed any in 2020 and have thus duplicated them here):

Anything else anyone can think of? You can see the full list over at Google Docs.

rviscomi commented 3 years ago

Reviewers (@j9t @svgeesus @argyleink @una @estelle @LeaVerou @rachelandrew @jabranr @tomhodgins) reminder to please request edit access to the doc and leave your feedback on the chapter outline. I'll try to add everyone whose email I already know.

j9t commented 3 years ago

(Had checked the doc last week—LGTM—, will keep monitoring this thread.)

LeaVerou commented 3 years ago

@meyerweb We should look into @property usage (% of pages using, median rules pp, stats about types, inherits, initial values), that's probably the hottest thing that happened to CSS in the past year.

meyerweb commented 3 years ago

@meyerweb We should look into @property usage (% of pages using, median rules pp, stats about types, inherits, initial values), that's probably the hottest thing that happened to CSS in the past year.

Excellent suggestion; added. Thank you!

meyerweb commented 3 years ago

Thank you to everyone who’s added ideas on the Google Doc. I’ve responded to most and made changes accordingly, but did leave questions or comments on a few (@una @svgeesus @rviscomi). If you haven’t weighed in yet, there’s still a little time, so please do, either here or on the Google Doc.

rviscomi commented 3 years ago

@meyerweb the outline is looking great and your list is really helpful to see what has changed since last year. It doesn't look like we'll need to add anything to the test pipeline at runtime. AFAICT everything can be measured using existing post-processing analysis, so we should be good to go. If you're happy with it you can check off Milestone 1 above.

If anyone can spot a new metric that does depend on custom runtime metrics (querying the DOM, for example) please let me know!

rviscomi commented 3 years ago

FYI all contributors: @GeekBoySupreme @meyerweb @j9t @svgeesus @argyleink @una @estelle @LeaVerou @rachelandrew @jabranr @tomhodgins @thecraftysoul

I've created a #web-almanac-css channel on Slack to help us coordinate on chapter progress. Join us!

Analysis update: in #2306 I've ported all 100+ 2020 queries over to 2021. I'm working on a way to automatically run the queries and export the results to Sheets. There are so many queries that I think it's faster to automate it than run each one individually 😅. I'll ping the group once the results are available for review.

@thecraftysoul there are a few metrics that are new to 2021. Would you be interested to work on some of those? If so let's coordinate on Slack.

rviscomi commented 2 years ago

All of the ~120 metrics from 2020 have been rerun and the results are available for review in the chapter sheet. I'm still working on analyzing the 2021-specific metrics but needless to say there's already a ton of data ready to review.

Could you all take a look and leave a comment (request edit access if needed) if you see anything unexpected? With this much data it'll be a big help if we have multiple people reviewing it. Thanks everyone! 🙏

meyerweb commented 2 years ago

I reviewed and left some comments. I still owe you some feedback on your questions about the new metrics, and hope to have those answers to you by the end of the week.

meyerweb commented 2 years ago

How to look for CSS Ruby usage:

meyerweb commented 2 years ago

How to identify use of a library

rviscomi commented 2 years ago

Thanks @meyerweb this is really helpful.

For CSS Ruby usage, are you only interested a stat like "X% of pages use CSS Ruby" or are you looking for a breakdown of usage for each property and display value, like "X% of CSS Ruby pages use ruby-position, Y% use ruby-align, etc"?

For library detection, it looks like all of them are supported by Wappalyzer in the UI Frameworks category plus several others. I'm not sure how closely their detections match your suggestions, but it's open source so we could find out if needed. Would it work for you if we use those readily available detections?

meyerweb commented 2 years ago

Are they analyzing the same data corpus we are? If so, I’m happy to use their data. If not, I feel like it’s worth running our own analysis, to see how well our numbers correspond to theirs.

meyerweb commented 2 years ago

Oh, and on Ruby, I’m mostly interested in “X% of pages use CSS Ruby”. If that returns a surprisingly high number, by which I mean anything above single-digit percentages, I’d be interested in the followup of which properties are used how much.

rviscomi commented 2 years ago

We integrate Wappalyzer's detections into our testing, so it's the same corpus.

Thanks for clarifying these things. I should have the data in the next few days and I'll ping here and/or Slack when it's ready.

svgeesus commented 2 years ago

For ease of comparison, the 2020 CSS chapter especially the 2020 results sheet

svgeesus commented 2 years ago

@rviscomi last year you commented:

Rick Viscomi 7 Dec 2020 @chris@w3.org for context Lea and I decided to rerun some color/gradient queries and remove the 100 KB limitation we had because we found it to be significantly biasing certain results. The limitation was to prevent OOM errors, but we found a different way to work around that.

To compare like with like, are the 2021 results with or without the 100kB limit?

rviscomi commented 2 years ago

@svgeesus if there were any 2020 results that had both with and without the limit, this year's results correspond to the version without the limit.

GeekBoySupreme commented 2 years ago

@meyerweb if there are certain portions of the chapter you'd like me to tackle, let me know.

meyerweb commented 2 years ago

@GeekBoySupreme Anything you want to tackle, go for it! Nothing off-limits.

meyerweb commented 2 years ago

I’m late making progress on this — health and home situation got unexpectedly overwhelming just as my writing was scheduled to start. I am dubious we can finish the draft by this Sunday, but I do think we can be finished with no more than a week’s delay. @GeekBoySupreme, please add whatever you have so far to the draft document and we’ll work from there.

rviscomi commented 2 years ago

Thanks for the update @meyerweb, hope your situation improves soon. A week's delay would be totally manageable and I can try to offset that by prioritizing any markdown figures needed to complete the final milestone.

GeekBoySupreme commented 2 years ago

Apologies, I was a bit swamped. @meyerweb I have taken some notes and have a very rough draft, I would add them to the draft doc by Saturday.

meyerweb commented 2 years ago

@GeekBoySupreme Awesome! I’ve just finished pulling over charts from the analysis Google Sheet into the draft Google Doc so that we mirror last year’s structure, and have added charts for some of the new material.

@rviscomi I marked nine sections TK for sections I either couldn’t find the related analysis, or the analysis that exists didn’t fit the purpose. (Most likely due to imprecise description.) Let me know when you want to chat about those; some time next week is fine with me.

meyerweb commented 2 years ago

(Addendum: I left notes on the TKs in the Google Doc to explain why each is there.)

meyerweb commented 2 years ago

@rviscomi: Perfect, thanks!

To everyone else: I drafted about a third of the chapter today, stopping here: https://docs.google.com/document/d/18OV1ngkQxdJdENkYzHOdNRtzMLo1vVv9Tg6a9pGfSSE/edit#heading=h.8ppvzpu4dlkm. Current plan is to write the second third tomorrow, and the last third Wednesday. I did skip writing the intros for each section (these are marked “TK intro” with an orange highlight) in order to make more headway on the analytical text. Fact-checking and overall draft-level review notes are welcome on the parts that I’ve written.

@GeekBoySupreme, if you have any sections you’d like to tackle, particularly in the last third of the document, that would be great. Alternatively, if you want to go through the parts I wrote and see if you want to add anything, that would also be great.

GeekBoySupreme commented 2 years ago

Would go through. And also pick up the last third.

bkardell commented 2 years ago

I'm discussing some of this with @meyerweb and since I am not listed as a reviewer or something I can't leave comments contextually on the things we're discussing. It would be helpful to get that, I've requested access... if you want to list me as a reviewer or something, it's fine.

meyerweb commented 2 years ago

@rviscomi @LeaVerou There’s a huge discrepancy between this year’s custom property names analysis and last year’s. Last year, Avada was on top with nearly 35% of all custom names. This year, it got 3.7%. Both analyses are (or at least appear to be) based on mobile. It feels like either Avada didn’t get the credit it should this year, or got way too much last year.

A glance at the pivot table this year (see https://docs.google.com/spreadsheets/d/12vQIA0xsC5Jr3J9Sh03AcAvgFjMAmP1xSS6Tjai9LF0/edit#gid=725813203) makes me think the affiliation may have gone haywire one way or the other: Avada gets 31.48% of desktop, and 3.67% of mobile. There is a smaller but still substantial discrepancy with Bootstrap between desktop and mobile.

FYI: I filled in all the unaffiliated custom properties with “Miscellaneous” in this year’s sheet, so the pivot table and thus the pie chart wouldn’t have a (blank) entry. if those end up being overwritten by a new analysis run, no worries. Let me know what you find, or what I can do to help dig into this.