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
611 stars 170 forks source link

CSS 2020 #898

Closed foxdavidj closed 3 years ago

foxdavidj commented 4 years ago

Part I Chapter 1: CSS

Content team

Authors Reviewers Analysts Draft Queries Results
@LeaVerou @svgeesus @rachelandrew @fantasai @mirisuzanne @j9t @catalinred @hankchizljaw @dooman87 @rviscomi @leaverou Doc *.sql Sheet

Content team lead: @LeaVerou

Welcome chapter contributors! You'll be using this issue throughout the chapter lifecycle to coordinate on the content planning, analysis, and writing stages.

The content team is made up of the following contributors:

New contributors: If you're interested in joining the content team for this chapter, just leave a comment below and the content team lead will loop you in.

Note: To ensure that you get notifications when tagged, you must be "watching" this repository.

Milestones

0. Form the content team

1. Plan content

2. Gather data

3. Validate results

4. Draft content

5. Publication

LeaVerou commented 4 years ago

Whoops, I thought I had sweeped already, this one must have been under the carpet 😄 I just did a more thorough sweep and removed it from there and one other query.

rviscomi commented 4 years ago

@Tiggerito @LeaVerou I've added results for a media query feature query to the sheet. It suggest that ~79% of pages have responsiveness built in. We don't necessarily know if the whole page is responsive or just some part of it. Note that this is only based on max-width adoption but a design could also be responsive with min-width.

LeaVerou commented 4 years ago

@rviscomi Also in theory max-height and min-height, though that's more rare and typically not used in isolation. Since we don't know the intersection or union of these, we'd need a separate query to determine how many websites might be "responsive", that calculates the union of *-width, *-height, and *-aspect-ratio features.

tunetheweb commented 4 years ago

I’d also argue that an HTML page is by default responsive - even without any media queries! 😀 It’s only when we add CSS with expectations that we stop it being responsive!

rviscomi commented 4 years ago

@LeaVerou added another query/sheet to count pages with any height/width/aspect-ratio feature.

Tiggerito commented 4 years ago

Cheers for all that. @aleyda hopefully that covers what you need.

aleyda commented 4 years ago

Thanks @Tiggerito and @rviscomi! This is great :D

LeaVerou commented 4 years ago

@rachelandrew All the layout queries are done and the results are in the spreadsheet could you please review as soon as you can and let us know if anything looks off?

rachelandrew commented 4 years ago

@LeaVerou this looks great, and really interesting.

LeaVerou commented 4 years ago

@rachelandrew Cool, if everything looks ok you could start the draft of your section in the doc whenever you want! I'm still working on the queries, but will start my sections soon after.

@svgeesus I'm still working on fixing a few potential issues with the color results, but you could take a look at the spreadsheet too.

rachelandrew commented 4 years ago

@LeaVerou ok, so looking at the schedule, we've only got a few days until this is supposed to be complete which I'm not going to make. What's a realistic deadline for the layout stuff?

LeaVerou commented 4 years ago

I wouldn't be able to make that either. I'd bet money that @svgeesus can't make it either, given TPAC and ICC all meeting this week.

Indeed, according to the target schedule we're quite significantly behind, but looking at the chapter progress summary, it looks like we're not alone 😅

What would be a realistic deadline for you?

rviscomi commented 4 years ago

@rachelandrew @LeaVerou @svgeesus we'll be announcing a project timeline change soon that will effectively add a month to all of the milestones, given the unexpected delays many chapters are facing with the analysis phase. That would put the new first draft milestone at November 12. Is that feasible?

LeaVerou commented 4 years ago

Yay!! Absolutely feasible for me!

rachelandrew commented 4 years ago

Yep that sounds reasonable - thanks!

svgeesus commented 4 years ago

Is that feasible? Yeah, that works for me!

svgeesus commented 4 years ago

image

but

image

(confused)

svgeesus commented 4 years ago

mobile | indianred | 7,139 | 98,027,821 | 0.01%

Okay, so calls to get rid of indianred (and navahowhite and mocossain) now have some usage data

rviscomi commented 4 years ago

(confused)

The top one is in terms of incidence on pages and the bottom in terms of frequency of use. Each sheet also comes with a comment with the correct interpretation of the results.

If you have any other data questions feel free to leave a comment in the sheet. I subscribe to all comments, so no need to @ me. That may scale better as you review all the data :)

svgeesus commented 4 years ago

A nice quote from Ars Technica “Tomato” versus “#FF6347”—the tragicomic history of CSS color names:

“I view it with amusement that the colors seem to have migrated into CSS. I just laugh at it,” Fulton told Ars. “I think if someone were to go and crawl over the top 100 or top 1,000 sites and take a look at how various colors are specified, I’m willing to bet you’d still find close to zero percent using color names beyond ‘white’ or ‘black.’”

Looks like that bet can be resolved.

foxdavidj commented 4 years ago

@LeaVerou in case you missed it, we've adjusted the milestones to push the launch date back from November 9 to December 9. This gives all chapters exactly 7 weeks from now to wrap up the analysis, write a draft, get it reviewed, and submit it for publication. So the next milestone will be to complete the first draft by November 12.

However if you're still on schedule to be done by the original November 9 launch date we want you to know that this change doesn't mean your hard work was wasted, and that you'll get the privilege of being part of our "Early Access" launch.

Please see the link above for more info and reach out to @rviscomi or me if you have any questions or concerns about the timeline. We hope this change gives you a bit more breathing room to finish the chapter comfortably and we're excited to see it go live!

svgeesus commented 3 years ago

So 2.8% of pages use named colors which is lower than I would have expected, and only 0.3% use the deprecated, then partly undeprecated system colors

And the most common system color is Background, which is deprecated and represents the desktop background color.

LeaVerou commented 3 years ago

@svgeesus I believe that is 2.8% of colors are named color, not 2.8% of pages use named colors.

And the most common system color is Background, which is deprecated and represents the desktop background color.

That is a mistake of the query which has been fixed. @rviscomi ?

rviscomi commented 3 years ago

I believe that is 2.8% of colors are named color, not 2.8% of pages use named colors.

Yes, also each sheet should also have a comment with the intended interpretation.

That is a mistake of the query which has been fixed. @rviscomi ?

The query did need to be rerun but the results have only changed very slightly. Background on desktop is still used 2.3% of the time.

Also FYI for all authors and reviewers, the sheet has been updated with the results of all 103 (!!) queries for this chapter. Please review the results and let me know if you see anything unexpected. It's easiest for me if you leave a comment in the sheet so I can track everything in the context of the metric/results. You may need to request edit access to be able to comment.

LeaVerou commented 3 years ago

Since we have 6 (!) times as many metrics as the average chapter, and one of the authors has pulled out, I was wondering if any of the reviewers (@fantasai @mirisuzanne @j9t @catalinred @hankchizljaw) were interested in authoring a section or two?

Sections that are up for grabs are: Selectors, Values & Units, Transitions & Animations, Responsive Design (though @rachelandrew may have dibs on that), Browser Support

j9t commented 3 years ago

were interested in authoring a section

I’d love to but I’ve been using up my spare capacity on Markup/HTML. (Count me in for review though, that’s not affected.)

LeaVerou commented 3 years ago

Hi reviewers @fantasai @mirisuzanne @j9t @catalinred @hankchizljaw !

Since we are only 16 days from launch, it may be a good idea to start iterating earlier, rather than later. There are many sections whose draft is at a stage it could benefit from some review, namely those whose title does not include "[TBD]" or "[WIP]". Visualizations have not been added yet, though there are placeholders for them. A few numbers are also missing, those are noted in the prose with ??%, and in the title with [missing numbers].

Feel free to edit directly if you are reasonably certain about a correction (e.g. typos, grammar mistakes etc), or add comments for more substantive changes.

j9t commented 3 years ago

Hi @LeaVerou—this is probably very present for you, but which documents are you referring to? Is there an overview? (I can’t spot any pointers scanning this thread.)

svgeesus commented 3 years ago

Hi @j9t this document which is linked from the first post in this issue

j9t commented 3 years ago

Leaving some feedback here that I couldn’t quite leave in the doc. This was a first scan, I’m on standby to help where I can.

rachelandrew commented 3 years ago

I just added an initial draft of layout.

Is someone doing a copy edit of this? I know we have tech editors/reviewers.

tunetheweb commented 3 years ago

Yes there will be a copy edit once Authors and Reviewers are finish and have converted to Markdown and committed it to Git - see #1432 .

The expectation, however, is that the Authors and Reviewers have it in a state they'd be happy to publish, to help ease that load on editing and then copy editing is to get a consistent style across the chapters and have an independent pairs of eyes on it from a readability perspective, outside of the main content team for that chapter. Still the editing process can take a fair bit of time as we ask Authors to review all the edits to make sure they are happy with the suggested changes and we haven't introduced any inaccuracies. More details of the process and what we typically look for in the Editor's Guide.

But that's ahead of us. Let's get the draft in a state you all are happy with, and then convert to Markdown, and then we can look at editing.

Btw if we have any professional editors then we'll gladly accept any more help in the editing team for other chapters 😉

LeaVerou commented 3 years ago
  • General feedback: This is already great! You’ve collected a huge wealth of information and the doc will make more for a meaningful snapshot of where we are with CSS in 2020. I think everyone interested in CSS can and should look forward to this chapter.

Thank you!

  • Structure: On reading I found the impact of the different sections to be a bit “volatile”—maybe it’s already on your radar, perhaps on the editors’, however revisiting the order of the sections could make it easier to work with.

Could you elaborate? Is there a different order you'd recommend?

  • Style (up to the editors, but this one stood out): The chapter uses many exclamation marks (47 on searching) 😅

I do like my exclamation marks 😛 But feel free to remove any obviously superfluous ones (or use the "suggest edits" feature if you’re not comfortable directly removing)

  • Contents, side note: I hope I raised this in the very beginning—do you plan to look into CSS DRYness (ratio unique/total declarations)? Though convinced in the value of looking at this, I’m mostly curious. I understand the chapter to be quite comprehensive already.

It's a little late to add additional metrics, the call for metrics was in July... However I'm intrigued by this and I think it could be an interesting metric. I could try to sneak it in at the last moment, but I'll need your help. Could you please open an issue here and elaborate a little on the algorithm you envision (is it just number of unique declarations? What kind of normalization would we do?), how you'd interpret the data, and what kind of visualizations would be helpful. I can't promise anything, but I'll try.

I assume you're criticizing this repetition when it comes to CSS as an output target, since when authoring DRY is not the begin all and end all, but repetition can aid understandability.

  • Reviewing: Many missing numbers as well as lack of graphics currently makes reviewing very difficult—to summon all reviewers it may be helpful to get this all into place, or to ask for very specific reviews to use us reviewers effectively.

Oh ok. In most of my experience writing and reviewing, most figures tended to come after review, and existed solely as placeholders during the review stage. However, if reviewers feel it's best to wait until visualizations are in place and the document is in better shape, that's fine too. In general though, the more fleshed out a draft is, the harder it is to iterate and make drastic changes (not just in writing; e.g. in usability initial user studies and iterations are often done on paper prototypes).

j9t commented 3 years ago

I filed https://github.com/LeaVerou/css-almanac/issues/54 for declaration repetition.

On the other items I’ll either follow up in the doc or wait for additional calls for review to check again.

LeaVerou commented 3 years ago

Hi everyone,

I figured I'd post a progress update. At this point, we have most of the visualizations and missing numbers in place, and the draft is in much better shape. These are the things that still need to be done, please let me know if I'm forgetting anything:

8 days left until launch!

rachelandrew commented 3 years ago

I'll finish the RWD section tomorrow, sorry for the delay. I'd offered to do it then assumed someone else was, however I'll get it done.

LeaVerou commented 3 years ago

@j9t Good news: I did manage to query declaration repetition, you can find the results in this sheet: https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=2124098640 There are percentiles, for number of declarations, unique declarations, and ratios.

Do you think you'll be able to add a paragraph on it by tomorrow, either in the Meta section, or in the Usage section (I think it would fit in either)?

j9t commented 3 years ago

https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=2124098640

Awesome! Very cool to see this. Happy to write down something. I’d have a question related to the data though—can you give me comment access? (I need to check on “unique_ratio” and why it doesn’t seem to reflect unique/total—maybe I miss something silly, maybe there’s something we need to update.)

rviscomi commented 3 years ago

Granted!

LeaVerou commented 3 years ago

Hi everyone,

2 days until launch! 🚀

Dear reviewers (@fantasai @mirisuzanne @j9t @catalinred @hankchizljaw), This is a last call for review: tomorrow we will need to move the draft to Markdown, so please please please make sure to take a look at some point today if you haven't already. Review can still continue on the MD article, but it will be a bit more hassle than just leaving comments or proposing changes on Google Docs. Even if you don't have time to review the entire thing, some review is better than none.

A few sections need work still:

Apart from that, the rest should be ready for review (though tweaks will still happen), so you might want to review earlier rather than later, and if there's time, take a look at the sections above later in the day.

Unfortunately, we will need to launch before copyediting and will thus have an "Unedited" label for the first few days. I decided that the tradeoff of getting more time for content review was worth it.

As you may guess by the rush, we're a bit behind schedule, but a) this is by far the largest chapter (> 3x bigger than the average chapter I believe) and b) compared to many other chapters, we're doing well. One thing to keep in mind is that the launch date is a very hard deadline, moving it even a day later is not an option, we will need to launch on December 9th with whatever we have.

Thank you all for your efforts, both throughout the last few months, and now for the home stretch!

LeaVerou commented 3 years ago

Hi again folks!

1 day until launch! 🚀

The draft is now basically done (besides a couple of pending figures) so it's time to convert it to Markdown. I would like to ask all of you to go in the doc and convert any links you see to Markdown links, any inline formatting to Markdown (adding asterisks as necessary), surround any inline code with backticks and so on. Most of it is already in Markdown, but not all. If we all work on this as soon as possible, porting it into the draft on Github will be very quick!

Thank you everyone for all your hard work on this! It's shaping up to be a great chapter!