Skip to content

Tech Report: Visual improvements #999

Merged
tunetheweb merged 46 commits intomainfrom
cwvtech-visuals
Feb 14, 2025
Merged

Tech Report: Visual improvements #999
tunetheweb merged 46 commits intomainfrom
cwvtech-visuals

Conversation

@sarahfossheim
Copy link
Copy Markdown
Collaborator

@sarahfossheim sarahfossheim commented Jan 16, 2025

Should be a rather small PR, focused on styling improvements to the existing features. Based on the category dashboard PR.

Added

  • Images next to the technologies in the summary/comparison tables
  • Less distance between the checkboxes and tech names in the category summary table
  • Tech descriptions in the tech drilldown view
  • Good CWV visualization (progress bar) in the summary/comparison tables
  • Improved Lighthouse progress circles
  • More obvious client dropdown (Tech Report: Minor Visual Recommendations #990
  • Lighthouse progress circles in the comparison tables
  • Add images next to the tech name in the drilldown view
  • Add category descriptions

Still left to add

  • Improved color combinations in the line chart in the multi-tech view

Screenshots

Comparison view

4 technologies selected (React, Angular, jquery, Bootstrap), with a client selector on top of the page, and a summary table underneath. The summary shows the tech name + icon, # origins, % good cwvs as a number + progress bar, Lighthouse performance and lighthouse accessibility as a number + lighthouse color coded donut progress bar, and selected client.

Drilldown view

Drilldown view of Angular, showing the summary cards with a client selector on top of the page

sarahfossheim and others added 30 commits August 28, 2024 02:03
Co-authored-by: Rick Viscomi <rviscomi@users.noreply.github.com>
…summary, improve landing page card interaction
@sarahfossheim sarahfossheim changed the title Visual improvements Visual improvements [WIP] Jan 20, 2025
@sarahfossheim sarahfossheim added enhancement Tech Report HTTP Archive Technology Report labels Jan 20, 2025
@sarahfossheim sarahfossheim changed the title Visual improvements [WIP] [WIP] Visual improvements Jan 20, 2025
@sarahfossheim sarahfossheim self-assigned this Jan 20, 2025
@sarahfossheim sarahfossheim marked this pull request as draft January 20, 2025 00:04
@rviscomi rviscomi marked this pull request as ready for review January 30, 2025 17:31
@rviscomi rviscomi changed the title [WIP] Visual improvements Tech Report: Visual improvements Jan 30, 2025
Copy link
Copy Markdown
Member

@tunetheweb tunetheweb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@sarahfossheim
Copy link
Copy Markdown
Collaborator Author

@tunetheweb added the bug fix for the origin [object object] value to this PR :)

two summary cards, one showing 8M+ origins, the other one 297 technologies

Base automatically changed from cwvtech-category-dashboard to main February 13, 2025 21:06
@tunetheweb
Copy link
Copy Markdown
Member

Sarah, could you have a look at this? May I did a bad merge as there were some conflicts, but it's saying we have multiple id="client-breakdown" now?

@sarahfossheim
Copy link
Copy Markdown
Collaborator Author

@tunetheweb the client dropdown was moved in this PR, seems like it ended up twice on every page after merging the previous PR. Fixed it now 👍🏻

@tunetheweb tunetheweb merged commit 12b5896 into main Feb 14, 2025
@tunetheweb tunetheweb deleted the cwvtech-visuals branch February 14, 2025 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Tech Report HTTP Archive Technology Report

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tech Report: Overall good CWV vs Origins mismatch Tech Report: Minor Visual Recommendations

2 participants