Workshop: The CSS of State of JS

workshop.md

Watch the workshop on YouTube

Who, What Why

• Started with http://2016.stateofjs.com/ in 2016
  • Latest edition: https://2023.stateofjs.com/
• Mission: cure "JavaScript fatigue"
• 2019: added State of CSS
  • Latest edition: https://2024.stateofcss.com/
• 2023: added State of HTML, State of React
  • Latest edition: https://2024.stateofhtml.com/
  • Latest edition: https://2024.stateofreact.com/
• Also: TokyoDev
  • https://2024.surveys.tokyodev.com/

Philosophy:

Use the web to make surveys (more) fun

Also:

Handle 5+ surveys by myself without burning out

Workshop

The Stack

• GraphQL to load data
• Gatsby to build site
  • considering migration to Astro in the future
• React
• TypeScript
• SCSS
• Radix
• D3
  • useful utilities (e.g. for generating scales) even outside of D3 charts
• [deprecated] Styled-components

The Charts

• Before: Nivo
• Now: HTML/CSS/SVG

Why?

• Full compatibility
  • use same components (tooltips, etc.) inside and outside charts
• Full interactivity
  • not limited to SVG-compatible elements/interactions

• Responsiveness
  • SVG, Canvas, etc. are not responsive
• [in theory] 100% server-rendered with RSCs
  • avoid sending data/text to the client

Line Chart

https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/

• .chart-columns CSS Grid
  • (--totalColumns + 2) columns, 2 rows
  • grid-template-columns: min-content repeat(var(--totalColumns), 1fr) min-content;
  • grid-template-rows: var(--contentHeight) min-content;
    • we use a fixed chart height
  • nested subgrid
• SVG element inside .chart-lines-wrapper
• Future CSS: draw lines from point to point with anchor positioning?

Horizontal Bar Chart

https://2023.stateofjs.com/en-US/demographics/#age

• .chart-rows CSS Grid
• three columns: min-content 1fr min-content
• each bar receives CSS variables:
  • --percentageValue: 32.35; --width: 74.35072397150081; --offset: 0; --color1: #A978FC; --color2: #D1B6FD;

Responsive Chart

• lose parent-level display: grid;
• each row is now its own Grid

Stacked Bars

• uses position: absolute; to dynamically offset bars depending on sort.

SVG "font"

• how do you add a stroke to text on the web?
  • each label letter is an individual SVG taken from a SVG "font"

Animated Grouping

https://2023.stateofjs.com/en-US/libraries/#all_tools_experience

• same .chart-rows grid as before
• position: absolute enables:
  • dynamic offset/alignment
  • group animation
    • no native CSS way to animate DOM order change currently

Q&A